@reckona/mreact-compiler 0.0.120 → 0.0.121

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,EAKV,QAAQ,EACT,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAkBrE,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,CACxB,EAAE,EAAE,QAAQ,EACZ,OAAO,GAAE,iBAAsB,GAC9B,UAAU,CA8GZ"}
+{"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;AAkBrE,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,CA6GpF"}

package/dist/emit-server.js

@@ -11,9 +11,7 @@ let currentClientBoundaryHelperName;
 let currentSpreadAttributesHelperName = "_renderSpreadAttributes";
 export function emitServer(ir, options = {}) {
     const escapeHelperName = allocateEscapeHelperName(ir);
-    const escapeBatchHelperName = options.escape === undefined
-        ? undefined
-        : allocateHelperName(ir, "_escapeHtmlBatch");
+    const escapeBatchHelperName = options.escape === undefined ? undefined : allocateHelperName(ir, "_escapeHtmlBatch");
     const contextProviderHelperName = usesContextProvider(ir)
         ? allocateHelperName(ir, "_renderContextProviderToString")
         : undefined;
@@ -114,16 +112,10 @@ function emitContextImport(contextProviderHelperName, contextConsumerHelperName,
 function collectContextImports(contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName) {
     const specifiers = [
         reactNodeRenderHelperName === undefined ? undefined : "renderToString",
-        contextProviderHelperName === undefined
-            ? undefined
-            : "renderContextProviderToString",
-        contextConsumerHelperName === undefined
-            ? undefined
-            : "renderContextConsumerToString",
+        contextProviderHelperName === undefined ? undefined : "renderContextProviderToString",
+        contextConsumerHelperName === undefined ? undefined : "renderContextConsumerToString",
     ].filter((specifier) => specifier !== undefined);
-    return specifiers.length === 0
-        ? []
-        : [{ source: "@reckona/mreact-compat", specifiers }];
+    return specifiers.length === 0 ? [] : [{ source: "@reckona/mreact-compat", specifiers }];
 }
 function emitUserImports(ir) {
     return ir.userImports.join("\n");
@@ -154,7 +146,7 @@ function emitComponent(component, escapeHelperName, escapeBatchHelperName, outAc
 function emitHtmlExpression(node, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName) {
     const parts = collectHtmlParts(node, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
     if (parts.length === 0) {
-        return "\"\"";
+        return '""';
     }
     return parts.join(" + ");
 }
@@ -291,8 +283,12 @@ function collectHtmlStatements(node, outVar, escapeHelperName, escapeBatchHelper
         if (isClientBoundaryPlaceholder(node)) {
             const helperName = currentClientBoundaryHelperName;
             if (helperName !== undefined) {
+                const boundaryProps = emitPropsObject(node.props, [], escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
+                const fallbackHtml = shouldRenderClientBoundaryFallback(node)
+                    ? emitComponentCallExpression(node.name, boundaryProps, asyncComponentNames)
+                    : emitHtmlExpressionFromChildren(node.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
                 return [
-                    `${outVar} += ${helperName}(${stringLiteral(node.name)}, ${emitPropsObject(node.props, [], escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)}, ${emitHtmlExpressionFromChildren(node.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)});`,
+                    `${outVar} += ${helperName}(${stringLiteral(node.name)}, ${boundaryProps}, ${fallbackHtml});`,
                 ];
             }
             return [`${outVar} += ${stringLiteral(clientBoundaryPlaceholder(node))};`];
@@ -341,9 +337,7 @@ function collectHtmlStatements(node, outVar, escapeHelperName, escapeBatchHelper
         return statements;
     }
     const childrenExpression = emitBatchedSimpleChildrenExpression(node.children, escapeBatchHelperName);
-    const childSelectedValueCode = node.tagName === "select"
-        ? attributeScan.formValueAttributeCode
-        : undefined;
+    const childSelectedValueCode = node.tagName === "select" ? attributeScan.formValueAttributeCode : undefined;
     if (childrenExpression !== undefined && childSelectedValueCode === undefined) {
         statements.push(`${outVar} += ${childrenExpression};`);
     }
@@ -391,7 +385,9 @@ function collectHtmlParts(node, escapeHelperName, escapeBatchHelperName, asyncCo
         // Synchronous list — imperative accumulator avoids the per-render
         // callback allocation, the intermediate `.map()` result array, and the
         // trailing `.join("")` call.
-        return [emitSyncListIife(node, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)];
+        return [
+            emitSyncListIife(node, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName),
+        ];
     }
     if (node.kind === "fragment") {
         return node.children.flatMap((child) => collectHtmlParts(child, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName));
@@ -453,9 +449,7 @@ function collectHtmlParts(node, escapeHelperName, escapeBatchHelperName, asyncCo
     }
     const childrenExpression = emitBatchedSimpleChildrenExpression(node.children, escapeBatchHelperName);
     const attributeScan = scanElementAttributes(node.tagName, node.attributes);
-    const childSelectedValueCode = node.tagName === "select"
-        ? attributeScan.formValueAttributeCode
-        : undefined;
+    const childSelectedValueCode = node.tagName === "select" ? attributeScan.formValueAttributeCode : undefined;
     const selectedAttributePart = collectOptionSelectedAttributePart(node, selectedValueCode);
     const dangerousInnerHtml = emitDangerouslySetInnerHtmlExpression(node.attributes);
     const childrenParts = dangerousInnerHtml !== undefined
@@ -509,14 +503,16 @@ function collectHtmlAttributeParts(tagName, attr, escapeHelperName, escapeBatchH
         return [];
     }
     if (attr.name === "style") {
-        return [emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName)];
+        return [
+            emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName),
+        ];
     }
     if (isDangerousHtmlAttribute(htmlName)) {
         // Dynamic srcdoc must arrive as `{ __html: "..." }`. Drop anything
         // else at runtime so a value computed from a loader cannot inject
         // executable HTML into the iframe document.
         return [
-            `(() => { 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 ""; })()`,
+            `(() => { 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)];
@@ -575,8 +571,7 @@ function scanElementAttributes(tagName, attrs) {
         if ((tagName === "textarea" || tagName === "select") && attr.name === "value") {
             valueAttributeCode = readFormValueAttributeCode(attr);
         }
-        else if ((tagName === "textarea" || tagName === "select") &&
-            attr.name === "defaultValue") {
+        else if ((tagName === "textarea" || tagName === "select") && attr.name === "defaultValue") {
             defaultValueAttributeCode = readFormValueAttributeCode(attr);
         }
     }
@@ -598,7 +593,7 @@ function emitDynamicAttributeExpression(name, code, escapeHelperName) {
         // returns the value when safe and `undefined` when the attribute
         // should be dropped. Using an IIFE here is necessary because we
         // need to capture the value once and branch on the helper output.
-        return `(() => { const _value = (${code}); if (_value == null || _value === false) return ""; const _checked = ${currentUrlSafeHelperName}(${stringLiteral(name)}, _value === true ? "" : _value); return _checked === undefined ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_checked) + ${stringLiteral("\"")}; })()`;
+        return `(() => { const _value = (${code}); if (_value == null || _value === false) return ""; const _checked = ${currentUrlSafeHelperName}(${stringLiteral(name)}, _value === true ? "" : _value); return _checked === undefined ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_checked) + ${stringLiteral('"')}; })()`;
     }
     const inlineExpr = simpleSideEffectFreeExpression(code);
     if (inlineExpr !== undefined) {
@@ -606,9 +601,9 @@ function emitDynamicAttributeExpression(name, code, escapeHelperName) {
         // Safe because `simpleSideEffectFreeExpression` only matches expressions
         // whose evaluation has no observable side effects (identifier read,
         // member chain, literal, this).
-        return `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral("\"")})`;
+        return `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral('"')})`;
     }
-    return `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral("\"")}; })()`;
+    return `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral('"')}; })()`;
 }
 function emitDynamicStyleAttributeExpression(code, escapeHelperName, escapeBatchHelperName) {
     const staticStyleExpression = emitStaticStyleObjectAttributeExpression(code, escapeHelperName);
@@ -618,7 +613,7 @@ function emitDynamicStyleAttributeExpression(code, escapeHelperName, escapeBatch
     const escapedPair = escapeBatchHelperName === undefined
         ? `${escapeHelperName}(_cssName) + ":" + ${escapeHelperName}(_styleValue === true ? "" : _styleValue)`
         : `(() => { const _escaped = ${escapeBatchHelperName}([_cssName, _styleValue === true ? "" : _styleValue]); return _escaped[0] + ":" + _escaped[1]; })()`;
-    return `(() => { const _value = (${code}); if (_value == null || _value === false) return ""; if (typeof _value === "string") { const _style = ${escapeHelperName}(_value); return _style === "" ? "" : ${stringLiteral(" style=\"")} + _style + ${stringLiteral("\"")}; } const _style = Object.entries(_value).filter(([, _styleValue]) => _styleValue != null && _styleValue !== false).map(([_styleName, _styleValue]) => { const _cssName = String(_styleName).startsWith("--") ? String(_styleName) : String(_styleName).replace(/[A-Z]/g, (_char) => "-" + _char.toLowerCase()); return ${escapedPair}; }).join(";"); return _style === "" ? "" : ${stringLiteral(" style=\"")} + _style + ${stringLiteral("\"")}; })()`;
+    return `(() => { const _value = (${code}); if (_value == null || _value === false) return ""; if (typeof _value === "string") { const _style = ${escapeHelperName}(_value); return _style === "" ? "" : ${stringLiteral(' style="')} + _style + ${stringLiteral('"')}; } const _style = Object.entries(_value).filter(([, _styleValue]) => _styleValue != null && _styleValue !== false).map(([_styleName, _styleValue]) => { const _cssName = String(_styleName).startsWith("--") ? String(_styleName) : String(_styleName).replace(/[A-Z]/g, (_char) => "-" + _char.toLowerCase()); return ${escapedPair}; }).join(";"); return _style === "" ? "" : ${stringLiteral(' style="')} + _style + ${stringLiteral('"')}; })()`;
 }
 function emitStaticStyleObjectAttributeExpression(code, escapeHelperName) {
     const entries = parseStaticStyleObjectLiteral(code);
@@ -646,7 +641,7 @@ function emitStaticStyleObjectAttributeExpression(code, escapeHelperName) {
     // Stage A — needSep tracking with inline string accumulator, no intermediate
     // array allocation and no `.join(";")` per render.
     const statements = entries.map((entry) => `{ const _v = (${entry.valueCode}); if (_v != null && _v !== false) _style += (_style === "" ? "" : ";") + ${stringLiteral(`${entry.cssName}:`)} + ${escapeHelperName}(_v === true ? "" : _v); }`);
-    return `(() => { let _style = ""; ${statements.join(" ")} return _style === "" ? "" : ${stringLiteral(" style=\"")} + _style + ${stringLiteral("\"")}; })()`;
+    return `(() => { let _style = ""; ${statements.join(" ")} return _style === "" ? "" : ${stringLiteral(' style="')} + _style + ${stringLiteral('"')}; })()`;
 }
 function collectTextareaValueParts(node, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName, attributeScan = scanElementAttributes(node.tagName, node.attributes)) {
     const valueCode = attributeScan.formValueAttributeCode;
@@ -668,7 +663,9 @@ function collectOptionSelectedAttributePart(node, selectedValueCode) {
 function findOptionValueCode(node) {
     const valueAttr = node.attributes.find((attr) => attr.kind !== "spread-attr" && attr.name === "value");
     if (valueAttr !== undefined && valueAttr.kind !== "event" && valueAttr.kind !== "spread-attr") {
-        return valueAttr.kind === "static-attr" ? stringLiteral(valueAttr.value) : `(${valueAttr.code})`;
+        return valueAttr.kind === "static-attr"
+            ? stringLiteral(valueAttr.value)
+            : `(${valueAttr.code})`;
     }
     return node.children.every((child) => child.kind === "text")
         ? stringLiteral(node.children.map((child) => child.value).join(""))
@@ -697,7 +694,9 @@ function emitBatchedSimpleChildrenExpression(children, escapeBatchHelperName) {
         return undefined;
     }
     if (children.some((child) => child.kind !== "text" &&
-        !(child.kind === "expr" && child.renderMode !== "html" && child.renderMode !== "react-node"))) {
+        !(child.kind === "expr" &&
+            child.renderMode !== "html" &&
+            child.renderMode !== "react-node"))) {
         return undefined;
     }
     const values = dynamicChildren.map((child) => child.code);
@@ -714,7 +713,7 @@ function emitBatchedSimpleChildrenExpression(children, escapeBatchHelperName) {
 }
 function emitHtmlExpressionFromChildren(children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName) {
     if (children.length === 0) {
-        return "\"\"";
+        return '""';
     }
     return emitHtmlExpression({ kind: "fragment", children }, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
 }
@@ -775,24 +774,27 @@ function emitCompatRuntimePropsObject(props, children = []) {
 }
 function emitComponentCallExpression(name, propsCode, asyncComponentNames) {
     const call = `${name}(${propsCode})`;
-    return asyncComponentNames.has(name) ? `(await ${call})` : call;
+    return emitRenderableHtmlExpression(asyncComponentNames.has(name) ? `(await ${call})` : call);
+}
+function emitRenderableHtmlExpression(code) {
+    return `((_value) => _value == null || typeof _value === "boolean" ? "" : _value)(${code})`;
 }
 function isClientBoundaryPlaceholder(node) {
     return node.clientReference !== undefined;
 }
+function shouldRenderClientBoundaryFallback(node) {
+    return node.clientReference?.ssrFallback === true;
+}
 function clientBoundaryPlaceholder(node) {
     return `<!--mreact-client-boundary:${escapeHtml(node.name)}-->`;
 }
 function collectAsyncServerComponentNames(components) {
-    const names = new Set(components
-        .filter((component) => component.async === true)
-        .map((component) => component.name));
+    const names = new Set(components.filter((component) => component.async === true).map((component) => component.name));
     let changed = true;
     while (changed) {
         changed = false;
         for (const component of components) {
-            if (!names.has(component.name) &&
-                containsAsyncServerOperation(component.root, names)) {
+            if (!names.has(component.name) && containsAsyncServerOperation(component.root, names)) {
                 names.add(component.name);
                 changed = true;
             }