switch to react/jotai/react-chartjs-2

update build.mjs

build.mjs

@@ -1,10 +1,23 @@
 import * as esbuild from 'esbuild'
 
-await esbuild.build({
+const config = {
-  entryPoints: ['src/index.ts'],
+  entryPoints: ['src/index.tsx'],
   bundle: true,
   outdir: 'dist',
   platform: 'browser',
   format: 'esm',
   external: ['fsevents'],
-})
+};
+
+if(process.argv[2] === 'serve'){
+  const context = await esbuild.context(config);
+
+  const {host, port} = await context.serve({
+    servedir: 'dist'
+  });
+
+  console.log(`Listening on http://${host}:${port}/`);
+}
+else{
+  await esbuild.build(config);
+}

package.json

@@ -7,13 +7,18 @@
   "license": "MIT",
   "scripts": {
     "build": "cp src/index.html dist/ && node build.mjs",
-    "serve": "yarn build && yarn esbuild --servedir=dist"
+    "serve": "cp src/index.html dist/ && node build.mjs serve"
   },
   "devDependencies": {
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
     "esbuild": "^0.17.18"
   },
   "dependencies": {
     "chart.js": "^4.3.0",
-    "incremental-dom": "^0.7.0"
+    "jotai": "^2.2.0",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.2.0"
   }
 }

src/App.ts

@@ -1,69 +0,0 @@
-import Chart from 'chart.js/auto';
-import { elementOpen as o, elementClose as c, elementVoid as h, text, patch } from 'incremental-dom';
-import Header from './Header';
-
-//const o = elementOpen, c=elementClose, h=elementVoid;
-const data = [
-  { year: 2010, count: 10 },
-  { year: 2011, count: 20 },
-  { year: 2012, count: 15 },
-  { year: 2013, count: 25 },
-  { year: 2014, count: 22 },
-  { year: 2015, count: 30 },
-  { year: 2016, count: 28 },
-];
-
-function Dates(datesP:Promise<Array<string>>){
-  const el =
-  o('div');
-    text('Loading');
-  c('div');
-  datesP.then(dates=>{
-    patch(el, ()=>{
-      o('select');
-      for(const date of dates){
-        o('option', date);
-        text(date);
-        c('option');
-      }
-      c('select');
-    })
-  });
-}
-
-function App({ ticks=[0,1,2,3,4,5] }) {
-  Header();
-  Dates(fetch('http://127.0.0.1:8234/option_quotes/AAPL/quote_dates').then(x=>x.json()));
-  /*
-  o('div', '', ['class', "chart"]);
-    ticks.forEach((tick)=>{
-      o('label'); text(`T_${tick}`); c('label');
-      h('input', tick, ['type',"range",'min',"0",'max',"100"]);
-    });
-  c('div');
-  */
-  /*
-  o('div', 'barChartContainer', ['style', 'width:800px;']);
-    o('canvas', 'barChart', ['id', 'barChart']);
-    c('canvas');
-  c('div');
-
-  new Chart(//@ts-ignore
-    document.getElementById('barChart'),
-    {
-      type: 'bar',
-      data: {
-        labels: data.map(row => row.year),
-        datasets: [
-          {
-            label: 'Acquisitions by year',
-            data: data.map(row => row.count)
-          }
-        ]
-      }
-    }
-  );
-  */
-}
-
-export default App;

src/App.tsx

