@sigil-dev/compiler 0.9.3 → 0.9.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/compiler",
   "module": "index.ts",
   "type": "module",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "private": false,
   "description": "Compiler for the Sigil framework",
   "peerDependencies": {
@@ -15,16 +15,16 @@
     "./bun": "./src/bun-plugin.ts"
   },
   "devDependencies": {
-    "@babel/core": "next",
-    "@babel/plugin-syntax-jsx": "next",
-    "@babel/plugin-syntax-typescript": "next",
-    "@babel/traverse": "next",
-    "@babel/types": "next"
+    "@babel/core": "8.0.0-rc.6",
+    "@babel/plugin-syntax-jsx": "8.0.0-rc.6",
+    "@babel/plugin-syntax-typescript": "8.0.0-rc.6",
+    "@babel/traverse": "8.0.0-rc.6",
+    "@babel/types": "8.0.0-rc.6"
   },
   "dependencies": {
     "@babel/generator": "^7.29.7",
     "@babel/parser": "^7.29.7",
-    "@babel/plugin-transform-typescript": "^8.0.0-rc.6",
-    "@babel/preset-typescript": "^8.0.0-rc.6"
+    "@babel/plugin-transform-typescript": "8.0.0-rc.6",
+    "@babel/preset-typescript": "8.0.0-rc.6"
   }
 }

package/src/babel/index.ts

@@ -175,14 +175,19 @@ export default function sigilPlugin(): PluginObject {
 						"claimComment",
 						"hydrateKeyedList",
 						"insert",
+						"applyDirective",
 						"getHydrationNodes",
 						"pushHydrationNodes",
 						"popHydrationNodes",
 						"snapshot",
 						"tracking",
+						"untrack",
+						"createRoot",
 						"createEffectPre",
 						"createInspectEffect",
 						"withEffectScope",
+						"mountTransition",
+						"removeAnimated",
 						...(asyncDefaultPath ? ["__asyncBoundary"] : []),
 					];
 					const runtimeImport = path.node.body.find(

package/src/babel/jsx/anchor-mount.ts

@@ -349,13 +349,9 @@ export function buildAnchorMount(
 							]),
 							t.identifier(prevVar),
 							t.expressionStatement(
-								t.callExpression(
-									t.memberExpression(
-										t.identifier("_n"),
-										t.identifier("remove"),
-									),
-									[],
-								),
+								t.callExpression(t.identifier("removeAnimated"), [
+									t.identifier("_n"),
+								]),
 							),
 						),
 						t.expressionStatement(

package/src/babel/jsx/element.ts

@@ -243,7 +243,26 @@ export function processElement(
 			);
 		}
 		seenAttrs.add(realAttr);
