@sigil-dev/compiler 0.9.7 → 0.9.11

package/test/render-parity.test.ts

@@ -0,0 +1,639 @@
+/**
+ * The same JSX rendered three ways must agree: server HTML (ssr), that HTML
+ * after hydration, and a fresh client render (hydrate code with an empty pool,
+ * which is what client-side navigation runs).
+ */
+import { describe, expect, test } from "bun:test";
+import { transformSync } from "@babel/core";
+import * as runtime from "../../runtime/index.ts";
+import sigilPlugin from "../src/babel/index.ts";
+
+type Mode = "ssr" | "hydrate";
+
+function compile(source: string, mode: Mode, hash?: string): () => unknown {
+	const code = transformSync(source, {
+		plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { mode, hash }]],
+		filename: "t.tsx",
+	})!.code!;
+	const body = code
+		.replace(/import\s*\{[^}]*\}\s*from\s*["']@sigil-dev\/runtime["'];?/g, "")
+		.replace(/^export\s+/gm, "");
+	return new Function(
+		"document",
+		...Object.keys(runtime),
+		`${body};\nreturn App;`,
+	)(globalThis.document, ...Object.values(runtime));
+}
+
+const noMarkers = (html: string) => html.replace(/<!--[^>]*-->/g, "");
+
+function render(
+	source: string,
+	opts: { hash?: string; beforeHydrate?: (host: HTMLElement) => void } = {},
+) {
+	const ssr = String(compile(source, "ssr", opts.hash)());
+
+	const host = document.createElement("div");
+	host.innerHTML = ssr;
+	opts.beforeHydrate?.(host);
+	runtime.pushHydrationNodes(Array.from(host.childNodes));
+	compile(source, "hydrate", opts.hash)();
+	runtime.popHydrationNodes();
+
+	const spa = document.createElement("div");
+	runtime.pushHydrationNodes([]);
+	runtime.insert(spa, compile(source, "hydrate", opts.hash)());
+	runtime.popHydrationNodes();
+
+	return { ssr: noMarkers(ssr), hydrated: host, spa };
+}
+
+/** Server HTML, hydrated DOM and client render all equal `html`. */
+function expectAll(source: string, html: string) {
+	const r = render(source);
+	expect(r.ssr).toBe(html);
+	expect(noMarkers(r.hydrated.innerHTML)).toBe(html);
+	expect(noMarkers(r.spa.innerHTML)).toBe(html);
+	return r;
+}
+
+describe("whitespace", () => {
+	test("spaces next to elements survive inside fragments", () => {
+		expectAll(
+			`export const App = () => <div><>Hello <b>big</b> world</></div>;`,
+			"<div>Hello <b>big</b> world</div>",
+		);
+	});
+
+	test("a lone space between elements is kept", () => {
+		expectAll(
+			`export const App = () => <p><b>a</b> <i>b</i></p>;`,
+			"<p><b>a</b> <i>b</i></p>",
+		);
+	});
+
+	test("whitespace touching a line break is dropped (standard JSX)", () => {
+		expectAll(
+			`export const App = () => (
+				<p>
+					Hello
+					<b>big</b> world
+				</p>
+			);`,
+			"<p>Hello<b>big</b> world</p>",
+		);
+	});
+
+	test("multi-line text joins with single spaces", () => {
+		expectAll(
+			`export const App = () => (
+				<p>
+					one
+					two
+				</p>
+			);`,
+			"<p>one two</p>",
+		);
+	});
+
+	test("component children keep their spaces", () => {
+		expectAll(
+			`const Box = ({ children }) => <span>{children}</span>;
+			export const App = () => <div><Box>Hi <b>you</b> there</Box></div>;`,
+			"<div><span>Hi <b>you</b> there</span></div>",
+		);
+	});
+});
+
+describe("attribute values", () => {
+	test("null and undefined leave the attribute out", () => {
+		expectAll(
+			`const u = undefined, n = null; export const App = () => <a href={u} title={n} data-x={u}>x</a>;`,
+			"<a>x</a>",
+		);
+	});
+
+	test("dashed attributes spell booleans out", () => {
+		expectAll(
+			`const t = true, f = false; export const App = () => <div aria-hidden={t} data-open={f} />;`,
+			'<div aria-hidden="true" data-open="false"></div>',
+		);
+	});
+
+	test("bare attributes render on the server", () => {
+		const r = render(
+			`export const App = () => <div><script src="/x.js" defer></script><details open></details></div>;`,
+		);
+		expect(r.ssr).toBe(
+			'<div><script src="/x.js" defer></script><details open></details></div>',
+		);
+		expect(r.spa.querySelector("script")!.defer).toBe(true);
+		expect(r.spa.querySelector("details")!.open).toBe(true);
+	});
+
+	test("string attributes are escaped", () => {
+		expectAll(
+			`export const App = () => <p title='say "hi" &amp; go'>x</p>;`,
+			'<p title="say &quot;hi&quot; &amp; go">x</p>',
+		);
+	});
+
+	test("spread attributes render on the server and the client", () => {
+		const r = expectAll(
+			`const props = { id: "s", class: "c", "aria-label": "l", hidden: false, title: undefined };
+			export const App = () => <div {...props} />;`,
+			'<div id="s" class="c" aria-label="l"></div>',
+		);
+		expect(r.spa.firstElementChild!.getAttribute("class")).toBe("c");
+	});
+});
+
+describe("text escaping", () => {
+	test("entities in static text stay text", () => {
+		expectAll(
+			`export const App = () => <p>&lt;ok&gt; &amp; ©</p>;`,
+			"<p>&lt;ok&gt; &amp; ©</p>",
+		);
+	});
+
+	test("backticks, backslashes and ${ in static text", () => {
+		const r = render("export const App = () => <p>a `b` \\n ${'{'}c{'}'}</p>;");
+		expect(r.ssr).toBe("<p>a `b` \\n ${c}</p>");
+		expect(r.spa.textContent).toBe("a `b` \\n ${c}");
+	});
+});
+
+describe("styles", () => {
+	test("numbers get px on the server and the client", () => {
+		const r = render(
+			`export const App = () => <p style={{ marginTop: 4, opacity: 0.5, "--gap": 2 }}>x</p>;`,
+		);
+		expect(r.ssr).toBe('<p style="margin-top:4px;opacity:0.5;--gap:2">x</p>');
+		const style = (r.spa.firstElementChild as HTMLElement).style;
+		expect(style.marginTop).toBe("4px");
+		expect(style.opacity).toBe("0.5");
+		expect(style.getPropertyValue("--gap")).toBe("2");
+	});
+
+	test("a style object passed as a value", () => {
+		const r = render(
+			`const s = { marginTop: 4, color: "red" }; export const App = () => <p style={s}>x</p>;`,
+		);
+		expect(r.ssr).toBe('<p style="margin-top:4px;color:red">x</p>');
+		const style = (r.spa.firstElementChild as HTMLElement).style;
+		expect(style.marginTop).toBe("4px");
+		expect(style.color).toBe("red");
+	});
+});
+
+describe("form values", () => {
+	test("<textarea value> is its content on the server", () => {
+		const r = render(
+			`const v = "a < b"; export const App = () => <textarea value={v} />;`,
+		);
+		expect(r.ssr).toBe("<textarea>a &lt; b</textarea>");
+		expect((r.spa.firstElementChild as HTMLTextAreaElement).value).toBe(
+			"a < b",
+		);
+	});
+
+	test("<select value> selects its option everywhere", () => {
+		const src = `const v = "2"; export const App = () => (
+			<select value={v}>
+				<option value="1">1</option>
+				<option value="2">2</option>
+			</select>
+		);`;
+		const r = render(src);
+		expect(r.ssr).toBe(
+			'<select><option value="1">1</option><option value="2" selected>2</option></select>',
+		);
+		expect((r.hydrated.firstElementChild as HTMLSelectElement).value).toBe("2");
+		expect((r.spa.firstElementChild as HTMLSelectElement).value).toBe("2");
+	});
+});
+
+describe("hydration keeps the server DOM", () => {
+	test("classes and attributes added before hydration stay", () => {
+		const r = render(`export const App = () => <div class="a" data-k="1" />;`, {
+			beforeHydrate: (host) => {
+				host.firstElementChild!.classList.add("added");
+				host.firstElementChild!.setAttribute("data-ready", "1");
+			},
+		});
+		const el = r.hydrated.firstElementChild!;
+		expect(el.className).toBe("a added");
+		expect(el.getAttribute("data-ready")).toBe("1");
+		// a fresh render still sets everything
+		expect(r.spa.innerHTML).toBe('<div class="a" data-k="1"></div>');
+	});
+
+	test("event listeners still attach to claimed elements", () => {
+		const src = `export const App = () => <button onClick={() => (globalThis.__hit = true)}>b</button>;`;
+		const r = render(src);
+		(r.hydrated.firstElementChild as HTMLElement).click();
+		expect((globalThis as Record<string, unknown>).__hit).toBe(true);
+	});
+
+	test("inline <script> text is created on client navigation", () => {
+		const r = render(
+			`const j = '{"a":1}'; export const App = () => <div><script type="application/json">{j}</script></div>;`,
+		);
+		expect(r.ssr).toBe(
+			'<div><script type="application/json">{"a":1}</script></div>',
+		);
+		expect(r.hydrated.innerHTML).toBe(r.ssr);
+		expect(r.spa.innerHTML).toBe(r.ssr);
+	});
+});
+
+describe("JSX passed as props", () => {
+	test("a JSX prop hydrates inside the component, not over its root", () => {
+		const src = `const Dialog = ({ title, actions, children }) => (
+			<div class="dlg"><b>{title}</b><div class="body">{children}</div>{actions && <div class="acts">{actions}</div>}</div>
+		);
+		export const App = () => (
+			<section>
+				<Dialog title="t" actions={<><div class="a">x</div><div class="a">y</div></>}>
+					body
+				</Dialog>
+			</section>
+		);`;
+		const html =
+			'<section><div class="dlg"><b>t</b><div class="body">body</div><div class="acts"><div class="a">x</div><div class="a">y</div></div></div></section>';
+		const r = expectAll(src, html);
+		expect(r.hydrated.querySelectorAll(".dlg").length).toBe(1);
+	});
+
+	test("a conditional JSX prop", () => {
+		expectAll(
+			`const on = true;
+			const Card = ({ icon }) => <div class="card">{icon}<p>t</p></div>;
+			export const App = () => <div><Card icon={on ? <i>i</i> : <b>b</b>} /></div>;`,
+			'<div><div class="card"><i>i</i><p>t</p></div></div>',
+		);
+	});
+});
+
+describe("reactive branches", () => {
+	test("a component with text children inside a reactive conditional", () => {
+		expectAll(
+			`let on = $state(true);
+			const Toast = ({ children }) => <div class="t"><span>{children}</span></div>;
+			export const App = () => (
+				<section>{on ? <Toast>Saved</Toast> : <p>none</p>}</section>
+			);`,
+			'<section><div class="t"><span>Saved</span></div></section>',
+		);
+	});
+});
+
+describe("reactive component children", () => {
+	const src = `let on = $state(true);
+		globalThis.__flip = () => { on = !on; };
+		const Box = ({ children }) => <div class="box"><h3>t</h3>{children}</div>;
+		export const App = () => (
+			<section>
+				<Box>{on ? <b>yes</b> : <i>no</i>}</Box>
+				<p>{on ? "on" : "off"}</p>
+			</section>
+		);`;
+	const flip = () => (globalThis as unknown as { __flip: () => void }).__flip();
+
+	test("update after hydration", async () => {
+		const r = render(src);
+		expect(noMarkers(r.hydrated.innerHTML)).toBe(
+			'<section><div class="box"><h3>t</h3><b>yes</b></div><p>on</p></section>',
+		);
+		// render() compiled the module three times; the last one owns __flip,
+		// and it drives the spa copy
+		flip();
+		await runtime.tick();
+		expect(noMarkers(r.spa.innerHTML)).toBe(
+			'<section><div class="box"><h3>t</h3><i>no</i></div><p>off</p></section>',
+		);
+	});
+
+	test("update after hydration (hydrated copy)", async () => {
+		const ssr = String(compile(src, "ssr")());
+		const host = document.createElement("div");
+		host.innerHTML = ssr;
+		runtime.pushHydrationNodes(Array.from(host.childNodes));
+		compile(src, "hydrate")();
+		runtime.popHydrationNodes();
+		flip();
+		await runtime.tick();
+		expect(noMarkers(host.innerHTML)).toBe(
+			'<section><div class="box"><h3>t</h3><i>no</i></div><p>off</p></section>',
+		);
+	});
+});
+
+describe("scoped CSS", () => {
+	test("the server renders the scope class the client uses", () => {
+		const r = render(
+			`const c = "x"; export const App = () => <div class="a"><p class={c}>t</p><i /></div>;`,
+			{ hash: "s1" },
+		);
+		expect(r.ssr).toBe(
+			'<div class="a s1"><p class="x s1">t</p><i class="s1"></i></div>',
+		);
+		expect(r.spa.innerHTML).toBe(r.ssr);
+	});
+});
+
+describe("$state.raw", () => {
+	test("renders on the server and updates when replaced", async () => {
+		const src = `let items = $state.raw([1, 2]);
+			globalThis.__replace = () => { items = [...items, 3]; };
+			globalThis.__mutate = () => { items.push(99); };
+			export const App = () => <p>{items.length}: {items.join(",")}</p>;`;
+		const r = expectAll(src, "<p>2: 1,2</p>");
+		const g = globalThis as unknown as Record<string, () => void>;
+		// no proxy: mutating in place is invisible to the DOM
+		g.__mutate();
+		await runtime.tick();
+		expect(noMarkers(r.spa.innerHTML)).toBe("<p>2: 1,2</p>");
+		// replacing the value is what updates it
+		g.__replace();
+		await runtime.tick();
+		expect(noMarkers(r.spa.innerHTML)).toBe("<p>4: 1,2,99,3</p>");
+	});
+});
+
+describe("keyed lists after hydration", () => {
+	// server-rendered rows carry data-key; rows the client creates don't need it
+	const plain = (html: string) =>
+		noMarkers(html).replace(/ data-key="[^"]*"/g, "");
+	const g = globalThis as unknown as Record<string, () => void>;
+
+	function hydrated(src: string) {
+		const ssr = String(compile(src, "ssr")());
+		const host = document.createElement("div");
+		host.innerHTML = ssr;
+		runtime.pushHydrationNodes(Array.from(host.childNodes));
+		compile(src, "hydrate")();
+		runtime.popHydrationNodes();
+		return host;
+	}
+
+	test("listeners and effects inside server-rendered rows work", async () => {
+		const host =
+			hydrated(`let items = $state([{ id: 1, done: false }, { id: 2, done: false }]);
+			export const App = () => (
+				<ul>{items.map((it) => (
+					<li key={it.id}><button onClick={() => (it.done = !it.done)}>{it.done ? "done" : "todo"}</button></li>
+				))}</ul>
+			);`);
+		host.querySelectorAll("button")[1]!.click();
+		await runtime.tick();
+		expect(plain(host.innerHTML)).toBe(
+			"<ul><li><button>todo</button></li><li><button>done</button></li></ul>",
+		);
+	});
+
+	test("push appends a row and keeps the existing nodes", async () => {
+		const host =
+			hydrated(`let items = $state([{ id: 1, t: "a" }, { id: 2, t: "b" }]);
+			globalThis.__push = () => items.push({ id: 3, t: "c" });
+			export const App = () => <main><ul>{items.map((it) => <li key={it.id}>{it.t}</li>)}</ul><p>{items.length}</p></main>;`);
+		const before = Array.from(host.querySelectorAll("li"));
+		g.__push();
+		await runtime.tick();
+		expect(plain(host.innerHTML)).toBe(
+			"<main><ul><li>a</li><li>b</li><li>c</li></ul><p>3</p></main>",
+		);
+		const after = Array.from(host.querySelectorAll("li"));
+		expect(after[0]).toBe(before[0]);
+		expect(after[1]).toBe(before[1]);
+	});
+
+	const rows = `let items = $state([{ id: 1, done: false }, { id: 2, done: false }]);
+		globalThis.__push = () => items.push({ id: 3, done: false });
+		export const App = () => (
+			<ul>{items.map((it) => (
+				<li key={it.id}>
+					<input type="checkbox" bind:checked={it.done} />
+					<button onClick={() => (it.done = !it.done)}>{it.done ? "done" : "todo"}</button>
+				</li>
+			))}</ul>
+		);`;
+	const labels = (host: Element) =>
+		Array.from(host.querySelectorAll("button"), (b) => b.textContent).join(",");
+
+	for (const mode of ["hydrated", "fresh"] as const) {
+		test(`rows stay reactive, before and after a push (${mode})`, async () => {
+			let host: Element;
+			if (mode === "hydrated") host = hydrated(rows);
+			else {
+				host = document.createElement("div");
+				runtime.pushHydrationNodes([]);
+				runtime.insert(host, compile(rows, "hydrate")());
+				runtime.popHydrationNodes();
+			}
+			host.querySelectorAll("button")[1]!.click();
+			await runtime.tick();
+			expect(labels(host)).toBe("todo,done");
+			expect(host.querySelectorAll("input")[1]!.checked).toBe(true);
+
+			g.__push();
+			await runtime.tick();
+			host.querySelectorAll("button")[0]!.click();
+			await runtime.tick();
+			expect(labels(host)).toBe("done,done,todo");
+
+			// bind:checked writes back into the item
+			const box = host.querySelectorAll("input")[2]!;
+			box.checked = true;
+			box.dispatchEvent(new Event("change"));
+			await runtime.tick();
+			expect(labels(host)).toBe("done,done,done");
+		});
+	}
+
+	test("an element after the list is never taken for a new row", async () => {
+		const host = hydrated(`let items = $state([{ id: 1 }]);
+			globalThis.__push = () => items.push({ id: 2 });
+			export const App = () => <ul>{items.map((it) => <li key={it.id}>{it.id}</li>)}<li class="last">end</li></ul>;`);
+		g.__push();
+		await runtime.tick();
+		expect(plain(host.innerHTML)).toBe(
+			'<ul><li>1</li><li>2</li><li class="last">end</li></ul>',
+		);
+	});
+});
+
+describe("reactive props", () => {
+	const g = globalThis as unknown as Record<string, () => void>;
+	const both = async (
+		src: string,
+		html: string,
+		act: () => void,
+		after: string,
+	) => {
+		const r = expectAll(src, html);
+		act();
+		await runtime.tick();
+		// render() compiled the module three times; the last copy (spa) is
+		// the one the globals drive
+		expect(noMarkers(r.spa.innerHTML).replace(/ data-key="[^"]*"/g, "")).toBe(
+			after,
+		);
+	};
+
+	test("a destructured prop follows the state passed in", () =>
+		both(
+			`let count = $state(1);
+			globalThis.__inc = () => count++;
+			const Label = ({ text, unit = "x" }) => <b>{text}{unit}</b>;
+			export const App = () => <p><Label text={count} /></p>;`,
+			"<p><b>1x</b></p>",
+			() => g.__inc!(),
+			"<p><b>2x</b></p>",
+		));
+
+	test("props.name reads follow too", () =>
+		both(
+			`let count = $state(1);
+			globalThis.__inc = () => count++;
+			const Label = (props) => <b class={props.n > 1 ? "many" : "one"}>{props.n}</b>;
+			export const App = () => <p><Label n={count} /></p>;`,
+			'<p><b class="one">1</b></p>',
+			() => g.__inc!(),
+			'<p><b class="many">2</b></p>',
+		));
+
+	test("bind: on a prop's field writes back to the state", async () => {
+		const r = expectAll(
+			`let books = $state([{ id: 1, read: false }]);
+			const Row = ({ book }) => <li><input type="checkbox" bind:checked={book.read} />{book.read ? "read" : "unread"}</li>;
+			export const App = () => <ul>{books.map((b) => <Row key={b.id} book={b} />)}</ul>;`,
+			'<ul><li><input type="checkbox">unread</li></ul>',
+		);
+		for (const host of [r.hydrated, r.spa]) {
+			const box = host.querySelector("input")!;
+			box.checked = true;
+			box.dispatchEvent(new Event("change"));
+			await runtime.tick();
+			expect(host.querySelector("li")!.textContent).toBe("read");
+		}
+	});
+
+	test("a list item passed to a row component stays live", () =>
+		both(
+			`let books = $state([{ id: 1, read: false }]);
+			globalThis.__read = () => { books[0].read = true; };
+			const Row = ({ book }) => <li class={book.read ? "read" : ""}>{book.read ? "read" : "unread"}</li>;
+			export const App = () => <ul>{books.map((b) => <Row key={b.id} book={b} />)}</ul>;`,
+			'<ul><li class="">unread</li></ul>',
+			() => g.__read!(),
+			'<ul><li class="read">read</li></ul>',
+		));
+});
+
+describe("slots side by side", () => {
+	test("a prop slot next to a state slot keeps its own markers", async () => {
+		const g = globalThis as unknown as Record<string, () => void>;
+		const src = `let count = $state(1);
+			globalThis.__bump = () => count++;
+			const Pair = ({ n }) => {
+				let doubled = $derived(n * 2);
+				return <p>{n} / {doubled}</p>;
+			};
+			export const App = () => <Pair n={count} />;`;
+		const r = expectAll(src, "<p>1 / 2</p>");
+		g.__bump!();
+		await runtime.tick();
+		expect(noMarkers(r.spa.innerHTML)).toBe("<p>2 / 4</p>");
+
+		// and on hydrated markup with effects deferred, as grimoire hydrates
+		const host = document.createElement("div");
+		host.innerHTML = String(compile(src, "ssr")());
+		const flags = globalThis as { __sigilDeferEffects?: boolean };
+		runtime.pushHydrationNodes(Array.from(host.childNodes));
+		flags.__sigilDeferEffects = true;
+		try {
+			compile(src, "hydrate")();
+		} finally {
+			flags.__sigilDeferEffects = false;
+			runtime.popHydrationNodes();
+		}
+		runtime.flushDeferredEffects();
+		expect(noMarkers(host.innerHTML)).toBe("<p>1 / 2</p>");
+		g.__bump!();
+		await runtime.tick();
+		expect(noMarkers(host.innerHTML)).toBe("<p>2 / 4</p>");
+	});
+});
+
+describe("state imported from another module", () => {
+	function evalModule(
+		source: string,
+		names: string[],
+		inject: Record<string, unknown> = {},
+	) {
+		const code = transformSync(source, {
+			plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { mode: "hydrate" }]],
+			filename: "m.tsx",
+		})!.code!;
+		const body = code
+			.replace(/import\s*\{[^}]*\}\s*from\s*["'][^"']+["'];?/g, "")
+			.replace(/^export\s+/gm, "");
+		return new Function(
+			"document",
+			...Object.keys(runtime),
+			...Object.keys(inject),
+			`${body};\nreturn { ${names.join(", ")} };`,
+		)(globalThis.document, ...Object.values(runtime), ...Object.values(inject));
+	}
+
+	test("JSX reading an imported $store updates", async () => {
+		const { cart } = evalModule(`export let cart = $store({ items: [] });`, [
+			"cart",
+		]);
+		const { App } = evalModule(
+			`import { cart } from "./cart";
+			export const App = () => (
+				<p class={cart.items.length ? "full" : "empty"}>
+					{cart.items.length} items: {cart.items.join(",")}
+				</p>
+			);`,
+			["App"],
+			{ cart },
+		);
+		const host = document.createElement("div");
+		runtime.pushHydrationNodes([]);
+		runtime.insert(host, App());
+		runtime.popHydrationNodes();
+		expect(noMarkers(host.innerHTML)).toBe('<p class="empty">0 items: </p>');
+		cart.items.push("a", "b");
+		await runtime.tick();
+		expect(noMarkers(host.innerHTML)).toBe('<p class="full">2 items: a,b</p>');
+	});
+
+	test("an imported primitive $store reads as its value", async () => {
+		const { count, bump } = evalModule(
+			`export let count = $store(0);
+			export function bump() { count++; }`,
+			["count", "bump"],
+		);
+		const { App } = evalModule(
+			`import { bump, count } from "./counter";
+			export const App = () => {
+				let doubled = $derived(count * 2);
+				return <p onClick={bump}>{count} / {doubled}</p>;
+			};`,
+			["App"],
+			{ count, bump },
+		);
+		const host = document.createElement("div");
+		runtime.pushHydrationNodes([]);
+		runtime.insert(host, App());
+		runtime.popHydrationNodes();
+		expect(noMarkers(host.innerHTML)).toBe("<p>0 / 0</p>");
+		(host.firstChild as HTMLElement).click();
+		bump();
+		await runtime.tick();
+		expect(noMarkers(host.innerHTML)).toBe("<p>2 / 4</p>");
+	});
+});