diff --git a/docz/docs/03-demos/02-frontend/01-react.md b/docz/docs/03-demos/02-frontend/01-react.md index 70861a5..cd1212d 100644 --- a/docz/docs/03-demos/02-frontend/01-react.md +++ b/docz/docs/03-demos/02-frontend/01-react.md @@ -328,7 +328,7 @@ This demo was tested in the following environments: | ReactJS | ViteJS | Date | |:---------|:--------|:-----------| -| `18.2.0` | `5.0.5` | 2023-12-04 | +| `18.2.0` | `5.1.6` | 2024-03-13 | ::: @@ -376,8 +376,11 @@ and test the page. :::note Tested Deployments -This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and -`react-scripts@5.0.1`. +This demo was tested in the following environments: + +| ReactJS | CRA | Date | +|:---------|:--------|:-----------| +| `18.2.0` | `5.0.1` | 2024-03-13 | ::: @@ -417,12 +420,131 @@ The generated site will be placed in the `build` folder. npx http-server build ``` +Access the displayed URL (typically `http://localhost:8080`) with a web browser +and test the page. + + + + +:::note Tested Deployments + +This demo was tested in the following environments: + +| ReactJS | NextJS | Date | +|:---------|:---------|:-----------| +| `18.2.0` | `14.1.3` | 2024-03-13 | + +::: + +:::info pass + +This demo focuses on processing data in Client Components. + +The [NextJS demo](/docs/demos/static/nextjs) covers static site generation. + +::: + +:::caution pass + +NextJS requires a number of workarounds for simple client-side JavaScript code. + +**It is strongly recommended to use ViteJS or create-react-app when possible!** + +::: + +:::warning Telemetry + +NextJS collects telemetry by default. The `telemetry` subcommand can disable it: + +```js +npx next telemetry disable +``` + +The setting can be verified by running + +```js +npx next telemetry status +``` + +::: + +0) Disable NextJS telemetry: + +```bash +npx next telemetry disable +``` + +1) Create a new site: + +```bash +npx create-next-app@latest sheetjs-react --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*" +``` + +2) Install the SheetJS dependency and start the dev server: + +{`\ +cd sheetjs-react +npm i +npx next telemetry disable +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz +npm run dev`} + + +3) Open a web browser and access the displayed URL (`http://localhost:5173`) + +4) Replace `src/App.jsx` with the `src/SheetJSReactAoO.js` example. + +After replacing the code, add the following to the top of `src/App.jsx`: + +```js title="src/App.jsx (add to top)" +"use client"; +``` + +:::info NextJS Client Component Workaround + +The goal is to run SheetJS code in the browser. NextJS will attempt to render +pages on the server by default. `"use client";` instructs NextJS to treat the +exported component as a "Client Component" that will be rendered in the browser. + +If the pragma is not added, NextJS will report errors related to hydration: + +``` +Error: Hydration failed because the initial UI does not match what was rendered on the server. + +Warning: Expected server HTML to contain a matching in . + +See more info here: https://nextjs.org/docs/messages/react-hydration-error +``` + +::: + +The page will refresh and show a table with an Export button. Click the button +and the page will attempt to download `SheetJSReactAoO.xlsx`. + +5) Build the site: + +```bash +npm run build +``` + +The generated site will be placed in the `dist` folder. + +6) Start a local web server: + +```bash +npx http-server dist +``` + Access the displayed URL (typically `http://localhost:8080`) with a web browser and test the page. +When the page loads, the app will fetch and +display the data from the first worksheet in a TABLE. The "Export XLSX" button +will generate a workbook that can be opened in a spreadsheet editor. + ### HTML @@ -485,7 +607,11 @@ export default function SheetJSReactHTML() { :::note Tested Deployments -This demo was last tested on 2023 October 08 with ViteJS 4.4.1 and React 18.2.0 +This demo was tested in the following environments: + +| ReactJS | ViteJS | Date | +|:---------|:--------|:-----------| +| `18.2.0` | `5.1.6` | 2024-03-13 | ::: @@ -533,8 +659,11 @@ and test the page. :::note Tested Deployments -This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and -`react-scripts@5.0.1`. +This demo was tested in the following environments: + +| ReactJS | CRA | Date | +|:---------|:--------|:-----------| +| `18.2.0` | `5.0.1` | 2024-03-13 | ::: @@ -580,6 +709,10 @@ and test the page. +When the page loads, the app will fetch and +display the data from the first worksheet in a TABLE. The "Export XLSX" button +will generate a workbook that can be opened in a spreadsheet editor. + ### Rows and Columns diff --git a/docz/docs/03-demos/02-frontend/03-angular.md b/docz/docs/03-demos/02-frontend/03-angular.md index 65b9c15..254b47b 100644 --- a/docz/docs/03-demos/02-frontend/03-angular.md +++ b/docz/docs/03-demos/02-frontend/03-angular.md @@ -420,10 +420,10 @@ export class AppComponent { This demo was tested in the following environments: -| Angular | Date | -|:---------|:-----------| -| `17.0.5` | 2023-12-04 | -| `16.2.7` | 2023-10-22 | +| Angular | Date | +|:----------|:-----------| +| `17.3.0` | 2024-03-13 | +| `16.2.12` | 2024-03-13 | ::: @@ -436,9 +436,20 @@ npx @angular/cli analytics disable -g 1) Create a new project: ```bash -npx @angular/cli@17.0.5 new --minimal --defaults --no-interactive sheetjs-angular +npx @angular/cli@17.3.0 new --minimal --defaults --no-interactive sheetjs-angular ``` +:::note pass + +The `@angular/cli` version controls the project version of Angular. For example, +the following command uses Angular 16.2.12: + +```bash +npx @angular/cli@16.2.12 new --minimal --defaults --no-interactive sheetjs-angular +``` + +::: + 2) Install the SheetJS dependency and start the dev server: {`\ @@ -484,7 +495,8 @@ npx -y http-server dist/sheetjs-angular/browser/ -Access `http://localhost:8080` with a web browser to test the bundled site. +Access the displayed URL (typically `http://localhost:8080`) with a web browser +to test the bundled site. @@ -599,7 +611,12 @@ export class AppComponent { :::note Tested Deployments -This demo was last run on 2023-11-18 using Angular 17.0.3 and CLI `17.0.1` +This demo was tested in the following environments: + +| Angular | Date | +|:----------|:-----------| +| `17.3.0` | 2024-03-13 | +| `16.2.12` | 2024-03-13 | ::: @@ -612,9 +629,20 @@ npx @angular/cli analytics disable -g 1) Create a new project: ```bash -npx @angular/cli@17.0.1 new --minimal --defaults --no-interactive sheetjs-angular +npx @angular/cli@17.3.0 new --minimal --defaults --no-interactive sheetjs-angular ``` +:::note pass + +The `@angular/cli` version controls the project version of Angular. For example, +the following command uses Angular 16.2.12: + +```bash +npx @angular/cli@16.2.12 new --minimal --defaults --no-interactive sheetjs-angular +``` + +::: + 2) Install the SheetJS dependency and start the dev server: {`\ @@ -702,7 +730,7 @@ Google and the Angular team. ::: -:::caution +:::caution pass The Angular tooling does not provide a command to switch between versions! @@ -797,7 +825,7 @@ In the component, `aoa_to_sheet` is used to generate the worksheet: ### SystemJS -The default angular-cli configuration requires no additional configuration. +The default `angular-cli` configuration requires no additional configuration. Some deployments use the SystemJS loader, which does require configuration. [The SystemJS demo](/docs/demos/frontend/bundler/systemjs) includes the @@ -983,14 +1011,14 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig. -2) install project and dependencies: +2) Install project and dependencies: {`\ npm i npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} -3) start a local server with +3) Start a local server with ```bash npm start @@ -1000,7 +1028,7 @@ The traditional site URL is `http://localhost:4200/` . Open the page with a web browser and open the console. In the "Elements" tab, the `app-root` element will have an `ng-version` attribute. -4) build the app with +4) Build the app with ```bash npm run build diff --git a/docz/docs/03-demos/03-net/09-dom.md b/docz/docs/03-demos/03-net/09-dom.md index 3b0698c..62a7a29 100644 --- a/docz/docs/03-demos/03-net/09-dom.md +++ b/docz/docs/03-demos/03-net/09-dom.md @@ -203,7 +203,7 @@ Object.defineProperty(tbl.__proto__, "innerHTML", { get: function() { :::note Tested Deployments -This demo was last tested on 2023 September 10 against XMLDOM `0.8.10` +This demo was last tested on 2024 March 12 against XMLDOM `0.8.10` ::: @@ -246,7 +246,7 @@ features to ensure that SheetJS DOM methods can process TABLE elements. :::note Tested Deployments -This demo was last tested on 2023 September 10 against Cheerio `1.0.0-rc.12` +This demo was last tested on 2024 March 12 against Cheerio `1.0.0-rc.12` ::: diff --git a/docz/docs/03-demos/12-static/08-nextjs.md b/docz/docs/03-demos/12-static/08-nextjs.md index df22083..415da60 100644 --- a/docz/docs/03-demos/12-static/08-nextjs.md +++ b/docz/docs/03-demos/12-static/08-nextjs.md @@ -47,6 +47,14 @@ npx next@13.5.6 telemetry status ::: +:::info pass + +This demo focuses on static sites where data files are processed at build time. + +[The ReactJS demo](/docs/demos/frontend/react) shows NextJS "Client Components". + +::: + :::caution Next 13+ and SWC Next 13 switched to the SWC minifier. There are known issues with the minifier. diff --git a/docz/docs/03-demos/17-mobile/01-reactnative.md b/docz/docs/03-demos/17-mobile/01-reactnative.md index 0b8752d..354586d 100644 --- a/docz/docs/03-demos/17-mobile/01-reactnative.md +++ b/docz/docs/03-demos/17-mobile/01-reactnative.md @@ -200,7 +200,7 @@ row. This neatly skips the first header row. ## Fetching Remote Data -React Native versions starting from `0.72.0`[^5] support binary data with `fetch`. +React Native versions starting from `0.72.0`[^5] support binary data in `fetch`. This snippet downloads and parses : @@ -217,19 +217,27 @@ const wb = XLSX.read(ab); This demo was tested in the following environments: -| OS | Type | Device | RN | Date | -|:-----------|:-----|:--------------------|:---------|:-----------| -| Android 34 | Sim | Pixel 3a | `0.73.5` | 2024-03-05 | -| iOS 17.2 | Sim | iPhone 15 Pro Max | `0.73.1` | 2023-12-21 | -| Android 29 | Real | NVIDIA Shield | `0.73.5` | 2024-03-05 | -| iOS 15.1 | Real | iPad Pro | `0.73.1` | 2023-12-21 | +**Simulators** + +| OS | Device | RN | Dev Platform | Date | +|:-----------|:------------------|:---------|:-------------|:-----------| +| Android 34 | Pixel 3a | `0.73.6` | `darwin-x64` | 2024-03-13 | +| iOS 17.4 | iPhone 15 Pro Max | `0.73.6` | `darwin-x64` | 2024-03-13 | +| Android 34 | Pixel 3a | `0.73.5` | `win10-x64` | 2024-03-05 | + +**Real Devices** + +| OS | Device | RN | Date | +|:-----------|:------------------|:---------|:-----------| +| iOS 15.1 | iPhone 12 Pro Max | `0.73.6` | 2024-03-13 | +| Android 29 | NVIDIA Shield | `0.73.6` | 2024-03-13 | ::: 1) Create project: ```bash -npx -y react-native@0.73.1 init SheetJSRNFetch --version="0.73.1" +npx -y react-native@0.73.6 init SheetJSRNFetch --version="0.73.6" ``` 2) Install shared dependencies: @@ -256,9 +264,9 @@ curl -LO https://docs.sheetjs.com/reactnative/App.tsx When the demo was last tested on macOS, `java -version` displayed the following: ``` -openjdk version "17.0.9" 2023-10-17 -OpenJDK Runtime Environment Temurin-17.0.9+9 (build 17.0.9+9) -OpenJDK 64-Bit Server VM Temurin-17.0.9+9 (build 17.0.9+9, mixed mode) +openjdk version "17.0.10" 2024-01-16 +OpenJDK Runtime Environment Temurin-17.0.10+7 (build 17.0.10+7) +OpenJDK 64-Bit Server VM Temurin-17.0.10+7 (build 17.0.10+7, mixed mode) ``` ::: @@ -272,7 +280,7 @@ npx react-native run-android :::caution pass If the initial launch fails with an error referencing the emulator, manually -start the emulator and try again. +start the emulator from Android Studio and try again. Gradle errors typically stem from a Java version mismatch: @@ -359,6 +367,28 @@ npx react-native run-android 14) Enable developer code signing certificates[^7]. +
Enabling Code Signing (click to show) + +These instructions were verified against Xcode 15.3. + +A) Open the included iOS workspace in Xcode: + +```bash +open ios/SheetJSRNFetch.xcworkspace +``` + +B) Select "SheetJSRNFetch" in the Project Navigator: + +![Select the project](pathname:///reactnative/xcode-select-project.png) + +C) Select "Signing & Capabilities" in the main view. + +D) Select "All" in the lower bar and ensure a Team is selected in the dropdown: + +![Xcode Signing and Capabilities](pathname:///reactnative/xcode-sign-cap.png) + +
+ 15) Install `ios-deploy` through Homebrew: ```bash @@ -373,7 +403,39 @@ npx react-native run-ios :::caution pass -When this demo was last tested, the build failed with the following error: +In some tests, the app failed to run on the device due to "Untrusted Developer": + +``` +Your device management settings do not allow apps from developer ... on this iPhone. You can allow using these apps in Settings. +``` + +These instructions were verified against iOS 15.1. + +A) Open the Settings app and select "General" > "VPN & Device Management". + +![iOS Management](pathname:///reactnative/ios-mgmt.png) + +B) Select the Apple Development certificate under "Developer App". + +![iOS Certificate Info](pathname:///reactnative/ios-cert.png) + +In the new screen, the name "SheetJSRNFetch" will be displayed in the Apps list. + +C) Tap "Trust ..." and tap "Trust" in the popup. + +![iOS Trust Popup](pathname:///reactnative/ios-trust.png) + +D) Close the Settings app on the device. + +E) Close the Metro window on the computer. + +F) Run `npx react-native run-ios` again. + +::: + +:::note pass + +In some tests, the build failed with the following error: ``` PhaseScriptExecution failed with a nonzero exit code @@ -402,6 +464,18 @@ DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH ::: +:::caution pass + +In some test runs, the error mentioned a development team: + +``` +error: Signing for "SheetJSRNFetch" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'SheetJSRNFetch' from project 'SheetJSRNFetch') +``` + +Code signing must be enabled in the project! + +::: + :::info pass By default, React Native generates applications that exclusively target iPhone. @@ -427,8 +501,7 @@ D) Select the "Build Settings" tab in the main area. E) In the search bar below "Build Settings", type "tar" -F) Look for the "Targeted Device Families" row. Change the corresponding value -to "iPhone, iPad". +F) In the "Targeted Device Families" row, change the value to "iPhone, iPad". ::: @@ -1058,4 +1131,4 @@ npx xlsx-cli /tmp/sheetjsw.xlsx [^5]: React-Native commit [`5b597b5`](https://github.com/facebook/react-native/commit/5b597b5ff94953accc635ed3090186baeecb3873) added the final piece required for `fetch` support. It landed in version `0.72.0-rc.1` and is available in official releases starting from `0.72.0`. [^6]: When the demo was last tested, the Temurin distribution of Java 17 was installed through the macOS Brew package manager by running `brew install temurin17`. [Direct downloads are available at `adoptium.net`](https://adoptium.net/temurin/releases/?version=17) [^7]: See ["Running On Device"](https://reactnative.dev/docs/running-on-device) in the React Native documentation -[^8]: Follow the ["React Native CLI Quickstart"](https://reactnative.dev/docs/environment-setup) for Android (and iOS, if applicable) \ No newline at end of file +[^8]: Follow the ["React Native CLI Quickstart"](https://reactnative.dev/docs/environment-setup) for Android (and iOS, if applicable) diff --git a/docz/docs/03-demos/19-desktop/02-nwjs.md b/docz/docs/03-demos/19-desktop/02-nwjs.md index c2d19c2..7eabd1f 100644 --- a/docz/docs/03-demos/19-desktop/02-nwjs.md +++ b/docz/docs/03-demos/19-desktop/02-nwjs.md @@ -113,11 +113,11 @@ This demo was tested in the following environments: | OS and Version | Architecture | NW.js | Date | |:---------------|:-------------|:---------|:-----------| -| macOS 13.5.2 | `darwin-x64` | `0.78.1` | 2023-09-27 | +| macOS 14.3.1 | `darwin-x64` | `0.85.0` | 2024-03-12 | | macOS 14.1.2 | `darwin-arm` | `0.82.0` | 2023-12-01 | | Windows 10 | `win10-x64` | `0.83.0` | 2024-03-04 | | Windows 11 | `win11-arm` | `0.82.0` | 2023-12-01 | -| Linux (HoloOS) | `linux-x64` | `0.83.0` | 2024-01-26 | +| Linux (HoloOS) | `linux-x64` | `0.85.0` | 2024-03-12 | There is no official Linux ARM64 release. The community release[^1] was tested and verified on 2023-09-27. @@ -140,7 +140,7 @@ cd sheetjs-nwjs "version": "0.0.0", "main": "index.html", "dependencies": { - "nw": "0.83.0", + "nw": "0.85.0", "xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz" } }`} @@ -179,7 +179,7 @@ the file input element to select a spreadsheet and clicking the export button. 5) To build a standalone app, run the builder: ```bash -npx -p nw-builder nwbuild --mode=build --version=0.83.0 --glob=false --outDir=../out ./ +npx -p nw-builder nwbuild --mode=build --version=0.85.0 --glob=false --outDir=../out ./ ``` This will generate the standalone app in the `..\out\` folder. diff --git a/docz/docs/03-demos/27-local/03-storageapi.md b/docz/docs/03-demos/27-local/03-storageapi.md index 81cdf1c..0473dc4 100644 --- a/docz/docs/03-demos/27-local/03-storageapi.md +++ b/docz/docs/03-demos/27-local/03-storageapi.md @@ -21,7 +21,7 @@ Each browser demo was tested in the following environments: | Browser | Date | |:------------|:-----------| | Chrome 119 | 2023-11-30 | -| Safari 16.6 | 2023-09-17 | +| Safari 17.3 | 2024-03-12 | ::: diff --git a/docz/docs/03-demos/32-extensions/01-extendscript.md b/docz/docs/03-demos/32-extensions/01-extendscript.md index 712d373..726d842 100644 --- a/docz/docs/03-demos/32-extensions/01-extendscript.md +++ b/docz/docs/03-demos/32-extensions/01-extendscript.md @@ -39,9 +39,9 @@ This demo was verified in the following deployments: | App | Platform | Date | |:----------|:-------------|:-----------| -| Photoshop | ExtendScript | 2023-09-24 | -| InDesign | ExtendScript | 2023-09-24 | -| InDesign | CEP | 2023-09-24 | +| Photoshop | ExtendScript | 2024-03-12 | +| InDesign | ExtendScript | 2024-03-12 | +| InDesign | CEP | 2024-03-12 | | InDesign | UXP | 2024-03-11 | ::: @@ -232,6 +232,32 @@ manifest must include the following flags to enable `cep.fs`: ``` +:::caution pass + +With newer versions of Creative Cloud apps, a special player debug mode must be +enabled to use unsigned extensions. The command depends on the CEP version. + +InDesign and PhotoShop 2024 use CEP 11. In the examples, the `11` should be +replaced with the appropriate CEP version number. + +On Windows, within the registry key `HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.11`, +a string value named `PlayerDebugMode` must be set to 1. This can be set in +PowerShell using the `reg` command: + +```pwsh +reg add HKCU\SOFTWARE\Adobe\CSXS.11 /v PlayerDebugMode /t REG_SZ /d 1 /f +``` + +On macOS, the setting must be added to `com.adobe.CSXS.11.plist` . After writing +to the property list, `cfprefsd` must be restarted: + +```bash +defaults write com.adobe.CSXS.11.plist PlayerDebugMode 1 +killall cfprefsd +``` + +::: + ### Reading Files The second argument to `cep.fs.readFile` is an encoding. `cep.encoding.Base64` diff --git a/docz/docs/03-demos/37-bigdata/02-worker.md b/docz/docs/03-demos/37-bigdata/02-worker.md index 151fd82..187ca06 100644 --- a/docz/docs/03-demos/37-bigdata/02-worker.md +++ b/docz/docs/03-demos/37-bigdata/02-worker.md @@ -190,11 +190,11 @@ Each browser demo was tested in the following environments: | Browser | Date | Comments | |:------------|:-----------|:----------------------------------------| -| Chrome 121 | 2024-02-25 | | -| Edge 116 | 2023-09-02 | | -| Safari 16.6 | 2023-09-02 | File System Access API is not supported | -| Brave 1.57 | 2023-09-02 | File System Access API is not supported | -| Firefox 118 | 2023-10-09 | File System Access API is not supported | +| Chrome 122 | 2024-03-12 | | +| Edge 122 | 2024-03-12 | | +| Safari 17.3 | 2024-03-12 | File System Access API is not supported | +| Brave 1.59 | 2024-03-12 | File System Access API is not supported | +| Firefox 122 | 2024-03-12 | File System Access API is not supported | ::: diff --git a/docz/docs/03-demos/42-engines/09-hermes.md b/docz/docs/03-demos/42-engines/09-hermes.md index a369d3b..f073ece 100644 --- a/docz/docs/03-demos/42-engines/09-hermes.md +++ b/docz/docs/03-demos/42-engines/09-hermes.md @@ -686,7 +686,11 @@ contents of the first sheet as CSV rows. :::note Tested Deployments -This demo was last tested on 2023 November 04 against Hermes version `0.12.0`. +This demo was tested in the following deployments: + +| Architecture | Hermes | Date | +|:-------------|:---------|:-----------| +| `darwin-x64` | `0.12.0` | 2024-03-13 | ::: diff --git a/docz/static/reactnative/ios-cert.png b/docz/static/reactnative/ios-cert.png new file mode 100644 index 0000000..eeafa7d Binary files /dev/null and b/docz/static/reactnative/ios-cert.png differ diff --git a/docz/static/reactnative/ios-mgmt.png b/docz/static/reactnative/ios-mgmt.png new file mode 100644 index 0000000..4f2c8cd Binary files /dev/null and b/docz/static/reactnative/ios-mgmt.png differ diff --git a/docz/static/reactnative/ios-trust.png b/docz/static/reactnative/ios-trust.png new file mode 100644 index 0000000..4cca59e Binary files /dev/null and b/docz/static/reactnative/ios-trust.png differ diff --git a/docz/static/reactnative/xcode-sign-cap.png b/docz/static/reactnative/xcode-sign-cap.png new file mode 100644 index 0000000..94ee3f5 Binary files /dev/null and b/docz/static/reactnative/xcode-sign-cap.png differ