LankyMoose/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-01-15 13:43:08 -05:00
parent 9e961360e9
commit b379b40145
22 changed files with 201 additions and 140 deletions

11
docz/docs/02-getting-started/02-examples/06-loader.md

@ -36,9 +36,9 @@ This demo was tested in the following configurations:
| Platform | Architecture | Date | | Platform | Architecture | Date |
|:------------------------------------------------------------------|:-------------|:-----------| |:------------------------------------------------------------------|:-------------|:-----------|
| NVIDIA RTX 4090 (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-08 | | NVIDIA RTX 4090 (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-08 |
| NVIDIA RTX 4080 SUPER (16 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2024-12-19 | | NVIDIA RTX 4080 SUPER (16 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 |
| AMD RX 7900 XTX (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2024-09-21 | | AMD RX 7900 XTX (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 |
| AMD RX 6800 XT (16 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2024-10-07 | | AMD RX 6800 XT (16 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 |
| Apple M2 Max 12-Core CPU + 30-Core GPU (32 GB unified memory) | `darwin-arm` | 2024-11-04 | | Apple M2 Max 12-Core CPU + 30-Core GPU (32 GB unified memory) | `darwin-arm` | 2024-11-04 |
SheetJS users have verified this demo in other configurations: SheetJS users have verified this demo in other configurations:
@ -723,7 +723,10 @@ a [sample cars dataset](pathname:///cd.xls) and displays the results.
SheetJS team members have tested this demo on Windows 10 and Windows 11 using SheetJS team members have tested this demo on Windows 10 and Windows 11 using
PowerShell and Ollama for Windows. PowerShell and Ollama for Windows.
SheetJS users have also tested this demo within Windows Subsystem for Linux. SheetJS team members have tested this demo on Windows 11 using Windows Subsystem
for Linux.
In addition, SheetJS users have also tested this demo on bare metal Linux.
::: :::

2
docz/docs/03-demos/02-frontend/01-kaioken.md

@ -63,7 +63,7 @@ loaded into the site. This sheet will have known columns.
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one
header row with "Name" and "Index" columns. The natural JS representation is an header row with "Name" and "Index" columns. The natural JS representation is an
object for each row, using the values in the first rows as keys: object for each row, where the keys are specified in the first row:
<table> <table>
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>

2
docz/docs/03-demos/02-frontend/02-react.md

@ -59,7 +59,7 @@ loaded into the site. This sheet will have known columns.
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one
header row with "Name" and "Index" columns. The natural JS representation is an header row with "Name" and "Index" columns. The natural JS representation is an
object for each row, using the values in the first rows as keys: object for each row, where the keys are specified in the first row:
<table> <table>
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>

2
docz/docs/03-demos/02-frontend/03-angular.md

@ -89,7 +89,7 @@ loaded into the site. This sheet will have known columns.
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one
header row with "Name" and "Index" columns. The natural JS representation is an header row with "Name" and "Index" columns. The natural JS representation is an
object for each row, using the values in the first rows as keys: object for each row, where the keys are specified in the first row:
<table> <table>
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>

2
docz/docs/03-demos/02-frontend/04-vue.md

@ -58,7 +58,7 @@ loaded into the site. This sheet will have known columns.
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one
header row with "Name" and "Index" columns. The natural JS representation is an header row with "Name" and "Index" columns. The natural JS representation is an
object for each row, using the values in the first rows as keys: object for each row, where the keys are specified in the first row:
<table> <table>
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>

2
docz/docs/03-demos/02-frontend/07-angularjs.md

@ -169,7 +169,7 @@ depends on the application.
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one
header row with "Name" and "Index" columns. The natural JS representation is an header row with "Name" and "Index" columns. The natural JS representation is an
object for each row, using the values in the first rows as keys: object for each row, where the keys are specified in the first row:
<table> <table>
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>

141
docz/docs/03-demos/02-frontend/10-openui5.md

@ -31,14 +31,14 @@ includes a complete example starting from the OpenUI5 "Worklist App Tutorial".
## Installation ## Installation
SheetJS libraries conform to the UI5 ECMAScript limitations[^1]. SheetJS SheetJS libraries conform to the UI5 ECMAScript requirements[^1]. SheetJS
libraries can be loaded in a UI5 site at different points in the app lifecycle. libraries can be loaded in a UI5 site at different points in the app lifecycle.
**HTML** #### HTML {#installation-html}
UI5 is typically loaded in a `SCRIPT` tag in `webapp/index.html`. Similarly, UI5 is typically loaded in a `SCRIPT` tag in `webapp/index.html`. Similarly,
[SheetJS Standalone scripts](/docs/getting-started/installation/standalone) [SheetJS Standalone scripts](/docs/getting-started/installation/standalone)
can be loaded in the same HTML page: can be loaded with a `SCRIPT` tag in the same HTML page:
<CodeBlock language="html" value="html">{`\ <CodeBlock language="html" value="html">{`\
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script> <script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
@ -50,39 +50,42 @@ in the ["API Reference"](/docs/api/) section of the documentation.
:::caution pass :::caution pass
The SheetJS Standalone script must be loaded before the UI5 bootstrap script: **The SheetJS Standalone script must be loaded before the UI5 bootstrap script**:
<CodeBlock language="html" value="html" title="webapp/index.html">{`\ <CodeBlock language="html" value="html" title="webapp/index.html (loading the SheetJS standalone script)">{`\
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>UI5 Walkthrough</title> <title>UI5 Walkthrough</title>
<!-- The SheetJS Standalone script must be loaded before the UI5 bootstrap -->
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script> <script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
<!-- UI5 bootstrap script -->
<script <script
id="sap-ui-bootstrap" id="sap-ui-bootstrap"
src="resources/sap-ui-core.js" src="resources/sap-ui-core.js"
...(other attributes)... ...(other attributes)...
> ></script>
</script>
</head> </head>
`} `}
</CodeBlock> </CodeBlock>
::: :::
**UI5 Module** #### UI5 Module {#installation-define}
The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone)
comply with AMD `define` semantics. They support `sap.ui.define` out of the box. comply with AMD `define` semantics. They support `sap.ui.define` out of the box.
If the SheetJS Standalone script is saved to `webapp/xlsx.full.min.js`, the base If the SheetJS Standalone script is saved to `webapp/xlsx.full.min.js`, the base
script `webapp/index.js` can load the library at `./xlsx.full.min`. script `webapp/index.js` can load the `./xlsx.full.min` dependency:
```js title="webapp/index.js" ```js title="webapp/index.js (loading the SheetJS dependency)"
sap.ui.define([ sap.ui.define([
// highlight-next-line // highlight-next-line
"./xlsx.full.min", // relative path to script, without the file extension "./xlsx.full.min", // relative path to script, without the file extension
/* ... other libraries ... */ /* ... other libraries ... */
], function( ], function (
// highlight-next-line // highlight-next-line
_XLSX // !! NOTE: this is not XLSX! A different variable name must be used _XLSX // !! NOTE: this is not XLSX! A different variable name must be used
/* ... variables for the other libraries ... */, /* ... variables for the other libraries ... */,
@ -108,15 +111,19 @@ depends on the application.
### JSON Model ### JSON Model
The OpenUI5 JSON Model is a way to store and manage your data in a format that's easy The UI5 `JSONModel`[^2] is a client-side model implementation for JavaScript
for JavaScript to work with. Think of it like a container that holds your spreadsheet object data. Think of it like a container that holds your spreadsheet data.
data and automatically updates your webpage whenever the data changes.
#### State `JSONModel` provides powerful two-way data binding capabilities. UI5 will
automatically updates your webpage whenever the data changes. It will also
respond to changes when users interact with components in the webpage.
#### State {#json-state}
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one
header row with "Name" and "Index" columns. The natural JS representation is an header row with "Name" and "Index" columns. The natural JS representation is an
object for each row, using the values in the first rows as keys: object for each row, where the keys are specified in the first row:
<table> <table>
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead> <thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>
@ -138,26 +145,25 @@ object for each row, using the values in the first rows as keys:
</td></tr></tbody></table> </td></tr></tbody></table>
The OpenUI5 `JSONModel`[^2] is a client-side model implementation that stores data as JSON. Here is a basic example of initializing a model. A more complete implementation
Here's a basic example of initializing a model, with a more complete implementation shown later: will be shown later.
<Tabs groupId="lang"> ```js title="UI5 JSONModel for rows of data"
<TabItem name="JS" value="JavaScript">
```js
sap.ui.define(["sap/ui/model/json/JSONModel"], function (JSONModel) { sap.ui.define(["sap/ui/model/json/JSONModel"], function (JSONModel) {
const oModel = new JSONModel({ presidents: [] }); // highlight-next-line
const oModel = new JSONModel({ presidents: [] });
}); });
``` ```
</TabItem>
</Tabs>
#### Updating State {#json-update}
#### Updating State Starting from a spreadsheet file, the SheetJS [`read`](/docs/api/parse-options)
method parses the data into a SheetJS workbook object[^6]. After selecting a
worksheet, the [`sheet_to_json`](/docs/api/utilities/array#array-output) method
generates row objects that can be assigned to the model.
The SheetJS [`read`](/docs/api/parse-options) and [`sheet_to_json`](/docs/api/utilities/array#array-output) Here is a sample flow diagram and method for downloading a workbook, generating
functions simplify state updates. OpenUI5's JSONModel provides powerful two-way data binding rows from the first worksheet, and updating a UI5 `JSONModel`:
capabilities.
```mermaid ```mermaid
flowchart LR flowchart LR
@ -172,15 +178,14 @@ flowchart LR
wb --> |wb.Sheets\nselect sheet| ws wb --> |wb.Sheets\nselect sheet| ws
ws --> |sheet_to_json\n\n| aoo ws --> |sheet_to_json\n\n| aoo
aoo --> |setProperty\nfrom model| model aoo --> |setProperty\nfrom model| model
linkStyle 1,2,3 color:blue,stroke:blue;
``` ```
<Tabs groupId="lang"> ```js title="Download workbook, extract data from first worksheet, and update JSONModel"
<TabItem name="JS" value="JavaScript">
```js
_loadExcelFile: async function () { _loadExcelFile: async function () {
/* Download from https://docs.sheetjs.com/pres.xlsx */ /* Download from https://docs.sheetjs.com/pres.xlsx */
const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer(); const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
// highlight-start // highlight-start
/* parse */ /* parse */
const wb = XLSX.read(f); // parse the array buffer const wb = XLSX.read(f); // parse the array buffer
@ -189,52 +194,45 @@ _loadExcelFile: async function () {
const data = XLSX.utils.sheet_to_json(ws); // generate objects const data = XLSX.utils.sheet_to_json(ws); // generate objects
/* update JSONModel */ /* update JSONModel */
this.getView().getModel().setProperty("/presidents", data); this.getView().getModel().setProperty("/presidents", data);
// highlight-end // highlight-end
} }
``` ```
</TabItem> #### Rendering Data {#json-render}
</Tabs>
In UI5, the "Model-View-Controller"[^3] pattern is used to organize code and
separate concerns. The view defines the UI structure, the controller handles the
logic, and the model manages the data.
#### Rendering Data ```xml title="Example View XML for displaying an array of objects"
In OpenUI5, the `Model-View-Controller`[^3] pattern is used to organize code and separate concerns.
The view defines the UI structure, the controller handles the logic, and the model manages the data.
```xml title="Example XML for displayin array of objects"
<mvc:View> <mvc:View>
<Page> <Page>
<!-- The Table component binds to the presidents array --> <!-- The Table component binds to the presidents array -->
<Table width="300px" items="{/presidents}"> <!-- highlight-next-line -->
<!-- Column definitions specify the table structure --> <Table width="300px" items="{/presidents}">
<columns> <!-- Column definitions specify the table structure -->
<Column> <columns>
<header> <Text text="Name" /> </header> <Column><header><Text text="Name" /></header></Column>
</Column> <Column><header><Text text="Value" /></header></Column>
<Column> </columns>
<header> <Text text="Value" /> </header> <!-- ColumnListItem template defines how each row should be rendered -->
</Column> <!-- highlight-start -->
</columns> <items>
<!-- ColumnItem template defines how each row should be rendered --> <ColumnListItem>
// highlight-start <cells>
<items> <Text text="{Name}" />
<ColumnItem> <Text text="{Index}" />
<cells> </cells>
<Text text="{Name}" /> </ColumnListItem>
<Text text="{Index}" /> </items>
</cells> <!-- highlight-end -->
</ColumnItem> </Table>
</items> </Page>
// highlight-end
</Table>
</Page>
</mvc:View> </mvc:View>
``` ```
#### Exporting Data {#json-export}
#### Exporting Data
The [`writeFile`](/docs/api/write-options) and [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input) The [`writeFile`](/docs/api/write-options) and [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input)
functions simplify exporting data. They are typically used in event handlers attached to buttons or other elements. functions simplify exporting data. They are typically used in event handlers attached to buttons or other elements.
@ -254,7 +252,7 @@ flowchart LR
```js ```js
/* get model data and export to XLSX */ /* get model data and export to XLSX */
onExport: function() { onExport: function () {
const data = this.getView().getModel().getProperty("/presidents"); const data = this.getView().getModel().getProperty("/presidents");
/* generate worksheet from model data */ /* generate worksheet from model data */
// highlight-next-line // highlight-next-line
@ -587,4 +585,5 @@ will generate a workbook that can be opened in a spreadsheet editor.
[^2]: See [`JSONModel`](https://sdk.openui5.org/1.38.62/docs/api/symbols/sap.ui.model.json.JSONModel.html) in the OpenUI5 documentation. [^2]: See [`JSONModel`](https://sdk.openui5.org/1.38.62/docs/api/symbols/sap.ui.model.json.JSONModel.html) in the OpenUI5 documentation.
[^3]: See OpenUI5's [MVC Documentation](https://sdk.openui5.org/topic/91f233476f4d1014b6dd926db0e91070) for detailed explanation of the pattern implementation. [^3]: See OpenUI5's [MVC Documentation](https://sdk.openui5.org/topic/91f233476f4d1014b6dd926db0e91070) for detailed explanation of the pattern implementation.
[^4]: See ["Merged Cells" in "SheetJS Data Model"](/docs/csf/features/merges) for more details. [^4]: See ["Merged Cells" in "SheetJS Data Model"](/docs/csf/features/merges) for more details.
[^5]: See [`core:HTML`](https://sdk.openui5.org/1.38.62/docs/api/symbols/sap.ui.core.HTML.html) in the OpenUI5 documentation. [^5]: See [`core:HTML`](https://sdk.openui5.org/1.38.62/docs/api/symbols/sap.ui.core.HTML.html) in the OpenUI5 documentation.
[^6]: See ["SheetJS Data Model"](/docs/csf/)

125
docz/docs/03-demos/30-cloud/18-github.md

@ -96,7 +96,7 @@ For this demo, https://docs.sheetjs.com/pres.xlsx will be used.
The `githubocto/flat` action can be added as a step in a workflow: The `githubocto/flat` action can be added as a step in a workflow:
```yaml ```yaml title="Sample GitHub Action step"
- name: Fetch data - name: Fetch data
uses: githubocto/flat@v3 uses: githubocto/flat@v3
with: with:
@ -190,7 +190,7 @@ Deno.writeFileSync(out_file, new TextEncoder().encode(csv));`}
:::note Tested Deployments :::note Tested Deployments
This was last tested by SheetJS users on 2024 June 07. This was last tested by SheetJS users on 2025-01-15.
::: :::
@ -205,26 +205,44 @@ Flat Viewer URL for the repo is https://flatgithub.com/SheetJS/flat-sheet/
0) Create a free GitHub account or sign into the GitHub web interface. 0) Create a free GitHub account or sign into the GitHub web interface.
1) Create a new repository (click the "+" icon in the upper-right corner). 1) Create a new repository by clicking the "+" icon in the upper-right corner
and selecting "New repository" in the dropdown.
- When prompted, enter a repository name of your choosing. ![Creating a new repo](pathname:///github/new-repo.png)
2) In the "Create a new repository" page, enter the following information:
- "Repository name": `flat-sheet`
- Ensure "Public" is selected - Ensure "Public" is selected
- Check "Add a README file" - Check "Add a README file"
- Click "Create repository" at the bottom.
![Repo creation](pathname:///github/create-repo.png)
Click "Create repository" at the bottom to create the new repository.
You will be redirected to the new project. You will be redirected to the new project.
### Add Code ### Add Code
2) In the browser URL bar, change "github.com" to "github.dev". For example, if 3) In the browser URL bar, change "github.com" to "github.dev". For example, if
the URL was originally `https://github.com/SheetJS/flat-sheet` , the new URL the URL was originally `https://github.com/SheetJS/flat-sheet` , the new URL
should be `https://github.dev/SheetJS/flat-sheet` . Press Enter. should be `https://github.dev/SheetJS/flat-sheet` . Press Enter.
3) In the left "EXPLORER" panel, double-click just below README.md. A text box :::note pass
will appear just above README. Type `postprocess.ts` and press Enter.
The main panel will show a `postprocess.ts` tab. Copy the following code to In some tests, there was a prompt:
the main editor window:
> The extension 'GitHub Repositories' wants to sign in using GitHub.
Click "Allow" and select your user account when prompted.
:::
4) In the left "EXPLORER" panel, double-click just below README.md. A text box
will appear just above README. Type `postprocess.ts` and press Enter.
The main panel will show a `postprocess.ts` tab. Copy the following code to the
main editor window:
<CodeBlock title="postprocess.ts" language="ts">{`\ <CodeBlock title="postprocess.ts" language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts" // @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
@ -249,12 +267,11 @@ const csv = XLSX.utils.sheet_to_csv(first_sheet);
Deno.writeFileSync(out_file, new TextEncoder().encode(csv));`} Deno.writeFileSync(out_file, new TextEncoder().encode(csv));`}
</CodeBlock> </CodeBlock>
5) In the left "EXPLORER" panel, double-click just below README.md. A text box
will appear. Type `.github/workflows/data.yaml` and press Enter.
4) In the left "EXPLORER" panel, double-click just below README.md. A text box Copy the following code into the main area. It will create an action that runs
will appear. Type `.github/workflows/data.yaml` and press Enter. roughly once an hour:
Copy the following code into the main area. It will create an action that
runs roughly once an hour:
```yaml title=".github/workflows/data.yaml" ```yaml title=".github/workflows/data.yaml"
name: flatsheet name: flatsheet
@ -282,48 +299,74 @@ jobs:
postprocess: ./postprocess.ts postprocess: ./postprocess.ts
``` ```
5) Click on the source control icon (a little blue circle with the number 2). 6) Click on the source control icon (a little blue circle with the number 2). In
In the left panel, select Message box, type `init` and press <kbd>CTRL</kbd> the left panel, select the Message box, type `init` and press <kbd>CTRL</kbd> +
+<kbd>Enter</kbd> on Windows (<kbd>Command</kbd>+<kbd>Enter</kbd> on MacOS). <kbd>Enter</kbd> on Windows (<kbd>Command</kbd> + <kbd>Enter</kbd> on MacOS).
6) Click the `☰` icon and click "Go to Repository" to return to the repo page. 7) Click the `☰` icon and click "Go to Repository" to return to the repo page.
### Test Action ### Test Action
7) Click "Settings" to see the repository settings. In the left column, click 8) Click "Settings" near the top of the page to see the repository settings. In
"Actions" to expand the submenu and click "General". the left column, click "Actions" to expand the submenu and click "General".
Scroll down to "Workflow permissions" and select "Read and write permissions" ![Actions Settings](pathname:///github/actions-settings.png)
if it is not selected. Click "Save".
8) Click "Actions" to see the workflows. In the left column, click `flatsheet`. Scroll down to "Workflow permissions" and select "Read and write permissions" if
it is not selected. Click "Save".
This is the page for the action. Every time the action is run, a new entry ![Workflow Permissions](pathname:///github/workflow-perms.png)
will be added to the list.
Click "Run workflow", then click the "Run workflow" button in the popup. 9) Click "Actions" to see the workflows.
This will start a new run. After about 30 seconds, a new row should show up
in the main area. The icon should be a white `✓` in a green circle.
9) Click "Code" to return to the main view. It should have a file listing that :::note pass
includes `data.xlsx` (downloaded file) and `data.csv` (generated data)
10) Repeat step 8 to run the action a second time. Click "Code" again. In some tests, GitHub showed the following screen:
![Actions screen](pathname:///github/actions-disabled.png)
Click "Enable Actions on this repository".
:::
In the left column, click `flatsheet`.
![Actions left column](pathname:///github/actions-flatsheet.png)
This is the page for the action. Every time the action is run, a new entry will
be added to the list.
10) Click "Run workflow", then click the "Run workflow" button in the popup.
This will start a new run.
![Run Workflow dropdown](pathname:///github/run-workflow.png)
After about 30 seconds, a new row should show up in the
main area. The icon should be a white `✓` in a green circle.
![Actions success](pathname:///github/action-success.png)
11) Click "Code" near the top of the page to return to the main view. The file
listing will include `data.xlsx` (fetched file) and `data.csv` (generated data):
![File listing](pathname:///github/file-listing.png)
12) Repeat step 10 to run the action a second time. Click "Code" again.
### Viewer ### Viewer
11) Go to the URL bar and change "github.com" to "flatgithub.com". For example, 13) Go to the URL bar and change "github.com" to "flatgithub.com". For example,
if the URL was originally `https://github.com/SheetJS/flat-sheet` , the new if the URL was originally `https://github.com/SheetJS/flat-sheet` , the new URL
URL should be `https://flatgithub.com/SheetJS/flat-sheet` . Press Enter. will be `https://flatgithub.com/SheetJS/flat-sheet` . Press Enter.
You will see the "Flat Viewer". In the top bar, the "Commit" option allows You will see the "Flat Viewer". In the top bar, the "Commit" option allows for
for switching to an older version of the data. switching to an older version of the data.
The following screenshot shows the viewer in action: The following screenshot shows the viewer in action:
![Flat Viewer for SheetJS/flat-sheet](pathname:///github/viewer.png) ![Flat Viewer for SheetJS/flat-sheet](pathname:///github/viewer.png)
The column chart in the Index column is a histogram. The column chart in the Index column is a histogram.
[^1]: See ["Repositories documentation"](https://docs.github.com/en/repositories) in the GitHub documentation. [^1]: See ["Repositories documentation"](https://docs.github.com/en/repositories) in the GitHub documentation.
[^2]: See ["GitHub Actions documentation"](https://docs.github.com/en/actions) in the GitHub documentation. [^2]: See ["GitHub Actions documentation"](https://docs.github.com/en/actions) in the GitHub documentation.

15
docz/docs/03-demos/30-cloud/19-deno.md

@ -28,7 +28,7 @@ When the demo was last tested, Deno Deploy required a GitHub account.
:::note Tested Deployments :::note Tested Deployments
This demo was last tested by SheetJS users on 2024 May 26. This demo was last tested by SheetJS users on 2025-01-15.
::: :::
@ -59,7 +59,7 @@ The `content` property of the returned object can be parsed with `XLSX.read`.
The following example assumes the file is submitted at field name `file`: The following example assumes the file is submitted at field name `file`:
<CodeBlock language="ts">{`\ <CodeBlock language="ts" title="Sample POST request handler to generate HTML">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts" // @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import { read, utils } from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs'; import { read, utils } from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
import * as Drash from "https://cdn.jsdelivr.net/gh/drashland/drash@v2.8.1/mod.ts"; import * as Drash from "https://cdn.jsdelivr.net/gh/drashland/drash@v2.8.1/mod.ts";
@ -92,6 +92,13 @@ In the next screen, review the prompt and click "Authorize Deno Deploy".
If a welcome screen is displayed, click "I know what I'm doing". If a welcome screen is displayed, click "I know what I'm doing".
:::caution pass
If a Terms and Conditions prompt is displayed, review the Terms and Conditions
and the Privacy Policy before checking the box and clicking "Continue"
:::
3) Click "New Playground" to create a new Playground. 3) Click "New Playground" to create a new Playground.
4) Download [`s2c.ts`](pathname:///deno/s2c.ts). 4) Download [`s2c.ts`](pathname:///deno/s2c.ts).
@ -99,8 +106,12 @@ If a welcome screen is displayed, click "I know what I'm doing".
5) Open `s2c.ts` with a text editor and copy the contents of the source file 5) Open `s2c.ts` with a text editor and copy the contents of the source file
into the playground editor (left pane in the browser). into the playground editor (left pane in the browser).
![Deno Deploy Editor](pathname:///deno/editor.png)
6) Click "Save and Deploy". When the demo was last tested, it was a blue button. 6) Click "Save and Deploy". When the demo was last tested, it was a blue button.
![Save and Deploy](pathname:///deno/save-deploy.png)
### Testing ### Testing
7) Wait until the server is deployed. When it is deployed, the right panel will 7) Wait until the server is deployed. When it is deployed, the right panel will

39
docz/docs/09-miscellany/05-contributing.md

@ -42,11 +42,11 @@ These instructions were tested on the following platforms:
| Platform | Architecture | Test Date | | Platform | Architecture | Test Date |
|:------------------------------|:-------------|:-----------| |:------------------------------|:-------------|:-----------|
| Linux (Steam Deck Holo x64) | `linux-x64` | 2025-01-10 | | Linux (Steam Deck Holo x64) | `linux-x64` | 2025-01-10 |
| Linux (Arch Linux AArch64) | `linux-arm` | 2024-05-10 | | Linux (Debian Linux AArch64) | `linux-arm` | 2025-01-14 |
| MacOS 14.4 (x64) | `darwin-x64` | 2024-07-12 | | MacOS 14.4 (x64) | `darwin-x64` | 2024-07-12 |
| MacOS 15.1 (ARM64) | `darwin-arm` | 2024-11-10 | | MacOS 15.1 (ARM64) | `darwin-arm` | 2024-11-10 |
| Windows 10 (x64) + WSL Ubuntu | `win10-x64` | 2024-07-12 | | Windows 10 (x64) + WSL Ubuntu | `win10-x64` | 2024-07-12 |
| Windows 11 (x64) + WSL Ubuntu | `win11-x64` | 2024-12-19 | | Windows 11 (x64) + WSL Ubuntu | `win11-x64` | 2025-01-14 |
| Windows 11 (ARM) + WSL Ubuntu | `win11-arm` | 2024-05-23 | | Windows 11 (ARM) + WSL Ubuntu | `win11-arm` | 2024-05-23 |
With some additional dependencies, the unminified scripts are reproducible and With some additional dependencies, the unminified scripts are reproducible and
@ -72,7 +72,7 @@ A) Ensure WSL ("WSL 2" in Windows 10) and the Ubuntu distribution are installed.
In "Turn Windows features on or off", all available features from the following In "Turn Windows features on or off", all available features from the following
list should be enabled: list should be enabled:
- "Hyper-V" (including every sub-feature) - "Hyper-V" (if the option is available)
- "Virtual Machine Platform" - "Virtual Machine Platform"
- "Windows Hypervisor Platform" - "Windows Hypervisor Platform"
- "Windows Subsystem for Linux" - "Windows Subsystem for Linux"
@ -84,20 +84,28 @@ to install every listed feature that is available for the Windows version.
::: :::
The following command installs Ubuntu within WSL: The following PowerShell command updates WSL:
```powershell ```powershell
wsl --update wsl --update
```
The following PowerShell command installs Ubuntu within WSL:
```powershell
wsl --install Ubuntu wsl --install Ubuntu
``` ```
:::note pass
In some versions of `wsl`, the `-d` flag must be specified: In some versions of `wsl`, the `-d` flag must be specified:
```powershell ```powershell
wsl --update
wsl --install -d Ubuntu wsl --install -d Ubuntu
``` ```
:::
:::info pass :::info pass
In some tests, the install failed with a `WSL_E_DEFAULT_DISTRO_NOT_FOUND` error. In some tests, the install failed with a `WSL_E_DEFAULT_DISTRO_NOT_FOUND` error.
@ -566,7 +574,7 @@ git log | grep -B4 "version bump 0.20.3"
The output should look like: The output should look like:
```bash ```bash title="Expected output"
$ git log | grep -B4 "version bump 0.20.3" $ git log | grep -B4 "version bump 0.20.3"
# highlight-next-line # highlight-next-line
commit 8a7cfd47bde8258c0d91df6a737bf0136699cdf8 <-- this is the commit hash commit 8a7cfd47bde8258c0d91df6a737bf0136699cdf8 <-- this is the commit hash
@ -576,7 +584,7 @@ Date: Fri Jul 12 11:47:14 2024 -0400
version bump 0.20.3 version bump 0.20.3
``` ```
6) Switch to that commit: 6) Switch to the commit identified by the hash from the previous step:
```bash ```bash
git checkout 8a7cfd47bde8258c0d91df6a737bf0136699cdf8 git checkout 8a7cfd47bde8258c0d91df6a737bf0136699cdf8
@ -632,8 +640,7 @@ curl -L https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js | md5s
The following output was captured in `win11-arm` for SheetJS version `0.20.3`: The following output was captured in `win11-arm` for SheetJS version `0.20.3`:
> ```bash title="Expected output"
```bash
$ md5sum dist/xlsx.full.min.js $ md5sum dist/xlsx.full.min.js
# highlight-next-line # highlight-next-line
6b3130af1ceadf07caa0ec08af7addff dist/xlsx.full.min.js 6b3130af1ceadf07caa0ec08af7addff dist/xlsx.full.min.js
@ -651,8 +658,7 @@ curl -k -L https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js | m
The following output was captured in `darwin-arm` for SheetJS version `0.20.3`: The following output was captured in `darwin-arm` for SheetJS version `0.20.3`:
> ```bash title="Expected output"
```bash
$ md5 dist/xlsx.full.min.js $ md5 dist/xlsx.full.min.js
# highlight-next-line # highlight-next-line
MD5 (dist/xlsx.full.min.js) = 6b3130af1ceadf07caa0ec08af7addff MD5 (dist/xlsx.full.min.js) = 6b3130af1ceadf07caa0ec08af7addff
@ -671,8 +677,7 @@ curl -L https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js | md5s
The following output was captured in `linux-arm` for SheetJS version `0.20.3`: The following output was captured in `linux-arm` for SheetJS version `0.20.3`:
> ```bash title="Expected output"
```bash
$ md5sum dist/xlsx.full.min.js $ md5sum dist/xlsx.full.min.js
# highlight-next-line # highlight-next-line
6b3130af1ceadf07caa0ec08af7addff dist/xlsx.full.min.js 6b3130af1ceadf07caa0ec08af7addff dist/xlsx.full.min.js
@ -700,14 +705,14 @@ git checkout master
make ctestserv make ctestserv
``` ```
The terminal will display a port number. For example: The terminal will display URL. For example:
``` ```text title="Expected output"
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/)
^^^^^^^^^^^^^^^^^^^^ URL
``` ```
11) Open a browser window and access `http://localhost:8000`, replacing `8000` 11) Open a browser window and access the displayed URL.
with the port number from the terminal window.
## Development ## Development

BIN
docz/static/deno/editor.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 189 KiB

BIN
docz/static/deno/new-playground.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 47 KiB

BIN
docz/static/deno/save-deploy.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 32 KiB

BIN
docz/static/github/action-success.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 23 KiB

BIN
docz/static/github/actions-disabled.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 44 KiB

BIN
docz/static/github/actions-flatsheet.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 18 KiB

BIN
docz/static/github/actions-settings.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 43 KiB

BIN
docz/static/github/create-repo.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 164 KiB

BIN
docz/static/github/file-listing.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 32 KiB

BIN
docz/static/github/new-repo.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 19 KiB

BIN
docz/static/github/run-workflow.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 25 KiB

BIN
docz/static/github/workflow-perms.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 93 KiB