HyperOnion
/
json_as_html
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev'

This commit is contained in:
trans_soup 2023-07-16 16:00:18 +02:00
parent ac75e69f53 6f33791a0b
commit 690cd76d85
2 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
export.mjs
View File

@ -1,34 +1 @@
function use_as_array (val) {
return Array.isArray(val) ? val : [val];
}
export 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]) => {
// from testing: class only works with the former, onclick only work with the latter. so both are used here :)
// also from testing: this only works in this specific order.
// TODO: learn how element attribute setting works and create something more reliable.
elem.setAttribute(key, value);
elem[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;
}
export { json_as_html } from "/src/core.mjs";

34
src/core.mjs Normal file
View File

@ -0,0 +1,34 @@
function use_as_array (val) {
return Array.isArray(val) ? val : [val];
}
export 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]) => {
// from testing: class only works with the former, onclick only work with the latter. so both are used here :)
// also from testing: this only works in this specific order.
// TODO: learn how element attribute setting works and create something more reliable.
elem.setAttribute(key, value);
elem[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;
}