domdiff

A vDOM-less implementation of the snabbdom diffing logic.

Signature

futureNodes = domdiff(
  parentNode,     // where changes happen
  currentNodes,   // Array of current items/nodes
  futureNodes,    // Array of future items/nodes (returned)
  getNode,        // optional way to retrieve a node from an item
  beforeNode      // optional item/node to use as insertBefore delimiter
);

How to import it:

• via CDN, as global variable: https://unpkg.com/domdiff
• via ESM, as external module: https://unpkg.com/domdiff/esm/index.js
• via CJS: const EventTarget = require('domdiff').default; ^{_{( or require('domdiff/cjs').default )}}
• via bundlers/transpilers: import domdiff from 'domdiff'; ^{_{( or from 'domdiff/esm' )}}

Example

var nodes = {
  a: document.createTextNode('a'),
  b: document.createTextNode('b'),
  c: document.createTextNode('c')
};

var parentNode = document.createElement('p');
var childNodes = [nodes.a, nodes.c];
parentNode.append(...childNodes);
parentNode.textContent;
// "ac"

childNodes = domdiff(
  parentNode,
  childNodes,
  [nodes.a, nodes.b, nodes.c]
);

parentNode.textContent;
// "abc"

Compatibility:

Every. JavaScript. Engine.