@sigil-dev/runtime 0.3.0

package/index.test.ts

@@ -0,0 +1,1041 @@
+import { describe, expect, test } from "bun:test";
+import {
+	batch,
+	claim,
+	claimComment,
+	claimText,
+	createEffect,
+	createMemo,
+	createSignal,
+	hydrateKeyedList,
+	reconcile,
+	withEffectScope,
+} from "./index.ts";
+
+// Minimal DOM mock for reconcile tests
+class MockNode {
+	parentNode: MockNode | null = null;
+	children: MockNode[] = [];
+	name: string;
+	constructor(name: string) {
+		this.name = name;
+	}
+	before(node: MockNode) {
+		// Remove from old parent
+		if (node.parentNode) {
+			const idx = node.parentNode.children.indexOf(node);
+			if (idx >= 0) node.parentNode.children.splice(idx, 1);
+		}
+		// Insert before this node in parent
+		if (this.parentNode) {
+			const idx = this.parentNode.children.indexOf(this);
+			this.parentNode.children.splice(idx, 0, node);
+			node.parentNode = this.parentNode;
+		}
+	}
+	removeChild(node: MockNode) {
+		const idx = this.children.indexOf(node);
+		if (idx >= 0) this.children.splice(idx, 1);
+		node.parentNode = null;
+	}
+	toString() {
+		return this.name;
+	}
+}
+class MockComment extends MockNode {
+	constructor() {
+		super("");
+	}
+}
+class MockElement extends MockNode {}
+
+function nodeNames(parent: MockNode): string[] {
+	return parent.children.filter((c) => c.name !== "").map((c) => c.name);
+}
+
+describe("Runtime", () => {
+	describe("Basic reactivity", () => {
+		describe("createSignal", () => {
+			test("returns initial value", () => {
+				const count = createSignal(0);
+				expect(count()).toBe(0);
+			});
+
+			test("updates on set", () => {
+				const count = createSignal(0);
+				count.set(5);
+				expect(count()).toBe(5);
+			});
+		});
+
+		describe("createEffect", () => {
+			test("runs immediately", () => {
+				const count = createSignal(0);
+				let seen = -1;
+				createEffect(() => {
+					seen = count();
+				});
+				expect(seen).toBe(0);
+			});
+
+			test("reruns on signal change", () => {
+				const count = createSignal(0);
+				let seen = -1;
+				createEffect(() => {
+					seen = count();
+				});
+				count.set(5);
+				expect(seen).toBe(5);
+			});
+		});
+
+		describe("createMemo", () => {
+			test("derives value", () => {
+				const count = createSignal(2);
+				const doubled = createMemo(() => count() * 2);
+				expect(doubled()).toBe(4);
+			});
+
+			test("updates when dependency changes", () => {
+				const count = createSignal(2);
+				const doubled = createMemo(() => count() * 2);
+				count.set(5);
+				expect(doubled()).toBe(10);
+			});
+		});
+	});
+
+	describe("reconcile", () => {
+		function setup() {
+			const parent = new MockElement("parent");
+			const anchor = new MockComment();
+			parent.children.push(anchor);
+			anchor.parentNode = parent;
+			const keyMap = new Map<unknown, MockNode>();
+			return { parent, anchor, keyMap };
+		}
+
+		/** Cast wrapper — MockNode/MockElement satisfy the DOM APIs reconcile actually uses */
+		function mockReconcile<T>(
+			anchor: MockComment,
+			keyMap: Map<unknown, MockNode>,
+			newItems: T[],
+			getKey: (item: T) => unknown,
+			createNode: (item: T) => MockNode,
+		) {
+			reconcile(
+				anchor as unknown as Comment,
+				keyMap as unknown as Map<unknown, Node>,
+				newItems,
+				getKey,
+				createNode as unknown as (item: T) => Node,
+			);
+		}
+
+		test("inserts initial items", () => {
+			const { parent, anchor, keyMap } = setup();
+			const items = [
+				{ id: 1, text: "a" },
+				{ id: 2, text: "b" },
+			];
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				items,
+				(i) => i.id,
+				(i) => new MockElement(i.text),
+			);
+
+			expect(nodeNames(parent)).toEqual(["a", "b"]);
+			expect(keyMap.size).toBe(2);
+		});
+
+		test("reuses nodes with same key", () => {
+			const { parent, anchor, keyMap } = setup();
+			const items = [
+				{ id: 1, text: "a" },
+				{ id: 2, text: "b" },
+			];
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				items,
+				(i) => i.id,
+				(i) => new MockElement(i.text),
+			);
+			const nodeA = keyMap.get(1);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				items,
+				(i) => i.id,
+				(i) => new MockElement(i.text),
+			);
+
+			expect(keyMap.get(1)).toBe(nodeA);
+			expect(nodeNames(parent)).toEqual(["a", "b"]);
+		});
+
+		test("removes deleted items", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			expect(nodeNames(parent)).toEqual(["n1", "n2", "n3"]);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(nodeNames(parent)).toEqual(["n1", "n3"]);
+			expect(keyMap.has(2)).toBe(false);
+		});
+
+		test("moves nodes to new order", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			const node1 = keyMap.get(1);
+			const node2 = keyMap.get(2);
+			const node3 = keyMap.get(3);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 3 }, { id: 2 }, { id: 1 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(keyMap.get(1)).toBe(node1);
+			expect(keyMap.get(2)).toBe(node2);
+			expect(keyMap.get(3)).toBe(node3);
+			expect(nodeNames(parent)).toEqual(["n3", "n2", "n1"]);
+		});
+
+		test("handles mixed add/remove/reorder", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }, { id: 3 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			const node1 = keyMap.get(1);
+			const node3 = keyMap.get(3);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 4 }, { id: 3 }, { id: 1 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(keyMap.has(2)).toBe(false);
+			expect(keyMap.get(1)).toBe(node1);
+			expect(keyMap.get(3)).toBe(node3);
+			expect(keyMap.has(4)).toBe(true);
+			expect(nodeNames(parent)).toEqual(["n4", "n3", "n1"]);
+		});
+
+		test("empty list removes all", () => {
+			const { parent, anchor, keyMap } = setup();
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+			expect(nodeNames(parent)).toEqual(["n1", "n2"]);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[] as { id: number }[],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(nodeNames(parent)).toEqual([]);
+			expect(keyMap.size).toBe(0);
+		});
+
+		test("from empty to populated", () => {
+			const { parent, anchor, keyMap } = setup();
+			expect(nodeNames(parent)).toEqual([]);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }, { id: 2 }],
+				(i) => i.id,
+				(i) => new MockElement(`n${i.id}`),
+			);
+
+			expect(nodeNames(parent)).toEqual(["n1", "n2"]);
+		});
+
+		test("preserves anchor position", () => {
+			const { parent, anchor, keyMap } = setup();
+			const header = new MockElement("header");
+			anchor.before(header);
+
+			mockReconcile(
+				anchor,
+				keyMap,
+				[{ id: 1 }],
+				(i) => i.id,
+				() => new MockElement("item"),
+			);
+
+			expect(nodeNames(parent)).toEqual(["header", "item"]);
+		});
+	});
+
+	test("effect cleanup runs before rerun", () => {
+		const count = createSignal(0);
+		const log: string[] = [];
+		createEffect(() => {
+			count(); // subscribe
+			return () => log.push("cleanup");
+		});
+		count.set(1);
+		count.set(2);
+		expect(log).toEqual(["cleanup", "cleanup"]);
+	});
+
+	test("disposer stops effect", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const stop = createEffect(() => {
+			count();
+			runs++;
+		});
+		count.set(1);
+		stop();
+		count.set(2);
+		expect(runs).toBe(2); // initial + one update, not three
+	});
+
+	test("cleanup runs on dispose", () => {
+		let cleaned = false;
+		const stop = createEffect(() => () => {
+			cleaned = true;
+		});
+		stop();
+		expect(cleaned).toBe(true);
+	});
+});
+
+describe("batch", () => {
+	test("multiple signals in batch trigger effect once", () => {
+		const count = createSignal(0);
+		const name = createSignal("a");
+		let runs = 0;
+		createEffect(() => {
+			count();
+			name();
+			runs++;
+		});
+		expect(runs).toBe(1); // initial run
+
+		batch(() => {
+			count.set(1);
+			name.set("b");
+		});
+		expect(runs).toBe(2); // one run, not two
+	});
+
+	test("nested batches flush on outermost exit", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count();
+			runs++;
+		});
+
+		batch(() => {
+			batch(() => {
+				count.set(1);
+			});
+			count.set(2); // still inside outer batch
+		});
+		expect(runs).toBe(2); // one run after outer exits
+	});
+
+	test("outside batch runs immediately", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count();
+			runs++;
+		});
+
+		count.set(1);
+		count.set(2);
+		expect(runs).toBe(3); // initial + two immediate runs
+	});
+});
+
+describe("createSignal with objects", () => {
+	test("property read returns value", () => {
+		const state = createSignal({ name: "Alice" });
+		expect(state().name).toBe("Alice");
+	});
+
+	test("property write triggers effect", () => {
+		const state = createSignal({ name: "Alice" });
+		let seen = "";
+		createEffect(() => {
+			seen = state().name;
+		});
+		expect(seen).toBe("Alice");
+		state().name = "Bob";
+		expect(seen).toBe("Bob");
+	});
+
+	test("unrelated property change does not trigger effect", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		let runs = 0;
+		createEffect(() => {
+			state().name;
+			runs++;
+		});
+		expect(runs).toBe(1);
+		state().age = 31;
+		expect(runs).toBe(1);
+		state().name = "Bob";
+		expect(runs).toBe(2);
+	});
+
+	test("deeply nested property access is reactive", () => {
+		const state = createSignal({ user: { address: { city: "NYC" } } });
+		let seen = "";
+		createEffect(() => {
+			seen = state().user.address.city;
+		});
+		expect(seen).toBe("NYC");
+		state().user.address.city = "LA";
+		expect(seen).toBe("LA");
+	});
+
+	test("proxyCache deduplication — same proxy for repeated nested access", () => {
+		const state = createSignal({ address: { city: "Agartha" } });
+		const a1 = state().address;
+		const a2 = state().address;
+		expect(a1).toBe(a2);
+
+		let seen = "";
+		createEffect(() => {
+			seen = state().address.city;
+		});
+		expect(seen).toBe("Agartha");
+		state().address.city = "Hyperborea";
+		expect(seen).toBe("Hyperborea");
+	});
+
+	test(".set() replaces entire object", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		let seen = "";
+		createEffect(() => {
+			seen = state().name;
+		});
+		expect(seen).toBe("Alice");
+		state.set({ name: "Charlie", age: 25 });
+		expect(seen).toBe("Charlie");
+	});
+
+	test(".peek() reads without tracking", () => {
+		const state = createSignal({ name: "Alice" });
+		let runs = 0;
+		createEffect(() => {
+			state.peek();
+			runs++;
+		});
+		expect(runs).toBe(1);
+		state().name = "Bob";
+		expect(runs).toBe(1);
+	});
+
+	test("JSON.stringify works on proxy", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		expect(JSON.stringify(state())).toBe('{"name":"Alice","age":30}');
+	});
+
+	test("Object.keys works on proxy", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		expect(Object.keys(state())).toEqual(["name", "age"]);
+	});
+
+	test("spread works on proxy", () => {
+		const state = createSignal({ name: "Alice" });
+		const copy = { ...state() };
+		expect(copy).toEqual({ name: "Alice" });
+	});
+});
+
+describe("createSignal with arrays", () => {
+	test("length is reactive", () => {
+		const items = createSignal([1, 2, 3]);
+		let len = 0;
+		createEffect(() => {
+			len = items().length;
+		});
+		expect(len).toBe(3);
+		items().push(4);
+		expect(len).toBe(4);
+	});
+
+	test("index access is reactive", () => {
+		const items = createSignal([1, 2, 3]);
+		let first = 0;
+		//@ts-expect-error the assertion for that is below
+		createEffect(() => {
+			first = items()[0];
+		});
+		expect(first).toBe(1);
+		items()[0] = 99;
+		expect(first).toBe(99);
+	});
+
+	test("push triggers effects that read length", () => {
+		const items = createSignal<number[]>([]);
+		let seen: number[] = [];
+		createEffect(() => {
+			seen = [...items()];
+		});
+		expect(seen).toEqual([]);
+		items().push(1);
+		expect(seen).toEqual([1]);
+		items().push(2);
+		expect(seen).toEqual([1, 2]);
+	});
+
+	test("pop triggers length effect", () => {
+		const items = createSignal([1, 2, 3]);
+		let len = 0;
+		createEffect(() => {
+			len = items().length;
+		});
+		expect(len).toBe(3);
+		items().pop();
+		expect(len).toBe(2);
+	});
+
+	test("splice triggers effects", () => {
+		const items = createSignal([1, 2, 3, 4]);
+		let seen: number[] = [];
+		createEffect(() => {
+			seen = [...items()];
+		});
+		items().splice(1, 2);
+		expect(seen).toEqual([1, 4]);
+	});
+
+	test("push + $derived recomputes", () => {
+		const items = createSignal([1, 2, 3]);
+		const doubled = createMemo(() => items().map((x) => x * 2));
+		expect(doubled()).toEqual([2, 4, 6]);
+		items().push(4);
+		expect(doubled()).toEqual([2, 4, 6, 8]);
+	});
+});
+
+describe("proxy edge cases", () => {
+	test("null is not proxied", () => {
+		const state = createSignal(null);
+		expect(typeof state).toBe("function");
+		expect(state()).toBe(null);
+	});
+
+	test("nested arrays in objects are reactive", () => {
+		const state = createSignal({ items: [1, 2, 3] });
+		let seen: number[] = [];
+		createEffect(() => {
+			seen = [...state().items];
+		});
+		expect(seen).toEqual([1, 2, 3]);
+		state().items.push(4);
+		expect(seen).toEqual([1, 2, 3, 4]);
+	});
+
+	test("multiple effects on same object, independent keys", () => {
+		const state = createSignal({ x: 0, y: 0 });
+		let xSeen = 0,
+			ySeen = 0,
+			xRuns = 0,
+			yRuns = 0;
+		createEffect(() => {
+			xSeen = state().x;
+			xRuns++;
+		});
+		createEffect(() => {
+			ySeen = state().y;
+			yRuns++;
+		});
+		expect(xRuns).toBe(1);
+		expect(yRuns).toBe(1);
+
+		state().x = 5;
+		expect(xSeen).toBe(5);
+		expect(ySeen).toBe(0);
+		expect(xRuns).toBe(2);
+		expect(yRuns).toBe(1);
+
+		state().y = 10;
+		expect(xSeen).toBe(5);
+		expect(ySeen).toBe(10);
+		expect(xRuns).toBe(2);
+		expect(yRuns).toBe(2);
+	});
+});
+
+describe("claim", () => {
+	test("claims an element by tag name and removes from pool", () => {
+		const div = document.createElement("div");
+		const span = document.createElement("span");
+		const pool: ChildNode[] = [div, span];
+		const result = claim(pool, "div");
+		expect(result).toBe(div);
+		expect(pool).toEqual([span]);
+	});
+
+	test("falls back to createElement when no match", () => {
+		const span = document.createElement("span");
+		const pool: ChildNode[] = [span];
+		const result = claim(pool, "div");
+		expect(result.tagName).toBe("DIV");
+		expect(pool).toEqual([span]);
+	});
+
+	test("claims first match only", () => {
+		const d1 = document.createElement("div");
+		const d2 = document.createElement("div");
+		const pool: ChildNode[] = [d1, d2];
+		const result = claim(pool, "div");
+		expect(result).toBe(d1);
+		expect(pool).toEqual([d2]);
+	});
+
+	test("is case-insensitive on tag comparison", () => {
+		const svg = document.createElement("SVG");
+		const pool: ChildNode[] = [svg];
+		const result = claim(pool, "svg");
+		expect(result).toBe(svg);
+	});
+
+	test("returns empty pool after claiming all matches", () => {
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [div];
+		claim(pool, "div");
+		expect(pool).toEqual([]);
+	});
+
+	test("handles empty pool", () => {
+		const pool: ChildNode[] = [];
+		const result = claim(pool, "div");
+		expect(result.tagName).toBe("DIV");
+		expect(pool).toEqual([]);
+	});
+});
+
+describe("claimText", () => {
+	test("claims a text node from pool", () => {
+		const text = document.createTextNode("hello");
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [text, div];
+		const result = claimText(pool);
+		expect(result).toBe(text);
+		expect(pool).toEqual([div]);
+	});
+
+	test("falls back to createTextNode when no text node in pool", () => {
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [div];
+		const result = claimText(pool);
+		expect(result).toBeInstanceOf(Text);
+		expect(result.textContent).toBe("");
+		expect(pool).toEqual([div]);
+	});
+
+	test("handles empty pool", () => {
+		const pool: ChildNode[] = [];
+		const result = claimText(pool);
+		expect(result).toBeInstanceOf(Text);
+		expect(pool).toEqual([]);
+	});
+
+	test("claims first text node only", () => {
+		const t1 = document.createTextNode("a");
+		const t2 = document.createTextNode("b");
+		const pool: ChildNode[] = [t1, t2];
+		const result = claimText(pool);
+		expect(result).toBe(t1);
+		expect(pool).toEqual([t2]);
+	});
+});
+
+describe("hydration: full element tree claim", () => {
+	test("simulates SSR → hydration → scoped pools", () => {
+		// Simulate SSR output: <div><h1>Title</h1><p>Body</p></div>
+		const root = document.createElement("div");
+		const h1 = document.createElement("h1");
+		h1.appendChild(document.createTextNode("Title"));
+		const p = document.createElement("p");
+		p.appendChild(document.createTextNode("Body"));
+		root.appendChild(h1);
+		root.appendChild(p);
+
+		// Hydration entry: claim root from page-level pool
+		const pageNodes: ChildNode[] = [root];
+		const div = claim(pageNodes, "div");
+		expect(div).toBe(root);
+
+		// Scope: root's children
+		const childNodes = Array.from(div.childNodes);
+
+		// Claim h1
+		const claimedH1 = claim(childNodes, "h1");
+		expect(claimedH1).toBe(h1);
+		// Claim text inside h1 — removes from pool array, not DOM
+		const h1Pool = Array.from(claimedH1.childNodes);
+		const h1Text = claimText(h1Pool);
+		expect(h1Text.textContent).toBe("Title");
+		expect(h1Pool.length).toBe(0); // removed from pool
+
+		// Claim p
+		const claimedP = claim(childNodes, "p");
+		expect(claimedP).toBe(p);
+		const pPool = Array.from(claimedP.childNodes);
+		const pText = claimText(pPool);
+		expect(pText.textContent).toBe("Body");
+
+		// No leftover nodes in parent pool
+		expect(childNodes.length).toBe(0);
+	});
+
+	test("falls back gracefully for SSR/client mismatch", () => {
+		// SSR rendered <div><span>OK</span></div>
+		// Client expects <div><p>OK</p></div>
+		const root = document.createElement("div");
+		const span = document.createElement("span");
+		span.appendChild(document.createTextNode("OK"));
+		root.appendChild(span);
+
+		const nodes = Array.from(root.childNodes);
+		// Try to claim a <p> — doesn't exist, creates new one
+		const p = claim(nodes, "p");
+		expect(p.tagName).toBe("P");
+		expect(p.childNodes.length).toBe(0); // new element has no children
+		// Original span still in pool
+		expect(nodes.length).toBe(1);
+		expect(nodes[0]).toBe(span);
+	});
+});
+
+describe("Scary reactivity", () => {
+    test("effect unsubscribes from stale dependencies", () => {
+        const condition = createSignal(true);
+        const a = createSignal(1);
+        const b = createSignal(1);
+        let runs = 0;
+
+        createEffect(() => {
+            runs++;
+            if (condition()) {
+                a(); // read a only when condition is true
+            } else {
+                b(); // read b only when condition is false
+            }
+        });
+
+        expect(runs).toBe(1);
+
+        // flip condition, effect should now track b, not a
+        condition.set(false);
+        expect(runs).toBe(2);
+
+        // updating a should NOT trigger the effect anymore
+        a.set(99);
+        expect(runs).toBe(2); // ← this will fail with current implementation
+    });
+})
+
+describe("withEffectScope", () => {
+	test("collects effects created during fn()", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		withEffectScope(() => {
+			createEffect(() => {
+				count();
+				runs++;
+			});
+		});
+		expect(runs).toBe(1);
+		count.set(1);
+		expect(runs).toBe(2);
+	});
+
+	test("dispose stops all collected effects", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => {
+				count();
+				runs++;
+			});
+		});
+		expect(runs).toBe(1);
+		count.set(1);
+		expect(runs).toBe(2);
+
+		dispose();
+
+		count.set(2);
+		expect(runs).toBe(2); // stopped — no further runs
+	});
+
+	test("dispose stops multiple effects in the same scope", () => {
+		const a = createSignal(0);
+		const b = createSignal(0);
+		let runsA = 0;
+		let runsB = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => { a(); runsA++; });
+			createEffect(() => { b(); runsB++; });
+		});
+		a.set(1);
+		b.set(1);
+		expect(runsA).toBe(2);
+		expect(runsB).toBe(2);
+
+		dispose();
+
+		a.set(2);
+		b.set(2);
+		expect(runsA).toBe(2);
+		expect(runsB).toBe(2);
+	});
+
+	test("effects outside the scope are unaffected by dispose", () => {
+		const count = createSignal(0);
+		let outsideRuns = 0;
+		let insideRuns = 0;
+
+		createEffect(() => { count(); outsideRuns++; });
+
+		const dispose = withEffectScope(() => {
+			createEffect(() => { count(); insideRuns++; });
+		});
+
+		count.set(1);
+		expect(outsideRuns).toBe(2);
+		expect(insideRuns).toBe(2);
+
+		dispose();
+
+		count.set(2);
+		expect(outsideRuns).toBe(3); // still running
+		expect(insideRuns).toBe(2);  // stopped
+	});
+
+	test("nested scopes: inner dispose doesn't affect outer", () => {
+		const count = createSignal(0);
+		let outerRuns = 0;
+		let innerRuns = 0;
+
+		const disposeOuter = withEffectScope(() => {
+			createEffect(() => { count(); outerRuns++; });
+			// simulates a child component scope inside a page scope
+			const disposeInner = withEffectScope(() => {
+				createEffect(() => { count(); innerRuns++; });
+			});
+			disposeInner();
+		});
+
+		count.set(1);
+		expect(outerRuns).toBe(2);
+		expect(innerRuns).toBe(1); // stopped on inner dispose
+
+		disposeOuter();
+		count.set(2);
+		expect(outerRuns).toBe(2); // stopped on outer dispose
+	});
+
+	test("createMemo effects are collected in scope", () => {
+		const count = createSignal(0);
+		let memoRuns = 0;
+		const dispose = withEffectScope(() => {
+			// createMemo internally calls createEffect
+			const doubled = createMemo(() => { memoRuns++; return count() * 2; });
+			expect(doubled()).toBe(0);
+		});
+		expect(memoRuns).toBe(1);
+		count.set(5);
+		expect(memoRuns).toBe(2);
+
+		dispose();
+		count.set(10);
+		expect(memoRuns).toBe(2); // memo's internal effect stopped
+	});
+
+	test("dispose is idempotent", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => { count(); runs++; });
+		});
+		dispose();
+		dispose(); // second call must not throw or double-fire
+		count.set(1);
+		expect(runs).toBe(1);
+	});
+});
+
+describe("claimComment", () => {
+	test("claims a comment node from pool matching text", () => {
+		const comment = document.createComment("");
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [comment, div];
+		const result = claimComment(pool);
+		expect(result).toBe(comment);
+		expect(pool).toEqual([div]);
+	});
+
+	test("skips comments with non-matching data", () => {
+		const comment = document.createComment("g");
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [comment, div];
+		const result = claimComment(pool, "");
+		expect(result).not.toBe(comment);
+		expect(result).toBeInstanceOf(Comment);
+		expect(pool).toEqual([comment, div]); // pool unchanged
+	});
+
+	test("falls back to createComment when no comment in pool", () => {
+		const div = document.createElement("div");
+		const pool: ChildNode[] = [div];
+		const result = claimComment(pool);
+		expect(result).toBeInstanceOf(Comment);
+		expect(pool).toEqual([div]);
+	});
+
+	test("handles empty pool", () => {
+		const pool: ChildNode[] = [];
+		const result = claimComment(pool);
+		expect(result).toBeInstanceOf(Comment);
+		expect(pool).toEqual([]);
+	});
+});
+
+describe("hydrateKeyedList", () => {
+	test("claims anchor and sibling elements, builds keyMap", () => {
+		// Simulate SSR output: <!--g--> <li>A</li> <li>B</li> <!--/g-->
+		const parent = document.createElement("ul");
+		const open = document.createComment("g");
+		const li1 = document.createElement("li");
+		li1.textContent = "A";
+		const li2 = document.createElement("li");
+		li2.textContent = "B";
+		const close = document.createComment("/g");
+		parent.appendChild(open);
+		parent.appendChild(li1);
+		parent.appendChild(li2);
+		parent.appendChild(close);
+
+		const pool: ChildNode[] = [open, li1, li2, close];
+		const items = [{ id: "a" }, { id: "b" }];
+
+		const result = hydrateKeyedList(
+			pool,
+			items,
+			(item) => item.id,
+			(item) => {
+				const li = document.createElement("li");
+				li.textContent = item.id;
+				return li;
+			},
+		);
+
+		expect(result.anchor).toBe(open);
+		expect(result.keyMap.size).toBe(2);
+		expect(result.keyMap.get("a")).toBe(li1);
+		expect(result.keyMap.get("b")).toBe(li2);
+		// Pool lost anchor (g) via claimComment.
+		// li nodes + /g remain in pool array (walk removes from DOM only)
+		expect(pool.length).toBe(3); // li1, li2, /g still in pool array
+	});
+
+	test("handles SSR/client order mismatch by reconciling", () => {
+		// SSR rendered: A, B. Client expects: B, A.
+		const parent = document.createElement("ul");
+		const open = document.createComment("g");
+		const liA = document.createElement("li");
+		liA.textContent = "A";
+		const liB = document.createElement("li");
+		liB.textContent = "B";
+		const close = document.createComment("/g");
+		parent.appendChild(open);
+		parent.appendChild(liA);
+		parent.appendChild(liB);
+		parent.appendChild(close);
+
+		// Pool has anchor + items in SSR order
+		const pool: ChildNode[] = [open, liA, liB, close];
+		// Client order is reversed
+		const items = [{ id: "b" }, { id: "a" }];
+
+		const result = hydrateKeyedList(
+			pool,
+			items,
+			(item) => item.id,
+			(item) => {
+				const li = document.createElement("li");
+				li.textContent = item.id;
+				return li;
+			},
+		);
+
+		// keyMap should have the claimed nodes (mapped by SSR position)
+		expect(result.keyMap.get("b")).toBe(liA); // first sibling → first signal item key
+		expect(result.keyMap.get("a")).toBe(liB); // second sibling → second signal item key
+	});
+
+	test("empty signal items → empty keyMap", () => {
+		const parent = document.createElement("ul");
+		const open = document.createComment("g");
+		const close = document.createComment("/g");
+		parent.appendChild(open);
+		parent.appendChild(close);
+
+		const pool: ChildNode[] = [open, close];
+		const result = hydrateKeyedList(
+			pool,
+			[],
+			(item: { id: string }) => item.id,
+			() => document.createElement("li"),
+		);
+
+		expect(result.anchor).toBe(open);
+		expect(result.keyMap.size).toBe(0);
+	});
+});