kaioken no longer requires esbuild workaround

This commit is contained in:
SheetJS 2024-04-20 22:35:21 -04:00
parent 7b9c03cc1b
commit b699cfaf9a
6 changed files with 62 additions and 68 deletions

@ -121,8 +121,8 @@ This demo was last tested in the following deployments:
| Architecture | BunJS | Date |
|:-------------|:--------|:-----------|
| `darwin-x64` | `1.1.3` | 2024-04-10 |
| `win10-x64` | `1.1.3` | 2024-04-10 |
| `darwin-x64` | `1.1.4` | 2024-04-19 |
| `win10-x64` | `1.1.4` | 2024-04-19 |
:::
@ -134,6 +134,13 @@ cd sheetjs-bun-dle
echo "{}" > package.json
```
:::caution pass
In PowerShell, the redirect will add the UTF16LE BOM. Bun does not currently
support the encoding. The file must be resaved in UTF8 (without BOM) or ASCII.
:::
1) Install the SheetJS package tarball:
<CodeBlock language="bash">{`\

@ -30,6 +30,13 @@ This demo focuses on Kaioken concepts. Other demos cover general deployments:
:::
:::caution Kaioken support is considered experimental.
Great open source software grows with user tests and reports. Any issues should
be reported to the Kaioken project for further diagnosis.
:::
## Installation
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
@ -326,9 +333,9 @@ export default function SheetJSKaiokenAoO() {
This demo was tested in the following environments:
| Kaioken | ViteJS | Date |
|:---------|:--------|:-----------|
| `0.11.2` | `5.2.6` | 2024-03-24 |
| Kaioken | ViteJS | Date |
|:---------|:---------|:-----------|
| `0.17.0` | `5.2.10` | 2024-04-20 |
:::
@ -337,8 +344,8 @@ This demo was tested in the following environments:
```bash
npm create vite@latest sheetjs-kaioken -- --template vanilla-ts
cd sheetjs-kaioken
pnpm add --save kaioken
pnpm add --save vite-plugin-kaioken -D
npm add --save kaioken
npm add --save vite-plugin-kaioken -D
```
2) Create a new file `vite.config.ts` with the following content:
@ -348,14 +355,6 @@ import { defineConfig } from "vite"
import kaioken from "vite-plugin-kaioken"
export default defineConfig({
esbuild: {
jsxInject: `import * as kaioken from "kaioken"`,
jsx: "transform",
jsxFactory: "kaioken.createElement",
jsxFragment: "kaioken.fragment",
loader: "tsx",
include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
},
plugins: [kaioken()],
})
```
@ -384,8 +383,8 @@ mount(App, root!);
6) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
pnpm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
pnpm run dev`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
7) Open a web browser and access the displayed URL (`http://localhost:5173`)
@ -396,7 +395,7 @@ and the page will attempt to download `SheetJSKaiokenAoO.xlsx`.
8) Build the site:
```bash
pnpm run build
npm run build
```
The generated site will be placed in the `dist` folder.
@ -481,9 +480,9 @@ export default function SheetJSKaiokenHTML() {
This demo was tested in the following environments:
| Kaioken | ViteJS | Date |
|:---------|:--------|:-----------|
| `0.11.2` | `5.2.6` | 2024-03-24 |
| Kaioken | ViteJS | Date |
|:---------|:---------|:-----------|
| `0.17.0` | `5.2.10` | 2024-04-20 |
:::
@ -492,8 +491,8 @@ This demo was tested in the following environments:
```bash
npm create vite@latest sheetjs-kaioken -- --template vanilla-ts
cd sheetjs-kaioken
pnpm add --save kaioken
pnpm add --save vite-plugin-kaioken -D
npm add --save kaioken
npm add --save vite-plugin-kaioken -D
```
2) Create a new file `vite.config.ts` with the following content:
@ -503,14 +502,6 @@ import { defineConfig } from "vite"
import kaioken from "vite-plugin-kaioken"
export default defineConfig({
esbuild: {
jsxInject: `import * as kaioken from "kaioken"`,
jsx: "transform",
jsxFactory: "kaioken.createElement",
jsxFragment: "kaioken.fragment",
loader: "tsx",
include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
},
plugins: [kaioken()],
})
```
@ -539,8 +530,8 @@ mount(App, root!);
6) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
pnpm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
pnpm run dev`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
7) Open a web browser and access the displayed URL (`http://localhost:5173`)
@ -551,7 +542,7 @@ and the page will attempt to download `SheetJSKaiokenHTML.xlsx`.
8) Build the site:
```bash
pnpm run build
npm run build
```
The generated site will be placed in the `dist` folder.

