branch system started

js/app.js

@@ -4,7 +4,6 @@ import TWPreAuto from "@twind/preset-autoprefix@1.0.1";
 import Preact from "preact";
 import * as Store from "./store.js";
 import People from "./people.js";
-
 const Configure = { theme: {}, presets: [TWPreTail(), TWPreAuto()] };
 const ShadowDOM = document.querySelector("#app").attachShadow({ mode: "open" });
 const ShadowDiv = document.createElement("div");

js/people.js

@@ -1,6 +1,7 @@
 import Preact from "preact";
 import { html } from "htm";
 import { Consumer } from "./store.js";
+import * as Tree from "./tree.js";
 
 /** @typedef {(e:SubmitEvent|Event)=>void|null} handler */
 
@@ -88,6 +89,9 @@ export default () => {
       <div class="px-2">
         <${PersonForm}/>
         <${PersonTable}/>
+        <${Tree.Branch}>
+          <${Tree.Button}><//>
+        <//>
       </div>
     </div>`;
 };

js/tree.js

@@ -0,0 +1,37 @@
+import { html } from "htm";
+import * as React from "preact";
+
+/** @typedef {0|0.5|1|1.5|2} Stage*/
+/** @typedef {[set:Stage, get:React.StateUpdater<Stage>]} Binding */
+
+const BranchContext = React.createContext(
+  /** @type Binding */ ([0, (_n) => {}]),
+);
+
+/** @type {({children}:{children:preact.VNode})=>preact.VNode} */
+export const Branch = (props) => {
+  /** @type Binding */ const stage = React.useState(/** @type Stage */ (0));
+  /** @type Binding */ const stageParent = React.useContext(BranchContext);
+
+  React.useEffect(() => {
+    if (stageParent[0] == 2) {
+      stage[1](0);
+    }
+  }, [stageParent]);
+
+  return html`<${BranchContext.Provider} value=${stage}>${props.children}<//>`;
+};
+
+export const Button = () => {
+  /** @type Binding */
+  const [stageGet, stageSet] = React.useContext(BranchContext);
+
+  const handler = () => {
+    let value = stageGet + 0.5;
+    if (value > 2) value = 0;
+    stageSet(value);
+    console.log(value);
+  };
+
+  return html`<button onClick=${handler}>stage: ${stageGet}</button>`;
+};