chakra-linux

This commit is contained in:
SheetJS 2023-07-06 03:21:41 -04:00
parent 74ac713193
commit c541c81a16
13 changed files with 151 additions and 80 deletions

@ -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' > $@

@ -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.
<CodeBlock language="html">{`\
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:0"></script>

@ -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.
<Tabs>
<TabItem value="v" label="URL with version">

@ -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:
</td></tr></tbody></table>
The React `useState` hook can configure the state:
The ReactJS `useState` hook can configure the state:
<Tabs groupId="lang">
<TabItem name="JS" value="JavaScript">
@ -144,7 +155,7 @@ flowchart LR
<Tabs groupId="lang">
<TabItem name="JS" value="JavaScript">
```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.

@ -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.

@ -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

@ -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";

@ -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 = `<table>
:::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`.

@ -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';

@ -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.
<Tabs groupId="triple">
<TabItem value="darwin-x64" label="Intel Mac">
```bash
brew install icu4c cmake
```
</TabItem>
<TabItem value="darwin-arm" label="Apple Silicon">
```bash
brew install icu4c cmake
```
</TabItem>
<TabItem value="linux-x64" label="Linux">
On Arch Linux / HoloOS:
```bash
sudo pacman -S cmake clang
```
</TabItem>
</Tabs>
1) Download ChakraCore:
```bash
@ -151,27 +174,9 @@ cd ChakraCore
cd ..
```
</TabItem>
<TabItem value="darwin-arm" label="Apple Silicon">
:::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 ..
```
</TabItem>
</Tabs>
:::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 ..
:::
</TabItem>
<TabItem value="darwin-arm" label="Apple Silicon">
:::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 ..
```
:::
</TabItem>
<TabItem value="linux-x64" label="Linux">
:::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 ..
```
</TabItem>
</Tabs>
3) Download the source file and `Makefile`:
- [`sheetjs.ch.cpp`](pathname:///chakra/sheetjs.ch.cpp)

@ -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
```

@ -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

@ -2,6 +2,8 @@
"private": true,
"alex": {
"allow": [
"host-hostess",
"hook", "hooks",
"chinese",
"special",
"simple",