Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
DOM patching without: provide two DOM elements, the second (and contents) will be modified such that it resembles the first
function patdj(target, update, preserve = true) {
if (update.nodeType != 1 && update.nodeType == target.nodeType)
target.nodeValue = update.nodeValue
else if (update.nodeType != target.nodeType || update.tagName !== target.tagName || update.type !== target.type){
const { nextSibling, parentNode } = target;
const replacement = preserve ? update.cloneNode(true) : update;
parentNode.removeChild(target);
if (nextSibling)
parentNode.insertBefore(replacement, nextSibling);
else
parentNode.appendChild(replacement);
}
else {
const properties = new Set();
for (const key in update)
properties.add(key);
for (const key in target)
properties.add(key);
for (const key of properties)
if (!(key in update))
delete target[key];
else if (update[key] !== target[key] && !isNaN(update[key]))
target[key] = update[key];
for (const key of new Set(
[...update.attributes, ...target.attributes].map(({ name }) => name)
))
if (!update.hasAttribute(key))
target.removeAttribute(key);
else {
const value = update.getAttribute(key);
if (value !== target.getAttribute(key))
target.setAttribute(key, value);
}
let index = Math.max(update.childNodes.length, target.childNodes.length);
while (index-- > 0){
if (!update.childNodes[index])
target.removeChild(target.childNodes[index]);
else
patdj(update.childNodes[index], target.childNodes[index]);
}
}
}
Owner

barneycarroll commented May 22, 2017

Revision 5 introduced sub-tree node patching at the expense of property patching

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment