@sigil-dev/compiler 0.9.2 → 0.9.4

package/test/reactivity.test.ts

@@ -1,225 +1,225 @@
-import { describe, expect, test } from "bun:test";
-import { transform, transformSSR } from "./helpers/transform.ts";
-
-describe("Basic reactivity", () => {
-	describe("$state", () => {
-		test("rewrites count++", () => {
-			const result = transform(`let count = $state(0); count++;`);
-			expect(result).toContain("count.set(count() + 1)");
-		});
-
-		test("rewrites count = 5", () => {
-			const result = transform(`let count = $state(0); count = 5;`);
-			expect(result).toContain("count.set(5)");
-		});
-
-		test("rewrites count += 2", () => {
-			const result = transform(`let count = $state(0); count += 2;`);
-			expect(result).toContain("count.set(count() + 2)");
-		});
-	});
-
-	describe("$derived", () => {
-		test("rewrites count*2", () => {
-			const result = transform(`let doubled = $derived(count * 2);`);
-			expect(result).toContain("createMemo");
-			expect(result).toContain("count * 2");
-		});
-	});
-
-	describe("Object state (proxy-compatible)", () => {
-		test("$state({...}) compiles to createSignal({...})", () => {
-			const result = transform(`let user = $state({ name: "Alice" });`);
-			expect(result).toContain("createSignal({");
-			expect(result).toContain('name: "Alice"');
-		});
-
-		test("root reassignment becomes .set()", () => {
-			const result = transform(`
-				let user = $state({ name: "Alice" });
-				user = { name: "Bob" };
-			`);
-			expect(result).toContain("user.set(");
-		});
-
-		test("member assignment is left alone (proxy handles it)", () => {
-			const result = transform(`
-				let user = $state({ name: "Alice" });
-				user.name = "Bob";
-			`);
-			// user() returns the proxy, then .name = "Bob" sets through proxy trap
-			expect(result).toContain('user().name = "Bob"');
-			expect(result).not.toContain("user.set");
-		});
-
-		test("nested member assignment is left alone", () => {
-			const result = transform(`
-				let state = $state({ user: { name: "Alice" } });
-				state.user.name = "Bob";
-			`);
-			// state() returns the proxy, then .user.name = "Bob" sets through proxy trap
-			expect(result).toContain('state().user.name = "Bob"');
-			expect(result).not.toContain("state.set");
-		});
-
-		test("$state with array compiles to createSignal([...])", () => {
-			const result = transform(`let items = $state([1, 2, 3]);`);
-			expect(result).toContain("createSignal([1, 2, 3])");
-		});
-
-		test("signal read in JSX text becomes reactive text node", () => {
-			const result = transform(`
-				let user = $state({ name: "Alice" });
-				const el = <span>{user.name}</span>;
-			`);
-			expect(result).toContain("createEffect");
-			expect(result).toContain("user().name");
-		});
-	});
-
-	describe("$state.raw", () => {
-		test("compiles to createRawSignal", () => {
-			const result = transform(`let state = $state.raw({ name: "Alice" });`);
-			expect(result).toContain("createRawSignal");
-			expect(result).toContain('name: "Alice"');
-		});
-	});
-
-	describe("$state.snapshot", () => {
-		test("compiles to snapshot call", () => {
-			const result = transform(`let snap = $state.snapshot(state());`);
-			expect(result).toContain("snapshot");
-		});
-	});
-
-	describe("$effect.tracking", () => {
-		test("compiles to tracking()", () => {
-			const result = transform(`let isTracking = $effect.tracking();`);
-			expect(result).toContain("tracking()");
-		});
-	});
-
-	describe("$effect.pre", () => {
-		test("compiles to createEffectPre", () => {
-			const result = transform(`$effect.pre(() => {});`);
-			expect(result).toContain("createEffectPre");
-		});
-	});
-
-	describe("$inspect", () => {
-		test("compiles standalone $inspect to createInspectEffect", () => {
-			const result = transform(`let count = $state(0); $inspect(count);`);
-			expect(result).toContain("createInspectEffect");
-		});
-
-		test("signal identifier gets wrapped in call inside $inspect", () => {
-			const result = transform(`let count = $state(0); $inspect(count);`);
-			// count is a signal, so it should be wrapped as count()
-			expect(result).toContain("count()");
-		});
-	});
-
-	describe("$derived reassign", () => {
-		test("$derived assignment becomes .set()", () => {
-			const result = transform(`
-				let count = $state(0);
-				let doubled = $derived(count * 2);
-				doubled = 10;
-			`);
-			expect(result).toContain("doubled.set(10)");
-		});
-	});
-});
-
-describe("D1 bind:innerHTML / bind:textContent", () => {
-	test("bind:innerHTML generates createEffect and addEventListener", () => {
-		const result = transform(`
-			let text = $state("");
-			<div bind:innerHTML={text} />
-		`);
-		expect(result).toContain("innerHTML");
-		expect(result).toContain("addEventListener");
-	});
-
-	test("bind:textContent generates createEffect and addEventListener", () => {
-		const result = transform(`
-			let text = $state("");
-			<div bind:textContent={text} />
-		`);
-		expect(result).toContain("textContent");
-		expect(result).toContain("addEventListener");
-	});
-});
-
-describe("D2 bind:group", () => {
-	test("bind:group radio compiles to change listener with .set()", () => {
-		const result = transform(`
-			let val = $state("");
-			<input type="radio" bind:group={val} value="a" />
-		`);
-		expect(result).toContain("addEventListener");
-		expect(result).toContain('"change"');
-		expect(result).toContain("val.set(");
-	});
-
-	test("bind:group checkbox compiles to change listener with push/splice", () => {
-		const result = transform(`
-			let arr = $state([]);
-			<input type="checkbox" bind:group={arr} value="x" />
-		`);
-		expect(result).toContain("addEventListener");
-		expect(result).toContain('"change"');
-		expect(result).toContain("push");
-		expect(result).toContain("splice");
-	});
-
-	test("bind:group defaults to radio when type missing", () => {
-		const result = transform(`
-			let val = $state("");
-			<input bind:group={val} value="a" />
-		`);
-		expect(result).toContain("val.set(");
-	});
-});
-
-describe("D3 $debug", () => {
-	test("compiles $debug(expr) to DEV-guarded debugger", () => {
-		const result = transform(`$debug(count);`);
-		expect(result).toContain("import.meta.env.DEV");
-		expect(result).toContain("debugger");
-		expect(result).toContain("console.log(count)");
-	});
-
-	test("drops $debug in SSR", () => {
-		const result = transformSSR(`$debug(count);`);
-		expect(result).not.toContain("debugger");
-	});
-});
-
-describe("D4 Window/Document/Body globals", () => {
-	test("<Window> component generates createEffect with addEventListener", () => {
-		const result = transform(`<Window onResize={fn} />`);
-		expect(result).toContain("createEffect");
-		expect(result).toContain("window");
-		expect(result).toContain("addEventListener");
-	});
-
-	test("<Document> component generates createEffect with addEventListener", () => {
-		const result = transform(`<Document onClick={fn} />`);
-		expect(result).toContain("createEffect");
-		expect(result).toContain("document");
-		expect(result).toContain("addEventListener");
-	});
-
-	test("<Body> component generates createEffect with addEventListener", () => {
-		const result = transform(`<Body onScroll={fn} />`);
-		expect(result).toContain("createEffect");
-		expect(result).toContain("document.body");
-		expect(result).toContain("addEventListener");
-	});
-
-	test("global components return empty in SSR", () => {
-		const result = transformSSR(`<Window onResize={fn} />`);
-		expect(result).not.toContain("createEffect");
-	});
-});
+import { describe, expect, test } from "bun:test";
+import { transform, transformSSR } from "./helpers/transform.ts";
+
+describe("Basic reactivity", () => {
+	describe("$state", () => {
+		test("rewrites count++", () => {
+			const result = transform(`let count = $state(0); count++;`);
+			expect(result).toContain("count.set(count() + 1)");
+		});
+
+		test("rewrites count = 5", () => {
+			const result = transform(`let count = $state(0); count = 5;`);
+			expect(result).toContain("count.set(5)");
+		});
+
+		test("rewrites count += 2", () => {
+			const result = transform(`let count = $state(0); count += 2;`);
+			expect(result).toContain("count.set(count() + 2)");
+		});
+	});
+
+	describe("$derived", () => {
+		test("rewrites count*2", () => {
+			const result = transform(`let doubled = $derived(count * 2);`);
+			expect(result).toContain("createMemo");
+			expect(result).toContain("count * 2");
+		});
+	});
+
+	describe("Object state (proxy-compatible)", () => {
+		test("$state({...}) compiles to createSignal({...})", () => {
+			const result = transform(`let user = $state({ name: "Alice" });`);
+			expect(result).toContain("createSignal({");
+			expect(result).toContain('name: "Alice"');
+		});
+
+		test("root reassignment becomes .set()", () => {
+			const result = transform(`
+				let user = $state({ name: "Alice" });
+				user = { name: "Bob" };
+			`);
+			expect(result).toContain("user.set(");
+		});
+
+		test("member assignment is left alone (proxy handles it)", () => {
+			const result = transform(`
+				let user = $state({ name: "Alice" });
+				user.name = "Bob";
+			`);
+			// user() returns the proxy, then .name = "Bob" sets through proxy trap
+			expect(result).toContain('user().name = "Bob"');
+			expect(result).not.toContain("user.set");
+		});
+
+		test("nested member assignment is left alone", () => {
+			const result = transform(`
+				let state = $state({ user: { name: "Alice" } });
+				state.user.name = "Bob";
+			`);
+			// state() returns the proxy, then .user.name = "Bob" sets through proxy trap
+			expect(result).toContain('state().user.name = "Bob"');
+			expect(result).not.toContain("state.set");
+		});
+
+		test("$state with array compiles to createSignal([...])", () => {
+			const result = transform(`let items = $state([1, 2, 3]);`);
+			expect(result).toContain("createSignal([1, 2, 3])");
+		});
+
+		test("signal read in JSX text becomes reactive text node", () => {
+			const result = transform(`
+				let user = $state({ name: "Alice" });
+				const el = <span>{user.name}</span>;
+			`);
+			expect(result).toContain("createEffect");
+			expect(result).toContain("user().name");
+		});
+	});
+
+	describe("$state.raw", () => {
+		test("compiles to createRawSignal", () => {
+			const result = transform(`let state = $state.raw({ name: "Alice" });`);
+			expect(result).toContain("createRawSignal");
+			expect(result).toContain('name: "Alice"');
+		});
+	});
+
+	describe("$state.snapshot", () => {
+		test("compiles to snapshot call", () => {
+			const result = transform(`let snap = $state.snapshot(state());`);
+			expect(result).toContain("snapshot");
+		});
+	});
+
+	describe("$effect.tracking", () => {
+		test("compiles to tracking()", () => {
+			const result = transform(`let isTracking = $effect.tracking();`);
+			expect(result).toContain("tracking()");
+		});
+	});
+
+	describe("$effect.pre", () => {
+		test("compiles to createEffectPre", () => {
+			const result = transform(`$effect.pre(() => {});`);
+			expect(result).toContain("createEffectPre");
+		});
+	});
+
+	describe("$inspect", () => {
+		test("compiles standalone $inspect to createInspectEffect", () => {
+			const result = transform(`let count = $state(0); $inspect(count);`);
+			expect(result).toContain("createInspectEffect");
+		});
+
+		test("signal identifier gets wrapped in call inside $inspect", () => {
+			const result = transform(`let count = $state(0); $inspect(count);`);
+			// count is a signal, so it should be wrapped as count()
+			expect(result).toContain("count()");
+		});
+	});
+
+	describe("$derived reassign", () => {
+		test("$derived assignment becomes .set()", () => {
+			const result = transform(`
+				let count = $state(0);
+				let doubled = $derived(count * 2);
+				doubled = 10;
+			`);
+			expect(result).toContain("doubled.set(10)");
+		});
+	});
+});
+
+describe("D1 bind:innerHTML / bind:textContent", () => {
+	test("bind:innerHTML generates createEffect and addEventListener", () => {
+		const result = transform(`
+			let text = $state("");
+			<div bind:innerHTML={text} />
+		`);
+		expect(result).toContain("innerHTML");
+		expect(result).toContain("addEventListener");
+	});
+
+	test("bind:textContent generates createEffect and addEventListener", () => {
+		const result = transform(`
+			let text = $state("");
+			<div bind:textContent={text} />
+		`);
+		expect(result).toContain("textContent");
+		expect(result).toContain("addEventListener");
+	});
+});
+
+describe("D2 bind:group", () => {
+	test("bind:group radio compiles to change listener with .set()", () => {
+		const result = transform(`
+			let val = $state("");
+			<input type="radio" bind:group={val} value="a" />
+		`);
+		expect(result).toContain("addEventListener");
+		expect(result).toContain('"change"');
+		expect(result).toContain("val.set(");
+	});
+
+	test("bind:group checkbox compiles to change listener with push/splice", () => {
+		const result = transform(`
+			let arr = $state([]);
+			<input type="checkbox" bind:group={arr} value="x" />
+		`);
+		expect(result).toContain("addEventListener");
+		expect(result).toContain('"change"');
+		expect(result).toContain("push");
+		expect(result).toContain("splice");
+	});
+
+	test("bind:group defaults to radio when type missing", () => {
+		const result = transform(`
+			let val = $state("");
+			<input bind:group={val} value="a" />
+		`);
+		expect(result).toContain("val.set(");
+	});
+});
+
+describe("D3 $debug", () => {
+	test("compiles $debug(expr) to DEV-guarded debugger", () => {
+		const result = transform(`$debug(count);`);
+		expect(result).toContain("import.meta.env.DEV");
+		expect(result).toContain("debugger");
+		expect(result).toContain("console.log(count)");
+	});
+
+	test("drops $debug in SSR", () => {
+		const result = transformSSR(`$debug(count);`);
+		expect(result).not.toContain("debugger");
+	});
+});
+
+describe("D4 Window/Document/Body globals", () => {
+	test("<Window> component generates createEffect with addEventListener", () => {
+		const result = transform(`<Window onResize={fn} />`);
+		expect(result).toContain("createEffect");
+		expect(result).toContain("window");
+		expect(result).toContain("addEventListener");
+	});
+
+	test("<Document> component generates createEffect with addEventListener", () => {
+		const result = transform(`<Document onClick={fn} />`);
+		expect(result).toContain("createEffect");
+		expect(result).toContain("document");
+		expect(result).toContain("addEventListener");
+	});
+
+	test("<Body> component generates createEffect with addEventListener", () => {
+		const result = transform(`<Body onScroll={fn} />`);
+		expect(result).toContain("createEffect");
+		expect(result).toContain("document.body");
+		expect(result).toContain("addEventListener");
+	});
+
+	test("global components return empty in SSR", () => {
+		const result = transformSSR(`<Window onResize={fn} />`);
+		expect(result).not.toContain("createEffect");
+	});
+});