@sigil-dev/compiler 0.3.0

package/src/babel/jsx/fragment.ts

@@ -0,0 +1,279 @@
+import { types as t } from "@babel/core";
+import { buildAnchorMount } from "./anchor-mount";
+import { processElement } from "./element";
+import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
+import { buildTextNode } from "./text-node";
+import { containsSignal, isPrimitive } from "./utils";
+
+/**
+ * Process a JSX fragment (<>...</>).
+ * In DOM mode: creates a DocumentFragment and appends all children to it.
+ * In hydrate mode (inside element): children claim from parent's node pool; no fragment created.
+ * In hydrate mode (top-level, no parentVar): creates a DocumentFragment so the IIFE returns
+ *   a valid node for SPA navigation (slot.replaceChildren). SSR hydration ignores the return value.
+ */
+export function processFragment(
+	node: t.JSXFragment,
+	statements: t.Statement[],
+	genId: () => string,
+	signals: Set<string>,
+	hash?: string,
+	hydrate?: boolean,
+	nodesVar?: string,
+	parentVar?: string,
+): string {
+	const varName = genId();
+	const currentNodesVar = nodesVar ?? "__nodes";
+
+	// Where to append children in DOM / SPA mode:
+	//   DOM mode            → varName (the DocumentFragment)
+	//   hydrate inside elem → parentVar (the real parent element)
+	//   hydrate top-level   → varName (a DocumentFragment we create below)
+	const effectiveParent = hydrate ? (parentVar ?? varName) : varName;
+
+	// Create a DocumentFragment when:
+	//   - DOM mode: always (it IS the container)
+	//   - Hydrate top-level (no parentVar): needed so the IIFE can return a real node for SPA nav
+	//     (SSR hydration ignores the return value, so an empty fragment is harmless)
+	if (!hydrate || !parentVar) {
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(varName),
+					t.callExpression(
+						t.memberExpression(
+							t.identifier("document"),
+							t.identifier("createDocumentFragment"),
+						),
+						[],
+					),
+				),
+			]),
+		);
+	}
+
+	// Process each child and append to fragment (or claim in hydrate mode)
+	for (const child of node.children) {
+		if (t.isJSXElement(child)) {
+			const childVar = processElement(
+				child,
+				statements,
+				genId,
+				signals,
+				hash,
+				hydrate,
+				currentNodesVar,
+				hydrate ? effectiveParent : 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.trim();
+			if (!text) continue;
+			if (hydrate) {
+				// SSR hydration: text already in DOM from SSR, do nothing.
+				// SPA navigation: pool is empty, create text node and append to effectiveParent.
+				const poolLen = t.memberExpression(
+					t.identifier(currentNodesVar),
+					t.identifier("length"),
+				);
+				statements.push(
+					t.ifStatement(
+						t.binaryExpression("===", poolLen, t.numericLiteral(0)),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(t.identifier(effectiveParent), t.identifier("append")),
+								[
+									t.callExpression(
+										t.memberExpression(
+											t.identifier("document"),
+											t.identifier("createTextNode"),
+										),
+										[t.stringLiteral(text)],
+									),
+								],
+							),
+						),
+					),
+				);
+			} 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,
+					currentNodesVar,
+					hydrate ? effectiveParent : 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,
+					currentNodesVar,
+					hydrate ? effectiveParent : 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)) {
+					buildTextNode(
+						varName,
+						expr,
+						statements,
+						genId,
+						hydrate,
+						currentNodesVar,
+						hydrate ? effectiveParent : undefined,
+					);
+				} else {
+					// Check for keyed list pattern
+					const keyed = findKeyedMapExpr(expr, signals);
+					if (keyed) {
+						buildKeyedList(
+							varName,
+							keyed,
+							statements,
+							genId,
+							signals,
+							processElement,
+							hash,
+							hydrate,
+							currentNodesVar,
+							hydrate ? effectiveParent : undefined,
+						);
+					} else {
+						buildAnchorMount(
+							varName,
+							expr,
+							statements,
+							genId,
+							hydrate,
+							currentNodesVar,
+							hydrate ? effectiveParent : undefined,
+						);
+					}
+				}
+			} 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([
+						t.expressionStatement(
+							t.callExpression(t.identifier("insert"), [
+								t.identifier(effectiveParent),
+								expr,
+							]),
+						),
+					]);
+					statements.push(
+						t.ifStatement(
+							t.binaryExpression(">", poolLen, t.numericLiteral(0)),
+							t.blockStatement([claimG, claimSlashG]),
+							elseBranch,
+						),
+					);
+				} 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"),
+										),
+										[expr],
+									),
+								],
+							),
+						),
+					);
+				}
+			}
+		}
+	}
+
+	return varName;
+}

