React is an extremely bad framework

Author: bvisness

build-www.mjs

@@ -72,6 +72,13 @@ const ctx = await esbuild.context(moduleConfig);
 console.log("Building standalone HTML...");
 buildStandalone();
 
+if (process.argv.includes("--test-standalone")) {
+  const template = readFileSync(join(outDir, "standalone.html"), "utf-8");
+  const json = readFileSync("/tmp/ion.json");
+  const formatted = template.replace(/\{\{\s*IONJSON\s*\}\}/, json);
+  writeFileSync(join(outDir, "standalone-test.html"), formatted);
+}
+
 if (process.argv.includes("--serve")) {
   await ctx.watch();
   const { hosts, port } = await ctx.serve({

package-lock.json

@@ -31,6 +31,8 @@
     "@types/react-dom": "^18.3.1",
     "esbuild": "^0.25.8",
     "preact": "^10.27.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.9.2"
   }
-}
+}

package.json

@@ -30,18 +30,14 @@ interface MenuBarProps {
 }
 
 function MenuBar(props: MenuBarProps) {
-  const [[ionjson, rawIonJSON], setIonJSON] = useState<readonly [IonJSON | null, string]>(
-    props.ionjson
-      ? [props.ionjson, JSON.stringify(props.ionjson)]
-      : [null, ""]
-  );
+  const [[ionjson, rawIonJSON], setIonJSON] = useState<readonly [IonJSON | null, string]>([null, ""]);
   const [funcIndex, setFuncIndex] = useState<number>(initialFuncIndex ?? 0);
 
   // One-time initializer
   useEffect(() => {
-    // Trigger funcSelected with any initial ion JSON
-    if (ionjson) {
-      props.funcSelected(ionjson.functions[funcIndex] ?? null);
+    if (props.ionjson) {
+      setIonJSON([props.ionjson, JSON.stringify(props.ionjson)]);
+      props.funcSelected(props.ionjson.functions[funcIndex] ?? null);
     }
   }, []);