javascript utility for creating DOM trees from arrays.
Find a file
2023-07-18 18:12:52 +02:00
assets/styles init. 2023-07-14 21:47:43 +02:00
src create messy reactivity-ish test stuff. 2023-07-18 17:52:02 +02:00
export.mjs change import paths from absolute to relative. 2023-07-16 16:41:50 +02:00
favicon.ico init. 2023-07-14 21:47:43 +02:00
index.html change import paths from absolute to relative. 2023-07-16 16:41:50 +02:00
README.md make readme branch-relevant. 2023-07-18 18:12:52 +02:00

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:

  1. a required json argument that gets transformed into a tree of Nodes.
  2. an optional state argument which defaults to an empty Map.

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 call json_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 for json_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.