@sigil-dev/compiler 0.9.3 → 0.9.5

package/test/jsx.test.ts

@@ -1,197 +1,227 @@
-import { describe, expect, test } from "bun:test";
-import { transform } from "./helpers/transform.ts";
-
-describe("JSX", () => {
-	test("single static element", () => {
-		const result = transform(`const el = <div />;`);
-		expect(result).toContain('document.createElement("div")');
-	});
-
-	test("nested static elements", () => {
-		const result = transform(`const el = <div><span /></div>;`);
-		expect(result).toContain('document.createElement("div")');
-		expect(result).toContain('document.createElement("span")');
-		expect(result).toContain(".append(");
-	});
-
-	test("static string attribute", () => {
-		const result = transform(`const el = <div class="app" />;`);
-		expect(result).toContain('_el0.className = "app"');
-	});
-
-	test("attribute without mapping", () => {
-		const result = transform(`const el = <input type="text" />;`);
-		expect(result).toContain('_el0.type = "text"');
-	});
-
-	test("expression attribute", () => {
-		const result = transform(`const el = <div id={myId} />;`);
-		expect(result).toContain("_el0.id = myId");
-	});
-
-	describe("Reactivity", () => {
-		test("dynamic attribute wraps in createEffect", () => {
-			const result = transform(`
-            let count = $state(0);
-            const el = <div id={count} />;
-          `);
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("_el0.id = count()");
-		});
-
-		test("static expression attribute does not wrap in createEffect", () => {
-			const result = transform(`
-            const myId = "app";
-            const el = <div id={myId} />;
-          `);
-			expect(result).not.toContain("createEffect(");
-			expect(result).toContain("_el0.id = myId");
-		});
-
-		test("style object compiles to per-property assignment", () => {
-			const code = transform(`
-            const el = <div style={{ color: "red", fontSize: "16px" }} />;
-          `);
-			expect(code).toContain('.style.color = "red"');
-			expect(code).toContain('.style.fontSize = "16px"');
-			expect(code).not.toContain("[object Object]");
-		});
-
-		test("reactive style property wraps in createEffect", () => {
-			const code = transform(`
-            let size = $state(16);
-            const el = <div style={{ fontSize: size + "px", color: "red" }} />;
-          `);
-			expect(code).toContain("createEffect");
-			expect(code).toContain(".style.fontSize");
-			expect(code).toContain('.style.color = "red"');
-		});
-	});
-
-	describe("Children", () => {
-		// text children
-		test("static text child", () => {
-			const result = transform(`const el = <div>hello</div>;`);
-			expect(result).toContain('createTextNode("hello")');
-		});
-
-		test("dynamic text child", () => {
-			const result = transform(`
-            let count = $state(0);
-            const el = <div>{count}</div>;
-          `);
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("count()");
-		});
-
-		// event handlers
-		test("onClick handler", () => {
-			const result = transform(
-				`const el = <button onClick={() => {}}>click</button>;`,
-			);
-			expect(result).toContain('addEventListener("click"');
-		});
-
-		// combined
-		test("counter shape", () => {
-			const result = transform(`
-            let count = $state(0);
-            const el = (
-              <div>
-                <span>{count}</span>
-                <button onClick={() => count++}>+</button>
-              </div>
-            );
-          `);
-			expect(result).toContain("createSignal(0)");
-			expect(result).toContain('addEventListener("click"');
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("createTextNode");
-		});
-	});
-
-	describe("Events", () => {
-		test("onClick handler", () => {
-			const result = transform(
-				`const el = <button onClick={() => {}}>click</button>;`,
-			);
-			expect(result).toContain('addEventListener("click"');
-		});
-	});
-
-	describe("Integration", () => {
-		test("counter shape", () => {
-			const result = transform(`
-                    let count = $state(0);
-                    const el = (
-                        <div>
-                            <span>{count}</span>
-                            <button onClick={() => count++}>+</button>
-                        </div>
-                    );
-                `);
-			expect(result).toContain("createSignal(0)");
-			expect(result).toContain('addEventListener("click"');
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("createTextNode");
-		});
-	});
-
-	describe("Bind", () => {
-		test("bindValue compiles to effect + event listener", () => {
-			const code = transform(`
-          let text = $state("");
-          const el = <input bindValue={text} />;
-        `);
-			// getter: createEffect(() => el.value = text())
-			expect(code).toContain("createEffect");
-			expect(code).toContain(".value = text()");
-			// setter: addEventListener("input", e => text.set(e.target.value))
-			expect(code).toContain('"input"');
-			expect(code).toContain("text.set(e.target.value)");
-		});
-
-		test("bindChecked compiles to change event", () => {
-			const code = transform(`
-          let checked = $state(false);
-          const el = <input type="checkbox" bindChecked={checked} />;
-        `);
-			expect(code).toContain(".checked = checked()");
-			expect(code).toContain('"change"');
-			expect(code).toContain("checked.set(e.target.checked)");
-		});
-
-		test("bindThis assigns element reference", () => {
-			const code = transform(`
-          let el = $state(null);
-          const div = <div bindThis={el} />;
-        `);
-			expect(code).toContain("el.set(");
-			expect(code).not.toContain("addEventListener");
-			expect(code).not.toContain("createEffect(");
-		});
-
-		test("bindValue on object property uses proxy assignment", () => {
-			const code = transform(`
-          let form = $state({ name: "" });
-          const el = <input bindValue={form.name} />;
-        `);
-			// getter: createEffect(() => el.value = form().name)
-			expect(code).toContain("form().name");
-			expect(code).toContain("createEffect(");
-			// setter: proxy assignment, not .set()
-			expect(code).toContain("form().name = e.target.value");
-			expect(code).not.toContain("form.name.set");
-		});
-
-		test("bindValue does not affect non-signal expressions", () => {
-			// static string should not compile — but if it does, at least no crash
-			// this is a misuse case, just verify it does not throw
-			expect(() =>
-				transform(`
-          const el = <input bindValue={"static"} />;
-        `),
-			).not.toThrow();
-		});
-	});
-});
+import { describe, expect, test } from "bun:test";
+import { transform } from "./helpers/transform.ts";
+
+describe("JSX", () => {
+	test("single static element", () => {
+		const result = transform(`const el = <div />;`);
+		expect(result).toContain('document.createElement("div")');
+	});
+
+	test("nested static elements", () => {
+		const result = transform(`const el = <div><span /></div>;`);
+		expect(result).toContain('document.createElement("div")');
+		expect(result).toContain('document.createElement("span")');
+		expect(result).toContain(".append(");
+	});
+
+	test("static string attribute", () => {
+		const result = transform(`const el = <div class="app" />;`);
+		expect(result).toContain('_el0.className = "app"');
+	});
+
+	test("attribute without mapping", () => {
+		const result = transform(`const el = <input type="text" />;`);
+		expect(result).toContain('_el0.type = "text"');
+	});
+
+	test("expression attribute", () => {
+		const result = transform(`const el = <div id={myId} />;`);
+		expect(result).toContain("_el0.id = myId");
+	});
+
+	describe("Reactivity", () => {
+		test("dynamic attribute wraps in createEffect", () => {
+			const result = transform(`
+            let count = $state(0);
+            const el = <div id={count} />;
+          `);
+			expect(result).toContain("createEffect(");
+			expect(result).toContain("_el0.id = count()");
+		});
+
+		test("static expression attribute does not wrap in createEffect", () => {
+			const result = transform(`
+            const myId = "app";
+            const el = <div id={myId} />;
+          `);
+			expect(result).not.toContain("createEffect(");
+			expect(result).toContain("_el0.id = myId");
+		});
+
+		test("style object compiles to per-property assignment", () => {
+			const code = transform(`
+            const el = <div style={{ color: "red", fontSize: "16px" }} />;
+          `);
+			expect(code).toContain('.style.color = "red"');
+			expect(code).toContain('.style.fontSize = "16px"');
+			expect(code).not.toContain("[object Object]");
+		});
+
+		test("reactive style property wraps in createEffect", () => {
+			const code = transform(`
+            let size = $state(16);
+            const el = <div style={{ fontSize: size + "px", color: "red" }} />;
+          `);
+			expect(code).toContain("createEffect");
+			expect(code).toContain(".style.fontSize");
+			expect(code).toContain('.style.color = "red"');
+		});
+	});
+
+	describe("Children", () => {
+		// text children
+		test("static text child", () => {
+			const result = transform(`const el = <div>hello</div>;`);
+			expect(result).toContain('createTextNode("hello")');
+		});
+
+		test("dynamic text child", () => {
+			const result = transform(`
+            let count = $state(0);
+            const el = <div>{count}</div>;
+          `);
+			expect(result).toContain("createEffect(");
+			expect(result).toContain("count()");
+		});
+
+		// event handlers
+		test("onClick handler", () => {
+			const result = transform(
+				`const el = <button onClick={() => {}}>click</button>;`,
+			);
+			expect(result).toContain('addEventListener("click"');
+		});
+
+		// combined
+		test("counter shape", () => {
+			const result = transform(`
+            let count = $state(0);
+            const el = (
+              <div>
+                <span>{count}</span>
+                <button onClick={() => count++}>+</button>
+              </div>
+            );
+          `);
+			expect(result).toContain("createSignal(0)");
+			expect(result).toContain('addEventListener("click"');
+			expect(result).toContain("createEffect(");
+			expect(result).toContain("createTextNode");
+		});
+	});
+
+	describe("Events", () => {
+		test("onClick handler", () => {
+			const result = transform(
+				`const el = <button onClick={() => {}}>click</button>;`,
+			);
+			expect(result).toContain('addEventListener("click"');
+		});
+	});
+
+	describe("Integration", () => {
+		test("counter shape", () => {
+			const result = transform(`
+                    let count = $state(0);
+                    const el = (
+                        <div>
+                            <span>{count}</span>
+                            <button onClick={() => count++}>+</button>
+                        </div>
+                    );
+                `);
+			expect(result).toContain("createSignal(0)");
+			expect(result).toContain('addEventListener("click"');
+			expect(result).toContain("createEffect(");
+			expect(result).toContain("createTextNode");
+		});
+	});
+
+	describe("Bind", () => {
+		test("bindValue compiles to effect + event listener", () => {
+			const code = transform(`
+          let text = $state("");
+          const el = <input bindValue={text} />;
+        `);
+			// getter: createEffect(() => el.value = text())
+			expect(code).toContain("createEffect");
+			expect(code).toContain(".value = text()");
+			// setter: addEventListener("input", e => text.set(e.target.value))
+			expect(code).toContain('"input"');
+			expect(code).toContain("text.set(e.target.value)");
+		});
+
+		test("bindChecked compiles to change event", () => {
+			const code = transform(`
+          let checked = $state(false);
+          const el = <input type="checkbox" bindChecked={checked} />;
+        `);
+			expect(code).toContain(".checked = checked()");
+			expect(code).toContain('"change"');
+			expect(code).toContain("checked.set(e.target.checked)");
+		});
+
+		test("bindThis assigns element reference", () => {
+			const code = transform(`
+          let el = $state(null);
+          const div = <div bindThis={el} />;
+        `);
+			expect(code).toContain("el.set(");
+			expect(code).not.toContain("addEventListener");
+			expect(code).not.toContain("createEffect(");
+		});
+
+		test("bindValue on object property uses proxy assignment", () => {
+			const code = transform(`
+          let form = $state({ name: "" });
+          const el = <input bindValue={form.name} />;
+        `);
+			// getter: createEffect(() => el.value = form().name)
+			expect(code).toContain("form().name");
+			expect(code).toContain("createEffect(");
+			// setter: proxy assignment, not .set()
+			expect(code).toContain("form().name = e.target.value");
+			expect(code).not.toContain("form.name.set");
+		});
+
+		test("bindValue does not affect non-signal expressions", () => {
+			// static string should not compile — but if it does, at least no crash
+			// this is a misuse case, just verify it does not throw
+			expect(() =>
+				transform(`
+          const el = <input bindValue={"static"} />;
+        `),
+			).not.toThrow();
+		});
+	});
+});
+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,88 +1,126 @@
-import { describe, expect, test } from "bun:test";
-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() falls back to buildAnchorMount", () => {
-		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");
-	});
-
-	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/);
+	});
+});