A lightweight library to update DOM and persist state. IE: React diffing with html instead of JSX (bring your own templating language).
JSX is great but there are so many other nice alternatives. React is great but it's clunky and opinionated.
- ~800 bytes min/gzip.
- Minimal API.
- Keyed html elements (
idto shuffle around nodes).
- Use whatever you want to generate html.
npm install set-dom
const setDOM = ;// We will use handlebars for our example.const hbs = ;const homePage = hbs;// You can replace the entire page with your new html (only updates changed elements).;// Or update individual elements.;
- setDOM(HTMLEntity, html|HTMLEntity) : Updates existing DOM to new DOM in as few operations as possible.
Just like React (although slightly different)
set-dom supports keyed nodes.
To help the diffing algorithm reposition your elements be sure to provide a
id attribute on nodes inside a map. This is optional but key for performance when re-ordering/modifying lists.
Another key difference from React is that
set-dom simply can't tell when you are rendering an entirely different component. As such it is good practice to use
data-key when you know that most of the html will be discarded (like when rendering an entirely different page) to skip the diffing process entirely.
Another trick to help set-dom with it's diffing algorithm is to provide a
data-checksum attribute. This attribute will only do any diff on an element (and it's children) if the checksum changes allowing you to skip diffing entire trees of the document. Check out hash-sum for a quick and simple checksum that you can use in your templates. Simply hash the state/data for your view and set-dom will only do any changes to the document once the hash has changed.
Sometimes it is required to simply escape the whole diffing paradigm and do all of the manual dom work yourself. With
set-dom it is easy to include these types of elements in the page using a special
Any elements that have a
data-ignore will only be diffed when the
data-ignore attribute is removed. The only thing
set-dom will do for you in this case is automatically add and remove the element.
Unlike React, set-dom does not provide a way for you to add event listeners to your elements. Fortunately there is a simple approach that enables this that you have probably used before (aka jquery), event delegation. Check out something like component-delegate for a lightweight library that does this for you. Or if you are using Rill checkout @rill/delegate.
Mounting and Dismounting.
Often you need the ability to intercept when a component is inserted or removed from the DOM.
Keyed elements (those with
id attributes) will automatically emit custom
dismount events when they are inserted and removed from the DOM.
You can use these events to handle setup and teardown of complex components along side event delegation.
You can also easily override the attributes used for both keying and ignoring by manually updating the
IGNORE properties of
set-dom like so.
// Change 'data-key' to 'data-my-key'setDOMKEY = 'data-my-key'// Change 'data-checksum' to 'data-my-checksum'setDOMCHECKSUM = 'data-my-checksum'// Change 'data-ignore' to 'data-my-ignore'setDOMIGNORE = 'data-my-ignore'
Benchmarks are available on the vdom-benchmark website.
npm testto run tests.
Please feel free to create a PR!