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 403f251..8909fc4 100644 --- a/docz/docs/04-getting-started/03-demos/09-bundler.md +++ b/docz/docs/04-getting-started/03-demos/09-bundler.md @@ -560,6 +560,123 @@ Click on "Click here to export" to generate a file. +## SWC + +SWC provides `spack` for bundling scripts. + +
Complete Example (click to show) + +1) Install the dependencies using a package manager: + + + +
{`\
+$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+
+ + +
{`\
+$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+
+ + +
{`\
+$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+
+ + + +:::note + +The `regenerator-runtime` dependency is used for transpiling `fetch` and is not +required if the interface code does not use `fetch` or Promises. + +::: + +2) Save the following to `index.js`: + +```js title="index.js" +import { utils, version, writeFileXLSX } from 'xlsx'; + +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 an `spack.config.js` config file: + +```js title="spack.config.js" +const { config } = require('@swc/core/spack'); + +module.exports = ({ + entry: { + 'web': __dirname + '/index.js', + }, + output: { + path: __dirname + '/lib' + }, + module: {}, +}); +``` + +4) Build for production: + +```bash +npx spack +``` + +This command will create the script `lib/web.js` + +5) Create a small HTML page that loads the generated script: + +```html title="index.html" + + + + +

SheetJS Presidents Demo

+ + + + +``` + +6) Start a local HTTP server, then go to http://localhost:8080/ + +```bash +npx http-server build/ +``` + +Click on "Click here to export" to generate a file. + +
+ ## Vite :::caution diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index e1fbf70..309f2a1 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -60,6 +60,7 @@ The demo projects include small runnable examples and short explainers. - [`requirejs`](https://github.com/SheetJS/SheetJS/tree/master/demos/requirejs/) - [`rollup`](https://github.com/SheetJS/SheetJS/tree/master/demos/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)