@sigil-dev/compiler 0.9.10 → 0.9.12

package/test/bun-plugin.test.ts

@@ -0,0 +1,45 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { sigil } from "../src/bun-plugin.ts";
+
+const dir = join(tmpdir(), `sigil-bun-plugin-${Date.now()}`);
+
+beforeAll(async () => {
+	await mkdir(dir, { recursive: true });
+	await writeFile(
+		join(dir, "theme.ts"),
+		'export let theme = $store<"light" | "dark">("light");\nexport function toggle() { theme = theme === "light" ? "dark" : "light"; }',
+	);
+	await writeFile(
+		join(dir, "raw.ts"),
+		"export let rows = $state.raw([1, 2]);\nexport const first = () => rows[0];",
+	);
+	await writeFile(
+		join(dir, "label.ts"),
+		'import { theme } from "./theme";\nexport const label = () => "theme: " + theme;',
+	);
+	await writeFile(
+		join(dir, "entry.ts"),
+		'import { toggle } from "./theme";\nimport { first } from "./raw";\nimport { label } from "./label";\nconsole.log(toggle, first, label);',
+	);
+});
+
+afterAll(() => rm(dir, { recursive: true, force: true }));
+
+test("plain .ts modules with any macro or a store import are compiled", async () => {
+	const result = await Bun.build({
+		entrypoints: [join(dir, "entry.ts")],
+		plugins: [sigil({ mode: "dom" })],
+		external: ["@sigil-dev/runtime"],
+		throw: false,
+	});
+	expect(result.success).toBe(true);
+	const code = await result.outputs[0]!.text();
+	// $store<T>(…) with a type argument, and $state.raw(…)
+	expect(code).not.toMatch(/\$store|\$state/);
+	expect(code).toContain("createRawSignal");
+	// label.ts has no macro, but reads an imported store
+	expect(code).toMatch(/readStore\d*\(theme\)/);
+});

package/test/hydration.test.ts

@@ -172,8 +172,9 @@ describe("Hydration", () => {
 		// children must not be evaluated at the call site — they claim from the
 		// component's own slot, which the caller cannot see
 		expect(code).toMatch(/children:\s*\[\(\)\s*=>\s*\{/);
-		// the {children} site consumes the SSR slot and hydrates against it
-		expect(code).toContain("hydrateSlot(_el1, _el0, () => children)");
+		// the {children} site consumes the SSR slot and hydrates against it;
+		// it's a live slot because props are read through the props object
+		expect(code).toContain("liveSlot(_el1, _el0, () => _props.children)");
 	});
 
 	test("dom mode still evaluates component children eagerly", () => {

package/test/jsx.test.ts

@@ -57,8 +57,8 @@ describe("JSX", () => {
 			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).toContain('setStyleProp(_el0, "color", "red")');
+			expect(code).toContain('setStyleProp(_el0, "fontSize", "16px")');
 			expect(code).not.toContain("[object Object]");
 		});
 
@@ -68,8 +68,10 @@ describe("JSX", () => {
             const el = <div style={{ fontSize: size + "px", color: "red" }} />;
           `);
 			expect(code).toContain("createEffect");
-			expect(code).toContain(".style.fontSize");
-			expect(code).toContain('.style.color = "red"');
+			expect(code).toMatch(
+				/createEffect\(\(\) => \{\s*setStyleProp\(_el0, "fontSize"/,
+			);
+			expect(code).toContain('setStyleProp(_el0, "color", "red")');
 		});
 	});
 
@@ -156,6 +158,26 @@ describe("JSX", () => {
 			expect(code).toContain("text.set(e.target.value)");
 		});
 
+		test("camelCase bind keeps the property's casing", () => {
+			const code = transform(`
+          let top = $state(0);
+          const el = <div bindScrollTop={top} />;
+        `);
+			expect(code).toContain(".scrollTop = top()");
+			expect(code).not.toContain("scrolltop");
+		});
+
+		test("scroll and details bindings listen for their own events", () => {
+			const code = transform(`
+          let top = $state(0);
+          let open = $state(false);
+          const a = <div bind:scrollTop={top} />;
+          const b = <details bind:open={open} />;
+        `);
+			expect(code).toContain('"scroll"');
+			expect(code).toContain('"toggle"');
+		});
+
 		test("bindChecked compiles to change event", () => {
 			const code = transform(`
           let checked = $state(false);