Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
nanomorph
Advanced tools
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>`
document.body.appendChild(tree)
// document.body === <body><div>hello people</div></body>
morph(tree, html`<div>nanananana-na-no</div>`)
// document.body === <body><div>nanananana-na-no</div></body>
morph(tree, html`<div>teeny, tiny, tin bottle</div>`)
// document.body === <body><div>teeny, tiny, tin bottle</div></body>
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
It'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`
<section>
<div id="first">hello</div>
<div id="second">world</div>
</section>
`
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.
Why doesn't this work in Node?
Node has no concept of a DOM - server side rendering is basically fancy string concatenation. If you want to combine HTML strings in Node, check out hyperstream.
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! :sparkles:
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.
: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
Further Reading
Authors
License
FAQs
Hyper fast diffing algorithm for real DOM nodes
The npm package nanomorph receives a total of 394 weekly downloads. As such, nanomorph popularity was classified as not popular.
We found that nanomorph demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 29 open source maintainers collaborating on the project.
Package last updated on 06 Mar 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025