electrobun 1.18.4-beta.19 → 1.18.4-beta.21

package/dist/api/browser/ui/__tests__/dom.test.ts

@@ -0,0 +1,473 @@
+// Warren DOM renderer against the stub DOM: structure, explicit reactivity,
+// control flow with keyed reconciliation, events, Portal, and teardown.
+
+import { describe, expect, test } from "bun:test";
+import { live, memo, setDevMode, signal, store } from "../../../shared/warren/reactive";
+import {
+	For,
+	Fragment,
+	Match,
+	Portal,
+	Show,
+	Switch,
+	jsx,
+	render,
+} from "../dom";
+import { createStubRoot, StubComment, StubElement, StubText } from "./domStub";
+
+function mount(app: () => unknown): {
+	container: StubElement;
+	document: ReturnType<typeof createStubRoot>["document"];
+	dispose: () => void;
+} {
+	const { document, container } = createStubRoot();
+	const dispose = render(app as any, container as any);
+	return { container, document, dispose };
+}
+
+describe("DOM renderer", () => {
+	test("mounts an intrinsic tree with attributes, class, and style", () => {
+		const { container } = mount(() =>
+			jsx("div", {
+				id: "app",
+				class: "shell dark",
+				style: { color: "red", "--accent": "#fff" },
+				children: [
+					jsx("span", { children: "hello" }),
+					jsx("input", { type: "text", value: "abc", disabled: true }),
+				],
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.tagName).toBe("div");
+		expect(div!.getAttribute("id")).toBe("app");
+		expect(div!.className).toBe("shell dark");
+		expect(div!.style.color).toBe("red");
+		expect((div!.style as any)["--accent"]).toBe("#fff");
+		const [span, input] = div!.children;
+		expect(span!.textContent).toBe("hello");
+		expect(input!.value).toBe("abc"); // property, not attribute
+		expect(input!.hasAttribute("value")).toBe(false);
+		expect(input!.getAttribute("disabled")).toBe(""); // boolean attribute
+	});
+
+	test("static text and live text children", () => {
+		const [count, setCount] = signal(0);
+		const { container } = mount(() =>
+			jsx("p", { children: [live(() => `n=${count()}`), " (static)"] }),
+		);
+		const [p] = container.children;
+		expect(p!.textContent).toBe("n=0 (static)");
+		setCount(7);
+		expect(p!.textContent).toBe("n=7 (static)");
+	});
+
+	test("live props update in place; element identity is stable", () => {
+		const [cls, setCls] = signal("a");
+		const { container } = mount(() =>
+			jsx("div", { class: live(cls), title: live(() => cls().toUpperCase()) }),
+		);
+		const [div] = container.children;
+		expect(div!.className).toBe("a");
+		expect(div!.getAttribute("title")).toBe("A");
+		setCls("b");
+		expect(container.children[0]).toBe(div!);
+		expect(div!.className).toBe("b");
+		expect(div!.getAttribute("title")).toBe("B");
+	});
+
+	test("classList toggles classes from an object", () => {
+		const [active, setActive] = signal(false);
+		const { container } = mount(() =>
+			jsx("div", {
+				class: "base",
+				classList: live(() => ({ active: active(), muted: !active() })),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.classList.contains("base")).toBe(true);
+		expect(div!.classList.contains("muted")).toBe(true);
+		expect(div!.classList.contains("active")).toBe(false);
+		setActive(true);
+		expect(div!.classList.contains("active")).toBe(true);
+		expect(div!.classList.contains("muted")).toBe(false);
+	});
+
+	test("bare functions in value props throw loudly", () => {
+		const [x] = signal(1);
+		expect(() => mount(() => jsx("div", { title: x as any }))).toThrow(
+			/live\(/,
+		);
+	});
+
+	test("event handlers attach; ref sees the element", () => {
+		let clicks = 0;
+		let reffed: unknown = null;
+		const { container } = mount(() =>
+			jsx("button", {
+				ref: (el: unknown) => {
+					reffed = el;
+				},
+				onClick: () => clicks++,
+				children: "go",
+			}),
+		);
+		const [button] = container.children;
+		expect(reffed).toBe(button!);
+		button!.dispatch("click");
+		expect(clicks).toBe(1);
+	});
+
+	test("components run once; nested structure mounts", () => {
+		let calls = 0;
+		function Badge(props: Record<string, unknown>) {
+			calls++;
+			return jsx("em", { children: props.label as string });
+		}
+		const { container } = mount(() =>
+			jsx("div", {
+				children: [jsx(Badge, { label: "one" }), jsx(Badge, { label: "two" })],
+			}),
+		);
+		expect(calls).toBe(2);
+		expect(container.children[0]!.textContent).toBe("onetwo");
+	});
+
+	test("Show with live when swaps content and fallback", () => {
+		const [on, setOn] = signal(false);
+		const { container } = mount(() =>
+			jsx("div", {
+				children: Show({
+					when: live(on),
+					fallback: jsx("span", { class: "off", children: "off" }),
+					children: jsx("span", { class: "on", children: "on" }),
+				}),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.children[0]!.className).toBe("off");
+		setOn(true);
+		expect(div!.children[0]!.className).toBe("on");
+		setOn(false);
+		expect(div!.children[0]!.className).toBe("off");
+	});
+
+	test("Show with a plain value is a frozen snapshot", () => {
+		const [on, setOn] = signal(false);
+		const { container } = mount(() =>
+			jsx("div", {
+				children: Show({
+					when: on(), // evaluated once, not reactive
+					fallback: jsx("span", { children: "frozen-off" }),
+					children: jsx("span", { children: "frozen-on" }),
+				}),
+			}),
+		);
+		setOn(true);
+		expect(container.children[0]!.textContent).toBe("frozen-off");
+	});
+
+	test("For reconciles keyed rows: identity preserved across reorder", () => {
+		const [state, setState] = store({ items: ["a", "b", "c"] });
+		const { container } = mount(() =>
+			jsx("ul", {
+				children: For({
+					each: live(() => state.items.slice()),
+					key: (item: string) => item,
+					children: (item: string) => jsx("li", { children: item }),
+				}),
+			}),
+		);
+		const [ul] = container.children;
+		expect(ul!.children.map((li) => li.textContent)).toEqual(["a", "b", "c"]);
+		const [liA, liB, liC] = ul!.children;
+
+		setState((s) => s.items.reverse());
+		expect(ul!.children.map((li) => li.textContent)).toEqual(["c", "b", "a"]);
+		// Same DOM nodes, moved — not rebuilt.
+		expect(ul!.children[0]).toBe(liC!);
+		expect(ul!.children[1]).toBe(liB!);
+		expect(ul!.children[2]).toBe(liA!);
+	});
+
+	test("For adds and removes rows; fallback flips on empty", () => {
+		const [state, setState] = store({ items: ["x"] });
+		const { container } = mount(() =>
+			jsx("div", {
+				children: For({
+					each: live(() => state.items.slice()),
+					key: (item: string) => item,
+					fallback: jsx("i", { children: "empty" }),
+					children: (item: string) => jsx("b", { children: item }),
+				}),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.children[0]!.tagName).toBe("b");
+		setState((s) => {
+			s.items.length = 0;
+		});
+		expect(div!.children[0]!.tagName).toBe("i");
+		setState((s) => s.items.push("y", "z"));
+		expect(div!.children.map((el) => el.textContent)).toEqual(["y", "z"]);
+	});
+
+	test("For row index accessor is reactive", () => {
+		const [state, setState] = store({ items: ["a", "b"] });
+		const { container } = mount(() =>
+			jsx("div", {
+				children: For({
+					each: live(() => state.items.slice()),
+					key: (item: string) => item,
+					children: (item: string, index) =>
+						jsx("span", { children: live(() => `${item}${index()}`) }),
+				}),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.textContent).toBe("a0b1");
+		setState((s) => s.items.reverse());
+		expect(div!.textContent).toBe("b0a1");
+	});
+
+	test("JSX key attribute reaches For via the transform's third argument", () => {
+		// <For key={fn}> transpiles to jsx(For, props, fn) — key must land
+		// back in props or reconciliation silently degrades to item identity.
+		const [state, setState] = store({ items: [{ n: 1 }, { n: 2 }] });
+		const { container } = mount(() =>
+			jsx("div", {
+				children: jsx(
+					For as any,
+					{
+						each: live(() => state.items.map((it) => ({ ...it }))),
+						children: (item: { n: number }) =>
+							jsx("span", { children: String(item.n) }),
+					},
+					(item: { n: number }) => item.n, // key as third arg
+				),
+			}),
+		);
+		const [div] = container.children;
+		const [span1] = div!.children;
+		setState((s) => s.items.reverse());
+		// Fresh objects each read: only a working key preserves identity.
+		expect(div!.children[1]).toBe(span1!);
+	});
+
+	test("Switch/Match picks the first live truthy branch", () => {
+		const [tab, setTab] = signal("home");
+		const { container } = mount(() =>
+			jsx("div", {
+				children: Switch({
+					fallback: jsx("span", { children: "none" }),
+					children: [
+						Match({
+							when: live(() => tab() === "home"),
+							children: jsx("span", { children: "home" }),
+						}),
+						Match({
+							when: live(() => tab() === "settings"),
+							children: jsx("span", { children: "settings" }),
+						}),
+					],
+				}),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.textContent).toBe("home");
+		setTab("settings");
+		expect(div!.textContent).toBe("settings");
+		setTab("nope");
+		expect(div!.textContent).toBe("none");
+	});
+
+	test("memo feeds live bindings glitch-free", () => {
+		const [n, setN] = signal(2);
+		const double = memo(() => n() * 2);
+		const { container } = mount(() =>
+			jsx("output", { children: live(() => `${n()}:${double()}`) }),
+		);
+		const [output] = container.children;
+		expect(output!.textContent).toBe("2:4");
+		setN(5);
+		expect(output!.textContent).toBe("5:10");
+	});
+
+	test("live element children become dynamic regions (cond && <el/>)", () => {
+		const [open, setOpen] = signal(false);
+		const { container } = mount(() =>
+			jsx("div", {
+				children: live(() =>
+					open() ? jsx("span", { class: "panel", children: "open" }) : null,
+				),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.children.length).toBe(0);
+		setOpen(true);
+		expect(div!.children[0]!.className).toBe("panel");
+		setOpen(false);
+		expect(div!.children.length).toBe(0);
+	});
+
+	test("live text children stay fine-grained text nodes", () => {
+		const [n, setN] = signal(1);
+		const { container } = mount(() =>
+			jsx("div", { children: live(() => `v${n()}`) }),
+		);
+		const [div] = container.children;
+		const textNode = div!.childNodes.find((c) => c instanceof StubText);
+		setN(2);
+		// Same text node updated in place — not a rebuilt region.
+		expect(div!.childNodes.find((c) => c instanceof StubText)).toBe(textNode!);
+		expect(div!.textContent).toBe("v2");
+	});
+
+	test("components created inside live regions keep inert bodies and deferred lives", () => {
+		const [open, setOpen] = signal(true);
+		const [label, setLabel] = signal("a");
+		let regionBuilds = 0;
+		let effectRuns = 0;
+		function Panel() {
+			// Statement live in a body mounted from a live region: must be
+			// deferred (declared-later variable is fine) and must NOT leak
+			// its reads into the region's dependencies.
+			live(() => {
+				effectRuns++;
+				laterDeclared();
+			});
+			const laterDeclared = () => label();
+			return jsx("span", { class: live(label), children: "panel" });
+		}
+		const { container } = mount(() =>
+			jsx("div", {
+				children: live(() => {
+					regionBuilds++;
+					return open() ? jsx(Panel, {}) : null;
+				}),
+			}),
+		);
+		const [div] = container.children;
+		expect(div!.children[0]!.className).toBe("a");
+		expect(effectRuns).toBe(1);
+		expect(regionBuilds).toBe(1);
+		// Inner signal change: value binding + effect update, region untouched.
+		setLabel("b");
+		expect(div!.children[0]!.className).toBe("b");
+		expect(effectRuns).toBe(2);
+		expect(regionBuilds).toBe(1);
+		// Region's own dependency still reconciles it.
+		setOpen(false);
+		expect(div!.children.length).toBe(0);
+		expect(regionBuilds).toBe(2);
+	});
+
+	test("Fragment and array children mount in order", () => {
+		const { container } = mount(() =>
+			Fragment({
+				children: [
+					jsx("i", { children: "1" }),
+					"mid",
+					jsx("b", { children: "2" }),
+				],
+			}),
+		);
+		expect(container.textContent).toBe("1mid2");
+	});
+
+	test("bare function children run as escapes; returned elements mount", () => {
+		const { container } = mount(() =>
+			jsx("div", {
+				children: [() => jsx("span", { children: "escaped" }), () => {}],
+			}),
+		);
+		expect(container.children[0]!.textContent).toBe("escaped");
+	});
+
+	test("Portal renders into document.body and cleans up with its scope", () => {
+		const [open, setOpen] = signal(true);
+		const { container, document } = mount(() =>
+			jsx("div", {
+				children: Show({
+					when: live(open),
+					children: Portal({
+						children: jsx("dialog", { children: "modal" }),
+					}),
+				}),
+			}),
+		);
+		expect(container.textContent).toBe("");
+		expect(
+			document.body.children.some((el) => el.tagName === "dialog"),
+		).toBe(true);
+		setOpen(false);
+		expect(
+			document.body.children.some((el) => el.tagName === "dialog"),
+		).toBe(false);
+		setOpen(true);
+		expect(
+			document.body.children.some((el) => el.tagName === "dialog"),
+		).toBe(true);
+	});
+
+	test("svg subtrees use the SVG namespace; class works via attribute", () => {
+		const { container } = mount(() =>
+			jsx("svg", {
+				viewBox: "0 0 10 10",
+				class: "icon",
+				children: jsx("path", { d: "M0 0L10 10" }),
+			}),
+		);
+		const [svg] = container.children;
+		expect(svg!.namespaceURI).toBe("http://www.w3.org/2000/svg");
+		expect(svg!.getAttribute("viewBox")).toBe("0 0 10 10");
+		expect(svg!.getAttribute("class")).toBe("icon");
+		expect(svg!.children[0]!.namespaceURI).toBe(
+			"http://www.w3.org/2000/svg",
+		);
+	});
+
+	test("dispose removes everything Warren created and stops updates", () => {
+		const [n, setN] = signal(0);
+		const { container, dispose } = mount(() =>
+			jsx("div", { children: live(() => `n=${n()}`) }),
+		);
+		expect(container.children.length).toBe(1);
+		dispose();
+		expect(container.childNodes.length).toBe(0);
+		// Writes after dispose must not throw or resurrect nodes.
+		setN(1);
+		expect(container.childNodes.length).toBe(0);
+	});
+
+	test("dynamic region rebuild tears down row state (no leaked comments)", () => {
+		setDevMode(false);
+		try {
+			const [state, setState] = store({ items: ["a", "b", "c"] });
+			const { container } = mount(() =>
+				jsx("div", {
+					children: For({
+						each: live(() => state.items.slice()),
+						key: (item: string) => item,
+						children: (item: string) => jsx("span", { children: item }),
+					}),
+				}),
+			);
+			const [div] = container.children;
+			const countComments = () =>
+				div!.childNodes.filter((n) => n instanceof StubComment).length;
+			const before = countComments();
+			// Shrinking to one row removes the other rows' anchors too.
+			setState((s) => {
+				s.items = ["b"];
+			});
+			expect(div!.textContent).toBe("b");
+			expect(countComments()).toBeLessThan(before);
+			// Text nodes from removed rows are gone.
+			const texts = div!.childNodes.filter((n) => n instanceof StubText);
+			expect(texts.length).toBe(0); // row text lives inside spans
+		} finally {
+			setDevMode(true);
+		}
+	});
+});

package/dist/api/browser/ui/__tests__/domStub.ts

@@ -0,0 +1,218 @@
+// Minimal DOM implementation for headless renderer tests — no third-party
+// dependency. Implements exactly the surface Warren's DOM renderer touches;
+// if the renderer starts using more DOM, this stub fails loudly and the new
+// surface gets added here consciously.
+
+export class StubNode {
+	nodeType: number;
+	ownerDocument: StubDocument | null = null;
+	parentNode: StubNode | null = null;
+	childNodes: StubNode[] = [];
+
+	constructor(nodeType: number) {
+		this.nodeType = nodeType;
+	}
+
+	get nextSibling(): StubNode | null {
+		if (!this.parentNode) return null;
+		const siblings = this.parentNode.childNodes;
+		const idx = siblings.indexOf(this);
+		return idx >= 0 && idx + 1 < siblings.length ? siblings[idx + 1]! : null;
+	}
+
+	get firstChild(): StubNode | null {
+		return this.childNodes[0] ?? null;
+	}
+
+	insertBefore(node: StubNode, before: StubNode | null): StubNode {
+		if (node.parentNode) node.parentNode.removeChild(node);
+		if (before === null) {
+			this.childNodes.push(node);
+		} else {
+			const idx = this.childNodes.indexOf(before);
+			if (idx < 0) throw new Error("stub: insertBefore anchor not a child");
+			this.childNodes.splice(idx, 0, node);
+		}
+		node.parentNode = this;
+		return node;
+	}
+
+	appendChild(node: StubNode): StubNode {
+		return this.insertBefore(node, null);
+	}
+
+	removeChild(node: StubNode): StubNode {
+		const idx = this.childNodes.indexOf(node);
+		if (idx < 0) throw new Error("stub: removeChild of non-child");
+		this.childNodes.splice(idx, 1);
+		node.parentNode = null;
+		return node;
+	}
+}
+
+export class StubText extends StubNode {
+	data = "";
+	constructor() {
+		super(3);
+	}
+	get textContent(): string {
+		return this.data;
+	}
+}
+
+export class StubComment extends StubNode {
+	data = "";
+	constructor() {
+		super(8);
+	}
+}
+
+class StubClassList {
+	private owner: StubElement;
+	constructor(owner: StubElement) {
+		this.owner = owner;
+	}
+	private set(): Set<string> {
+		return new Set((this.owner.className ?? "").split(/\s+/).filter(Boolean));
+	}
+	private write(set: Set<string>): void {
+		this.owner.className = [...set].join(" ");
+	}
+	add(cls: string): void {
+		const s = this.set();
+		s.add(cls);
+		this.write(s);
+	}
+	remove(cls: string): void {
+		const s = this.set();
+		s.delete(cls);
+		this.write(s);
+	}
+	toggle(cls: string, force?: boolean): boolean {
+		const s = this.set();
+		const on = force ?? !s.has(cls);
+		if (on) s.add(cls);
+		else s.delete(cls);
+		this.write(s);
+		return on;
+	}
+	contains(cls: string): boolean {
+		return this.set().has(cls);
+	}
+}
+
+class StubStyle {
+	[key: string]: unknown;
+	cssText = "";
+	setProperty(name: string, value: string): void {
+		(this as Record<string, unknown>)[name] = value;
+	}
+	removeProperty(name: string): void {
+		delete (this as Record<string, unknown>)[name];
+	}
+}
+
+export class StubElement extends StubNode {
+	tagName: string;
+	namespaceURI: string;
+	className = "";
+	attributes = new Map<string, string>();
+	style = new StubStyle();
+	classList = new StubClassList(this);
+	listeners = new Map<string, Array<(event: unknown) => void>>();
+	// Property-set keys land as plain fields:
+	value: unknown;
+	checked: unknown;
+	innerHTML: unknown;
+
+	constructor(tagName: string, namespaceURI = "") {
+		super(1);
+		this.tagName = tagName;
+		this.namespaceURI = namespaceURI;
+	}
+
+	setAttribute(name: string, value: string): void {
+		this.attributes.set(name, value);
+	}
+	getAttribute(name: string): string | null {
+		return this.attributes.get(name) ?? null;
+	}
+	removeAttribute(name: string): void {
+		this.attributes.delete(name);
+	}
+	hasAttribute(name: string): boolean {
+		return this.attributes.has(name);
+	}
+
+	addEventListener(type: string, handler: (event: unknown) => void): void {
+		const list = this.listeners.get(type) ?? [];
+		list.push(handler);
+		this.listeners.set(type, list);
+	}
+	removeEventListener(type: string, handler: (event: unknown) => void): void {
+		const list = this.listeners.get(type);
+		if (!list) return;
+		const idx = list.indexOf(handler);
+		if (idx >= 0) list.splice(idx, 1);
+	}
+	dispatch(type: string, event: unknown = { type }): void {
+		for (const handler of this.listeners.get(type) ?? []) handler(event);
+	}
+
+	/** Test helper: concatenated text of the subtree. */
+	get textContent(): string {
+		let out = "";
+		for (const child of this.childNodes) {
+			if (child instanceof StubText) out += child.data;
+			else if (child instanceof StubElement) out += child.textContent;
+		}
+		return out;
+	}
+
+	/** Test helper: element children only (comments/text skipped). */
+	get children(): StubElement[] {
+		return this.childNodes.filter(
+			(n): n is StubElement => n instanceof StubElement,
+		);
+	}
+}
+
+export class StubDocument {
+	body: StubElement;
+
+	constructor() {
+		this.body = this.createElement("body");
+	}
+
+	private adopt<T extends StubNode>(node: T): T {
+		node.ownerDocument = this;
+		return node;
+	}
+
+	createElement(tagName: string): StubElement {
+		return this.adopt(new StubElement(tagName));
+	}
+	createElementNS(ns: string, tagName: string): StubElement {
+		return this.adopt(new StubElement(tagName, ns));
+	}
+	createTextNode(data: string): StubText {
+		const node = this.adopt(new StubText());
+		node.data = data;
+		return node;
+	}
+	createComment(data: string): StubComment {
+		const node = this.adopt(new StubComment());
+		node.data = data;
+		return node;
+	}
+}
+
+/** A fresh document + detached container, typed loosely for render(). */
+export function createStubRoot(): {
+	document: StubDocument;
+	container: StubElement;
+} {
+	const document = new StubDocument();
+	const container = document.createElement("div");
+	return { document, container };
+}