bun-bun-bun

This commit is contained in:
SheetJS 2023-10-22 01:40:02 -04:00
parent aeb932e1d0
commit 35d76f9a62
7 changed files with 603 additions and 413 deletions

@ -84,5 +84,93 @@ import * as cpexcel from 'xlsx/dist/cpexcel.full.mjs';
XLSX.set_cptable(cpexcel);
```
## Bundling
For server-side scripts, `bun build` can pre-optimize dependencies. The Bun
builder requires a proper `package.json` that includes the SheetJS dependency.
:::note
This example was last tested on 2023 October 21 against BunJS 1.0.6.
:::
0) Create a new project:
```bash
mkdir sheetjs-bun-dle
cd sheetjs-bun-dle
echo "{}" >> package.json
```
1) Install the library:
<CodeBlock language="bash">{`\
bun install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
2) Save the following script to `bun.js`:
```js title="bun.js"
// highlight-next-line
import * as XLSX from 'xlsx';
// highlight-next-line
import * as fs from 'fs';
// highlight-next-line
XLSX.set_fs(fs);
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/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 = XLSX.utils.json_to_sheet(rows);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
XLSX.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 */
XLSX.writeFile(workbook, "Presidents.xlsx");
```
3) Bundle the script with `bun build`:
```bash
bun build --target=bun bun.js --outfile=app.js
```
This procedure will generate `app.js`.
4) Remove the `node_modules` directory and `package.json` file:
```bash
rm package.json
rm -rf ./node_modules
```
5) Run the script:
```bash
bun app.js
```
If the script succeeded, the file `Presidents.xlsx` will be created. That file
can be opened in a spreadsheet editor.
[^1]: Bun releases before the official 1.0.0 release did not support tarball dependencies. If a pre-1.0.0 release must be used, the [ES Module script can be vendored](/docs/getting-started/installation/standalone#ecmascript-module-imports) or the [NodeJS module can be installed with a NodeJS-compatible package manager](/docs/getting-started/installation/nodejs).
[^2]: See [the relevant issue in the Bun issue tracker](https://github.com/oven-sh/bun/issues/101)

@ -0,0 +1,142 @@
---
title: Bundling Sheets with ViteJS
sidebar_label: ViteJS
pagination_prev: demos/index
pagination_next: demos/grid/index
sidebar_position: 3
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
[ViteJS](https://vitejs.dev/) is a modern build tool for generating static sites.
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
This demo uses ViteJS and SheetJS to export data. We'll explore how to add
SheetJS to a site using Browserify and how to export data to spreadsheets.
:::info pass
The [Vite section of the Content demo](/docs/demos/static/vitejs) covers asset
loaders. They are ideal for static sites pulling data from sheets at build time.
:::
:::note
This demo was last tested on 2023 October 21 against ViteJS `4.5.0`
:::
## Integration Details
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation with Yarn and other package managers.
After installing the SheetJS module in a ViteJS project, `import` statements
can load relevant parts of the library.
```js
import { read, utils, writeFileXLSX } from 'xlsx';
```
:::info pass
ViteJS requires third-party libraries to provide additional `package.json`
metadata. SheetJS library version 0.18.10 added the required metadata.
It is strongly recommended to [upgrade to the latest version](/docs/getting-started/installation/frameworks)
:::
## Complete Example
1) Create a new ViteJS project:
```bash
npm create vite@latest sheetjs-vite -- --template vue-ts
cd sheetjs-vite
npm i
```
2) Add the SheetJS dependency:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
3) Replace `src\components\HelloWorld.vue` with:
```html title="src\components\HelloWorld.vue"
<script setup lang="ts">
import { version, utils, writeFileXLSX } from 'xlsx';
interface President {
terms: { "type": "prez" | "viceprez"; }[];
name: { first: string; last: string; }
bio: { birthday: string; }
}
async function xport() {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/executive.json";
const raw_data: President[] = 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");
}
</script>
<template>
<button type="button" @click="xport">Export with SheetJS version {{ version }}</button>
</template>
```
4) Start the development server:
```bash
npm run dev
```
5) Open a web browser to `http://localhost:5173/` and click the export button.
6) Build the production site:
```bash
npx vite build
```
7) Verify the new site by running a local web server in the `dist` folder:
```bash
npx http-server dist
```
8) Access the displayed URL (typically `http://localhost:8080`) in a web browser
and click the export button.

