From 73cefa9a0edc6d0986486457ee37e509da68c2bb Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Fri, 16 Jun 2023 14:59:27 -0400 Subject: [PATCH] misc --- _lib_/hmr.tsx | 22 +++------------------- _lib_/react.tsx | 36 ++++++++++++++++++++---------------- example/app.tsx | 40 +++++++++++++++++++++++++++++++++------- 3 files changed, 56 insertions(+), 42 deletions(-) diff --git a/_lib_/hmr.tsx b/_lib_/hmr.tsx index 274b968..2089a27 100644 --- a/_lib_/hmr.tsx +++ b/_lib_/hmr.tsx @@ -29,7 +29,7 @@ const SocketTimer = setInterval(()=>{Socket.send("ping")}, 5000); const HMR = { reloads:0, createdElements: new Map() as Mapvoid>, - states: new Map() as Map, + statesNew: new Map() as Map, statesOld: new Map() as Map, 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(); } }; diff --git a/_lib_/react.tsx b/_lib_/react.tsx index 042307d..c822191 100644 --- a/_lib_/react.tsx +++ b/_lib_/react.tsx @@ -3,9 +3,9 @@ import { HMR } from "./hmr.tsx"; export type StateType = boolean|number|string|Record export type StateCapture = {state:StateType, set:ReactParts.StateUpdater, reload:number}; +type FuncArgs = [element:keyof ReactParts.JSX.IntrinsicElements, props:Record, children:ReactParts.JSX.Element[]]; -const pluck =(m:Map)=> m.keys() - +const H = ReactParts.createElement; const MapAt =(inMap:Map, inIndex:number)=> { let index = 0; @@ -20,9 +20,7 @@ const MapAt =(inMap:Map, 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}; \ No newline at end of file +export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, isProxy:true}; \ No newline at end of file diff --git a/example/app.tsx b/example/app.tsx index 29f3e8b..bf24835 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -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 ; +}; + +type StateBinding = [get:T, set:React.StateUpdater]; +const CTXState = React.createContext(null) as React.Context|null>; +const Outer =(props:{children:VNode})=> +{ + const binding = React.useState("lol?"); + return + {props.children} + +}; +const Inner =()=> +{ + const binding = React.useContext(CTXState); + return +}; + export default ()=> { - return -

hey!

- - {(value)=>} - -
+ return +

hey???

+ + + + + + +
} \ No newline at end of file