sheetjs/docs.sheetjs.com
1
Fork 4
Code Issues 2 Pull Requests 1 Projects Releases Wiki Activity

Synthetic DOM demo refresh

Browse Source
This commit is contained in:
SheetJS 2024-10-31 00:25:02 -04:00
parent 2be6b170c5
commit 24abc87083
8 changed files with 133 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
docz/docs/03-demos/03-net/09-dom.md
View File

@ -113,21 +113,22 @@ This demo was tested in the following deployments:
| JSDOM | Date |
|:--------|:-----------|
| 24.1.0 | 2024-06-24 |
| 23.2.0 | 2024-06-24 |
| 22.1.0 | 2024-06-24 |
| 21.1.2 | 2024-06-24 |
| 20.0.3 | 2024-06-24 |
| 19.0.0 | 2024-06-24 |
| 18.1.1 | 2024-06-24 |
| 17.0.0 | 2024-06-24 |
| 16.7.0 | 2024-06-24 |
| 15.2.1 | 2024-06-24 |
| 14.1.0 | 2024-06-24 |
| 13.2.0 | 2024-06-24 |
| 12.2.0 | 2024-06-24 |
| 11.12.0 | 2024-06-24 |
| 10.1.0 | 2024-06-24 |
| 25.0.1 | 2024-10-30 |
| 24.1.3 | 2024-10-30 |
| 23.2.0 | 2024-10-30 |
| 22.1.0 | 2024-10-30 |
| 21.1.2 | 2024-10-30 |
| 20.0.3 | 2024-10-30 |
| 19.0.0 | 2024-10-30 |
| 18.1.1 | 2024-10-30 |
| 17.0.0 | 2024-10-30 |
| 16.7.0 | 2024-10-30 |
| 15.2.1 | 2024-10-30 |
| 14.1.0 | 2024-10-30 |
| 13.2.0 | 2024-10-30 |
| 12.2.0 | 2024-10-30 |
| 11.12.0 | 2024-10-30 |
| 10.1.0 | 2024-10-30 |
:::
@ -160,31 +161,34 @@ The script will create a file `SheetJSDOM.xlsx` that can be opened.
### HappyDOM
HappyDOM provides a DOM framework for NodeJS. For the tested version (`13.3.1`),
the following patches were needed:
HappyDOM provides a DOM framework for NodeJS. Older versions required the
following patches:
- TABLE `rows` property (explained above)
- TR `cells` property (explained above)
HappyDOM `15.7.4` did not require any workarounds.
:::note Tested Deployments
This demo was tested in the following deployments:
| HappyDOM | Date |
|:---------|:-----------|
| 14.12.3 | 2024-06-24 |
| 13.10.1 | 2024-06-24 |
| 12.10.3 | 2024-06-24 |
| 11.2.0 | 2024-06-24 |
| 10.11.2 | 2024-06-24 |
| 9.20.3 | 2024-06-24 |
| 8.9.0 | 2024-06-24 |
| 7.8.1 | 2024-06-24 |
| 6.0.4 | 2024-06-24 |
| 5.4.0 | 2024-06-24 |
| 4.1.0 | 2024-06-24 |
| 3.2.2 | 2024-06-24 |
| 2.55.0 | 2024-06-24 |
| 15.7.4 | 2024-10-30 |
| 14.12.3 | 2024-10-30 |
| 13.10.1 | 2024-10-30 |
| 12.10.3 | 2024-10-30 |
| 11.2.0 | 2024-10-30 |
| 10.11.2 | 2024-10-30 |
| 9.20.3 | 2024-10-30 |
| 8.9.0 | 2024-10-30 |
| 7.8.1 | 2024-10-30 |
| 6.0.4 | 2024-10-30 |
| 5.4.0 | 2024-10-30 |
| 4.1.0 | 2024-10-30 |
| 3.2.2 | 2024-10-30 |
| 2.55.0 | 2024-10-30 |
:::
@ -236,19 +240,24 @@ Object.defineProperty(tbl.__proto__, "innerHTML", { get: function() {
}});
```
<details>
<summary><b>Complete Demo</b> (click to show)</summary>
:::note Tested Deployments
This demo was last tested on 2024 March 12 against XMLDOM `0.8.10`
This demo was tested in the following deployments:
| XMLDOM | Date |
|:---------|:-----------|
| `0.9.5` | 2024-10-30 |
| `0.8.10` | 2024-10-30 |
:::
<details>
<summary><b>Complete Demo</b> (click to show)</summary>
1) Install SheetJS and XMLDOM libraries:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @xmldom/xmldom@0.8.10`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @xmldom/xmldom@0.9.5`}
</CodeBlock>
2) Download [the sample script `SheetJSXMLDOM.js`](pathname:///dom/SheetJSXMLDOM.js):
@ -280,19 +289,24 @@ can be shimmed, but it is strongly recommended to use a more compliant library.
[`SheetJSCheerio.js`](pathname:///dom/SheetJSCheerio.js) implements the missing
features to ensure that SheetJS DOM methods can process TABLE elements.
<details>
<summary><b>Complete Demo</b> (click to show)</summary>
:::note Tested Deployments
This demo was last tested on 2024 March 12 against Cheerio `1.0.0-rc.12`
This demo was tested in the following deployments:
| CheerioJS | Date |
|:--------------|:-----------|
| `1.0.0` | 2024-10-30 |
| `1.0.0-rc.12` | 2024-10-30 |
:::
<details>
<summary><b>Complete Demo</b> (click to show)</summary>
1) Install SheetJS and CheerioJS libraries:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz cheerio@1.0.0-rc.12`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz cheerio@1.0.0`}
</CodeBlock>
2) Download [the sample script `SheetJSCheerio.js`](pathname:///dom/SheetJSCheerio.js):
@ -333,7 +347,7 @@ This example fetches [a sample table](pathname:///dom/SheetJSTable.html):
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
\n\
import { DOMParser } from 'https://deno.land/x/deno_dom@v0.1.46/deno-dom-wasm.ts';
import { DOMParser } from 'https://deno.land/x/deno_dom@v0.1.48/deno-dom-wasm.ts';
\n\
const doc = new DOMParser().parseFromString(
await (await fetch('https://docs.sheetjs.com/dom/SheetJSTable.html')).text(),
@ -352,20 +366,24 @@ const workbook = XLSX.utils.table_to_book(tbl);
XLSX.writeFile(workbook, "SheetJSDenoDOM.xlsx");`}
</CodeBlock>
<details>
<summary><b>Complete Demo</b> (click to show)</summary>
:::note Tested Deployments
This demo was tested in the following deployments:
| Architecture | DenoDOM | Deno | Date |
|:-------------|:--------|:-------|:-----------|
| `darwin-x64` | 0.1.46 | 1.44.4 | 2024-06-19 |
| `darwin-arm` | 0.1.46 | 1.44.4 | 2024-06-19 |
| `darwin-x64` | 0.1.48 | 2.0.4 | 2024-10-30 |
| `darwin-arm` | 0.1.48 | 2.0.4 | 2024-10-30 |
| `win11-x64` | 0.1.48 | 2.0.4 | 2024-10-30 |
| `win11-arm` | 0.1.48 | 2.0.4 | 2024-10-30 |
| `linux-x64` | 0.1.48 | 2.0.4 | 2024-10-30 |
| `linux-arm` | 0.1.48 | 2.0.4 | 2024-10-30 |
:::
<details>
<summary><b>Complete Demo</b> (click to show)</summary>
1) Save the previous codeblock to `SheetJSDenoDOM.ts`.
2) Run the script with `--allow-net` and `--allow-write` entitlements:
@ -376,6 +394,16 @@ deno run --allow-net --allow-write SheetJSDenoDOM.ts
The script will create a file `SheetJSDenoDOM.xlsx` that can be opened.
:::caution pass
Deno 2 additionally requires `--allow-import`:
```bash
deno run --allow-net --allow-write --allow-import SheetJSDenoDOM.ts
```
:::
</details>
[^1]: See [`table_to_sheet` in "HTML" Utilities](/docs/api/utilities/html#create-new-sheet)

19
docz/docs/03-demos/19-desktop/06-reactnative.md
View File

@ -49,7 +49,7 @@ This demo was tested in the following environments:
| Windows 10 | `win10-x64` | `v0.74.6` | 2024-05-28 |
| Windows 11 | `win11-x64` | `v0.74.6` | 2024-05-28 |
| Windows 11 | `win11-arm` | `v0.74.5` | 2024-05-25 |
| MacOS 14.4 | `darwin-x64` | `v0.73.22` | 2024-03-24 |
| MacOS 14.7 | `darwin-x64` | `v0.75.13` | 2024-10-26 |
| MacOS 14.5 | `darwin-arm` | `v0.73.30` | 2024-05-28 |
:::
@ -659,12 +659,24 @@ There exist official `react-native-macos` releases compatible with RN `0.73`
1) Create a new React Native project using React Native `0.73`:
```bash
npx -y react-native init SheetJSmacOS --template react-native@^0.73.0
npx -y @react-native-community/cli init SheetJSmacOS --version 0.75
cd SheetJSmacOS
```
If prompted to install CocoaPods, type `Y`.
:::note pass
For older versions of React Native, the `react-native` package included the CLI:
```bash
npx -y react-native init SheetJSmacOS --template react-native@^0.73.0
```
This approach is deprecated as of React Native `0.75`.
:::
2) Create the MacOS part of the application:
```bash
@ -782,7 +794,7 @@ A) Copy the highlighted line and paste under `/* Begin PBXBuildFile section */`:
/* Begin PBXBuildFile section */
// highlight-next-line
4717DC6A28CC499A00A9BE56 /* RCTDocumentPicker.m in Sources */ = {isa = PBXBuildFile; fileRef = 4717DC6928CC499A00A9BE56 /* RCTDocumentPicker.m */; };
5142014D2437B4B30078DB4F /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 5142014C2437B4B30078DB4F /* AppDelegate.mm */; };
3EBD77615057B69A2488153F /* libPods-SheetJSmacOS-macOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C28E160785274A8AF9074969 /* libPods-SheetJSmacOS-macOS.a */; };
```
:::
@ -890,7 +902,6 @@ highlighted lines:
4717DC6928CC499A00A9BE56 /* RCTDocumentPicker.m */,
// highlight-end
5142014A2437B4B30078DB4F /* SheetJSmacOS-macOS */,
13B07FAE1A68108700A75B9A /* SheetJSmacOS-iOS */,
```
:::

4
docz/static/dom/SheetJSHappyDOM.js
View File

@ -14,9 +14,9 @@ const window = new Window({
window.document.body.innerHTML = html_str;
const tbl = window.document.body.getElementsByTagName("table")[0];
/* add `rows` and `cells` properties */
/* happy-dom <= 14 add `rows` and `cells` properties */
tbl.rows = Array.from(tbl.getElementsByTagName("tr"));
tbl.rows.forEach(row => row.cells = Array.from(row.getElementsByTagName("td")))
if(Array.isArray(tbl.rows)) tbl.rows.forEach(row => row.cells = Array.from(row.getElementsByTagName("td")))
/* generate workbook */
const workbook = XLSX.utils.table_to_book(tbl);

BIN
docz/static/reactnative/rnm.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 101 KiB

20
tests/dom-cheerio.sh Executable file
View File

@ -0,0 +1,20 @@
#!/bin/bash
# https://docs.sheetjs.com/docs/demos/net/dom#cheeriojs
cd /tmp
rm -rf sheetjs-cheeriojs
mkdir sheetjs-cheeriojs
cd sheetjs-cheeriojs
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
curl -LO https://docs.sheetjs.com/dom/SheetJSCheerio.js
curl -LO https://docs.sheetjs.com/dom/SheetJSTable.html
for n in 1.0.0 1.0.0-rc.12; do
rm -f SheetJSCheerio.xlsx
npm i --save cheerio@$n
npm ls | grep cheerio
node SheetJSCheerio.js
npx -y xlsx-cli SheetJSCheerio.xlsx | head -n 3
done

2
tests/dom-happydom.sh
View File

@ -11,7 +11,7 @@ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
curl -LO https://docs.sheetjs.com/dom/SheetJSHappyDOM.js
curl -LO https://docs.sheetjs.com/dom/SheetJSTable.html
for n in {2..14}; do
for n in {2..15}; do
rm -f SheetJSHappyDOM.xlsx
npm i --save happy-dom@$n
npm ls | grep happy-dom

2
tests/dom-jsdom.sh
View File

@ -27,7 +27,7 @@ EOF
curl -LO https://docs.sheetjs.com/dom/SheetJSTable.html
for n in {10..24}; do
for n in {10..25}; do
rm -f SheetJSDom.xlsx
npm i --save jsdom@$n
npm ls | grep jsdom

20
tests/dom-xmldom.sh Executable file
View File

@ -0,0 +1,20 @@
#!/bin/bash
# https://docs.sheetjs.com/docs/demos/net/dom#xmldom
cd /tmp
rm -rf sheetjs-xmldom
mkdir sheetjs-xmldom
cd sheetjs-xmldom
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
curl -LO https://docs.sheetjs.com/dom/SheetJSXMLDOM.js
curl -LO https://docs.sheetjs.com/dom/SheetJSTable.html
for n in 0.8 0.9; do
rm -f SheetJSXMLDOM.xlsx
npm i --save "@xmldom/xmldom@$n"
npm ls | grep "@xmldom/xmldom"
node SheetJSXMLDOM.js
npx -y xlsx-cli SheetJSXMLDOM.xlsx | head -n 3
done