deno-musings/state-preserve/preact.js

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;



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();
});


OptionsHook("__h", (component_instance, hook_index, hook_state)=>
{
    console.log("Hook!")
    console.log(hook_index, hook_state);
})

OptionsHook("__", (...args)=>
{
    console.log("unknown!")
    console.log(...args);
})



const Component =()=>
{
    const [countGet, countSet] = SPOOF(12345);
    const [textGet, textSet] = SPOOF("Count is:");
    return H("h1", {onClick(){countSet(countGet+1)}}, `${textGet} ${countGet}`);
}

const root = document.querySelector("#app")||document.body;
Preact.render(
H(Preact.Fragment, null,
    H(Component),
    H(Component),
), root);