able-baker/_lib_/react.tsx

110 lines
2.9 KiB
TypeScript
Raw Normal View History

2023-06-06 22:48:45 -04:00
import * as ReactParts from "react-original";
2023-06-15 23:08:24 -04:00
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};
2023-06-16 14:59:27 -04:00
type FuncArgs = [element:keyof ReactParts.JSX.IntrinsicElements, props:Record<string, string>, children:ReactParts.JSX.Element[]];
2023-06-15 23:08:24 -04:00
2023-06-16 14:59:27 -04:00
const H = ReactParts.createElement;
2023-06-18 07:36:55 -04:00
const MapIndex =(inMap:Map<string, StateCapture>, inIndex:number)=>
2023-06-15 23:08:24 -04:00
{
let index = 0;
for(const kvp of inMap)
{
if(index == inIndex)
{
return kvp;
}
index++;
}
return false;
};
2023-06-06 22:48:45 -04:00
2023-06-17 14:48:39 -04:00
const ProxyCreate =(...args:FuncArgs)=>
{
if(typeof args[0] == "string")
{
return H(...args)
}
else
{
return H(ProxyElement, {__args:args, ...args[1]});
}
};
2023-06-16 14:59:27 -04:00
const ProxyElement = (props:{__args:FuncArgs})=>
2023-06-06 22:48:45 -04:00
{
const [stateGet, stateSet] = ReactParts.useState(0);
2023-06-17 14:48:39 -04:00
const id = ReactParts.useId();
HMR.RegisterComponent(id, ()=>stateSet(stateGet+1));
2023-06-06 22:48:45 -04:00
const child = H(...props.__args);
if(HMR.wireframe)
{
return H("div", {style:{padding:"10px", border:"2px solid red"}},
H("p", null, stateGet),
child
);
}
else
{
2023-06-17 14:48:39 -04:00
return child;
2023-06-06 22:48:45 -04:00
}
};
2023-06-15 23:08:24 -04:00
const ProxyState =(arg:StateType)=>
2023-06-06 22:48:45 -04:00
{
const id = ReactParts.useId();
2023-06-18 07:36:55 -04:00
//const argOriginal = arg;
2023-06-06 22:48:45 -04:00
// does statesOld have an entry for this state? use that instead of the passed arg
2023-06-18 07:36:55 -04:00
const check = MapIndex(HMR.statesOld, HMR.statesNew.size);
const argOld = check ? check[1].state : arg;
2023-06-06 22:48:45 -04:00
const lastKnowReloads = HMR.reloads;
2023-06-18 07:36:55 -04:00
const [stateGet, stateSet] = ReactParts.useState(argOld);
2023-06-06 22:48:45 -04:00
ReactParts.useEffect(()=>{
2023-06-18 07:36:55 -04:00
/*
i have no idea what this does
2023-06-06 22:48:45 -04:00
return ()=>{
if(HMR.reloads == lastKnowReloads)
{
// this is a switch/ui change, not a HMR reload change
2023-06-18 07:36:55 -04:00
const oldState = MapIndex(HMR.statesOld, HMR.statesNew.size-1);
2023-06-17 14:48:39 -04:00
oldState && HMR.statesOld.set(oldState[0], {...oldState[1], state:arg});
2023-06-16 14:59:27 -04:00
console.log("check: ui-invoked")
}
else
{
console.log("check: hmr-invoked")
2023-06-06 22:48:45 -04:00
}
2023-06-16 14:59:27 -04:00
HMR.statesNew.delete(id);
2023-06-06 22:48:45 -04:00
}
2023-06-18 07:36:55 -04:00
*/
2023-06-06 22:48:45 -04:00
}, []);
2023-06-16 14:59:27 -04:00
if(!HMR.statesNew.has(id))
2023-06-06 22:48:45 -04:00
{
2023-06-18 07:36:55 -04:00
HMR.statesNew.set(id, {state:argOld, set:stateSet, reload:HMR.reloads});
2023-06-06 22:48:45 -04:00
}
2023-06-18 07:36:55 -04:00
function proxySetter (inArg:StateType)
2023-06-06 22:48:45 -04:00
{
//console.log("state spy update", id, arg);
2023-06-18 07:36:55 -04:00
HMR.statesNew.set(id, {state:inArg, set:stateSet, reload:HMR.reloads});
return stateSet(inArg);
2023-06-06 22:48:45 -04:00
}
return [stateGet, proxySetter];
};
export * from "react-original";
2023-06-16 14:59:27 -04:00
export {ProxyCreate as createElement, ProxyState as useState };
2023-06-06 22:48:45 -04:00
export const isProxy = true;
2023-06-16 14:59:27 -04:00
export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, isProxy:true};