@sigil-dev/compiler 0.9.2 → 0.9.4

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,48 +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,147 +1,147 @@
-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, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, createEffectPre, createInspectEffect, withEffectScope",
-		);
-	});
-
-	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 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")');
+	});
+});