@sigil-dev/compiler 0.7.5 → 0.7.6

package/test/jsx.test.ts

@@ -1,195 +1,195 @@
-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();
+      });
+    });
+});

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");
+	});
 });