nanomorph

nanomorph

Hyper fast diffing algorithm for real DOM nodes :zap:

Usage

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

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

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)

API

tree = nanomorph(newTree, oldTree)

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()

:warning: 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