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

clean up dev branch to make merging easier.

This commit is contained in:
trans_soup 2023-07-16 15:15:17 +02:00
parent 9f5473cea8
commit 0ca932c700
3 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<title>json as html</title>
<script defer type="module" src="js/main.mjs"></script>
<script defer type="module" src="js/demo.mjs"></script>
</head>
<body></body>

32
js/demo.mjs Normal file
View File

@ -0,0 +1,32 @@
import { json_as_html } from "/js/export.mjs";
const demo = [
"div",
[
["id", "wrapper"],
["class", "demo_div"],
],
[
["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();

33
js/main.mjs → js/export.mjs
View File

@ -2,7 +2,7 @@ function use_as_array (val) {
return Array.isArray(val) ? val : [val];
}
function json_as_html (json, state = new Map()) {
export function json_as_html (json, state = new Map()) {
if (json instanceof Node) {
return json;
}
@ -32,34 +32,3 @@ function json_as_html (json, state = new Map()) {
return elem;
}
const demo = [
"div",
[
["id", "wrapper"],
["class", "demo_div"],
],
[
["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();