@@ -0,0 +1,36 @@
+//import Chart from 'chart.js/auto';
+import { Chart as ChartJS, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
+import { Line } from 'react-chartjs-2';
+import Header from './Header';
+import { QuoteDatePicker } from "./QuoteDatePicker";
+
+ChartJS.register(LineElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement);
+
+function App() {
+  return (
+  <div>
+    <Header />
+    <QuoteDatePicker />
+    <Line
+      datasetIdKey='id'
+      data={{
+        labels: ['Jun', 'Jul', 'Aug'],
+        datasets: [
+          {//@ts-ignore
+            id: 1,
+            label: '',
+            data: [5, 6, 7],
+          },
+          {//@ts-ignore
+            id: 2,
+            label: '',
+            data: [3, 2, 1],
+          },
+        ],
+      }}
+    />
+  </div>
+  );
+}
+
+export default App;

src/Header.ts

@@ -1,12 +0,0 @@
-import { elementOpen, elementClose, elementVoid, text } from 'incremental-dom';
-
-function Header(){
-  elementOpen('div','', ['class',"header"]);
-    elementOpen('h1'); text('Choose Probabilities'); elementClose('h1');
-    elementOpen('h5'); text('X-Axis = Ticks, Y-Axis = Underlying Price'); elementClose('h5');
-    elementOpen('h5'); text('Begin with 2 Ticks, T_0 and T_1. Can add more in-between or at ends. Do not have to be equidistant.'); elementClose('h5');
-    elementOpen('h5'); text('Begin with 2 Nodes to the "right" of each Node representing what can happen in the next tick. Can add more. No not need to be equidistant.'); elementClose('h5');
-  elementClose('div');
-}
-
-export default Header;

src/Header.tsx

@@ -0,0 +1,12 @@
+function Header(){
+  return (
+  <div className="header">
+    <h1>Choose Probabilities</h1>
+    <h5>X-Axis = Ticks, Y-Axis = Underlying Price</h5>
+    <h5>Begin with 2 Ticks, T_0 and T_1. Can add more in-between or at ends. Do not have to be equidistant.</h5>
+    <h5>Begin with 2 Nodes to the "right" of each Node representing what can happen in the next tick. Can add more. No not need to be equidistant.</h5>
+  </div>
+  );
+}
+
+export default Header;

src/QuoteDatePicker.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { atom as $, useAtom } from 'jotai';
+
+const $dates = $<Array<string>>([]);
+const $isLoading = $<boolean>(false);
+
+export function QuoteDatePicker(){
+  const [dates, setDates] = useAtom($dates);
+  const [isLoading, setIsLoading] = useAtom($isLoading);
+
+  useEffect(()=>{
+    fetch('http://127.0.0.1:8234/option_quotes/AAPL/quote_dates')
+    .then(x=>x.json())
+    .catch((err)=>['2021-01-02', '2021-01-03', '2021-01-04'])
+    .then((dates_)=>{ setDates(dates_); setIsLoading(false); })
+  },[])
+  
+  return (
+    <div>
+      {isLoading
+      ?
+      <span>Loading...</span>
+      :
+      <select>
+        {dates.map((date)=>
+          <option key={date} value={date}>{date}</option>
+        )}
+      </select>
+      }
+    </div>
+  );
+}

src/index.ts

@@ -1,7 +0,0 @@
-import { patch } from 'incremental-dom';
-import App from './App';
-
-const root = document.getElementById("app") as HTMLElement;
-patch(root, function() {
-  App({});
-});

src/index.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import App from './App';
+
+const rootEl = document.getElementById("app") as HTMLElement;
+const Root = createRoot(rootEl);
+
+Root.render(<App />);

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+}

yarn.lock

@@ -117,6 +117,32 @@
   resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
   integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
 
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react-dom@^18.2.5":
+  version "18.2.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.5.tgz#5c5f13548bda23cd98f50ca4a59107238bfe18f3"
+  integrity sha512-sRQsOS/sCLnpQhR4DSKGTtWFE3FZjpQa86KPVbhUqdYMRZ9FEFcfAytKhR/vUG2rH1oFbOOej6cuD7MFSobDRQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^18.2.12":
+  version "18.2.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
+  integrity sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+
 chart.js@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
@@ -124,6 +150,11 @@ chart.js@^4.3.0:
   dependencies:
     "@kurkle/color" "^0.3.0"
 
+csstype@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 esbuild@^0.17.18:
   version "0.17.18"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.18.tgz#f4f8eb6d77384d68cd71c53eb6601c7efe05e746"
@@ -152,7 +183,46 @@ esbuild@^0.17.18:
     "@esbuild/win32-ia32" "0.17.18"
     "@esbuild/win32-x64" "0.17.18"
 
-incremental-dom@^0.7.0:
+jotai@^2.2.0:
-  version "0.7.0"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/incremental-dom/-/incremental-dom-0.7.0.tgz#b03664731bdc430035f32df7d76fa56daedee9b8"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.2.0.tgz#80c176efeb59d32d7eef7f14510ba8e01ef7b0db"
-  integrity sha512-SBHQ6AiCmtwh7TU9hjq2CspasJe7ggGa9k+qYZft+d5Qq9v7V+07wlnRSZH5GGYjI8wn6U5p7dDua7f1bih52g==
+  integrity sha512-2gsMVpoaBa6aPHLArNhphck4+n8unZ8xF4Ciqhb+Z+tjsvabn5QFisNFHBMWooMAAmmTNU5TcvBIP8/XAsZy8Q==
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+loose-envify@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+react-chartjs-2@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
+  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"