From 62cfee92ef5ca30ed2459f7612e6ebcb5eb9adcf Mon Sep 17 00:00:00 2001
From: SheetJS <dev@sheetjs.com>
Date: Tue, 18 Oct 2022 18:33:42 -0400
Subject: [PATCH] vite-loader

---
 docz/docs/03-demos/06-content.md | 96 ++++++++++++++++++++++++++++++++
 docz/docs/03-demos/19-bundler.md |  7 +++
 2 files changed, 103 insertions(+)

diff --git a/docz/docs/03-demos/06-content.md b/docz/docs/03-demos/06-content.md
index 87960fc..2d62a1a 100644
--- a/docz/docs/03-demos/06-content.md
+++ b/docz/docs/03-demos/06-content.md
@@ -102,6 +102,102 @@ in the parsing logic, issues should then be raised with the SheetJS project.
 
 :::
 
+## ViteJS
+
+:::note
+
+Library integration in ViteJS is covered in ["Bundlers" demo](./bundler#vite)
+
+:::
+
+ViteJS supports static asset imports, but the default raw loader interprets data
+as UTF-8 strings.  This corrupts binary formats like XLSX and XLS, but a custom
+loader can override the default behavior.
+
+For a pure static site, a plugin can load data into an array of row objects. The
+SheetJS work is performed in the plugin. The library is not loaded in the page!
+
+```js title="vite.config.js"
+import { readFileSync } from 'fs';
+import { read, utils } from 'xlsx';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  assetsInclude: ['**/*.xlsx'], // mark that xlsx file should be treated as assets
+
+  plugins: [
+    { // this plugin handles ?sheetjs tags
+      name: "vite-sheet",
+      transform(code, id) {
+        if(!id.match(/\?sheetjs$/)) return;
+        var path = id.replace(/\?sheetjs/, "");
+        var wb = read(readFileSync(path));
+        var data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+        return `export default JSON.parse('${JSON.stringify(data)}')`;
+      }
+    }
+  ]
+})
+```
+
+This loader uses the query `sheetjs`:
+
+```js title="main.js"
+import data from './data.xlsx?sheetjs';
+
+document.querySelector('#app').innerHTML = `<div><pre>
+${data.map(row => JSON.stringify(row)).join("\n")}
+</pre></div>`;
+```
+
+<details><summary><b>Base64 plugin</b> (click to show)</summary>
+
+This loader pulls in data as a Base64 string that can be read with `XLSX.read`.
+While this approach works, it is not recommended since it loads the library in
+the front-end site.
+
+```js title="vite.config.js"
+import { readFileSync } from 'fs';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  assetsInclude: ['**/*.xlsx'], // mark that xlsx file should be treated as assets
+
+  plugins: [
+    { // this plugin handles ?b64 tags
+      name: "vite-b64-plugin",
+      transform(code, id) {
+        if(!id.match(/\?b64$/)) return;
+        var path = id.replace(/\?b64/, "");
+        var data = readFileSync(path, "base64");
+        return `export default '${data}'`;
+      }
+    }
+  ]
+});
+```
+
+When importing using the `b64` query, the raw Base64 string will be exposed.
+This can be read directly with `XLSX.read` in JS code:
+
+```js title="main.js"
+import { read, utils } from "xlsx";
+
+/* reference workbook */
+import b64 from './data.xlsx?b64';
+/* parse workbook and export first sheet to CSV */
+const wb = await read(b64);
+const wsname = wb.SheetNames[0];
+const csv = utils.sheet_to_csv(wb.Sheets[wsname]);
+
+document.querySelector('#app').innerHTML = `<div><pre>
+<b>${wsname}</b>
+${csv}
+</pre></div>`;
+```
+
+</details>
+
 ## NextJS
 
 :::note
diff --git a/docz/docs/03-demos/19-bundler.md b/docz/docs/03-demos/19-bundler.md
index e036a91..2c11196 100644
--- a/docz/docs/03-demos/19-bundler.md
+++ b/docz/docs/03-demos/19-bundler.md
@@ -1060,6 +1060,13 @@ Access http://localhost:8080 in your web browser.
 
 </details>
 
+:::note
+
+The [Vite section of the Content demo](./content#vitejs) covers SheetJS-powered
+asset loaders, suitable for static sites pulling data from fixed spreadsheets.
+
+:::
+
 ## Webpack
 
 The ECMAScript Module build has no `require` or `import` statements and does