µdomdiff

^{Social Media Photo by Christopher Rusev on Unsplash}

An essential diffing algorithm for µhtml.

Signature

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
);

What is get and how does it work?

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.

How to import it:

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