diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..432cdb5
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,23 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "request": "launch",
+ "name": "Launch Program",
+ "type": "node",
+ "program": "${workspaceFolder}/main.ts",
+ "cwd": "${workspaceFolder}",
+ "runtimeExecutable": "C:\\Users\\strowbridge\\.deno\\bin\\deno.EXE",
+ "runtimeArgs": [
+ "run",
+ "--unstable",
+ "--inspect-wait",
+ "--allow-all"
+ ],
+ "attachSimplePort": 9229
+ }
+ ]
+}
diff --git a/js/people.js b/js/people.js
index a661836..ff409a6 100644
--- a/js/people.js
+++ b/js/people.js
@@ -84,17 +84,10 @@ const PersonForm = () => {
/** @type {()=>preact.VNode} */
export default () => {
- let [countGet, countSet] = Preact.useState(0);
-
- let ref = Preact.useRef(null);
- Tree.useAway(ref, () => {
- countSet(countGet + 1);
- });
-
return html`
-
Person Records ${countGet}
-
+
Person Records
+
<${PersonForm}/>
<${PersonTable}/>
@@ -102,12 +95,14 @@ export default () => {
<${Tree.Button}/>
<${Tree.Menu} class="shadow-lg rounded-lg bg-white">
hey
+
/>
/>
diff --git a/js/tree.js b/js/tree.js
index 3c637ae..1195e8e 100644
--- a/js/tree.js
+++ b/js/tree.js
@@ -2,11 +2,11 @@ import { html } from "htm";
import * as React from "preact";
/** @typedef {(props:{children:preact.VNode, class:string|null})=>preact.VNode} BasicElement */
-/** @typedef {{Open:boolean, Done:boolean}} Stage*/
+/** @typedef {{Open:boolean, Done:boolean, Away:boolean}} Stage*/
/** @typedef {[set:Stage, get:React.StateUpdater
]} Binding */
const BranchContext = React.createContext(
- /** @type Binding */ ([{ Open: false, Done: true }, (_n) => {}]),
+ /** @type Binding */ ([{ Open: false, Done: true, Away: false }, (_n) => {}]),
);
export { BranchContext as Context };
@@ -14,15 +14,15 @@ export { BranchContext as Context };
/** @type BasicElement */
export const Branch = (props) => {
/** @type Binding */ const stage = React.useState(
- /** @type Stage */ ({ Open: false, Done: true }),
+ /** @type Stage */ ({ Open: false, Done: true, Away: false }),
);
/** @type Binding */ const stageParent = React.useContext(BranchContext);
React.useEffect(() => {
- const [{ Open, Done }] = stageParent;
+ const [{ Open, Done, Away }] = stageParent;
const [, Shut] = stage;
if (!Open && Done) {
- Shut({ Open: false, Done: true });
+ Shut({ Open: false, Done: true, Away });
}
}, [stageParent]);
@@ -37,13 +37,33 @@ export const Button = (props) => {
/** @type Binding */
const [stageGet, stageSet] = React.useContext(BranchContext);
- const handler = () => {
- const value = { Open: !stageGet.Open, Done: false };
- stageSet(value);
- console.log(value);
+ /** @type React.MutableRefObject */
+ const refHandler = React.useRef(null);
+ React.useEffect(() => {
+ console.log("recreating handler", stageGet);
+ refHandler.current = (away) => {
+ console.log("set: away");
+ stageSet((state) => ({ ...state, Away: away }));
+ };
+ }, [stageGet]);
+
+ /** @type React.MutableRefObject */
+ const refEl = React.useRef(null);
+ useAway(refEl, refHandler);
+
+ const handleClick = () => {
+ console.log("set: open");
+ stageSet((state) => ({ ...state, Open: !state.Open, Done: false }));
};
- return html`