npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

destam-dom

v0.9.2

Published

A dom manipulation library built on destam

Downloads

287

Readme

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