destam-dom

This is a dom manipulation library built on destam (delta state manager). This library's purpose is to provide bindings to interpret destam deltas as mutations on the dom.

See the documentation

Basic counter

``js
const count = Observer.mutable(0);
mount(document.body, html
count.set(count.get() + 1)}>
Button clicked ${count} times

count.set(0)}>Reset
);
`

No virtual dom

Virtual doms were a mistake:
- they allocate a lot of memory just to represent the dom
- they make it impossible to make static analysis tools that unroll dom descriptions into vanillajs
- they require a lot of magic called "reconciliation" in order to actually work
- they have horrible performance with lists as virtual dom implementations are forced to iterate the entire tree

destam-dom relies on the idea of signals, but destam-dom does not attempt to re-invent another state library, it's built on the existing destam library. Destam provides primitives that generate deltas whenever they are mutated, and destam-dom takes those deltas and interprets them as dom manipluations. This approach achieves true constant time insertion, deletion and modification to dom children.

List example

`js
const numbers = OArray([1, 2, 3]);

const NumComponent = ({each: num}) => {
return html${num} ;
};

mount(document.body, html
numbers.push(numbers.length + 1)}>
Add number

<${NumComponent} each=${numbers}/>

);
`

JSX compatible

destam-dom provides various source passes under transform/ for build systems that will take `html ` template literals and JSX and turn it into simple calls that destam-dom directly understands so that no parsing has to happen at runtime.

More examples

The examples directory provides many simple examples for how to use this library.
`bash
npm run dev
`

Accessing the link provided will allow you to browse the examples. To view a single example, navigate to the compliment .html url for each implementation. All examples are served from the root. For instance, if you wanted to see the result of examples/basic.js, navigate to /basic.html` in the browser.