@sigil-dev/compiler 0.4.0 → 0.6.0

package/src/babel/jsx/element.ts

@@ -1,516 +1,520 @@
-import { types as t } from "@babel/core";
-import { buildBind } from "../util/bind";
-import { buildAnchorMount } from "./anchor-mount";
-import { collectChildren } from "./children";
-import { processFragment } from "./fragment";
-import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
-import { buildTextNode } from "./text-node";
-import {
-	ATTR_MAP,
-	buildHydrationScope,
-	containsSignal,
-	getCreateElement,
-	isPrimitive,
-} from "./utils";
-
-/**
- * Add classList.add(hash) statement for scoped CSS.
- */
-function addScopedClass(
-	varName: string,
-	hash: string,
-	statements: t.Statement[],
-): void {
-	statements.push(
-		t.expressionStatement(
-			t.callExpression(
-				t.memberExpression(
-					t.memberExpression(t.identifier(varName), t.identifier("classList")),
-					t.identifier("add"),
-				),
-				[t.stringLiteral(hash)],
-			),
-		),
-	);
-}
-
-export function processElement(
-	node: t.JSXElement,
-	statements: t.Statement[],
-	genId: () => string,
-	signals: Set<string>,
-	hash?: string,
-	hydrate?: boolean,
-	nodesVar?: string,
-	parentVar?: string,
-): string {
-	const varName = genId();
-	const tag = (node.openingElement.name as t.JSXIdentifier).name;
-	const isComponent = /^[A-Z]/.test(tag);
-
-	if (isComponent) {
-		// Component: call the function with a props object
-		const propsObj = t.objectExpression([]);
-
-		// Add attributes to props (including spread)
-		for (const attr of node.openingElement.attributes) {
-			if (t.isJSXSpreadAttribute(attr)) {
-				// {…obj} — spread into props
-				propsObj.properties.push(t.spreadElement(attr.argument));
-				continue;
-			}
-			if (!t.isJSXAttribute(attr)) continue;
-			const attrName = (attr.name as t.JSXIdentifier).name;
-
-			if (t.isStringLiteral(attr.value)) {
-				propsObj.properties.push(
-					t.objectProperty(t.identifier(attrName), attr.value),
-				);
-			} else if (t.isJSXExpressionContainer(attr.value)) {
-				const expr = attr.value.expression as t.Expression;
-				propsObj.properties.push(
-					t.objectProperty(t.identifier(attrName), expr),
-				);
-			}
-		}
-
-		// Add children to props
-		const childrenExpr = collectChildren(
-			node,
-			statements,
-			genId,
-			signals,
-			hash,
-			hydrate,
-			nodesVar,
-		);
-		if (childrenExpr) {
-			propsObj.properties.push(
-				t.objectProperty(t.identifier("children"), childrenExpr),
-			);
-		}
-
-		// const _el0 = TagName({ ...props })
-		statements.push(
-			t.variableDeclaration("const", [
-				t.variableDeclarator(
-					t.identifier(varName),
-					t.callExpression(t.identifier(tag), [propsObj]),
-				),
-			]),
-		);
-
-		return varName;
-	}
-
-	// Native element: claim (hydrate) or create (dom)
-	const currentNodesVar = nodesVar ?? "__nodes";
-	statements.push(
-		t.variableDeclaration("const", [
-			t.variableDeclarator(
-				t.identifier(varName),
-				getCreateElement(
-					tag,
-					!!hydrate,
-					currentNodesVar,
-					hydrate ? parentVar : undefined,
-				),
-			),
-		]),
-	);
-
-	// In hydrate mode, scope to this element's children for descendants
-	let childNodesVar: string | undefined;
-	if (hydrate) {
-		childNodesVar = genId();
-		buildHydrationScope(varName, statements, childNodesVar);
-	}
-
-	// attributes
-	const seenAttrs = new Set<string>();
-	for (const attr of node.openingElement.attributes) {
-		if (t.isJSXSpreadAttribute(attr)) {
-			// {…obj} — spread onto native element
-			statements.push(
-				t.expressionStatement(
-					t.callExpression(t.identifier("Object.assign"), [
-						t.identifier(varName),
-						attr.argument as t.Expression,
-					]),
-				),
-			);
-			continue;
-		}
-		if (!t.isJSXAttribute(attr)) continue;
-		const attrName = (attr.name as t.JSXIdentifier).name;
-		const realAttr = ATTR_MAP[attrName] ?? attrName;
-
-		if (seenAttrs.has(realAttr)) {
-			throw new TypeError(
-				`Duplicate attribute "${realAttr}" (via "${attrName}"). Use class or className, not both.`,
-			);
-		}
-		seenAttrs.add(realAttr);
-		if (attrName === "use") {
-			// use={directive} or use={[directive, params]}
-			const expr = (attr.value as t.JSXExpressionContainer).expression as t.Expression;
-			statements.push(
-				t.expressionStatement(
-					t.callExpression(t.identifier("applyDirective"), [
-						t.identifier(varName),
-						expr,
-					]),
-				),
-			);
-		} else if (/^on[A-Z]/.test(attrName)) {
-			// Standard JSX: onClick, onSubmit, onMouseenter, etc.
-			// Convert camelCase to lowercase: onClick -> click, onMouseenter -> mouseenter
-			const event = attrName.slice(2).toLowerCase();
-			const handler = (attr.value as t.JSXExpressionContainer)
-				.expression as t.Expression;
-			statements.push(
-				t.expressionStatement(
-					t.callExpression(
-						t.memberExpression(
-							t.identifier(varName),
-							t.identifier("addEventListener"),
-						),
-						[t.stringLiteral(event), handler],
-					),
-				),
-			);
-		} else if (attrName.startsWith("bind")) {
-			buildBind(varName, attrName, attr, statements);
-		} else if (t.isStringLiteral(attr.value)) {
-			statements.push(
-				t.expressionStatement(
-					t.assignmentExpression(
-						"=",
-						t.memberExpression(t.identifier(varName), t.identifier(realAttr)),
-						attr.value,
-					),
-				),
-			);
-		} else if (t.isJSXExpressionContainer(attr.value)) {
-			const expr = attr.value.expression as t.Expression;
-			if (containsSignal(expr, signals)) {
-				// Dynamic class with scoped CSS: use classList.value to preserve hash
-				if (attrName === "class" && hash) {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(t.identifier("createEffect"), [
-								t.arrowFunctionExpression(
-									[],
-									t.blockStatement([
-										t.expressionStatement(
-											t.assignmentExpression(
-												"=",
-												t.memberExpression(
-													t.memberExpression(
-														t.identifier(varName),
-														t.identifier("classList"),
-													),
-													t.identifier("value"),
-												),
-												expr,
-											),
-										),
-										t.expressionStatement(
-											t.callExpression(
-												t.memberExpression(
-													t.memberExpression(
-														t.identifier(varName),
-														t.identifier("classList"),
-													),
-													t.identifier("add"),
-												),
-												[t.stringLiteral(hash)],
-											),
-										),
-									]),
-								),
-							]),
-						),
-					);
-				} else {
-					// createEffect(() => varName.realAttr = expr)
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(t.identifier("createEffect"), [
-								t.arrowFunctionExpression(
-									[],
-									t.blockStatement([
-										t.expressionStatement(
-											t.assignmentExpression(
-												"=",
-												t.memberExpression(
-													t.identifier(varName),
-													t.identifier(realAttr),
-												),
-												expr,
-											),
-										),
-									]),
-								),
-							]),
-						),
-					);
-				}
-			} else {
-				// varName.realAttr = expr
-				statements.push(
-					t.expressionStatement(
-						t.assignmentExpression(
-							"=",
-							t.memberExpression(t.identifier(varName), t.identifier(realAttr)),
-							expr,
-						),
-					),
-				);
-			}
-		}
-	}
-
-	// Add scoped CSS hash to classList (if hash is present)
-	if (hash) {
-		addScopedClass(varName, hash, statements);
-	}
-
-	// children
-	for (const child of node.children) {
-		if (t.isJSXElement(child)) {
-			const childVar = processElement(
-				child,
-				statements,
-				genId,
-				signals,
-				hash,
-				hydrate,
-				childNodesVar,
-				hydrate ? varName : undefined,
-			);
-			if (!hydrate) {
-				statements.push(
-					t.expressionStatement(
-						t.callExpression(
-							t.memberExpression(t.identifier(varName), t.identifier("append")),
-							[t.identifier(childVar)],
-						),
-					),
-				);
-			}
-		} else if (t.isJSXFragment(child)) {
-			const childVar = processFragment(
-				child,
-				statements,
-				genId,
-				signals,
-				hash,
-				hydrate,
-				childNodesVar,
-				hydrate ? varName : undefined,
-			);
-			if (!hydrate) {
-				statements.push(
-					t.expressionStatement(
-						t.callExpression(
-							t.memberExpression(t.identifier(varName), t.identifier("append")),
-							[t.identifier(childVar)],
-						),
-					),
-				);
-			}
-		} else if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			if (hydrate) {
-				// SSR hydration: text already in DOM from SSR, do nothing.
-				// SPA navigation: childNodesVar pool is empty, create text node.
-				const poolLen = t.memberExpression(
-					t.identifier(childNodesVar!),
-					t.identifier("length"),
-				);
-				statements.push(
-					t.ifStatement(
-						t.binaryExpression("===", poolLen, t.numericLiteral(0)),
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(t.identifier(varName), t.identifier("append")),
-								[
-									t.callExpression(
-										t.memberExpression(
-											t.identifier("document"),
-											t.identifier("createTextNode"),
-										),
-										[t.stringLiteral(text.replace(/\s*\n\s*/g, " "))],
-									),
-								],
-							),
-						),
-					),
-				);
-			} else {
-				statements.push(
-					t.expressionStatement(
-						t.callExpression(
-							t.memberExpression(t.identifier(varName), t.identifier("append")),
-							[
-								t.callExpression(
-									t.memberExpression(
-										t.identifier("document"),
-										t.identifier("createTextNode"),
-									),
-									[t.stringLiteral(text)],
-								),
-							],
-						),
-					),
-				);
-			}
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				const childVar = processElement(
-					expr,
-					statements,
-					genId,
-					signals,
-					hash,
-					hydrate,
-					childNodesVar,
-					hydrate ? varName : undefined,
-				);
-				if (!hydrate) {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(
-									t.identifier(varName),
-									t.identifier("append"),
-								),
-								[t.identifier(childVar)],
-							),
-						),
-					);
-				}
-			} else if (t.isJSXFragment(expr)) {
-				const childVar = processFragment(
-					expr,
-					statements,
-					genId,
-					signals,
-					hash,
-					hydrate,
-					childNodesVar,
-					hydrate ? varName : undefined,
-				);
-				if (!hydrate) {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(
-									t.identifier(varName),
-									t.identifier("append"),
-								),
-								[t.identifier(childVar)],
-							),
-						),
-					);
-				}
-			} else if (containsSignal(expr, signals)) {
-				if (isPrimitive(expr)) {
-					// fast path: text node + textContent
-					buildTextNode(
-						varName,
-						expr,
-						statements,
-						genId,
-						hydrate,
-						childNodesVar,
-						hydrate ? varName : undefined,
-					);
-				} else {
-					// Check for keyed list pattern
-					const keyed = findKeyedMapExpr(expr, signals);
-					if (keyed) {
-						buildKeyedList(
-							varName,
-							keyed,
-							statements,
-							genId,
-							signals,
-							processElement,
-							hash,
-							hydrate,
-							childNodesVar,
-							hydrate ? varName : undefined,
-						);
-					} else {
-						buildAnchorMount(
-							varName,
-							expr,
-							statements,
-							genId,
-							hydrate,
-							childNodesVar,
-							hydrate ? varName : undefined,
-						);
-					}
-				}
-			} 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,
-						]),
-					);
-					statements.push(
-						t.ifStatement(
-							t.binaryExpression(">", poolLen, t.numericLiteral(0)),
-							t.blockStatement([claimG, claimSlashG]),
-							t.blockStatement([insertCall]),
-						),
-					);
-				} else {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(t.identifier("insert"), [
-								t.identifier(varName),
-								expr,
-							]),
-						),
-					);
-				}
-			}
-		}
-	}
-
-	return varName;
-}
+import { types as t } from "@babel/core";
+import { buildBind } from "../util/bind";
+import { buildAnchorMount } from "./anchor-mount";
+import { collectChildren } from "./children";
+import { processFragment } from "./fragment";
+import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
+import { buildTextNode } from "./text-node";
+import {
+	ATTR_MAP,
+	buildHydrationScope,
+	containsSignal,
+	getCreateElement,
+	isPrimitive,
+} from "./utils";
+
+/**
+ * Add classList.add(hash) statement for scoped CSS.
+ */
+function addScopedClass(
+	varName: string,
+	hash: string,
+	statements: t.Statement[],
+): void {
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(
+				t.memberExpression(
+					t.memberExpression(t.identifier(varName), t.identifier("classList")),
+					t.identifier("add"),
+				),
+				[t.stringLiteral(hash)],
+			),
+		),
+	);
+}
+
+export function processElement(
+	node: t.JSXElement,
+	statements: t.Statement[],
+	genId: () => string,
+	signals: Set<string>,
+	hash?: string,
+	hydrate?: boolean,
+	nodesVar?: string,
+	parentVar?: string,
+): string {
+	const varName = genId();
+	const tag = (node.openingElement.name as t.JSXIdentifier).name;
+	const isComponent = /^[A-Z]/.test(tag);
+
+	if (isComponent) {
+		// Component: call the function with a props object
+		const propsObj = t.objectExpression([]);
+
+		// Add attributes to props (including spread)
+		for (const attr of node.openingElement.attributes) {
+			if (t.isJSXSpreadAttribute(attr)) {
+				// {…obj} — spread into props
+				propsObj.properties.push(t.spreadElement(attr.argument));
+				continue;
+			}
+			if (!t.isJSXAttribute(attr)) continue;
+			const attrName = (attr.name as t.JSXIdentifier).name;
+
+			if (t.isStringLiteral(attr.value)) {
+				propsObj.properties.push(
+					t.objectProperty(t.identifier(attrName), attr.value),
+				);
+			} else if (t.isJSXExpressionContainer(attr.value)) {
+				const expr = attr.value.expression as t.Expression;
+				propsObj.properties.push(
+					t.objectProperty(t.identifier(attrName), expr),
+				);
+			}
+		}
+
+		// Add children to props
+		const childrenExpr = collectChildren(
+			node,
+			statements,
+			genId,
+			signals,
+			hash,
+			hydrate,
+			nodesVar,
+		);
+		if (childrenExpr) {
+			propsObj.properties.push(
+				t.objectProperty(t.identifier("children"), childrenExpr),
+			);
+		}
+
+		// const _el0 = TagName({ ...props })
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(varName),
+					t.callExpression(t.identifier(tag), [propsObj]),
+				),
+			]),
+		);
+
+		return varName;
+	}
+
+	// Native element: claim (hydrate) or create (dom)
+	const currentNodesVar = nodesVar ?? "__nodes";
+	statements.push(
+		t.variableDeclaration("const", [
+			t.variableDeclarator(
+				t.identifier(varName),
+				getCreateElement(
+					tag,
+					!!hydrate,
+					currentNodesVar,
+					hydrate ? parentVar : undefined,
+				),
+			),
+		]),
+	);
+
+	// In hydrate mode, scope to this element's children for descendants
+	let childNodesVar: string | undefined;
+	if (hydrate) {
+		childNodesVar = genId();
+		buildHydrationScope(varName, statements, childNodesVar);
+	}
+
+	// attributes
+	const seenAttrs = new Set<string>();
+	for (const attr of node.openingElement.attributes) {
+		if (t.isJSXSpreadAttribute(attr)) {
+			// {…obj} — spread onto native element
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("Object.assign"), [
+						t.identifier(varName),
+						attr.argument as t.Expression,
+					]),
+				),
+			);
+			continue;
+		}
+		if (!t.isJSXAttribute(attr)) continue;
+		const attrName = (attr.name as t.JSXIdentifier).name;
+		const realAttr = ATTR_MAP[attrName] ?? attrName;
+
+		if (seenAttrs.has(realAttr)) {
+			throw new TypeError(
+				`Duplicate attribute "${realAttr}" (via "${attrName}"). Use class or className, not both.`,
+			);
+		}
+		seenAttrs.add(realAttr);
+		if (attrName === "use") {
+			// use={directive} or use={[directive, params]}
+			const expr = (attr.value as t.JSXExpressionContainer)
+				.expression as t.Expression;
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("applyDirective"), [
+						t.identifier(varName),
+						expr,
+					]),
+				),
+			);
+		} else if (/^on[A-Z]/.test(attrName)) {
+			// Standard JSX: onClick, onSubmit, onMouseenter, etc.
+			// Convert camelCase to lowercase: onClick -> click, onMouseenter -> mouseenter
+			const event = attrName.slice(2).toLowerCase();
+			const handler = (attr.value as t.JSXExpressionContainer)
+				.expression as t.Expression;
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(
+						t.memberExpression(
+							t.identifier(varName),
+							t.identifier("addEventListener"),
+						),
+						[t.stringLiteral(event), handler],
+					),
+				),
+			);
+		} else if (attrName.startsWith("bind")) {
+			buildBind(varName, attrName, attr, statements);
+		} else if (t.isStringLiteral(attr.value)) {
+			statements.push(
+				t.expressionStatement(
+					t.assignmentExpression(
+						"=",
+						t.memberExpression(t.identifier(varName), t.identifier(realAttr)),
+						attr.value,
+					),
+				),
+			);
+		} else if (t.isJSXExpressionContainer(attr.value)) {
+			const expr = attr.value.expression as t.Expression;
+			if (containsSignal(expr, signals)) {
+				// Dynamic class with scoped CSS: use classList.value to preserve hash
+				if (attrName === "class" && hash) {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(t.identifier("createEffect"), [
+								t.arrowFunctionExpression(
+									[],
+									t.blockStatement([
+										t.expressionStatement(
+											t.assignmentExpression(
+												"=",
+												t.memberExpression(
+													t.memberExpression(
+														t.identifier(varName),
+														t.identifier("classList"),
+													),
+													t.identifier("value"),
+												),
+												expr,
+											),
+										),
+										t.expressionStatement(
+											t.callExpression(
+												t.memberExpression(
+													t.memberExpression(
+														t.identifier(varName),
+														t.identifier("classList"),
+													),
+													t.identifier("add"),
+												),
+												[t.stringLiteral(hash)],
+											),
+										),
+									]),
+								),
+							]),
+						),
+					);
+				} else {
+					// createEffect(() => varName.realAttr = expr)
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(t.identifier("createEffect"), [
+								t.arrowFunctionExpression(
+									[],
+									t.blockStatement([
+										t.expressionStatement(
+											t.assignmentExpression(
+												"=",
+												t.memberExpression(
+													t.identifier(varName),
+													t.identifier(realAttr),
+												),
+												expr,
+											),
+										),
+									]),
+								),
+							]),
+						),
+					);
+				}
+			} else {
+				// varName.realAttr = expr
+				statements.push(
+					t.expressionStatement(
+						t.assignmentExpression(
+							"=",
+							t.memberExpression(t.identifier(varName), t.identifier(realAttr)),
+							expr,
+						),
+					),
+				);
+			}
+		}
+	}
+
+	// Add scoped CSS hash to classList (if hash is present)
+	if (hash) {
+		addScopedClass(varName, hash, statements);
+	}
+
+	// children
+	for (const child of node.children) {
+		if (t.isJSXElement(child)) {
+			const childVar = processElement(
+				child,
+				statements,
+				genId,
+				signals,
+				hash,
+				hydrate,
+				childNodesVar,
+				hydrate ? varName : undefined,
+			);
+			if (!hydrate) {
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier(varName), t.identifier("append")),
+							[t.identifier(childVar)],
+						),
+					),
+				);
+			}
+		} else if (t.isJSXFragment(child)) {
+			const childVar = processFragment(
+				child,
+				statements,
+				genId,
+				signals,
+				hash,
+				hydrate,
+				childNodesVar,
+				hydrate ? varName : undefined,
+			);
+			if (!hydrate) {
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier(varName), t.identifier("append")),
+							[t.identifier(childVar)],
+						),
+					),
+				);
+			}
+		} else if (t.isJSXText(child)) {
+			const text = child.value;
+			if (!text.trim()) continue;
+			if (hydrate) {
+				// SSR hydration: text already in DOM from SSR, do nothing.
+				// SPA navigation: childNodesVar pool is empty, create text node.
+				const poolLen = t.memberExpression(
+					t.identifier(childNodesVar!),
+					t.identifier("length"),
+				);
+				statements.push(
+					t.ifStatement(
+						t.binaryExpression("===", poolLen, t.numericLiteral(0)),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier("append"),
+								),
+								[
+									t.callExpression(
+										t.memberExpression(
+											t.identifier("document"),
+											t.identifier("createTextNode"),
+										),
+										[t.stringLiteral(text.replace(/\s*\n\s*/g, " "))],
+									),
+								],
+							),
+						),
+					),
+				);
+			} else {
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier(varName), t.identifier("append")),
+							[
+								t.callExpression(
+									t.memberExpression(
+										t.identifier("document"),
+										t.identifier("createTextNode"),
+									),
+									[t.stringLiteral(text)],
+								),
+							],
+						),
+					),
+				);
+			}
+		} else if (t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			const expr = child.expression as t.Expression;
+			if (t.isJSXElement(expr)) {
+				const childVar = processElement(
+					expr,
+					statements,
+					genId,
+					signals,
+					hash,
+					hydrate,
+					childNodesVar,
+					hydrate ? varName : undefined,
+				);
+				if (!hydrate) {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier("append"),
+								),
+								[t.identifier(childVar)],
+							),
+						),
+					);
+				}
+			} else if (t.isJSXFragment(expr)) {
+				const childVar = processFragment(
+					expr,
+					statements,
+					genId,
+					signals,
+					hash,
+					hydrate,
+					childNodesVar,
+					hydrate ? varName : undefined,
+				);
+				if (!hydrate) {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier("append"),
+								),
+								[t.identifier(childVar)],
+							),
+						),
+					);
+				}
+			} else if (containsSignal(expr, signals)) {
+				if (isPrimitive(expr)) {
+					// fast path: text node + textContent
+					buildTextNode(
+						varName,
+						expr,
+						statements,
+						genId,
+						hydrate,
+						childNodesVar,
+						hydrate ? varName : undefined,
+					);
+				} else {
+					// Check for keyed list pattern
+					const keyed = findKeyedMapExpr(expr, signals);
+					if (keyed) {
+						buildKeyedList(
+							varName,
+							keyed,
+							statements,
+							genId,
+							signals,
+							processElement,
+							hash,
+							hydrate,
+							childNodesVar,
+							hydrate ? varName : undefined,
+						);
+					} else {
+						buildAnchorMount(
+							varName,
+							expr,
+							statements,
+							genId,
+							hydrate,
+							childNodesVar,
+							hydrate ? varName : undefined,
+						);
+					}
+				}
+			} 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,
+						]),
+					);
+					statements.push(
+						t.ifStatement(
+							t.binaryExpression(">", poolLen, t.numericLiteral(0)),
+							t.blockStatement([claimG, claimSlashG]),
+							t.blockStatement([insertCall]),
+						),
+					);
+				} else {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(t.identifier("insert"), [
+								t.identifier(varName),
+								expr,
+							]),
+						),
+					);
+				}
+			}
+		}
+	}
+
+	return varName;
+}