diff --git a/docz/docs/02-getting-started/02-example.mdx b/docz/docs/02-getting-started/02-example.mdx index 0c6dcc9..0ff58e3 100644 --- a/docz/docs/02-getting-started/02-example.mdx +++ b/docz/docs/02-getting-started/02-example.mdx @@ -313,9 +313,9 @@ hosted (no `file:///` access). Install the dependencies: -```bash -npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -``` +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} + Save the following script to `snippet.js` and run `node snippet.js`: @@ -562,7 +562,7 @@ Save the following script to `snippet.html`: Save the following to `package.json`: -```json title="package.json" +{`\ { "name": "sheetjs-nwjs", "author": "sheetjs", @@ -570,10 +570,10 @@ Save the following to `package.json`: "main": "snippet.html", "dependencies": { "nw": "~0.66.0", - "xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz" + "xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz" } -} -``` +}`} + Install dependencies and run: @@ -596,12 +596,12 @@ of the React Native documentation before testing the demo. Create a new project by running the following commands in the Terminal: -```bash +{`\ npx react-native@0.70.6 init SheetJSPres --version="0.70.6" cd SheetJSPres - -npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-native-blob-util@0.17.1 -``` +\n\ +npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-native-blob-util@0.17.1`} + Save the following to `App.js` in the project: diff --git a/docz/docs/03-demos/02-grid/11-rdg.md b/docz/docs/03-demos/02-grid/11-rdg.md index 348ad84..39ae362 100644 --- a/docz/docs/03-demos/02-grid/11-rdg.md +++ b/docz/docs/03-demos/02-grid/11-rdg.md @@ -5,6 +5,7 @@ pagination_next: demos/net/index --- import current from '/version.js'; +import CodeBlock from '@theme/CodeBlock'; :::note @@ -115,9 +116,9 @@ cd sheetjs-rdg 2) Install dependencies: -```bash -npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-data-grid -``` +{`\ +npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid`} + 3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`. diff --git a/docz/docs/03-demos/02-grid/17-gdg.md b/docz/docs/03-demos/02-grid/17-gdg.md index a563e99..46543c7 100644 --- a/docz/docs/03-demos/02-grid/17-gdg.md +++ b/docz/docs/03-demos/02-grid/17-gdg.md @@ -5,6 +5,7 @@ pagination_next: demos/net/index --- import current from '/version.js'; +import CodeBlock from '@theme/CodeBlock'; :::note @@ -271,10 +272,9 @@ npm i Install SheetJS and Glide Data Grid required dependencies: -```bash -npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -npm i --save @glideapps/glide-data-grid lodash marked -``` +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.2.1`} + Start dev server: diff --git a/docz/docs/03-demos/04-static/09-nuxtjs.md b/docz/docs/03-demos/04-static/09-nuxtjs.md index 274a4e2..ec5c44c 100644 --- a/docz/docs/03-demos/04-static/09-nuxtjs.md +++ b/docz/docs/03-demos/04-static/09-nuxtjs.md @@ -5,18 +5,26 @@ pagination_next: demos/mobile/index --- import current from '/version.js'; +import CodeBlock from '@theme/CodeBlock'; `@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation and on-demand server rendering powered by spreadsheets. -## Nuxt Content v1 - :::note -This demo was tested on 2023 April 06 against Nuxt Content `v1.15.1`. +The following deployments were tested: + +| Nuxt Content | Nuxt | Date | +|:-------------|:---------|:-----------| +| `1.15.1` | `2.16.3` | 2023-04-06 | +| `2.3.0` | `3.0.0` | 2023-01-19 | ::: +## Nuxt Content v1 + +Nuxt Content v1 is designed to work with Nuxt v2. + ### Configuration Through an override in `nuxt.config.js`, Nuxt Content will use custom parsers. @@ -86,13 +94,6 @@ neatly with nested `v-for`: ### Nuxt Content Demo -:::note - -The project was generated using `create-nuxt-app v4.0.0`. The generated project -used Nuxt `v2.16.3` and Nuxt Content `v1.15.1`. - -::: - 1) Create a stock app: ```bash @@ -118,11 +119,11 @@ The project will be configured and modules will be installed. 2) Install the SheetJS library and start the server: -```bash +{`\ cd SheetJSNuxt -npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -npm run dev -``` +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz +npm run dev`} + When the build finishes, the terminal will display a URL like: @@ -243,11 +244,7 @@ will not change. ## Nuxt Content v2 -:::note - -This demo was tested on 2023 January 19 against Nuxt Content `v2.3.0`. - -::: +Nuxt Content v2 is designed to work with Nuxt v3. ### Overview @@ -305,14 +302,6 @@ Pages should use `ContentRenderer` to reference the data: ### Nuxt Content 2 Demo -:::note - -This demo was tested on 2023 January 19 against Nuxt Content `v2.3.0`. - -The generated project used Nuxt `v3.0.0`. - -::: - 1) Create a stock app and install dependencies: ```bash @@ -324,16 +313,17 @@ npx yarn add --dev @types/node 2) Install the SheetJS library and start the server: -```bash -npx yarn add https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -npx yarn dev -``` +{`\ +npx yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz +npx yarn dev`} + + When the build finishes, the terminal will display a URL like: ``` > Local: http://localhost:3000/ - ``` +``` The server is listening on that URL. Open the link in a web browser. diff --git a/docz/docs/03-demos/04-static/11-svelte.md b/docz/docs/03-demos/04-static/11-svelte.md index c8c2138..646746d 100644 --- a/docz/docs/03-demos/04-static/11-svelte.md +++ b/docz/docs/03-demos/04-static/11-svelte.md @@ -170,6 +170,12 @@ cd sheetjs-svelte npm i ``` +When prompted: + +- `Which Svelte app template?` select `Skeleton Project` +- `Add type checking with TypeScript?` select `Yes, using JavaScript with JSDoc` +- `Select additional options` press Enter (do not select options) + 2) Fetch the example file [`pres.xlsx`](https://sheetjs.com/pres.xlsx) and move to a `data` subdirectory in the root of the project: diff --git a/docz/docs/03-demos/05-mobile/01-reactnative.md b/docz/docs/03-demos/05-mobile/01-reactnative.md index ec5421c..4b54f7e 100644 --- a/docz/docs/03-demos/05-mobile/01-reactnative.md +++ b/docz/docs/03-demos/05-mobile/01-reactnative.md @@ -10,6 +10,7 @@ sidebar_custom_props: import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import CodeBlock from '@theme/CodeBlock'; The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported from the main `App.js` entrypoint or any script in the project. @@ -87,12 +88,12 @@ npx react-native init SheetJSRNFetch --version="0.72.0-rc.1" 2) Install shared dependencies: -```bash +{`\ cd SheetJSRNFetch curl -LO https://oss.sheetjs.com/assets/img/logo.png -npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -npm i -S react-native-table-component@1.2.0 @types/react-native-table-component -``` +npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz +npm i -S react-native-table-component@1.2.0 @types/react-native-table-component`} + Refresh iOS project by running `pod install` from the `ios` subfolder: @@ -259,9 +260,9 @@ fork as the spiritual successor. `react-native-blob-util` is an active fork of `rn-fetch-blob` -On the day that this demo was tested (2022 August 14), both `rn-fetch-blob` and -`react-native-blob-util` worked with the tested iOS and Android SDK versions. -The APIs are identical for the purposes of working with files. +When this demo was last tested, `rn-fetch-blob` and `react-native-blob-util` +both worked with the tested iOS and Android SDK versions. The APIs are identical +for the purposes of working with files. ::: @@ -436,9 +437,9 @@ await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + "sheetjs.xlsx :::note -This demo was tested on an Intel Mac on 2022 August 14 with RN `0.67.2`. +This demo was tested on an Intel Mac on 2023 April 30 with RN `0.72.0-rc.1`. -The iOS simulator runs iOS 15.5 on an iPhone 13. +The iOS simulator runs iOS 16.2 on an iPhone 14. The Android simulator runs Android 12 (S) Platform 31 on a Pixel 5. @@ -458,17 +459,17 @@ This example tries to separate the library-specific functions. 1) Create project: ```bash -npx react-native init SheetJSRN --version="0.67.2" +npx react-native init SheetJSRN --version="0.72.0-rc.1" ``` 2) Install shared dependencies: -```bash +{`\ cd SheetJSRN curl -LO https://oss.sheetjs.com/assets/img/logo.png -npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -npm i -S react-native-table-component@1.2.0 react-native-document-picker -``` +npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz +npm i -S react-native-table-component@1.2.0 react-native-document-picker@8.2.0`} + Refresh iOS project by running `pod install` from the `ios` subfolder: @@ -503,7 +504,7 @@ You should see the skeleton app: Install `react-native-blob-util` dependency: ```bash -npm i -S react-native-blob-util +npm i -S react-native-blob-util@0.17.1 ``` Add the highlighted lines to `index.js`: @@ -522,7 +523,8 @@ async function pickAndParse() { const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" }); let path = f.fileCopyUri; if (Platform.OS === 'ios') path = path.replace(/^.*\/Documents\//, RNFetchBlob.fs.dirs.DocumentDir + "/"); - const res = await RNFetchBlob.fs.readFile(path, 'ascii'); + const res = await (await fetch(path)).arrayBuffer(); // RN >= 0.72 + // const res = await RNFetchBlob.fs.readFile(path, 'ascii'); // RN < 0.72 return read(new Uint8Array(res), {type: 'buffer'}); } @@ -543,7 +545,7 @@ const make_width = ws => { Install `react-native-file-access` dependency: ```bash -npm i -S react-native-file-access +npm i -S react-native-file-access@2.6.0 ``` Add the highlighted lines to `index.js`: @@ -554,13 +556,19 @@ import { Table, Row, Rows, TableWrapper } from 'react-native-table-component'; // highlight-start import { read, write } from 'xlsx'; import { pickSingle } from 'react-native-document-picker'; +import { Platform } from 'react-native'; import { Dirs, FileSystem } from 'react-native-file-access'; async function pickAndParse() { - /* react-native-file-access does not need a copy */ - const f = await pickSingle({allowMultiSelection: false, mode: "open" }); - const res = await FileSystem.readFile(f.uri, "base64"); - return read(res, {type: 'base64'}); + /* react-native-file-access in RN < 0.72 does not need a copy */ + //const f = await pickSingle({allowMultiSelection: false, mode: "open" }); + //const res = await FileSystem.readFile(f.uri, "base64"); + //return read(res, {type: 'base64'}); + /* react-native-file-access in RN >= 0.72 needs a copy */ + const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" }); + let path = f.fileCopyUri; + const res = await (await fetch(path)).arrayBuffer(); + return read(new Uint8Array(res), {type: 'buffer'}); } async function writeWorkbook(wb) { @@ -580,7 +588,7 @@ const make_width = ws => { Install `rn-fetch-blob` dependency: ```bash -npm i -S rn-fetch-blob +npm i -S rn-fetch-blob@0.12.0 ``` Add the highlighted lines to `index.js`: @@ -599,7 +607,8 @@ async function pickAndParse() { const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" }); let path = f.fileCopyUri; if (Platform.OS === 'ios') path = path.replace(/^.*\/Documents\//, RNFetchBlob.fs.dirs.DocumentDir + "/"); - const res = await RNFetchBlob.fs.readFile(path, 'ascii'); + const res = await (await fetch(path)).arrayBuffer(); // RN >= 0.72 + // const res = await RNFetchBlob.fs.readFile(path, 'ascii'); // RN < 0.72 return read(new Uint8Array(res), {type: 'buffer'}); } @@ -620,7 +629,7 @@ const make_width = ws => { Install `react-native-fs` dependency: ```bash -npm i -S react-native-fs +npm i -S react-native-fs@2.20.0 ``` Add the highlighted lines to `index.js`: @@ -654,10 +663,14 @@ const make_width = ws => { -:::caution +:::warning -At the time of testing, the `npx install-expo-modules` step breaks the Android -project. The demo works as expected on iOS. +At the time of testing, Expo did not support RN 0.72 . The project should be +created with React Native 0.67.2: + +```bash +npx react-native init SheetJSRN --version="0.67.2" +``` ::: diff --git a/docz/docs/03-demos/07-data/01-websql.md b/docz/docs/03-demos/07-data/01-websql.md index 7a40675..4bc89fb 100644 --- a/docz/docs/03-demos/07-data/01-websql.md +++ b/docz/docs/03-demos/07-data/01-websql.md @@ -8,6 +8,7 @@ sidebar_custom_props: --- import current from '/version.js'; +import CodeBlock from '@theme/CodeBlock'; WebSQL is a popular SQL-based in-browser database available on Chrome. In practice, it is powered by SQLite, and most simple SQLite-compatible queries @@ -67,7 +68,7 @@ db.readTransaction(tx => :::note -This demo was last tested on 2023 February 26 +This demo was last tested on 2023 April 30 ::: @@ -139,9 +140,9 @@ of JS objects. 1) Install the dependencies: -```bash -npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz better-sqlite3@8.1.0 -``` +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz better-sqlite3@8.1.0`} + 2) Save the following to `node.mjs`: @@ -190,9 +191,9 @@ Bun ships with a built-in high-performance module `bun:sqlite`. 1) Install the dependencies: -```bash -npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -``` +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} + 2) Save the following to `bun.mjs`: @@ -241,20 +242,20 @@ Deno `sqlite` library returns raw arrays of arrays. 1) Save the following to `deno.ts`: -```ts title="deno.ts" +{`\ /* Load SQLite3 connector library */ import { DB } from "https://deno.land/x/sqlite/mod.ts"; - +\n\ /* Load SheetJS library */ -// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts" -import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs'; - +// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts" +import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs'; +\n\ /* Initialize database */ var db = new DB("northwind.db"); - +\n\ /* Create new workbook */ var wb = XLSX.utils.book_new(); - +\n\ /* Get list of table names */ var sql = db.prepareQuery("SELECT name FROM sqlite_master WHERE type='table'"); var result = sql.all(); @@ -272,9 +273,9 @@ result.forEach(function(row) { XLSX.utils.book_append_sheet(wb, ws, row[0]); } }); - +\n\ /* Write File */ -XLSX.writeFile(wb, "deno.xlsx"); -``` +XLSX.writeFile(wb, "deno.xlsx");`} + 2) Run `deno run --allow-read --allow-write deno.ts` and open `deno.xlsx` diff --git a/docz/docs/03-demos/11-bigdata/02-worker.md b/docz/docs/03-demos/11-bigdata/02-worker.md index a2cfe04..90720cc 100644 --- a/docz/docs/03-demos/11-bigdata/02-worker.md +++ b/docz/docs/03-demos/11-bigdata/02-worker.md @@ -160,12 +160,12 @@ const worker = new Worker( Inline workers additionally require the Blob MIME type `text/javascript`: -```js -const worker_code = `\ +{`\ +const worker_code = \`\\ /* load standalone script from CDN */ -import * as XLSX from "https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs"; +import * as XLSX from "https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs"; // ... do something with XLSX here ... -`; +\`; const worker = new Worker( URL.createObjectURL( new Blob( @@ -176,8 +176,8 @@ const worker = new Worker( ), // highlight-next-line { type: "module" } // second argument to Worker constructor -); -``` +);`} + @@ -226,31 +226,31 @@ In the following example, the script: - sends the string to the main browser context - adds the HTML to the page in the main browser context -```jsx live +{`\ function SheetJSFetchDLWorker() { const [__html, setHTML] = React.useState(""); - +\n\ return ( <>
); -} -``` +}`} +