able-baker/hmr-react.tsx

130 lines
4.2 KiB
TypeScript

import * as ReactParts from "react-original";
import { HMR } from "./hmr-listen.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 H = ReactParts.createElement;
const MapIndex =(inMap:Map<string, StateCapture>, inIndex:number)=>
{
let index = 0;
for(const kvp of inMap)
{
if(index == inIndex)
{
return kvp;
}
index++;
}
return false;
};
const ProxyCreate =(...args:FuncArgs)=> (typeof args[0] == "string") ? H(...args) : H(ProxyElement, {__args:args, ...args[1]});
const ProxyElement = (props:{__args:FuncArgs})=>
{
const [stateGet, stateSet] = ReactParts.useState(0);
const id = ReactParts.useId();
HMR.RegisterComponent(id, ()=>stateSet(stateGet+1));
const child = H(...props.__args);
if(HMR.wireframe)
{
return H("div", {style:{padding:"10px", border:"2px solid red"}},
H("p", null, stateGet),
child
);
}
else
{
return child;
}
};
const ProxyState =(argNew:StateType)=>
{
// does statesOld have an entry for this state? use that instead of the passed arg
const check = MapIndex(HMR.statesOld, HMR.statesNew.size);
const argOld = check ? check[1].state : argNew;
const id = ReactParts.useId();
const [stateGet, stateSet] = ReactParts.useState(argOld);
// state updates due to clicks, interactivity, etc. since the last reload may already be in statesNew for this slot.
// DONT overwrite it.
if(!HMR.statesNew.get(id))
{
HMR.statesNew.set(id, {state:stateGet, set:stateSet, reload:HMR.reloads});
}
const lastKnowReloads = HMR.reloads;
ReactParts.useEffect(()=>{
return ()=>{
if(HMR.reloads == lastKnowReloads)/*i have no idea what this does. this may have to be re-introduced when routing is added*/
{
// this is a switch/ui change, not a HMR reload change
const oldState = MapIndex(HMR.statesOld, HMR.statesNew.size-1);
oldState && HMR.statesOld.set(oldState[0], {...oldState[1], state:argNew});
}
HMR.statesNew.delete(id);
}
}, []);
// do we need to account for the function set?
function proxySetter ( inArg:StateType|((old:StateType)=>StateType) )
{
const stateUser = {state:inArg as StateType, set:stateSet, reload:HMR.reloads};
if(typeof inArg == "function")
{
//const passedFunction = inArg;
stateSet((oldState:StateType)=>
{
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];
};
type Storelike = Record<string, string>
const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike, inState:Storelike, inInit?:(inState:Storelike)=>Storelike)=>
{
const check = MapIndex(HMR.statesOld, HMR.statesNew.size);
const argOld = check ? check[1].state : (inInit ? inInit(inState) : inState);
const intercept =(inInterceptState:Storelike, inInterceptAction:string)=>
{
const capture = inReducer(inInterceptState, inInterceptAction);
const stateUser = {state:capture, set:()=>{}, reload:HMR.reloads};
HMR.statesNew.set(id, stateUser);
return capture;
};
const id = ReactParts.useId();
const [state, dispatch] = ReactParts.useReducer(intercept, argOld as Storelike);
if(!HMR.statesNew.get(id))
{
HMR.statesNew.set(id, {state:state, set:()=>{}, reload:HMR.reloads});
}
return [state, dispatch];
};
export * from "react-original";
export {ProxyCreate as createElement, ProxyState as useState, ProxyReducer as useReducer };
export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer};