list keying

Author: tombl

src/html.d.ts

@@ -1,12 +1,12 @@
-import type { BoundTemplateInstance, CustomPartConstructor, Displayable, /*Key,*/ Renderable } from './types.ts'
+import type { BoundTemplateInstance, CustomPartConstructor, Displayable, Key, Renderable } from './types.ts'
 
 export { CustomPartConstructor as CustomPart, Displayable, Renderable }
 
 export function html(
 	statics: TemplateStringsArray,
 	...dynamics: Array<Displayable | CustomPartConstructor>
 ): BoundTemplateInstance
-// export function keyed<T extends Displayable & object>(value: T, key: Key): T
+export function keyed<T extends Displayable & object>(value: T, key: Key): T
 export function invalidate(renderable: Renderable): Promise<void>
 export function onUnmount(renderable: Renderable, callback: () => void): void
 

src/html.js

@@ -3,7 +3,7 @@
  * @typedef {import('./types.ts').Displayable} Displayable
  * @typedef {import('./types.ts').Renderable} Renderable
  * @typedef {import('./types.ts').CompiledTemplate} CompiledTemplate
- * @_typedef {import('./types.ts').Key} Key
+ * @typedef {import('./types.ts').Key} Key
  * @typedef {import('./types.ts').CustomPartConstructor} CustomPartConstructor
  * @typedef {import('./types.ts').CustomPartInstance} CustomPartInstance
  */
@@ -136,7 +136,7 @@ class BoundTemplateInstance {
 }
 
 export class Root {
-	// /** @type {Key | undefined} */ _key
+	/** @type {Key | undefined} */ _key
 
 	constructor(span) {
 		this.span = span
@@ -381,6 +381,13 @@ export function onUnmount(renderable, callback) {
 	}
 }
 
+const keys = new WeakMap()
+export function keyed(renderable, key) {
+	if (keys.has(renderable)) throw new Error('renderable already has a key')
+	keys.set(renderable, key)
+	return renderable
+}
+
 /** @implements {Part} */
 class ChildPart {
 	#childIndex
@@ -476,82 +483,60 @@ class ChildPart {
 			let i = 0
 			let offset = this.#span.end
 			for (const item of value) {
-				const root = (this.#roots[i] ??= new Root(new Span(this.#span.parentNode, offset, offset)))
+				// @ts-expect-error -- WeakMap lookups of non-objects always return undefined, which is fine
+				const key = keys.get(item) ?? item
+
+				if (key !== undefined) {
+					let first = this.#roots[i]
+					let i1 = i
+					if (first?._key !== key) {
+						let 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)
+
+							// swap the contents of the spans
+							const content1 = second.span.extractContents()
+							const content2 = first.span.extractContents()
+							second.span.insertNode(content2)
+							first.span.insertNode(content1)
+
+							// swap the spans back
+							;[first.span, second.span] = [second.span, first.span]
+
+							// 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)))
 				root.render(item)
+				// console.log(offset, root.span.end)
 				offset = root.span.end
-				i++
-
-				// @_ts-expect-error -- WeakMap lookups of non-objects always return undefined, which is fine
-				// const key = keys.get(item) ?? item
-
-				// 	if (key !== undefined) {
-				// 		let first = this.#roots[i]
-				// 		let i1 = i
-				// 		if (first?._key !== key) {
-				// 			let 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]
-				// 				}
-
-				// 				// swap the contents of the spans
-				// 				const content1 = second.span.extractContents()
-				// 				const content2 = first.span.extractContents()
-				// 				second.span.insertNode(content2)
-				// 				first.span.insertNode(content1)
-
-				// 				// swap the spans back
-				// 				;[first.span, second.span] = [second.span, first.span]
-
-				// 				// 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)))
-				// 	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.
-				// 	if (key !== undefined) root._key = key
-				// }
-
-				// // and now remove excess roots if the iterable has shrunk.
-				// console.log([...this.#roots])
-				// const extra = this.#roots.splice(i)
-				// this.#roots.length = i
-				// // extra.sort((a, b) => b.span.start - a.span.start)
-				// extra.reverse()
-				// for (const root of extra) {
-				// 	console.log(
-				// 		'detach',
-				// 		[...root.span.parentNode.childNodes],
-				// 		root.span.start,
-				// 		root.span.end,
-				// 		root._instance?.template._content.textContent,
-				// 		[...root.span],
-				// 	)
-				// 	root.detach()
-				// 	root.span.deleteContents()
-				// 	console.log('after detach', [...root.span.parentNode.childNodes], root.span.start, root.span.end)
+
+				// TODO: make this a weak relationship, because if key is collected, the comparison will always be false.
+				if (key !== undefined) root._key = key
 			}
 
 			// and now remove excess roots if the iterable has shrunk.
 			while (this.#roots.length > i) {
-				const root = /** @type {Root} */ (this.#roots.pop())
+				const root = this.#roots.pop()
+				assert(root)
 				root.detach()
 				root.span.deleteContents()
 			}
@@ -578,6 +563,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
 			} else {
 				this.#span.deleteContents()

src/types.ts

@@ -11,7 +11,7 @@ export declare class BoundTemplateInstance {
 	#private
 }
 
-// export type Key = string | number | bigint | boolean | symbol | object | null
+export type Key = string | number | bigint | boolean | symbol | object | null
 
 export declare class Span {
 	parentNode: Node

test/list-reorder-explicit-keyed.ts

@@ -1,11 +1,7 @@
-import { Root, html } from 'dhtml'
+import { Root, html, keyed } from 'dhtml'
 import { expect, test } from 'vitest'
 
-function keyed<T>(renderable: T, _key: unknown) {
-	return renderable
-}
-
-test.todo('list-reorder-explicit-keyed', () => {
+test('list-reorder-explicit-keyed', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)
 

test/list-reorder-implicit-keyed-renderable.ts

@@ -1,7 +1,7 @@
 import { Root, html } from 'dhtml'
 import { expect, test } from 'vitest'
 
-test.todo('list-reorder-implicit-keyed-renderable', () => {
+test('list-reorder-implicit-keyed-renderable', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)
 

test/list-reorder-implicit-keyed-resize.ts

@@ -1,7 +1,7 @@
 import { Root, html } from 'dhtml'
 import { expect, test } from 'vitest'
 
-test.todo('list-reorder-implicit-keyed-resize', () => {
+test('list-reorder-implicit-keyed-resize', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)
 

test/list-reorder-implicit-keyed.ts

@@ -1,7 +1,7 @@
 import { Root, html } from 'dhtml'
 import { expect, test } from 'vitest'
 
-test.todo('list-reorder-implicit-keyed', () => {
+test('list-reorder-implicit-keyed', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)
 

test/list-reorder-unkeyed.ts

@@ -1,7 +1,7 @@
 import { Root, html } from 'dhtml'
 import { expect, test } from 'vitest'
 
-test.todo('list-reorder-unkeyed', () => {
+test('list-reorder-unkeyed', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)
 

test/list-shift.ts

@@ -1,7 +1,7 @@
 import { Root, html } from 'dhtml'
 import { expect, test } from 'vitest'
 
-test.todo('list-shift', () => {
+test('list-shift', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)
 

test/list-swap.ts

@@ -1,7 +1,7 @@
 import { Root, html } from 'dhtml'
 import { expect, test } from 'vitest'
 
-test.todo('list-swap', () => {
+test('list-swap', () => {
 	const root = document.createElement('div')
 	const r = Root.appendInto(root)