@sigil-dev/compiler 0.9.7 → 0.9.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/compiler",
   "module": "index.ts",
   "type": "module",
-  "version": "0.9.7",
+  "version": "0.9.10",
   "private": false,
   "description": "Compiler for the Sigil framework",
   "peerDependencies": {

package/src/babel/index.ts

@@ -21,6 +21,10 @@ const SSR_HELPERS = template.statements.ast(`
         if (Array.isArray(v)) return new __H(v.map(x => x?.[__SAFE] ? x.v : __e(x)).join(''));
         return new __H(String(v ?? ''));
     };
+    const __r = (v, tag) => {
+        if (v === false || v === null || v === undefined) return '';
+        return String(v).replace(new RegExp('</(' + tag + ')', 'gi'), '<\\\\/$1');
+    };
     const __b = (n, v) => {
         if (v === true) return ' ' + n;
         if (v === false || v === null || v === undefined) return '';

package/src/babel/jsx/element.ts

@@ -642,8 +642,10 @@ export function processElement(
 		addScopedClass(varName, hash, statements);
 	}
 
-	// children
-	for (const child of node.children) {
+	// children. <script> text is already in the server HTML, raw and unmarked
+	// (see ssr.ts), so hydration has nothing to claim there: the marker search
+	// would miss and append a second copy of the code.
+	for (const child of hydrate && tag === "script" ? [] : node.children) {
 		if (t.isJSXElement(child)) {
 			const childVar = processElement(
 				child,

package/src/babel/jsx/ssr.ts

@@ -253,8 +253,25 @@ export function processElementSSR(
 		return buildTemplate(parts);
 	}
 
+	// <script> holds raw text: HTML escaping would corrupt the code (&& →
+	// &amp;&amp;), and <!--g--> markers are just text inside it, not comments,
+	// so there is nothing for hydration to find. __r only guards against the
+	// code closing its own element. (<style> never gets here: scoped style
+	// blocks are stripped from the source before compiling.)
+	const rawText = tagName === "script";
+
 	// children
 	for (const child of node.children) {
+		if (rawText && t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			parts.push(
+				t.callExpression(t.identifier("__r"), [
+					child.expression as t.Expression,
+					t.stringLiteral(tagName),
+				]),
+			);
+			continue;
+		}
 		if (t.isJSXText(child)) {
 			const text = child.value;
 			if (!text.trim()) continue;

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