syntaxbullet/docs.sheetjs.com
1
Fork 0
forked from sheetjs/docs.sheetjs.com
Code Pull Requests Activity

Demo refresh

Browse Source
This commit is contained in:
SheetJS 2025-09-13 08:44:30 -04:00
parent ac0f80025a
commit d74827a012
11 changed files with 236 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -12,7 +12,7 @@ init:
.PHONY: dev
dev:
cd docz; npm run start -- --host=0.0.0.0 --no-open; cd ..
cd docz; npm run start -- --host=0.0.0.0 --port 6996 --no-open; cd ..
.PHONY: serve
serve:

2
README.md
View File

@ -16,7 +16,7 @@ $ make init # install dependencies
$ make # build static site
$ make serve # serve static site
$ make dev # run dev server
$ make dev # run dev server on port 6996
$ make spell # spell check (.spelling custom dictionary)
$ make graph # build format graph and legend
```

12
docz/docs/03-demos/03-net/03-server/19-fastify.md
View File

@ -25,8 +25,8 @@ This demo was tested in the following deployments:
| Version | Date |
|:---------|:-----------|
| `4.29.0` | 2025-01-02 |
| `5.2.0` | 2025-01-02 |
| `4.29.1` | 2025-09-13 |
| `5.6.0` | 2025-09-13 |
:::
@ -37,10 +37,10 @@ imported from scripts that use FastifyJS.
### Exporting Data to Workbooks (GET)
The SheetJS `write` method[^1] with the option `type: "buffer"` generates NodeJS
Buffer objects containing the raw file data.
The SheetJS [`write`](/docs/api/write-options) method generates NodeJS `Buffer`
objects containing the raw file data (using the option `type: "buffer"`[^1]).
FastifyJS can directly handle `Buffer` data in `Response#end`
FastifyJS can directly handle `Buffer` data in `Response#end`.
The exported filename can be specified using the `Content-Disposition` header.
@ -162,7 +162,7 @@ fastify.listen({port: process.env.PORT || 3000}, (err, addr) => { if(err) throw
1) Install dependencies:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz fastify@4.29.0 @fastify/multipart@8`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz fastify@4.29.1 @fastify/multipart@8`}
</CodeBlock>
2) Start server

88
docz/docs/03-demos/12-static/01-lume.md
View File

@ -8,6 +8,11 @@ sidebar_custom_props:
type: native
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
[Lume](https://lume.land/) is a lightweight unopinionated static site generator.
It has a rich ecosystem of JavaScript-powered plugins[^1]
@ -23,8 +28,11 @@ powered by an XLSX spreadsheet.
## Integration Details
The official "Sheets" plugin[^2] uses SheetJS to load data from spreadsheets.
Under the hood, the plugin uses the SheetJS `read`[^3] method to parse files and
the `sheet_to_json`[^4] method to generate arrays of objects.
Under the hood, the plugin uses the following SheetJS methods:
- [`read`](/docs/api/parse-options) parses spreadsheet files.
- [`sheet_to_json`](/docs/api/utilities/array#array-output) generates arrays of
objects from worksheet data.
Lume supports refreshing data during development. The generated static sites
include the raw data without referencing the underlying spreadsheet files.
@ -113,7 +121,7 @@ named `"VicePresidents"`, then the following snippet would print data from the
#### File Formats
As explained in the official plugin documentation[^5], the loader loads XLSX.
As explained in the official plugin documentation[^3], the loader loads XLSX.
NUMBERS, and CSV files. Other extensions can be added through the `extensions`
property in the argument to the `sheets` plugin:
@ -133,8 +141,9 @@ This demo was tested in the following environments:
| Lume | Date |
|:---------|:-----------|
| `1.19.4` | 2025-01-02 |
| `2.4.3` | 2025-01-02 |
| `1.19.4` | 2025-09-13 |
| `2.5.3` | 2025-09-13 |
| `3.0.9` | 2025-09-13 |
This example uses the Nunjucks template format. Lume plugins support additional
template formats, including Markdown and JSX.
@ -143,26 +152,24 @@ template formats, including Markdown and JSX.
### Initial Setup
0) Install Deno[^6]
0) Install Deno[^4]
1) Create a stock site:
<Tabs>
<TabItem value="v1" label="v1">
```bash
mkdir -p sheetjs-lume
cd sheetjs-lume
deno run -Ar https://deno.land/x/lume@v2.4.3/init.ts
deno run -Ar https://deno.land/x/lume@v1.19.4/init.ts
```
When prompted, enter the following options. The initialization script has
changed over time, so not all questions will be asked.
When prompted, enter the following options:
- `What kind of setup do you want?`: select `Basic + plugins`
- `Choose the configuration file format`: select `_config.ts`
- `Do you want to install some plugins now?`: select `Yes`
- `Select the plugins to install`: select `sheets` and `nunjucks`
- `Do you want to setup a CMS?`: select `No` or `Maybe later`
The project will be configured and modules will be installed.
- `Select the plugins to install`: select `sheets` and press <kbd>Enter</kbd>
:::note pass
@ -170,6 +177,53 @@ The `nunjucks` plugin was included by default in Lume version 1.
:::
</TabItem>
<TabItem value="v2" label="v2">
```bash
mkdir -p sheetjs-lume
cd sheetjs-lume
deno run -Ar https://deno.land/x/lume@v2.5.3/init.ts
```
When prompted, enter the following options:
- `What kind of setup do you want?`: select `Basic + plugins`
- `Select the plugins to install`: select `sheets` and `nunjucks`
- `Do you want to setup a CMS?`: select `No` or `Maybe later`
:::note pass
The `nunjucks` plugin is not included by default in Lume version 2.
:::
</TabItem>
<TabItem value="v3" label="v3">
```bash
mkdir -p sheetjs-lume
cd sheetjs-lume
deno run -A https://lume.land/init.ts
```
When prompted, enter the following options:
- `What kind of setup do you want?`: select `Basic + plugins`
- `Select the plugins to install`: select `sheets` and `nunjucks`
- `Do you want to setup a CMS?`: select `No` or `Maybe later`
:::note pass
The `nunjucks` plugin is not included by default in Lume version 3.
:::
</TabItem>
</Tabs>
The project will be configured and modules will be installed.
2) Download https://docs.sheetjs.com/pres.xlsx and place in a `_data` subfolder:
```bash
@ -244,7 +298,5 @@ This site is self-contained and ready for deployment!
[^1]: See ["Plugins"](https://lume.land/plugins/?status=all) in the Lume documentation
[^2]: See ["Sheets"](https://lume.land/plugins/sheets/) in the Lume documentation
[^3]: See [`read` in "Reading Files"](/docs/api/parse-options)
[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
[^5]: See ["Formats"](https://lume.land/plugins/sheets/#formats) in the Lume documentation
[^6]: See ["Installation"](https://deno.com/manual/getting_started/installation) in the Deno documentation
[^3]: See ["Formats"](https://lume.land/plugins/sheets/#formats) in the Lume documentation
[^4]: See ["Installation"](https://docs.deno.com/runtime/getting_started/installation/) in the Deno documentation

6
docz/docs/03-demos/12-static/02-gatsbyjs.md
View File

@ -191,8 +191,8 @@ This demo was tested in the following environments:
| GatsbyJS | Date |
|:---------|:-----------|
| `5.14.1` | 2025-01-19 |
| `4.25.8` | 2025-01-02 |
| `5.15.0` | 2025-09-13 |
| `4.25.8` | 2025-09-13 |
:::
@ -241,6 +241,7 @@ git clone https://github.com/gatsbyjs/gatsby-starter-default sheetjs-gatsby
cd sheetjs-gatsby
git checkout 6bc4466090845f20650117b3d27e68e6e46dc8d5
npm install
mkdir .cache
cd ..
```
@ -250,6 +251,7 @@ cd ..
```bash
cd sheetjs-gatsby
npm i
npm run develop
```

