30 lines
866 B
JavaScript
30 lines
866 B
JavaScript
|
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;
|
||
|
|
|
||
|
|
console.log(React);
|
||
|
|
|
||
|
|
/** @typedef {(vnode:Preact.VNode)=>unknown} DeepHook*/
|
||
|
|
|
||
|
|
/** @type {DeepHook|undefined} */
|
||
|
|
const renderOld =Preact.options.__r;
|
||
|
|
|
||
|
|
/** @type {DeepHook} */
|
||
|
|
const renderNew =(vnode)=>
|
||
|
|
{
|
||
|
|
console.log("render!")
|
||
|
|
console.log(vnode);
|
||
|
|
// how to examine state context here?
|
||
|
|
};
|
||
|
|
|
||
|
|
Preact.options.__r = renderOld ? /**@type{DeepHook}*/((vnode)=>{renderOld(vnode); renderNew(vnode);}) : renderNew;
|
||
|
|
|
||
|
|
const Component =()=>
|
||
|
|
{
|
||
|
|
const [countGet, countSet] = React.useState(3);
|
||
|
|
return H("h1", {onClick(){countSet(countGet+1)}}, `count: ${countGet}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const root = document.querySelector("#app")||document.body;
|
||
|
|
Preact.render(H(Component, {HEY:"HEY"}), root);
|