From 60dca67f00888e3c08dca76874a0d6bdd10b405b Mon Sep 17 00:00:00 2001 From: SheetJS Date: Sun, 31 Jul 2022 14:48:02 -0400 Subject: [PATCH] rollup --- .../04-getting-started/03-demos/09-bundler.md | 187 ++++++++++++++++++ .../docs/04-getting-started/03-demos/index.md | 5 +- 2 files changed, 190 insertions(+), 2 deletions(-) diff --git a/docz/docs/04-getting-started/03-demos/09-bundler.md b/docz/docs/04-getting-started/03-demos/09-bundler.md index 8909fc4..725168c 100644 --- a/docz/docs/04-getting-started/03-demos/09-bundler.md +++ b/docz/docs/04-getting-started/03-demos/09-bundler.md @@ -461,6 +461,100 @@ CDN, uses it to load the standalone script from the SheetJS CDN, and uses the The `r.js` optimizer also supports the standalone scripts. +## Rollup + +Rollup requires `@rollup/plugin-node-resolve` to support NodeJS modules: + +
Complete Example (click to show) + +1) Install the tarball using a package manager: + + + +
{`\
+$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+
+ + +
{`\
+$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+
+ + +
{`\
+$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+
+ + + +2) Save the following to `index.js`: + +```js title="index.js" +// highlight-next-line +import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs'; + +document.getElementById("xport").addEventListener("click", async() => { +/* fetch JSON data and parse */ +const url = "https://sheetjs.com/executive.json"; +const raw_data = await (await fetch(url)).json(); + +/* filter for the Presidents */ +const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez")); + +/* flatten objects */ +const rows = prez.map(row => ({ + name: row.name.first + " " + row.name.last, + birthday: row.bio.birthday +})); + +/* generate worksheet and workbook */ +const worksheet = utils.json_to_sheet(rows); +const workbook = utils.book_new(); +utils.book_append_sheet(workbook, worksheet, "Dates"); + +/* fix headers */ +utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" }); + +/* calculate column width */ +const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10); +worksheet["!cols"] = [ { wch: max_width } ]; + +/* create an XLSX file and try to save to Presidents.xlsx */ +writeFileXLSX(workbook, "Presidents.xlsx"); +}); +``` + +3) Bundle the script: + +```bash +npx rollup index.js --plugin @rollup/plugin-node-resolve --file bundle.js --format iife +``` + +4) Create a small HTML page that loads the script. Save to `index.html`: + +```html title="index.html" + + + + +

SheetJS Presidents Demo

+ + + + +``` + + +5) Start a local HTTP server, then go to http://localhost:8080/ + +```bash +npx http-server . +``` + +Click on "Click here to export" to generate a file. + +
+ ## Snowpack Snowpack works with no caveats. @@ -772,3 +866,96 @@ Access http://localhost:8080 in your web browser. +## WMR + +WMR follows the same structure as Snowpack + +
Complete Example (click to show) + +1) Install the tarball using a package manager: + + + +
{`\
+$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + +
{`\
+$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + +
{`\
+$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + + +2) Save the following to `index.js`: + +```js title="index.js" +// highlight-next-line +import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs'; + +document.getElementById("xport").addEventListener("click", async() => { +/* fetch JSON data and parse */ +const url = "https://sheetjs.com/executive.json"; +const raw_data = await (await fetch(url)).json(); + +/* filter for the Presidents */ +const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez")); + +/* flatten objects */ +const rows = prez.map(row => ({ + name: row.name.first + " " + row.name.last, + birthday: row.bio.birthday +})); + +/* generate worksheet and workbook */ +const worksheet = utils.json_to_sheet(rows); +const workbook = utils.book_new(); +utils.book_append_sheet(workbook, worksheet, "Dates"); + +/* fix headers */ +utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" }); + +/* calculate column width */ +const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10); +worksheet["!cols"] = [ { wch: max_width } ]; + +/* create an XLSX file and try to save to Presidents.xlsx */ +writeFileXLSX(workbook, "Presidents.xlsx"); +}); +``` + +3) Create a small HTML page that loads the script. Save to `index.html`: + +```html title="index.html" + + + + +

SheetJS Presidents Demo

+ + + + +``` + +4) Build for production: + +```bash +npx wmr build +``` + +5) Start a local HTTP server in `dist` folder and go to http://localhost:8080/ + +```bash +npx http-server dist/ +``` + +Click on "Click here to export" to generate a file. + +
+ diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index 309f2a1..44b6460 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -57,11 +57,12 @@ The demo projects include small runnable examples and short explainers. - [`bun`](./bundler#bun) - [`esbuild`](./bundler#esbuild) - [`parcel`](./bundler#parcel) -- [`requirejs`](https://github.com/SheetJS/SheetJS/tree/master/demos/requirejs/) -- [`rollup`](https://github.com/SheetJS/SheetJS/tree/master/demos/rollup/) +- [`requirejs`](./bundler#requirejs) +- [`rollup`](./bundler#rollup) - [`snowpack`](./bundler#snowpack) - [`swc`](./bundler#swc) - [`systemjs`](https://github.com/SheetJS/SheetJS/tree/master/demos/systemjs/) - [`typescript`](https://github.com/SheetJS/SheetJS/tree/master/demos/typescript/) - [`vite`](./bundler#vite) - [`webpack 2.x`](https://github.com/SheetJS/SheetJS/tree/master/demos/webpack/) +- [`wmr`](./bundler#wmr)