@sigil-dev/compiler 0.9.5 → 0.9.7

package/test/jsx.test.ts

@@ -16,17 +16,22 @@ describe("JSX", () => {
 
 	test("static string attribute", () => {
 		const result = transform(`const el = <div class="app" />;`);
-		expect(result).toContain('_el0.className = "app"');
+		expect(result).toContain('setProp(_el0, "className", "app")');
 	});
 
 	test("attribute without mapping", () => {
 		const result = transform(`const el = <input type="text" />;`);
-		expect(result).toContain('_el0.type = "text"');
+		expect(result).toContain('setProp(_el0, "type", "text")');
+	});
+
+	test("bare boolean attribute goes through setProp", () => {
+		const result = transform(`const el = <input disabled />;`);
+		expect(result).toContain('setProp(_el0, "disabled", true)');
 	});
 
 	test("expression attribute", () => {
 		const result = transform(`const el = <div id={myId} />;`);
-		expect(result).toContain("_el0.id = myId");
+		expect(result).toContain('setProp(_el0, "id", myId)');
 	});
 
 	describe("Reactivity", () => {
@@ -36,7 +41,7 @@ describe("JSX", () => {
             const el = <div id={count} />;
           `);
 			expect(result).toContain("createEffect(");
-			expect(result).toContain("_el0.id = count()");
+			expect(result).toContain('setProp(_el0, "id", count())');
 		});
 
 		test("static expression attribute does not wrap in createEffect", () => {
@@ -45,7 +50,7 @@ describe("JSX", () => {
             const el = <div id={myId} />;
           `);
 			expect(result).not.toContain("createEffect(");
-			expect(result).toContain("_el0.id = myId");
+			expect(result).toContain('setProp(_el0, "id", myId)');
 		});
 
 		test("style object compiles to per-property assignment", () => {

package/test/scoped-css.test.ts

@@ -103,8 +103,8 @@ describe("Scoped CSS", () => {
 
 		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"');
+			// setProp(el, "className", "foo") should come before classList.add
+			const classNameIdx = result.indexOf('setProp(');
 			const classListIdx = result.indexOf('classList.add("abc12345")');
 			expect(classNameIdx).toBeGreaterThan(0);
 			expect(classListIdx).toBeGreaterThan(classNameIdx);

package/test/ssr-boolean-attrs.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { transformSSR } from "./helpers/transform.ts";
+
+// Render through the real SSR output: write the compiled module to disk and
+// import it, so the assertions are on the HTML a browser would receive.
+const dir = mkdtempSync(join(tmpdir(), "sigil-ssr-bool-"));
+let n = 0;
+async function render(src: string, ...args: unknown[]): Promise<string> {
+	const file = join(dir, `m${n++}.js`);
+	writeFileSync(file, transformSSR(src));
+	const mod = await import(file);
+	return String(mod.default(...args));
+}
+
+describe("SSR boolean attributes", () => {
+	const box = `export default (on) => <input type="checkbox" checked={on} />;`;
+
+	test("true renders the bare attribute", async () => {
+		expect(await render(box, true)).toBe(`<input type="checkbox" checked>`);
+	});
+
+	test("false, null and undefined omit it", async () => {
+		// checked="" would mean checked: every box ticked, every option selected
+		for (const v of [false, null, undefined]) {
+			expect(await render(box, v)).toBe(`<input type="checkbox">`);
+		}
+	});
+
+	test("selected, disabled and friends follow the same rule", async () => {
+		const src = `export default (a, b) => <select disabled={a}><option selected={b}>x</option></select>;`;
+		expect(await render(src, false, true)).toBe(
+			`<select><option selected>x</option></select>`,
+		);
+		expect(await render(src, true, false)).toBe(
+			`<select disabled><option>x</option></select>`,
+		);
+	});
+
+	test("a string value is kept, escaped", async () => {
+		expect(
+			await render(`export default (v) => <div hidden={v} />;`, "until-found"),
+		).toBe(`<div hidden="until-found"></div>`);
+		expect(
+			await render(`export default (v) => <div hidden={v} />;`, `"><x`),
+		).toBe(`<div hidden="&quot;&gt;&lt;x"></div>`);
+	});
+
+	test("literal attributes are untouched", async () => {
+		expect(
+			await render(`export default () => <input checked="checked" />;`),
+		).toBe(`<input checked="checked">`);
+	});
+});

package/test/style-object.test.ts

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