boot-function #1
@ -85,7 +85,6 @@ const ProxyState =(argNew:StateType)=>
|
|||||||
//const passedFunction = inArg;
|
//const passedFunction = inArg;
|
||||||
stateSet((oldState:StateType)=>
|
stateSet((oldState:StateType)=>
|
||||||
{
|
{
|
||||||
console.log("function setter intercepted");
|
|
||||||
const output = inArg(oldState);
|
const output = inArg(oldState);
|
||||||
stateUser.state = output;
|
stateUser.state = output;
|
||||||
HMR.statesNew.set(id, stateUser);
|
HMR.statesNew.set(id, stateUser);
|
||||||
@ -102,7 +101,32 @@ const ProxyState =(argNew:StateType)=>
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type Storelike = Record<string, string>
|
||||||
|
const ProxyReducer =(inReducer:(inState:Storelike, inAction:string)=>Storelike, inState:Storelike)=>
|
||||||
|
{
|
||||||
|
const check = MapIndex(HMR.statesOld, HMR.statesNew.size);
|
||||||
|
const argOld = check ? check[1].state : 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);
|
||||||
|
console.log("interepted reducer", 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 * from "react-original";
|
||||||
export {ProxyCreate as createElement, ProxyState as useState };
|
export {ProxyCreate as createElement, ProxyState as useState, ProxyReducer as useReducer };
|
||||||
export const isProxy = true;
|
export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, useReducer:ProxyReducer};
|
||||||
export default {...ReactParts, createElement:ProxyCreate, useState:ProxyState, isProxy:true};
|
|
@ -1,11 +1,10 @@
|
|||||||
import { VNode } from "https://esm.sh/v118/preact@10.15.1/src/index.js";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const CTXString = React.createContext("lol");
|
const CTXString = React.createContext("lol");
|
||||||
|
|
||||||
type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
|
type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
|
||||||
const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>;
|
const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>;
|
||||||
const Outer =(props:{children:VNode})=>
|
const Outer =(props:{children:Preact.VNode})=>
|
||||||
{
|
{
|
||||||
const binding = React.useState(11);
|
const binding = React.useState(11);
|
||||||
return <CTXState.Provider value={binding}>
|
return <CTXState.Provider value={binding}>
|
||||||
@ -19,12 +18,23 @@ const Inner =()=>
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
type Store = {name:string, age:number}
|
||||||
|
const reducer =(inState:Store, inAction:number)=>
|
||||||
|
{
|
||||||
|
return {...inState, age:inState.age+inAction};
|
||||||
|
}
|
||||||
|
|
||||||
export default ()=>
|
export default ()=>
|
||||||
{
|
{
|
||||||
|
|
||||||
|
const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store)
|
||||||
return <CTXString.Provider value="intradestink">
|
return <CTXString.Provider value="intradestink">
|
||||||
<div>
|
<div>
|
||||||
<h1>Title!</h1>
|
<h1>Title!</h1>
|
||||||
<h2>subtitle</h2>
|
<h2>subtitle!</h2>
|
||||||
|
<p>
|
||||||
|
<button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Outer>
|
<Outer>
|
||||||
<Inner/>
|
<Inner/>
|
||||||
|
Loading…
Reference in New Issue
Block a user