@sigil-dev/compiler 0.9.3 → 0.9.5

package/test/scoped-css.test.ts

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

@@ -1,130 +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"');
-		});
-	});
-});
+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/test/style-object.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, test } from "bun:test";
+import { transformSSR } from "./helpers/transform.ts";
+
+describe("SSR style objects", () => {
+	test("style={{...}} serializes to CSS string, not [object Object]", () => {
+		const out = transformSSR(
+			`export function Card() { return <div style={{ display: "grid", marginTop: 12 }}>x</div>; }`,
+		);
+		// the __e helper must carry the object branch
+		expect(out).toContain("constructor === Object");
+		expect(out).toContain("UNITLESS");
+	});
+});