@reckona/mreact-compiler 0.0.161 → 0.0.163

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;AA2B1F,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,CAuIxB"}
+{"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;AA2B1F,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;AAeD,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,QAAQ,EACZ,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CA8IxB"}

package/dist/emit-server-stream.js

@@ -13,6 +13,7 @@ let currentOutOfOrderBoundaryHelperName = "_renderOutOfOrderBoundary";
 let currentReactSuspenseBoundaryHelperName = "_renderReactSuspenseBoundary";
 let currentReactSuspenseOutOfOrderBoundaryHelperName = "_renderReactSuspenseOutOfOrderBoundary";
 let currentCompatRenderToStringHelperName = "_renderCompatToString";
+let currentCompatChildHelperName;
 let currentPropChildrenCollectState;
 export function emitServerStream(ir, options = {}) {
     const serverBootstrap = options.serverBootstrap ?? "none";
@@ -24,6 +25,9 @@ export function emitServerStream(ir, options = {}) {
     const reactSuspenseBoundaryHelperName = allocateHelperName(ir, "_renderReactSuspenseBoundary");
     const reactSuspenseOutOfOrderBoundaryHelperName = allocateHelperName(ir, "_renderReactSuspenseOutOfOrderBoundary");
     const compatRenderToStringHelperName = allocateHelperName(ir, "_renderCompatToString");
+    const compatChildHelperName = usesCompatChildRender(ir)
+        ? allocateHelperName(ir, "_renderCompatChild")
+        : undefined;
     const streamNodeHelperName = allocateHelperName(ir, "_renderStreamNode");
     const clientBoundaryHelperName = usesClientBoundary(ir, options.serverHydration === true)
         ? allocateHelperName(ir, "_renderClientBoundary")
@@ -40,6 +44,7 @@ export function emitServerStream(ir, options = {}) {
     currentReactSuspenseBoundaryHelperName = reactSuspenseBoundaryHelperName;
     currentReactSuspenseOutOfOrderBoundaryHelperName = reactSuspenseOutOfOrderBoundaryHelperName;
     currentCompatRenderToStringHelperName = compatRenderToStringHelperName;
+    currentCompatChildHelperName = compatChildHelperName;
     const helper = emitEscapeHtmlHelper(escapeHelperName);
     const urlSafeHelper = [
         `function ${urlSafeHelperName}(name, value) {`,
@@ -92,6 +97,9 @@ export function emitServerStream(ir, options = {}) {
         renderReactSuspenseBoundary: reactSuspenseBoundaryHelperName,
         renderReactSuspenseOutOfOrderBoundary: reactSuspenseOutOfOrderBoundaryHelperName,
         renderToString: compatRenderToStringHelperName,
+        ...(compatChildHelperName === undefined
+            ? {}
+            : { renderChildToString: compatChildHelperName }),
     };
     const importLine = imports
         .map((runtimeImport) => `import { ${runtimeImport.specifiers
@@ -150,10 +158,16 @@ function collectImports(ir, serverBootstrap) {
             specifiers: serverSpecifiers,
         });
     }
-    if (hasCompatComponentReference(ir) || hasReactNodeRender(ir) || hasRawJsxDynamicRender(ir)) {
+    const compatSpecifiers = [
+        ...(hasCompatComponentReference(ir) || hasReactNodeRender(ir) || hasRawJsxDynamicRender(ir)
+            ? ["renderToString"]
+            : []),
+        ...(usesCompatChildRender(ir) ? ["renderChildToString"] : []),
+    ];
+    if (compatSpecifiers.length > 0) {
         imports.push({
             source: "@reckona/mreact-compat",
-            specifiers: ["renderToString"],
+            specifiers: compatSpecifiers,
         });
     }
     return imports;
@@ -695,6 +709,9 @@ function collectHtmlParts(node, escapeHelperName, asyncBoundaryHelperName, outOf
         if (node.renderMode === "stream-node") {
             return [{ kind: "stream-node", code: node.code, escapeHelperName }];
         }
+        if (node.renderMode === "compat-child" && currentCompatChildHelperName !== undefined) {
+            return [{ kind: "raw-dynamic", code: `${currentCompatChildHelperName}(${node.code})` }];
+        }
         return [{ kind: "dynamic", code: node.code, escapeHelperName }];
     }
     if (node.kind === "conditional") {
@@ -958,7 +975,9 @@ function collectHtmlAttributeParts(tagName, attr, escapeHelperName, escapeBatchH
         return [
             {
                 kind: "raw-dynamic",
-                code: emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName),
+                code: attr.serialization === "compat"
+                    ? emitCompatDynamicStyleAttributeExpression(attr.code, escapeHelperName)
+                    : emitDynamicStyleAttributeExpression(attr.code, escapeHelperName, escapeBatchHelperName),
             },
         ];
     }
@@ -974,7 +993,9 @@ function collectHtmlAttributeParts(tagName, attr, escapeHelperName, escapeBatchH
     return [
         {
             kind: "raw-dynamic",
-            code: emitDynamicAttributeExpression(dynamicHtmlName, attr.code, escapeHelperName),
+            code: attr.serialization === "compat" && !isUrlAttribute(dynamicHtmlName)
+                ? emitCompatDynamicAttributeExpression(dynamicHtmlName, attr.code, escapeHelperName)
+                : emitDynamicAttributeExpression(dynamicHtmlName, attr.code, escapeHelperName),
         },
     ];
 }
@@ -1070,6 +1091,22 @@ 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('"')}; })()`;
 }
+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('"')}; })()`;
+}
+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) {
@@ -1516,6 +1553,35 @@ function containsReactNodeRender(node) {
     }
     return false;
 }
+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 === "component") {
+        return (node.children.some(containsCompatChildRender) ||
+            node.props.some((prop) => prop.kind === "render-prop" && prop.children.some(containsCompatChildRender)));
+    }
+    if (node.kind === "conditional") {
+        return [...node.whenTrue, ...node.whenFalse].some(containsCompatChildRender);
+    }
+    if (node.kind === "list") {
+        return node.children.some(containsCompatChildRender);
+    }
+    if (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);
+    }
+    return false;
+}
 function containsRawJsxDynamicRender(node) {
     if (node.kind === "expr") {
         return node.renderMode !== "react-node" && looksLikeRawJsxExpression(node.code);