µdomdiff

 

!a different tree

^{Social Media Photo by Christopher Rusev on Unsplash}

An essential diffing algorithm for µhtml.

$3

``js
futureNodes = udomdiff(
parentNode, // where changes happen
[...currentNodes], // Array of current items/nodes
[...futureNodes], // Array of future items/nodes (returned)
get(node, toDoWhat), // a callback to retrieve the node
before // the anchored node to insertBefore
);
`

$3

You can find all info from domdiff, as it's exactly the same concept:

* get(node, 1) to retrieve the node that's being appended
* get(node, 0) to get the node to use for an insertBefore operation
* get(node, -0) to get the node to use for an insertAfter operation
* get(node, -1) to retrieve the node that's being removed

If you don't care about any of those second arguments values, const get = o => o; is a valid get too.

$3

* via CDN, as global variable: https://unpkg.com/udomdiff
* via ESM, as external module: import udomdiff from 'https://unpkg.com/udomdiff/esm/index.js'
* via CJS: const udomdiff = require('udomdiff'); ( or require('udomdiff/cjs') )
* via bundlers/transpilers: import udomdiff from 'udomdiff'; ( or from 'udomdiff/esm'` )