From 8f7700634378a7436bacd8078c0420b1730859ea Mon Sep 17 00:00:00 2001
From: SethTrowbridge <>
Date: Sat, 9 Apr 2022 12:56:18 -0400
Subject: [PATCH] switch to react use esm modules from esm.sh

---
 index.html | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index c3dee7b..cb15cbe 100755
--- a/index.html
+++ b/index.html
@@ -2,6 +2,18 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <script type="importmap">
+        {
+            "imports":
+            {
+                     "react": "https://esm.sh/react@18",
+                 "react-dom/client": "https://esm.sh/react-dom/client",
+                  "@emotion": "https://esm.sh/@emotion",
+                 "@emotion/": "https://esm.sh/@emotion/",
+                       "htm": "https://esm.sh/htm/react"
+            }
+        }
+    </script>
     <script src="./data/csv.js"></script>
 </head>
 <body>
@@ -9,12 +21,11 @@
     <!-- initialize table -->
     <script type="module">
 
-    import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
-    import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
-    import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
-    import htm from 'https://unpkg.com/htm?module';
-    const html = htm.bind(h);
-    
+    import { createElement as h, createContext, Fragment, useReducer, useState } from 'react';
+    import { createRoot } from "react-dom/client";
+    import { css, cx } from '@emotion/css';
+    import { html } from 'htm';
+
     import N from "./src/n.js";
     import Pivot from "./src/pivot.js";
 
@@ -381,7 +392,8 @@
         let labelsSum = (N.Step(Pivot.Schema, "sum")||[]).map(column => column.Meta.Index);
         let labelsPivot = (N.Step(Pivot.Schema, "label")||[]).map(column => column.Meta.Index);
         let labelsAll = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label);
-        let labelsAllState = useState(labelsAll.map(column=>true));
+
+        let labelsAllState = useState(labelsAll.map(column=>true))
     
         let headersDisplay = [];
         labelsAllState[0].forEach((visible, index)=>
@@ -484,9 +496,10 @@
         ])
     };
     
-    const Render = () => render(h(ElRoot), document.querySelector("#app"));
+    const Root = createRoot(document.querySelector("#app"));
+    const Render = () => Root.render(h(ElRoot));
     Render();
-    
+
     </script>
 </body>
 </html>
