boot-function #1

Merged
SethTrowbridge merged 25 commits from boot-function into master 2023-06-21 07:53:14 -04:00
3 changed files with 56 additions and 42 deletions
Showing only changes of commit 73cefa9a0e - Show all commits

View File

@ -29,7 +29,7 @@ const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000);
const HMR = { const HMR = {
reloads:0, reloads:0,
createdElements: new Map() as Map<string, ()=>void>, 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>, statesOld: new Map() as Map<string, StateCapture>,
wireframe: false, wireframe: false,
onChange(reactID:string, value:()=>void):void onChange(reactID:string, value:()=>void):void
@ -41,24 +41,8 @@ const HMR = {
this.reloads++; this.reloads++;
this.createdElements.forEach(handler=>handler()); this.createdElements.forEach(handler=>handler());
this.createdElements.clear(); this.createdElements.clear();
this.statesOld = this.states; this.statesOld = this.statesNew;
this.states = new Map(); this.statesNew = 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);
} }
}; };

View File

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

View File

@ -1,13 +1,39 @@
import { VNode } from "https://esm.sh/v118/preact@10.15.1/src/index.js";
import React from "react"; 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 ()=> export default ()=>
{ {
return <CTX.Provider value="intradestink"> return <CTXString.Provider value="intradestink">
<div><h1>hey!</h1></div> <div><h1>hey???</h1></div>
<CTX.Consumer> <Outer>
{(value)=><button>{value}</button>} <Inner/>
</CTX.Consumer> </Outer>
</CTX.Provider> <Outer>
<Inner/>
</Outer>
</CTXString.Provider>
} }