span: migrate to start/end node

Author: tombl

src/html.js

@@ -56,25 +56,31 @@ const flash =
 		: undefined
 
 class Span {
+	/**
+	 * @param {Node} parentNode
+	 * @param {Node | null} start
+	 * @param {Node | null} end
+	 */
 	constructor(parentNode, start, end) {
+		assert(start === null || start.parentNode === parentNode)
+		assert(end === null || end.parentNode === parentNode)
+
 		this.parentNode = parentNode
 		this.start = start
 		this.end = end
 	}
+
 	deleteContents() {
 		// optimization for clearing when we own the entire parent.
-		if (this.start === 0 && this.end >= this.parentNode.childNodes.length) {
-			if (DEV && this.end !== this.parentNode.childNodes.length) console.warn('end is past the end of the parent')
+		if (this.parentNode.firstChild === this.start && this.end === null) {
 			this.parentNode.textContent = ''
-			this.end = 0
+			this.start = null
 			return
 		}
-		while (this.end > this.start) {
-			const node = this.parentNode.childNodes[--this.end]
-			if (flash && node.getBoundingClientRect) {
+		for (const node of this) {
+			if (flash && isElement(node)) {
 				const box = node.getBoundingClientRect()
-				const cloned = node.cloneNode(true)
-				node.remove()
+				const cloned = /** @type {HTMLElement} */ (node.cloneNode(true))
 				Object.assign(cloned.style, {
 					position: 'absolute',
 					top: box.top + 'px',
@@ -85,35 +91,37 @@ class Span {
 				})
 				document.body.appendChild(cloned)
 				Promise.resolve(flash(cloned, 255, 0, 0)).then(() => cloned.remove())
-			} else {
-				node.remove()
 			}
+			this.parentNode.removeChild(node)
 		}
+		this.start = this.end = this.start?.previousSibling ?? null
 	}
 	insertNode(node) {
-		const length = isDocumentFragment(node) ? node.childNodes.length : 1
-		this.parentNode.insertBefore(node, this.parentNode.childNodes[this.end] ?? null)
-		this.end += length
+		if (isDocumentFragment(node) && node.childNodes.length === 0) return
+		this.start ??= isDocumentFragment(node) ? node.firstChild : node
+		this.parentNode.insertBefore(node, this.end)
 		if (flash) for (const node of this) flash(node, 0, 255, 0)
 	}
 	*[Symbol.iterator]() {
-		for (let i = this.start; i < this.end; i++)
-			yield (console.log(this.parentNode.childNodes[i]), this.parentNode.childNodes[i])
+		for (let node = this.start; node !== this.end && node !== null; node = node.nextSibling) yield node
 	}
 	extractContents() {
 		const fragment = document.createDocumentFragment()
-		while (this.end > this.start) fragment.prepend(this.parentNode.childNodes[--this.end])
+		for (const node of this) fragment.appendChild(node)
+		this.start = this.end = null
 		return fragment
 	}
 	get length() {
-		return this.end - this.start
+		let length = 0
+		for (const _ of this) length++
+		return length
 	}
 }
 
 if (DEV) {
 	Span.prototype.toString = function () {
 		let result = ''
-		for (const node of this) result += node.outerHTML
+		for (const node of this) result += /** @type {Element} */ (node).outerHTML ?? node
 		return result
 	}
 }
@@ -143,12 +151,11 @@ export class Root {
 	}
 
 	static appendInto(parent) {
-		return new Root(new Span(parent, parent.childNodes.length, parent.childNodes.length))
+		return new Root(new Span(parent, parent.lastChild, null))
 	}
 
 	static replace(node) {
-		const index = [...node.parentNode.childNodes].indexOf(node)
-		return new Root(new Span(node.parentNode, index, index + 1))
+		return new Root(new Span(node.parentNode, node, node.nextSibling))
 	}
 
 	render(value) {
@@ -271,7 +278,7 @@ function compileTemplate(statics) {
 			// by splitting the text starting from the end, we only have to split the original node.
 			for (const match of [...node.data.matchAll(DYNAMIC_GLOBAL)].reverse()) {
 				node.splitText(match.index + match[0].length)
-				const dyn = new Comment()
+				const dyn = DEV ? new Comment(`dyn-$${match[1]}`) : new Comment()
 				node.splitText(match.index).replaceWith(dyn)
 				nodes.push([dyn, parseInt(match[1])])
 			}
@@ -399,10 +406,21 @@ class ChildPart {
 
 	#span
 	create(node, value) {
-		this.#span =
-			node instanceof Span
-				? new Span(node.parentNode, node.start + this.#childIndex, node.start + this.#childIndex + 1)
-				: new Span(node, this.#childIndex, this.#childIndex + 1)
+		assert(this.#childIndex !== undefined)
+
+		if (node instanceof Span) {
+			let child = node.start
+			assert(child, 'expected a start node')
+			for (let i = 0; i < this.#childIndex; i++) {
+				assert(child.nextSibling !== null)
+				assert(child.nextSibling !== node.end)
+				child = child.nextSibling
+			}
+			this.#span = new Span(node.parentNode, child, child.nextSibling)
+		} else {
+			const child = node.childNodes[this.#childIndex]
+			this.#span = new Span(node, child, child.nextSibling)
+		}
 
 		this.#childIndex = undefined // we only need this once.
 
@@ -490,17 +508,9 @@ class ChildPart {
 					let first = this.#roots[i]
 					let i1 = i
 					if (first?._key !== key) {
-						let i2 = this.#roots.findIndex(root => root?._key === key)
+						const i2 = this.#roots.findIndex(root => root?._key === key)
 						if (i2 !== -1) {
-							let second = this.#roots[i2]
-
-							if (second.span.start < first.span.start) {
-								// first must refer to the lower index.
-								;[first, second] = [second, first]
-								;[i1, i2] = [i2, i1]
-							}
-							assert(first.span.start < second.span.start)
-							assert(i1 < i2)
+							const second = this.#roots[i2]
 
 							// swap the contents of the spans
 							const content1 = second.span.extractContents()
@@ -514,19 +524,12 @@ class ChildPart {
 							// swap the roots
 							this.#roots[i1] = second
 							this.#roots[i2] = first
-
-							const difference = second.span.length - first.span.length
-							for (let j = i1 + 1; j <= i2; j++) {
-								this.#roots[j].span.start += difference
-								this.#roots[j].span.end += difference
-							}
 						}
 					}
 				}
 
-				const root = (this.#roots[i++] ??= new Root(new Span(this.#span.parentNode, offset, offset)))
+				const root = (this.#roots[i++] ??= new Root(new Span(this.#span.parentNodeNode, offset, offset)))
 				root.render(item)
-				// console.log(offset, root.span.end)
 				offset = root.span.end
 
 				// TODO: make this a weak relationship, because if key is collected, the comparison will always be false.
@@ -564,8 +567,8 @@ class ChildPart {
 			if (this.#value != null && value !== null && !(this.#value instanceof Node) && !(value instanceof Node)) {
 				// we previously rendered a string, and we're rendering a string again.
 				assert(this.#span.length === 1)
-				assert(this.#span.parentNode.childNodes[this.#span.start] instanceof Text)
-				this.#span.parentNode.childNodes[this.#span.start].data = value
+				assert(this.#span.start instanceof Text)
+				this.#span.start.data = value
 			} else {
 				this.#span.deleteContents()
 				if (value !== null) this.#span.insertNode(value instanceof Node ? value : new Text(value.toString()))

src/types.ts

@@ -15,16 +15,8 @@ export type Key = string | number | bigint | boolean | symbol | object | null
 
 export declare class Span {
 	parentNode: Node
-	start: number
-	end: number
-
-	constructor(parentNode: Node, start: number, end: number)
-
-	deleteContents(): void
-	insertNode(node: Node): void
-	[Symbol.iterator](): IterableIterator<Node>
-	extractContents(): DocumentFragment
-	get length(): number
+	start: Node | null
+	end: Node | null
 }
 
 export interface Part {