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

make readme branch-relevant.

This commit is contained in:
trans_soup 2023-07-18 18:12:40 +02:00
parent 8e3aa4228c
commit ef0b607e42
1 changed files with 10 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

@ -1,3 +1,13 @@
# `reactivity-test`
this branch is for testing out things related to making elements change in reaction to changes in data.
right now, functions passed to `json_as_html` will have an optional additional argument, that's a function. calling it with another function, will make it so that that other function is applied to the element returned from the first function (the one passed to `json_as_html`).
the demo uses this to create an event listener (in a tiny event system made for this), that modifies the contents of an element. the event is triggered by a button onclick just like it was previously.
---
small utility for creating DOM trees from javascript arrays.
note that this doesn't actually take a json string, but rather an actual array, as input. `array_as_html` would be a bit inaccurate though, since it also handles some other things such as functions and strings in ways that make sense.
@ -6,35 +16,6 @@ to use, clone/submodule/subtree/whatever the `main` branch, and import `json_as_
to see a demo, or contribute, clone the `dev` branch.
# example
here's the demo array being used at the time of writing this:
```javascript
[
"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"],
],
]
```
it assumes a function `render` which replaces the contents of the `<body>` with the result of calling `json_as_html` with this array as argument. it also assumes a `Map` called `state`.
# how to use
the `json_as_html` function takes two arguments: