@sigil-dev/compiler 0.9.4 → 0.9.6

package/test/fragments.test.ts

@@ -1,90 +1,90 @@
-import { describe, expect, test } from "bun:test";
-import { transform } from "./helpers/transform.ts";
-
-describe("Fragments", () => {
-	test("empty fragment", () => {
-		const result = transform(`const el = <></>;`);
-		expect(result).toContain("document.createDocumentFragment()");
-	});
-
-	test("fragment with elements", () => {
-		const result = transform(`const el = <><span>A</span><span>B</span></>;`);
-		expect(result).toContain("document.createDocumentFragment()");
-		expect(result).toContain('document.createElement("span")');
-		expect(result).toContain(".append(");
-	});
-
-	test("fragment in native parent appends all nodes", () => {
-		const result = transform(
-			`const el = <div><><span>A</span><span>B</span></></div>;`,
-		);
-		expect(result).toContain('document.createElement("div")');
-		expect(result).toContain("document.createDocumentFragment()");
-		expect(result).toContain(".append(");
-	});
-
-	test("fragment with mixed children", () => {
-		const result = transform(`const el = <>Hello<span>World</span></>;`);
-		expect(result).toContain("document.createDocumentFragment()");
-		expect(result).toContain('"Hello"');
-		expect(result).toContain('document.createElement("span")');
-	});
-
-	test("fragment with reactive children", () => {
-		const result = transform(`
-            let count = $state(0);
-            const el = <>{count}</>;
-        `);
-		expect(result).toContain("document.createDocumentFragment()");
-		expect(result).toContain("createEffect(");
-		expect(result).toContain("count()");
-	});
-
-	test("fragment returns a single variable", () => {
-		const result = transform(`const el = <><div /></>;`);
-		// Should return a single fragment variable, not an array
-		expect(result).toMatch(/_el\d+ = document\.createDocumentFragment\(\)/);
-	});
-
-	test("nested fragments", () => {
-		const result = transform(
-			`const el = <><><span>A</span></><span>B</span></>;`,
-		);
-		expect(result).toContain("document.createDocumentFragment()");
-	});
-
-	test("fragment with text only", () => {
-		const result = transform(`const el = <>Hello</>;`);
-		expect(result).toContain("document.createDocumentFragment()");
-		expect(result).toContain('"Hello"');
-	});
-
-	test("DOM order: fragment children interleaved with siblings", () => {
-		const result = transform(`
-            const el = (
-                <div>
-                    <><span>a</span><span>b</span></>
-                    <span>c</span>
-                </div>
-            );
-        `);
-		// Compiled output:
-		//   div = createElement("div")
-		//   frag = createDocumentFragment()
-		//   spanA = createElement("span") -> append("a") -> frag.append(spanA)
-		//   spanB = createElement("span") -> append("b") -> frag.append(spanB)
-		//   div.append(frag)  <- browser inlines fragment children
-		//   spanC = createElement("span") -> append("c") -> div.append(spanC)
-		// DOM order: a, b, c (no fragment marker)
-		expect(result).toContain("document.createDocumentFragment()");
-		// Fragment is appended to div (not span c before fragment)
-		// div.append(frag) should come before div.append(spanC)
-		const fragAppendIdx = result.indexOf(".append(_el1)");
-		const spanCAppendIdx = result.indexOf("_el0.append(_el4)");
-		expect(fragAppendIdx).toBeLessThan(spanCAppendIdx);
-		// Span a and b go into fragment, span c goes into div directly
-		expect(result).toContain('createTextNode("a")');
-		expect(result).toContain('createTextNode("b")');
-		expect(result).toContain('createTextNode("c")');
-	});
-});
+import { describe, expect, test } from "bun:test";
+import { transform } from "./helpers/transform.ts";
+
+describe("Fragments", () => {
+	test("empty fragment", () => {
+		const result = transform(`const el = <></>;`);
+		expect(result).toContain("document.createDocumentFragment()");
+	});
+
+	test("fragment with elements", () => {
+		const result = transform(`const el = <><span>A</span><span>B</span></>;`);
+		expect(result).toContain("document.createDocumentFragment()");
+		expect(result).toContain('document.createElement("span")');
+		expect(result).toContain(".append(");
+	});
+
+	test("fragment in native parent appends all nodes", () => {
+		const result = transform(
+			`const el = <div><><span>A</span><span>B</span></></div>;`,
+		);
+		expect(result).toContain('document.createElement("div")');
+		expect(result).toContain("document.createDocumentFragment()");
+		expect(result).toContain(".append(");
+	});
+
+	test("fragment with mixed children", () => {
+		const result = transform(`const el = <>Hello<span>World</span></>;`);
+		expect(result).toContain("document.createDocumentFragment()");
+		expect(result).toContain('"Hello"');
+		expect(result).toContain('document.createElement("span")');
+	});
+
+	test("fragment with reactive children", () => {
+		const result = transform(`
+            let count = $state(0);
+            const el = <>{count}</>;
+        `);
+		expect(result).toContain("document.createDocumentFragment()");
+		expect(result).toContain("createEffect(");
+		expect(result).toContain("count()");
+	});
+
+	test("fragment returns a single variable", () => {
+		const result = transform(`const el = <><div /></>;`);
+		// Should return a single fragment variable, not an array
+		expect(result).toMatch(/_el\d+ = document\.createDocumentFragment\(\)/);
+	});
+
+	test("nested fragments", () => {
+		const result = transform(
+			`const el = <><><span>A</span></><span>B</span></>;`,
+		);
+		expect(result).toContain("document.createDocumentFragment()");
+	});
+
+	test("fragment with text only", () => {
+		const result = transform(`const el = <>Hello</>;`);
+		expect(result).toContain("document.createDocumentFragment()");
+		expect(result).toContain('"Hello"');
+	});
+
+	test("DOM order: fragment children interleaved with siblings", () => {
+		const result = transform(`
+            const el = (
+                <div>
+                    <><span>a</span><span>b</span></>
+                    <span>c</span>
+                </div>
+            );
+        `);
+		// Compiled output:
+		//   div = createElement("div")
+		//   frag = createDocumentFragment()
+		//   spanA = createElement("span") -> append("a") -> frag.append(spanA)
+		//   spanB = createElement("span") -> append("b") -> frag.append(spanB)
+		//   div.append(frag)  <- browser inlines fragment children
+		//   spanC = createElement("span") -> append("c") -> div.append(spanC)
+		// DOM order: a, b, c (no fragment marker)
+		expect(result).toContain("document.createDocumentFragment()");
+		// Fragment is appended to div (not span c before fragment)
+		// div.append(frag) should come before div.append(spanC)
+		const fragAppendIdx = result.indexOf(".append(_el1)");
+		const spanCAppendIdx = result.indexOf("_el0.append(_el4)");
+		expect(fragAppendIdx).toBeLessThan(spanCAppendIdx);
+		// Span a and b go into fragment, span c goes into div directly
+		expect(result).toContain('createTextNode("a")');
+		expect(result).toContain('createTextNode("b")');
+		expect(result).toContain('createTextNode("c")');
+	});
+});

