From 94d2754778a6a32bc2a5f949b33688e81c4ce866 Mon Sep 17 00:00:00 2001
From: SheetJS <dev@sheetjs.com>
Date: Fri, 26 Aug 2022 01:39:17 -0400
Subject: [PATCH] svelte

---
 docz/docs/03-demos/01-salesforce.md           |   1 -
 .../03-demos/{19-mobile.md => 02-mobile.md}   |   1 -
 .../03-demos/{16-desktop.md => 03-desktop.md} |   1 -
 docz/docs/03-demos/{14-grid.md => 04-grid.md} |   1 -
 .../{03-database.md => 05-database.md}        |   1 -
 .../03-demos/{20-content.md => 06-content.md} |   1 -
 .../03-demos/{23-angular.md => 11-angular.md} |   1 -
 .../03-demos/{21-react.md => 12-react.md}     |   1 -
 docz/docs/03-demos/{22-vue.md => 13-vue.md}   |   1 -
 docz/docs/03-demos/14-svelte.md               | 152 ++++++++++++++++++
 .../03-demos/{09-bundler.md => 19-bundler.md} |   1 -
 docz/docs/03-demos/{26-aws.md => 21-aws.md}   |   1 -
 .../03-demos/{25-azure.md => 22-azure.md}     |   1 -
 .../{04-netsuite.md => 23-netsuite.md}        |   4 +-
 ...{02-extendscript.md => 24-extendscript.md} |   4 +-
 .../03-demos/{05-gsheet.md => 25-gsheet.md}   |   4 +-
 .../03-demos/{10-excel.md => 26-excel.md}     |   4 +-
 docz/docs/03-demos/{13-cli.md => 27-cli.md}   |   1 -
 .../{15-chromium.md => 28-chromium.md}        |   1 -
 .../03-demos/{18-engines.md => 31-engines.md} |   1 -
 .../{17-clipboard.md => 32-clipboard.md}      |   4 +-
 .../{27-localfile.md => 33-localfile.md}      |   1 -
 .../{06-network.mdx => 34-network.mdx}        |   3 -
 .../03-demos/{24-server.md => 35-server.md}   |   1 -
 .../03-demos/{11-nosql.md => 41-nosql.md}     |   1 -
 .../{07-headless.md => 42-headless.md}        |   4 +-
 docz/docs/03-demos/{08-ml.mdx => 43-ml.mdx}   |   1 -
 .../03-demos/{12-legacy.md => 44-legacy.md}   |   1 -
 docz/docs/03-demos/index.md                   |   2 +-
 docz/package.json                             |   2 +-
 30 files changed, 160 insertions(+), 43 deletions(-)
 rename docz/docs/03-demos/{19-mobile.md => 02-mobile.md} (99%)
 rename docz/docs/03-demos/{16-desktop.md => 03-desktop.md} (99%)
 rename docz/docs/03-demos/{14-grid.md => 04-grid.md} (99%)
 rename docz/docs/03-demos/{03-database.md => 05-database.md} (99%)
 rename docz/docs/03-demos/{20-content.md => 06-content.md} (99%)
 rename docz/docs/03-demos/{23-angular.md => 11-angular.md} (99%)
 rename docz/docs/03-demos/{21-react.md => 12-react.md} (98%)
 rename docz/docs/03-demos/{22-vue.md => 13-vue.md} (99%)
 create mode 100644 docz/docs/03-demos/14-svelte.md
 rename docz/docs/03-demos/{09-bundler.md => 19-bundler.md} (99%)
 rename docz/docs/03-demos/{26-aws.md => 21-aws.md} (99%)
 rename docz/docs/03-demos/{25-azure.md => 22-azure.md} (99%)
 rename docz/docs/03-demos/{04-netsuite.md => 23-netsuite.md} (98%)
 rename docz/docs/03-demos/{02-extendscript.md => 24-extendscript.md} (99%)
 rename docz/docs/03-demos/{05-gsheet.md => 25-gsheet.md} (95%)
 rename docz/docs/03-demos/{10-excel.md => 26-excel.md} (95%)
 rename docz/docs/03-demos/{13-cli.md => 27-cli.md} (99%)
 rename docz/docs/03-demos/{15-chromium.md => 28-chromium.md} (99%)
 rename docz/docs/03-demos/{18-engines.md => 31-engines.md} (99%)
 rename docz/docs/03-demos/{17-clipboard.md => 32-clipboard.md} (96%)
 rename docz/docs/03-demos/{27-localfile.md => 33-localfile.md} (99%)
 rename docz/docs/03-demos/{06-network.mdx => 34-network.mdx} (99%)
 rename docz/docs/03-demos/{24-server.md => 35-server.md} (99%)
 rename docz/docs/03-demos/{11-nosql.md => 41-nosql.md} (99%)
 rename docz/docs/03-demos/{07-headless.md => 42-headless.md} (99%)
 rename docz/docs/03-demos/{08-ml.mdx => 43-ml.mdx} (99%)
 rename docz/docs/03-demos/{12-legacy.md => 44-legacy.md} (99%)

