@sigil-dev/compiler 0.9.5 → 0.9.7

package/src/babel/jsx/anchor-mount.ts

@@ -178,8 +178,24 @@ export function buildAnchorMount(
 		);
 	}
 
+	// typeof x === "function" ? x() : x — hydrate-mode component children are
+	// thunks, so a dynamic slot must call them instead of stringifying them.
+	const unwrapThunk = (name: string): t.Expression =>
+		t.conditionalExpression(
+			t.binaryExpression(
+				"===",
+				t.unaryExpression("typeof", t.identifier(name)),
+				t.stringLiteral("function"),
+			),
+			t.callExpression(t.identifier(name), []),
+			t.identifier(name),
+		);
+
 	// function _mountFn(_v, _a) { ... }
 	const mountBody = t.blockStatement([
+		t.expressionStatement(
+			t.assignmentExpression("=", t.identifier("_v"), unwrapThunk("_v")),
+		),
 		t.variableDeclaration("const", [
 			t.variableDeclarator(t.identifier("_nodes"), t.arrayExpression([])),
 		]),
@@ -190,11 +206,18 @@ export function buildAnchorMount(
 			),
 			t.blockStatement([
 				t.forOfStatement(
-					t.variableDeclaration("const", [
+					t.variableDeclaration("let", [
 						t.variableDeclarator(t.identifier("_item")),
 					]),
 					t.identifier("_v"),
 					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.identifier("_item"),
+								unwrapThunk("_item"),
+							),
+						),
 						t.variableDeclaration("const", [
 							t.variableDeclarator(
 								t.identifier("_n"),

package/src/babel/jsx/children.ts

@@ -5,6 +5,13 @@ import { processFragment } from "./fragment";
 /**
  * Collect children from a JSX element into a children expression.
  * Returns null if no meaningful children exist.
+ *
+ * DOM mode evaluates each JSX child immediately — the component receives real
+ * nodes. Hydrate mode emits thunks instead: a component's children live inside
+ * *its* root element, a subtree the call site cannot see, so they must claim
+ * from the pool that `hydrateSlot` pushes at the `{children}` site rather than
+ * from the caller's pool. Evaluating them eagerly here made them steal the
+ * component's own SSR root and re-render it (double render).
  */
 export function collectChildren(
 	node: t.JSXElement,
@@ -17,95 +24,72 @@ export function collectChildren(
 ): t.Expression | null {
 	const childrenElements: t.Expression[] = [];
 	let hasOnlyText = true;
+	// Deferred children open their own scope from the hydration stack.
+	const childNodesVar = hydrate ? "__nodes" : nodesVar;
 
 	for (const child of node.children) {
 		if (t.isJSXText(child)) {
 			const text = child.value.trim();
 			if (!text) continue;
 			childrenElements.push(t.stringLiteral(text));
-		} else if (t.isJSXElement(child) || t.isJSXFragment(child)) {
-			hasOnlyText = false;
-			const childStatements: t.Statement[] = [];
-			let childVar: string;
-			if (t.isJSXElement(child)) {
-				childVar = processElement(
-					child,
+			continue;
+		}
+
+		let jsx: t.JSXElement | t.JSXFragment | null = null;
+		if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+			jsx = child;
+		} else if (t.isJSXExpressionContainer(child)) {
+			const expr = child.expression;
+			if (t.isJSXEmptyExpression(expr)) continue;
+			if (t.isJSXElement(expr) || t.isJSXFragment(expr)) {
+				jsx = expr;
+			} else {
+				// Plain expression child — pass the value straight through.
+				hasOnlyText = false;
+				childrenElements.push(expr);
+				continue;
+			}
+		} else {
+			continue;
+		}
+
+		hasOnlyText = false;
+		const childStatements: t.Statement[] = [];
+		const childVar = t.isJSXElement(jsx)
+			? processElement(
+					jsx,
 					childStatements,
 					genId,
 					signals,
 					hash,
 					hydrate,
-					nodesVar,
-				);
-			} else {
-				childVar = processFragment(
-					child,
+					childNodesVar,
+				)
+			: processFragment(
+					jsx,
 					childStatements,
 					genId,
 					signals,
 					hash,
 					hydrate,
-					nodesVar,
+					childNodesVar,
 				);
-			}
-			// Build an IIFE from the child statements
-			childrenElements.push(
-				t.callExpression(
-					t.arrowFunctionExpression(
-						[],
-						t.blockStatement([
-							...childStatements,
-							t.returnStatement(t.identifier(childVar)),
-						]),
+
+		const body: t.Statement[] = [];
+		if (hydrate) {
+			// const __nodes = getHydrationNodes() — resolved when the thunk runs
+			body.push(
+				t.variableDeclaration("const", [
+					t.variableDeclarator(
+						t.identifier("__nodes"),
+						t.callExpression(t.identifier("getHydrationNodes"), []),
 					),
-					[],
-				),
+				]),
 			);
-		} else if (t.isJSXExpressionContainer(child)) {
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr) || t.isJSXFragment(expr)) {
-				hasOnlyText = false;
-				const childStatements: t.Statement[] = [];
-				let childVar: string;
-				if (t.isJSXElement(expr)) {
-					childVar = processElement(
-						expr,
-						childStatements,
-						genId,
-						signals,
-						hash,
-						hydrate,
-						nodesVar,
-					);
-				} else {
-					childVar = processFragment(
-						expr,
-						childStatements,
-						genId,
-						signals,
-						hash,
-						hydrate,
-						nodesVar,
-					);
-				}
-				childrenElements.push(
-					t.callExpression(
-						t.arrowFunctionExpression(
-							[],
-							t.blockStatement([
-								...childStatements,
-								t.returnStatement(t.identifier(childVar)),
-							]),
-						),
-						[],
-					),
-				);
-			} else {
-				hasOnlyText = false;
-				// For dynamic expressions, just pass the expression directly
-				childrenElements.push(expr);
-			}
 		}
+		body.push(...childStatements, t.returnStatement(t.identifier(childVar)));
+		const thunk = t.arrowFunctionExpression([], t.blockStatement(body));
+		childrenElements.push(hydrate ? thunk : t.callExpression(thunk, []));
 	}
 
 	if (childrenElements.length === 0) return null;

package/src/babel/jsx/element.ts

@@ -20,19 +20,43 @@ import {
 } from "./utils";
 
 /**
- * Build a property-access expression for a JSX attribute name.
- * Dashed names (data-*, aria-*) require computed access (e.g. el["data-id"])
- * because t.identifier() rejects names with dashes.
+ * Dashed names (data-*, aria-*, custom attributes) have no IDL property —
+ * `el["data-x"] = v` sets a bare JS property the DOM never reflects, so the
+ * attribute is invisible to selectors, getAttribute, and CSS. They must go
+ * through setAttribute.
  */
-function attrAccess(varName: string, attrName: string): t.MemberExpression {
-	if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
-		return t.memberExpression(t.identifier(varName), t.identifier(attrName));
-	}
-	return t.memberExpression(
+function isDashedAttr(attrName: string): boolean {
+	return attrName.includes("-");
+}
+
+function setAttrCall(
+	varName: string,
+	attrName: string,
+	value: t.Expression,
+): t.CallExpression {
+	return t.callExpression(
+		t.memberExpression(t.identifier(varName), t.identifier("setAttribute")),
+		[t.stringLiteral(attrName), value],
+	);
+}
+
+/**
+ * Route a prop write through the runtime setProp() helper. On HTML elements
+ * this is today's blind `el[name] = value`; on SVG-namespace elements it
+ * goes through setAttribute instead — IDL property assignment throws on real
+ * SVG elements (`svg.width = 15` hits a getter-only property), which crashed
+ * CSR renders the moment claim() started creating true-namespaced SVG.
+ */
+function setPropCall(
+	varName: string,
+	attrName: string,
+	value: t.Expression,
+): t.CallExpression {
+	return t.callExpression(t.identifier("setProp"), [
 		t.identifier(varName),
 		t.stringLiteral(attrName),
-		true,
-	);
+		value,
+	]);
 }
 
 /**
@@ -478,14 +502,27 @@ export function processElement(
 						`Hint: change to a $state() call.`,
 				);
 			}
+		} else if (attr.value === null) {
+			// bare attribute (<input disabled>, <div data-beacon>)
+			if (isDashedAttr(realAttr)) {
+				statements.push(
+					t.expressionStatement(
+						setAttrCall(varName, realAttr, t.stringLiteral("")),
+					),
+				);
+			} else {
+				statements.push(
+					t.expressionStatement(
+						setPropCall(varName, realAttr, t.booleanLiteral(true)),
+					),
+				);
+			}
 		} else if (t.isStringLiteral(attr.value)) {
 			statements.push(
 				t.expressionStatement(
-					t.assignmentExpression(
-						"=",
-						attrAccess(varName, realAttr),
-						attr.value,
-					),
+					isDashedAttr(realAttr)
+						? setAttrCall(varName, realAttr, t.stringLiteral(attr.value.value))
+						: setPropCall(varName, realAttr, attr.value),
 				),
 			);
 		} else if (t.isJSXExpressionContainer(attr.value)) {
@@ -569,7 +606,7 @@ export function processElement(
 						),
 					);
 				} else {
-					// createEffect(() => varName.realAttr = expr)
+					// createEffect(() => setAttribute/prop = expr)
 					statements.push(
 						t.expressionStatement(
 							t.callExpression(t.identifier("createEffect"), [
@@ -577,11 +614,9 @@ export function processElement(
 									[],
 									t.blockStatement([
 										t.expressionStatement(
-											t.assignmentExpression(
-												"=",
-												attrAccess(varName, realAttr),
-												expr,
-											),
+											isDashedAttr(realAttr)
+												? setAttrCall(varName, realAttr, expr)
+												: setPropCall(varName, realAttr, expr),
 										),
 									]),
 								),
@@ -590,10 +625,12 @@ export function processElement(
 					);
 				}
 			} else {
-				// varName.realAttr = expr
+				// setAttribute for dashed, runtime setProp (attribute-safe on SVG) otherwise
 				statements.push(
 					t.expressionStatement(
-						t.assignmentExpression("=", attrAccess(varName, realAttr), expr),
+						isDashedAttr(realAttr)
+							? setAttrCall(varName, realAttr, expr)
+							: setPropCall(varName, realAttr, expr),
 					),
 				);
 			}
@@ -793,41 +830,19 @@ export function processElement(
 			} else {
 				// non-reactive: set once
 				if (hydrate) {
-					const claimCommentArgs: t.Expression[] = [
-						t.identifier(childNodesVar!),
-						t.stringLiteral("g"),
-					];
-					if (varName) claimCommentArgs.push(t.identifier(varName));
-					const poolLen = t.memberExpression(
-						t.identifier(childNodesVar!),
-						t.identifier("length"),
-					);
-					// Pool has elements (initial load): SSR content already in DOM, just consume delimiters
-					const claimG = t.expressionStatement(
-						t.callExpression(t.identifier("claimComment"), claimCommentArgs),
-					);
-					const claimSlashG = (() => {
-						const args: t.Expression[] = [
-							t.identifier(childNodesVar!),
-							t.stringLiteral("/g"),
-						];
-						if (varName) args.push(t.identifier(varName));
-						return t.expressionStatement(
-							t.callExpression(t.identifier("claimComment"), args),
-						);
-					})();
-					// Pool empty (SPA nav): create and insert fresh elements
-					const insertCall = t.expressionStatement(
-						t.callExpression(t.identifier("insert"), [
-							t.identifier(varName),
-							expr,
-						]),
-					);
+					// hydrateSlot consumes the <!--g-->…<!--/g--> run and runs the
+					// value against the content SSR put inside it, so both deferred
+					// component children and inline JSX (`{list.map(…)}`) claim that
+					// subtree. The value must stay lazy: evaluating it as an argument
+					// would claim from the enclosing pool instead. Empty pool
+					// (SPA nav) falls back to a fresh insert.
 					statements.push(
-						t.ifStatement(
-							t.binaryExpression(">", poolLen, t.numericLiteral(0)),
-							t.blockStatement([claimG, claimSlashG]),
-							t.blockStatement([insertCall]),
+						t.expressionStatement(
+							t.callExpression(t.identifier("hydrateSlot"), [
+								t.identifier(childNodesVar!),
+								t.identifier(varName),
+								t.arrowFunctionExpression([], expr),
+							]),
 						),
 					);
 				} else {

package/src/babel/jsx/fragment.ts

@@ -217,41 +217,18 @@ export function processFragment(
 				}
 			} else {
 				if (hydrate) {
-					// Non-reactive expression in hydrate fragment
-					const claimCommentArgs: t.Expression[] = [
-						t.identifier(currentNodesVar),
-						t.stringLiteral("g"),
-						t.identifier(effectiveParent),
-					];
-					const poolLen = t.memberExpression(
-						t.identifier(currentNodesVar),
-						t.identifier("length"),
-					);
-					const claimG = t.expressionStatement(
-						t.callExpression(t.identifier("claimComment"), claimCommentArgs),
-					);
-					const claimSlashG = t.expressionStatement(
-						t.callExpression(t.identifier("claimComment"), [
-							t.identifier(currentNodesVar),
-							t.stringLiteral("/g"),
-							t.identifier(effectiveParent),
-						]),
-					);
-					// SPA navigation: pool empty, insert into effectiveParent
-					const elseBranch = t.blockStatement([
+					// Non-reactive expression in hydrate fragment: consume the
+					// <!--g-->…<!--/g--> run and hydrate its content. Kept lazy so
+					// the value claims from the slot, not the enclosing pool;
+					// empty pool (SPA nav) inserts fresh.
+					statements.push(
 						t.expressionStatement(
-							t.callExpression(t.identifier("insert"), [
+							t.callExpression(t.identifier("hydrateSlot"), [
+								t.identifier(currentNodesVar),
 								t.identifier(effectiveParent),
-								expr,
+								t.arrowFunctionExpression([], expr),
 							]),
 						),
-					]);
-					statements.push(
-						t.ifStatement(
-							t.binaryExpression(">", poolLen, t.numericLiteral(0)),
-							t.blockStatement([claimG, claimSlashG]),
-							elseBranch,
-						),
 					);
 				} else {
 					statements.push(

package/src/babel/jsx/ssr.ts

@@ -2,6 +2,38 @@ import { types as t } from "@babel/core";
 import { isGlobalComponent } from "../handlers/dom/globals";
 import { getTagName } from "../util/helpers";
 
+/**
+ * Attributes that are on by presence alone: checked="" and even
+ * checked="false" both mean checked, so these can't go through the generic
+ * name="value" path.
+ */
+const BOOLEAN_ATTRS = new Set([
+	"allowfullscreen",
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected",
+]);
+
 const VOID_ELEMENTS = new Set([
 	"area",
 	"base",
@@ -160,6 +192,19 @@ export function processElementSSR(
 
 		if (t.isStringLiteral(attr.value)) {
 			parts.push(` ${domAttr}="${attr.value.value}"`);
+		} else if (
+			t.isJSXExpressionContainer(attr.value) &&
+			BOOLEAN_ATTRS.has(domAttr.toLowerCase())
+		) {
+			// __b: true → bare name, false/null/undefined → omitted, anything
+			// else keeps its value (hidden="until-found"). The generic path
+			// below rendered checked={false} as checked="", i.e. checked.
+			parts.push(
+				t.callExpression(t.identifier("__b"), [
+					t.stringLiteral(domAttr),
+					attr.value.expression as t.Expression,
+				]),
+			);
 		} else if (t.isJSXExpressionContainer(attr.value)) {
 			const expr = attr.value.expression as t.Expression;
 			if (

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" });
@@ -61,8 +79,8 @@ describe("Hydration", () => {
 			mode: "hydrate",
 		});
 		expect(code).toContain("claim(");
-		expect(code).toContain('className = "foo"');
-		expect(code).toContain('id = "bar"');
+		expect(code).toContain('setProp(_el0, "className", "foo")');
+		expect(code).toContain('setProp(_el0, "id", "bar")');
 	});
 
 	test("event handlers still attached in hydrate mode", () => {
@@ -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"]);
+	});
 });