diff --git a/docz/docs/03-demos/02-frontend/05-svelte.md b/docz/docs/03-demos/02-frontend/05-svelte.md index e59dbd8..57c7539 100644 --- a/docz/docs/03-demos/02-frontend/05-svelte.md +++ b/docz/docs/03-demos/02-frontend/05-svelte.md @@ -53,8 +53,26 @@ Typically, some users will create a spreadsheet with source data that should be loaded into the site. This sheet will have known columns. For example, "Name" and "Index" are used in [`pres.xlsx`](https://docs.sheetjs.com/pres.xlsx): + + +
SpreadsheetState
+ ![`pres.xlsx` data](pathname:///pres.png) + + +```js +[ + { Name: "Bill Clinton", Index: 42 }, + { Name: "GeorgeW Bush", Index: 43 }, + { Name: "Barack Obama", Index: 44 }, + { Name: "Donald Trump", Index: 45 }, + { Name: "Joseph Biden", Index: 46 } +] +``` + +
+ This naturally maps to an array of typed objects, as in the TS example below: ```ts @@ -71,18 +89,6 @@ const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); console.log(data); ``` -`data` will be an array of objects: - -```js -[ - { Name: "Bill Clinton", Index: 42 }, - { Name: "GeorgeW Bush", Index: 43 }, - { Name: "Barack Obama", Index: 44 }, - { Name: "Donald Trump", Index: 45 }, - { Name: "Joseph Biden", Index: 46 } -] -``` - A component will typically map over the data. The following example generates a TABLE with a row for each President: @@ -135,9 +141,9 @@ function exportFile() { This demo was tested in the following environments: -| Svelte | ViteJS | Date | -|:--------|:--------|:-----------| -| `4.2.8` | `5.0.5` | 2023-12-04 | +| SvelteJS | ViteJS | Date | +|:---------|:---------|:-----------| +| `4.2.18` | `5.2.13` | 2024-06-07 | ::: @@ -235,9 +241,9 @@ function exportFile() { This demo was tested in the following environments: -| Svelte | ViteJS | Date | -|:--------|:--------|:-----------| -| `4.2.8` | `5.0.5` | 2023-12-04 | +| SvelteJS | ViteJS | Date | +|:---------|:---------|:-----------| +| `4.2.18` | `5.2.13` | 2024-06-07 | ::: diff --git a/docz/docs/03-demos/02-frontend/19-bundler/04-esbuild.md b/docz/docs/03-demos/02-frontend/19-bundler/04-esbuild.md index 889f4d3..cfcaa5d 100644 --- a/docz/docs/03-demos/02-frontend/19-bundler/04-esbuild.md +++ b/docz/docs/03-demos/02-frontend/19-bundler/04-esbuild.md @@ -47,8 +47,19 @@ This demo was tested in the following environments: | ESBuild | Date | |:----------|:-----------| -| `0.14.14` | 2023-12-04 | -| `0.19.8` | 2023-12-04 | +| `0.21.4` | 2024-06-07 | +| `0.20.2` | 2024-06-07 | +| `0.19.12` | 2024-06-07 | +| `0.18.20` | 2024-06-07 | +| `0.17.19` | 2024-06-07 | +| `0.16.17` | 2024-06-07 | +| `0.15.18` | 2024-06-07 | +| `0.14.54` | 2024-06-07 | +| `0.13.15` | 2024-06-07 | +| `0.12.29` | 2024-06-07 | +| `0.11.23` | 2024-06-07 | +| `0.10.2` | 2024-06-07 | +| `0.9.7` | 2024-06-07 | ::: diff --git a/docz/docs/03-demos/12-static/08-nextjs.md b/docz/docs/03-demos/12-static/08-nextjs.md index 2820103..80a8858 100644 --- a/docz/docs/03-demos/12-static/08-nextjs.md +++ b/docz/docs/03-demos/12-static/08-nextjs.md @@ -36,13 +36,13 @@ time and how to read files on the server in NextJS lifecycle methods. NextJS collects telemetry by default. The `telemetry` subcommand can disable it: ```js -npx next@13.5.6 telemetry disable +npx -y next@13.5.6 telemetry disable ``` The setting can be verified by running ```js -npx next@13.5.6 telemetry status +npx -y next@13.5.6 telemetry status ``` ::: @@ -75,12 +75,26 @@ This demo was tested in the following environments: | NextJS | NodeJS | Date | |:----------|:----------|:-----------| -| ` 9.5.5` | `16.20.2` | 2023-12-04 | -| `10.2.3` | `16.20.2` | 2023-12-04 | -| `11.1.4` | `16.20.2` | 2023-12-04 | -| `12.3.4` | `20.10.0` | 2023-12-04 | -| `13.5.6` | `20.10.0` | 2023-12-04 | -| `14.0.3` | `20.10.0` | 2023-12-04 | +| ` 9.5.5` | `16.20.2` | 2024-06-07 | +| `10.2.3` | `16.20.2` | 2024-06-07 | +| `11.1.4` | `16.20.2` | 2024-06-07 | +| `12.3.4` | `20.14.0` | 2024-06-07 | +| `13.5.6` | `20.14.0` | 2024-06-07 | +| `14.2.3` | `20.14.0` | 2024-06-07 | + +::: + +:::info pass + +SheetJS libraries work in legacy NextJS apps. Older versions of this demo have +been tested against versions `3.2.3`, `4.2.3`, `5.1.0`, `6.1.2` and `7.0.3`. + +NextJS has made a number of breaking changes over the years. Older versions of +NextJS use legacy versions of ReactJS that do not support function components +and other idioms. + +[`examples/reactjs-legacy`](https://git.sheetjs.com/examples/reactjs-legacy) on +the SheetJS git server includes code samples for legacy NextJS versions. ::: @@ -554,13 +568,13 @@ When upgrading NextJS is not an option, NodeJS should be downgraded to v16. 0) Disable NextJS telemetry: ```js -npx next@13.5.6 telemetry disable +npx -y next@13.5.6 telemetry disable ``` Confirm it is disabled by running ```js -npx next@13.5.6 telemetry status +npx -y next@13.5.6 telemetry status ``` 1) Set up folder structure. At the end, a `pages` folder with a `sheets` @@ -583,7 +597,7 @@ curl -LO https://docs.sheetjs.com/next/sheetjs.xlsx :::note pass -The `next@13.5.6` dependency can be adjusted to pick a different version. For +The `next@13.5.6` depefndency can be adjusted to pick a different version. For example, NextJS `12.3.4` is installed with {`\ @@ -699,6 +713,13 @@ As explained in the summary, the `/getStaticPaths` and `/getStaticProps` routes are completely static. 2 `/sheets/#` pages were generated, corresponding to 2 worksheets in the file. `/getServerSideProps` is server-rendered. +:::info pass + +NextJS historically used lowercase Lambda (`λ`) to denote dynamic paths. This +was changed to a stylized lowercase F (`ƒ`) in recent versions of NextJS. + +::: + 9) Try to build a static site: @@ -741,7 +762,13 @@ This build will fail. A static page cannot be generated at this point because ### Static Site -10) Delete `pages/getServerSideProps.js` and rebuild: +10) Delete `pages/getServerSideProps.js`: + +```bash +rm -f pages/getServerSideProps.js +``` + +11) Rebuild the static site: @@ -758,17 +785,16 @@ module.exports = { webpack: (config) => { ``` -After editing `next.config.js`: +After editing `next.config.js`, run the build command: ```bash -rm -f pages/getServerSideProps.js npx next build ``` -Inspecting the output, there should be no lines with the `λ` symbol: +Inspecting the output, there should be no lines with `λ` or `ƒ`: ``` Route (pages) Size First Load JS @@ -782,7 +808,7 @@ Route (pages) Size First Load JS └ /sheets/1 ``` -11) Generate the static site: +12) Generate the static site: @@ -814,7 +840,7 @@ npx next build The static site will be written to the `out` subfolder -12) Serve the static site: +13) Serve the static site: ```bash npx http-server out @@ -825,16 +851,16 @@ testing the generated site. Note that `/getServerSideProps` will 404 since the page was removed. [^1]: See the ["Webpack" asset module demo](/docs/demos/static/webpack) for more details. -[^2]: See [`read` in "Reading Files"](/docs/api/parse-options) +[^2]: See [`read` in "Reading Files"](/docs/api/parse-options). [^3]: See ["SheetJS Data Model"](/docs/csf/) for more details. -[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) -[^5]: See [`readFile` in "Reading Files"](/docs/api/parse-options) -[^6]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) +[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output). +[^5]: See [`readFile` in "Reading Files"](/docs/api/parse-options). +[^6]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output). [^7]: See [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props) in the NextJS documentation. [^8]: See [`getStaticPaths`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) in the NextJS documentation. [^9]: See [`getServerSideProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) in the NextJS documentation. [^10]: See [`fallback` in getStaticPaths](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-false) in the NextJS documentation. [^11]: See [`sheet_to_html` in "Utilities"](/docs/api/utilities/html#html-table-output) [^12]: [`dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#common-props) is a ReactJS prop supported for all built-in components. -[^13]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) -[^14]: See ["Array of Objects" in the ReactJS demo](/docs/demos/frontend/react#rendering-data) +[^13]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output). +[^14]: See ["Array of Objects" in the ReactJS demo](/docs/demos/frontend/react#rendering-data). diff --git a/docz/docs/03-demos/30-cloud/18-github.md b/docz/docs/03-demos/30-cloud/18-github.md index a7ca1bd..3e5243f 100644 --- a/docz/docs/03-demos/30-cloud/18-github.md +++ b/docz/docs/03-demos/30-cloud/18-github.md @@ -190,7 +190,7 @@ Deno.writeFileSync(out_file, new TextEncoder().encode(csv));`} :::note Tested Deployments -This was last tested by SheetJS users on 2023 December 04. +This was last tested by SheetJS users on 2024 June 07. ::: diff --git a/tests/bundler-esbuild.sh b/tests/bundler-esbuild.sh new file mode 100755 index 0000000..4ec28a6 --- /dev/null +++ b/tests/bundler-esbuild.sh @@ -0,0 +1,55 @@ +#!/bin/bash +# https://docs.sheetjs.com/docs/demos/frontend/bundler/esbuild +cd /tmp +rm -rf sheetjs-esbrowser + +mkdir sheetjs-esbrowser +cd sheetjs-esbrowser +npm init -y + +npm i --save https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz +curl -LO https://docs.sheetjs.com/esbuild/esbrowser.js +curl -LO https://docs.sheetjs.com/esbuild/esbnode.js + +cat >index.html < +EOF + +cat >test.js < { + await new Promise((res,rej) => setTimeout(res, 1000)); + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + page.on("console", msg => console.log("PAGE LOG:", msg.text())); + await page.setViewport({width: 1920, height: 1080}); + const client = await page.target().createCDPSession(); + await client.send('Browser.setDownloadBehavior', { + behavior: 'allow', + downloadPath: require("path").resolve('./') + }); + page.on('request', req => console.log(req.url())); + await page.goto('http://localhost:7262/'); + await new Promise((res,rej) => setTimeout(res, 1000)); + await browser.close(); + process.exit(); +}); +EOF + +for n in 0.9.7 0.10.2 0.11.23 0.12.29 0.13.15 0.14.54 0.15.18 0.16.17 0.17.19 0.18.20 0.19.12 0.20.2 0.21.4; do + npx -y esbuild@$n --version + + ## Browser Test + npx -y esbuild@$n esbrowser.js --bundle --outfile=esb.browser.js + node test.js + npx -y xlsx-cli Presidents.xlsx | head -n 3 + rm -f esb.browser.js Presidents.xlsx + + npx -y esbuild@$n esbnode.js --bundle --platform=node --outfile=esb.node.js + node esb.node.js + npx -y xlsx-cli Presidents.xlsx | head -n 3 + rm -f esb.node.js Presidents.xlsx +done