JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2919
  • Score
    100M100P100Q114035F
  • 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 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(tree, html`<div>nanananana-na-no</div>`)
tree = morph(tree, html`<div>teeny, tiny, tin bottle</div>`)

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

[tbi]

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

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.

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

See Also

Similar Packages

Further Reading

Authors

License

MIT