diff --git a/docz/docs/03-demos/02-frontend/01-kaioken.md b/docz/docs/03-demos/02-frontend/01-kaioken.md index 15ad90a..3190c1b 100644 --- a/docz/docs/03-demos/02-frontend/01-kaioken.md +++ b/docz/docs/03-demos/02-frontend/01-kaioken.md @@ -224,7 +224,7 @@ import { read, utils } from 'xlsx'; /* Fetch and parse the file */ // highlight-next-line -const [ pres, loading, error ] = useAsync(async() => { +const { data: pres, loading, error } = useAsync(async() => { /* Download from https://docs.sheetjs.com/pres.numbers */ const f = await fetch("https://docs.sheetjs.com/pres.numbers"); const ab = await f.arrayBuffer(); @@ -331,7 +331,7 @@ interface President { export default function SheetJSKaiokenAoO() { /* Fetch and parse the file */ - const [ pres, loading, error ] = useAsync(async() => { + const { data: pres, loading, error } = useAsync(async() => { const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer(); const wb = read(f); // parse the array buffer const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet @@ -371,10 +371,10 @@ export default function SheetJSKaiokenAoO() { Typically the JSX structure uses ternary expressions for testing status: ```jsx -const [ pres, loading, error ] = useAsync(async() => { /* ... */ }); +const { data, loading, error } = useAsync(async() => { /* ... */ }); return ( <> - { pres ? ( + { data ? ( Data is loaded ) : loading ? ( Loading ... diff --git a/docz/docs/03-demos/19-desktop/04-tauri.md b/docz/docs/03-demos/19-desktop/04-tauri.md index dbfa378..9027b30 100644 --- a/docz/docs/03-demos/19-desktop/04-tauri.md +++ b/docz/docs/03-demos/19-desktop/04-tauri.md @@ -181,15 +181,15 @@ const open_button_callback = async() => { ``` - + -The following snippet shows a simple Kaioponent: +The following snippet shows a simple Kiru component: -```tsx title="Kaioponent for importing data" +```tsx title="Kiru component for importing data" import { utils } from 'xlsx'; -import { useState } from 'kaioken'; +import { useState } from 'kiru'; -function SheetJSImportKaioponent() { +function SheetJSImportComponent() { const [data, setData] = useState([]); const open_callback = async() => { @@ -299,16 +299,16 @@ const save_button_callback = async() => { ``` - + -The following snippet shows a simple Kaioponent: +The following snippet shows a simple Kiru component: -```js title="Kaioponent for exporting data" +```js title="Kiru Component for exporting data" import { utils } from 'xlsx'; -import { useState } from 'kaioken'; +import { useState } from 'kiru'; -function SheetJSExportKaioponent() { - const [data, setData] = useState(["SheetJS".split(""), "Kaioken".split("")]); +function SheetJSExportComponent() { + const [data, setData] = useState(["SheetJS".split(""), "Kiru".split("")]); const save_callback = async() => { /* generate worksheet from the data */ @@ -405,12 +405,12 @@ npm create tauri-app@latest -- -m npm -t vue-ts SheetJSTauri -y ``` - + :::note pass -There is no official Tauri Kaioken template. This demo starts from the vanilla -TypeScript template and manually wires Kaioken +There is no official Tauri Kiru template. This demo starts from the vanilla +TypeScript template and manually wires Kiru ::: @@ -434,13 +434,13 @@ npm i --save-dev @tauri-apps/cli`} - + -Install the Kaioken dependencies: +Install the Kiru dependencies: ```bash -npm add kaioken --save -npm add vite-plugin-kaioken -D --save +npm add kiru --save +npm add vite-plugin-kiru -D --save ``` @@ -496,21 +496,21 @@ curl -o src/App.vue https://docs.sheetjs.com/tauri/App.vue ``` - + -4) Wire up Kaioken to the Tauri app: +4) Wire up Kiru to the Tauri app: - Add the highlighted lines to `vite.config.ts`: ```ts title="vite.config.ts (add highlighted lines)" import { defineConfig } from "vite"; // highlight-next-line -import kaioken from "vite-plugin-kaioken"; +import kiru from "vite-plugin-kiru"; // https://vitejs.dev/config/ export default defineConfig(async () => ({ // highlight-start - plugins: [kaioken()], + plugins: [kiru()], // highlight-end ``` @@ -563,7 +563,7 @@ table.center { - Replace `src/main.ts` with the following codeblock: ```ts title="src/main.ts" -import { mount } from "kaioken"; +import { mount } from "kiru"; import App from "./App"; const root = document.getElementById("container");