Skip to content

Instantly share code, notes, and snippets.

@barneycarroll barneycarroll/patdj.js
Last active Nov 8, 2019

Embed
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]);
}
}
}
@barneycarroll

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.