deno-musings/state-preserve/preact.js

64 lines
1.3 KiB
JavaScript
Raw Normal View History

2024-10-11 13:04:47 -04:00
import "https://esm.sh/preact@10.23.1/debug";
import * as Preact from "https://esm.sh/preact@10.23.1";
import * as React from "https://esm.sh/preact@10.23.1/compat";
const H = Preact.h;
2024-10-12 12:28:41 -04:00
const SPOOF =(...args)=>
{
console.log("spoof state", ...args);
const [hookGet, hookSet] = React.useState(...args);
const spoofSetter = (...args)=>{
console.log("spoofed setter", ...args);
hookSet(...args);
}
return [
hookGet,
spoofSetter
]
}
function OptionsHook(key, hookNew)
{
const hookOld =Preact.options[key];
Preact.options[key] = hookOld ? (...args)=>{hookOld(...args); hookNew(...args);} : hookNew;
}
OptionsHook("__r", (/** @type {Preact.VNode}*/vnode)=>
{
console.log("render!");
console.log();
});
2024-10-11 13:04:47 -04:00
2024-10-12 12:28:41 -04:00
OptionsHook("__h", (component_instance, hook_index, hook_state)=>
2024-10-11 13:04:47 -04:00
{
2024-10-12 12:28:41 -04:00
console.log("Hook!")
console.log(hook_index, hook_state);
})
OptionsHook("__", (...args)=>
{
console.log("unknown!")
console.log(...args);
})
2024-10-11 13:04:47 -04:00
const Component =()=>
{
2024-10-12 12:28:41 -04:00
const [countGet, countSet] = SPOOF(12345);
const [textGet, textSet] = SPOOF("Count is:");
return H("h1", {onClick(){countSet(countGet+1)}}, `${textGet} ${countGet}`);
2024-10-11 13:04:47 -04:00
}
const root = document.querySelector("#app")||document.body;
2024-10-12 12:28:41 -04:00
Preact.render(
H(Preact.Fragment, null,
H(Component),
H(Component),
), root);