@sigil-dev/compiler 0.9.2 → 0.9.3

package/src/babel/jsx/element.ts

@@ -1,831 +1,831 @@
-import { types as t } from "@babel/core";
-//@ts-expect-error Not our problem babel forgot tp export types.
-import { generate } from "@babel/generator";
-import {
-	handleGlobalComponent,
-	isGlobalComponent,
-} from "../handlers/dom/globals";
-import { buildBind, buildProxyBind } 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";
-
-/**
- * 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.
- */
-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(
-		t.identifier(varName),
-		t.stringLiteral(attrName),
-		true,
-	);
-}
-
-/**
- * Build an object property key (identifier for valid names, string literal for dashed).
- */
-function attrKey(attrName: string): t.Identifier | t.StringLiteral {
-	if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
-		return t.identifier(attrName);
-	}
-	return t.stringLiteral(attrName);
-}
-
-/**
- * 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) {
-		// Global components: Window, Document, Body
-		if (isGlobalComponent(tag)) {
-			return handleGlobalComponent(tag, node, statements, genId);
-		}
-
-		// 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(attrKey(attrName), attr.value),
-				);
-			} else if (t.isJSXExpressionContainer(attr.value)) {
-				const expr = attr.value.expression as t.Expression;
-				propsObj.properties.push(t.objectProperty(attrKey(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 componentCall = t.callExpression(t.identifier(tag), [propsObj]);
-
-		if (hydrate && nodesVar) {
-			// Push the parent's child pool before calling the component so that
-			// getHydrationNodes() inside the component returns the right scope.
-			// In SSR hydration the component claims its root node from that pool
-			// (it's already in the DOM). In empty-pool / SPA mode the component
-			// creates a fresh node, so we explicitly insert it when the pool is empty.
-			statements.push(
-				t.expressionStatement(
-					t.callExpression(t.identifier("pushHydrationNodes"), [
-						t.identifier(nodesVar),
-					]),
-				),
-			);
-			statements.push(
-				t.variableDeclaration("const", [
-					t.variableDeclarator(t.identifier(varName), componentCall),
-				]),
-			);
-			statements.push(
-				t.expressionStatement(
-					t.callExpression(t.identifier("popHydrationNodes"), []),
-				),
-			);
-			if (parentVar) {
-				// Insert only when the pool was empty (fresh DOM); if the pool had
-				// nodes the component already claimed its SSR element (already in DOM).
-				statements.push(
-					t.ifStatement(
-						t.binaryExpression(
-							"===",
-							t.memberExpression(
-								t.identifier(nodesVar),
-								t.identifier("length"),
-							),
-							t.numericLiteral(0),
-						),
-						t.expressionStatement(
-							t.callExpression(t.identifier("insert"), [
-								t.identifier(parentVar),
-								t.identifier(varName),
-							]),
-						),
-					),
-				);
-			}
-		} else {
-			statements.push(
-				t.variableDeclaration("const", [
-					t.variableDeclarator(t.identifier(varName), componentCall),
-				]),
-			);
-		}
-
-		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;
-		let attrName: string;
-		let attrNamespace: string | undefined;
-		if (t.isJSXNamespacedName(attr.name)) {
-			attrNamespace = attr.name.namespace.name;
-			attrName = attr.name.name.name;
-		} else {
-			attrName = (attr.name as t.JSXIdentifier).name;
-			// bindValue -> bind:value, bindChecked -> bind:checked
-			if (/^bind[A-Z]/.test(attrName)) {
-				attrNamespace = "bind";
-				attrName = attrName.slice(4).toLowerCase();
-			}
-		}
-		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 (attrNamespace === "bind") {
-			const bindProp = attrName;
-			const signal = (attr.value as t.JSXExpressionContainer)
-				.expression as t.Expression;
-
-			if (bindProp === "this") {
-				statements.push(
-					t.expressionStatement(
-						t.callExpression(
-							t.memberExpression(
-								(signal as t.CallExpression).callee as t.Expression,
-								t.identifier("set"),
-							),
-							[t.identifier(varName)],
-						),
-					),
-				);
-				continue;
-			}
-
-			if (bindProp === "group") {
-				// Scan element attributes for type and value
-				let inputType = "";
-				let _inputValue: t.StringLiteral | undefined;
-				for (const a of node.openingElement.attributes) {
-					if (t.isJSXAttribute(a) && t.isJSXIdentifier(a.name)) {
-						if (a.name.name === "type" && t.isStringLiteral(a.value)) {
-							inputType = a.value.value;
-						}
-						if (a.name.name === "value" && t.isStringLiteral(a.value)) {
-							_inputValue = a.value;
-						}
-					}
-				}
-
-				if (inputType === "radio" || inputType === "") {
-					const isTopLevel =
-						t.isCallExpression(signal) &&
-						t.isIdentifier((signal as t.CallExpression).callee) &&
-						signals.has(
-							((signal as t.CallExpression).callee as t.Identifier).name,
-						);
-
-					if (isTopLevel) {
-						const signalId = (signal as t.CallExpression)
-							.callee as t.Identifier;
-						statements.push(
-							t.expressionStatement(
-								t.callExpression(
-									t.memberExpression(
-										t.identifier(varName),
-										t.identifier("addEventListener"),
-									),
-									[
-										t.stringLiteral("change"),
-										t.arrowFunctionExpression(
-											[],
-											t.callExpression(
-												t.memberExpression(signalId, t.identifier("set")),
-												[
-													t.memberExpression(
-														t.identifier(varName),
-														t.identifier("value"),
-													),
-												],
-											),
-										),
-									],
-								),
-							),
-						);
-					}
-				} else if (inputType === "checkbox") {
-					const isTopLevel =
-						t.isCallExpression(signal) &&
-						t.isIdentifier((signal as t.CallExpression).callee) &&
-						signals.has(
-							((signal as t.CallExpression).callee as t.Identifier).name,
-						);
-
-					if (isTopLevel) {
-						const callExpr = signal as t.CallExpression;
-						statements.push(
-							t.expressionStatement(
-								t.callExpression(
-									t.memberExpression(
-										t.identifier(varName),
-										t.identifier("addEventListener"),
-									),
-									[
-										t.stringLiteral("change"),
-										t.arrowFunctionExpression(
-											[],
-											t.blockStatement([
-												t.ifStatement(
-													t.memberExpression(
-														t.identifier(varName),
-														t.identifier("checked"),
-													),
-													// checked: push value into array
-													t.blockStatement([
-														t.expressionStatement(
-															t.callExpression(
-																t.memberExpression(
-																	t.callExpression(callExpr, []),
-																	t.identifier("push"),
-																),
-																[
-																	t.memberExpression(
-																		t.identifier(varName),
-																		t.identifier("value"),
-																	),
-																],
-															),
-														),
-													]),
-													// unchecked: splice value out of array
-													t.blockStatement([
-														t.expressionStatement(
-															t.callExpression(
-																t.memberExpression(
-																	t.callExpression(callExpr, []),
-																	t.identifier("splice"),
-																),
-																[
-																	t.callExpression(
-																		t.memberExpression(
-																			t.callExpression(callExpr, []),
-																			t.identifier("indexOf"),
-																		),
-																		[
-																			t.memberExpression(
-																				t.identifier(varName),
-																				t.identifier("value"),
-																			),
-																		],
-																	),
-																	t.numericLiteral(1),
-																],
-															),
-														),
-													]),
-												),
-											]),
-										),
-									],
-								),
-							),
-						);
-					}
-				} else {
-					console.warn(
-						`[sigil] bind:group requires type="radio" or type="checkbox" on the element. ` +
-							`Got: type="${inputType}".`,
-					);
-				}
-				continue;
-			}
-
-			// Generic bind:innerHTML, bind:textContent, bind:value, bind:checked, etc.
-			const isTopLevelSignal =
-				t.isCallExpression(signal) &&
-				t.isIdentifier((signal as t.CallExpression).callee) &&
-				signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
-
-			const isMemberOfSignal =
-				t.isMemberExpression(signal) &&
-				t.isCallExpression((signal as t.MemberExpression).object) &&
-				t.isIdentifier(
-					((signal as t.MemberExpression).object as t.CallExpression).callee,
-				) &&
-				signals.has(
-					(
-						((signal as t.MemberExpression).object as t.CallExpression)
-							.callee as t.Identifier
-					).name,
-				);
-
-			if (isTopLevelSignal) {
-				buildBind(varName, bindProp, attr, statements);
-			} else if (isMemberOfSignal) {
-				buildProxyBind(varName, bindProp, attr, statements, signal);
-			} else {
-				console.warn(
-					`[sigil] bind:${bindProp}={...} requires a $state signal or $state object property. ` +
-						`Got: ${generate(signal).code}. ` +
-						`Hint: change to a $state() call.`,
-				);
-			}
-		} else if (t.isStringLiteral(attr.value)) {
-			statements.push(
-				t.expressionStatement(
-					t.assignmentExpression(
-						"=",
-						attrAccess(varName, realAttr),
-						attr.value,
-					),
-				),
-			);
-		} else if (t.isJSXExpressionContainer(attr.value)) {
-			const expr = attr.value.expression as t.Expression;
-			// style={{ color: "red", fontSize: val }} — per-property assignment
-			if (attrName === "style" && t.isObjectExpression(expr)) {
-				for (const prop of expr.properties) {
-					if (!t.isObjectProperty(prop)) continue;
-					const key = t.isIdentifier(prop.key)
-						? prop.key.name
-						: t.isStringLiteral(prop.key)
-							? prop.key.value
-							: null;
-					if (!key) continue;
-					const val = prop.value as t.Expression;
-					const styleProp = t.memberExpression(
-						t.memberExpression(t.identifier(varName), t.identifier("style")),
-						t.identifier(key),
-					);
-					if (containsSignal(val, signals)) {
-						statements.push(
-							t.expressionStatement(
-								t.callExpression(t.identifier("createEffect"), [
-									t.arrowFunctionExpression(
-										[],
-										t.blockStatement([
-											t.expressionStatement(
-												t.assignmentExpression("=", styleProp, val),
-											),
-										]),
-									),
-								]),
-							),
-						);
-					} else {
-						statements.push(
-							t.expressionStatement(
-								t.assignmentExpression("=", styleProp, val),
-							),
-						);
-					}
-				}
-				// done with this attribute
-			} else 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(
-												"=",
-												attrAccess(varName, realAttr),
-												expr,
-											),
-										),
-									]),
-								),
-							]),
-						),
-					);
-				}
-			} else {
-				// varName.realAttr = expr
-				statements.push(
-					t.expressionStatement(
-						t.assignmentExpression("=", attrAccess(varName, 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";
+//@ts-expect-error Not our problem babel forgot tp export types.
+import { generate } from "@babel/generator";
+import {
+	handleGlobalComponent,
+	isGlobalComponent,
+} from "../handlers/dom/globals";
+import { buildBind, buildProxyBind } 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";
+
+/**
+ * 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.
+ */
+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(
+		t.identifier(varName),
+		t.stringLiteral(attrName),
+		true,
+	);
+}
+
+/**
+ * Build an object property key (identifier for valid names, string literal for dashed).
+ */
+function attrKey(attrName: string): t.Identifier | t.StringLiteral {
+	if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
+		return t.identifier(attrName);
+	}
+	return t.stringLiteral(attrName);
+}
+
+/**
+ * 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) {
+		// Global components: Window, Document, Body
+		if (isGlobalComponent(tag)) {
+			return handleGlobalComponent(tag, node, statements, genId);
+		}
+
+		// 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(attrKey(attrName), attr.value),
+				);
+			} else if (t.isJSXExpressionContainer(attr.value)) {
+				const expr = attr.value.expression as t.Expression;
+				propsObj.properties.push(t.objectProperty(attrKey(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 componentCall = t.callExpression(t.identifier(tag), [propsObj]);
+
+		if (hydrate && nodesVar) {
+			// Push the parent's child pool before calling the component so that
+			// getHydrationNodes() inside the component returns the right scope.
+			// In SSR hydration the component claims its root node from that pool
+			// (it's already in the DOM). In empty-pool / SPA mode the component
+			// creates a fresh node, so we explicitly insert it when the pool is empty.
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("pushHydrationNodes"), [
+						t.identifier(nodesVar),
+					]),
+				),
+			);
+			statements.push(
+				t.variableDeclaration("const", [
+					t.variableDeclarator(t.identifier(varName), componentCall),
+				]),
+			);
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("popHydrationNodes"), []),
+				),
+			);
+			if (parentVar) {
+				// Insert only when the pool was empty (fresh DOM); if the pool had
+				// nodes the component already claimed its SSR element (already in DOM).
+				statements.push(
+					t.ifStatement(
+						t.binaryExpression(
+							"===",
+							t.memberExpression(
+								t.identifier(nodesVar),
+								t.identifier("length"),
+							),
+							t.numericLiteral(0),
+						),
+						t.expressionStatement(
+							t.callExpression(t.identifier("insert"), [
+								t.identifier(parentVar),
+								t.identifier(varName),
+							]),
+						),
+					),
+				);
+			}
+		} else {
+			statements.push(
+				t.variableDeclaration("const", [
+					t.variableDeclarator(t.identifier(varName), componentCall),
+				]),
+			);
+		}
+
+		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;
+		let attrName: string;
+		let attrNamespace: string | undefined;
+		if (t.isJSXNamespacedName(attr.name)) {
+			attrNamespace = attr.name.namespace.name;
+			attrName = attr.name.name.name;
+		} else {
+			attrName = (attr.name as t.JSXIdentifier).name;
+			// bindValue -> bind:value, bindChecked -> bind:checked
+			if (/^bind[A-Z]/.test(attrName)) {
+				attrNamespace = "bind";
+				attrName = attrName.slice(4).toLowerCase();
+			}
+		}
+		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 (attrNamespace === "bind") {
+			const bindProp = attrName;
+			const signal = (attr.value as t.JSXExpressionContainer)
+				.expression as t.Expression;
+
+			if (bindProp === "this") {
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(
+								(signal as t.CallExpression).callee as t.Expression,
+								t.identifier("set"),
+							),
+							[t.identifier(varName)],
+						),
+					),
+				);
+				continue;
+			}
+
+			if (bindProp === "group") {
+				// Scan element attributes for type and value
+				let inputType = "";
+				let _inputValue: t.StringLiteral | undefined;
+				for (const a of node.openingElement.attributes) {
+					if (t.isJSXAttribute(a) && t.isJSXIdentifier(a.name)) {
+						if (a.name.name === "type" && t.isStringLiteral(a.value)) {
+							inputType = a.value.value;
+						}
+						if (a.name.name === "value" && t.isStringLiteral(a.value)) {
+							_inputValue = a.value;
+						}
+					}
+				}
+
+				if (inputType === "radio" || inputType === "") {
+					const isTopLevel =
+						t.isCallExpression(signal) &&
+						t.isIdentifier((signal as t.CallExpression).callee) &&
+						signals.has(
+							((signal as t.CallExpression).callee as t.Identifier).name,
+						);
+
+					if (isTopLevel) {
+						const signalId = (signal as t.CallExpression)
+							.callee as t.Identifier;
+						statements.push(
+							t.expressionStatement(
+								t.callExpression(
+									t.memberExpression(
+										t.identifier(varName),
+										t.identifier("addEventListener"),
+									),
+									[
+										t.stringLiteral("change"),
+										t.arrowFunctionExpression(
+											[],
+											t.callExpression(
+												t.memberExpression(signalId, t.identifier("set")),
+												[
+													t.memberExpression(
+														t.identifier(varName),
+														t.identifier("value"),
+													),
+												],
+											),
+										),
+									],
+								),
+							),
+						);
+					}
+				} else if (inputType === "checkbox") {
+					const isTopLevel =
+						t.isCallExpression(signal) &&
+						t.isIdentifier((signal as t.CallExpression).callee) &&
+						signals.has(
+							((signal as t.CallExpression).callee as t.Identifier).name,
+						);
+
+					if (isTopLevel) {
+						const callExpr = signal as t.CallExpression;
+						statements.push(
+							t.expressionStatement(
+								t.callExpression(
+									t.memberExpression(
+										t.identifier(varName),
+										t.identifier("addEventListener"),
+									),
+									[
+										t.stringLiteral("change"),
+										t.arrowFunctionExpression(
+											[],
+											t.blockStatement([
+												t.ifStatement(
+													t.memberExpression(
+														t.identifier(varName),
+														t.identifier("checked"),
+													),
+													// checked: push value into array
+													t.blockStatement([
+														t.expressionStatement(
+															t.callExpression(
+																t.memberExpression(
+																	t.callExpression(callExpr, []),
+																	t.identifier("push"),
+																),
+																[
+																	t.memberExpression(
+																		t.identifier(varName),
+																		t.identifier("value"),
+																	),
+																],
+															),
+														),
+													]),
+													// unchecked: splice value out of array
+													t.blockStatement([
+														t.expressionStatement(
+															t.callExpression(
+																t.memberExpression(
+																	t.callExpression(callExpr, []),
+																	t.identifier("splice"),
+																),
+																[
+																	t.callExpression(
+																		t.memberExpression(
+																			t.callExpression(callExpr, []),
+																			t.identifier("indexOf"),
+																		),
+																		[
+																			t.memberExpression(
+																				t.identifier(varName),
+																				t.identifier("value"),
+																			),
+																		],
+																	),
+																	t.numericLiteral(1),
+																],
+															),
+														),
+													]),
+												),
+											]),
+										),
+									],
+								),
+							),
+						);
+					}
+				} else {
+					console.warn(
+						`[sigil] bind:group requires type="radio" or type="checkbox" on the element. ` +
+							`Got: type="${inputType}".`,
+					);
+				}
+				continue;
+			}
+
+			// Generic bind:innerHTML, bind:textContent, bind:value, bind:checked, etc.
+			const isTopLevelSignal =
+				t.isCallExpression(signal) &&
+				t.isIdentifier((signal as t.CallExpression).callee) &&
+				signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
+
+			const isMemberOfSignal =
+				t.isMemberExpression(signal) &&
+				t.isCallExpression((signal as t.MemberExpression).object) &&
+				t.isIdentifier(
+					((signal as t.MemberExpression).object as t.CallExpression).callee,
+				) &&
+				signals.has(
+					(
+						((signal as t.MemberExpression).object as t.CallExpression)
+							.callee as t.Identifier
+					).name,
+				);
+
+			if (isTopLevelSignal) {
+				buildBind(varName, bindProp, attr, statements);
+			} else if (isMemberOfSignal) {
+				buildProxyBind(varName, bindProp, attr, statements, signal);
+			} else {
+				console.warn(
+					`[sigil] bind:${bindProp}={...} requires a $state signal or $state object property. ` +
+						`Got: ${generate(signal).code}. ` +
+						`Hint: change to a $state() call.`,
+				);
+			}
+		} else if (t.isStringLiteral(attr.value)) {
+			statements.push(
+				t.expressionStatement(
+					t.assignmentExpression(
+						"=",
+						attrAccess(varName, realAttr),
+						attr.value,
+					),
+				),
+			);
+		} else if (t.isJSXExpressionContainer(attr.value)) {
+			const expr = attr.value.expression as t.Expression;
+			// style={{ color: "red", fontSize: val }} — per-property assignment
+			if (attrName === "style" && t.isObjectExpression(expr)) {
+				for (const prop of expr.properties) {
+					if (!t.isObjectProperty(prop)) continue;
+					const key = t.isIdentifier(prop.key)
+						? prop.key.name
+						: t.isStringLiteral(prop.key)
+							? prop.key.value
+							: null;
+					if (!key) continue;
+					const val = prop.value as t.Expression;
+					const styleProp = t.memberExpression(
+						t.memberExpression(t.identifier(varName), t.identifier("style")),
+						t.identifier(key),
+					);
+					if (containsSignal(val, signals)) {
+						statements.push(
+							t.expressionStatement(
+								t.callExpression(t.identifier("createEffect"), [
+									t.arrowFunctionExpression(
+										[],
+										t.blockStatement([
+											t.expressionStatement(
+												t.assignmentExpression("=", styleProp, val),
+											),
+										]),
+									),
+								]),
+							),
+						);
+					} else {
+						statements.push(
+							t.expressionStatement(
+								t.assignmentExpression("=", styleProp, val),
+							),
+						);
+					}
+				}
+				// done with this attribute
+			} else 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(
+												"=",
+												attrAccess(varName, realAttr),
+												expr,
+											),
+										),
+									]),
+								),
+							]),
+						),
+					);
+				}
+			} else {
+				// varName.realAttr = expr
+				statements.push(
+					t.expressionStatement(
+						t.assignmentExpression("=", attrAccess(varName, 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;
+}