domdiff
A vDOM-less implementation of the petit-dom diffing logic, at the core of hyperHTML.
V2 breaking change
- the good old snabdom diff logic has been 100% replaced
- lists with
null
orundefined
nodes are not allowed anymore
... but I guess having null nodes in the equation was quite possibly a bad idea in the first place ...
V2 Diffing Strategies:
- common prefixes
- common suffixes
- skip same lists
- add boundaries
- remove boundaries
- simple sub-sequences insertions and removals
- one to many and many to one replacements
- fast inverted list swap
- O(ND) algo with a limit of 50 attempts
- last fallback with a simplified Hunt Szymanski algorithm
The current goal is to have in about 1K the best DOM diffing library out there.
V1 breaking change
The signature has moved from parent, current[], future[], getNode(), beforeNode
to parent, current[], future[], {before, compare(), node()}
.
Signature
futureNodes = ;
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;
( orrequire('domdiff/cjs').default
) - via bundlers/transpilers:
import domdiff from 'domdiff';
( orfrom 'domdiff/esm'
)
Example
var nodes = a: document b: document c: document; var parentNode = document;var childNodes = nodesa nodesc;parentNode;parentNodetextContent;// "ac" childNodes = ; parentNodetextContent;// "abc"
Compatibility:
Every. JavaScript. Engine.
{node: (generic, info) => node}
callback for complex data
A The optional {node: (generic, info) => node}
is invoked per each operation on the DOM.
This can be useful to represent node through wrappers, whenever that is needed.
The passed info
value can be:
1
when the item/node is being appended0
when the item/node is being used as insert before reference-0
when the item/node is being used as insert after reference-1
when the item/node is being removed
{ // case removal or case after if 1 / i < 0 // case removal if i // if the item has more than a node // remove all other nodes at once if itemlength > 1 const range = document; range; range; range; // return the first node to be removed return item0; // case after else return itemitemlength - 1; // case insert else if i const fragment = document; fragment; return fragment; // case before else return item0; } const and = document; const Bob = document document document; const Lucy = document document document document; // clean the body for demo purposedocumentbodytextContent = '';let content = ; // ... later on ...content = ; // clean up;