@sigil-dev/compiler 0.3.0

package/test/jsx.test.ts

@@ -0,0 +1,120 @@
+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");
+		});
+	});
+
+	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");
+		});
+	});
+});

package/test/keyed-lists.test.ts

@@ -0,0 +1,88 @@
+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/);
+	});
+});

package/test/reactivity.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, test } from "bun:test";
+import { transform } 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");
+		});
+	});
+});

package/test/scoped-css.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test } from "bun:test";
+import { computeHash, scopeCSS } from "../src/babel/util/css.ts";
+import { transform } from "./helpers/transform.ts";
+
+describe("Scoped CSS", () => {
+	describe("computeHash", () => {
+		test("deterministic from file path", () => {
+			const hash1 = computeHash("/src/components/App.tsx");
+			const hash2 = computeHash("/src/components/App.tsx");
+			expect(hash1).toBe(hash2);
+		});
+
+		test("different files get different hashes", () => {
+			const hash1 = computeHash("/src/components/App.tsx");
+			const hash2 = computeHash("/src/components/Button.tsx");
+			expect(hash1).not.toBe(hash2);
+		});
+
+		test("starts with 's' prefix", () => {
+			const hash = computeHash("/src/App.tsx");
+			expect(hash.startsWith("s")).toBe(true);
+		});
+
+		test("8 characters after prefix", () => {
+			const hash = computeHash("/src/App.tsx");
+			expect(hash.length).toBe(9); // 's' + 8 hex chars
+		});
+	});
+
+	describe("scopeCSS", () => {
+		test("appends hash to simple selector", () => {
+			const result = scopeCSS(".card { color: red; }", "abc12345");
+			expect(result).toContain(".card.abc12345");
+		});
+
+		test("handles multiple selectors", () => {
+			const result = scopeCSS(".card, .button { color: red; }", "abc12345");
+			expect(result).toContain(".card.abc12345");
+			expect(result).toContain(".button.abc12345");
+		});
+
+		test(":global() escapes scoping", () => {
+			const result = scopeCSS(":global(.external) { color: red; }", "abc12345");
+			expect(result).toContain(".external");
+			expect(result).not.toContain(".external.abc12345");
+		});
+
+		test(":global() with multiple selectors", () => {
+			const result = scopeCSS(":global(.a, .b) { color: red; }", "abc12345");
+			expect(result).toContain(".a");
+			expect(result).toContain(".b");
+			expect(result).not.toContain(".a.abc12345");
+			expect(result).not.toContain(".b.abc12345");
+		});
+
+		test("handles nested braces", () => {
+			const result = scopeCSS(".card { .nested { color: red; } }", "abc12345");
+			expect(result).toContain(".card.abc12345");
+			expect(result).toContain(".nested.abc12345");
+		});
+
+		test("preserves comments", () => {
+			const result = scopeCSS(
+				"/* comment */ .card { color: red; }",
+				"abc12345",
+			);
+			expect(result).toContain("/* comment */");
+			expect(result).toContain(".card.abc12345");
+		});
+
+		test("handles string literals", () => {
+			const result = scopeCSS(
+				'.card::before { content: ".card"; }',
+				"abc12345",
+			);
+			expect(result).toContain(".card::before.abc12345");
+			expect(result).toContain('".card"'); // String literal preserved
+		});
+	});
+
+	describe("Babel plugin integration", () => {
+		test("classList.add(hash) on native elements", () => {
+			const result = transform(`<div />`, "abc12345");
+			expect(result).toContain('classList.add("abc12345")');
+		});
+
+		test("classList.add on nested elements", () => {
+			const result = transform(`<div><span /></div>`, "abc12345");
+			// Both div and span should get the hash
+			const matches = result.match(/classList\.add\("abc12345"\)/g);
+			expect(matches?.length).toBe(2);
+		});
+
+		test("components do NOT get classList.add", () => {
+			const result = transform(`<Card />`, "abc12345");
+			expect(result).not.toContain("classList.add");
+		});
+
+		test("no hash option = no classList.add", () => {
+			const result = transform(`<div />`);
+			expect(result).not.toContain("classList.add");
+		});
+
+		test("classList.add after createElement and attributes", () => {
+			const result = transform(`<div class="foo" />`, "abc12345");
+			// className = "foo" should come before classList.add
+			const classNameIdx = result.indexOf('.className = "foo"');
+			const classListIdx = result.indexOf('classList.add("abc12345")');
+			expect(classNameIdx).toBeGreaterThan(0);
+			expect(classListIdx).toBeGreaterThan(classNameIdx);
+		});
+
+		test("dynamic class preserves scope hash after update", () => {
+			const result = transform(
+				`
+                let dynamicClass = $state("foo");
+                const el = <div class={dynamicClass} />;
+            `,
+				"abc12345",
+			);
+			// Should use classList.value instead of className
+			expect(result).toContain("classList.value = dynamicClass()");
+			// Should re-add hash inside the effect
+			expect(result).toContain('classList.add("abc12345")');
+			// Should NOT use className assignment (which would wipe hash)
+			expect(result).not.toContain("className = dynamicClass()");
+		});
+	});
+});

package/test/ssr.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, test } from "bun:test";
+import { transformSSR } from "./helpers/transform.ts";
+
+describe("SSR", () => {
+	describe("$state", () => {
+		test("becomes plain let", () => {
+			const result = transformSSR(`let count = $state(0);`);
+			expect(result).toContain("let count = 0");
+			expect(result).not.toContain("createSignal");
+		});
+
+		test("mutations stay as mutations", () => {
+			const result = transformSSR(`let count = $state(0); count++;`);
+			expect(result).toContain("let count = 0");
+			expect(result).toContain("count++");
+		});
+	});
+
+	describe("$derived", () => {
+		test("becomes arrow function", () => {
+			const result = transformSSR(
+				`let count = $state(0); let doubled = $derived(count * 2);`,
+			);
+			expect(result).toContain("const doubled = () => count * 2");
+		});
+	});
+
+	describe("$effect", () => {
+		test("is dropped entirely", () => {
+			const result = transformSSR(`$effect(() => { console.log("hi"); });`);
+			expect(result).not.toContain("createEffect");
+			expect(result).not.toContain("console.log");
+		});
+	});
+
+	describe("JSX", () => {
+		test("static element", () => {
+			const result = transformSSR(`const el = <div />;`);
+			expect(result).toContain("<div>");
+			expect(result).toContain("</div>");
+		});
+
+		test("static element with class", () => {
+			const result = transformSSR(`const el = <div class="app" />;`);
+			expect(result).toContain('class="app"');
+			expect(result).not.toContain("className");
+		});
+
+		test("void element self closes", () => {
+			const result = transformSSR(`const el = <input type="text" />;`);
+			expect(result).toContain("<input");
+			expect(result).not.toContain("</input>");
+		});
+
+		test("static text child", () => {
+			const result = transformSSR(`const el = <div>hello</div>;`);
+			expect(result).toContain("<div>");
+			expect(result).toContain("hello");
+			expect(result).toContain("</div>");
+		});
+
+		test("dynamic child is escaped", () => {
+			const result = transformSSR(`
+                let count = $state(0);
+                const el = <div>{count}</div>;
+            `);
+			expect(result).toContain("__e(");
+			expect(result).toContain("</div>");
+		});
+
+		test("event handlers dropped", () => {
+			const result = transformSSR(
+				`const el = <button onClick={() => {}}>click</button>;`,
+			);
+			expect(result).not.toContain("addEventListener");
+			expect(result).not.toContain("onClick");
+		});
+
+		test("nested elements", () => {
+			const result = transformSSR(`const el = <div><span>hi</span></div>;`);
+			expect(result).toContain("<div>");
+			expect(result).toContain("<span>");
+			expect(result).toContain("hi");
+			expect(result).toContain("</span>");
+			expect(result).toContain("</div>");
+		});
+
+		test("component called as function returning string", () => {
+			const result = transformSSR(`const el = <Card title="hi" />;`);
+			expect(result).toContain("Card(");
+			expect(result).toContain('title: "hi"');
+			expect(result).not.toContain("createElement");
+		});
+
+		test("component children passed as string", () => {
+			const result = transformSSR(`const el = <Card><p>body</p></Card>;`);
+			expect(result).toContain("Card(");
+			expect(result).toContain("children:");
+			expect(result).toContain("<p>");
+		});
+
+		test("runtime import is escape only", () => {
+			const result = transformSSR(
+				`const name = $state("John"); const el = <div>{name}</div>;`,
+			);
+			expect(result).toContain("__e(");
+			expect(result).not.toContain("createSignal");
+			expect(result).not.toContain("createEffect");
+		});
+
+		test("innerHTML passes through unsanitized", () => {
+			const result = transformSSR(
+				`const html = "<b>bold</b>"; const el = <div innerHTML={html}></div>;`,
+			);
+			expect(result).toContain("html");
+			// innerHTML wraps in __h() for SafeHtml, not __e() for escaping
+			expect(result).toContain("__h(");
+			expect(result).not.toMatch(/__e\([^)]*html/);
+		});
+
+		test("keyed list converts key to data-key", () => {
+			const result = transformSSR(
+				`let items = $state([{id: 1, text: "A"}]);
+				 const el = <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;`,
+			);
+			expect(result).toContain("data-key");
+			expect(result).not.toContain('"key"');
+		});
+	});
+});

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+	"compilerOptions": {
+		// Environment setup & latest features
+		"lib": ["ESNext"],
+		"target": "ESNext",
+		"module": "Preserve",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"allowJs": true,
+		"types": ["bun"],
+
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+
+		// Best practices
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false
+	}
+}