From ef0b607e42e50c60398c40cc7fba5cd6b223d5aa Mon Sep 17 00:00:00 2001 From: trans_soup <> Date: Tue, 18 Jul 2023 18:12:40 +0200 Subject: [PATCH] make readme branch-relevant. --- README.md | 39 ++++++++++----------------------------- 1 file changed, 10 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 8d37e72..9139858 100644 --- a/README.md +++ b/README.md @@ -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 `` 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: