@reckona/mreact-compiler 0.0.120 → 0.0.121

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

@@ -1 +1 @@
-{"version":3,"file":"emit-server-stream.d.ts","sourceRoot":"","sources":["../src/emit-server-stream.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAMV,QAAQ,EACT,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAwB1F,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,MAAM,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACzC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAcD,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,QAAQ,EACZ,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAqIxB"}
+{"version":3,"file":"emit-server-stream.d.ts","sourceRoot":"","sources":["../src/emit-server-stream.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAMV,QAAQ,EACT,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAwB1F,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,MAAM,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACzC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAcD,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,QAAQ,EACZ,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAsIxB"}

package/dist/emit-server-stream.js

@@ -17,9 +17,7 @@ let currentPropChildrenCollectState;
 export function emitServerStream(ir, options = {}) {
     const serverBootstrap = options.serverBootstrap ?? "none";
     const escapeHelperName = allocateHelperName(ir, "_escapeHtml");
-    const escapeBatchHelperName = options.escape === undefined
-        ? undefined
-        : allocateHelperName(ir, "_escapeHtmlBatch");
+    const escapeBatchHelperName = options.escape === undefined ? undefined : allocateHelperName(ir, "_escapeHtmlBatch");
     const asyncBoundaryHelperName = allocateHelperName(ir, "_renderAsyncBoundary");
     const outOfOrderBoundaryHelperName = allocateHelperName(ir, "_renderOutOfOrderBoundary");
     const reorderScriptHelperName = allocateHelperName(ir, "_renderOutOfOrderReorderScript");
@@ -101,7 +99,9 @@ export function emitServerStream(ir, options = {}) {
         .join("\n");
     const userImports = emitUserImports(ir);
     const moduleStatements = emitModuleStatements(ir);
-    const importsBlock = [importLine, escapeImport, userImports, moduleStatements].filter(Boolean).join("\n");
+    const importsBlock = [importLine, escapeImport, userImports, moduleStatements]
+        .filter(Boolean)
+        .join("\n");
     const needsSpreadAttributesHelper = components.includes(spreadAttributesHelperName);
     const urlSafeBlock = components.includes(urlSafeHelperName) || needsSpreadAttributesHelper ? urlSafeHelper : "";
     const clientBoundaryBlock = clientBoundaryHelperName === undefined || !components.includes(clientBoundaryHelperName)
@@ -319,7 +319,11 @@ function emitComponent(component, escapeHelperName, asyncBoundaryHelperName, out
     const hydrationEndStatements = options.serverHydration === true
         ? [`  ${sinkName}.append(${stringLiteral(`<!--mreact-h:end:${markerId}-->`)});`]
         : [];
-    const exportPrefix = component.exportDefault === true ? "export default " : component.exported === false ? "" : "export ";
+    const exportPrefix = component.exportDefault === true
+        ? "export default "
+        : component.exported === false
+            ? ""
+            : "export ";
     const asyncPrefix = component.async === true || containsAnyAsyncBoundary(component.root) ? "async " : "";
     const functionKeyword = `${exportPrefix}${asyncPrefix}function`;
     return [
@@ -543,9 +547,7 @@ function emitListPart(part, sinkName, compatRenderToStringHelperName, indent) {
         ].join("\n");
     }
     const childLines = syncCoalescedParts === undefined
-        ? [
-            emitNestedStreamAppendStatements(coalescedParts, sinkName, compatRenderToStringHelperName),
-        ]
+        ? [emitNestedStreamAppendStatements(coalescedParts, sinkName, compatRenderToStringHelperName)]
         : syncCoalescedParts.map((child) => emitSyncPartAsAppendStatement(child, sinkName, compatRenderToStringHelperName, innerIndent));
     return [
         `${indent}{`,
@@ -591,7 +593,7 @@ function tryEmitPartAsStringExpression(part, compatRenderToStringHelperName) {
         return `${stringLiteral(`<!--mreact-h:start:${encodeURIComponent(part.hydrationId)}-->`)} + ${rendered} + ${stringLiteral(`<!--mreact-h:end:${encodeURIComponent(part.hydrationId)}-->`)}`;
     }
     if (part.kind === "component" && part.hydrationId === undefined) {
-        return `${part.name}(${emitPropsObject(part.props, part.children, part.escapeHelperName)})`;
+        return emitRenderableHtmlExpression(`${part.name}(${emitPropsObject(part.props, part.children, part.escapeHelperName)})`);
     }
     // Non-compat component parts require `await sink-write`; lists with
     // sink-needing children also can't collapse. Signal fallback.
@@ -732,9 +734,7 @@ function collectHtmlParts(node, escapeHelperName, asyncBoundaryHelperName, outOf
                     ...(node.placeholderTagCode === undefined
                         ? {}
                         : { placeholderTagCode: node.placeholderTagCode }),
-                    ...(state.awaitHydration && node.awaitId !== undefined
-                        ? { awaitId: node.awaitId }
-                        : {}),
+                    ...(state.awaitHydration && node.awaitId !== undefined ? { awaitId: node.awaitId } : {}),
                     ...(node.catchName === undefined || node.catchChildren === undefined
                         ? {}
                         : {
@@ -750,9 +750,7 @@ function collectHtmlParts(node, escapeHelperName, asyncBoundaryHelperName, outOf
                 valueCode: node.valueCode,
                 valueName: node.valueName,
                 parts: node.children.flatMap((child) => collectHtmlParts(child, escapeHelperName, asyncBoundaryHelperName, outOfOrderBoundaryHelperName, reactSuspenseBoundaryHelperName, reactSuspenseOutOfOrderBoundaryHelperName, state)),
-                ...(state.awaitHydration && node.awaitId !== undefined
-                    ? { awaitId: node.awaitId }
-                    : {}),
+                ...(state.awaitHydration && node.awaitId !== undefined ? { awaitId: node.awaitId } : {}),
                 ...(node.catchName === undefined || node.catchChildren === undefined
                     ? {}
                     : {
@@ -826,10 +824,14 @@ function collectHtmlParts(node, escapeHelperName, asyncBoundaryHelperName, outOf
         if (isClientBoundaryPlaceholder(node, state.hydration)) {
             const helperName = currentClientBoundaryHelperName;
             if (helperName !== undefined) {
+                const boundaryProps = emitPropsObject(node.props, [], escapeHelperName);
+                const fallbackHtml = shouldRenderClientBoundaryFallback(node)
+                    ? `${node.name}(${boundaryProps})`
+                    : emitHtmlExpressionFromChildren(node.children, escapeHelperName);
                 return [
                     {
                         kind: "raw-dynamic",
-                        code: `${helperName}(${stringLiteral(node.name)}, ${emitPropsObject(node.props, [], escapeHelperName)}, ${emitHtmlExpressionFromChildren(node.children, escapeHelperName)})`,
+                        code: `${helperName}(${stringLiteral(node.name)}, ${boundaryProps}, ${fallbackHtml})`,
                     },
                 ];
             }
@@ -862,9 +864,7 @@ function collectHtmlParts(node, escapeHelperName, asyncBoundaryHelperName, outOf
         ];
     }
     const attributeScan = scanElementAttributes(node.tagName, node.attributes);
-    const childSelectedValueCode = node.tagName === "select"
-        ? attributeScan.formValueAttributeCode
-        : undefined;
+    const childSelectedValueCode = node.tagName === "select" ? attributeScan.formValueAttributeCode : undefined;
     const childState = childSelectedValueCode === undefined
         ? state
         : { ...state, selectedValueCode: childSelectedValueCode };
@@ -872,10 +872,10 @@ function collectHtmlParts(node, escapeHelperName, asyncBoundaryHelperName, outOf
     const dangerousInnerHtml = emitDangerouslySetInnerHtmlPart(node.attributes);
     const childrenParts = dangerousInnerHtml !== undefined
         ? [dangerousInnerHtml]
-        : (childState.selectedValueCode === undefined
+        : ((childState.selectedValueCode === undefined
             ? collectBatchedSimpleChildrenParts(node.children, state.escapeBatchHelperName)
             : undefined) ??
-            node.children.flatMap((child) => collectHtmlParts(child, escapeHelperName, asyncBoundaryHelperName, outOfOrderBoundaryHelperName, reactSuspenseBoundaryHelperName, reactSuspenseOutOfOrderBoundaryHelperName, childState));
+            node.children.flatMap((child) => collectHtmlParts(child, escapeHelperName, asyncBoundaryHelperName, outOfOrderBoundaryHelperName, reactSuspenseBoundaryHelperName, reactSuspenseOutOfOrderBoundaryHelperName, childState)));
     return [
         { kind: "static", value: `<${node.tagName}` },
         ...collectElementAttributeParts(node.tagName, node.attributes, escapeHelperName, state, attributeScan),
@@ -945,14 +945,19 @@ function collectHtmlAttributeParts(tagName, attr, escapeHelperName, escapeBatchH
         return [];
     }
     if (attr.name === "style") {
-        return [{ kind: "raw-dynamic", code: emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName) }];
+        return [
+            {
+                kind: "raw-dynamic",
+                code: emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName),
+            },
+        ];
     }
     const dynamicHtmlName = htmlAttributeNameForElement(tagName, attr.name);
     if (isDangerousHtmlAttribute(dynamicHtmlName)) {
         return [
             {
                 kind: "raw-dynamic",
-                code: `(() => { const _value = (${attr.code}); if (_value == null || _value === false) return ""; if (typeof _value === "object" && _value !== null && typeof _value.__html === "string") return ${stringLiteral(` ${dynamicHtmlName}="`)} + ${escapeHelperName}(_value.__html) + ${stringLiteral("\"")}; return ""; })()`,
+                code: `(() => { const _value = (${attr.code}); if (_value == null || _value === false) return ""; if (typeof _value === "object" && _value !== null && typeof _value.__html === "string") return ${stringLiteral(` ${dynamicHtmlName}="`)} + ${escapeHelperName}(_value.__html) + ${stringLiteral('"')}; return ""; })()`,
             },
         ];
     }
@@ -1023,8 +1028,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);
         }
     }
@@ -1042,14 +1046,14 @@ function readFormValueAttributeCode(attr) {
 }
 function emitDynamicAttributeExpression(name, code, escapeHelperName) {
     if (isUrlAttribute(name)) {
-        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) {
         // Inline 3 evaluations to avoid per-attribute IIFE closure allocation.
-        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);
@@ -1059,7 +1063,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);
@@ -1083,7 +1087,7 @@ function emitStaticStyleObjectAttributeExpression(code, escapeHelperName) {
         return stringLiteral(` style="${parts.join(";")}"`);
     }
     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, asyncBoundaryHelperName, outOfOrderBoundaryHelperName, reactSuspenseBoundaryHelperName, reactSuspenseOutOfOrderBoundaryHelperName, state, attributeScan = scanElementAttributes(node.tagName, node.attributes)) {
     const valueCode = attributeScan.formValueAttributeCode;
@@ -1108,7 +1112,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(""))
@@ -1247,7 +1253,9 @@ function collectBatchedSimpleChildrenParts(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);
@@ -1278,7 +1286,7 @@ function emitHtmlExpressionFromChildren(children, escapeHelperName) {
         nextFragmentId: 0,
     }));
     const expressions = parts.map((part) => isHtmlSyncPart(part)
-        ? tryEmitPartAsStringExpression(part, currentCompatRenderToStringHelperName) ?? '""'
+        ? (tryEmitPartAsStringExpression(part, currentCompatRenderToStringHelperName) ?? '""')
         : '""');
     return expressions.length === 0 ? '""' : expressions.join(" + ");
 }
@@ -1557,7 +1565,14 @@ function isClientBoundaryPlaceholder(node, serverHydration = true) {
     return node.clientReference !== undefined && (!serverHydration || !isCompatClientReference(node));
 }
 function isCompatClientReference(node) {
-    return node.clientReference !== undefined && /\.(?:compat)\.[cm]?[jt]sx?$/.test(node.clientReference.moduleId);
+    return (node.clientReference !== undefined &&
+        /\.(?:compat)\.[cm]?[jt]sx?$/.test(node.clientReference.moduleId));
+}
+function emitRenderableHtmlExpression(code) {
+    return `((_value) => _value == null || typeof _value === "boolean" ? "" : _value)(${code})`;
+}
+function shouldRenderClientBoundaryFallback(node) {
+    return node.clientReference?.ssrFallback === true;
 }
 function clientBoundaryPlaceholder(node) {
     return `<!--mreact-client-boundary:${escapeHtml(node.name)}-->`;