diff --git a/docz/docs/03-demos/01-salesforce.md b/docz/docs/03-demos/01-salesforce.md
index 1e37218..9ac253c 100644
--- a/docz/docs/03-demos/01-salesforce.md
+++ b/docz/docs/03-demos/01-salesforce.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 1
 title: Salesforce LWC
 ---
 
diff --git a/docz/docs/03-demos/19-mobile.md b/docz/docs/03-demos/02-mobile.md
similarity index 99%
rename from docz/docs/03-demos/19-mobile.md
rename to docz/docs/03-demos/02-mobile.md
index 9683808..a924cdb 100644
--- a/docz/docs/03-demos/19-mobile.md
+++ b/docz/docs/03-demos/02-mobile.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 19
 title: iOS and Android Apps
 ---
 
diff --git a/docz/docs/03-demos/16-desktop.md b/docz/docs/03-demos/03-desktop.md
similarity index 99%
rename from docz/docs/03-demos/16-desktop.md
rename to docz/docs/03-demos/03-desktop.md
index 9bb64fd..062b041 100644
--- a/docz/docs/03-demos/16-desktop.md
+++ b/docz/docs/03-demos/03-desktop.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 16
 title: Desktop Applications
 ---
 
diff --git a/docz/docs/03-demos/14-grid.md b/docz/docs/03-demos/04-grid.md
similarity index 99%
rename from docz/docs/03-demos/14-grid.md
rename to docz/docs/03-demos/04-grid.md
index 8096430..fe40229 100644
--- a/docz/docs/03-demos/14-grid.md
+++ b/docz/docs/03-demos/04-grid.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 14
 title: Data Grids and UI
 ---
 
diff --git a/docz/docs/03-demos/03-database.md b/docz/docs/03-demos/05-database.md
similarity index 99%
rename from docz/docs/03-demos/03-database.md
rename to docz/docs/03-demos/05-database.md
index 91d2f49..b025a45 100644
--- a/docz/docs/03-demos/03-database.md
+++ b/docz/docs/03-demos/05-database.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 3
 title: Databases and SQL
 ---
 
diff --git a/docz/docs/03-demos/20-content.md b/docz/docs/03-demos/06-content.md
similarity index 99%
rename from docz/docs/03-demos/20-content.md
rename to docz/docs/03-demos/06-content.md
index 2b31a42..2c9fd44 100644
--- a/docz/docs/03-demos/20-content.md
+++ b/docz/docs/03-demos/06-content.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 20
 title: Content and Site Generation
 ---
 
diff --git a/docz/docs/03-demos/23-angular.md b/docz/docs/03-demos/11-angular.md
similarity index 99%
rename from docz/docs/03-demos/23-angular.md
rename to docz/docs/03-demos/11-angular.md
index 5374eb7..352aa5f 100644
--- a/docz/docs/03-demos/23-angular.md
+++ b/docz/docs/03-demos/11-angular.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 23
 title: Angular
 ---
 
diff --git a/docz/docs/03-demos/21-react.md b/docz/docs/03-demos/12-react.md
similarity index 98%
rename from docz/docs/03-demos/21-react.md
rename to docz/docs/03-demos/12-react.md
index 0a7882f..dac0e89 100644
--- a/docz/docs/03-demos/21-react.md
+++ b/docz/docs/03-demos/12-react.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 21
 title: ReactJS
 ---
 
