@sigil-dev/compiler 0.9.4 → 0.9.6

package/src/babel/handlers/ssr/derived.ts

@@ -1,27 +1,27 @@
-import { type NodePath, types as t } from "@babel/core";
-
-export function handleDerivedSSR(
-	declaration: NodePath<t.VariableDeclaration>,
-	declarator: NodePath<t.VariableDeclarator>,
-	init: NodePath<t.CallExpression>,
-	_signals?: Set<string>, // SSR has no reactivity, intentionally unused
-): void {
-	const { id } = declarator.node;
-	if (!t.isIdentifier(id))
-		throw new Error("Destructured $derived not supported");
-
-	// Replace $derived(expr) with () => expr (lazy evaluation)
-	init.replaceWith(
-		t.arrowFunctionExpression([], init.node.arguments[0] as t.Expression),
-	);
-	declaration.node.kind = "const";
-
-	// Replace all references to this variable with () calls
-	const binding = declaration.scope.getBinding(id.name);
-	if (!binding) return;
-	for (const ref of [...binding.referencePaths]) {
-		if (!ref.isIdentifier()) continue;
-		if (ref.parentPath?.isUpdateExpression()) continue;
-		ref.replaceWith(t.callExpression(ref.node, []));
-	}
-}
+import { type NodePath, types as t } from "@babel/core";
+
+export function handleDerivedSSR(
+	declaration: NodePath<t.VariableDeclaration>,
+	declarator: NodePath<t.VariableDeclarator>,
+	init: NodePath<t.CallExpression>,
+	_signals?: Set<string>, // SSR has no reactivity, intentionally unused
+): void {
+	const { id } = declarator.node;
+	if (!t.isIdentifier(id))
+		throw new Error("Destructured $derived not supported");
+
+	// Replace $derived(expr) with () => expr (lazy evaluation)
+	init.replaceWith(
+		t.arrowFunctionExpression([], init.node.arguments[0] as t.Expression),
+	);
+	declaration.node.kind = "const";
+
+	// Replace all references to this variable with () calls
+	const binding = declaration.scope.getBinding(id.name);
+	if (!binding) return;
+	for (const ref of [...binding.referencePaths]) {
+		if (!ref.isIdentifier()) continue;
+		if (ref.parentPath?.isUpdateExpression()) continue;
+		ref.replaceWith(t.callExpression(ref.node, []));
+	}
+}

package/src/babel/handlers/ssr/state.ts

@@ -1,11 +1,11 @@
-import type { NodePath, types as t } from "@babel/core";
-
-export function handleStateSSR(
-	declaration: NodePath<t.VariableDeclaration>,
-	_declarator: NodePath<t.VariableDeclarator>,
-	init: NodePath<t.CallExpression>,
-	_signals?: Set<string>, // SSR has no reactivity. Left in for future reference
-): void {
-	init.replaceWith(init.node.arguments[0] as t.Expression);
-	declaration.node.kind = "let";
-}
+import type { NodePath, types as t } from "@babel/core";
+
+export function handleStateSSR(
+	declaration: NodePath<t.VariableDeclaration>,
+	_declarator: NodePath<t.VariableDeclarator>,
+	init: NodePath<t.CallExpression>,
+	_signals?: Set<string>, // SSR has no reactivity. Left in for future reference
+): void {
+	init.replaceWith(init.node.arguments[0] as t.Expression);
+	declaration.node.kind = "let";
+}

package/src/babel/index.ts

@@ -25,6 +25,14 @@ const SSR_HELPERS = template.statements.ast(`
         if (v?.[__SAFE]) return v.v;
         if (Array.isArray(v)) return v.map(x => x?.[__SAFE] ? x.v : __e(x)).join('');
         if (v === false || v === null || v === undefined) return '';
+        if (typeof v === 'object' && v.constructor === Object) {
+            const UNITLESS = new Set(['animationIterationCount','borderImageOutset','borderImageSlice','borderImageWidth','boxFlex','boxFlexGroup','boxSnapAfterPatch','boxSupress','columnCount','columnFlex','columnFlexGrow','columns','flexGrow','flexPositive','flexShrink','flexNegative','fontWeight','gridArea','gridRow','gridRowEnd','gridRowSpan','gridRowStart','gridColumn','gridColumnEnd','gridColumnSpan','gridColumnStart','lineClamp','lineHeight','opacity','order','orphans','tabSize','widows','zIndex','zoom','fillOpacity','floodOpacity','stopOpacity','strokeDasharray','strokeDashoffset','strokeMiterlimit','strokeOpacity','strokeWidth']);
+            return Object.entries(v).map(([k, val]) => {
+                const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase();
+                if (typeof val === 'number' && !UNITLESS.has(k)) return prop + ':' + val + 'px';
+                return prop + ':' + val;
+            }).join(';');
+        }
         return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
     };
 `);
@@ -174,6 +182,7 @@ export default function sigilPlugin(): PluginObject {
 						"claimText",
 						"claimComment",
 						"hydrateKeyedList",
+						"hydrateSlot",
 						"insert",
 						"applyDirective",
 						"getHydrationNodes",

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

@@ -35,6 +35,27 @@ function attrAccess(varName: string, attrName: string): t.MemberExpression {
 	);
 }
 
+/**
+ * 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 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],
+	);
+}
+
 /**
  * Build an object property key (identifier for valid names, string literal for dashed).
  */
@@ -256,9 +277,7 @@ export function processElement(
 					t.callExpression(t.identifier("mountTransition"), [
 						t.identifier(varName),
 						expr,
-						t.stringLiteral(
-							attrNamespace as "transition" | "in" | "out",
-						),
+						t.stringLiteral(attrNamespace as "transition" | "in" | "out"),
 					]),
 				),
 			);
@@ -480,14 +499,35 @@ 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(
+						t.assignmentExpression(
+							"=",
+							attrAccess(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))
+						: t.assignmentExpression(
+								"=",
+								attrAccess(varName, realAttr),
+								attr.value,
+							),
 				),
 			);
 		} else if (t.isJSXExpressionContainer(attr.value)) {
@@ -571,7 +611,7 @@ export function processElement(
 						),
 					);
 				} else {
-					// createEffect(() => varName.realAttr = expr)
+					// createEffect(() => setAttribute/prop = expr)
 					statements.push(
 						t.expressionStatement(
 							t.callExpression(t.identifier("createEffect"), [
@@ -579,11 +619,13 @@ export function processElement(
 									[],
 									t.blockStatement([
 										t.expressionStatement(
-											t.assignmentExpression(
-												"=",
-												attrAccess(varName, realAttr),
-												expr,
-											),
+											isDashedAttr(realAttr)
+												? setAttrCall(varName, realAttr, expr)
+												: t.assignmentExpression(
+														"=",
+														attrAccess(varName, realAttr),
+														expr,
+													),
 										),
 									]),
 								),
@@ -592,10 +634,16 @@ export function processElement(
 					);
 				}
 			} else {
-				// varName.realAttr = expr
+				// setAttribute/varName.realAttr = expr
 				statements.push(
 					t.expressionStatement(
-						t.assignmentExpression("=", attrAccess(varName, realAttr), expr),
+						isDashedAttr(realAttr)
+							? setAttrCall(varName, realAttr, expr)
+							: t.assignmentExpression(
+									"=",
+									attrAccess(varName, realAttr),
+									expr,
+								),
 					),
 				);
 			}
@@ -795,41 +843,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/index.ts

@@ -1,2 +1,2 @@
-export { processElement } from "./element";
-export { processFragment } from "./fragment";
+export { processElement } from "./element";
+export { processFragment } from "./fragment";