-		if (attrName === "use") {
+		if (
+			(attrNamespace === "transition" ||
+				attrNamespace === "in" ||
+				attrNamespace === "out") &&
+			t.isJSXExpressionContainer(attr.value)
+		) {
+			// transition:fade={fade} / in:appear={x} / out:leave={[y, params]}
+			const expr = attr.value.expression as t.Expression;
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("mountTransition"), [
+						t.identifier(varName),
+						expr,
+						t.stringLiteral(
+							attrNamespace as "transition" | "in" | "out",
+						),
+					]),
+				),
+			);
+		} else if (attrName === "use") {
 			// use={directive} or use={[directive, params]}
 			const expr = (attr.value as t.JSXExpressionContainer)
 				.expression as t.Expression;

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

@@ -12,18 +12,21 @@ export type ProcessElementFn = (
 ) => string;
 
 /**
- * Detect pattern: signal.map(item => <Tag key={expr} />)
+ * 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;
+	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;
@@ -49,12 +52,30 @@ export function findKeyedMapExpr(
 		(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;
+	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,
+		};
+	}
 
-	return { callExpr: expr, keyExpr, itemParam, jsxBody: body, signalExpr: obj };
+	// Unkeyed map — still reconciled, keyed by position.
+	return {
+		callExpr: expr,
+		keyExpr: null,
+		itemParam,
+		jsxBody: body,
+		signalExpr: obj,
+		hasKey: false,
+	};
 }
 
 /**
@@ -76,6 +97,16 @@ export function buildKeyedList(
 	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.
@@ -119,7 +150,7 @@ export function buildKeyedList(
 		const hydrateArgs: t.Expression[] = [
 			t.identifier(nodesVar ?? "__nodes"),
 			keyed.signalExpr,
-			t.arrowFunctionExpression([keyed.itemParam], keyed.keyExpr),
+			keyFn,
 			t.arrowFunctionExpression(
 				[keyed.itemParam],
 				t.blockStatement([
@@ -170,7 +201,7 @@ export function buildKeyedList(
 									t.identifier(anchorVar),
 									t.identifier(keyMapVar),
 									keyed.signalExpr,
-									t.arrowFunctionExpression([keyed.itemParam], keyed.keyExpr),
+									keyFn,
 									t.arrowFunctionExpression(
 										[keyed.itemParam],
 										t.blockStatement([
@@ -260,7 +291,7 @@ export function buildKeyedList(
 								t.identifier(anchorVar),
 								t.identifier(keyMapVar),
 								keyed.signalExpr,
-								t.arrowFunctionExpression([keyed.itemParam], keyed.keyExpr),
+								keyFn,
 								t.arrowFunctionExpression(
 									[keyed.itemParam],
 									t.blockStatement([

package/src/babel/jsx/ssr.ts

@@ -137,6 +137,11 @@ export function processElementSSR(
 	// attributes
 	for (const attr of node.openingElement.attributes) {
 		if (!t.isJSXAttribute(attr)) continue;
+
+		// namespaced attributes are client-only directives
+		// (transition:/in:/out:/bind:) — SSR drops them entirely
+		if (t.isJSXNamespacedName(attr.name)) continue;
+
 		const attrName = (attr.name as t.JSXIdentifier).name;
 
 		if (attrName === "innerHTML") {

package/test/hydration.test.ts

@@ -112,7 +112,7 @@ describe("Hydration", () => {
 	test("imports claim and claimText from @sigil-dev/runtime", () => {
 		const code = transform(`const el = <div></div>`, { mode: "hydrate" });
 		expect(code).toContain(
-			"createSignal, createRawSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, insert, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, createEffectPre, createInspectEffect, withEffectScope",
+			"createSignal, createRawSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, insert, applyDirective, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, untrack, createRoot, createEffectPre, createInspectEffect, withEffectScope, mountTransition, removeAnimated",
 		);
 	});
 

package/test/jsx.test.ts

@@ -195,3 +195,31 @@ describe("JSX", () => {
 		});
 	});
 });
+describe("transition directives", () => {
+	test("transition: emits mountTransition with transition kind", () => {
+		const result = transform(`
+			const fade = (el, p, d) => {};
+			const el = <div transition:fade={fade}>hi</div>;
+		`);
+		expect(result).toContain("mountTransition(");
+		expect(result).toMatch(/mountTransition\(_el\d+, fade, "transition"\)/);
+	});
+
+	test("in: and out: emit their kinds", () => {
+		const result = transform(`
+			const appear = () => {};
+			const leave = () => {};
+			const el = <div in:appear={appear} out:leave={leave}>hi</div>;
+		`);
+		expect(result).toMatch(/mountTransition\(_el\d+, appear, "in"\)/);
+		expect(result).toMatch(/mountTransition\(_el\d+, leave, "out"\)/);
+	});
+
+	test("tuple params pass through", () => {
+		const result = transform(`
+			const fly = () => {};
+			const el = <div in:fly={[fly, { y: 20 }]}>hi</div>;
+		`);
+		expect(result).toMatch(/mountTransition\(_el\d+, \[fly, \{\s*y: 20\s*\}\], "in"\)/);
+	});
+});

package/test/keyed-lists.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import * as runtime from "../../runtime/index.ts";
 import { transform } from "./helpers/transform.ts";
 
 describe("Keyed Lists", () => {
@@ -65,16 +66,53 @@ describe("Keyed Lists", () => {
 		expect(result).toContain("reconcile(");
 	});
 
-	test("unkeyed .map() falls back to buildAnchorMount", () => {
+	test("unkeyed .map() reconciles with index keys", () => {
 		const result = transform(`
             let items = $state([1, 2, 3]);
             const el = <ul>{items.map(i => <li>{i}</li>)}</ul>;
         `);
-		// No key prop → old behavior (anchor mount, not reconcile)
-		expect(result).not.toContain("reconcile(");
-		// Should contain the old mount pattern: remove all + recreate
-		expect(result).toContain("_n.remove()");
-		expect(result).toContain("Array.isArray");
+		// No key prop → still reconcile, but keyed by position
+		expect(result).toContain("reconcile(");
+		expect(result).toContain("(_item, _i) => _i");
+	});
+
+	test("unkeyed map preserves DOM nodes on shift (behavioral)", async () => {
+		// minimal structural view of the DOM the compiled code touches — this
+		// package's compiler options have no DOM lib
+		type TextLike = { textContent: string };
+		type ListEl = {
+			querySelector(selectors: string): { firstChild: TextLike | null } | null;
+			querySelectorAll(selectors: string): { length: number };
+		};
+		const src = `
+			let items = $state(["a", "b", "c"]);
+			const el = <ul>{items.map(i => <li>{i}</li>)}</ul>;
+		`;
+		const code = transform(src);
+		const stripped = code.replace(
+			/import\s*\{[^}]*\}\s*from\s*["']@sigil-dev\/runtime["'];?/g,
+			"",
+		);
+		const factory = new Function(
+			"document",
+			...Object.keys(runtime),
+			`${stripped};\nreturn { el, items };`,
+		);
+		const doc = (globalThis as { document: unknown }).document;
+		const result = factory(doc, ...Object.values(runtime)) as {
+			el: ListEl;
+			items: { set: (v: string[]) => void };
+		};
+
+		const firstText = result.el.querySelector("li")!.firstChild!;
+		expect(firstText.textContent).toBe("a");
+
+		result.items.set(["a", "c"]); // remove middle item
+		await runtime.tick();
+
+		expect(result.el.querySelectorAll("li").length).toBe(2);
+		// first item's Text node survived — no full remount
+		expect(result.el.querySelector("li")!.firstChild).toBe(firstText);
 	});
 
 	test("complex key expression", () => {