JSPM

  • Created
  • Published
  • Downloads 2919
  • Score
    100M100P100Q114036F
  • License MIT

Hyper fast diffing algorithm for real DOM nodes

Package Exports

  • nanomorph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nanomorph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

nanomorph stability

npm version build status test coverage downloads js-standard-style

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

Installation

$ npm install nanomorph

See Also

Similar Packages

Further Reading

Authors

License

MIT