fix for functional states

_lib_/react.tsx

@@ -77,11 +77,26 @@ const ProxyState =(argNew:StateType)=>
 
 
     // do we need to account for the function set?
-    function proxySetter (inArg:StateType)
+    function proxySetter ( inArg:StateType|((old:StateType)=>StateType) )
     {   
-        const stateUser = {state:inArg, set:stateSet, reload:HMR.reloads};
-        HMR.statesNew.set(id, stateUser);
-        stateSet(inArg);
+        const stateUser = {state:inArg as StateType, set:stateSet, reload:HMR.reloads};
+        if(typeof inArg == "function")
+        {
+            //const passedFunction = inArg;
+            stateSet((oldState:StateType)=>
+            {
+                console.log("function setter intercepted");
+                const output = inArg(oldState);
+                stateUser.state = output;
+                HMR.statesNew.set(id, stateUser);
+                return output;
+            });
+        }
+        else
+        {
+            HMR.statesNew.set(id, stateUser);
+            stateSet(inArg);            
+        }
     }
     return [stateGet, proxySetter];
 

example/app.tsx

@@ -4,18 +4,18 @@ import React from "react";
 const CTXString = React.createContext("lol");
 
 type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
-const CTXState = React.createContext(null) as React.Context<StateBinding<string>|null>;
+const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>;
 const Outer =(props:{children:VNode})=>
 {
-    const binding = React.useState("lol?");
+    const binding = React.useState(11);
     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>
+    const [stateGet, stateSet] = React.useContext(CTXState) || ["default", ()=>{}];
+    return <button onClick={e=>stateSet((old)=>old+1)}>count: {stateGet} :)</button>
 };