@sigil-dev/compiler 0.9.5 → 0.9.6

package/test/hydration.test.ts

@@ -1,147 +1,276 @@
-import { describe, expect, test } from "bun:test";
-import { transformSync } from "@babel/core";
-import sigilPlugin from "../src/babel/index.ts";
-
-function transform(
-	source: string,
-	opts?: { mode?: "dom" | "ssr" | "hydrate" },
-) {
-	const result = transformSync(source, {
-		plugins: [
-			"@babel/plugin-syntax-jsx",
-			[sigilPlugin, { mode: opts?.mode ?? "dom" }],
-		],
-		filename: "test.tsx",
-	});
-	return result!.code!;
-}
-
-describe("Hydration", () => {
-	test("element uses claim instead of createElement", () => {
-		const code = transform(`const el = <div></div>`, { mode: "hydrate" });
-		expect(code).toContain("claim(");
-		expect(code).not.toContain("createElement");
-	});
-
-	test("nested elements use claim with scoped pools", () => {
-		const code = transform(`const el = <div><span></span></div>`, {
-			mode: "hydrate",
-		});
-		// Should claim div from root __nodes pool (no parent for root)
-		expect(code).toContain('claim(__nodes, "div")');
-		// Should scope to div's children (genId produces _el1 for pool)
-		expect(code).toContain("Array.from(_el0.childNodes)");
-		// Should claim span from div's child pool with parent for SPA fallback
-		expect(code).toContain('claim(_el1, "span", _el0)');
-	});
-
-	test("static text creates text node only when pool is empty (SPA nav)", () => {
-		const code = transform(`const el = <div>Hello</div>`, { mode: "hydrate" });
-		// Static text: SSR hydration leaves it in DOM; SPA nav creates it when pool is empty
-		expect(code).not.toContain("claimText(");
-		// Should emit a conditional createTextNode guarded by pool.length === 0
-		expect(code).toContain("createTextNode");
-		expect(code).toContain(".length === 0");
-	});
-
-	test("reactive text node uses claimComment anchor + Text check for hydration", () => {
-		const code = transform(
-			`let name = $state('Alice'); const el = <span>{name}</span>`,
-			{ mode: "hydrate" },
-		);
-		// Dynamic text: claims <!--g--> as anchor (fixes adjacent-text bug vs DOM walk)
-		// then gets nextSibling; creates text node if it's not a Text (SPA navigation)
-		expect(code).toContain("claimComment(");
-		expect(code).toContain("createEffect");
-		expect(code).toContain("instanceof Text");
-	});
-
-	test("attributes still work in hydrate mode", () => {
-		const code = transform(`const el = <div class="foo" id="bar"></div>`, {
-			mode: "hydrate",
-		});
-		expect(code).toContain("claim(");
-		expect(code).toContain('className = "foo"');
-		expect(code).toContain('id = "bar"');
-	});
-
-	test("event handlers still attached in hydrate mode", () => {
-		const code = transform(
-			`const el = <button onClick={() => {}}>Click</button>`,
-			{ mode: "hydrate" },
-		);
-		expect(code).toContain("claim(");
-		expect(code).toContain("addEventListener");
-	});
-
-	test("no unconditional append calls in hydrate mode", () => {
-		const code = transform(`const el = <div><span></span></div>`, {
-			mode: "hydrate",
-		});
-		// Elements are claimed from pool — no unconditional appends for elements
-		// (static text does emit a conditional .append guarded by pool.length === 0)
-		expect(code).not.toContain('claim(__nodes, "div").append(');
-	});
-
-	test("dom mode still uses createElement (no regression)", () => {
-		const code = transform(`const el = <div></div>`, { mode: "dom" });
-		expect(code).toContain("createElement");
-		expect(code).not.toContain("claim(");
-	});
-
-	test("dom mode still appends children (no regression)", () => {
-		const code = transform(`const el = <div><span></span></div>`, {
-			mode: "dom",
-		});
-		expect(code).toContain(".append(");
-	});
-
-	test("three levels deep: div > p > span", () => {
-		const code = transform(`const el = <div><p><span></span></p></div>`, {
-			mode: "hydrate",
-		});
-		// Three scopes (Array.from)
-		const scopes = code.match(/Array\.from\(.*\.childNodes\)/g);
-		expect(scopes?.length).toBe(3);
-		// Root claims from __nodes (no parent), children use generated pool names with parent
-		expect(code).toContain('claim(__nodes, "div")');
-		expect(code).toContain('claim(_el1, "p", _el0)');
-		expect(code).toContain('claim(_el3, "span", _el2)');
-	});
-
-	test("imports claim and claimText from @sigil-dev/runtime", () => {
-		const code = transform(`const el = <div></div>`, { mode: "hydrate" });
-		expect(code).toContain(
-			"createSignal, createRawSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, insert, applyDirective, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, untrack, createRoot, createEffectPre, createInspectEffect, withEffectScope, mountTransition, removeAnimated",
-		);
-	});
-
-	test("dom mode does not import claim/claimText", () => {
-		const code = transform(`const el = <div></div>`, { mode: "dom" });
-		// claim/claimText are imported but unused — tree-shaking removes them
-		// Actually, they're always imported. That's fine — bundlers tree-shake.
-		// Just verify createElement is used
-		expect(code).toContain("createElement");
-	});
-
-	test("reactive attribute still wraps in createEffect", () => {
-		const code = transform(
-			`let cls = $state('a'); const el = <div class={cls}></div>`,
-			{ mode: "hydrate" },
-		);
-		expect(code).toContain("claim(");
-		expect(code).toContain("createEffect");
-	});
-
-	test("components in hydrate mode pass children as props", () => {
-		const code = transform(
-			`const App = (props) => <div>{props.children}</div>;
-			 const el = <App><span>Hi</span></App>`,
-			{ mode: "hydrate" },
-		);
-		// Component still calls function
-		expect(code).toContain("App(");
-		// Inner div uses claim
-		expect(code).toContain('claim(__nodes, "div")');
-	});
-});
+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";
+
+function transform(
+	source: string,
+	opts?: { mode?: "dom" | "ssr" | "hydrate" },
+) {
+	const result = transformSync(source, {
+		plugins: [
+			"@babel/plugin-syntax-jsx",
+			[sigilPlugin, { mode: opts?.mode ?? "dom" }],
+		],
+		filename: "test.tsx",
+	});
+	return result!.code!;
+}
+
+/**
+ * Evaluate compiled output and return its exported `App`. SSR output carries
+ * its own `__h`/`__e` helpers; hydrate output imports from the runtime, which
+ * is injected as plain parameters instead.
+ */
+function evalApp(code: string): () => unknown {
+	const body = code
+		.replace(/import\s*\{[^}]*\}\s*from\s*["']@sigil-dev\/runtime["'];?/g, "")
+		.replace(/^export\s+/gm, "");
+	const factory = new Function(
+		"document",
+		...Object.keys(runtime),
+		`${body};\nreturn App;`,
+	);
+	return factory(globalThis.document, ...Object.values(runtime));
+}
+
+describe("Hydration", () => {
+	test("element uses claim instead of createElement", () => {
+		const code = transform(`const el = <div></div>`, { mode: "hydrate" });
+		expect(code).toContain("claim(");
+		expect(code).not.toContain("createElement");
+	});
+
+	test("nested elements use claim with scoped pools", () => {
+		const code = transform(`const el = <div><span></span></div>`, {
+			mode: "hydrate",
+		});
+		// Should claim div from root __nodes pool (no parent for root)
+		expect(code).toContain('claim(__nodes, "div")');
+		// Should scope to div's children (genId produces _el1 for pool)
+		expect(code).toContain("Array.from(_el0.childNodes)");
+		// Should claim span from div's child pool with parent for SPA fallback
+		expect(code).toContain('claim(_el1, "span", _el0)');
+	});
+
+	test("static text creates text node only when pool is empty (SPA nav)", () => {
+		const code = transform(`const el = <div>Hello</div>`, { mode: "hydrate" });
+		// Static text: SSR hydration leaves it in DOM; SPA nav creates it when pool is empty
+		expect(code).not.toContain("claimText(");
+		// Should emit a conditional createTextNode guarded by pool.length === 0
+		expect(code).toContain("createTextNode");
+		expect(code).toContain(".length === 0");
+	});
+
+	test("reactive text node uses claimComment anchor + Text check for hydration", () => {
+		const code = transform(
+			`let name = $state('Alice'); const el = <span>{name}</span>`,
+			{ mode: "hydrate" },
+		);
+		// Dynamic text: claims <!--g--> as anchor (fixes adjacent-text bug vs DOM walk)
+		// then gets nextSibling; creates text node if it's not a Text (SPA navigation)
+		expect(code).toContain("claimComment(");
+		expect(code).toContain("createEffect");
+		expect(code).toContain("instanceof Text");
+	});
+
+	test("attributes still work in hydrate mode", () => {
+		const code = transform(`const el = <div class="foo" id="bar"></div>`, {
+			mode: "hydrate",
+		});
+		expect(code).toContain("claim(");
+		expect(code).toContain('className = "foo"');
+		expect(code).toContain('id = "bar"');
+	});
+
+	test("event handlers still attached in hydrate mode", () => {
+		const code = transform(
+			`const el = <button onClick={() => {}}>Click</button>`,
+			{ mode: "hydrate" },
+		);
+		expect(code).toContain("claim(");
+		expect(code).toContain("addEventListener");
+	});
+
+	test("no unconditional append calls in hydrate mode", () => {
+		const code = transform(`const el = <div><span></span></div>`, {
+			mode: "hydrate",
+		});
+		// Elements are claimed from pool — no unconditional appends for elements
+		// (static text does emit a conditional .append guarded by pool.length === 0)
+		expect(code).not.toContain('claim(__nodes, "div").append(');
+	});
+
+	test("dom mode still uses createElement (no regression)", () => {
+		const code = transform(`const el = <div></div>`, { mode: "dom" });
+		expect(code).toContain("createElement");
+		expect(code).not.toContain("claim(");
+	});
+
+	test("dom mode still appends children (no regression)", () => {
+		const code = transform(`const el = <div><span></span></div>`, {
+			mode: "dom",
+		});
+		expect(code).toContain(".append(");
+	});
+
+	test("three levels deep: div > p > span", () => {
+		const code = transform(`const el = <div><p><span></span></p></div>`, {
+			mode: "hydrate",
+		});
+		// Three scopes (Array.from)
+		const scopes = code.match(/Array\.from\(.*\.childNodes\)/g);
+		expect(scopes?.length).toBe(3);
+		// Root claims from __nodes (no parent), children use generated pool names with parent
+		expect(code).toContain('claim(__nodes, "div")');
+		expect(code).toContain('claim(_el1, "p", _el0)');
+		expect(code).toContain('claim(_el3, "span", _el2)');
+	});
+
+	test("imports claim and claimText from @sigil-dev/runtime", () => {
+		const code = transform(`const el = <div></div>`, { mode: "hydrate" });
+		expect(code).toContain(
+			"createSignal, createRawSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, hydrateSlot, insert, applyDirective, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, untrack, createRoot, createEffectPre, createInspectEffect, withEffectScope, mountTransition, removeAnimated",
+		);
+	});
+
+	test("dom mode does not import claim/claimText", () => {
+		const code = transform(`const el = <div></div>`, { mode: "dom" });
+		// claim/claimText are imported but unused — tree-shaking removes them
+		// Actually, they're always imported. That's fine — bundlers tree-shake.
+		// Just verify createElement is used
+		expect(code).toContain("createElement");
+	});
+
+	test("reactive attribute still wraps in createEffect", () => {
+		const code = transform(
+			`let cls = $state('a'); const el = <div class={cls}></div>`,
+			{ mode: "hydrate" },
+		);
+		expect(code).toContain("claim(");
+		expect(code).toContain("createEffect");
+	});
+
+	test("components in hydrate mode pass children as props", () => {
+		const code = transform(
+			`const App = (props) => <div>{props.children}</div>;
+			 const el = <App><span>Hi</span></App>`,
+			{ mode: "hydrate" },
+		);
+		// Component still calls function
+		expect(code).toContain("App(");
+		// Inner div uses claim
+		expect(code).toContain('claim(__nodes, "div")');
+	});
+
+	test("component children are deferred thunks in hydrate mode", () => {
+		const code = transform(
+			`const Wrap = ({ children }) => <div>{children}</div>;
+			 const el = <Wrap><span>Hi</span></Wrap>`,
+			{ mode: "hydrate" },
+		);
+		// children must not be evaluated at the call site — they claim from the
+		// component's own slot, which the caller cannot see
+		expect(code).toMatch(/children:\s*\[\(\)\s*=>\s*\{/);
+		// the {children} site consumes the SSR slot and hydrates against it
+		expect(code).toContain("hydrateSlot(_el1, _el0, () => children)");
+	});
+
+	test("dom mode still evaluates component children eagerly", () => {
+		const code = transform(
+			`const Wrap = ({ children }) => <div>{children}</div>;
+			 const el = <Wrap><span>Hi</span></Wrap>`,
+			{ mode: "dom" },
+		);
+		expect(code).toMatch(/children:\s*\[\(\(\)\s*=>\s*\{/);
+		expect(code).not.toContain("hydrateSlot(");
+	});
+
+	test("hydrating a component with children leaves the SSR DOM untouched", () => {
+		// Regression: children were claimed from the caller's pool, so a nested
+		// component found no match, built a fresh subtree, and the sibling
+		// element stole the wrapper's own SSR root — every child rendered twice.
+		const src = `
+			function Wrap({ children }) { return <div class="wrap">{children}</div>; }
+			function Item({ label }) { return <p class="item">{label}</p>; }
+			export const App = () => (
+				<section class="sec">
+					<Wrap>
+						<Item label="alpha" />
+						<div class="grid">grid</div>
+					</Wrap>
+				</section>
+			);
+		`;
+		const html = String(evalApp(transform(src, { mode: "ssr" }))());
+		const host = document.createElement("div");
+		host.innerHTML = html;
+
+		const app = evalApp(transform(src, { mode: "hydrate" }));
+		runtime.pushHydrationNodes(Array.from(host.childNodes));
+		app();
+		runtime.popHydrationNodes();
+
+		expect(host.querySelectorAll("div.wrap").length).toBe(1);
+		expect(host.querySelectorAll("p.item").length).toBe(1);
+		expect(host.querySelectorAll("div.grid").length).toBe(1);
+		// perfect hydration: claims only, no re-render
+		expect(host.innerHTML).toBe(html);
+	});
+
+	test("component children render once on an empty pool (SPA navigation)", () => {
+		const src = `
+			function Wrap({ children }) { return <div class="wrap">{children}</div>; }
+			function Item({ label }) { return <p class="item">{label}</p>; }
+			export const App = () => (
+				<section class="sec">
+					<Wrap>
+						<Item label="alpha" />
+					</Wrap>
+				</section>
+			);
+		`;
+		const app = evalApp(transform(src, { mode: "hydrate" }));
+		const host = document.createElement("div");
+		runtime.pushHydrationNodes([]);
+		runtime.insert(host, app());
+		runtime.popHydrationNodes();
+
+		expect(host.querySelectorAll("div.wrap").length).toBe(1);
+		expect(host.querySelectorAll("p.item").length).toBe(1);
+		expect(host.querySelector("p.item")?.textContent).toBe("alpha");
+	});
+
+	test("a static list inside a slot hydrates its SSR items in place", () => {
+		// The slot value must stay lazy: evaluated as a call argument the map
+		// bodies claimed from the enclosing pool, missed the SSR items and
+		// appended fresh copies next to them.
+		const src = `
+			function Wrap({ children }) { return <div class="wrap">{children}</div>; }
+			export const App = () => (
+				<section class="sec">
+					<Wrap>
+						<div class="grid">
+							{["a", "b", "c"].map((c) => <span class="cell">{c}</span>)}
+						</div>
+					</Wrap>
+				</section>
+			);
+		`;
+		const html = String(evalApp(transform(src, { mode: "ssr" }))());
+		const host = document.createElement("div");
+		host.innerHTML = html;
+
+		const app = evalApp(transform(src, { mode: "hydrate" }));
+		runtime.pushHydrationNodes(Array.from(host.childNodes));
+		app();
+		runtime.popHydrationNodes();
+
+		expect(host.querySelectorAll("span.cell").length).toBe(3);
+		expect(
+			Array.from(host.querySelectorAll("span.cell")).map(
+				(el) => el.textContent,
+			),
+		).toEqual(["a", "b", "c"]);
+	});
+});