nefsen402 / destam-dom

A dom manipulation library based on Destam.

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

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

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 to 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

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

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

mount(document.body, html`
	<button $onclick=${() => numbers.push(numbers.length + 1)}>
		Add number
	</button>
	<p>
		<${NumComponent} each=${numbers}/>
	</p>
`);

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.

npm run dev

And navigate to one of the compliment .html files for each implementation. For instance, if you wanted to see the result of examples/basic.js, navigate to examples/basic.html in the browser.

destam-dom's Issues

Build system for creating a static site?

I've been thinking about a feature that would help SEO sort of like Next.js does with its ssg. The thought is to make stupid simple builder that snaps a static version of the site during the build process. This wouldn't be anything too fancy, just something that captures the initial rendered state of the components and spits out straightforward static HTML from that.

The aim here is to keep everything lean, using basic string operations or minimal adjustments to existing destam-dom functions, so it stays true to minimal bloat. This way, we could generate two versions of a page, one dynamic version for users and another stripped-down html static version that’s friendlier for search engines and users with JS disabled.

I think this could really help with landing pages and SEO without increasing the libraries footprint by much. I don't really have the know how on if this is a good idea or if you could already do this with npm scripts or something, so making this a feature could be overkill