@sigil-dev/compiler 0.3.0

package/src/babel/jsx/element.ts

@@ -0,0 +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.startsWith("use:")) {
+			// use:directive or use:directive={params}
+			const directiveName = attrName.slice(4);
+			const args: t.Expression[] = [
+				t.identifier(varName),
+				t.identifier(directiveName),
+			];
+			if (t.isJSXExpressionContainer(attr.value)) {
+				args.push((attr.value as t.JSXExpressionContainer).expression as t.Expression);
+			}
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("applyDirective"), args),
+				),
+			);
+		} 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;
+}