A minimalistic, lightweight library for managing your DOM, based on the "virtual-DOM" idea. Use it to manage dynamic widgets in your static web-pages, to make WebComponents, or even full blown single-page-application.
The prototypical counter example with ZXDOM looks like:
import {h, define, mount, update} from 'zxdom'
const Counter = define(
data => (
<p>
<button onclick={_ => update(Counter, {value: data.value - 1})}>-</button>
{data.value}
<button onclick={_ => update(Counter, {value: data.value + 1})}>+</button>
</p>
),
{value: 0}
)
mount(Counter, document.body)(the example uses JSX for readability, but it is not required. You can just as easily use the built in h function which the JSX compiles to)
The docs are very rudimentary at the moment. They do unpack the counter example with a summary walk-through of the functions exported by ZXDOM.
(Caveat: The docs only work with Chrome and Safari at the moment, because I got ahead of myself using the v1 spec of custom elements to implement the example-runner)
While the docs are brief at the moment, the example folder has more demos of what is possible, and how.
To run them:
$> git clone https://github.com/zaceno/zxdom
$> cd zxdom
$> npm install
$> npm run demo
...then go to http://localhost:1234
Currently: Chrome, Firefox and Safari. Not IE. Probably Edge but I haven't tested.
It may look similar to any of the numerous other React-ish frameworks/view-layers out there. But it is different (afaik).
I designed it to be minimal, not only in terms of footprint, but in adding artificial complexity. I'm trying to provide a view layer that allows you to use whatever strategies you like for architecture, modularization and state-management – with minimal boilerplate, glue-code & bookkeeping
Heavily inspired by Hyperapp. – Which you should totally look into if you want something still minimal, but more frameworkish.