Pure and simple render function with hydrating, in ~20 lines of code.
npm inpm run devSee index.html and demo.js source code.
Import as ESM module and run function from HEAD:
<head>
<script type="module">
import {ready, render} from './halo.js';
const yo = {
type: "button",
children: "Yo!",
eventHandlers: {
click: [
() => alert("🖖")
]
}
}
ready(() => {
render({
type: "div",
attr: {
derp: 42
},
children: {
title: {
type: "h1",
children: "Halo! 🖖✨",
eventHandlers: {
click: [
() => alert("🖖")
]
}
},
buttons: {
type: "div",
attr: {
class: "buttons"
},
children: {
yo,
yo2: yo,
yo3: yo,
yo4: yo,
yo5: yo,
yo6: yo,
yo7: yo
}
}
}
});
});
</script>
</head><body>
<div id="root"></div>
</body>