nanomorph

Hyper fast diffing algorithm for real DOM nodes ⚡️

Usage

var morph = require('nanomorph')
var html = require('nanohtml')

var tree = html`<div>hello people</div>`
document.body.appendChild(tree)
// document.body === <body><div>hello people</div></body>

morph(tree, html`<div>nanananana-na-no</div>`)
// document.body === <body><div>nanananana-na-no</div></body>

morph(tree, html`<div>teeny, tiny, tin bottle</div>`)
// document.body === <body><div>teeny, tiny, tin bottle</div></body>

Clearing Input Values

To remove values from inputs, there's a few options:

html`<input class="beep" value=${null}>` // set the value to null
html`<input class="beep">`               // omit property all together

Reordering Lists

It's common to work with lists of elements on the DOM. Adding, removing or reordering elements in a list can be rather expensive. To optimize this you can add an id attribute to a DOM node. When reordering nodes it will compare nodes with the same ID against each other, resulting in far fewer re-renders. This is especially potent when coupled with DOM node caching.

var el = html`
  <section>
    <div id="first">hello</div>
    <div id="second">world</div>
  </section>
`

Caching DOM elements

Sometimes we want to tell the algorithm to not evaluate certain nodes (and its children). This can be because we're sure they haven't changed, or perhaps because another piece of code is managing that part of the DOM tree. To achieve this nanomorph evaluates the .isSameNode() method on nodes to determine if they should be updated or not.

var el = html`<div>node</div>`

// tell nanomorph to not compare the DOM tree if they're both divs
el.isSameNode = function (target) {
  return (target && target.nodeName && target.nodeName === 'DIV')
}

Prevent Morphing Particular Elements

There are situations where two elements should never be morphed, but replaced. nanomorph automatically does this for elements with different tag names. But if we're implementing a custom component system, for example, components of different types should probably be treated as if they had different tagseven if they both render a <div> at their top level.

Nodes can have an optional data-nanomorph-component-id attribute. nanomorph will only ever morph nodes if they both have the same value in this attribute. If the values differ, the old node is replaced with the new one.

var el = html`<div data-nanomorph-component-id="a">hello</div>`
var el2 = html`<div data-nanomorph-component-id="b">goodbye</div>`

assert.equal(nanomorph(el, el2), el2)

nanomorph doesn't have an opinion on the values of the data-nanomorph-component-id attribute, so we can decide the meaning we give it on a case by case basis. There could be a unique ID for every type of component, or a unique ID for every instance of a component, or any other meaning.

FAQ

How is this different from morphdom?

It's quite similar actually; the API of this library is completely compatible with morphdom and we've borrowed a fair few bits. The main difference is that we copy event handlers like onclick, don't support browsers that are over a decade old, and don't provide custom behavior by removing all hooks. This way we can guarantee a consistent, out-of-the box experience for all your diffing needs.

Why doesn't this work in Node?

Node has no concept of a DOM - server side rendering is basically fancy string concatenation. If you want to combine HTML strings in Node, check out hyperstream.

This library seems cool, I'd like to build my own!

Nanomorph was optimized for simplicity, but different situations might require different tradeoffs. So in order to allow folks to build their own implementation we expose our test suite as a function you can call. So regardless if you're doing it to solve a problem, or just for fun: you can use the same tests we use for your own implementation. Yay! ✨

API

tree = nanomorph(oldTree, newTree)

Diff a tree of HTML elements against another tree of HTML elements and create a patched result that can be applied on the DOM.

⚠️ nanomorph will modify the newTree and it should be discarded after use

Installation

$ npm install nanomorph

Similar Packages

Authors

License

MIT

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
React Fiber Architecture	9,860			8 months ago			32
A description of React's new core algorithm, React Fiber
Simple Virtual Dom	1,567	14	6	3 years ago	11	November 08, 2018	10	mit	JavaScript
Basic virtual-dom algorithm
Mega Interview Guide	936			a year ago			6	mit	HTML
The MEGA interview guide, JavaSciript, Front End, Comp Sci
Nanomorph	710	225	65	2 years ago	33	February 18, 2021	17	mit	JavaScript
🚅 - Hyper fast diffing algorithm for real DOM nodes
List Diff	138	31	14	4 years ago	5	November 21, 2015	4	mit	JavaScript
Diff two lists in O(n).
Frontend_knowledge	105			5 years ago				mit
📚 Important Frontend Knowledge（前端知识汇总）
Vdom	82	39	9	8 years ago	15	November 13, 2014	3	mit	JavaScript
A DOM create and patch algorithm for vtree
Simple Virtual Dom	78			7 years ago				mit	JavaScript
Basic virtual-dom algorithm
Js Symbol Tree	60	227,646	177	3 years ago	19	June 12, 2019	2	mit	JavaScript
Turn any collection of objects into its own efficient tree or linked list using Symbol
Mono React	60			4 years ago			2	mit
Create React from zero series

Nanomorph