diff --git a/docz/docs/03-demos/01-frontend/01-react.md b/docz/docs/03-demos/01-frontend/01-react.md index e851641..0018b87 100644 --- a/docz/docs/03-demos/01-frontend/01-react.md +++ b/docz/docs/03-demos/01-frontend/01-react.md @@ -372,7 +372,7 @@ and test the page. :::note -This demo was last run on 2023 July 03 using `create-react-app@5.0.1` and +This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and `react-scripts@5.0.1`. ::: @@ -529,7 +529,7 @@ and test the page. :::note -This demo was last run on 2023 July 03 using `create-react-app@5.0.1` and +This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and `react-scripts@5.0.1`. ::: diff --git a/docz/docs/03-demos/02-grid/12-vtl.md b/docz/docs/03-demos/02-grid/12-vtl.md index 918abce..1ed06d9 100644 --- a/docz/docs/03-demos/02-grid/12-vtl.md +++ b/docz/docs/03-demos/02-grid/12-vtl.md @@ -123,5 +123,13 @@ npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table- curl -L -o src/App.vue https://docs.sheetjs.com/vtl/App.vue ``` -4) run `npm run dev`. When you load the page in the browser, it will try to - fetch and load the data. +4) Start the dev server: + +```bash +npm run dev +``` + +5) Load the displayed URL (typically `http://localhost:5173`) in a web browser. + +When the page loads, it will try to fetch +and display the data diff --git a/docz/docs/03-demos/04-static/11-svelte.md b/docz/docs/03-demos/04-static/11-svelte.md index d9a5690..3ff40d2 100644 --- a/docz/docs/03-demos/04-static/11-svelte.md +++ b/docz/docs/03-demos/04-static/11-svelte.md @@ -22,7 +22,9 @@ from files and how to organize page scripts to process the files at compile time The ["Complete Example"](#complete-example) section includes a complete website powered by an XLSX spreadsheet. -:::note pass +:::info pass + +This demo focuses on server-side processing with SvelteKit and Svelte. The [Svelte demo](/docs/demos/frontend/svelte) covers general client-side usage. @@ -43,6 +45,12 @@ flowchart LR aoo --> |+page.svelte\ncomponent| html ``` +:::note + +This demo was tested on 2023 October 24 using SvelteKit `1.27.0` and Svelte `4.2.2` + +::: + ## Integration `+page.server.js` scripts can be pre-rendered by exporting `prerender` from the @@ -165,12 +173,6 @@ a simple HTML table without any reference to the existing spreadsheet file! ## Complete Example -:::note - -This demo was tested on 2023 July 12 using SvelteKit `1.22.2` and Svelte `4.0.5` - -::: - ### Initial Setup 1) Create a new site: diff --git a/docz/docs/03-demos/04-static/12-astro.md b/docz/docs/03-demos/04-static/12-astro.md index e82aea1..3f5c7c1 100644 --- a/docz/docs/03-demos/04-static/12-astro.md +++ b/docz/docs/03-demos/04-static/12-astro.md @@ -46,6 +46,12 @@ npx astro telemetry disable ::: +:::note + +This demo was last tested on 2023 October 24 using AstroJS `v3.3.4` + +::: + ## Integration :::info pass @@ -171,12 +177,6 @@ a simple HTML table without any reference to the existing spreadsheet file! ## Complete Example -:::note - -This demo was tested on 2023 July 30 using AstroJS `v2.9.6` - -::: - :::caution pass AstroJS has introduced a number of breaking changes. If the demo fails, please @@ -212,7 +212,7 @@ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} 4) Append the following lines to `src/env.d.ts`: -```ts title="src/env.d.ts" +```ts title="src/env.d.ts (add to end)" /* add to the end of the file */ declare module '*.numbers' { const data: string; export default data; } declare module '*.xlsx' { const data: string; export default data; } diff --git a/docz/docs/03-demos/05-mobile/01-reactnative.md b/docz/docs/03-demos/05-mobile/01-reactnative.md index ce00b8e..2cb3d41 100644 --- a/docz/docs/03-demos/05-mobile/01-reactnative.md +++ b/docz/docs/03-demos/05-mobile/01-reactnative.md @@ -593,11 +593,11 @@ await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + "sheetjs.xlsx :::note -This demo was tested on an Intel Mac on 2023 July 02 with RN `0.72.1`. +Each Android demo was last tested on 2023 September 03 with RN `0.72.6`. The +simulator used Android 13 ("Tiramisu") API 33 on a Pixel 3. -The iOS simulator runs iOS 16.2 on an iPhone 14. - -The Android simulator runs Android 12 (S) Platform 31 on a Pixel 5. +Each iOS demo was last tested on 2023 September 03 with RN `0.72.6`. The +simulator used iOS 17.0 on an iPhone 15 Pro Max. ::: @@ -615,7 +615,7 @@ This example tries to separate the library-specific functions. 1) Create project: ```bash -npx react-native init SheetJSRN --version="0.72.1" +npx react-native init SheetJSRN --version="0.72.6" ``` 2) Install shared dependencies: @@ -649,7 +649,7 @@ npx react-native run-ios You should see the skeleton app: -![React Native iOS App](pathname:///mobile/rnios1.png) +![React Native iOS App](pathname:///reactnative/ios1.png) 4) Pick a filesystem library for integration: @@ -660,7 +660,7 @@ You should see the skeleton app: Install `react-native-blob-util` dependency: ```bash -npm i -S react-native-blob-util@0.17.1 +npm i -S react-native-blob-util@0.19.2 ``` Add the highlighted lines to `index.js`: @@ -700,7 +700,7 @@ const make_width = ws => { Install `react-native-file-access` dependency: ```bash -npm i -S react-native-file-access@2.6.0 +npm i -S react-native-file-access@3.0.4 ``` Add the highlighted lines to `index.js`: @@ -824,6 +824,16 @@ npx install-expo-modules npm i -S expo-file-system expo-document-picker ``` +:::note pass + +In the most recent test, the installation asked a few questions. + +If prompted to change iOS deployment target, choose Yes. + +If prompted to install Expo CLI integration, choose No. + +::: + Add the highlighted lines to `index.js`: ```js title="index.js" @@ -889,11 +899,11 @@ The app can be tested with the following sequence in the simulator: Once selected, the screen should refresh with new contents: -![read file iOS](pathname:///mobile/rnios3.png) +![read file iOS](pathname:///reactnative/ios3.png) - Click "Export data". You will see a popup with a location: -![write file iOS](pathname:///mobile/rnios4.png) +![write file iOS](pathname:///reactnative/ios4.png) - Find the file and verify the contents are correct: @@ -912,7 +922,7 @@ There are no Android-specific steps. Emulator can be started with: npx react-native run-android ``` -![React Native Android App](pathname:///mobile/rnand1.png) +![React Native Android App](pathname:///reactnative/and1.png) The app can be tested with the following sequence in the simulator: @@ -924,11 +934,11 @@ The app can be tested with the following sequence in the simulator: Once selected, the screen should refresh with new contents: -![read file Android](pathname:///mobile/rnand3.png) +![read file Android](pathname:///reactnative/and3.png) - Click "Export data". You will see a popup with a location: -![write file Android](pathname:///mobile/rnand4.png) +![write file Android](pathname:///reactnative/and4.png) - Pull the file from the simulator and verify the contents: diff --git a/docz/static/reactnative/and1.png b/docz/static/reactnative/and1.png new file mode 100644 index 0000000..9a438a8 Binary files /dev/null and b/docz/static/reactnative/and1.png differ diff --git a/docz/static/reactnative/and3.png b/docz/static/reactnative/and3.png new file mode 100644 index 0000000..4cc5bcf Binary files /dev/null and b/docz/static/reactnative/and3.png differ diff --git a/docz/static/reactnative/and4.png b/docz/static/reactnative/and4.png new file mode 100644 index 0000000..e28151f Binary files /dev/null and b/docz/static/reactnative/and4.png differ diff --git a/docz/static/reactnative/ios1.png b/docz/static/reactnative/ios1.png new file mode 100644 index 0000000..00f677f Binary files /dev/null and b/docz/static/reactnative/ios1.png differ diff --git a/docz/static/reactnative/ios3.png b/docz/static/reactnative/ios3.png new file mode 100644 index 0000000..d442beb Binary files /dev/null and b/docz/static/reactnative/ios3.png differ diff --git a/docz/static/reactnative/ios4.png b/docz/static/reactnative/ios4.png new file mode 100644 index 0000000..893a978 Binary files /dev/null and b/docz/static/reactnative/ios4.png differ