package/src/babel/jsx/index.ts

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

package/src/babel/jsx/keyed-list.ts

@@ -0,0 +1,278 @@
+import { types as t } from "@babel/core";
+import { containsSignal } from "./utils";
+
+export type ProcessElementFn = (
+	node: t.JSXElement,
+	statements: t.Statement[],
+	genId: () => string,
+	signals: Set<string>,
+	hash?: string,
+	hydrate?: boolean,
+	nodesVar?: string,
+) => string;
+
+/**
+ * Detect pattern: signal.map(item => <Tag key={expr} />)
+ * Returns info needed to generate keyed list code, or null.
+ */
+export function findKeyedMapExpr(
+	expr: t.Expression,
+	signals: Set<string>,
+): {
+	callExpr: t.CallExpression;
+	keyExpr: t.Expression;
+	itemParam: t.Identifier;
+	jsxBody: t.JSXElement;
+	signalExpr: t.Expression;
+} | null {
+	if (!t.isCallExpression(expr)) return null;
+	const callee = expr.callee;
+	if (!t.isMemberExpression(callee)) return null;
+	const prop = callee.property;
+	if (!t.isIdentifier(prop) || prop.name !== "map") return null;
+
+	const obj = callee.object;
+	if (!t.isExpression(obj)) return null;
+	if (!containsSignal(obj, signals)) return null;
+
+	if (expr.arguments.length !== 1) return null;
+	const arrowFn = expr.arguments[0];
+	if (!t.isArrowFunctionExpression(arrowFn)) return null;
+	if (arrowFn.params.length !== 1) return null;
+	const itemParam = arrowFn.params[0];
+	if (!t.isIdentifier(itemParam)) return null;
+
+	const body = arrowFn.body;
+	if (!t.isJSXElement(body)) return null;
+
+	const keyAttr = body.openingElement.attributes.find(
+		(a) =>
+			t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === "key",
+	);
+	if (!keyAttr || !t.isJSXAttribute(keyAttr)) return null;
+	if (!t.isJSXExpressionContainer(keyAttr.value)) return null;
+
+	const keyExpr = keyAttr.value.expression as t.Expression;
+
+	return { callExpr: expr, keyExpr, itemParam, jsxBody: body, signalExpr: obj };
+}
+
+/**
+ * Generate keyed list code using reconcile().
+ * In hydrate mode, uses hydrateKeyedList() to claim server-rendered nodes.
+ */
+export function buildKeyedList(
+	varName: string,
+	keyed: NonNullable<ReturnType<typeof findKeyedMapExpr>>,
+	statements: t.Statement[],
+	genId: () => string,
+	signals: Set<string>,
+	processElement: ProcessElementFn,
+	hash?: string,
+	hydrate?: boolean,
+	nodesVar?: string,
+	parentVar?: string,
+): void {
+	const anchorVar = genId();
+	const keyMapVar = genId();
+
+	// Strip key prop from JSX before processing.
+	// In SSR mode, the Babel plugin already converted key → data-key.
+	// In DOM/hydrate mode, we don't need either.
+	keyed.jsxBody.openingElement.attributes =
+		keyed.jsxBody.openingElement.attributes.filter(
+			(a) =>
+				!(
+					t.isJSXAttribute(a) &&
+					t.isJSXIdentifier(a.name) &&
+					(a.name.name === "key" || a.name.name === "data-key")
+				),
+		);
+
+	if (hydrate) {
+		// ─── Hydration path: use hydrateKeyedList() ───
+		// Strip key prop from JSX before processing
+		keyed.jsxBody.openingElement.attributes =
+			keyed.jsxBody.openingElement.attributes.filter(
+				(a) =>
+					!(
+						t.isJSXAttribute(a) &&
+						t.isJSXIdentifier(a.name) &&
+						a.name.name === "key"
+					),
+			);
+
+		// Process the JSX element to get createNode body
+		const createNodeStmts: t.Statement[] = [];
+		const jsxVar = processElement(
+			keyed.jsxBody,
+			createNodeStmts,
+			genId,
+			signals,
+			hash,
+			hydrate,
+			nodesVar,
+		);
+
+		// const { anchor, keyMap } = hydrateKeyedList(__nodes, signal, keyFn, createNode, parent)
+		const resultVar = genId();
+		const hydrateArgs: t.Expression[] = [
+			t.identifier(nodesVar ?? "__nodes"),
+			keyed.signalExpr,
+			t.arrowFunctionExpression([keyed.itemParam], keyed.keyExpr),
+			t.arrowFunctionExpression(
+				[keyed.itemParam],
+				t.blockStatement([
+					...createNodeStmts,
+					t.returnStatement(t.identifier(jsxVar)),
+				]),
+			),
+		];
+		if (hydrate && parentVar) hydrateArgs.push(t.identifier(parentVar));
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(resultVar),
+					t.callExpression(t.identifier("hydrateKeyedList"), hydrateArgs),
+				),
+			]),
+		);
+
+		// const anchor = result.anchor
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(anchorVar),
+					t.memberExpression(t.identifier(resultVar), t.identifier("anchor")),
+				),
+			]),
+		);
+
+		// const keyMap = result.keyMap
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(keyMapVar),
+					t.memberExpression(t.identifier(resultVar), t.identifier("keyMap")),
+				),
+			]),
+		);
+
+		// createEffect(() => reconcile(anchor, keyMap, signal, keyFn, createNode))
+		statements.push(
+			t.expressionStatement(
+				t.callExpression(t.identifier("createEffect"), [
+					t.arrowFunctionExpression(
+						[],
+						t.blockStatement([
+							t.expressionStatement(
+								t.callExpression(t.identifier("reconcile"), [
+									t.identifier(anchorVar),
+									t.identifier(keyMapVar),
+									keyed.signalExpr,
+									t.arrowFunctionExpression([keyed.itemParam], keyed.keyExpr),
+									t.arrowFunctionExpression(
+										[keyed.itemParam],
+										t.blockStatement([
+											...createNodeStmts,
+											t.returnStatement(t.identifier(jsxVar)),
+										]),
+									),
+								]),
+							),
+						]),
+					),
+				]),
+			),
+		);
+		return;
+	}
+
+	// ─── DOM path (existing code) ───
+
+	// const _anchor = document.createComment('')
+	statements.push(
+		t.variableDeclaration("const", [
+			t.variableDeclarator(
+				t.identifier(anchorVar),
+				t.callExpression(
+					t.memberExpression(
+						t.identifier("document"),
+						t.identifier("createComment"),
+					),
+					[t.stringLiteral("")],
+				),
+			),
+		]),
+	);
+
+	// parent.append(_anchor)
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(
+				t.memberExpression(t.identifier(varName), t.identifier("append")),
+				[t.identifier(anchorVar)],
+			),
+		),
+	);
+
+	// const _keyMap = new Map()
+	statements.push(
+		t.variableDeclaration("const", [
+			t.variableDeclarator(
+				t.identifier(keyMapVar),
+				t.newExpression(t.identifier("Map"), []),
+			),
+		]),
+	);
+
+	// Strip key prop from JSX before processing
+	keyed.jsxBody.openingElement.attributes =
+		keyed.jsxBody.openingElement.attributes.filter(
+			(a) =>
+				!(
+					t.isJSXAttribute(a) &&
+					t.isJSXIdentifier(a.name) &&
+					a.name.name === "key"
+				),
+		);
+
+	// Process the JSX element to get createNode body
+	const createNodeStmts: t.Statement[] = [];
+	const jsxVar = processElement(
+		keyed.jsxBody,
+		createNodeStmts,
+		genId,
+		signals,
+		hash,
+	);
+
+	// createEffect(() => reconcile(...))
+	// In DOM mode, use raw key expression. Keys are compared by value.
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.callExpression(t.identifier("reconcile"), [
+								t.identifier(anchorVar),
+								t.identifier(keyMapVar),
+								keyed.signalExpr,
+								t.arrowFunctionExpression([keyed.itemParam], keyed.keyExpr),
+								t.arrowFunctionExpression(
+									[keyed.itemParam],
+									t.blockStatement([
+										...createNodeStmts,
+										t.returnStatement(t.identifier(jsxVar)),
+									]),
+								),
+							]),
+						),
+					]),
+				),
+			]),
+		),
+	);
+}