10
docz/docs/03-demos/32-extensions/02-chromium.md
View File

@ -23,9 +23,10 @@ tables with a content script and a background script.
This demo was tested in the following deployments:
| Platform | Date |
|:-------------|:-----------|
| Chromium 131 | 2025-01-02 |
| Platform | Version | Date |
|:-------------|:--------|:-----------|
| Chromium 140 | V3 | 2025-09-13 |
| Chromium 137 | V2 | 2025-09-13 |
:::
@ -33,8 +34,7 @@ This demo was tested in the following deployments:
This demo showcases Manifest V2 and Manifest V3 extensions.
Chrome Web Store will not accept new V2 extensions, but these can be sideloaded
using the "Load unpacked" extension option in Developer mode.
Chrome 138 and later no longer support Manifest V2 extensions.
**New Chrome and Chromium Extensions should use Manifest V3!**

BIN
docz/static/chromium/SheetJSChromiumUnpackedV2.zip
View File

Binary file not shown.

BIN
docz/static/chromium/SheetJSChromiumUnpackedV3.zip
View File

Binary file not shown.

51
tests/tutorials/export/bun.sh Executable file
View File

@ -0,0 +1,51 @@
#!/bin/bash
# https://docs.sheetjs.com/docs/getting-started/installation/deno
cd /tmp
rm -rf sheetjs-bun
mkdir sheetjs-bun
cd sheetjs-bun
bun init -y
bun i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
cat <<EOF >SheetJSNodeJS.js
const XLSX = require("xlsx");
(async() => {
/* fetch JSON data and parse */
const url = "https://docs.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"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* 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", { compression: true });
})();
EOF
bun SheetJSNodeJS.js
npx xlsx-cli Presidents.xlsx | head

47
tests/tutorials/export/deno.sh Executable file
View File

@ -0,0 +1,47 @@
#!/bin/bash
# https://docs.sheetjs.com/docs/getting-started/installation/deno
cd /tmp
rm -rf sheetjs-deno
mkdir sheetjs-deno
cd sheetjs-deno
cat <<EOF >SheetJSDeno.ts
// @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs';
/* fetch JSON data and parse */
const url = "https://docs.sheetjs.com/executive.json";
const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter((row: any) => row.terms.some((term: any) => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map((row: any) => ({
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: number, r: any) => 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", { compression: true });
EOF
deno run -A SheetJSDeno.ts
npx xlsx-cli Presidents.xlsx | head

51
tests/tutorials/export/node.sh Executable file
View File

@ -0,0 +1,51 @@
#!/bin/bash
# https://docs.sheetjs.com/docs/getting-started/installation/deno
cd /tmp
rm -rf sheetjs-node
mkdir sheetjs-node
cd sheetjs-node
npm init -y
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
cat <<EOF >SheetJSNodeJS.js
const XLSX = require("xlsx");
(async() => {
/* fetch JSON data and parse */
const url = "https://docs.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"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* 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", { compression: true });
})();
EOF
node SheetJSNodeJS.js
npx xlsx-cli Presidents.xlsx | head