@sigil-dev/compiler 0.9.4 → 0.9.6

package/test/keyed-lists.test.ts

@@ -1,126 +1,126 @@
-import { describe, expect, test } from "bun:test";
-import * as runtime from "../../runtime/index.ts";
-import { transform } from "./helpers/transform.ts";
-
-describe("Keyed Lists", () => {
-	test("detects .map() with key prop", () => {
-		const result = transform(`
-            let items = $state([{ id: 1 }]);
-            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
-        `);
-		expect(result).toContain("reconcile(");
-		expect(result).toContain("new Map()");
-		expect(result).not.toContain("_mountFn");
-	});
-
-	test("key prop is stripped from DOM output", () => {
-		const result = transform(`
-            let items = $state([{ id: 1 }]);
-            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
-        `);
-		expect(result).not.toContain(".key =");
-	});
-
-	test("key extractor is arrow function of key prop", () => {
-		const result = transform(`
-            let items = $state([{ id: 1 }]);
-            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
-        `);
-		// The key extractor should be: item => item.id
-		expect(result).toMatch(/i => i\.id/);
-	});
-
-	test("createNode factory contains JSX element creation", () => {
-		const result = transform(`
-            let items = $state([{ id: 1, text: "a" }]);
-            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
-        `);
-		expect(result).toContain('document.createElement("li")');
-		expect(result).toContain("i.text");
-	});
-
-	test("signal expression is passed to reconcile", () => {
-		const result = transform(`
-            let items = $state([1, 2, 3]);
-            const el = <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
-        `);
-		// The signal accessor should be passed as the items argument
-		expect(result).toMatch(/reconcile\([^,]+, [^,]+, items\(\)/);
-	});
-
-	test("anchor and keyMap are created", () => {
-		const result = transform(`
-            let items = $state([{ id: 1 }]);
-            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
-        `);
-		expect(result).toContain("document.createComment");
-		expect(result).toContain("new Map()");
-	});
-
-	test("effect wraps reconcile call", () => {
-		const result = transform(`
-            let items = $state([{ id: 1 }]);
-            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
-        `);
-		expect(result).toContain("createEffect(");
-		expect(result).toContain("reconcile(");
-	});
-
-	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 → 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", () => {
-		const result = transform(`
-            let items = $state([{ id: 1, meta: { version: 2 } }]);
-            const el = <ul>{items.map(i => <li key={i.meta.version}>{i.id}</li>)}</ul>
-        `);
-		expect(result).toContain("reconcile(");
-		expect(result).toMatch(/i => i\.meta\.version/);
-	});
-});
+import { describe, expect, test } from "bun:test";
+import * as runtime from "../../runtime/index.ts";
+import { transform } from "./helpers/transform.ts";
+
+describe("Keyed Lists", () => {
+	test("detects .map() with key prop", () => {
+		const result = transform(`
+            let items = $state([{ id: 1 }]);
+            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
+        `);
+		expect(result).toContain("reconcile(");
+		expect(result).toContain("new Map()");
+		expect(result).not.toContain("_mountFn");
+	});
+
+	test("key prop is stripped from DOM output", () => {
+		const result = transform(`
+            let items = $state([{ id: 1 }]);
+            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
+        `);
+		expect(result).not.toContain(".key =");
+	});
+
+	test("key extractor is arrow function of key prop", () => {
+		const result = transform(`
+            let items = $state([{ id: 1 }]);
+            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
+        `);
+		// The key extractor should be: item => item.id
+		expect(result).toMatch(/i => i\.id/);
+	});
+
+	test("createNode factory contains JSX element creation", () => {
+		const result = transform(`
+            let items = $state([{ id: 1, text: "a" }]);
+            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
+        `);
+		expect(result).toContain('document.createElement("li")');
+		expect(result).toContain("i.text");
+	});
+
+	test("signal expression is passed to reconcile", () => {
+		const result = transform(`
+            let items = $state([1, 2, 3]);
+            const el = <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
+        `);
+		// The signal accessor should be passed as the items argument
+		expect(result).toMatch(/reconcile\([^,]+, [^,]+, items\(\)/);
+	});
+
+	test("anchor and keyMap are created", () => {
+		const result = transform(`
+            let items = $state([{ id: 1 }]);
+            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
+        `);
+		expect(result).toContain("document.createComment");
+		expect(result).toContain("new Map()");
+	});
+
+	test("effect wraps reconcile call", () => {
+		const result = transform(`
+            let items = $state([{ id: 1 }]);
+            const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;
+        `);
+		expect(result).toContain("createEffect(");
+		expect(result).toContain("reconcile(");
+	});
+
+	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 → 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", () => {
+		const result = transform(`
+            let items = $state([{ id: 1, meta: { version: 2 } }]);
+            const el = <ul>{items.map(i => <li key={i.meta.version}>{i.id}</li>)}</ul>
+        `);
+		expect(result).toContain("reconcile(");
+		expect(result).toMatch(/i => i\.meta\.version/);
+	});
+});