SethTrowbridge/pivot-editor
1
1
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

switch to react

Browse Source 
use esm modules from esm.sh
This commit is contained in:
SethTrowbridge 2022-04-09 12:56:18 -04:00
parent ed6c5ca779
commit 8f77006343
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@ -2,6 +2,18 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <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> <script src="./data/csv.js"></script>
</head> </head>
<body> <body>
@ -9,12 +21,11 @@
<!-- initialize table --> <!-- initialize table -->
<script type="module"> <script type="module">
import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact'; import { createElement as h, createContext, Fragment, useReducer, useState } from 'react';
import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks'; import { createRoot } from "react-dom/client";
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css'; import { css, cx } from '@emotion/css';
import htm from 'https://unpkg.com/htm?module'; import { html } from 'htm';
const html = htm.bind(h);
import N from "./src/n.js"; import N from "./src/n.js";
import Pivot from "./src/pivot.js"; import Pivot from "./src/pivot.js";
@ -381,7 +392,8 @@
let labelsSum = (N.Step(Pivot.Schema, "sum")||[]).map(column => column.Meta.Index); 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 labelsPivot = (N.Step(Pivot.Schema, "label")||[]).map(column => column.Meta.Index);
let labelsAll = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label); 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 = []; let headersDisplay = [];
labelsAllState[0].forEach((visible, index)=> 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(); Render();
</script> </script>
</body> </body>
</html> </html>