@sigil-dev/compiler 0.9.4 → 0.9.6

package/test/jsx.test.ts

@@ -1,225 +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();
-		});
-	});
-});
-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"\)/);
-	});
-});
+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"\)/,
+		);
+	});
+});