misc
This commit is contained in:
parent
50aaaf136e
commit
73cefa9a0e
@ -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();
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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];
|
||||
@ -91,6 +95,6 @@ const ProxyState =(arg:StateType)=>
|
||||
};
|
||||
|
||||
export * from "react-original";
|
||||
export { ProxyCreate as createElement, ProxyState as useState };
|
||||
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};
|
@ -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>
|
||||
}
|
Loading…
Reference in New Issue
Block a user