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>
<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>