@sigil-dev/compiler 0.9.2 → 0.9.4

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

@@ -1,278 +1,309 @@
-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)),
-									]),
-								),
-							]),
-						),
-					]),
-				),
-			]),
-		),
-	);
-}
+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} />) — or, since unkeyed
+ * maps are also reconciled (index-keyed), signal.map(item => <Tag />).
+ * Returns info needed to generate keyed list code, or null.
+ * `hasKey` is false for the unkeyed form; buildKeyedList then keys by index.
+ */
+export function findKeyedMapExpr(
+	expr: t.Expression,
+	signals: Set<string>,
+): {
+	callExpr: t.CallExpression;
+	keyExpr: t.Expression | null;
+	itemParam: t.Identifier;
+	jsxBody: t.JSXElement;
+	signalExpr: t.Expression;
+	hasKey: boolean;
+} | 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) &&
+		t.isJSXExpressionContainer(keyAttr.value)
+	) {
+		return {
+			callExpr: expr,
+			keyExpr: keyAttr.value.expression as t.Expression,
+			itemParam,
+			jsxBody: body,
+			signalExpr: obj,
+			hasKey: true,
+		};
+	}
+
+	// Unkeyed map — still reconciled, keyed by position.
+	return {
+		callExpr: expr,
+		keyExpr: null,
+		itemParam,
+		jsxBody: body,
+		signalExpr: obj,
+		hasKey: false,
+	};
+}
+
+/**
+ * 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();
+
+	// Key extractor: the user's key={} expression wrapped in an arrow, or
+	// index-keying for unkeyed maps. reconcile passes (item, index) so
+	// (_item, _i) => _i works.
+	const keyFn = t.arrowFunctionExpression(
+		keyed.hasKey
+			? [keyed.itemParam]
+			: [t.identifier("_item"), t.identifier("_i")],
+		keyed.keyExpr ?? t.identifier("_i"),
+	);
+
+	// 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,
+			keyFn,
+			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,
+									keyFn,
+									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,
+								keyFn,
+								t.arrowFunctionExpression(
+									[keyed.itemParam],
+									t.blockStatement([
+										...createNodeStmts,
+										t.returnStatement(t.identifier(jsxVar)),
+									]),
+								),
+							]),
+						),
+					]),
+				),
+			]),
+		),
+	);
+}