scripts/Diff.ts

import MutationQueue from "./MutationQueue"

// Diff provides diffing utilities to morph existing DOM elements
// into the target HTML string.
//
// Example:
// Diff.innerHTML(body, "<div>This is my new content</div>")
//
// Whatever contents will be in the body, they will be re-used and morphed
// into the new DOM defined by a simple HTML string. This is useful for
// Single Page Applications that use server rendered content. The server
// responds with the pre-rendered HTML and we can simply morph our current
// contents into the next page.
export default class Diff {
	static persistentClasses = new Set<string>()
	static persistentAttributes = new Set<string>()
	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) {
		const container = document.createElement("main")
		container.innerHTML = html

		return new Promise((resolve, _) => {
			Diff.childNodes(aRoot, container)

			this.mutations.wait(() => {
				resolve(null)
			})
		})
	}

	// 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, _) => {
			const rootContainer = document.createElement("html")
			rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")

			Diff.childNodes(aRoot.getElementsByTagName("body")[0], rootContainer.getElementsByTagName("body")[0])

			this.mutations.wait(() => {
				resolve(null)
			})
		})
	}

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

		for(let i = 0; i < numNodes; i++) {
			const 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
			}

			const 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) {
				const elemA = a as HTMLElement
				const elemB = b as HTMLElement

				const removeAttributes: Attr[] = []

				for(const attrib of elemA.attributes) {
					if(attrib.specified) {
						if(!elemB.hasAttribute(attrib.name) && !Diff.persistentAttributes.has(attrib.name)) {
							removeAttributes.push(attrib)
						}
					}
				}

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

				for(const attrib of elemB.attributes) {
					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") {
						const classesA = elemA.classList
						const classesB = elemB.classList
						const removeClasses: string[] = []

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

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

							for(const 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
					})
				}
			}

			// Never diff the contents of web components
			if(a.nodeName.includes("-")) {
				continue
			}

			// Child nodes
			Diff.childNodes(a, b)
		}
	}
}
Use default export 2018-06-03 02:11:19 +00:00			`import MutationQueue from "./MutationQueue"`
Improved diffs 2018-03-14 02:08:50 +00:00
Added Diff module explanation 2018-06-03 02:37:32 +00:00			`// Diff provides diffing utilities to morph existing DOM elements`
			`// into the target HTML string.`
			`//`
			`// Example:`
			`// Diff.innerHTML(body, "<div>This is my new content</div>")`
			`//`
			`// Whatever contents will be in the body, they will be re-used and morphed`
			`// into the new DOM defined by a simple HTML string. This is useful for`
Minor wording fix 2018-06-03 02:39:18 +00:00			`// Single Page Applications that use server rendered content. The server`
Added Diff module explanation 2018-06-03 02:37:32 +00:00			`// responds with the pre-rendered HTML and we can simply morph our current`
			`// contents into the next page.`
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>()`
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.`
Use time element 2021-11-23 12:57:43 +00:00			`static innerHTML(aRoot: HTMLElement, html: string) {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const container = document.createElement("main")`
Don't reuse diff container 2018-04-07 10:34:41 +00:00			`container.innerHTML = html`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Removed unused parameters in scripts 2019-04-22 09:06:50 +00:00			`return new Promise((resolve, _) => {`
Don't reuse diff container 2018-04-07 10:34:41 +00:00			`Diff.childNodes(aRoot, container)`
Use time element 2021-11-23 12:57:43 +00:00
			`this.mutations.wait(() => {`
			`resolve(null)`
			`})`
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) {`
Removed unused parameters in scripts 2019-04-22 09:06:50 +00:00			`return new Promise((resolve, _) => {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const rootContainer = document.createElement("html")`
Don't reuse diff container 2018-04-07 10:34:41 +00:00			`rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Don't reuse diff container 2018-04-07 10:34:41 +00:00			`Diff.childNodes(aRoot.getElementsByTagName("body")[0], rootContainer.getElementsByTagName("body")[0])`
Use time element 2021-11-23 12:57:43 +00:00
			`this.mutations.wait(() => {`
			`resolve(null)`
			`})`
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) {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const aChild = [...aRoot.childNodes]`
			`const bChild = [...bRoot.childNodes]`
			`const 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++) {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const 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`
			`}`

Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const 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) {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const elemA = a as HTMLElement`
			`const elemB = b as HTMLElement`
Improved forum navigation 2017-06-26 01:57:29 +00:00
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const removeAttributes: Attr[] = []`
Slightly improved diff performance 2017-11-10 07:41:45 +00:00
Use time element 2021-11-23 12:57:43 +00:00			`for(const attrib of elemA.attributes) {`
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(() => {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`for(const attr of removeAttributes) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`elemA.removeAttributeNode(attr)`
			`}`
			`})`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00
Use time element 2021-11-23 12:57:43 +00:00			`for(const attrib of elemB.attributes) {`
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") {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`const classesA = elemA.classList`
			`const classesB = elemB.classList`
			`const removeClasses: string[] = []`
Improved diff 2017-07-19 02:47:32 +00:00
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`for(const className of classesA) {`
Improved diff 2017-07-19 02:47:32 +00:00			`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(() => {`
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`for(const className of removeClasses) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`classesA.remove(className)`
			`}`
Fixed class diffing 2017-10-08 07:03:55 +00:00
Use const variables when applicable 2019-11-17 09:25:14 +00:00			`for(const className of classesB) {`
Improved diffs 2018-03-14 02:08:50 +00:00			`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			`}`

Use web components for SVG icons 2019-08-30 07:04:28 +00:00			`// Never diff the contents of web components`
			`if(a.nodeName.includes("-")) {`
			`continue`
			`}`

			`// Child nodes`
Added a basic DOM diff algorithm 2017-06-21 16:44:20 +00:00			`Diff.childNodes(a, b)`
			`}`
			`}`
Fixed a few more linter errors 2019-11-17 09:44:30 +00:00			`}`