misc

_lib_/hmr.tsx

@@ -29,7 +29,7 @@ const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000);
 const HMR = {
     reloads:0,
     createdElements: new Map() as Map<string, ()=>void>,
-    states: new Map() as Map<string, StateCapture>,
+    statesNew: new Map() as Map<string, StateCapture>,
     statesOld: new Map() as Map<string, StateCapture>,
     wireframe: false,
     onChange(reactID:string, value:()=>void):void
@@ -41,24 +41,8 @@ const HMR = {
         this.reloads++;
         this.createdElements.forEach(handler=>handler());
         this.createdElements.clear();
-        this.statesOld = this.states;
-        this.states = new Map();
-        this.echoState();
-    },
-    echoState()
-    {
-        let output = [];
-        for(const[key, val] of HMR.statesOld)
-        {
-            output[key] = val.state+"--"+val.reload;
-        }
-        console.log(output);
-        output = [];
-        for(const[key, val] of HMR.states)
-        {
-            output[key] = val.state+"--"+val.reload;
-        }
-        console.log(output);
+        this.statesOld = this.statesNew;
+        this.statesNew = new Map();
     }
 };
 

_lib_/react.tsx

@@ -3,9 +3,9 @@ import { HMR } from "./hmr.tsx";
 
 export type StateType = boolean|number|string|Record<string, string>
 export type StateCapture = {state:StateType, set:ReactParts.StateUpdater<StateType>, reload:number};
+type FuncArgs = [element:keyof ReactParts.JSX.IntrinsicElements, props:Record<string, string>, children:ReactParts.JSX.Element[]];
 
-const pluck =(m:Map<string, number>)=> m.keys()
-
+const H = ReactParts.createElement;
 const MapAt =(inMap:Map<string, StateCapture>, inIndex:number)=>
 {
     let index = 0;
@@ -20,9 +20,7 @@ const MapAt =(inMap:Map<string, StateCapture>, inIndex:number)=>
     return false;
 };
 
-const H = ReactParts.createElement;
-
-const ProxyElement = (props)=>
+const ProxyElement = (props:{__args:FuncArgs})=>
 {
     const id = ReactParts.useId();
     const [stateGet, stateSet] = ReactParts.useState(0);
@@ -43,7 +41,7 @@ const ProxyElement = (props)=>
     }
 };
 
-const ProxyCreate =(...args)=>
+const ProxyCreate =(...args:FuncArgs)=>
 {
     return typeof args[0] != "string" ? H(ProxyElement, {__args:args, ...args[1]}) : H(...args);
 };
@@ -54,7 +52,7 @@ const ProxyState =(arg:StateType)=>
     const trueArg = arg;
 
     // does statesOld have an entry for this state? use that instead of the passed arg
-    const check =  MapAt(HMR.statesOld, HMR.states.size);
+    const check =  MapAt(HMR.statesOld, HMR.statesNew.size);
     if(check)
     {
         arg = check[1].state;
@@ -68,22 +66,28 @@ const ProxyState =(arg:StateType)=>
             if(HMR.reloads == lastKnowReloads)
             {
                 // this is a switch/ui change, not a HMR reload change
-                const oldState = MapAt(HMR.statesOld, HMR.states.size-1);
-                HMR.statesOld.set(oldState[0], {...oldState[1], state:trueArg});
+                const oldState = MapAt(HMR.statesOld, HMR.statesNew.size-1);
+                oldState && HMR.statesOld.set(oldState[0], {...oldState[1], state:trueArg});
+
+                console.log("check: ui-invoked")
             }
-            HMR.states.delete(id);
+            else
+            {
+                console.log("check: hmr-invoked")
+            }
+            HMR.statesNew.delete(id);
         }
     }, []);
 
-    if(!HMR.states.has(id))
+    if(!HMR.statesNew.has(id))
     {
-        HMR.states.set(id, {state:arg, set:stateSet, reload:HMR.reloads});
+        HMR.statesNew.set(id, {state:arg, set:stateSet, reload:HMR.reloads});
     }
     
-    function proxySetter (arg)
+    function proxySetter (arg:StateType)
     {
         //console.log("state spy update", id, arg);
-        HMR.states.set(id, {state:arg, set:stateSet, reload:HMR.reloads});
+        HMR.statesNew.set(id, {state:arg, set:stateSet, reload:HMR.reloads});
         return stateSet(arg);
     }
     return [stateGet, proxySetter];
@@ -93,4 +97,4 @@ const ProxyState =(arg:StateType)=>
 export * from "react-original";
 export {ProxyCreate as createElement, ProxyState as useState };
 export const isProxy = true;
-export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState, isProxy:true};
+export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, isProxy:true};

example/app.tsx

@@ -1,13 +1,39 @@
+import { VNode } from "https://esm.sh/v118/preact@10.15.1/src/index.js";
 import React from "react";
 
-const CTX = React.createContext("lol");
+const CTXString = React.createContext("lol");
+
+const Butt =(props:{label:string})=>
+{
+    const [countGet, countSet] = React.useState(3);
+    return <button onClick={e=>countSet(countGet+1)}>{props.label+" -- "+countGet}</button>;
+};
+
+type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
+const CTXState = React.createContext(null) as React.Context<StateBinding<string>|null>;
+const Outer =(props:{children:VNode})=>
+{
+    const binding = React.useState("lol?");
+    return <CTXState.Provider value={binding}>
+        {props.children}
+    </CTXState.Provider>
+};
+const Inner =()=>
+{
+    const binding = React.useContext(CTXState);
+    return <button onClick={e=>binding && binding[1](Math.random().toString())}>{binding?.[0]??"(its null)"}!</button>
+};
+
 
 export default ()=>
 {
-    return <CTX.Provider value="intradestink">
-        <div><h1>hey!</h1></div>
-        <CTX.Consumer>
-            {(value)=><button>{value}</button>}
-        </CTX.Consumer>
-    </CTX.Provider>
+    return <CTXString.Provider value="intradestink">
+        <div><h1>hey???</h1></div>
+        <Outer>
+            <Inner/>
+        </Outer>
+        <Outer>
+            <Inner/>
+        </Outer>
+    </CTXString.Provider>
 }