@reckona/mreact-compiler 0.0.96 → 0.0.98

package/src/emit-client.ts

@@ -238,7 +238,7 @@ function emitComponent(
 
   const fragmentName = allocator("_fragment");
   const rootName = allocator("_root");
-  const templateHtml = escapeTemplateHtml(renderStaticHtml(component.root));
+  const templateHtml = JSON.stringify(renderStaticHtml(component.root));
   const setup = emitSetup(component.root, rootName, {
     allocateName: allocator,
     textIndex: 0,
@@ -246,7 +246,7 @@ function emitComponent(
     clientBoundaryHelperName,
   });
   return [
-    `const ${templateName} = ${helperNames.createTemplate}("${templateHtml}");`,
+    `const ${templateName} = ${helperNames.createTemplate}(${templateHtml});`,
     `${component.exportDefault === true ? "export default " : component.exported === false ? "" : "export "}function ${component.name}(${parameters}) {`,
     ...body,
     `  const ${fragmentName} = ${templateName}();`,
@@ -413,7 +413,7 @@ function emitSetup(
 
     if (child.kind === "conditional") {
       lines.push(
-        `  ${state.helperNames.insertDynamic}(${path}, ${childPath}, () => (${child.conditionCode}) ? ${emitRenderValueExpression(child.whenTrue, state)} : ${emitRenderValueExpression(child.whenFalse, state)});`,
+        `  ${state.helperNames.insertDynamic}(${path}, ${childPath}, () => ${emitConditionalRenderValueExpression(child, state)});`,
       );
       childIndex += 1;
       continue;
@@ -652,7 +652,7 @@ function emitNodeRenderValueExpression(
   }
 
   if (node.kind === "conditional") {
-    return `((${node.conditionCode}) ? ${emitRenderValueExpression(node.whenTrue, state)} : ${emitRenderValueExpression(node.whenFalse, state)})`;
+    return emitConditionalRenderValueExpression(node, state);
   }
 
   if (node.kind === "list") {
@@ -667,13 +667,13 @@ function emitNodeRenderValueExpression(
   const templateName = state.allocateName("_dynamicTemplate");
   const fragmentName = state.allocateName("_dynamicFragment");
   const rootName = state.allocateName("_dynamicRoot");
-  const templateHtml = escapeTemplateHtml(renderStaticHtml(node));
+  const templateHtml = JSON.stringify(renderStaticHtml(node));
   const setup = emitSetup(node, rootName, state);
   const setupLines = setup === "" ? [] : setup.split("\n");
 
   return [
     "(() => {",
-    `  const ${templateName} = ${state.helperNames.createTemplate}("${templateHtml}");`,
+    `  const ${templateName} = ${state.helperNames.createTemplate}(${templateHtml});`,
     `  const ${fragmentName} = ${templateName}();`,
     `  const ${rootName} = ${fragmentName}.firstChild;`,
     ...setupLines,
@@ -682,6 +682,20 @@ function emitNodeRenderValueExpression(
   ].join("\n");
 }
 
+function emitConditionalRenderValueExpression(
+  node: Extract<JsxNodeIr, { kind: "conditional" }>,
+  state: EmitSetupState,
+): string {
+  const whenTrue = emitRenderValueExpression(node.whenTrue, state);
+  const whenFalse = emitRenderValueExpression(node.whenFalse, state);
+
+  if (node.conditionValueName === undefined) {
+    return `((${node.conditionCode}) ? ${whenTrue} : ${whenFalse})`;
+  }
+
+  return `(() => { const ${node.conditionValueName} = (${node.conditionCode}); return ${node.conditionValueName} ? ${whenTrue} : ${whenFalse}; })()`;
+}
+
 function emitListRenderer(
   node: Extract<JsxNodeIr, { kind: "list" }>,
   parameters: string,
@@ -847,7 +861,3 @@ function visit(node: JsxNodeIr, fn: (node: JsxNodeIr) => void): void {
     }
   }
 }
-
-function escapeTemplateHtml(value: string): string {
-  return value.replaceAll("\\", "\\\\").replaceAll("\"", "\\\"");
-}

package/src/emit-compat.ts

@@ -325,7 +325,12 @@ function emitJsxNode(
   }
 
   if (node.kind === "conditional") {
-    return `(${node.conditionCode}) ? ${emitCompatChildren(node.whenTrue, helperNames, dev)} : ${emitCompatChildren(node.whenFalse, helperNames, dev)}`;
+    const whenTrue = emitCompatChildren(node.whenTrue, helperNames, dev);
+    const whenFalse = emitCompatChildren(node.whenFalse, helperNames, dev);
+
+    return node.conditionValueName === undefined
+      ? `(${node.conditionCode}) ? ${whenTrue} : ${whenFalse}`
+      : `(() => { const ${node.conditionValueName} = (${node.conditionCode}); return ${node.conditionValueName} ? ${whenTrue} : ${whenFalse}; })()`;
   }
 
   if (node.kind === "list") {

package/src/emit-server-stream.ts

@@ -25,7 +25,10 @@ import {
   parseStyleLiteralValue,
   simpleSideEffectFreeExpression,
 } from "./emit-server-shared.js";
-import { oxcServerStringReactNodeRenderHelperPlaceholder } from "./oxc-runtime-emit.js";
+import {
+  emitOxcCompatObjectChildren,
+  oxcServerStringReactNodeRenderHelperPlaceholder,
+} from "./oxc-runtime-emit.js";
 
 export interface EmitServerStreamResult {
   code: string;
@@ -515,11 +518,25 @@ function emitAppendStatements(
       return [];
     }
 
+    const conditionCode = node.conditionValueName ?? node.conditionCode;
+    let statements: string[];
+
     if (whenFalse.length === 0) {
-      return [`  if (${node.conditionCode}) {`, ...whenTrue, `  }`];
+      statements = [`  if (${conditionCode}) {`, ...whenTrue, `  }`];
+    } else {
+      statements = [`  if (${conditionCode}) {`, ...whenTrue, `  } else {`, ...whenFalse, `  }`];
+    }
+
+    if (node.conditionValueName === undefined) {
+      return statements;
     }
 
-    return [`  if (${node.conditionCode}) {`, ...whenTrue, `  } else {`, ...whenFalse, `  }`];
+    return [
+      `  {`,
+      `    const ${node.conditionValueName} = (${node.conditionCode});`,
+      ...statements.map((statement) => `  ${statement}`),
+      `  }`,
+    ];
   }
 
   const collectState: CollectHtmlState = {
@@ -832,13 +849,16 @@ function tryEmitPartAsStringExpression(
     return emitListPartAsStringExpression(part, compatRenderToStringHelperName);
   }
   if (part.kind === "component" && part.runtime === "compat") {
-    const rendered = `${compatRenderToStringHelperName}(${part.name}, ${emitPropsObject(part.props, part.children, part.escapeHelperName)})`;
+    const rendered = `${compatRenderToStringHelperName}(${part.name}, ${emitCompatRuntimePropsObject(part.props, part.children)})`;
     if (part.hydrationId === undefined) {
       return rendered;
     }
 
     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)})`;
+  }
   // Non-compat component parts require `await sink-write`; lists with
   // sink-needing children also can't collapse. Signal fallback.
   return undefined;
@@ -934,7 +954,7 @@ function emitCompatComponentAppendStatements(
   compatRenderToStringHelperName: string,
   indent: string,
 ): string {
-  const rendered = `${compatRenderToStringHelperName}(${part.name}, ${emitPropsObject(part.props, part.children, part.escapeHelperName)})`;
+  const rendered = `${compatRenderToStringHelperName}(${part.name}, ${emitCompatRuntimePropsObject(part.props, part.children)})`;
   const statements =
     part.hydrationId === undefined
       ? [`${sinkName}.append(${rendered});`]
@@ -1096,10 +1116,16 @@ function collectHtmlParts(
   }
 
   if (node.kind === "conditional") {
+    const whenTrue = emitHtmlExpressionFromChildren(node.whenTrue, escapeHelperName);
+    const whenFalse = emitHtmlExpressionFromChildren(node.whenFalse, escapeHelperName);
+
     return [
       {
         kind: "raw-dynamic",
-        code: `((${node.conditionCode}) ? ${emitHtmlExpressionFromChildren(node.whenTrue, escapeHelperName)} : ${emitHtmlExpressionFromChildren(node.whenFalse, escapeHelperName)})`,
+        code:
+          node.conditionValueName === undefined
+            ? `((${node.conditionCode}) ? ${whenTrue} : ${whenFalse})`
+            : `(() => { const ${node.conditionValueName} = (${node.conditionCode}); return ${node.conditionValueName} ? ${whenTrue} : ${whenFalse}; })()`,
       },
     ];
   }
@@ -1589,6 +1615,15 @@ function collectElementAttributeParts(
 ): HtmlSyncPart[] {
   const escapeBatchHelperName = state.escapeBatchHelperName;
 
+  if (state.dynamicAttributes === "emit" && attrs.some((attr) => attr.kind === "spread-attr")) {
+    return [
+      {
+        kind: "raw-dynamic",
+        code: emitMergedSpreadAttributeExpression(tagName, attrs, attributeScan),
+      },
+    ];
+  }
+
   return attrs.flatMap((attr) =>
     attr.kind !== "spread-attr" &&
       ((tagName === "input" &&
@@ -1607,6 +1642,38 @@ function collectElementAttributeParts(
   );
 }
 
+function emitMergedSpreadAttributeExpression(
+  tagName: string,
+  attrs: readonly AttributeIr[],
+  attributeScan: ElementAttributeScan,
+): string {
+  const statements = attrs.flatMap((attr): string[] => {
+    if (
+      attr.kind !== "spread-attr" &&
+      ((tagName === "input" &&
+        ((attr.name === "defaultValue" && attributeScan.hasExplicitInputValue) ||
+          (attr.name === "defaultChecked" && attributeScan.hasExplicitInputChecked))) ||
+        ((tagName === "textarea" || tagName === "select") &&
+          (attr.name === "value" || attr.name === "defaultValue")))
+    ) {
+      return [];
+    }
+
+    if (attr.kind === "spread-attr") {
+      return [`Object.assign(_props, (${attr.code}) ?? {});`];
+    }
+
+    if (attr.kind === "event" || attr.name === "key" || attr.name === "dangerouslySetInnerHTML") {
+      return [];
+    }
+
+    const valueCode = attr.kind === "static-attr" ? stringLiteral(attr.value) : `(${attr.code})`;
+    return [`_props[${stringLiteral(attr.name)}] = ${valueCode};`];
+  });
+
+  return `(() => { const _props = {}; ${statements.join(" ")} return ${currentSpreadAttributesHelperName}(${stringLiteral(tagName)}, _props); })()`;
+}
+
 interface ElementAttributeScan {
   hasExplicitInputValue: boolean;
   hasExplicitInputChecked: boolean;
@@ -2420,6 +2487,29 @@ function emitPropsObject(
   return `{ ${entries.join(", ")} }`;
 }
 
+function emitCompatRuntimePropsObject(
+  props: ComponentPropIr[],
+  children: JsxNodeIr[] = [],
+): string {
+  const entries = props.map((prop) => {
+    if (prop.kind === "spread-prop") {
+      return `...(${prop.code})`;
+    }
+
+    if (prop.kind === "render-prop") {
+      return `${emitPropName(prop.name)}: ${emitOxcCompatObjectChildren(prop.children)}`;
+    }
+
+    return `${emitPropName(prop.name)}: (${prop.code})`;
+  });
+
+  if (children.length > 0) {
+    entries.push(`children: ${emitOxcCompatObjectChildren(children)}`);
+  }
+
+  return `{ ${entries.join(", ")} }`;
+}
+
 function emitPropName(name: string): string {
   return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name);
 }

package/src/emit-server.ts

@@ -18,7 +18,10 @@ import {
   parseStyleLiteralValue,
   simpleSideEffectFreeExpression,
 } from "./emit-server-shared.js";
-import { oxcServerStringReactNodeRenderHelperPlaceholder } from "./oxc-runtime-emit.js";
+import {
+  emitOxcCompatObjectChildren,
+  oxcServerStringReactNodeRenderHelperPlaceholder,
+} from "./oxc-runtime-emit.js";
 
 export interface EmitResult {
   code: string;
@@ -329,6 +332,7 @@ function collectHtmlStatements(
   }
 
   if (node.kind === "conditional") {
+    const conditionCode = node.conditionValueName ?? node.conditionCode;
     const whenTrueStatements = node.whenTrue.flatMap((child) =>
       collectHtmlStatements(
         child,
@@ -360,27 +364,37 @@ function collectHtmlStatements(
       return [];
     }
 
+    let statements: string[];
     if (whenFalseStatements.length === 0) {
-      return [
-        `if (${node.conditionCode}) {`,
+      statements = [
+        `if (${conditionCode}) {`,
         ...whenTrueStatements.map((statement) => `  ${statement}`),
         `}`,
       ];
-    }
-
-    if (whenTrueStatements.length === 0) {
-      return [
-        `if (!(${node.conditionCode})) {`,
+    } else if (whenTrueStatements.length === 0) {
+      statements = [
+        `if (!(${conditionCode})) {`,
+        ...whenFalseStatements.map((statement) => `  ${statement}`),
+        `}`,
+      ];
+    } else {
+      statements = [
+        `if (${conditionCode}) {`,
+        ...whenTrueStatements.map((statement) => `  ${statement}`),
+        `} else {`,
         ...whenFalseStatements.map((statement) => `  ${statement}`),
         `}`,
       ];
     }
 
+    if (node.conditionValueName === undefined) {
+      return statements;
+    }
+
     return [
-      `if (${node.conditionCode}) {`,
-      ...whenTrueStatements.map((statement) => `  ${statement}`),
-      `} else {`,
-      ...whenFalseStatements.map((statement) => `  ${statement}`),
+      `{`,
+      `  const ${node.conditionValueName} = (${node.conditionCode});`,
+      ...statements.map((statement) => `  ${statement}`),
       `}`,
     ];
   }
@@ -527,16 +541,9 @@ function collectHtmlStatements(
 
     if (node.runtime === "compat" && reactNodeRenderHelperName !== undefined) {
       return [
-        `${outVar} += ${reactNodeRenderHelperName}(${node.name}, ${emitPropsObject(
+        `${outVar} += ${reactNodeRenderHelperName}(${node.name}, ${emitCompatRuntimePropsObject(
           node.props,
           node.children,
-          escapeHelperName,
-          escapeBatchHelperName,
-          asyncComponentNames,
-          dynamicAttributes,
-          contextProviderHelperName,
-          contextConsumerHelperName,
-          reactNodeRenderHelperName,
         )});`,
       ];
     }
@@ -686,8 +693,13 @@ function collectHtmlParts(
   }
 
   if (node.kind === "conditional") {
+    const whenTrue = emitHtmlExpressionFromChildren(node.whenTrue, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
+    const whenFalse = emitHtmlExpressionFromChildren(node.whenFalse, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName);
+
     return [
-      `((${node.conditionCode}) ? ${emitHtmlExpressionFromChildren(node.whenTrue, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)} : ${emitHtmlExpressionFromChildren(node.whenFalse, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)})`,
+      node.conditionValueName === undefined
+        ? `((${node.conditionCode}) ? ${whenTrue} : ${whenFalse})`
+        : `(() => { const ${node.conditionValueName} = (${node.conditionCode}); return ${node.conditionValueName} ? ${whenTrue} : ${whenFalse}; })()`,
     ];
   }
 
@@ -808,16 +820,9 @@ function collectHtmlParts(
 
     if (node.runtime === "compat" && reactNodeRenderHelperName !== undefined) {
       return [
-        `${reactNodeRenderHelperName}(${node.name}, ${emitPropsObject(
+        `${reactNodeRenderHelperName}(${node.name}, ${emitCompatRuntimePropsObject(
           node.props,
           node.children,
-          escapeHelperName,
-          escapeBatchHelperName,
-          asyncComponentNames,
-          dynamicAttributes,
-          contextProviderHelperName,
-          contextConsumerHelperName,
-          reactNodeRenderHelperName,
         )})`,
       ];
     }
@@ -998,6 +1003,10 @@ function collectElementAttributeParts(
   dynamicAttributes: "drop" | "emit",
   attributeScan = scanElementAttributes(tagName, attrs),
 ): string[] {
+  if (dynamicAttributes === "emit" && attrs.some((attr) => attr.kind === "spread-attr")) {
+    return [emitMergedSpreadAttributeExpression(tagName, attrs, attributeScan)];
+  }
+
   return attrs.flatMap((attr) =>
     attr.kind !== "spread-attr" &&
       ((tagName === "input" &&
@@ -1016,6 +1025,38 @@ function collectElementAttributeParts(
   );
 }
 
+function emitMergedSpreadAttributeExpression(
+  tagName: string,
+  attrs: readonly AttributeIr[],
+  attributeScan: ElementAttributeScan,
+): string {
+  const statements = attrs.flatMap((attr): string[] => {
+    if (
+      attr.kind !== "spread-attr" &&
+      ((tagName === "input" &&
+        ((attr.name === "defaultValue" && attributeScan.hasExplicitInputValue) ||
+          (attr.name === "defaultChecked" && attributeScan.hasExplicitInputChecked))) ||
+        ((tagName === "textarea" || tagName === "select") &&
+          (attr.name === "value" || attr.name === "defaultValue")))
+    ) {
+      return [];
+    }
+
+    if (attr.kind === "spread-attr") {
+      return [`Object.assign(_props, (${attr.code}) ?? {});`];
+    }
+
+    if (attr.kind === "event" || attr.name === "key" || attr.name === "dangerouslySetInnerHTML") {
+      return [];
+    }
+
+    const valueCode = attr.kind === "static-attr" ? stringLiteral(attr.value) : `(${attr.code})`;
+    return [`_props[${stringLiteral(attr.name)}] = ${valueCode};`];
+  });
+
+  return `(() => { const _props = {}; ${statements.join(" ")} return ${currentSpreadAttributesHelperName}(${stringLiteral(tagName)}, _props); })()`;
+}
+
 interface ElementAttributeScan {
   hasExplicitInputValue: boolean;
   hasExplicitInputChecked: boolean;
@@ -1406,6 +1447,29 @@ function emitPropsObject(
   return `{ ${entries.join(", ")} }`;
 }
 
+function emitCompatRuntimePropsObject(
+  props: ComponentPropIr[],
+  children: JsxNodeIr[] = [],
+): string {
+  const entries = props.map((prop) => {
+    if (prop.kind === "spread-prop") {
+      return `...(${prop.code})`;
+    }
+
+    if (prop.kind === "render-prop") {
+      return `${emitPropName(prop.name)}: ${emitOxcCompatObjectChildren(prop.children)}`;
+    }
+
+    return `${emitPropName(prop.name)}: (${prop.code})`;
+  });
+
+  if (children.length > 0) {
+    entries.push(`children: ${emitOxcCompatObjectChildren(children)}`);
+  }
+
+  return `{ ${entries.join(", ")} }`;
+}
+
 function emitComponentCallExpression(
   name: string,
   propsCode: string,

package/src/internal.ts

@@ -1049,16 +1049,21 @@ function parseModule(code: string, filename: string | undefined) {
 function parseModuleContext(context: CompilerModuleContext): CompilerModuleContext {
   if (context.parseErrors.length > 0) {
     throw new Error(
-      `${context.filename}: ${context.parseErrors
-        .map((error) => readObject(error).message)
-        .filter((message): message is string => typeof message === "string")
-        .join("\n")}`,
+      `${context.filename}: ${context.parseErrors.map(parseErrorMessage).join("\n")}`,
     );
   }
 
   return context;
 }
 
+function parseErrorMessage(error: unknown): string {
+  const object = readObject(error);
+  const message = typeof object.message === "string" ? object.message : "Parse error";
+  const codeframe = typeof object.codeframe === "string" ? object.codeframe.trimEnd() : undefined;
+
+  return codeframe === undefined ? message : `${message}\n${codeframe}`;
+}
+
 function programBody(program: unknown): Record<string, unknown>[] {
   const body = readObject(program).body;
   return Array.isArray(body) ? body.map(readObject) : [];

package/src/ir.ts

@@ -83,6 +83,7 @@ export interface JsxFragmentIr {
 export interface ConditionalIr {
   kind: "conditional";
   conditionCode: string;
+  conditionValueName?: string;
   whenTrue: JsxNodeIr[];
   whenFalse: JsxNodeIr[];
 }

package/src/oxc-child-analysis.ts

@@ -2,6 +2,7 @@ import {
   invalidJsxExpressionDiagnostic,
   unserializableAwaitValueDiagnostic,
   unsupportedComponentReferenceDiagnostic,
+  unsupportedJsxSpreadChildDiagnostic,
 } from "./diagnostics.js";
 import type { AsyncBoundaryIr, JsxElementIr, JsxNodeIr } from "./ir.js";
 import type { OxcBodyStatementJsxMode } from "./oxc-analysis-types.js";
@@ -128,14 +129,21 @@ export function analyzeOxcJsxNode(
   if (
     /^[A-Z][\w$]*(?:\.[A-Za-z_$][\w$]*)+$/.test(tagName) ||
     context.componentNames.has(tagName) ||
-    isOxcServerRuntimeComponentBinding(tagName, context)
+    isOxcRuntimeComponentBinding(tagName, context)
   ) {
     const keyCode = findOxcJsxAttributeCode(code, attributes, "key");
     const allowRef = bodyStatementJsx === "compat-object";
     const analyzeJsxNode = (
       child: Record<string, unknown>,
       childBodyStatementJsx: OxcBodyStatementJsxMode = bodyStatementJsx,
-    ) => analyzeOxcJsxNode(code, child, context, childBodyStatementJsx);
+      shadowNames: readonly string[] = [],
+    ) =>
+      analyzeOxcJsxNode(
+        code,
+        child,
+        shadowOxcReactiveAliases(context, shadowNames),
+        childBodyStatementJsx,
+      );
     const consumerRenderProp = tagName.endsWith(".Consumer")
       ? readOxcConsumerRenderProp(
           code,
@@ -201,11 +209,11 @@ export function analyzeOxcJsxNode(
   } satisfies JsxElementIr;
 }
 
-function isOxcServerRuntimeComponentBinding(
+function isOxcRuntimeComponentBinding(
   tagName: string,
   context: OxcChildAnalysisContext,
 ): boolean {
-  if (context.target !== "server" || !/^[A-Z]/.test(tagName)) {
+  if (!/^[A-Z]/.test(tagName)) {
     return false;
   }
 
@@ -344,6 +352,11 @@ export function analyzeOxcChildren(
       );
     }
 
+    if (object.type === "JSXSpreadChild") {
+      context.diagnostics.push(unsupportedJsxSpreadChildDiagnostic(getOxcLocation(code, object)));
+      return [];
+    }
+
     return [];
   });
 }
@@ -401,17 +414,22 @@ export function analyzeOxcExpressionChild(
       bodyStatementJsx,
     );
 
+    const leftExpression = readObject(unwrappedExpression.left);
+    const conditionValueName = logicalConditionValueName(leftExpression);
+
     if (unwrappedExpression.operator === "&&") {
       return [
         {
           kind: "conditional",
-          conditionCode: readOxcReactiveExpressionCode(
-            code,
-            readObject(unwrappedExpression.left),
-            context,
-          ),
+          conditionCode: readOxcReactiveExpressionCode(code, leftExpression, context),
+          conditionValueName,
           whenTrue: rightBranch,
-          whenFalse: [],
+          whenFalse: [
+            {
+              kind: "expr",
+              code: renderableFalsyConditionValueCode(conditionValueName),
+            },
+          ],
         },
       ];
     }
@@ -420,19 +438,12 @@ export function analyzeOxcExpressionChild(
       return [
         {
           kind: "conditional",
-          conditionCode: readOxcReactiveExpressionCode(
-            code,
-            readObject(unwrappedExpression.left),
-            context,
-          ),
+          conditionCode: readOxcReactiveExpressionCode(code, leftExpression, context),
+          conditionValueName,
           whenTrue: [
             {
               kind: "expr",
-              code: readOxcReactiveExpressionCode(
-                code,
-                readObject(unwrappedExpression.left),
-                context,
-              ),
+              code: conditionValueName,
             },
           ],
           whenFalse: rightBranch,
@@ -613,7 +624,11 @@ function analyzeOxcListExpression(
   const itemName = String(readObject(readArray(renderer.params)[0]).name ?? "_item");
   const indexName = readObject(readArray(renderer.params)[1]).name;
   const arrayName = readObject(readArray(renderer.params)[2]).name;
-  const rendererBody = analyzeOxcListRenderer(code, renderer, context, bodyStatementJsx);
+  const rendererContext = shadowOxcReactiveAliases(
+    context,
+    [itemName, indexName, arrayName].filter((name): name is string => typeof name === "string"),
+  );
+  const rendererBody = analyzeOxcListRenderer(code, renderer, rendererContext, bodyStatementJsx);
 
   if (rendererBody === undefined) {
     return undefined;
@@ -802,6 +817,36 @@ function resolveOxcBodyStatementJsx(context: OxcChildAnalysisContext): OxcBodySt
   return context.bodyStatementJsx ?? (context.target === "server" ? "server-string" : "dom-node");
 }
 
+function logicalConditionValueName(expression: Record<string, unknown>): string {
+  return `__mreactLogical_${typeof expression.start === "number" ? expression.start : "value"}`;
+}
+
+function renderableFalsyConditionValueCode(name: string): string {
+  return `((typeof ${name} === "number" || typeof ${name} === "bigint") ? ${name} : null)`;
+}
+
+function shadowOxcReactiveAliases(
+  context: OxcChildAnalysisContext,
+  names: readonly string[],
+): OxcChildAnalysisContext {
+  if (context.reactiveAliasBindings === undefined || names.length === 0) {
+    return context;
+  }
+
+  let aliases: Map<string, string> | undefined;
+
+  for (const name of names) {
+    if (!context.reactiveAliasBindings.has(name)) {
+      continue;
+    }
+
+    aliases ??= new Map(context.reactiveAliasBindings);
+    aliases.delete(name);
+  }
+
+  return aliases === undefined ? context : { ...context, reactiveAliasBindings: aliases };
+}
+
 function isOxcJsxCommentExpression(code: string, expression: Record<string, unknown>): boolean {
   if (typeof expression.start !== "number" || typeof expression.end !== "number") {
     return false;