svelte

docz/docs/03-demos/01-salesforce.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 1
 title: Salesforce LWC
 ---
 

docz/docs/03-demos/02-mobile.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 19
 title: iOS and Android Apps
 ---
 

docz/docs/03-demos/03-desktop.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 16
 title: Desktop Applications
 ---
 

docz/docs/03-demos/04-grid.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 14
 title: Data Grids and UI
 ---
 

docz/docs/03-demos/05-database.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 3
 title: Databases and SQL
 ---
 

docz/docs/03-demos/06-content.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 20
 title: Content and Site Generation
 ---
 

docz/docs/03-demos/11-angular.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 23
 title: Angular
 ---
 

docz/docs/03-demos/12-react.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 21
 title: ReactJS
 ---
 

docz/docs/03-demos/13-vue.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 22
 title: VueJS
 ---
 

docz/docs/03-demos/14-svelte.md

@@ -0,0 +1,152 @@
+---
+title: Svelte
+---
+
+[Svelte](https://svelte.dev/) is a JS library for building user interfaces.
+
+This demo tries to cover common Svelte data flow ideas and strategies. Svelte
+familiarity is assumed.
+
+
+## Installation
+
+[The "Frameworks" section](../getting-started/installation/frameworks) covers
+installation with Yarn and other package managers.
+
+The library can be imported directly from Svelte files with:
+
+```js
+import { read, utils, writeFile } from 'xlsx';
+```
+
+
+## Internal State
+
+The various SheetJS APIs work with various data shapes.  The preferred state
+depends on the application.
+
+### Array of Objects
+
+Typically, some users will create a spreadsheet with source data that should be
+loaded into the site.  This sheet will have known columns.  For example, our
+[presidents sheet](https://sheetjs.com/pres.xlsx) has "Name" / "Index" columns:
+
+![`pres.xlsx` data](pathname:///pres.png)
+
+This naturally maps to an array of typed objects, as in the TS example below:
+
+```ts
+import { read, utils } from 'xlsx';
+
+interface President {
+  Name: string;
+  Index: number;
+}
+
+const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
+const wb = read(f);
+const data = utils.sheet_to_json<President>(wb.Sheets[wb.SheetNames[0]]);
+console.log(data);
+```
+
+`data` will be an array of objects:
+
+```js
+[
+  { Name: "Bill Clinton", Index: 42 },
+  { Name: "GeorgeW Bush", Index: 43 },
+  { Name: "Barack Obama", Index: 44 },
+  { Name: "Donald Trump", Index: 45 },
+  { Name: "Joseph Biden", Index: 46 }
+]
+```
+
+A component will typically map over the data. The following example generates
+a TABLE with a row for each President:
+
+```html title="src/SheetJSSvelteAoO.svelte"
+<script>
+import { onMount } from 'svelte';
+import { read, utils, writeFileXLSX } from 'xlsx';
+
+/* the component state is an array of presidents */
+let pres = [];
+
+/* Fetch and update the state once */
+onMount(async() => {
+  const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
+  const wb = read(f); // parse the array buffer
+  const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
+  // highlight-start
+  pres = utils.sheet_to_json(ws); // generate objects and update state
+  // highlight-end
+})
+
+/* get state data and export to XLSX */
+function exportFile() {
+  // highlight-next-line
+  const ws = utils.json_to_sheet(pres);
+  const wb = utils.book_new();
+  utils.book_append_sheet(wb, ws, "Data");
+  writeFileXLSX(wb, "SheetJSSvelteAoO.xlsx");
+}
+</script>
+
+<main>
+  <table><thead><th>Name</th><th>Index</th></thead><tbody>
+  <!-- highlight-start -->
+  {#each pres as p}<tr>
+    <td>{p.Name}</td>
+    <td>{p.Index}</td>
+  </tr>{/each}
+  <!-- highlight-end -->
+  </tbody><tfoot><td colSpan={2}>
+  <button on:click={exportFile}>Export XLSX</button>
+  </td></tfoot></table>
+</main>
+```
+
+### HTML
+
+The main disadvantage of the Array of Objects approach is the specific nature
+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.  Svelte `@html` tag allows raw HTML strings:
+
+```html title="src/SheetJSSvelteHTML.svelte"
+<script>
+import { onMount } from 'svelte';
+import { read, utils, writeFileXLSX } from 'xlsx';
+
+let html = "";
+let tbl;
+
+/* Fetch and update the state once */
+onMount(async() => {
+  const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
+  const wb = read(f); // parse the array buffer
+  const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
+  // highlight-start
+  html = utils.sheet_to_html(ws); // generate HTML and update state
+  // highlight-end
+})
+
+/* get state data and export to XLSX */
+function exportFile() {
+  // highlight-start
+  const elt = tbl.getElementsByTagName("TABLE")[0];
+  const wb = utils.table_to_book(elt);
+  // highlight-end
+  writeFileXLSX(wb, "SheetJSSvelteHTML.xlsx");
+}
+</script>
+
+<main>
+  <button on:click={exportFile}>Export XLSX</button>
+  <!-- highlight-start -->
+  <div bind:this={tbl}>{@html html}</div>
+  <!-- highlight-end -->
+</main>
+```

docz/docs/03-demos/19-bundler.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 9
 title: Bundlers
 ---
 

docz/docs/03-demos/21-aws.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 26
 title: Amazon Web Services
 ---
 

docz/docs/03-demos/22-azure.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 25
 title: Azure Cloud Services
 ---
 

docz/docs/03-demos/23-netsuite.md

@@ -1,9 +1,7 @@
 ---
-sidebar_position: 4
+title: NetSuite
 ---
 
-# NetSuite
-
 This demo discusses the key SheetJS operations.  Familiarity with SuiteScript 2
 is assumed.  The following sections of the SuiteScript documentation should be
 perused before reading this demo:

docz/docs/03-demos/24-extendscript.md

@@ -1,9 +1,7 @@
 ---
-sidebar_position: 2
+title: Adobe Apps
 ---
 
-# Adobe Apps
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 

docz/docs/03-demos/25-gsheet.md

@@ -1,9 +1,7 @@
 ---
-sidebar_position: 5
+title: Google Sheets
 ---
 
-# Google Sheets
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 

docz/docs/03-demos/26-excel.md

@@ -1,9 +1,7 @@
 ---
-sidebar_position: 10
+title: Excel JavaScript API
 ---
 
-# Excel JavaScript API
-
 Office 2016 introduced a JavaScript API for interacting with the application.
 It offers solutions for custom functions as well as task panes.
 

docz/docs/03-demos/27-cli.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 13
 title: Command-Line Tools
 ---
 

docz/docs/03-demos/28-chromium.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 15
 title: Chrome Extensions
 ---
 

docz/docs/03-demos/31-engines.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 18
 title: JavaScript Engines
 ---
 

docz/docs/03-demos/32-clipboard.md

@@ -1,9 +1,7 @@
 ---
-sidebar_position: 17
+title: Clipboard Data
 ---
 
-# Clipboard Data
-
 Spreadsheet software like Excel typically support copying and pasting cells and
 data. This is implemented through the Clipboard ("Pasteboard" in MacOS).
 

docz/docs/03-demos/33-localfile.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 26
 title: Local File Access
 ---
 

docz/docs/03-demos/34-network.mdx

@@ -1,10 +1,7 @@
 ---
-sidebar_position: 6
 title: HTTP Network Requests
 ---
 
-# XHR and fetch
-
 <head>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="https://unpkg.com/superagent@7.1.1/dist/superagent.min.js"></script>

docz/docs/03-demos/35-server.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 24
 title: HTTP Server Processing
 ---
 

docz/docs/03-demos/41-nosql.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 11
 title: NoSQL Data Stores
 ---
 

docz/docs/03-demos/42-headless.md

@@ -1,12 +1,10 @@
 ---
-sidebar_position: 7
+title: Headless Automation
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-# Headless Automation
-
 Headless automation involves controlling "headless browsers" to access websites
 and submit or download data.  It is also possible to automate browsers using
 custom browser extensions.

docz/docs/03-demos/43-ml.mdx

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 8
 title: Typed Arrays and ML
 ---
 

docz/docs/03-demos/44-legacy.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 12
 title: Legacy Frameworks
 ---
 

docz/docs/03-demos/index.md

@@ -1,6 +1,5 @@
 ---
 pagination_prev: getting-started/index
-sidebar_position: 1
 hide_table_of_contents: true
 ---
 
@@ -23,6 +22,7 @@ run in the web browser, demos will include interactive examples.
 
 - [`Angular`](./angular)
 - [`React`](./react)
+- [`Svelte`](./svelte)
 - [`VueJS`](./vue)
 - [`Angular.JS`](./legacy#angularjs)
 - [`Knockout`](./legacy#knockout)

docz/package.json

@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "2.0.1",
     "@docusaurus/theme-common": "2.0.1",
     "@docusaurus/theme-live-codeblock": "2.0.1",
-    "@mdx-js/react": "2.1.2",
+    "@mdx-js/react": "1.6.22",
     "clsx": "1.2.1",
     "prism-react-renderer": "1.3.5",
     "react": "17.0.2",