able-baker/example/app.tsx

54 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-07-08 12:21:58 -04:00
import "http://localhost:1234/boot.tsx";
import React from "react";
2023-06-15 17:13:51 -04:00
2023-06-16 14:59:27 -04:00
const CTXString = React.createContext("lol");
type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
2023-06-19 09:20:16 -04:00
const CTXState = React.createContext(null) as React.Context<StateBinding<number>|null>;
const Outer =(props:{children:React.JSX.Element})=>
2023-06-16 14:59:27 -04:00
{
2023-06-19 09:20:16 -04:00
const binding = React.useState(11);
2023-06-16 14:59:27 -04:00
return <CTXState.Provider value={binding}>
{props.children}
</CTXState.Provider>
};
const Inner =()=>
{
2023-06-19 09:20:16 -04:00
const [stateGet, stateSet] = React.useContext(CTXState) || ["default", ()=>{}];
return <button onClick={e=>stateSet((old)=>old+1)}>count: {stateGet} :)</button>
2023-06-16 14:59:27 -04:00
};
2023-06-15 17:13:51 -04:00
2023-06-19 12:17:40 -04:00
type Store = {name:string, age:number}
const reducer =(inState:Store, inAction:number)=>
{
return {...inState, age:inState.age+inAction};
}
2023-06-19 13:31:22 -04:00
const builder =(inState:Store):Store=>
{
inState.age = 100;
return inState;
}
2023-06-20 21:40:49 -04:00
2023-06-07 14:15:57 -04:00
export default ()=>
{
2023-06-19 13:31:22 -04:00
const [Store, Dispatch] = React.useReducer(reducer, {name:"seth", age:24} as Store, builder)
2023-06-16 14:59:27 -04:00
return <CTXString.Provider value="intradestink">
<div class="my-4 font-sans">
2023-06-20 22:56:20 -04:00
<h1 class="font-black text-xl text-red-500">Title????</h1>
2023-07-08 12:21:58 -04:00
<h2 class="p-4">subtitle!!!!</h2>
2023-06-19 12:17:40 -04:00
<p>
<button onClick={e=>Dispatch(1)}>{Store.name}|{Store.age}?</button>
</p>
2023-06-18 14:37:13 -04:00
</div>
2023-06-16 14:59:27 -04:00
<Outer>
<Inner/>
</Outer>
<Outer>
<Inner/>
</Outer>
2023-06-20 21:40:49 -04:00
</CTXString.Provider>;
}