@sigil-dev/compiler 0.9.6 → 0.9.10

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/ssr-raw-text.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { transformSync } from "@babel/core";
+import sigilPlugin from "../src/babel/index.ts";
+import { transformSSR } from "./helpers/transform.ts";
+
+// Real SSR output: compile, write to disk, import, render.
+const dir = mkdtempSync(join(tmpdir(), "sigil-ssr-raw-"));
+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));
+}
+
+const CODE = `if (a > 1 && b < 2) x = "q";`;
+// "<!-" + "-": a literal comment opener is a legacy HTML comment in JS source
+const G_OPEN = "<!-" + "-g-->";
+const G_CLOSE = "<!-" + "-/g-->";
+
+describe("SSR script text", () => {
+	test("{code} inside a script is emitted as is", async () => {
+		expect(
+			await render("export default (c) => <script>{c}</script>;", CODE),
+		).toBe(`<script>${CODE}</script>`);
+	});
+
+	test("the code can't close its own element", async () => {
+		expect(
+			await render(
+				"export default (c) => <script>{c}</script>;",
+				'x = "</SCRIPT>"',
+			),
+		).toBe('<script>x = "<\\/SCRIPT>"</script>');
+	});
+
+	test("null, undefined and false render nothing", async () => {
+		for (const v of [null, undefined, false]) {
+			expect(
+				await render("export default (c) => <script>{c}</script>;", v),
+			).toBe("<script></script>");
+		}
+	});
+
+	test("other elements still escape and mark their text", async () => {
+		expect(await render("export default (c) => <p>{c}</p>;", "<b>")).toBe(
+			`<p>${G_OPEN}&lt;b&gt;${G_CLOSE}</p>`,
+		);
+	});
+
+	test("hydration leaves script text alone", () => {
+		const code = transformSync(
+			"const el = <div><script>{code}</script><p>{text}</p></div>;",
+			{
+				plugins: [
+					"@babel/plugin-syntax-jsx",
+					[sigilPlugin, { mode: "hydrate" }],
+				],
+				filename: "test.tsx",
+			},
+		)!.code!;
+		expect(code.match(/hydrateSlot\(/g)?.length).toBe(1); // only the <p> slot
+		expect(code).not.toContain("() => code");
+	});
+});

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