scripts/Diff.ts

import { MutationQueue } from "./MutationQueue"

export default class Diff {
	static persistentClasses = new Set<string>()
	static persistentAttributes = new Set<string>()

	// Reuse container for diffs to avoid memory allocation
	static container: HTMLElement
	static rootContainer: HTMLElement
	static mutations: MutationQueue = new MutationQueue()

	// innerHTML will diff the element with the given HTML string and apply DOM mutations.
	static innerHTML(aRoot: HTMLElement, html: string): Promise<void> {
		if(!Diff.container) {
			Diff.container = document.createElement("main")
		}

		Diff.container.innerHTML = html

		return new Promise((resolve, reject) => {
			Diff.childNodes(aRoot, Diff.container)
			this.mutations.wait(resolve)
		})
	}

	// root will diff the document root element with the given HTML string and apply DOM mutations.
	static root(aRoot: HTMLElement, html: string) {
		return new Promise((resolve, reject) => {
			if(!Diff.rootContainer) {
				Diff.rootContainer = document.createElement("html")
			}

			Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")

			Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])
			this.mutations.wait(resolve)
		})
	}

	// childNodes diffs the child nodes of 2 given elements and applies DOM mutations.
	static childNodes(aRoot: Node, bRoot: Node) {
		let aChild = [...aRoot.childNodes]
		let bChild = [...bRoot.childNodes]
		let numNodes = Math.max(aChild.length, bChild.length)

		for(let i = 0; i < numNodes; i++) {
			let a = aChild[i]

			// Remove nodes at the end of a that do not exist in b
			if(i >= bChild.length) {
				this.mutations.queue(() => aRoot.removeChild(a))
				continue
			}

			let b = bChild[i]

			// If a doesn't have that many nodes, simply append at the end of a
			if(i >= aChild.length) {
				this.mutations.queue(() => aRoot.appendChild(b))
				continue
			}

			// If it's a completely different HTML tag or node type, replace it
			if(a.nodeName !== b.nodeName || a.nodeType !== b.nodeType) {
				this.mutations.queue(() => aRoot.replaceChild(b, a))
				continue
			}

			// 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.
			if(a.nodeType === Node.TEXT_NODE) {
				this.mutations.queue(() => a.textContent = b.textContent)
				continue
			}

			// HTML element:
			if(a.nodeType === Node.ELEMENT_NODE) {
				let elemA = a as HTMLElement
				let elemB = b as HTMLElement

				let removeAttributes: Attr[] = []

				for(let x = 0; x < elemA.attributes.length; x++) {
					let attrib = elemA.attributes[x]

					if(attrib.specified) {
						if(!elemB.hasAttribute(attrib.name) && !Diff.persistentAttributes.has(attrib.name)) {
							removeAttributes.push(attrib)
						}
					}
				}

				this.mutations.queue(() => {
					for(let attr of removeAttributes) {
						elemA.removeAttributeNode(attr)
					}
				})

				for(let x = 0; x < elemB.attributes.length; x++) {
					let attrib = elemB.attributes[x]

					if(!attrib.specified) {
						continue
					}

					// If the attribute value is exactly the same, skip this attribute.
					if(elemA.getAttribute(attrib.name) === attrib.value) {
						continue
					}

					if(attrib.name === "class") {
						let classesA = elemA.classList
						let classesB = elemB.classList
						let removeClasses: string[] = []

						for(let className of classesA) {
							if(!classesB.contains(className) && !Diff.persistentClasses.has(className)) {
								removeClasses.push(className)
							}
						}

						this.mutations.queue(() => {
							for(let className of removeClasses) {
								classesA.remove(className)
							}

							for(let className of classesB) {
								if(!classesA.contains(className)) {
									classesA.add(className)
								}
							}
						})

						continue
					}

					this.mutations.queue(() => elemA.setAttribute(attrib.name, attrib.value))
				}

				// Special case: Apply state of input elements
				if(elemA !== document.activeElement && elemA instanceof HTMLInputElement && elemB instanceof HTMLInputElement) {
					this.mutations.queue(() => {
						(elemA as HTMLInputElement).value = (elemB as HTMLInputElement).value
					})
				}
			}

			Diff.childNodes(a, b)
		}
	}
}
Removed old mutation queue code 2018-03-22 14:52:52 +00:00			`import { MutationQueue } from "./MutationQueue"`
Improved diffs 2018-03-14 02:08:50 +00:00
TypeScript cleanup 2018-04-02 05:34:16 +00:00			`export default class Diff {`
Improved diffs 2017-07-19 02:18:56 +00:00			`static persistentClasses = new Set<string>()`
Heavily improved page reload 2017-07-19 07:09:55 +00:00			`static persistentAttributes = new Set<string>()`
Improved diffs 2017-07-19 02:18:56 +00:00
Added mutation queues 2017-07-05 19:06:38 +00:00			`// Reuse container for diffs to avoid memory allocation`
			`static container: HTMLElement`
