mithril-lynx 2.6.2 → 3.0.0

package/test/list.test.ts

@@ -1,151 +1,455 @@
-import { describe, expect, it } from "@rstest/core";
-import m from "mithril";
-import renderFactory from "mithril-runtime/render/render.js";
+import { afterEach, describe, expect, it, rstest } from "@rstest/core";
+import m from "mithril-runtime";
 import { createPatchApplier } from "../src/apply-patch.js";
-import { createVirtualBackend } from "../src/backends/virtual-backend.js";
-import { createLynxDocument } from "../src/fake-dom.js";
-import { renderListCell } from "../src/list-cell.js";
-import { Op } from "../src/patch-protocol.js";
-
-// Op.CreateList end-to-end. A cell's own content is computed on the
-// BACKGROUND thread (list-cell.js's renderListCell(), through the app's own
-// document/render — no separate render pipeline) and only replayed on the
-// main thread (list-support.js) — see
-// docs/native-papi/papi-06-virtualized-lists.md in mithril-lynx-ui. This
-// test drives both halves directly: a background document renders each item
-// into cells, then a main-thread applier replays Op.CreateList/
-// Op.SetListItems with those cells, exactly like mithril-lynx-ui's own List
-// component does end to end.
-
-function requestCell(listHandle: any, index: number, opId = 1) {
-	const listId = __GetElementUniqueID(listHandle);
-	return listHandle.componentAtIndex(listHandle, listId, index, opId);
+import { renderApp } from "../src/background.js";
+import { LIST_ATTRIBUTES } from "../src/list-attributes.js";
+import { unregister } from "../src/mount-redraw.js";
+import { forEachOp, Op } from "../src/patch-protocol.js";
+
+// `<list>` / `<list-item>` as ordinary Mithril elements, end to end: the
+// background thread renders and diffs them like any other element, the main
+// thread (list-runtime.js) turns list-child ops into `update-list-info` and
+// attaches items only when native asks (componentAtIndex). The testing
+// environment records every `update-list-info` value as a JSON array on the
+// list element, and keeps the callbacks passed to __CreateList /
+// __UpdateListCallbacks on the element itself.
+
+type Info = { insertAction: any[]; removeAction: number[]; updateAction: any[] };
+
+const realCreateList = () => (globalThis as any).__CreateList;
+let restoreCreateList: (() => void) | null = null;
+
+afterEach(() => {
+	restoreCreateList?.();
+	restoreCreateList = null;
+});
+
+/** Mounts `view` through the real renderApp + a main-thread applier. */
+function mount(view: () => unknown) {
+	// Capture the 5th __CreateList argument (componentAtIndexes), which the
+	// testing environment does not keep on the element. Re-installed after
+	// every switch to the main thread, which re-injects its globals.
+	const batchCallbacks: Function[] = [];
+	let original: any = null;
+	const toMainThread = () => {
+		lynxTestingEnv.switchToMainThread();
+		const current = realCreateList();
+		if (current.__captures) return;
+		original = current;
+		const wrapper: any = (...args: any[]) => {
+			batchCallbacks.push(args[4]);
+			return current(...args);
+		};
+		wrapper.__captures = true;
+		(globalThis as any).__CreateList = wrapper;
+	};
+	restoreCreateList = () => {
+		lynxTestingEnv.switchToMainThread();
+		if (original != null) (globalThis as any).__CreateList = original;
+	};
+	toMainThread();
+	const pageId = __GetElementUniqueID(__CreatePage());
+	let router: ((event: any) => void) | null = null;
+	const applier = createPatchApplier(pageId, {
+		onEvent: (id, type, payload) => {
+			lynxTestingEnv.switchToBackgroundThread();
+			router?.({ data: { id, type, payload } });
+			lynxTestingEnv.switchToMainThread();
+		},
+	});
+	applier.registerPageRoot(__CreateView(pageId));
+
+	lynxTestingEnv.switchToBackgroundThread();
+	unregister();
+	const patches: unknown[][] = [];
+	const app = renderApp({
+		root: view,
+		sendPatch: (ops) => patches.push(ops),
+		subscribeEvents: (handler) => {
+			router = handler;
+		},
+	});
+
+	let applied = 0;
+	/** Applies pending patches on the main thread and returns their ops.
+	 * `beforeApply` runs on the main thread right before (to install spies:
+	 * switching threads re-injects the main-thread globals). */
+	const flush = (beforeApply?: () => void) => {
+		const fresh = patches.slice(applied);
+		applied = patches.length;
+		toMainThread();
+		beforeApply?.();
+		for (const ops of fresh) applier.applyPatch(ops);
+		return fresh;
+	};
+	const redraw = (beforeApply?: () => void) => {
+		lynxTestingEnv.switchToBackgroundThread();
+		app.redraw();
+		return flush(beforeApply);
+	};
+	flush();
+	const listNode = () => findByTag(app.document, "list");
+	const listHandle = () => applier.getHandle(listNode()._id) as any;
+	const listID = () => __GetElementUniqueID(listHandle());
+	return {
+		app,
+		applier,
+		redraw,
+		flush,
+		listNode,
+		listHandle,
+		/** Every update-list-info the list received, in order. */
+		infos: (): Info[] => JSON.parse(listHandle().getAttribute("update-list-info") ?? "[]"),
+		lastInfo: (): Info => {
+			const all = JSON.parse(listHandle().getAttribute("update-list-info") ?? "[]");
+			return all[all.length - 1];
+		},
+		requestCell: (index: number) => listHandle().componentAtIndex(listHandle(), listID(), index, 1, false),
+		requestCells: (indexes: number[]) =>
+			batchCallbacks[batchCallbacks.length - 1](listHandle(), listID(), indexes, indexes.map((_, i) => i + 1), false, false),
+		releaseCell: (sign: number) => listHandle().enqueueComponent(listHandle(), listID(), sign),
+		/** item-key of each list-item currently attached natively, in tree order. */
+		attachedKeys: () => Array.from(listHandle().children as any[]).map((child: any) => child.getAttribute("item-key")),
+		itemHandle: (key: string) => applier.getHandle(findItem(app.document, key)._id) as any,
+	};
 }
 
-function releaseCell(listHandle: any, sign: unknown) {
-	const listId = __GetElementUniqueID(listHandle);
-	listHandle.enqueueComponent(listHandle, listId, sign);
+function findByTag(node: any, tag: string): any {
+	if (node.tag === tag) return node;
+	for (const child of node._children ?? []) {
+		const found = findByTag(child, tag);
+		if (found) return found;
+	}
+	return null;
 }
 
-function textOf(node: any): string {
-	if (node == null) return "";
-	let out = "";
-	for (let child = node.firstChild; child != null; child = child.nextSibling) {
-		out += child.nodeType === 3 ? child.nodeValue : textOf(child);
+function findItem(node: any, key: string): any {
+	if (node.tag === "list-item" && node._typedValues?.["item-key"] === key) return node;
+	for (const child of node._children ?? []) {
+		const found = findItem(child, key);
+		if (found) return found;
 	}
-	return out;
+	return null;
 }
 
-/** Stands in for mithril-lynx-ui's <List>: one persistent background
- * document + render instance, reused across calls — see list-cell.js's own
- * header for why callers keep one of these per list, not one per cell. */
-function makeCellSource(renderItem: (item: any, index: number) => unknown) {
-	const document = createLynxDocument(createVirtualBackend());
-	const render = renderFactory();
-	return {
-		document,
-		buildCells: (items: unknown[]) => items.map((item, index) => renderListCell(document, render, () => {}, renderItem, item, index)),
-	};
+function listView(keys: () => string[], itemAttrs: (key: string) => object = () => ({}), listAttrs: () => object = () => ({})) {
+	return () =>
+		m(
+			"list",
+			Object.assign({ "list-type": "single", "span-count": 1, "scroll-orientation": "vertical" }, listAttrs()),
+			keys().map((key) => m("list-item", Object.assign({ key, "item-key": key }, itemAttrs(key)), m("text", key))),
+		);
 }
 
-function setupList() {
-	lynxTestingEnv.switchToMainThread();
-	const pageId = __GetElementUniqueID(__CreatePage());
-	const applier = createPatchApplier(pageId);
-	applier.registerPageRoot(__CreateView(pageId));
-	applier.applyPatch([Op.CreateList, 1, "vertical", "single", 1]);
-	const listHandle = applier.getHandle(1) as any;
-	return { applier, listHandle };
+/** Replays one update-list-info onto a key array the way native does. */
+function applyInfo(keys: string[], info: Info): string[] {
+	const out = keys.slice();
+	for (const index of info.removeAction.slice().sort((a, b) => b - a)) out.splice(index, 1);
+	for (const action of info.insertAction.slice().sort((a, b) => a.position - b.position)) out.splice(action.position, 0, action["item-key"]);
+	return out;
 }
 
-function setCells(applier: ReturnType<typeof createPatchApplier>, cells: unknown[]) {
-	applier.applyPatch([Op.SetListItems, 1, cells]);
+function setAttributeOps(patches: unknown[][]) {
+	const out: Record<string, unknown> = {};
+	for (const ops of patches) {
+		forEachOp(ops, (opcode, args) => {
+			if (opcode === Op.SetAttribute) out[args[1] as string] = args[2];
+		});
+	}
+	return out;
 }
 
-describe("Op.CreateList (native virtualized list support)", () => {
-	it("renders real content per cell from ops the background thread already computed", () => {
-		const { buildCells } = makeCellSource((item: string, index: number) => m("text", {}, `${index}:${item}`));
-		const { applier, listHandle } = setupList();
-		setCells(applier, buildCells(["a", "b", "c"]));
+describe("<list> attributes", () => {
+	it("every documented <list> attribute reaches native with its raw type", () => {
+		const values: Record<string, unknown> = {
+			"list-type": "flow",
+			"span-count": 2,
+			"scroll-orientation": "horizontal",
+			"enable-scroll": false,
+			"enable-nested-scroll": false,
+			sticky: true,
+			"sticky-offset": 50,
+			bounces: false,
+			"initial-scroll-index": 3,
+			"need-visible-item-info": true,
+			"upper-threshold-item-count": 2,
+			"lower-threshold-item-count": 4,
+			"scroll-event-throttle": 100,
+			"item-snap": { factor: 0.5, offset: -20 },
+			"update-animation": "default",
+			"need-layout-complete-info": true,
+			"layout-id": 7,
+			"preload-buffer-count": 5,
+			"scroll-bar-enable": false,
+			"harmony-scroll-edge-effect": false,
+			"experimental-recycle-sticky-item": false,
+		};
+		expect(Object.keys(values).sort()).toEqual([...LIST_ATTRIBUTES].sort());
 
-		requestCell(listHandle, 0);
-		requestCell(listHandle, 1);
-		const cellWrapper = listHandle.children[1]; // second appended cell -> index 1
-		expect(textOf(cellWrapper)).toBe("1:b");
+		const { listHandle } = mount(() => m("list", values));
+		for (const [name, value] of Object.entries(values)) {
+			const stored = listHandle().getAttribute(name);
+			expect([name, stored]).toEqual([name, typeof value === "string" ? value : JSON.stringify(value)]);
+		}
 	});
 
-	it("recycles a cell for a different index, and its content updates to match", () => {
-		const { buildCells } = makeCellSource((item: string, index: number) => m("text", {}, `${index}:${item}`));
-		const { applier, listHandle } = setupList();
-		setCells(applier, buildCells(["a", "b", "c", "d"]));
+	it("false is sent as false (not dropped), and clearing a prop removes it", () => {
+		let attrs: Record<string, unknown> = { bounces: false };
+		const { listHandle, redraw } = mount(() => m("list", attrs));
+		expect(listHandle().getAttribute("bounces")).toBe("false");
 
-		const signA = requestCell(listHandle, 0);
-		const wrapperA = listHandle.children[0];
-		expect(textOf(wrapperA)).toBe("0:a");
+		attrs = {};
+		redraw();
+		expect(listHandle().getAttribute("bounces")).toBeNull();
+	});
+
+	it("an unchanged object attribute is not re-sent on redraw", () => {
+		const { redraw } = mount(() => m("list", { "item-snap": { factor: 0, offset: 0 } }));
+		expect(setAttributeOps(redraw())).toEqual({});
+	});
+});
+
+describe("<list-item> platform info and update-list-info", () => {
+	it("the initial render inserts every item with its platform info", () => {
+		const { lastInfo, itemHandle } = mount(
+			listView(
+				() => ["a", "b", "c"],
+				(key) => (key === "b" ? { "full-span": true, "sticky-top": true, "estimated-main-axis-size-px": 80, "reuse-identifier": "header", recyclable: false } : {}),
+			),
+		);
+		expect(lastInfo()).toEqual({
+			insertAction: [
+				{ position: 0, type: "list-item", "item-key": "a" },
+				{ position: 1, type: "header", "item-key": "b", "full-span": true, "sticky-top": true, "estimated-main-axis-size-px": 80, "reuse-identifier": "header", recyclable: false },
+				{ position: 2, type: "list-item", "item-key": "c" },
+			],
+			removeAction: [],
+			updateAction: [],
+		});
+		// Real attributes on the element too — except the list-only virtual ones.
+		expect(itemHandle("b").getAttribute("full-span")).toBe("true");
+		expect(itemHandle("b").getAttribute("reuse-identifier")).toBeNull();
+		expect(itemHandle("b").getAttribute("recyclable")).toBeNull();
+	});
+
+	it("covers every documented <list-item> attribute", () => {
+		const all = {
+			"full-span": true,
+			"sticky-top": true,
+			"sticky-bottom": false,
+			"estimated-height": 40,
+			"estimated-height-px": 41,
+			"estimated-main-axis-size-px": 42,
+			"reuse-identifier": "r",
+			recyclable: false,
+		};
+		const { lastInfo } = mount(listView(() => ["a"], () => all));
+		expect(lastInfo().insertAction[0]).toEqual(Object.assign({ position: 0, type: "r", "item-key": "a" }, all));
+	});
+
+	it("a keyed insert and remove in the middle produce exactly that", () => {
+		let keys = ["a", "b", "c"];
+		const { redraw, lastInfo } = mount(listView(() => keys));
+		keys = ["a", "x", "c"];
+		redraw();
+		expect(lastInfo()).toEqual({
+			insertAction: [{ position: 1, type: "list-item", "item-key": "x" }],
+			removeAction: [1],
+			updateAction: [],
+		});
+	});
+
+	it("reorders, inserts and removes replay natively into the new key order", () => {
+		let keys = ["a", "b", "c", "d", "e"];
+		const { redraw, lastInfo } = mount(listView(() => keys));
+		const scenarios = [
+			["e", "a", "b", "c", "d"],
+			["b", "e", "a", "d"],
+			["z", "d", "a", "y", "b", "e"],
+			[],
+			["q", "r"],
+		];
+		for (const next of scenarios) {
+			const before = keys;
+			keys = next;
+			redraw();
+			expect(applyInfo(before, lastInfo())).toEqual(next);
+		}
+	});
+
+	it("a platform-info change on an existing item is an updateAction", () => {
+		let wide = false;
+		const { redraw, lastInfo, infos } = mount(listView(() => ["a", "b"], (key) => (key === "b" && wide ? { "full-span": true } : {})));
+		const count = infos().length;
+		wide = true;
+		redraw();
+		expect(infos().length).toBe(count + 1);
+		expect(lastInfo()).toEqual({
+			insertAction: [],
+			removeAction: [],
+			updateAction: [{ "item-key": "b", "full-span": true, from: 1, to: 1, type: "list-item", flush: false }],
+		});
+	});
 
-		releaseCell(listHandle, signA);
-		const signD = requestCell(listHandle, 3);
+	it("a redraw that changes nothing about the items sends no update-list-info", () => {
+		const { redraw, infos } = mount(listView(() => ["a", "b"]));
+		const count = infos().length;
+		redraw();
+		expect(infos().length).toBe(count);
+	});
+});
 
-		// Recycled: the SAME sign/wrapper comes back, now showing the new index's content.
-		expect(signD).toBe(signA);
-		expect(textOf(wrapperA)).toBe("3:d");
+describe("native callbacks", () => {
+	it("componentAtIndex attaches items in list order and returns their sign", () => {
+		const { requestCell, attachedKeys, itemHandle } = mount(listView(() => ["a", "b", "c"]));
+		expect(attachedKeys()).toEqual([]);
+		const sign = requestCell(2);
+		expect(sign).toBe(__GetElementUniqueID(itemHandle("c")));
+		requestCell(0);
+		expect(attachedKeys()).toEqual(["a", "c"]);
 	});
 
-	it("SetListItems with a larger array requests the newly available indices without error", () => {
-		const { buildCells } = makeCellSource((item: string, index: number) => m("text", {}, `${index}:${item}`));
-		const { applier, listHandle } = setupList();
+	it("enqueueComponent detaches an item and it can be attached again", () => {
+		const { requestCell, releaseCell, attachedKeys } = mount(listView(() => ["a", "b"]));
+		const sign = requestCell(0);
+		requestCell(1);
+		releaseCell(sign);
+		expect(attachedKeys()).toEqual(["b"]);
+		requestCell(0);
+		expect(attachedKeys()).toEqual(["a", "b"]);
+	});
 
-		setCells(applier, buildCells(["a", "b"]));
-		expect(() => requestCell(listHandle, 1)).not.toThrow();
-		expect(() => requestCell(listHandle, 2)).toThrow(/cellIndex 2 out of range/);
+	it("componentAtIndexes attaches a batch", () => {
+		const { requestCells, attachedKeys } = mount(listView(() => ["a", "b", "c"]));
+		requestCells([1, 0]);
+		expect(attachedKeys()).toEqual(["a", "b"]);
+	});
 
-		setCells(applier, buildCells(["a", "b", "c"]));
-		expect(() => requestCell(listHandle, 2)).not.toThrow();
+	it("attached items that move are re-placed on the next callback", () => {
+		let keys = ["a", "b", "c"];
+		const { redraw, requestCell, attachedKeys } = mount(listView(() => keys));
+		requestCell(0);
+		requestCell(1);
+		requestCell(2);
+		keys = ["c", "a", "b"];
+		redraw();
+		requestCell(0);
+		expect(attachedKeys()).toEqual(["c", "a", "b"]);
 	});
 
-	it("SetListItems re-flushes an already-attached cell's content in place", () => {
-		const { buildCells } = makeCellSource((item: string, index: number) => m("text", {}, `${index}:${item}`));
-		const { applier, listHandle } = setupList();
-		setCells(applier, buildCells(["a", "b"]));
+	it("content updates reach an attached item", () => {
+		let label = "one";
+		const { redraw, requestCell, itemHandle } = mount(() =>
+			m("list", { "list-type": "single", "span-count": 1 }, [m("list-item", { key: "a", "item-key": "a" }, m("text", label))]),
+		);
+		requestCell(0);
+		label = "two";
+		redraw();
+		expect(itemHandle("a").textContent).toBe("two");
+	});
 
-		requestCell(listHandle, 0);
-		const wrapper = listHandle.children[0];
-		expect(textOf(wrapper)).toBe("0:a");
+	/** Removes "a" (on screen) and returns the list-related PAPI calls in order. */
+	function removeOnScreenItem(listAttrs: object) {
+		let keys = ["a", "b"];
+		const warn = rstest.spyOn(console, "warn").mockImplementation(() => {});
+		const app = mount(listView(() => keys, () => ({}), () => listAttrs));
+		warn.mockRestore();
+		const signA = app.requestCell(0);
+		app.requestCell(1);
+		const calls: string[] = [];
+		keys = ["b"];
+		app.redraw(() => {
+			const flush = (globalThis as any).__FlushElementTree;
+			const remove = (globalThis as any).__RemoveElement;
+			(globalThis as any).__FlushElementTree = (...args: any[]) => {
+				calls.push("flush");
+				return flush(...args);
+			};
+			(globalThis as any).__RemoveElement = (parent: any, child: any) => {
+				if (parent === app.listHandle()) calls.push("detach " + child.getAttribute("item-key"));
+				return remove(parent, child);
+			};
+		});
+		lynxTestingEnv.switchToBackgroundThread();
+		lynxTestingEnv.switchToMainThread();
+		return { ...app, calls, signA };
+	}
 
-		setCells(applier, buildCells(["z", "b"])); // same count, index 0's content changed
-		expect(textOf(wrapper)).toBe("0:z");
+	it("a removed on-screen item is detached only after the patch's update-list-info flush", () => {
+		// Verified on a real device (Android, Lynx Go): detaching before native
+		// processed the removeAction crashed (SIGSEGV after "[List] Fail to
+		// erase item holder"), and native never enqueues removed items, so not
+		// detaching left orphan children accumulating under the list.
+		const { calls, attachedKeys, releaseCell, signA } = removeOnScreenItem({});
+		expect(calls).toEqual(["flush", "detach a", "flush"]);
+		expect(attachedKeys()).toEqual(["b"]);
+		// A late enqueue for it (other native versions) is a harmless no-op.
+		releaseCell(signA);
+		expect(attachedKeys()).toEqual(["b"]);
 	});
 
-	it("a recycled cell is repositioned in the real tree to match its new index, not left where it was created", () => {
-		const { buildCells } = makeCellSource((item: string, index: number) => m("text", {}, `${index}:${item}`));
-		const { applier, listHandle } = setupList();
-		setCells(applier, buildCells(["a", "b", "c", "d"]));
+	it("with update-animation on, a removed on-screen item is left attached (detaching it crashes native)", () => {
+		const { calls, attachedKeys } = removeOnScreenItem({ "update-animation": "default" });
+		expect(calls).toEqual(["flush"]);
+		expect(attachedKeys()).toEqual(["a", "b"]);
+	});
+});
 
-		requestCell(listHandle, 0);
-		const signB = requestCell(listHandle, 1);
-		requestCell(listHandle, 2);
-		// Real tree order matches request order so far: a, b, c.
-		expect([listHandle.children[0], listHandle.children[1], listHandle.children[2]].map(textOf)).toEqual(["0:a", "1:b", "2:c"]);
+describe("lifecycle", () => {
+	it("list events reach the background handler", () => {
+		const received: unknown[] = [];
+		const { listHandle } = mount(() => m("list", { onscrolltolower: (e: any) => received.push(e.detail) }));
+		for (const listener of listHandle().__vanillaListeners.scrolltolower) listener({ detail: { scrollTop: 10 } });
+		expect(received).toEqual([{ scrollTop: 10 }]);
+	});
 
-		releaseCell(listHandle, signB); // b's wrapper goes to the recycle pool, still sitting in the middle of the tree
-		requestCell(listHandle, 3); // recycled for "d" — index 3 is after every other attached cell, so it belongs at the END
+	it("removed items run onremove", () => {
+		const removed: string[] = [];
+		let keys = ["a", "b"];
+		const Row = { view: (v: any) => m("text", v.attrs.k), onremove: (v: any) => removed.push(v.attrs.k) };
+		const { redraw } = mount(() => m("list", keys.map((k) => m("list-item", { key: k, "item-key": k }, m(Row, { k })))));
+		keys = ["b"];
+		redraw();
+		expect(removed).toEqual(["a"]);
+	});
 
-		const children = [listHandle.children[0], listHandle.children[1], listHandle.children[2]];
-		expect(children.map(textOf)).toEqual(["0:a", "2:c", "3:d"]); // not ["0:a", "3:d", "2:c"] — the bug this test guards against
+	it("removing the list neutralizes its native callbacks and releases its items", () => {
+		let show = true;
+		const { redraw, listHandle, applier } = mount(() => (show ? m("list", [m("list-item", { key: "a", "item-key": "a" }, m("text", "a"))]) : m("view")));
+		const handle = listHandle();
+		const listID = __GetElementUniqueID(handle);
+		show = false;
+		redraw();
+		expect(handle.componentAtIndex(handle, listID, 0, 1, false)).toBe(-1);
+		expect(applier.getHandle(3)).toBeUndefined();
 	});
 
-	it("a tap inside a cell dispatches through the background thread's own fake-dom node", () => {
-		const { document, buildCells } = makeCellSource(() =>
-			m("text", { ontap: () => { taps += 1; } }, "tap me"),
+	it("gesture worklets inside items are released with the list", () => {
+		const registrySize = () => Object.keys((globalThis as any).lynxWorkletImpl?._workletMap ?? {}).length;
+		let show = true;
+		lynxTestingEnv.switchToMainThread();
+		const before = registrySize();
+		const { redraw } = mount(() =>
+			show
+				? m("list", [
+						m(
+							"list-item",
+							{ key: "a", "item-key": "a", oncreate: (v: any) => v.dom.setGestureDetector("native", { mode: "claim" }) },
+							m("text", "a"),
+						),
+					])
+				: m("view"),
 		);
-		let taps = 0;
-		const { applier, listHandle } = setupList();
-		const cells = buildCells([{}]);
-		setCells(applier, cells);
-		requestCell(listHandle, 0);
-
-		const node = document.getNodeById((cells[0] as any).rootChildIds[0]);
-		node!.dispatchEvent({ type: "tap", currentTarget: node, preventDefault() {}, stopPropagation() {} });
-		expect(taps).toBe(1);
+		expect(registrySize()).toBe(before + 3);
+		show = false;
+		redraw();
+		expect(registrySize()).toBe(before);
+	});
+
+	it("dispose() neutralizes every list", () => {
+		const { applier, listHandle } = mount(listView(() => ["a"]));
+		const handle = listHandle();
+		applier.dispose();
+		expect(handle.componentAtIndex(handle, __GetElementUniqueID(handle), 0, 1, false)).toBe(-1);
 	});
 });

package/test/remove-subtree-cleanup.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "@rstest/core";
+import { createPatchApplier } from "../src/apply-patch.js";
+import { createVirtualBackend } from "../src/backends/virtual-backend.js";
+import { createLynxDocument } from "../src/fake-dom.js";
+import { Op } from "../src/patch-protocol.js";
+
+// Mithril's removeDOM only ever calls removeChild on the ROOT of a removed
+// subtree, so both threads must release every descendant's bookkeeping
+// themselves — otherwise a long-running app leaks every element (and its
+// listeners) it ever removed.
+describe("removing a subtree releases every descendant", () => {
+	it("main thread: RemoveChild drops the handles of the whole subtree", () => {
+		lynxTestingEnv.switchToMainThread();
+		const pageId = __GetElementUniqueID(__CreatePage());
+		const applier = createPatchApplier(pageId);
+		applier.registerPageRoot(__CreateView(pageId));
+
+		applier.applyPatch([
+			Op.CreateElement, "view", 1,
+			Op.CreateElement, "view", 2,
+			Op.CreateElement, "view", 3,
+			Op.InsertBefore, 0, 1, -1,
+			Op.InsertBefore, 1, 2, -1,
+			Op.InsertBefore, 2, 3, -1,
+			Op.AddEvent, 2, "tap",
+			Op.AddEvent, 3, "tap",
+		]);
+		expect(applier.getHandle(3)).toBeDefined();
+
+		applier.applyPatch([Op.RemoveChild, 0, 1]);
+		expect(applier.getHandle(1)).toBeUndefined();
+		expect(applier.getHandle(2)).toBeUndefined();
+		expect(applier.getHandle(3)).toBeUndefined();
+		expect(applier.getHandle(0)).toBeDefined();
+	});
+
+	it("main thread: a node moved out of the subtree before removal survives", () => {
+		lynxTestingEnv.switchToMainThread();
+		const pageId = __GetElementUniqueID(__CreatePage());
+		const applier = createPatchApplier(pageId);
+		applier.registerPageRoot(__CreateView(pageId));
+
+		applier.applyPatch([
+			Op.CreateElement, "view", 1,
+			Op.CreateElement, "view", 2,
+			Op.CreateElement, "view", 4,
+			Op.InsertBefore, 0, 1, -1,
+			Op.InsertBefore, 0, 4, -1,
+			Op.InsertBefore, 1, 2, -1,
+			// Move 2 from under 1 to under 4.
+			Op.InsertBefore, 4, 2, -1,
+		]);
+
+		applier.applyPatch([Op.RemoveChild, 0, 1]);
+		expect(applier.getHandle(1)).toBeUndefined();
+		expect(applier.getHandle(2)).toBeDefined();
+		expect(applier.getHandle(4)).toBeDefined();
+	});
+
+	it("background thread: removeChild drops the whole subtree from the id map", () => {
+		const document = createLynxDocument(createVirtualBackend());
+		const a = document.createElement("view");
+		const b = document.createElement("view");
+		const c = document.createElement("text");
+		document.appendChild(a);
+		a.appendChild(b);
+		b.appendChild(c);
+		expect(document.getNodeById(c._id)).toBe(c);
+
+		document.removeChild(a);
+		expect(document.getNodeById(a._id)).toBeNull();
+		expect(document.getNodeById(b._id)).toBeNull();
+		expect(document.getNodeById(c._id)).toBeNull();
+	});
+});