@ -14,6 +14,10 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
export const y = {style: {color:"gold"}};
export const g = {style: {color:"green"}};
export const B = {style: {fontWeight:"bold"}};
[Tauri](https://tauri.app/) is a modern toolkit for building desktop apps. Tauri
apps leverage platform-native browser engines to build lightweight programs.
@ -208,7 +212,7 @@ function SheetJSImportKaioponent() {
<table><tbody>{data.map((row) =>
<tr>{row.map((cell) => <td>{cell}</td>)}</tr>
)}</tbody></table>
</>);
</> );
}
```
@ -327,7 +331,6 @@ function SheetJSExportKaioponent() {
return ( <button type="button" onclick={save_callback}>Save Data</button> );
}
```
</TabItem>
@ -341,7 +344,7 @@ This demo was tested in the following environments:
| OS and Version | Architecture | Tauri | Date |
|:---------------|:-------------|:----------|:-----------|
| macOS 14.4 | `darwin-x64` | `v1.5.11` | 2024-03-15 |
| macOS 14.4 | `darwin-x64` | `v1.5.11` | 2024-04-20 |
| macOS 14.0 | `darwin-arm` | `v1.5.2` | 2023-10-18 |
| Windows 10 | `win10-x64` | `v1.5.11` | 2024-03-24 |
| Windows 11 | `win11-arm` | `v1.5.7` | 2023-12-01 |
@ -370,18 +373,18 @@ npx @tauri-apps/cli info
If required dependencies are installed, the output will show a checkmark next to
"Environment". The output from the most recent macOS test is shown below:
```
[✔] Environment
- OS: Mac OS 14.4.0 X64
✔ Xcode Command Line Tools: installed
✔ rustc: 1.76.0 (07dca489a 2024-02-04)
✔ cargo: 1.76.0 (c84b36747 2024-01-18)
✔ rustup: 1.27.0 (bbb9276d2 2024-03-08)
✔ Rust toolchain: stable-x86_64-apple-darwin (default)
- node: 20.11.1
- npm: 10.2.4
- bun: 1.0.31
```
<pre>
<span {...g}>[✔]</span> <span style={{...y.style,...B.style}}>Environment</span>
{` `}<span {...g}>-</span> <span {...B}>OS</span>: Mac OS 14.4.1 X64
{` `}<span {...g}></span> <span {...B}>Xcode Command Line Tools</span>: installed
{` `}<span {...g}></span> <span {...B}>rustc</span>: 1.77.2 (25ef9e3d8 2024-04-09)
{` `}<span {...g}></span> <span {...B}>cargo</span>: 1.77.2 (e52e36006 2024-03-26)
{` `}<span {...g}></span> <span {...B}>rustup</span>: 1.27.0 (bbb9276d2 2024-03-08)
{` `}<span {...g}></span> <span {...B}>Rust toolchain</span>: stable-x86_64-apple-darwin (default)
{` `}<span {...g}>-</span> <span {...B}>node</span>: 20.12.1
{` `}<span {...g}>-</span> <span {...B}>npm</span>: 10.5.0
{` `}<span {...g}>-</span> <span {...B}>bun</span>: 1.1.4
</pre>
:::caution pass
@ -433,6 +436,8 @@ npm i --save-dev @tauri-apps/cli`}
</TabItem>
<TabItem value="kaioken" label="Kaioken" default>
Install the Kaioken dependencies:
```bash
npm add kaioken --save
npm add vite-plugin-kaioken -D --save
@ -462,14 +467,13 @@ npm add vite-plugin-kaioken -D --save
// highlight-end
```
In the same file, look for the `"identifier"` key and replace the value with `com.sheetjs.tauri`:
In the same file, look for `"identifier"` and change the value to `com.sheetjs.tauri`:
```json title="src-tauri/tauri.conf.json (edit highlighted line)"
"icons/icon.ico"
],
"targets": "all",
// highlight-next-line
"identifier": "com.sheetjs.tauri",
"longDescription": "",
"icon": [
```
<Tabs groupId="framework">
@ -492,19 +496,11 @@ curl -o src/App.vue https://docs.sheetjs.com/tauri/App.vue
```ts title="vite.config.ts (add highlighted lines)"
import { defineConfig } from "vite";
// highlight-next-line
import kaioken from "vite-plugin-kaioken"
import kaioken from "vite-plugin-kaioken";
// https://vitejs.dev/config/
export default defineConfig(async () => ({
// highlight-start
esbuild: {
jsxInject: `import * as kaioken from "kaioken"`,
jsx: "transform",
jsxFactory: "kaioken.createElement",
jsxFragment: "kaioken.fragment",
loader: "tsx",
include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
},
plugins: [kaioken()],
// highlight-end
```
@ -664,7 +660,7 @@ sudo pacman -S openssl
:::note pass
During the last macOS test, the build failed with the following error message:
In some macOS tests, the build failed with the following error message:
```
Error failed to bundle project: error running bundle_dmg.sh

@ -91,7 +91,7 @@ This demo was tested in the following deployments:
|:-------------|:-------------|:----------|:----------|:-----------|
| `darwin-x64` | `4.0.0-rc.4` | `14.15.3` | Pre-built | 2024-03-15 |
| `darwin-arm` | `4.0.0-rc.2` | `18.18.0` | Compiled | 2023-12-01 |
| `win10-x64` | `4.0.0-rc.4` | `14.15.3` | Pre-built | 2024-03-04 |
| `win10-x64` | `4.0.0-rc.4` | `14.15.3` | Pre-built | 2024-04-18 |
| `win11-arm` | `4.0.0-rc.2` | `20.10.0` | Compiled | 2023-12-01 |
| `linux-x64` | `4.0.0-rc.4` | `14.15.3` | Pre-built | 2024-03-21 |
| `linux-arm` | `4.0.0-rc.2` | `20.10.0` | Compiled | 2023-12-01 |
@ -103,7 +103,7 @@ This demo was tested in the following deployments:
|:-------------|:--------|:---------|:-----------|
| `darwin-x64` | `5.8.1` | `18.5.0` | 2024-03-15 |
| `darwin-arm` | `5.8.1` | `18.5.0` | 2023-12-01 |
| `win10-x64` | `5.8.1` | `18.5.0` | 2024-03-24 |
| `win10-x64` | `5.8.1` | `18.5.0` | 2024-04-18 |
| `win11-arm` | `5.8.1` | `18.5.0` | 2023-12-01 |
| `linux-x64` | `5.8.1` | `18.5.0` | 2024-03-21 |
| `linux-arm` | `5.8.1` | `18.5.0` | 2023-12-01 |
@ -115,7 +115,7 @@ This demo was tested in the following deployments:
|:-------------|:--------|:----------|:-----------|
| `darwin-x64` | `2.4.0` | `21.7.1` | 2024-03-15 |
| `darwin-arm` | `2.3.0` | `21.3.0` | 2023-12-01 |
| `win10-x64` | `2.4.0` | `16.20.2` | 2024-03-24 |
| `win10-x64` | `2.4.2` | `16.20.2` | 2024-04-18 |
| `linux-x64` | `2.4.0` | `21.7.1` | 2024-03-21 |
| `linux-arm` | `2.3.0` | `21.3.0` | 2023-12-01 |

@ -165,7 +165,7 @@ This demo was tested in the following deployments:
|:-------------|:------------------|:-----------|
| `darwin-x64` | `3.0.1` | 2024-03-15 |
| `darwin-arm` | `3.0.0-beta-2056` | 2023-12-01 |
| `win10-x64` | `3.0.0` | 2024-03-04 |
| `win10-x64` | `3.1.0` | 2024-04-17 |
| `win11-arm` | `3.0.0-beta-2056` | 2023-12-01 |
| `linux-x64` | `3.0.1` | 2024-03-21 |
| `linux-arm` | `3.0.0-beta-2056` | 2023-12-01 |

@ -181,7 +181,7 @@ const config = {
}
})
},
additionalLanguages: [ "visual-basic", "swift", "java", "php", "csharp", "perl", "ruby", "cpp", "applescript", "liquid", "rust", "dart", "wolfram", "matlab", "stata", "zig", "diff", "bash" ],
additionalLanguages: [ "visual-basic", "swift", "java", "php", "csharp", "perl", "ruby", "cpp", "applescript", "liquid", "rust", "dart", "wolfram", "matlab", "stata", "zig", "diff", "bash", "json" ],
},
liveCodeBlock: {
playgroundPosition: 'top'