diff --git a/docz/docs/03-demos/22-vue.md b/docz/docs/03-demos/13-vue.md
similarity index 99%
rename from docz/docs/03-demos/22-vue.md
rename to docz/docs/03-demos/13-vue.md
index 58bb1e1..4e724f3 100644
--- a/docz/docs/03-demos/22-vue.md
+++ b/docz/docs/03-demos/13-vue.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 22
 title: VueJS
 ---
 
diff --git a/docz/docs/03-demos/14-svelte.md b/docz/docs/03-demos/14-svelte.md
new file mode 100644
index 0000000..54499b9
--- /dev/null
+++ b/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>
+```
diff --git a/docz/docs/03-demos/09-bundler.md b/docz/docs/03-demos/19-bundler.md
similarity index 99%
rename from docz/docs/03-demos/09-bundler.md
rename to docz/docs/03-demos/19-bundler.md
index dbf6ba0..94bef84 100644
--- a/docz/docs/03-demos/09-bundler.md
+++ b/docz/docs/03-demos/19-bundler.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 9
 title: Bundlers
 ---
 
diff --git a/docz/docs/03-demos/26-aws.md b/docz/docs/03-demos/21-aws.md
similarity index 99%
rename from docz/docs/03-demos/26-aws.md
rename to docz/docs/03-demos/21-aws.md
index c664070..4ec34c0 100644
--- a/docz/docs/03-demos/26-aws.md
+++ b/docz/docs/03-demos/21-aws.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 26
 title: Amazon Web Services
 ---
 
diff --git a/docz/docs/03-demos/25-azure.md b/docz/docs/03-demos/22-azure.md
similarity index 99%
rename from docz/docs/03-demos/25-azure.md
rename to docz/docs/03-demos/22-azure.md
index d9f0849..6271fec 100644
--- a/docz/docs/03-demos/25-azure.md
+++ b/docz/docs/03-demos/22-azure.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 25
 title: Azure Cloud Services
 ---
 
diff --git a/docz/docs/03-demos/04-netsuite.md b/docz/docs/03-demos/23-netsuite.md
similarity index 98%
rename from docz/docs/03-demos/04-netsuite.md
rename to docz/docs/03-demos/23-netsuite.md
index 1f03bf8..1ea2931 100644
--- a/docz/docs/03-demos/04-netsuite.md
+++ b/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:
diff --git a/docz/docs/03-demos/02-extendscript.md b/docz/docs/03-demos/24-extendscript.md
similarity index 99%
rename from docz/docs/03-demos/02-extendscript.md
rename to docz/docs/03-demos/24-extendscript.md
index 7d82570..cf29135 100644
--- a/docz/docs/03-demos/02-extendscript.md
+++ b/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';
 
diff --git a/docz/docs/03-demos/05-gsheet.md b/docz/docs/03-demos/25-gsheet.md
similarity index 95%
rename from docz/docs/03-demos/05-gsheet.md
rename to docz/docs/03-demos/25-gsheet.md
index 7dcc580..9754356 100644
--- a/docz/docs/03-demos/05-gsheet.md
+++ b/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';
 
diff --git a/docz/docs/03-demos/10-excel.md b/docz/docs/03-demos/26-excel.md
similarity index 95%
rename from docz/docs/03-demos/10-excel.md
rename to docz/docs/03-demos/26-excel.md
index 309b49b..1ea6ef5 100644
--- a/docz/docs/03-demos/10-excel.md
+++ b/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.
 
diff --git a/docz/docs/03-demos/13-cli.md b/docz/docs/03-demos/27-cli.md
similarity index 99%
rename from docz/docs/03-demos/13-cli.md
rename to docz/docs/03-demos/27-cli.md
index b408c83..deb2046 100644
--- a/docz/docs/03-demos/13-cli.md
+++ b/docz/docs/03-demos/27-cli.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 13
 title: Command-Line Tools
 ---
 
diff --git a/docz/docs/03-demos/15-chromium.md b/docz/docs/03-demos/28-chromium.md
similarity index 99%
rename from docz/docs/03-demos/15-chromium.md
rename to docz/docs/03-demos/28-chromium.md
index 66c7275..ab65f93 100644
--- a/docz/docs/03-demos/15-chromium.md
+++ b/docz/docs/03-demos/28-chromium.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 15
 title: Chrome Extensions
 ---
 
diff --git a/docz/docs/03-demos/18-engines.md b/docz/docs/03-demos/31-engines.md
similarity index 99%
rename from docz/docs/03-demos/18-engines.md
rename to docz/docs/03-demos/31-engines.md
index 830e035..be50e7f 100644
--- a/docz/docs/03-demos/18-engines.md
+++ b/docz/docs/03-demos/31-engines.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 18
 title: JavaScript Engines
 ---
 
diff --git a/docz/docs/03-demos/17-clipboard.md b/docz/docs/03-demos/32-clipboard.md
similarity index 96%
rename from docz/docs/03-demos/17-clipboard.md
rename to docz/docs/03-demos/32-clipboard.md
index 1c73250..951f294 100644
--- a/docz/docs/03-demos/17-clipboard.md
+++ b/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).
 
diff --git a/docz/docs/03-demos/27-localfile.md b/docz/docs/03-demos/33-localfile.md
similarity index 99%
rename from docz/docs/03-demos/27-localfile.md
rename to docz/docs/03-demos/33-localfile.md
index 60c078c..2a90cf4 100644
--- a/docz/docs/03-demos/27-localfile.md
+++ b/docz/docs/03-demos/33-localfile.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 26
 title: Local File Access
 ---
 
diff --git a/docz/docs/03-demos/06-network.mdx b/docz/docs/03-demos/34-network.mdx
similarity index 99%
rename from docz/docs/03-demos/06-network.mdx
rename to docz/docs/03-demos/34-network.mdx
index 166d121..76efc87 100644
--- a/docz/docs/03-demos/06-network.mdx
+++ b/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>
diff --git a/docz/docs/03-demos/24-server.md b/docz/docs/03-demos/35-server.md
similarity index 99%
rename from docz/docs/03-demos/24-server.md
rename to docz/docs/03-demos/35-server.md
index 5d39bcf..6d450ef 100644
--- a/docz/docs/03-demos/24-server.md
+++ b/docz/docs/03-demos/35-server.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 24
 title: HTTP Server Processing
 ---
 
diff --git a/docz/docs/03-demos/11-nosql.md b/docz/docs/03-demos/41-nosql.md
similarity index 99%
rename from docz/docs/03-demos/11-nosql.md
rename to docz/docs/03-demos/41-nosql.md
index 56419ab..30ecf52 100644
--- a/docz/docs/03-demos/11-nosql.md
+++ b/docz/docs/03-demos/41-nosql.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 11
 title: NoSQL Data Stores
 ---
 
diff --git a/docz/docs/03-demos/07-headless.md b/docz/docs/03-demos/42-headless.md
similarity index 99%
rename from docz/docs/03-demos/07-headless.md
rename to docz/docs/03-demos/42-headless.md
index 5a9c30d..94d3a2b 100644
--- a/docz/docs/03-demos/07-headless.md
+++ b/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.
diff --git a/docz/docs/03-demos/08-ml.mdx b/docz/docs/03-demos/43-ml.mdx
similarity index 99%
rename from docz/docs/03-demos/08-ml.mdx
rename to docz/docs/03-demos/43-ml.mdx
index a3d6383..854278f 100644
--- a/docz/docs/03-demos/08-ml.mdx
+++ b/docz/docs/03-demos/43-ml.mdx
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 8
 title: Typed Arrays and ML
 ---
 
diff --git a/docz/docs/03-demos/12-legacy.md b/docz/docs/03-demos/44-legacy.md
similarity index 99%
rename from docz/docs/03-demos/12-legacy.md
rename to docz/docs/03-demos/44-legacy.md
index c99413f..9ace8ca 100644
--- a/docz/docs/03-demos/12-legacy.md
+++ b/docz/docs/03-demos/44-legacy.md
@@ -1,5 +1,4 @@
 ---
-sidebar_position: 12
 title: Legacy Frameworks
 ---
 
diff --git a/docz/docs/03-demos/index.md b/docz/docs/03-demos/index.md
index 9b78323..bbf864e 100644
--- a/docz/docs/03-demos/index.md
+++ b/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)
diff --git a/docz/package.json b/docz/package.json
index 86fda6d..56276b4 100644
--- a/docz/package.json
+++ b/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",