61 lines
1.2 KiB
JavaScript
61 lines
1.2 KiB
JavaScript
function use_as_array (val) {
|
|
return Array.isArray(val) ? val : [val];
|
|
}
|
|
|
|
function json_as_html (json, state = new Map()) {
|
|
if (json instanceof Node) {
|
|
return json;
|
|
}
|
|
|
|
if (typeof json === "string") {
|
|
return document.createTextNode(json);
|
|
}
|
|
|
|
if (typeof json === "function") {
|
|
return json_as_html(json(state), state);
|
|
}
|
|
|
|
const [type, attributes, children] = json;
|
|
|
|
const elem = document.createElement(type);
|
|
|
|
attributes.forEach(([key, value]) =>
|
|
elem[key] = value);
|
|
// elem.setAttribute(key, value));
|
|
|
|
const child_nodes = use_as_array(children).map(child => json_as_html(child, state))
|
|
child_nodes.forEach(child => elem.appendChild(child));
|
|
|
|
return elem;
|
|
}
|
|
|
|
|
|
|
|
const demo = [
|
|
"div",
|
|
[
|
|
["id", "wrapper"]
|
|
],
|
|
[
|
|
["h1", [], "header :)"],
|
|
["p", [], "paragraph! meow"],
|
|
["p", [], "another paragraph!! this is so cool"],
|
|
state => ["button", [
|
|
["onclick", _ => {
|
|
state.set("clicked", true);
|
|
render();
|
|
}]
|
|
], "it can even do buttons!"],
|
|
state => ["p", [], state.get("clicked") ? "clicked" : "not clicked"],
|
|
],
|
|
];
|
|
|
|
const state = new Map();
|
|
|
|
function render () {
|
|
document.body.innerHTML = "";
|
|
document.body.appendChild(json_as_html(demo, state));
|
|
}
|
|
|
|
render();
|