forked from sheetjs/docs.sheetjs.com
Synthetic DOM demo refresh
This commit is contained in:
parent
2be6b170c5
commit
24abc87083
@ -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)
|
||||
|
||||
@ -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 */,
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
@ -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);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB After Width: | Height: | Size: 101 KiB |
20
tests/dom-cheerio.sh
Executable file
20
tests/dom-cheerio.sh
Executable 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
|
||||
@ -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
|
||||
|
||||
@ -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
20
tests/dom-xmldom.sh
Executable 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
|
||||
Loading…
Reference in New Issue
Block a user