nanomorph

Hyper fast diffing algorithm for real DOM nodes ⚡

Usage

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

var tree = html`<div>hello people</div>`
tree = morph(tree, html`<div>nanananana-na-no</div>`)
tree = morph(tree, html`<div>teeny, tiny, tin bottle</div>`)

Appending to the DOM

var update = require('nanomorph/update')
var html = require('bel')

// create the initial tree, save it and append to DOM
var tree = html`<div>hello people</div>`
var morph = update(tree)
document.body.appendChild(tree)

// now each consecutive update will be rendered on the DOM
morph(html`<div>hello people</div>`, tree)

// even if the type of the root node changes
morph(html`<p>nanananana-na-no</p>`, tree)

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')
}

Building your 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! ✨

var test = require('nanomorph/test')
test(require('./my-morph-implementation'))

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.

morph = update(newTree)

Create a diffing function that morphs one tree into another, even if the type of the root node changes

tree = morph(newTree)

Diff the previous tree with a new tree using the function returned from update()

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

Installation

$ npm install nanomorph

See Also

• yoshuawuyts/nanoraf
• yoshuawuyts/nanocomponent
• yoshuawuyts/nanotick
• bendrucker/document-ready
• shama/on-load
• shama/bel

Similar Packages

• patrick-steele-idem/morphdom
• tbranyen/diffhtml

Further Reading

• how to write your own virtual dom 1
• how to write your own virtual dom 2

Authors

• Kristofer Joseph
• Yoshua Wuyts

License

MIT