package/test/helpers/transform.ts

@@ -1,45 +1,45 @@
-import { transformSync } from "@babel/core";
-import sigilPlugin from "../../src/babel/index.ts";
-
-export function transform(code: string, hash?: string) {
-	const plugins: any[] = ["@babel/plugin-syntax-jsx"];
-	if (hash) {
-		plugins.push([sigilPlugin, { hash }]);
-	} else {
-		plugins.push(sigilPlugin);
-	}
-	return (
-		transformSync(code, {
-			plugins,
-			filename: "test.tsx",
-		})?.code ?? ""
-	);
-}
-
-export function transformSSR(code: string) {
-	return (
-		transformSync(code, {
-			plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { mode: "ssr" }]],
-			filename: "test.tsx",
-		})?.code ?? ""
-	);
-}
-export function transformDOM(code: string, hash?: string) {
-	return (
-		transformSync(code, {
-			plugins: [
-				"@babel/plugin-syntax-jsx",
-				[sigilPlugin, { mode: "dom", hash }],
-			],
-			filename: "test.tsx",
-		})?.code ?? ""
-	);
-}
-export function transformAsync(code: string) {
-	return (
-		transformSync(code, {
-			plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { mode: "dom" }]],
-			filename: "test.tsx",
-		})?.code ?? ""
-	);
-}
+import { transformSync } from "@babel/core";
+import sigilPlugin from "../../src/babel/index.ts";
+
+export function transform(code: string, hash?: string) {
+	const plugins: any[] = ["@babel/plugin-syntax-jsx"];
+	if (hash) {
+		plugins.push([sigilPlugin, { hash }]);
+	} else {
+		plugins.push(sigilPlugin);
+	}
+	return (
+		transformSync(code, {
+			plugins,
+			filename: "test.tsx",
+		})?.code ?? ""
+	);
+}
+
+export function transformSSR(code: string) {
+	return (
+		transformSync(code, {
+			plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { mode: "ssr" }]],
+			filename: "test.tsx",
+		})?.code ?? ""
+	);
+}
+export function transformDOM(code: string, hash?: string) {
+	return (
+		transformSync(code, {
+			plugins: [
+				"@babel/plugin-syntax-jsx",
+				[sigilPlugin, { mode: "dom", hash }],
+			],
+			filename: "test.tsx",
+		})?.code ?? ""
+	);
+}
+export function transformAsync(code: string) {
+	return (
+		transformSync(code, {
+			plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { mode: "dom" }]],
+			filename: "test.tsx",
+		})?.code ?? ""
+	);
+}

package/test/hydration.test.ts

@@ -1,5 +1,6 @@
 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(
@@ -16,6 +17,23 @@ function transform(
 	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" });
@@ -112,7 +130,7 @@ describe("Hydration", () => {
 	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",
+			"createSignal, createRawSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, hydrateSlot, insert, applyDirective, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, untrack, createRoot, createEffectPre, createInspectEffect, withEffectScope, mountTransition, removeAnimated",
 		);
 	});
 
@@ -144,4 +162,115 @@ describe("Hydration", () => {
 		// 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"]);
+	});
 });