forked from sheetjs/docs.sheetjs.com
chakra-linux
This commit is contained in:
parent
74ac713193
commit
c541c81a16
19
Makefile
19
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' > $@
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user