130 lines
3.5 KiB
TypeScript
Raw Normal View History

2017-06-20 13:46:49 +00:00
export class Diff {
2017-07-19 02:18:56 +00:00
static persistentClasses = new Set<string>()
2017-07-19 07:09:55 +00:00
static persistentAttributes = new Set<string>()
2017-07-19 02:18:56 +00:00
2017-07-05 19:06:38 +00:00
// Reuse container for diffs to avoid memory allocation
static container: HTMLElement
2017-07-19 03:23:06 +00:00
static rootContainer: HTMLElement
2017-07-05 19:06:38 +00:00
// innerHTML will diff the element with the given HTML string and apply DOM mutations.
static innerHTML(aRoot: HTMLElement, html: string) {
if(!Diff.container) {
Diff.container = document.createElement("main")
}
Diff.container.innerHTML = html
2017-07-20 12:36:32 +00:00
Diff.childNodes(aRoot, Diff.container)
2017-07-05 19:06:38 +00:00
}
2017-07-19 03:23:06 +00:00
// root will diff the document root element with the given HTML string and apply DOM mutations.
static root(aRoot: HTMLElement, html: string) {
if(!Diff.rootContainer) {
Diff.rootContainer = document.createElement("html")
}
Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
2017-07-20 12:36:32 +00:00
Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])
2017-07-19 03:23:06 +00:00
}
2017-07-05 19:06:38 +00:00
// childNodes diffs the child nodes of 2 given elements and applies DOM mutations.
2017-06-26 01:57:29 +00:00
static childNodes(aRoot: Node, bRoot: Node) {
2017-06-21 16:44:20 +00:00
let aChild = [...aRoot.childNodes]
let bChild = [...bRoot.childNodes]
let numNodes = Math.max(aChild.length, bChild.length)
for(let i = 0; i < numNodes; i++) {
2017-06-26 01:57:29 +00:00
let a = aChild[i]
2017-06-21 16:44:20 +00:00
2017-07-19 02:04:19 +00:00
// Remove nodes at the end of a that do not exist in b
2017-06-21 16:44:20 +00:00
if(i >= bChild.length) {
aRoot.removeChild(a)
continue
}
2017-06-26 01:57:29 +00:00
let b = bChild[i]
2017-06-21 16:44:20 +00:00
2017-07-19 02:04:19 +00:00
// If a doesn't have that many nodes, simply append at the end of a
2017-06-21 16:44:20 +00:00
if(i >= aChild.length) {
aRoot.appendChild(b)
continue
}
2017-07-19 02:04:19 +00:00
// If it's a completely different HTML tag or node type, replace it
2017-06-21 16:44:20 +00:00
if(a.nodeName !== b.nodeName || a.nodeType !== b.nodeType) {
aRoot.replaceChild(b, a)
continue
}
2017-07-19 02:04:19 +00:00
// Text node:
// We don't need to check for b to be a text node as well because
// we eliminated different node types in the previous condition.
2017-06-26 01:57:29 +00:00
if(a.nodeType === Node.TEXT_NODE) {
a.textContent = b.textContent
continue
}
2017-07-19 02:04:19 +00:00
// HTML element:
2017-06-21 16:44:20 +00:00
if(a.nodeType === Node.ELEMENT_NODE) {
2017-06-26 01:57:29 +00:00
let elemA = a as HTMLElement
let elemB = b as HTMLElement
2017-06-21 16:44:20 +00:00
let removeAttributes: Attr[] = []
2017-06-26 01:57:29 +00:00
for(let x = 0; x < elemA.attributes.length; x++) {
let attrib = elemA.attributes[x]
2017-06-21 16:44:20 +00:00
if(attrib.specified) {
2017-07-19 07:09:55 +00:00
if(!elemB.hasAttribute(attrib.name) && !Diff.persistentAttributes.has(attrib.name)) {
2017-06-21 16:44:20 +00:00
removeAttributes.push(attrib)
}
}
}
for(let attr of removeAttributes) {
2017-06-26 01:57:29 +00:00
elemA.removeAttributeNode(attr)
2017-06-21 16:44:20 +00:00
}
2017-06-26 01:57:29 +00:00
for(let x = 0; x < elemB.attributes.length; x++) {
let attrib = elemB.attributes[x]
2017-06-21 16:44:20 +00:00
2017-07-19 02:47:32 +00:00
if(!attrib.specified) {
continue
}
if(attrib.name === "class") {
// If the class is exactly the same, skip this attribute.
if(elemA.getAttribute("class") === attrib.value) {
continue
}
2017-07-19 02:18:56 +00:00
2017-07-19 02:47:32 +00:00
let classesA = elemA.classList
let classesB = elemB.classList
for(let className of classesA) {
if(!classesB.contains(className) && !Diff.persistentClasses.has(className)) {
classesA.remove(className)
2017-07-19 02:18:56 +00:00
}
2017-07-19 02:47:32 +00:00
}
2017-07-19 02:18:56 +00:00
2017-07-19 02:47:32 +00:00
for(let className of classesB) {
if(!classesA.contains(className)) {
classesA.add(className)
}
2017-06-29 13:55:04 +00:00
}
2017-07-19 02:47:32 +00:00
continue
2017-06-21 16:44:20 +00:00
}
2017-07-19 02:47:32 +00:00
elemA.setAttribute(attrib.name, elemB.getAttribute(attrib.name))
2017-06-21 16:44:20 +00:00
}
2017-06-24 00:10:04 +00:00
// Special case: Apply state of input elements
2017-06-26 01:57:29 +00:00
if(elemA !== document.activeElement && elemA instanceof HTMLInputElement && elemB instanceof HTMLInputElement) {
elemA.value = elemB.value
2017-06-24 00:10:04 +00:00
}
2017-06-21 16:44:20 +00:00
}
Diff.childNodes(a, b)
}
}
2017-06-20 13:46:49 +00:00
}