@sigil-dev/compiler 0.7.5 → 0.7.7

package/test/jsx.test.ts

@@ -2,99 +2,99 @@ 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(`
+	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()");
-        });
+			expect(result).toContain("createEffect(");
+			expect(result).toContain("_el0.id = count()");
+		});
 
-        test("static expression attribute does not wrap in createEffect", () => {
-            const result = transform(`
+		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");
-        });
+			expect(result).not.toContain("createEffect(");
+			expect(result).toContain("_el0.id = myId");
+		});
 
-        test("style object compiles to per-property assignment", () => {
-          const code = transform(`
+		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]");
-        });
+			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(`
+		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(`
+			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(`
+			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>
@@ -103,25 +103,25 @@ describe("JSX", () => {
               </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(`
+			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>
@@ -130,66 +130,68 @@ describe("JSX", () => {
                         </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(`
+			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(`
+			// 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)");
-      });
+			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(`
+		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(");
-      });
+			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(`
+		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(`
+			// 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();
-      });
-    });
+        `),
+			).not.toThrow();
+		});
+	});
 });

package/test/reactivity.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { transform } from "./helpers/transform.ts";
+import { transform, transformSSR } from "./helpers/transform.ts";
 
 describe("Basic reactivity", () => {
 	describe("$state", () => {
@@ -76,4 +76,150 @@ describe("Basic reactivity", () => {
 			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");
+	});
 });

package/test/tree-shaking.test.ts

@@ -1,79 +1,78 @@
-import { describe, expect, spyOn, test } from "bun:test";
-import { transform } from "./helpers/transform.ts";
-
-
-describe("Dead code warnings", () => {
-    test("warns on unused $state", () => {
-        const warn = spyOn(console, "warn");
-        transform(`
-      let unused = $state(0);
-      const el = <div />;
-    `);
-        expect(warn).toHaveBeenCalledWith(
-            expect.stringContaining('unused reactive declaration: "unused"'),
-        );
-        warn.mockRestore();
-    });
-
-    test("warns on unused $derived", () => {
-        const warn = spyOn(console, "warn");
-        transform(`
-      let count = $state(0);
-      let doubled = $derived(count * 2);
-      const el = <div>{count}</div>;
-    `);
-        expect(warn).toHaveBeenCalledWith(
-            expect.stringContaining('unused reactive declaration: "doubled"'),
-        );
-        warn.mockRestore();
-    });
-
-    test("no warning when $state is used in JSX", () => {
-        const warn = spyOn(console, "warn");
-        transform(`
-      let count = $state(0);
-      const el = <div>{count}</div>;
-    `);
-        expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
-        warn.mockRestore();
-    });
-
-    test("no warning when $state is used in effect", () => {
-        const warn = spyOn(console, "warn");
-        transform(`
-      let count = $state(0);
-      $effect(() => { console.log(count); });
-    `);
-        expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
-        warn.mockRestore();
-    });
-
-    test("$store does not warn even if not used in same file", () => {
-        const warn = spyOn(console, "warn");
-        transform(`
-        export let count = $store(0);
-        export let user = $store({ name: "" });
-      `);
-        expect(warn).not.toHaveBeenCalledWith(
-            expect.stringContaining("unused reactive declaration")
-        );
-        warn.mockRestore();
-    });
-
-    test("$store compiles to createSignal like $state", () => {
-        const code = transform(`
-        export let count = $store(0);
-      `);
-        expect(code).toContain("createSignal(0)");
-        expect(code).not.toContain("$store");
-    });
-
-    test("$store in JSX works like $state", () => {
-        const code = transform(`
-        export let count = $store(0);
-        const el = <div>{count}</div>;
-      `);
-        expect(code).toContain("count()");
-        expect(code).not.toContain("$store");
-    });
-});
+import { describe, expect, spyOn, test } from "bun:test";
+import { transform } from "./helpers/transform.ts";
+
+describe("Dead code warnings", () => {
+	test("warns on unused $state", () => {
+		const warn = spyOn(console, "warn");
+		transform(`
+      let unused = $state(0);
+      const el = <div />;
+    `);
+		expect(warn).toHaveBeenCalledWith(
+			expect.stringContaining('unused reactive declaration: "unused"'),
+		);
+		warn.mockRestore();
+	});
+
+	test("warns on unused $derived", () => {
+		const warn = spyOn(console, "warn");
+		transform(`
+      let count = $state(0);
+      let doubled = $derived(count * 2);
+      const el = <div>{count}</div>;
+    `);
+		expect(warn).toHaveBeenCalledWith(
+			expect.stringContaining('unused reactive declaration: "doubled"'),
+		);
+		warn.mockRestore();
+	});
+
+	test("no warning when $state is used in JSX", () => {
+		const warn = spyOn(console, "warn");
+		transform(`
+      let count = $state(0);
+      const el = <div>{count}</div>;
+    `);
+		expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
+		warn.mockRestore();
+	});
+
+	test("no warning when $state is used in effect", () => {
+		const warn = spyOn(console, "warn");
+		transform(`
+      let count = $state(0);
+      $effect(() => { console.log(count); });
+    `);
+		expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
+		warn.mockRestore();
+	});
+
+	test("$store does not warn even if not used in same file", () => {
+		const warn = spyOn(console, "warn");
+		transform(`
+        export let count = $store(0);
+        export let user = $store({ name: "" });
+      `);
+		expect(warn).not.toHaveBeenCalledWith(
+			expect.stringContaining("unused reactive declaration"),
+		);
+		warn.mockRestore();
+	});
+
+	test("$store compiles to createSignal like $state", () => {
+		const code = transform(`
+        export let count = $store(0);
+      `);
+		expect(code).toContain("createSignal(0)");
+		expect(code).not.toContain("$store");
+	});
+
+	test("$store in JSX works like $state", () => {
+		const code = transform(`
+        export let count = $store(0);
+        const el = <div>{count}</div>;
+      `);
+		expect(code).toContain("count()");
+		expect(code).not.toContain("$store");
+	});
+});