The library tries to provide pure JavaScript tool(s) to create reactive interfaces.
We start with creating and modifying a static elements and end up with UI templates. From document.createElement to el. Then we go through the native events system and the way to include it declaratively in UI templates. From element.addEventListener to on.
Next step is providing interactivity not only for our UI templates. We introduce signals (S) and how them incorporate to UI templates.
Now we will clarify how the signals are incorporated into our templates with regard to application performance. This is not the only reason the library uses scopes. We will look at how they work in components represented in JavaScript by functions.
import { el } from "./esm-with-signals.js";
import { S } from "./esm-with-signals.js";
const clicks= S(0);
document.body.append(
el().append(
el("p", S(()=>
"Hello World "+"🎉".repeat(clicks())
)),
el("button", {
type: "button",
onclick: ()=> clicks(clicks()+1),
textContent: "Fire"
})
)
);