@reckona/mreact-compiler 0.0.153 → 0.0.154

package/dist/emit-server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"emit-server.d.ts","sourceRoot":"","sources":["../src/emit-server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwD,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAqBrE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AASD,wBAAgB,UAAU,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CA8GpF"}
+{"version":3,"file":"emit-server.d.ts","sourceRoot":"","sources":["../src/emit-server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwD,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAqBrE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAUD,wBAAgB,UAAU,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAoHpF"}

package/dist/emit-server.js

@@ -8,6 +8,7 @@ import { emitOxcCompatObjectChildren, oxcServerStringReactNodeRenderHelperPlaceh
 // name through every signature. Reset at the top of `emitServer`.
 let currentUrlSafeHelperName = "_urlAttrSafe";
 let currentClientBoundaryHelperName;
+let currentCompatChildHelperName;
 let currentSpreadAttributesHelperName = "_renderSpreadAttributes";
 export function emitServer(ir, options = {}) {
     const escapeHelperName = allocateEscapeHelperName(ir);
@@ -24,12 +25,16 @@ export function emitServer(ir, options = {}) {
     const clientBoundaryHelperName = usesClientBoundary(ir)
         ? allocateHelperName(ir, "_renderClientBoundary")
         : undefined;
+    const compatChildHelperName = usesCompatChildRender(ir)
+        ? allocateHelperName(ir, "_renderCompatChild")
+        : undefined;
     const spreadAttributesHelperName = allocateHelperName(ir, "_renderSpreadAttributes");
     const outAccumulatorName = allocateHelperName(ir, "_out");
     const urlSafeHelperName = allocateHelperName(ir, "_urlAttrSafe");
     currentUrlSafeHelperName = urlSafeHelperName;
     setOxcServerStringUrlSafeHelperName(urlSafeHelperName);
     currentClientBoundaryHelperName = clientBoundaryHelperName;
+    currentCompatChildHelperName = compatChildHelperName;
     currentSpreadAttributesHelperName = spreadAttributesHelperName;
     const helper = emitEscapeHtmlHelper(escapeHelperName);
     // Inline URL-scheme guard mirroring packages/server/src/url-safety.ts.
@@ -77,7 +82,7 @@ export function emitServer(ir, options = {}) {
         ? ""
         : `import { ${options.escape.batchImportName} as ${escapeBatchHelperName} } from ${stringLiteral(options.escape.batchImportSource)};`;
     const userImports = emitUserImports(ir);
-    const contextImport = emitContextImport(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
+    const contextImport = emitContextImport(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName, compatChildHelperName);
     const moduleStatements = emitModuleStatements(ir);
     const code = createCodeBuilder();
     code.section(userImports);
@@ -91,14 +96,17 @@ export function emitServer(ir, options = {}) {
     code.section(components);
     return {
         code: code.toString(),
-        imports: collectContextImports(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName),
+        imports: collectContextImports(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName, compatChildHelperName),
     };
 }
-function emitContextImport(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName) {
+function emitContextImport(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName, compatChildHelperName) {
     const specifiers = [
         reactNodeRenderHelperName === undefined
             ? undefined
             : `renderToString as ${reactNodeRenderHelperName}`,
+        compatChildHelperName === undefined
+            ? undefined
+            : `renderChildToString as ${compatChildHelperName}`,
         contextProviderHelperName === undefined
             ? undefined
             : `renderContextProviderToString as ${contextProviderHelperName}`,
@@ -110,11 +118,12 @@ function emitContextImport(contextProviderHelperName, contextConsumerHelperName,
         ? ""
         : `import { ${specifiers.join(", ")} } from "@reckona/mreact-compat";`;
 }
-function collectContextImports(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName) {
+function collectContextImports(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName, compatChildHelperName) {
     const specifiers = [
         reactNodeRenderHelperName === undefined ? undefined : "renderToString",
         contextProviderHelperName === undefined ? undefined : "renderContextProviderToString",
         contextConsumerHelperName === undefined ? undefined : "renderContextConsumerToString",
+        compatChildHelperName === undefined ? undefined : "renderChildToString",
     ].filter((specifier) => specifier !== undefined);
     return specifiers.length === 0 ? [] : [{ source: "@reckona/mreact-compat", specifiers }];
 }
@@ -179,6 +188,9 @@ function collectHtmlStatements(node, outVar, escapeHelperName, escapeBatchHelper
         if (node.renderMode === "react-node" && reactNodeRenderHelperName !== undefined) {
             return [`${outVar} += ${reactNodeRenderHelperName}(() => (${node.code}));`];
         }
+        if (node.renderMode === "compat-child" && currentCompatChildHelperName !== undefined) {
+            return [`${outVar} += ${currentCompatChildHelperName}(${node.code});`];
+        }
         return [`${outVar} += ${escapeHelperName}(${node.code});`];
     }
     if (node.kind === "conditional") {
@@ -364,6 +376,9 @@ function collectHtmlParts(node, escapeHelperName, escapeBatchHelperName, asyncCo
         if (node.renderMode === "react-node" && reactNodeRenderHelperName !== undefined) {
             return [`${reactNodeRenderHelperName}(() => (${node.code}))`];
         }
+        if (node.renderMode === "compat-child" && currentCompatChildHelperName !== undefined) {
+            return [`${currentCompatChildHelperName}(${node.code})`];
+        }
         return [`${escapeHelperName}(${node.code})`];
     }
     if (node.kind === "conditional") {
@@ -514,7 +529,9 @@ function collectHtmlAttributeParts(tagName, attr, escapeHelperName, escapeBatchH
     }
     if (attr.name === "style") {
         return [
-            emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName),
+            attr.serialization === "compat"
+                ? emitCompatDynamicStyleAttributeExpression(attr.code, escapeHelperName)
+                : emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName),
         ];
     }
     if (isDangerousHtmlAttribute(htmlName)) {
@@ -525,7 +542,11 @@ function collectHtmlAttributeParts(tagName, attr, escapeHelperName, escapeBatchH
             `(() => { const _value = (${attr.code}); if (_value == null || _value === false) return ""; if (typeof _value === "object" && _value !== null && typeof _value.__html === "string") return ${stringLiteral(` ${htmlName}="`)} + ${escapeHelperName}(_value.__html) + ${stringLiteral('"')}; return ""; })()`,
         ];
     }
-    return [emitDynamicAttributeExpression(htmlName, attr.code, escapeHelperName)];
+    return [
+        attr.serialization === "compat" && !isUrlAttribute(htmlName)
+            ? emitCompatDynamicAttributeExpression(htmlName, attr.code, escapeHelperName)
+            : emitDynamicAttributeExpression(htmlName, attr.code, escapeHelperName),
+    ];
 }
 function collectElementAttributeParts(tagName, attrs, escapeHelperName, escapeBatchHelperName, dynamicAttributes, attributeScan = scanElementAttributes(tagName, attrs)) {
     if (dynamicAttributes === "emit" && attrs.some((attr) => attr.kind === "spread-attr")) {
@@ -620,6 +641,29 @@ function emitDynamicAttributeExpression(name, code, escapeHelperName) {
         ? `(() => { const _value = (${code}); return _value == null ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value) + ${stringLiteral('"')}; })()`
         : `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral('"')}; })()`;
 }
+// Mirrors packages/react-compat/src/server-render.ts renderHtmlAttribute for
+// dynamic values: functions and objects drop, booleans serialize as
+// "true"/"false" for booleanish-string and data attributes, and false drops
+// elsewhere. Byte parity with the interpreter is pinned by tests.
+function emitCompatDynamicAttributeExpression(name, code, escapeHelperName) {
+    const lowerCased = name.toLowerCase();
+    const booleanishOrData = lowerCased.startsWith("aria-") ||
+        lowerCased.startsWith("data-") ||
+        lowerCased === "contenteditable" ||
+        lowerCased === "draggable" ||
+        lowerCased === "spellcheck";
+    const booleanBranch = booleanishOrData
+        ? `return ${stringLiteral(` ${name}="`)} + (_value ? "true" : "false") + ${stringLiteral('"')};`
+        : `return _value ? ${stringLiteral(` ${name}=""`)} : "";`;
+    return `(() => { const _value = (${code}); if (_value == null || typeof _value === "function") return ""; if (typeof _value === "boolean") { ${booleanBranch} } if (typeof _value === "object") return ""; return ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value) + ${stringLiteral('"')}; })()`;
+}
+// Mirrors packages/react-compat/src/server-render.ts renderStyleAttribute and
+// renderCssValue: skips null/boolean/empty entries and appends px to nonzero
+// numeric values outside the react unitless list.
+function emitCompatDynamicStyleAttributeExpression(code, escapeHelperName) {
+    const unitlessCheck = '_styleName === "flex" || _styleName === "fontWeight" || _styleName === "lineHeight" || _styleName === "opacity" || _styleName === "order" || _styleName === "zIndex" || _styleName === "zoom"';
+    return `(() => { const _value = (${code}); if (_value == null || typeof _value !== "object") return ""; let _style = ""; for (const _styleName in _value) { const _styleValue = _value[_styleName]; if (_styleValue == null || typeof _styleValue === "boolean" || _styleValue === "") continue; const _cssName = _styleName.startsWith("--") ? _styleName : _styleName.replace(/[A-Z]/g, (_char) => "-" + _char.toLowerCase()); const _css = typeof _styleValue !== "number" || _styleValue === 0 || (${unitlessCheck}) ? String(_styleValue) : _styleValue + "px"; _style += (_style === "" ? "" : ";") + ${escapeHelperName}(_cssName) + ":" + ${escapeHelperName}(_css); } return _style === "" ? "" : ${stringLiteral(' style="')} + _style + ${stringLiteral('"')}; })()`;
+}
 function emitDynamicStyleAttributeExpression(code, escapeHelperName, escapeBatchHelperName) {
     const staticStyleExpression = emitStaticStyleObjectAttributeExpression(code, escapeHelperName);
     if (staticStyleExpression !== undefined) {
@@ -704,14 +748,18 @@ function emitBatchedSimpleChildrenExpression(children, escapeBatchHelperName) {
     if (escapeBatchHelperName === undefined) {
         return undefined;
     }
-    const dynamicChildren = children.filter((child) => child.kind === "expr" && child.renderMode !== "html" && child.renderMode !== "react-node");
+    const dynamicChildren = children.filter((child) => child.kind === "expr" &&
+        child.renderMode !== "html" &&
+        child.renderMode !== "react-node" &&
+        child.renderMode !== "compat-child");
     if (dynamicChildren.length < 2) {
         return undefined;
     }
     if (children.some((child) => child.kind !== "text" &&
         !(child.kind === "expr" &&
             child.renderMode !== "html" &&
-            child.renderMode !== "react-node"))) {
+            child.renderMode !== "react-node" &&
+            child.renderMode !== "compat-child"))) {
         return undefined;
     }
     const values = dynamicChildren.map((child) => child.code);
@@ -885,6 +933,31 @@ function replaceOxcServerStringReactNodeRenderHelper(code, helperName) {
 function usesClientBoundary(ir) {
     return ir.components.some((component) => containsClientBoundary(component.root));
 }
+function usesCompatChildRender(ir) {
+    return ir.components.some((component) => containsCompatChildRender(component.root));
+}
+function containsCompatChildRender(node) {
+    if (node.kind === "expr") {
+        return node.renderMode === "compat-child";
+    }
+    if (node.kind === "conditional") {
+        return [...node.whenTrue, ...node.whenFalse].some(containsCompatChildRender);
+    }
+    if (node.kind === "list" || node.kind === "element" || node.kind === "fragment") {
+        return node.children.some(containsCompatChildRender);
+    }
+    if (node.kind === "async-boundary") {
+        return [
+            ...node.children,
+            ...(node.placeholderChildren ?? []),
+            ...(node.catchChildren ?? []),
+        ].some(containsCompatChildRender);
+    }
+    if (node.kind === "component") {
+        return node.children.some(containsCompatChildRender);
+    }
+    return false;
+}
 function emitClientBoundaryHelper(name) {
     const propsHelperName = `${name}$hasNonSerializableProps`;
     return [