@sigil-dev/compiler 0.9.4 → 0.9.5

package/src/babel/jsx/ssr.ts

@@ -1,324 +1,351 @@
-import { types as t } from "@babel/core";
-import { isGlobalComponent } from "../handlers/dom/globals";
-import { getTagName } from "../util/helpers";
-
-const VOID_ELEMENTS = new Set([
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr",
-]);
-
-const ATTR_MAP_SSR: Record<string, string> = {
-	className: "class",
-	htmlFor: "for",
-};
-//biome-ignore  lint/suspicious/noShadowRestrictedNames: shut up
-function escape(expr: t.Expression): t.CallExpression {
-	return t.callExpression(t.identifier("__e"), [expr]);
-}
-
-// builds a template literal from alternating string parts and expressions
-function buildTemplate(parts: Array<string | t.Expression>): t.TemplateLiteral {
-	const quasis: t.TemplateElement[] = [];
-	const exprs: t.Expression[] = [];
-	let current = "";
-
-	for (const part of parts) {
-		if (typeof part === "string") {
-			current += part;
-		} else {
-			quasis.push(t.templateElement({ raw: current, cooked: current }));
-			current = "";
-			exprs.push(part);
-		}
-	}
-	quasis.push(t.templateElement({ raw: current, cooked: current }, true));
-	return t.templateLiteral(quasis, exprs);
-}
-
-/**
- * <Component /> is always JSX so its always safe to render as is
- * but the compiler can also register its own safe variables, like:
- * ```ts
- * const rendered = <Component foo="bar" />
- * return <div>{rendered}</div>
- * ```
- * @param expr
- * @param safeIdents
- * @returns
- */
-/*
-function isSSRSafe(expr: t.Expression, safeIdents: Set<string>): boolean {
-    // direct JSX - compiled to HTML string by this very plugin
-    if (t.isJSXElement(expr) || t.isJSXFragment(expr)) return true;
-
-    // component call - returns HTML string by convention
-    if (
-        t.isCallExpression(expr) &&
-        t.isIdentifier(expr.callee) &&
-        /^[A-Z]/.test(expr.callee.name)
-    ) return true;
-
-    // registered by compiler (e.g. children)
-    if (t.isIdentifier(expr)) {
-        // if sigil as a compiler doesnt have an insane CVE
-        // this will always be true
-        if (expr.name === "children") return true;
-        return safeIdents.has(expr.name);
-    }
-
-    // condition && <JSX> — right side produces HTML
-    if (t.isLogicalExpression(expr))
-        return isSSRSafe(expr.right as t.Expression, safeIdents);
-
-    // condition ? <JSX> : <JSX> — both branches must be checked
-    if (t.isConditionalExpression(expr)) {
-        return (
-            isSSRSafe(expr.consequent as t.Expression, safeIdents) ||
-            isSSRSafe(expr.alternate as t.Expression, safeIdents)
-        );
-    }
-    if (
-        t.isCallExpression(expr) &&
-        t.isMemberExpression(expr.callee) &&
-        t.isIdentifier(expr.callee.property) &&
-        expr.callee.property.name === "map"
-    ) {
-        const cb = expr.arguments[0];
-        if (t.isArrowFunctionExpression(cb) || t.isFunctionExpression(cb)) {
-            const body = cb.body;
-            if (t.isJSXElement(body) || t.isJSXFragment(body)) return true;
-            if (t.isBlockStatement(body)) {
-                for (const stmt of body.body) {
-                    if (
-                        t.isReturnStatement(stmt) &&
-                        stmt.argument &&
-                        (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument))
-                    ) return true;
-                }
-            }
-        }
-    }
-    return false;
-}
-*/
-export function processElementSSR(
-	node: t.JSXElement,
-	signals: Set<string>,
-): t.TemplateLiteral {
-	const tagName = getTagName(node.openingElement.name);
-	const isComponent = /^[A-Z]/.test(tagName);
-
-	if (isComponent) {
-		// Global components (Window/Document/Body) produce no SSR output
-		if (isGlobalComponent(tagName)) {
-			return t.templateLiteral(
-				[t.templateElement({ raw: "", cooked: "" }, true)],
-				[],
-			);
-		}
-		return processComponentSSR(node, tagName, signals);
-	}
-	let dangerousHTML: t.Expression | null = null;
-	const parts: Array<string | t.Expression> = [];
-	parts.push(`<${tagName}`);
-
-	// attributes
-	for (const attr of node.openingElement.attributes) {
-		if (!t.isJSXAttribute(attr)) continue;
-
-		// namespaced attributes are client-only directives
-		// (transition:/in:/out:/bind:) — SSR drops them entirely
-		if (t.isJSXNamespacedName(attr.name)) continue;
-
-		const attrName = (attr.name as t.JSXIdentifier).name;
-
-		if (attrName === "innerHTML") {
-			if (t.isJSXExpressionContainer(attr.value)) {
-				dangerousHTML = attr.value.expression as t.Expression;
-			}
-			continue; // don't output as attribute
-		}
-		// drop event handlers
-		if (attrName.startsWith("on")) continue;
-		// drop client-only props
-		if (attrName === "use") continue;
-		if (attrName.startsWith("bind")) continue;
-
-		const domAttr = ATTR_MAP_SSR[attrName] ?? attrName;
-
-		if (t.isStringLiteral(attr.value)) {
-			parts.push(` ${domAttr}="${attr.value.value}"`);
-		} else if (t.isJSXExpressionContainer(attr.value)) {
-			const expr = attr.value.expression as t.Expression;
-			parts.push(` ${domAttr}="`);
-			parts.push(escape(expr));
-			parts.push(`"`);
-		}
-	}
-
-	if (VOID_ELEMENTS.has(tagName)) {
-		parts.push(">");
-		return buildTemplate(parts);
-	}
-
-	parts.push(">");
-
-	if (dangerousHTML) {
-		parts.push(dangerousHTML);
-		parts.push(`</${tagName}>`);
-		return buildTemplate(parts);
-	}
-
-	// children
-	for (const child of node.children) {
-		if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			const normalized = text.replace(/\s*\n\s*/g, " ");
-			parts.push(normalized);
-		} else if (t.isJSXElement(child)) {
-			parts.push(processElementSSR(child, signals));
-		} else if (t.isJSXFragment(child)) {
-			parts.push(processFragmentSSR(child, signals));
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				parts.push(processElementSSR(expr, signals));
-			} else if (t.isJSXFragment(expr)) {
-				parts.push(processFragmentSSR(expr, signals));
-			} else {
-				// Delimit dynamic text segments so SSR produces separate text
-				// nodes that the hydrate compiler can claim individually.
-				parts.push("<!--g-->");
-				parts.push(escape(expr));
-				parts.push("<!--/g-->");
-			}
-		}
-	}
-
-	parts.push(`</${tagName}>`);
-	return buildTemplate(parts);
-}
-
-function processComponentSSR(
-	node: t.JSXElement,
-	tagName: string,
-	signals: Set<string>,
-): t.TemplateLiteral {
-	const props = t.objectExpression([]);
-
-	for (const attr of node.openingElement.attributes) {
-		if (!t.isJSXAttribute(attr)) continue;
-		const attrName = (attr.name as t.JSXIdentifier).name;
-		// data-key is a framework-internal attribute for HTML elements only; skip for components
-		if (attrName === "data-key" || attrName === "key") continue;
-		// use StringLiteral key for hyphenated names, Identifier otherwise
-		const propKey = /[^a-zA-Z_$0-9]/.test(attrName)
-			? t.stringLiteral(attrName)
-			: t.identifier(attrName);
-		if (t.isStringLiteral(attr.value)) {
-			props.properties.push(t.objectProperty(propKey, attr.value));
-		} else if (t.isJSXExpressionContainer(attr.value)) {
-			props.properties.push(
-				t.objectProperty(propKey, attr.value.expression as t.Expression),
-			);
-		}
-	}
-
-	// children as string
-	const childParts: Array<string | t.Expression> = [];
-	for (const child of node.children) {
-		if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			const normalized = text.replace(/\s*\n\s*/g, " ");
-			childParts.push(normalized);
-		} else if (t.isJSXElement(child)) {
-			childParts.push(processElementSSR(child, signals));
-		} else if (t.isJSXFragment(child)) {
-			childParts.push(processFragmentSSR(child, signals));
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				childParts.push(processElementSSR(expr, signals));
-			} else if (t.isJSXFragment(expr)) {
-				childParts.push(processFragmentSSR(expr, signals));
-			} else {
-				childParts.push("<!--g-->");
-				childParts.push(escape(expr));
-				childParts.push("<!--/g-->");
-			}
-		}
-	}
-
-	if (childParts.length > 0) {
-		props.properties.push(
-			t.objectProperty(
-				t.identifier("children"),
-				t.callExpression(t.identifier("__h"), [buildTemplate(childParts)]),
-			),
-		);
-	}
-
-	// Component({ ...props }) - result is already a string
-	const call = t.callExpression(t.identifier("__h"), [
-		t.callExpression(t.identifier(tagName), [props]),
-	]);
-
-	// wrap in template so return type is consistent
-	return t.templateLiteral(
-		[
-			t.templateElement({ raw: "", cooked: "" }),
-			t.templateElement({ raw: "", cooked: "" }, true),
-		],
-		[call],
-	);
-}
-
-export function processFragmentSSR(
-	node: t.JSXFragment,
-	signals: Set<string>,
-): t.TemplateLiteral {
-	const parts: Array<string | t.Expression> = [];
-
-	for (const child of node.children) {
-		if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			const normalized = text.replace(/\s*\n\s*/g, " ");
-			parts.push(normalized);
-		} else if (t.isJSXElement(child)) {
-			parts.push(processElementSSR(child, signals));
-		} else if (t.isJSXFragment(child)) {
-			parts.push(processFragmentSSR(child, signals));
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				parts.push(processElementSSR(expr, signals));
-			} else if (t.isJSXFragment(expr)) {
-				parts.push(processFragmentSSR(expr, signals));
-			} else {
-				parts.push("<!--g-->");
-				parts.push(escape(expr));
-				parts.push("<!--/g-->");
-			}
-		}
-	}
-
-	return buildTemplate(parts);
-}
+import { types as t } from "@babel/core";
+import { isGlobalComponent } from "../handlers/dom/globals";
+import { getTagName } from "../util/helpers";
+
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr",
+]);
+
+const ATTR_MAP_SSR: Record<string, string> = {
+	className: "class",
+	htmlFor: "for",
+};
+//biome-ignore  lint/suspicious/noShadowRestrictedNames: shut up
+function escape(expr: t.Expression): t.CallExpression {
+	return t.callExpression(t.identifier("__e"), [expr]);
+}
+
+// builds a template literal from alternating string parts and expressions
+function buildTemplate(parts: Array<string | t.Expression>): t.TemplateLiteral {
+	const quasis: t.TemplateElement[] = [];
+	const exprs: t.Expression[] = [];
+	let current = "";
+
+	for (const part of parts) {
+		if (typeof part === "string") {
+			current += part;
+		} else {
+			quasis.push(t.templateElement({ raw: current, cooked: current }));
+			current = "";
+			exprs.push(part);
+		}
+	}
+	quasis.push(t.templateElement({ raw: current, cooked: current }, true));
+	return t.templateLiteral(quasis, exprs);
+}
+
+/**
+ * <Component /> is always JSX so its always safe to render as is
+ * but the compiler can also register its own safe variables, like:
+ * ```ts
+ * const rendered = <Component foo="bar" />
+ * return <div>{rendered}</div>
+ * ```
+ * @param expr
+ * @param safeIdents
+ * @returns
+ */
+/*
+function isSSRSafe(expr: t.Expression, safeIdents: Set<string>): boolean {
+    // direct JSX - compiled to HTML string by this very plugin
+    if (t.isJSXElement(expr) || t.isJSXFragment(expr)) return true;
+
+    // component call - returns HTML string by convention
+    if (
+        t.isCallExpression(expr) &&
+        t.isIdentifier(expr.callee) &&
+        /^[A-Z]/.test(expr.callee.name)
+    ) return true;
+
+    // registered by compiler (e.g. children)
+    if (t.isIdentifier(expr)) {
+        // if sigil as a compiler doesnt have an insane CVE
+        // this will always be true
+        if (expr.name === "children") return true;
+        return safeIdents.has(expr.name);
+    }
+
+    // condition && <JSX> — right side produces HTML
+    if (t.isLogicalExpression(expr))
+        return isSSRSafe(expr.right as t.Expression, safeIdents);
+
+    // condition ? <JSX> : <JSX> — both branches must be checked
+    if (t.isConditionalExpression(expr)) {
+        return (
+            isSSRSafe(expr.consequent as t.Expression, safeIdents) ||
+            isSSRSafe(expr.alternate as t.Expression, safeIdents)
+        );
+    }
+    if (
+        t.isCallExpression(expr) &&
+        t.isMemberExpression(expr.callee) &&
+        t.isIdentifier(expr.callee.property) &&
+        expr.callee.property.name === "map"
+    ) {
+        const cb = expr.arguments[0];
+        if (t.isArrowFunctionExpression(cb) || t.isFunctionExpression(cb)) {
+            const body = cb.body;
+            if (t.isJSXElement(body) || t.isJSXFragment(body)) return true;
+            if (t.isBlockStatement(body)) {
+                for (const stmt of body.body) {
+                    if (
+                        t.isReturnStatement(stmt) &&
+                        stmt.argument &&
+                        (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument))
+                    ) return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+*/
+export function processElementSSR(
+	node: t.JSXElement,
+	signals: Set<string>,
+): t.TemplateLiteral {
+	const tagName = getTagName(node.openingElement.name);
+	const isComponent = /^[A-Z]/.test(tagName);
+
+	if (isComponent) {
+		// Global components (Window/Document/Body) produce no SSR output
+		if (isGlobalComponent(tagName)) {
+			return t.templateLiteral(
+				[t.templateElement({ raw: "", cooked: "" }, true)],
+				[],
+			);
+		}
+		return processComponentSSR(node, tagName, signals);
+	}
+	let dangerousHTML: t.Expression | null = null;
+	const parts: Array<string | t.Expression> = [];
+	parts.push(`<${tagName}`);
+
+	// attributes
+	for (const attr of node.openingElement.attributes) {
+		if (!t.isJSXAttribute(attr)) continue;
+
+		// namespaced attributes are client-only directives
+		// (transition:/in:/out:/bind:) — SSR drops them entirely
+		if (t.isJSXNamespacedName(attr.name)) continue;
+
+		const attrName = (attr.name as t.JSXIdentifier).name;
+
+		if (attrName === "innerHTML") {
+			if (t.isJSXExpressionContainer(attr.value)) {
+				dangerousHTML = attr.value.expression as t.Expression;
+			}
+			continue; // don't output as attribute
+		}
+		// drop event handlers
+		if (attrName.startsWith("on")) continue;
+		// drop client-only props
+		if (attrName === "use") continue;
+		if (attrName.startsWith("bind")) continue;
+
+		const domAttr = ATTR_MAP_SSR[attrName] ?? attrName;
+
+		if (t.isStringLiteral(attr.value)) {
+			parts.push(` ${domAttr}="${attr.value.value}"`);
+		} else if (t.isJSXExpressionContainer(attr.value)) {
+			const expr = attr.value.expression as t.Expression;
+			if (
+				attrName === "style" &&
+				t.isObjectExpression(expr) &&
+				expr.properties.every((prop) => t.isObjectProperty(prop))
+			) {
+				// style={{ key: value, ... }} — serialize to real "key:value;"
+				// CSS text instead of the generic String(expr) path below, which
+				// would stringify the object itself to the literal "[object Object]"
+				parts.push(` style="`);
+				for (const prop of expr.properties as t.ObjectProperty[]) {
+					const key = t.isIdentifier(prop.key)
+						? prop.key.name
+						: t.isStringLiteral(prop.key)
+							? prop.key.value
+							: null;
+					if (key === null) continue;
+					const cssKey = key.replace(
+						/[A-Z]/g,
+						(letter) => `-${letter.toLowerCase()}`,
+					);
+					parts.push(`${cssKey}:`);
+					parts.push(escape(prop.value as t.Expression));
+					parts.push(";");
+				}
+				parts.push(`"`);
+			} else {
+				parts.push(` ${domAttr}="`);
+				parts.push(escape(expr));
+				parts.push(`"`);
+			}
+		}
+	}
+
+	if (VOID_ELEMENTS.has(tagName)) {
+		parts.push(">");
+		return buildTemplate(parts);
+	}
+
+	parts.push(">");
+
+	if (dangerousHTML) {
+		parts.push(dangerousHTML);
+		parts.push(`</${tagName}>`);
+		return buildTemplate(parts);
+	}
+
+	// children
+	for (const child of node.children) {
+		if (t.isJSXText(child)) {
+			const text = child.value;
+			if (!text.trim()) continue;
+			const normalized = text.replace(/\s*\n\s*/g, " ");
+			parts.push(normalized);
+		} else if (t.isJSXElement(child)) {
+			parts.push(processElementSSR(child, signals));
+		} else if (t.isJSXFragment(child)) {
+			parts.push(processFragmentSSR(child, signals));
+		} else if (t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			const expr = child.expression as t.Expression;
+			if (t.isJSXElement(expr)) {
+				parts.push(processElementSSR(expr, signals));
+			} else if (t.isJSXFragment(expr)) {
+				parts.push(processFragmentSSR(expr, signals));
+			} else {
+				// Delimit dynamic text segments so SSR produces separate text
+				// nodes that the hydrate compiler can claim individually.
+				parts.push("<!--g-->");
+				parts.push(escape(expr));
+				parts.push("<!--/g-->");
+			}
+		}
+	}
+
+	parts.push(`</${tagName}>`);
+	return buildTemplate(parts);
+}
+
+function processComponentSSR(
+	node: t.JSXElement,
+	tagName: string,
+	signals: Set<string>,
+): t.TemplateLiteral {
+	const props = t.objectExpression([]);
+
+	for (const attr of node.openingElement.attributes) {
+		if (!t.isJSXAttribute(attr)) continue;
+		const attrName = (attr.name as t.JSXIdentifier).name;
+		// data-key is a framework-internal attribute for HTML elements only; skip for components
+		if (attrName === "data-key" || attrName === "key") continue;
+		// use StringLiteral key for hyphenated names, Identifier otherwise
+		const propKey = /[^a-zA-Z_$0-9]/.test(attrName)
+			? t.stringLiteral(attrName)
+			: t.identifier(attrName);
+		if (t.isStringLiteral(attr.value)) {
+			props.properties.push(t.objectProperty(propKey, attr.value));
+		} else if (t.isJSXExpressionContainer(attr.value)) {
+			props.properties.push(
+				t.objectProperty(propKey, attr.value.expression as t.Expression),
+			);
+		}
+	}
+
+	// children as string
+	const childParts: Array<string | t.Expression> = [];
+	for (const child of node.children) {
+		if (t.isJSXText(child)) {
+			const text = child.value;
+			if (!text.trim()) continue;
+			const normalized = text.replace(/\s*\n\s*/g, " ");
+			childParts.push(normalized);
+		} else if (t.isJSXElement(child)) {
+			childParts.push(processElementSSR(child, signals));
+		} else if (t.isJSXFragment(child)) {
+			childParts.push(processFragmentSSR(child, signals));
+		} else if (t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			const expr = child.expression as t.Expression;
+			if (t.isJSXElement(expr)) {
+				childParts.push(processElementSSR(expr, signals));
+			} else if (t.isJSXFragment(expr)) {
+				childParts.push(processFragmentSSR(expr, signals));
+			} else {
+				childParts.push("<!--g-->");
+				childParts.push(escape(expr));
+				childParts.push("<!--/g-->");
+			}
+		}
+	}
+
+	if (childParts.length > 0) {
+		props.properties.push(
+			t.objectProperty(
+				t.identifier("children"),
+				t.callExpression(t.identifier("__h"), [buildTemplate(childParts)]),
+			),
+		);
+	}
+
+	// Component({ ...props }) - result is already a string
+	const call = t.callExpression(t.identifier("__h"), [
+		t.callExpression(t.identifier(tagName), [props]),
+	]);
+
+	// wrap in template so return type is consistent
+	return t.templateLiteral(
+		[
+			t.templateElement({ raw: "", cooked: "" }),
+			t.templateElement({ raw: "", cooked: "" }, true),
+		],
+		[call],
+	);
+}
+
+export function processFragmentSSR(
+	node: t.JSXFragment,
+	signals: Set<string>,
+): t.TemplateLiteral {
+	const parts: Array<string | t.Expression> = [];
+
+	for (const child of node.children) {
+		if (t.isJSXText(child)) {
+			const text = child.value;
+			if (!text.trim()) continue;
+			const normalized = text.replace(/\s*\n\s*/g, " ");
+			parts.push(normalized);
+		} else if (t.isJSXElement(child)) {
+			parts.push(processElementSSR(child, signals));
+		} else if (t.isJSXFragment(child)) {
+			parts.push(processFragmentSSR(child, signals));
+		} else if (t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			const expr = child.expression as t.Expression;
+			if (t.isJSXElement(expr)) {
+				parts.push(processElementSSR(expr, signals));
+			} else if (t.isJSXFragment(expr)) {
+				parts.push(processFragmentSSR(expr, signals));
+			} else {
+				parts.push("<!--g-->");
+				parts.push(escape(expr));
+				parts.push("<!--/g-->");
+			}
+		}
+	}
+
+	return buildTemplate(parts);
+}