forked from sheetjs/docs.sheetjs.com
		
	kaioken no longer requires esbuild workaround
This commit is contained in:
		
							parent
							
								
									7b9c03cc1b
								
							
						
					
					
						commit
						b699cfaf9a
					
				| @ -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' | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user