@ -0,0 +1,146 @@
---
title: Bundling Sheets with RollupJS
sidebar_label: RollupJS
pagination_prev: demos/index
pagination_next: demos/grid/index
sidebar_position: 14
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
[RollupJS](https://rollupjs.org/) is a module bundler.
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
This demo uses RollupJS and SheetJS to export data. We'll explore how to bundle
SheetJS in a site using RollupJS and how to export data to spreadsheets.
:::note
This demo was last tested on 2023 October 21 against RollupJS 4.1.4
:::
## Integration Details
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation with Yarn and other package managers.
After installing the SheetJS module in a RollupJS project, `import` statements
can load relevant parts of the library:
```js
import { read, utils, writeFileXLSX } from 'xlsx';
```
#### Required Plugin
RollupJS can support NodeJS modules using the `@rollup/plugin-node-resolve`
plugin. The flag `--plugin @rollup/plugin-node-resolve` should be passed to the
RollupJS CLI tool
```bash
npx rollup index.js --plugin @rollup/plugin-node-resolve --file bundle.js --format iife
```
## Complete Example
0) Initialize a new project:
```bash
mkdir sheetjs-rollup
cd sheetjs-rollup
npm init -y
```
1) Install the tarball using a package manager:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.1.4 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.1.4 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.1.4 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
</Tabs>
2) Save the following to `index.js`:
```js title="index.js"
// highlight-next-line
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/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
```
This step will create `bundle.js`
4) Create a small HTML page that loads the script. Save to `index.html`:
```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script type="module" src="./bundle.js"></script>
</body>
</html>
```
5) Start a local HTTP server:
```bash
npx http-server .
```
Access the displayed URL (typically `http://localhost:8080/`) in a web browser.
Click on "Click here to export" to generate a file.

@ -0,0 +1,166 @@
---
title: Bundling Sheets with ParcelJS
sidebar_label: ParcelJS
pagination_prev: demos/index
pagination_next: demos/grid/index
sidebar_position: 20
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
[ParcelJS](https://parceljs.org/) is a module bundler.
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
This demo uses ParcelJS and SheetJS to export data. We'll explore how to bundle
SheetJS in a site using ParcelJS and how to export data to spreadsheets.
:::note
This demo was last tested on 2023 October 21 against parcel `2.10.0`
:::
## Integration Details
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation with Yarn and other package managers.
After installing the SheetJS module in a RollupJS project, `import` statements
can load relevant parts of the library:
```js
import { read, utils, writeFileXLSX } from 'xlsx';
```
:::warning Parcel Bug
Errors of the form `Could not statically evaluate fs call` stem from a Parcel
bug. Upgrade to Parcel version 1.5.0 or later.
:::
## Complete Example
This demo follows the [Export Example](/docs/getting-started/examples/export).
0) Initialize a new project:
```bash
mkdir sheetjs-parceljs
cd sheetjs-parceljs
npm init -y
```
1) Save the following to `index.html`:
```html title="index.html"
<body>
<h3>SheetJS <span id="vers"></span> export demo</h3>
<button id="xport">Click to Export!</button>
<!-- the script tag must be marked as `type="module"` -->
<!-- highlight-next-line -->
<script type="module">
// ESM-style import from "xlsx"
// highlight-next-line
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("vers").innerText = version;
document.getElementById("xport").onclick = async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/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");
};
</script>
<body>
```
2) Install the SheetJS NodeJS module:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
</Tabs>
#### Development
3) Run the ParcelJS development server:
```bash
npx -y parcel@2.10.0 index.html
```
The process will print a URL:
```
Server running at http://localhost:1234
```
4) Access the URL from the previous step (typically `http://localhost:1234`) in
a web browser and click the "Click to Export!" button to generate a file.
#### Production
5) Edit `package.json` and remove the following line:
```js title="package.json (search for this line and remove)"
"main": "index.js"
```
6) Build the production site:
```bash
npx -y parcel@2.10.0 build index.html
```
The production site will be stored in the `dist` folder
7) Start a local web server and serve the `dist` folder:
```bash
npx http-server dist
```
Access the displayed URL (typically `http://localhost:8080/`) in a web browser.
Click on "Click here to export" to generate a file.

@ -35,311 +35,12 @@ The following tools are covered in separate pages:
</li>);
})}</ul>
#### Browserify
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/browserify)**
## Bun
`bun bun` is capable of optimizing imported libraries in `node_modules`. In
local testing, a bundled script can save tens of milliseconds per run.
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
This demo was last tested on 2023 May 07 against Bun `0.5.9`
:::
1) Install the tarball using a package manager:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
</Tabs>
2) Save the following script to `bun.js`:
```js title="bun.js"
// highlight-next-line
import * as XLSX from 'xlsx';
// highlight-next-line
import * as fs from 'fs';
// highlight-next-line
XLSX.set_fs(fs);
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/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 = XLSX.utils.json_to_sheet(rows);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
XLSX.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 */
XLSX.writeFile(workbook, "Presidents.xlsx");
```
3) Bundle the script with `bun bun`:
```bash
bun bun bun.js
```
This procedure will generate `node_modules.bun`.
4) Run the script
```bash
bun bun.js
```
</details>
## Dojo
Integration details are included [in the "AMD" installation](/docs/getting-started/installation/amd#dojo-toolkit)
Complete Examples are included [in the "Dojo" demo](/docs/demos/frontend/legacy#dojo-toolkit)
#### esbuild
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/esbuild)**
## Parcel
Parcel should play nice with SheetJS out of the box.
:::warning Parcel Bug
Errors of the form `Could not statically evaluate fs call` stem from a Parcel
bug. Upgrade to Parcel version 1.5.0 or later.
:::
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
This demo was last tested on 2023 May 07 against parcel `2.8.3`
:::
This demo follows the [Presidents Example](/docs/getting-started/example).
1) Save the following to `index.html`:
```html title="index.html"
<body>
<h3>SheetJS <span id="vers"></span> export demo</h3>
<button id="xport">Click to Export!</button>
<!-- the script tag must be marked as `type="module"` -->
<!-- highlight-next-line -->
<script type="module">
// ESM-style import from "xlsx"
// highlight-next-line
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("vers").innerText = version;
document.getElementById("xport").onclick = async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/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");
};
</script>
<body>
```
2) Install the SheetJS node module:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
</Tabs>
3) Run the Parcel CLI tool:
```bash
npx -y parcel@2.8.3 index.html
```
4) Access the page listed in the output (typically `http://localhost:1234`) and
click the "Click to Export!" button to generate a file.
</details>
#### RequireJS
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/requirejs)**
## Rollup
Rollup requires `@rollup/plugin-node-resolve` to support NodeJS modules:
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
This demo was last tested on 2023 May 07 against Rollup 3.21.5
:::
1) Install the tarball using a package manager:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@3.21.5 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@3.21.5 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@3.21.5 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
</Tabs>
2) Save the following to `index.js`:
```js title="index.js"
// highlight-next-line
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/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"
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script type="module" src="./bundle.js"></script>
</body>
</html>
```
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.
</details>
## Snowpack
Snowpack works with no caveats.
@ -348,10 +49,18 @@ Snowpack works with no caveats.
:::note
This demo was last tested on 2023 May 07 against Snowpack `3.8.8`
This demo was last tested on 2023 October 21 against Snowpack `3.8.8`
:::
0) Initialize a new project:
```bash
mkdir sheetjs-snowpack
cd sheetjs-snowpack
npm init -y
```
1) Install the tarball using a package manager:
<Tabs groupId="pm">
@ -445,114 +154,6 @@ Click on "Click here to export" to generate a file.
</details>
#### SWC
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/swcpack)**
#### SystemJS
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/systemjs)**
## Vite
ViteJS is compatible with SheetJS versions starting from 0.18.10.
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
This demo was last tested on 2023 May 07 against ViteJS `4.3.5`
:::
1) Create a new ViteJS project:
```bash
npm create vite@latest sheetjs-vite -- --template vue-ts
cd sheetjs-vite
npm i
```
2) Add the SheetJS dependency:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
3) Replace `src\components\HelloWorld.vue` with:
```html title="src\components\HelloWorld.vue"
<script setup lang="ts">
import { version, utils, writeFileXLSX } from 'xlsx';
interface President {
terms: { "type": "prez" | "viceprez"; }[];
name: { first: string; last: string; }
bio: { birthday: string; }
}
async function xport() {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/executive.json";
const raw_data: President[] = 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");
}
</script>
<template>
<button type="button" @click="xport">Export with SheetJS version {{ version }}</button>
</template>
```
4) Run `npm run dev` and test functionality by opening a web browser to
`http://localhost:5173/` and clicking the button
5) Run `npx vite build` and verify the generated pages work by running a local
web server in the `dist` folder:
```bash
npx http-server dist/
```
Access `http://localhost:8080` in your web browser and click the export button.
</details>
:::note pass
The [Vite section of the Content demo](/docs/demos/static/vitejs) covers asset
loaders. They are ideal for static sites pulling data from sheets at build time.
:::
#### Webpack
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/webpack)**
## WMR
WMR works with no caveats.
@ -561,10 +162,18 @@ WMR works with no caveats.
:::note
This demo was last tested on 2023 May 07 against WMR `3.8.0`
This demo was last tested on 2023 Oct 21 against WMR `3.8.0`
:::
0) Initialize a new project:
```bash
mkdir sheetjs-wmr
cd sheetjs-wmr
npm init -y
```
1) Install the tarball using a package manager:
<Tabs groupId="pm">
@ -652,3 +261,42 @@ Click on "Click here to export" to generate a file.
</details>
#### Browserify
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/browserify)**
#### Bun
**[The exposition has been moved to a separate page.](/docs/getting-started/installation/bun#bundling)**
#### esbuild
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/esbuild)**
#### Parcel
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/parcel)**
#### RequireJS
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/requirejs)**
#### Rollup
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/rollup)**
#### SWC
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/swcpack)**
#### SystemJS
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/systemjs)**
#### Vite
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/vitejs)**
#### Webpack
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/webpack)**

@ -184,7 +184,7 @@ in the same folder as the script, `./pres.xlsx` will be a data module:
```js title="src/index.js"
import data from './pres.xlsx';
/* `data` is an array of objects from data/pres.xlsx */
/* `data` is an array of objects from ./pres.xlsx */
const elt = document.createElement('div');
elt.innerHTML = "<table><tr><th>Name</th><th>Index</th></tr>" +

@ -31,9 +31,9 @@ This demo covers use cases where data is available at build time. This flow is
suitable for end of week or end of month (EOM) reports published in HTML tables.
For processing user-submitted files in the browser, the
["Bundlers" demo](/docs/demos/frontend/bundler#vite) shows client-side bundling
of the SheetJS library. The ["ReactJS" demo](/docs/demos/frontend/react) shows
example sites using ViteJS with the ReactJS starter.
[ViteJS "Bundlers" demo](/docs/demos/frontend/bundler/vitejs) shows client-side
bundling of the SheetJS library. The ["ReactJS" demo](/docs/demos/frontend/react)
shows example sites using ViteJS with the ReactJS starter.
:::