Embeddable DOM diffing algorithm. Currently a fork of morphdom with hooks and IE7 support removed, and event copying added, but will probably change in the future.
const nanodiff = require('nanodiff')
const bel = require('bel')
var tree = null
var el1 = bel`<div>hello people</div>`
var el2 = bel`<div>nanananana-na-no</div>`
var el2 = bel`<div>teeny, tiny, tin bottle</div>`
update(el1)
update(el2)
update(el3)
function update (el) {
if (!tree) {
tree = el
document.body.appendChild(tree)
} else {
tree = nanodiff(el, tree)
}
}Diff a tree of HTML elements against another tree of HTML elements and create a patched result that can be applied on the DOM.
Experimentin' is fun - all this is is a take on seeing how small we can get with real DOM node diffing. And if we can make some good heuristics happen for efficient tree updates (Merkle trees, anyone?) that'd be nice.
No, probably not since I haven't tested this yet, but feel free to think along how to make this smaller. Currently wondering if I could adapt this vdom guide into one that operates on real DOM nodes. Probably could hey into one that operates on real DOM nodes. Probably could hey.
$ npm install nanodiff