Implemented full page diffs 2017-07-19 03:23:06 +00:00			`static rootContainer: HTMLElement`
Removed old mutation queue code 2018-03-22 14:52:52 +00:00			`static mutations: MutationQueue = new MutationQueue()`
Added mutation queues 2017-07-05 19:06:38 +00:00
			`// innerHTML will diff the element with the given HTML string and apply DOM mutations.`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00			`static innerHTML(aRoot: HTMLElement, html: string): Promise<void> {`
Added mutation queues 2017-07-05 19:06:38 +00:00			`if(!Diff.container) {`
			`Diff.container = document.createElement("main")`
			`}`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Added mutation queues 2017-07-05 19:06:38 +00:00			`Diff.container.innerHTML = html`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
			`return new Promise((resolve, reject) => {`
Improved diffs 2018-03-14 02:08:50 +00:00			`Diff.childNodes(aRoot, Diff.container)`
			`this.mutations.wait(resolve)`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00			`})`
Added mutation queues 2017-07-05 19:06:38 +00:00			`}`

Implemented full page diffs 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) {`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00			`return new Promise((resolve, reject) => {`
			`if(!Diff.rootContainer) {`
			`Diff.rootContainer = document.createElement("html")`
			`}`

			`Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")`

Improved diffs 2018-03-14 02:08:50 +00:00			`Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])`
			`this.mutations.wait(resolve)`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00			`})`
Implemented full page diffs 2017-07-19 03:23:06 +00:00			`}`

Added mutation queues 2017-07-05 19:06:38 +00:00			`// childNodes diffs the child nodes of 2 given elements and applies DOM mutations.`
Improved forum navigation 2017-06-26 01:57:29 +00:00			`static childNodes(aRoot: Node, bRoot: Node) {`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`let aChild = [...aRoot.childNodes]`
			`let bChild = [...bRoot.childNodes]`
			`let numNodes = Math.max(aChild.length, bChild.length)`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`for(let i = 0; i < numNodes; i++) {`
Improved forum navigation 2017-06-26 01:57:29 +00:00			`let a = aChild[i]`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00
Fixed diffs 2017-07-19 02:04:19 +00:00			`// Remove nodes at the end of a that do not exist in b`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`if(i >= bChild.length) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => aRoot.removeChild(a))`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`continue`
			`}`

Improved forum navigation 2017-06-26 01:57:29 +00:00			`let b = bChild[i]`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00
Fixed diffs 2017-07-19 02:04:19 +00:00			`// If a doesn't have that many nodes, simply append at the end of a`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`if(i >= aChild.length) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => aRoot.appendChild(b))`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`continue`
			`}`

Fixed diffs 2017-07-19 02:04:19 +00:00			`// If it's a completely different HTML tag or node type, replace it`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`if(a.nodeName !== b.nodeName \|\| a.nodeType !== b.nodeType) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => aRoot.replaceChild(b, a))`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`continue`
			`}`

Fixed diffs 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.`
Improved forum navigation 2017-06-26 01:57:29 +00:00			`if(a.nodeType === Node.TEXT_NODE) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => a.textContent = b.textContent)`
Improved forum navigation 2017-06-26 01:57:29 +00:00			`continue`
			`}`

Fixed diffs 2017-07-19 02:04:19 +00:00			`// HTML element:`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`if(a.nodeType === Node.ELEMENT_NODE) {`
Improved forum navigation 2017-06-26 01:57:29 +00:00			`let elemA = a as HTMLElement`
			`let elemB = b as HTMLElement`

Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`let removeAttributes: Attr[] = []`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Improved forum navigation 2017-06-26 01:57:29 +00:00			`for(let x = 0; x < elemA.attributes.length; x++) {`
			`let attrib = elemA.attributes[x]`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00
			`if(attrib.specified) {`
Heavily improved page reload 2017-07-19 07:09:55 +00:00			`if(!elemB.hasAttribute(attrib.name) && !Diff.persistentAttributes.has(attrib.name)) {`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`removeAttributes.push(attrib)`
			`}`
			`}`
			`}`

Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => {`
			`for(let attr of removeAttributes) {`
			`elemA.removeAttributeNode(attr)`
			`}`
			`})`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00
Improved forum navigation 2017-06-26 01:57:29 +00:00			`for(let x = 0; x < elemB.attributes.length; x++) {`
			`let attrib = elemB.attributes[x]`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00
Improved diff 2017-07-19 02:47:32 +00:00			`if(!attrib.specified) {`
			`continue`
			`}`

Removed flickering on iframes 2017-10-16 09:53:47 +00:00			`// If the attribute value is exactly the same, skip this attribute.`
			`if(elemA.getAttribute(attrib.name) === attrib.value) {`
			`continue`
			`}`
Improved diffs 2017-07-19 02:18:56 +00:00
Removed flickering on iframes 2017-10-16 09:53:47 +00:00			`if(attrib.name === "class") {`
Improved diff 2017-07-19 02:47:32 +00:00			`let classesA = elemA.classList`
			`let classesB = elemB.classList`
Fixed class diffing 2017-10-08 07:03:55 +00:00			`let removeClasses: string[] = []`
Improved diff 2017-07-19 02:47:32 +00:00
			`for(let className of classesA) {`
			`if(!classesB.contains(className) && !Diff.persistentClasses.has(className)) {`
Fixed class diffing 2017-10-08 07:03:55 +00:00			`removeClasses.push(className)`
Improved diffs 2017-07-19 02:18:56 +00:00			`}`
Improved diff 2017-07-19 02:47:32 +00:00			`}`
Improved diffs 2017-07-19 02:18:56 +00:00
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => {`
			`for(let className of removeClasses) {`
			`classesA.remove(className)`
			`}`
Fixed class diffing 2017-10-08 07:03:55 +00:00
Improved diffs 2018-03-14 02:08:50 +00:00			`for(let className of classesB) {`
			`if(!classesA.contains(className)) {`
			`classesA.add(className)`
			`}`
Improved diff 2017-07-19 02:47:32 +00:00			`}`
Improved diffs 2018-03-14 02:08:50 +00:00			`})`
Added list item status 2017-06-29 13:55:04 +00:00
Improved diff 2017-07-19 02:47:32 +00:00			`continue`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`}`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => elemA.setAttribute(attrib.name, attrib.value))`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`}`
Allow editing of settings 2017-06-24 00:10:04 +00:00
			`// Special case: Apply state of input elements`
Improved forum navigation 2017-06-26 01:57:29 +00:00			`if(elemA !== document.activeElement && elemA instanceof HTMLInputElement && elemB instanceof HTMLInputElement) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`this.mutations.queue(() => {`
			`(elemA as HTMLInputElement).value = (elemB as HTMLInputElement).value`
			`})`
Allow editing of settings 2017-06-24 00:10:04 +00:00			`}`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`}`

			`Diff.childNodes(a, b)`
			`}`
			`}`
Heavily improved forum readability 2017-06-20 13:46:49 +00:00			`}`