assets/styles | ||
src | ||
export.mjs | ||
favicon.ico | ||
index.html | ||
README.md |
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.
to use, clone/submodule/subtree/whatever the main
branch, and import json_as_html
from export.mjs
.
to see a demo, or contribute, clone the dev
branch.
how to use
the json_as_html
function takes two arguments:
- a required
json
argument that gets transformed into a tree ofNode
s. - an optional
state
argument which defaults to an emptyMap
.
this is how the function returns, given certain types of json
input:
Node
object: return it as it is.- string: return a text node containing the string.
- function: evaluate the function, with
state
as argument, and recursively calljson_as_html
on the result. return what that recursive call returns. - array: see below.
when given an array as json
input, the function treats its elements as the tag name, attributes, and children, of the Node
to create, in that order. call these type
, attributes
, and children
:
type
is expected to be a string.attributes
is expected to be an array, where each element is a key-value pair.children
is expected to be an array containing valid inputs forjson_as_html
. if it's not an array, it's treated as an array containing a single element.
both attributes
and children
default to empty arrays, and may thus be omitted.