bun-bun-bun
This commit is contained in:
parent
aeb932e1d0
commit
35d76f9a62
@ -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)
|
||||
142
docz/docs/03-demos/01-frontend/19-bundler/03-vitejs.md
Normal file
142
docz/docs/03-demos/01-frontend/19-bundler/03-vitejs.md
Normal file
@ -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.
|
||||
146
docz/docs/03-demos/01-frontend/19-bundler/14-rollup.md
Normal file
146
docz/docs/03-demos/01-frontend/19-bundler/14-rollup.md
Normal file
@ -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.
|
||||
166
docz/docs/03-demos/01-frontend/19-bundler/20-parcel.md
Normal file
166
docz/docs/03-demos/01-frontend/19-bundler/20-parcel.md
Normal 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.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user