From c541c81a16784a244942cce8363e1d33cd72a035 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Thu, 6 Jul 2023 03:21:41 -0400 Subject: [PATCH] chakra-linux --- Makefile | 19 +--- .../01-installation/04-amd.md | 4 +- .../01-installation/06-deno.md | 2 +- docz/docs/03-demos/01-frontend/01-react.md | 43 +++++--- docz/docs/03-demos/01-frontend/03-angular.md | 2 +- docz/docs/03-demos/01-frontend/08-bundler.md | 3 +- docz/docs/03-demos/02-grid/18-mui.md | 4 +- docz/docs/03-demos/04-static/05-vitejs.md | 8 +- .../03-demos/06-desktop/06-reactnative.md | 16 +-- docz/docs/03-demos/12-engines/20_chakra.md | 102 ++++++++++++++---- docz/docs/03-demos/12-engines/21_boa.md | 9 +- docz/static/chakra/Makefile | 17 ++- package.json | 2 + 13 files changed, 151 insertions(+), 80 deletions(-) diff --git a/Makefile b/Makefile index bfae0f0..5d6fd77 100644 --- a/Makefile +++ b/Makefile @@ -23,19 +23,6 @@ serve: spell: npx spellchecker-cli -q -d .spelling -f 'docz/**/*.md*' --no-suggestions -.PHONY: index -index: readme ## Rebuild site - sed -i .bak 's/](d/](https:\/\/github.com\/SheetJS\/SheetJS\/tree\/master\/d/g' README.md - grip --title "SheetJS Community Edition" --export README.md - mv README.html index.html - git add README.md index.html *.png - #mv js-xlsx/README.md . - #git add README.md - -.PHONY: readme -readme: README.md - markdown-toc -i README.md - .PHONY: graph graph: formats.png legend.png ## Rebuild format conversion graph misc/formats.svg: misc/formats.dot @@ -46,12 +33,8 @@ formats.png legend.png: %.png: misc/%.svg node misc/coarsify.js misc/$*.svg misc/$*.svg.svg npx svgexport misc/$*.svg.svg $@ 0.5x -MDLINT=README.md $(wildcard docz/*.md*) $(wildcard docz/docs/*.md*) $(wildcard docz/docs/*/*.md*) +MDLINT=README.md $(wildcard docz/*.md*) $(wildcard docz/docs/*.md*) $(wildcard docz/docs/*/*.md*) $(wildcard docz/docs/*/*/*.md*) .PHONY: mdlint mdlint: $(MDLINT) ## Check markdown documents npx alex $^ npx --package markdown-spellcheck -- mdspell -a -n -x -r --en-us $^ - -READEPS=$(sort $(wildcard docbits/*.md)) -README.md: $(READEPS) - awk 'FNR==1{p=0}/#/{p=1}p' $^ | tr -d '\15\32' > $@ diff --git a/docz/docs/02-getting-started/01-installation/04-amd.md b/docz/docs/02-getting-started/01-installation/04-amd.md index 83c4efd..b523a77 100644 --- a/docz/docs/02-getting-started/01-installation/04-amd.md +++ b/docz/docs/02-getting-started/01-installation/04-amd.md @@ -122,8 +122,8 @@ require(["xlsx"], function( #### Synchronous Loading -When `async` is disabled, the scripts can be referenced directly in `require` -calls. +When `async` is set to `false` or `0`, the scripts can be directly referenced in +`require` calls. {`\ diff --git a/docz/docs/02-getting-started/01-installation/06-deno.md b/docz/docs/02-getting-started/01-installation/06-deno.md index 1d6ba1d..6e7e8f3 100644 --- a/docz/docs/02-getting-started/01-installation/06-deno.md +++ b/docz/docs/02-getting-started/01-installation/06-deno.md @@ -77,7 +77,7 @@ The official Deno registry is out of date. This is a registry bug. ::: Applications using the Deno registry can migrate by changing the URLs. After -migrating, it is easy to update by changing the version number. +migrating, scripts can be updated by changing the version number. diff --git a/docz/docs/03-demos/01-frontend/01-react.md b/docz/docs/03-demos/01-frontend/01-react.md index 88a6a48..1052bc9 100644 --- a/docz/docs/03-demos/01-frontend/01-react.md +++ b/docz/docs/03-demos/01-frontend/01-react.md @@ -1,21 +1,31 @@ --- title: ReactJS +sidebar_label: ReactJS +description: Build interactive websites with ReactJS. Seamlessly integrate spreadsheets into your app using SheetJS. Bring Excel-powered workflows and data to the modern web. pagination_prev: demos/index pagination_next: demos/grid/index sidebar_position: 1 --- +# Sheets in ReactJS Sites + import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock'; -ReactJS is a JS library for building user interfaces. +[ReactJS](https://react.dev/) is a JavaScript library for building user interfaces. -This demo tries to cover common React data flow ideas and strategies. React -familiarity is assumed. +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. -Other demos cover general React deployments, including: +This demo uses ReactJS and SheetJS to process and generate spreadsheets. We'll +explore how to load SheetJS in a ReactJS site and compare common state models +and data flow strategies. + +:::note pass + +This demo focuses on ReactJS concepts. Other demos cover general deployments: - [Static Site Generation powered by NextJS](/docs/demos/static/nextjs) - [iOS and Android applications powered by React Native](/docs/demos/mobile/reactnative) @@ -23,6 +33,7 @@ Other demos cover general React deployments, including: - [React Data Grid UI component](/docs/demos/grid/rdg) - [Glide Data Grid UI component](/docs/demos/grid/gdg) +::: ## Installation @@ -70,7 +81,7 @@ each row, using the values in the first rows as keys: -The React `useState` hook can configure the state: +The ReactJS `useState` hook can configure the state: @@ -144,7 +155,7 @@ flowchart LR -```ts +```js import { useEffect } from 'react'; import { read, utils } from 'xlsx'; @@ -298,12 +309,16 @@ export default function SheetJSReactAoO() { :::note -This demo was last run on 2023 February 28 using `create-react-app@5.0.1` and +This demo was last run on 2023 July 03 using `create-react-app@5.0.1` and `react-scripts@5.0.1`. ::: -1) Run `npx create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react`. +1) Create a new site: + +```bash +npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react +``` 2) Install the SheetJS dependency and start the dev server: @@ -333,7 +348,7 @@ of the columns. For more general use, passing around an Array of Arrays works. However, this does not handle merge cells well! The `sheet_to_html` function generates HTML that is aware of merges and other -worksheet features. React `dangerouslySetInnerHTML` attribute allows code to +worksheet features. ReactJS `dangerouslySetInnerHTML` attribute allows code to set the `innerHTML` attribute, effectively inserting the code into the page. In this example, the component attaches a `ref` to the `DIV` container. During @@ -382,12 +397,16 @@ export default function SheetJSReactHTML() { :::note -This demo was last run on 2023 February 28 using `create-react-app@5.0.1` and +This demo was last run on 2023 July 03 using `create-react-app@5.0.1` and `react-scripts@5.0.1`. ::: -1) Run `npx create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react`. +1) Create a new site: + +```bash +npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react +``` 2) Install the SheetJS dependency and start the dev server: @@ -446,5 +465,5 @@ const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({ [The Standalone Scripts](/docs/getting-started/installation/standalone) play nice with legacy deployments that do not use a bundler. -[The legacy demo](pathname:///react/index.html) shows a simple React component +[The legacy demo](pathname:///react/index.html) shows a simple ReactJS component transpiled in the browser using Babel standalone library. \ No newline at end of file diff --git a/docz/docs/03-demos/01-frontend/03-angular.md b/docz/docs/03-demos/01-frontend/03-angular.md index e827818..5692c61 100644 --- a/docz/docs/03-demos/01-frontend/03-angular.md +++ b/docz/docs/03-demos/01-frontend/03-angular.md @@ -312,7 +312,7 @@ Google and the Angular team. :::caution -The Angular tooling provides no easy way to switch between versions! +The Angular tooling does not provide a command to switch between versions! This is a known Angular problem. diff --git a/docz/docs/03-demos/01-frontend/08-bundler.md b/docz/docs/03-demos/01-frontend/08-bundler.md index 2efa856..07d382c 100644 --- a/docz/docs/03-demos/01-frontend/08-bundler.md +++ b/docz/docs/03-demos/01-frontend/08-bundler.md @@ -35,7 +35,8 @@ var XLSX = require("xlsx"); // ... use XLSX ... ``` -[After installing the module](/docs/getting-started/installation/nodejs), bundling is easy: +[After installing the NodeJS module](/docs/getting-started/installation/nodejs), +bundling is straightforward: ```bash browserify app.js > browserify.js diff --git a/docz/docs/03-demos/02-grid/18-mui.md b/docz/docs/03-demos/02-grid/18-mui.md index 37e159f..e7933d9 100644 --- a/docz/docs/03-demos/02-grid/18-mui.md +++ b/docz/docs/03-demos/02-grid/18-mui.md @@ -160,8 +160,8 @@ function muidg_to_ws(rows: Row[]): WorkSheet { **Editing Cells** -The `processRowUpdate` prop receives the new row data, allowing for easy -state mutation: +The `processRowUpdate` callback prop receives the new row data. An event handler +can mutate state: ```tsx import { GridRowModel } from "@mui/x-data-grid"; diff --git a/docz/docs/03-demos/04-static/05-vitejs.md b/docz/docs/03-demos/04-static/05-vitejs.md index 946ec8f..4e3d5e8 100644 --- a/docz/docs/03-demos/04-static/05-vitejs.md +++ b/docz/docs/03-demos/04-static/05-vitejs.md @@ -27,7 +27,7 @@ plugin and compare a few different data loading strategies. The ["Complete Demo"](#complete-demo) section includes a complete website powered by an XLSX spreadsheet. -:::note +:::note pass This demo covers static asset imports. For processing files in the browser, the ["Bundlers" demo](/docs/demos/frontend/bundler#vite) includes an example. @@ -186,7 +186,7 @@ document.querySelector('#app').innerHTML = ` :::note -This demo was tested on 2023 June 06 against `vite v4.3.9`. +This demo was tested on 2023 July 03 with `vite v4.3.9` and `vue-ts` template. ::: @@ -284,8 +284,8 @@ npm run build npx http-server dist/ ``` -The terminal will display a url like `http://127.0.0.1:8080` . Access that page -with a web browser. +The terminal will display a URL, typically `http://127.0.0.1:8080` . Access +that page with a web browser. 7) To confirm that only the raw data is present in the page, view the page source. The code will reference some script like `/assets/index-HASH.js`. diff --git a/docz/docs/03-demos/06-desktop/06-reactnative.md b/docz/docs/03-demos/06-desktop/06-reactnative.md index d7ca5ba..d8d4217 100644 --- a/docz/docs/03-demos/06-desktop/06-reactnative.md +++ b/docz/docs/03-demos/06-desktop/06-reactnative.md @@ -52,6 +52,7 @@ This demo was tested in the following environments: | Windows 10 | x64 | `v0.70.10` | 2023-01-04 | | Windows 11 | x64 | `v0.71.11` | 2023-05-11 | | MacOS 12.4 | x64 | `v0.64.30` | 2023-01-04 | +| MacOS 13.4 | arm | `v0.71.18` | 2023-07-06 | ::: @@ -391,17 +392,10 @@ file picker to select the `pres.xlsx` file and the app will show the data. 0) Follow the [React Native](https://reactnative.dev/docs/environment-setup) guide for React Native CLI on MacOS. -:::caution - -At the time of testing, NodeJS `v16` was required. A tool like -[`n`](https://github.com/tj/n/) should be used to switch the NodeJS version. - -::: - -1) Create a new project using React Native `0.64`: +1) Create a new project using React Native `0.71`: ```bash -npx react-native init SheetJSmacOS --template react-native@^0.64.0 +npx react-native init SheetJSmacOS --template react-native@^0.71.0 cd SheetJSmacOS ``` @@ -576,9 +570,9 @@ highlighted lines: 13B07FAE1A68108700A75B9A /* SheetJSmacOS-iOS */, ``` -4) Replace `App.js` with the following: +4) Replace `App.tsx` with the following: -```tsx title="App.js" +```tsx title="App.tsx" import React, { useState, type Node } from 'react'; import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native'; import { read, utils, version } from 'xlsx'; diff --git a/docz/docs/03-demos/12-engines/20_chakra.md b/docz/docs/03-demos/12-engines/20_chakra.md index 8345beb..f06e0b6 100644 --- a/docz/docs/03-demos/12-engines/20_chakra.md +++ b/docz/docs/03-demos/12-engines/20_chakra.md @@ -120,17 +120,40 @@ This demo was tested in the following deployments: | Architecture | Git Commit | Date | |:-------------|:-----------|:-----------| -| `darwin-x64` | `c3ead3f` | 2023-04-09 | -| `darwin-arm` | `c3ead3f` | 2023-06-05 | +| `darwin-x64` | `c3ead3f` | 2023-07-05 | +| `darwin-arm` | `c3ead3f` | 2023-07-05 | +| `linux-x64` | `c3ead3f` | 2023-07-05 | ::: -0) Install `icu` and `cmake` dependencies. On macOS: +0) Install `icu` and `cmake` dependencies. + + + ```bash brew install icu4c cmake ``` + + + +```bash +brew install icu4c cmake +``` + + + + +On Arch Linux / HoloOS: + +```bash +sudo pacman -S cmake clang +``` + + + + 1) Download ChakraCore: ```bash @@ -151,27 +174,9 @@ cd ChakraCore cd .. ``` - - - -:::info - -When the demo was last tested, ChakraCore JIT was not supported. - -::: - -```bash -cd ChakraCore -./build.sh --static --icu=/usr/local/opt/icu4c/include --test-build -j=8 --no-jit -cd .. -``` - - - - :::caution -When this demo was last tested on macOS, the build failed with the message: +When this demo was last tested, the build failed with the message: ``` !!! couldn't find ICU ... @@ -188,6 +193,59 @@ cd .. ::: + + + +:::info + +When the demo was last tested, ChakraCore JIT was not supported. + +::: + +```bash +cd ChakraCore +./build.sh --static --icu=/usr/local/opt/icu4c/include --test-build -j=8 --no-jit +cd .. +``` + + +:::caution + +When this demo was last tested, the build failed with the message: + +``` +!!! couldn't find ICU ... +``` + +This was fixed with a local symlink to the `icu4c` folder before the build step: + +```bash +cd ChakraCore +mkdir -p usr/local/opt +ln -s /opt/homebrew/opt/icu4c usr/local/opt/icu4c +cd .. +``` + +::: + + + + +:::caution + +When the demo was last tested, ChakraCore JIT was not supported. + +::: + +```bash +cd ChakraCore +./build.sh --static --embed-icu --test-build -j=8 --no-jit +cd .. +``` + + + + 3) Download the source file and `Makefile`: - [`sheetjs.ch.cpp`](pathname:///chakra/sheetjs.ch.cpp) diff --git a/docz/docs/03-demos/12-engines/21_boa.md b/docz/docs/03-demos/12-engines/21_boa.md index 38f117d..13faacd 100644 --- a/docz/docs/03-demos/12-engines/21_boa.md +++ b/docz/docs/03-demos/12-engines/21_boa.md @@ -115,16 +115,17 @@ This demo was tested in the following deployments: | Architecture | Date | |:-------------|:-----------| -| `darwin-x64` | 2023-06-05 | -| `darwin-arm` | 2023-06-05 | +| `darwin-x64` | 2023-07-05 | +| `darwin-arm` | 2023-07-05 | +| `linux-x64` | 2023-07-05 | ::: 1) Create a new project: ```bash -cargo new sheetjs-rs -cd sheetjs-rs +cargo new sheetjs-boa +cd sheetjs-boa cargo run ``` diff --git a/docz/static/chakra/Makefile b/docz/static/chakra/Makefile index f974536..7736782 100644 --- a/docz/static/chakra/Makefile +++ b/docz/static/chakra/Makefile @@ -1,13 +1,26 @@ CC=g++ CHAKRALIB=ChakraCore/out/Test/lib/libChakraCoreStatic.a -ICU4C=/usr/local/opt/icu4c/lib -ICULIB=$(ICU4C)/libicudata.a $(ICU4C)/libicuuc.a $(ICU4C)/libicui18n.a CFLAGS=-lstdc++ -std=c++11 -IChakraCore/lib/Jsrt +UNAME__S := $(shell uname -s) +ifeq ($(UNAME__S),Linux) +ICU4C=ChakraCore/deps/thirdparty/icu/lib +ICULIB=$(ICU4C)/libicui18n.a $(ICU4C)/libicuuc.a $(ICU4C)/libicudata.a + +sheetjs.ch: sheetjs.ch.cpp + clang++ $< $(CFLAGS) $(CHAKRALIB) $(ICULIB) -lm -ldl -Wno-c++11-compat-deprecated-writable-strings -Wno-deprecated-declarations -Wno-unknown-warning-option -o $@ + +endif +ifeq ($(UNAME__S),Darwin) +ICU4C=/usr/local/opt/icu4c/lib +ICULIB=$(ICU4C)/libicudata.a $(ICU4C)/libicuuc.a $(ICU4C)/libicui18n.a + sheetjs.ch: sheetjs.ch.cpp g++ $< $(CFLAGS) -Wl,-force_load $(CHAKRALIB) $(ICULIB) -framework CoreFoundation -framework Security -lm -ldl -Wno-c++11-compat-deprecated-writable-strings -Wno-deprecated-declarations -Wno-unknown-warning-option -o $@ +endif + .PHONY: clean clean: rm sheetjs.ch diff --git a/package.json b/package.json index db33001..5e5b6dc 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,8 @@ "private": true, "alex": { "allow": [ + "host-hostess", + "hook", "hooks", "chinese", "special", "simple",