- Hyper fast diffing algorithm for real DOM nodes
[![npm version][2]][3] [![build status][4]][5] [![downloads][8]][9] [![js-standard-style][10]][11]
Hyper fast diffing algorithm for real DOM nodes :zap:
var morph = require('nanomorph')
var html = require('nanohtml')
var tree = html`
`
document.body.appendChild(tree)
// document.body ===
morph(tree, html`
`)
// document.body ===
morph(tree, html`
`)
// document.body ===
To remove values from inputs, there's a few options:
html`` // set the value to null
html`` // omit property all togetherIt'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`
`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`
`
// tell nanomorph to not compare the DOM tree if they're both divs
el.isSameNode = function (target) {
return (target && target.nodeName && target.nodeName === 'DIV')
}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 tags—even
if they both render a
var el2 = html
assert.equal(nanomorph(el, el2), el2)
…sh $ npm install nanomorph
## See Also
- [yoshuawuyts/nanoraf](https://github.com/yoshuawuyts/nanoraf)
- [yoshuawuyts/nanocomponent](https://github.com/yoshuawuyts/nanocomponent)
- [yoshuawuyts/nanotick](https://github.com/yoshuawuyts/nanotick)
- [bendrucker/document-ready](https://github.com/bendrucker/document-ready)
- [shama/on-load](https://github.com/shama/on-load)
- [choojs/nanohtml](https://github.com/choojs/nanohtml)
## Similar Packages
- [patrick-steele-idem/morphdom](https://github.com/patrick-steele-idem/morphdom)
- [tbranyen/diffhtml](https://github.com/tbranyen/diffhtml)
## Further Reading
- [how to write your own virtual dom 1][own-vdom-1]
- [how to write your own virtual dom 2][own-vdom-2]
## Authors
- [Kristofer Joseph](https://github.com/kristoferjoseph)
- [Yoshua Wuyts](https://github.com/yoshuawuyts)
## License
[MIT](https://tldrlegal.com/license/mit-license)
[0]: https://img.shields.io/badge/stability-stable-brightgreen.svg?style=flat-square
[1]: https://nodejs.org/api/documentation.html#documentation_stability_index
[2]: https://img.shields.io/npm/v/nanomorph.svg?style=flat-square
[3]: https://npmjs.org/package/nanomorph
[4]: https://img.shields.io/travis/choojs/nanomorph/master.svg?style=flat-square
[5]: https://travis-ci.org/choojs/nanomorph
[6]: https://img.shields.io/codecov/c/github/choojs/nanomorph/master.svg?style=flat-square
[7]: https://codecov.io/github/choojs/nanomorph
[8]: http://img.shields.io/npm/dm/nanomorph.svg?style=flat-square
[9]: https://npmjs.org/package/nanomorph
[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[11]: https://github.com/feross/standard
[mt]: https://en.wikipedia.org/wiki/Merkle_tree
[own-vdom-1]: https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
[own-vdom-2]: https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76
[hyperstream]: https://github.com/substack/hyperstreamNo open issues yet, or sync has not completed.