@reckona/mreact-compiler 0.0.65 → 0.0.67

package/src/oxc-child-analysis.ts

@@ -0,0 +1,791 @@
+import {
+  invalidJsxExpressionDiagnostic,
+  unserializableAwaitValueDiagnostic,
+  unsupportedComponentReferenceDiagnostic,
+} from "./diagnostics.js";
+import type { AsyncBoundaryIr, JsxElementIr, JsxNodeIr } from "./ir.js";
+import type { OxcBodyStatementJsxMode } from "./oxc-analysis-types.js";
+import {
+  detectUnserializableAwaitValueReason,
+  readOxcExpressionAttribute,
+  readOxcExpressionAttributeNode,
+} from "./oxc-await-analysis.js";
+import {
+  analyzeOxcArrowJsxRenderer,
+  analyzeOxcComponentProp,
+  analyzeOxcSingleArrowJsxChild,
+  readOxcConsumerRenderProp,
+} from "./oxc-component-props.js";
+import {
+  formatOxcBodyStatement,
+  lowerOxcBodyStatementJsx,
+  type OxcBodyLowerers,
+} from "./oxc-body-lowering.js";
+import { normalizeOxcExpressionCode, stripOxcGeneratedImports } from "./oxc-code-utils.js";
+import {
+  findOxcKeyCodeInChildren,
+  isOxcJsxBranch,
+  readOxcReturnExpressionFromStatement,
+} from "./oxc-expression-utils.js";
+import {
+  analyzeOxcAttribute,
+  findOxcJsxAttributeCode,
+  readOxcJsxTagName,
+} from "./oxc-jsx-attributes.js";
+import { normalizeOxcJsxText } from "./oxc-jsx-text.js";
+import {
+  getOxcLocation,
+  readArray,
+  readObject,
+  readSource,
+  unwrapOxcParentheses,
+} from "./oxc-node-utils.js";
+import {
+  collectOxcBodyJsxBindingNames,
+  containsOxcJsxSyntax,
+  isOxcRenderValueExpression,
+  markOxcRenderValueExpressions,
+  rewriteOxcReactiveAliasExpressionCode,
+} from "./oxc-render-values.js";
+import { transformJsxWithOxc } from "./oxc-transform.js";
+import type { CompileTarget, Diagnostic, ServerOutputMode } from "./types.js";
+
+export interface OxcChildAnalysisContext {
+  componentNames: Set<string>;
+  componentCallNames?: Set<string>;
+  target: CompileTarget;
+  serverOutput?: ServerOutputMode;
+  diagnostics: Diagnostic[];
+  bodyStatementJsx?: OxcBodyStatementJsxMode;
+  componentBodyBindings?: ReadonlyMap<string, Record<string, unknown>>;
+  reactiveAliasBindings?: ReadonlyMap<string, string>;
+  bodyLowerers: OxcBodyLowerers;
+  lowerNestedJsxExpression: (
+    code: string,
+    expression: Record<string, unknown>,
+    componentNames: Set<string>,
+    target: CompileTarget,
+    diagnostics: Diagnostic[],
+    bodyStatementJsx: OxcBodyStatementJsxMode,
+  ) => string | undefined;
+}
+
+export function analyzeOxcJsxNode(
+  code: string,
+  node: Record<string, unknown>,
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx = resolveOxcBodyStatementJsx(context),
+): JsxNodeIr {
+  if (node.type === "JSXFragment") {
+    return {
+      kind: "fragment",
+      children: analyzeOxcChildren(
+        code,
+        readArray(node.children),
+        context,
+        bodyStatementJsx,
+      ),
+    };
+  }
+
+  if (node.type !== "JSXElement") {
+    return { kind: "expr", code: readSource(code, node) };
+  }
+
+  const openingElement = readObject(node.openingElement);
+  const tagName = readOxcJsxTagName(readObject(openingElement.name));
+  const attributes = readArray(openingElement.attributes);
+
+  if (tagName === "Await") {
+    return analyzeOxcAsyncBoundary(code, node, attributes, context, bodyStatementJsx);
+  }
+
+  if (tagName === "Slot") {
+    const keyCode = findOxcJsxAttributeCode(code, attributes, "key");
+    const allowRef = bodyStatementJsx === "compat-object";
+
+    return {
+      kind: "element",
+      tagName: "slot",
+      ...(keyCode === undefined ? {} : { keyCode }),
+      attributes: attributes
+        .flatMap((attr) =>
+          analyzeOxcAttribute(code, attr, context.target, context.diagnostics, {
+            allowRef,
+            resolveExpressionCode: (expression) =>
+              readOxcReactiveExpressionCode(code, expression, context),
+          }),
+        )
+        .filter((attribute) => attribute.kind === "spread-attr" || attribute.name !== "key"),
+      children: analyzeOxcChildren(
+        code,
+        readArray(node.children),
+        context,
+        bodyStatementJsx,
+      ),
+    } satisfies JsxElementIr;
+  }
+
+  if (
+    /^[A-Z][\w$]*(?:\.[A-Za-z_$][\w$]*)+$/.test(tagName) ||
+    context.componentNames.has(tagName) ||
+    isOxcServerRuntimeComponentBinding(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);
+    const consumerRenderProp = tagName.endsWith(".Consumer")
+      ? readOxcConsumerRenderProp(
+          code,
+          readArray(node.children),
+          analyzeJsxNode,
+          bodyStatementJsx,
+        )
+      : undefined;
+    const componentLoc = getOxcLocation(code, openingElement.name);
+
+    return {
+      kind: "component",
+      name: tagName,
+      ...(componentLoc === undefined ? {} : { loc: componentLoc }),
+      ...(keyCode === undefined ? {} : { keyCode }),
+      props: attributes
+        .flatMap((attr) =>
+          analyzeOxcComponentProp(code, attr, analyzeJsxNode, context.diagnostics, {
+            allowRef,
+            resolveExpressionCode: (expression) =>
+              readOxcReactiveExpressionCode(code, expression, context),
+          }),
+        )
+        .filter((prop) => prop.kind === "spread-prop" || prop.name !== "key")
+        .concat(consumerRenderProp === undefined ? [] : [consumerRenderProp]),
+      children:
+        consumerRenderProp === undefined
+          ? analyzeOxcChildren(code, readArray(node.children), context, bodyStatementJsx)
+          : [],
+    };
+  }
+
+  if (/^[A-Z]/.test(tagName)) {
+    const componentLoc = getOxcLocation(code, openingElement.name);
+    context.diagnostics.push(unsupportedComponentReferenceDiagnostic(tagName, componentLoc));
+
+    return {
+      kind: "component",
+      name: tagName,
+      ...(componentLoc === undefined ? {} : { loc: componentLoc }),
+      props: [],
+      children: [],
+    };
+  }
+
+  const keyCode = findOxcJsxAttributeCode(code, attributes, "key");
+  const allowRef = bodyStatementJsx === "compat-object";
+
+  return {
+    kind: "element",
+    tagName,
+    ...(keyCode === undefined ? {} : { keyCode }),
+    attributes: attributes
+      .flatMap((attr) =>
+        analyzeOxcAttribute(code, attr, context.target, context.diagnostics, {
+          allowRef,
+          resolveExpressionCode: (expression) =>
+            readOxcReactiveExpressionCode(code, expression, context),
+        }),
+      )
+      .filter((attribute) => attribute.kind === "spread-attr" || attribute.name !== "key"),
+    children: analyzeOxcChildren(code, readArray(node.children), context, bodyStatementJsx),
+  } satisfies JsxElementIr;
+}
+
+function isOxcServerRuntimeComponentBinding(
+  tagName: string,
+  context: OxcChildAnalysisContext,
+): boolean {
+  if (context.target !== "server" || !/^[A-Z]/.test(tagName)) {
+    return false;
+  }
+
+  const binding = context.componentBodyBindings?.get(tagName);
+  if (binding === undefined) {
+    return false;
+  }
+
+  return isOxcRuntimeComponentExpression(binding);
+}
+
+function isOxcRuntimeComponentExpression(expression: Record<string, unknown>): boolean {
+  if (
+    expression.type === "Identifier" ||
+    expression.type === "MemberExpression" ||
+    expression.type === "CallExpression" ||
+    expression.type === "FunctionExpression" ||
+    expression.type === "ArrowFunctionExpression"
+  ) {
+    return true;
+  }
+
+  if (expression.type === "ChainExpression") {
+    return isOxcRuntimeComponentExpression(readObject(expression.expression));
+  }
+
+  if (expression.type === "ConditionalExpression") {
+    return (
+      isOxcRuntimeComponentExpression(readObject(expression.consequent)) &&
+      isOxcRuntimeComponentExpression(readObject(expression.alternate))
+    );
+  }
+
+  if (expression.type === "LogicalExpression") {
+    return isOxcRuntimeComponentExpression(readObject(expression.right));
+  }
+
+  return false;
+}
+
+function analyzeOxcAsyncBoundary(
+  code: string,
+  node: Record<string, unknown>,
+  attributes: readonly unknown[],
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): AsyncBoundaryIr {
+  const valueExpression = readOxcExpressionAttributeNode(attributes, "value");
+
+  if (valueExpression !== undefined) {
+    const unserializableReason = detectUnserializableAwaitValueReason(
+      valueExpression,
+      context.componentBodyBindings,
+    );
+
+    if (unserializableReason !== undefined) {
+      context.diagnostics.push(unserializableAwaitValueDiagnostic(unserializableReason));
+    }
+  }
+
+  const valueCode = readOxcExpressionAttribute(code, attributes, "value") ?? "undefined";
+  const placeholderExpression = readOxcExpressionAttributeNode(attributes, "placeholder");
+  const placeholderTagCode = findOxcJsxAttributeCode(code, attributes, "placeholderAs");
+  const catchExpression = readOxcExpressionAttributeNode(attributes, "catch");
+  const renderer = analyzeOxcSingleArrowJsxChild(
+    code,
+    readArray(node.children),
+    (child, childBodyStatementJsx = bodyStatementJsx) =>
+      analyzeOxcJsxNode(code, child, context, childBodyStatementJsx),
+    bodyStatementJsx,
+  );
+  const catchRenderer =
+    catchExpression !== undefined && readObject(catchExpression).type === "ArrowFunctionExpression"
+      ? analyzeOxcArrowJsxRenderer(
+          code,
+          readObject(catchExpression),
+          (child, childBodyStatementJsx = bodyStatementJsx) =>
+            analyzeOxcJsxNode(code, child, context, childBodyStatementJsx),
+          bodyStatementJsx,
+        )
+      : undefined;
+  const placeholderChildren =
+    placeholderExpression === undefined
+      ? undefined
+      : analyzeOxcExpressionChild(
+          code,
+          readObject(placeholderExpression),
+          context,
+          bodyStatementJsx,
+        );
+  const openingElement = readObject(node.openingElement);
+  const awaitLoc = getOxcLocation(code, readObject(openingElement.name));
+
+  return {
+    kind: "async-boundary",
+    ...(awaitLoc === undefined ? {} : { loc: awaitLoc }),
+    valueCode,
+    valueName: renderer.valueName,
+    children: renderer.children,
+    ...(placeholderChildren === undefined ? {} : { placeholderChildren }),
+    ...(placeholderTagCode === undefined ? {} : { placeholderTagCode }),
+    ...(catchRenderer === undefined
+      ? {}
+      : {
+          catchName: catchRenderer.valueName,
+          catchChildren: catchRenderer.children,
+        }),
+  };
+}
+
+export function analyzeOxcChildren(
+  code: string,
+  children: readonly unknown[],
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx = resolveOxcBodyStatementJsx(context),
+): JsxNodeIr[] {
+  return children.flatMap((child, index): JsxNodeIr[] => {
+    const object = readObject(child);
+
+    if (object.type === "JSXText") {
+      const value = typeof object.value === "string" ? object.value : "";
+      const normalizedValue = normalizeOxcJsxText(value, children, index);
+      return normalizedValue === "" ? [] : [{ kind: "text", value: normalizedValue }];
+    }
+
+    if (object.type === "JSXElement" || object.type === "JSXFragment") {
+      return [analyzeOxcJsxNode(code, object, context, bodyStatementJsx)];
+    }
+
+    if (object.type === "JSXExpressionContainer") {
+      return analyzeOxcExpressionChild(
+        code,
+        readObject(object.expression),
+        context,
+        bodyStatementJsx,
+      );
+    }
+
+    return [];
+  });
+}
+
+export function analyzeOxcExpressionChild(
+  code: string,
+  expression: Record<string, unknown>,
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx = resolveOxcBodyStatementJsx(context),
+): JsxNodeIr[] {
+  const unwrappedExpression = unwrapOxcParentheses(expression);
+
+  if (unwrappedExpression.type === "JSXEmptyExpression") {
+    context.diagnostics.push(invalidJsxExpressionDiagnostic(getOxcLocation(code, expression), "text"));
+    return [];
+  }
+
+  if (unwrappedExpression.type === "ConditionalExpression") {
+    return [
+      {
+        kind: "conditional",
+        conditionCode: readOxcReactiveExpressionCode(
+          code,
+          readObject(unwrappedExpression.test),
+          context,
+        ),
+        whenTrue: analyzeOxcDynamicBranch(
+          code,
+          readObject(unwrappedExpression.consequent),
+          context,
+          bodyStatementJsx,
+        ),
+        whenFalse: analyzeOxcDynamicBranch(
+          code,
+          readObject(unwrappedExpression.alternate),
+          context,
+          bodyStatementJsx,
+        ),
+      },
+    ];
+  }
+
+  if (
+    unwrappedExpression.type === "LogicalExpression" &&
+    isOxcJsxBranch(readObject(unwrappedExpression.right))
+  ) {
+    const rightBranch = analyzeOxcDynamicBranch(
+      code,
+      readObject(unwrappedExpression.right),
+      context,
+      bodyStatementJsx,
+    );
+
+    if (unwrappedExpression.operator === "&&") {
+      return [
+        {
+          kind: "conditional",
+          conditionCode: readOxcReactiveExpressionCode(
+            code,
+            readObject(unwrappedExpression.left),
+            context,
+          ),
+          whenTrue: rightBranch,
+          whenFalse: [],
+        },
+      ];
+    }
+
+    if (unwrappedExpression.operator === "||") {
+      return [
+        {
+          kind: "conditional",
+          conditionCode: readOxcReactiveExpressionCode(
+            code,
+            readObject(unwrappedExpression.left),
+            context,
+          ),
+          whenTrue: [
+            {
+              kind: "expr",
+              code: readOxcReactiveExpressionCode(
+                code,
+                readObject(unwrappedExpression.left),
+                context,
+              ),
+            },
+          ],
+          whenFalse: rightBranch,
+        },
+      ];
+    }
+  }
+
+  const list = analyzeOxcListExpression(code, unwrappedExpression, context, bodyStatementJsx);
+
+  if (list !== undefined) {
+    return [list];
+  }
+
+  if (unwrappedExpression.type === "JSXElement" || unwrappedExpression.type === "JSXFragment") {
+    return [analyzeOxcJsxNode(code, unwrappedExpression, context, bodyStatementJsx)];
+  }
+
+  const sameModuleComponentStreamCall =
+    context.target === "server" && context.serverOutput === "stream"
+      ? emitOxcSameModuleComponentStreamCall(
+          code,
+          expression,
+          context.componentCallNames ?? context.componentNames,
+        )
+      : undefined;
+  const componentCallNamesForRenderMode =
+    context.target === "server" && context.serverOutput === "stream"
+      ? context.componentCallNames ?? context.componentNames
+      : context.componentNames;
+  const sameModuleComponentCall =
+    sameModuleComponentStreamCall !== undefined ||
+    isOxcSameModuleComponentCallExpression(expression, componentCallNamesForRenderMode);
+
+  return [
+    {
+      kind: "expr",
+      code:
+        sameModuleComponentStreamCall ??
+        (containsOxcJsxSyntax(unwrappedExpression)
+          ? normalizeOxcExpressionCode(
+              context.lowerNestedJsxExpression(
+                code,
+                expression,
+                context.componentNames,
+                context.target,
+                context.diagnostics,
+                bodyStatementJsx,
+              ) ??
+                (bodyStatementJsx === "compat-object"
+                  ? stripOxcGeneratedImports(transformJsxWithOxc(readSource(code, expression)))
+                  : readOxcReactiveExpressionCode(code, expression, context)),
+            )
+          : readOxcReactiveExpressionCode(code, expression, context)),
+      ...(isOxcRenderValueExpression(expression) || sameModuleComponentCall
+        ? {
+            renderMode:
+              sameModuleComponentStreamCall !== undefined
+                ? ("stream-node" as const)
+                : bodyStatementJsx === "server-string"
+                  ? ("html" as const)
+                  : ("dynamic" as const),
+          }
+        : {}),
+    },
+  ];
+}
+
+function readOxcReactiveExpressionCode(
+  code: string,
+  expression: Record<string, unknown>,
+  context: OxcChildAnalysisContext,
+): string {
+  const unwrappedExpression = unwrapOxcParentheses(expression);
+
+  if (unwrappedExpression.type === "Identifier" && typeof unwrappedExpression.name === "string") {
+    return context.reactiveAliasBindings?.get(unwrappedExpression.name) ?? readSource(code, expression);
+  }
+
+  return (
+    rewriteOxcReactiveAliasExpressionCode(code, expression, context.reactiveAliasBindings) ??
+    readSource(code, expression)
+  );
+}
+
+function isOxcSameModuleComponentCallExpression(
+  expression: Record<string, unknown>,
+  componentNames: ReadonlySet<string>,
+): boolean {
+  const unwrappedExpression = unwrapOxcParentheses(expression);
+
+  if (unwrappedExpression.type !== "CallExpression") {
+    return false;
+  }
+
+  const callee = readObject(unwrappedExpression.callee);
+
+  return (
+    callee.type === "Identifier" &&
+    typeof callee.name === "string" &&
+    componentNames.has(callee.name)
+  );
+}
+
+function emitOxcSameModuleComponentStreamCall(
+  code: string,
+  expression: Record<string, unknown>,
+  componentNames: ReadonlySet<string>,
+): string | undefined {
+  const unwrappedExpression = unwrapOxcParentheses(expression);
+
+  if (unwrappedExpression.type !== "CallExpression") {
+    return undefined;
+  }
+
+  const callee = readObject(unwrappedExpression.callee);
+
+  if (
+    callee.type !== "Identifier" ||
+    typeof callee.name !== "string" ||
+    !componentNames.has(callee.name)
+  ) {
+    return undefined;
+  }
+
+  const args = readArray(unwrappedExpression.arguments)
+    .map((argument) => readSource(code, argument))
+    .join(", ");
+
+  return `($sink) => ${callee.name}($sink${args === "" ? "" : `, ${args}`})`;
+}
+
+function analyzeOxcDynamicBranch(
+  code: string,
+  expression: Record<string, unknown>,
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): JsxNodeIr[] {
+  if (expression.type === "Literal" && (expression.value === null || expression.value === false)) {
+    return [];
+  }
+
+  return analyzeOxcExpressionChild(code, expression, context, bodyStatementJsx);
+}
+
+function analyzeOxcListExpression(
+  code: string,
+  expression: Record<string, unknown>,
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): JsxNodeIr | undefined {
+  const callExpression =
+    expression.type === "ChainExpression" ? readObject(expression.expression) : expression;
+
+  if (callExpression.type !== "CallExpression") {
+    return undefined;
+  }
+
+  const callee = readObject(callExpression.callee);
+
+  if (callee.type !== "MemberExpression" || readObject(callee.property).name !== "map") {
+    return undefined;
+  }
+
+  const renderer = readObject(readArray(callExpression.arguments)[0]);
+
+  if (renderer.type !== "ArrowFunctionExpression") {
+    return undefined;
+  }
+
+  const itemName = String(readObject(readArray(renderer.params)[0]).name ?? "_item");
+  const indexName = readObject(readArray(renderer.params)[1]).name;
+  const rendererBody = analyzeOxcListRenderer(code, renderer, context, bodyStatementJsx);
+
+  if (rendererBody === undefined) {
+    return undefined;
+  }
+
+  const { children, bodyStatements } = rendererBody;
+  const keyCode = findOxcKeyCodeInChildren(children);
+
+  return {
+    kind: "list",
+    itemsCode:
+      callee.optional === true
+        ? `(${readOxcReactiveExpressionCode(code, readObject(callee.object), context)} ?? [])`
+        : readOxcReactiveExpressionCode(code, readObject(callee.object), context),
+    itemName,
+    ...(typeof indexName === "string" ? { indexName } : {}),
+    ...(keyCode === undefined ? {} : { keyCode }),
+    ...(bodyStatements.length === 0 ? {} : { bodyStatements }),
+    children,
+  };
+}
+
+function analyzeOxcListRenderer(
+  code: string,
+  renderer: Record<string, unknown>,
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): { children: JsxNodeIr[]; bodyStatements: string[] } | undefined {
+  const body = readObject(renderer.body);
+
+  if (body.type !== "BlockStatement") {
+    return analyzeOxcListReturnExpression(
+      code,
+      unwrapOxcParentheses(body),
+      [],
+      context,
+      bodyStatementJsx,
+    );
+  }
+
+  const statements = readArray(body.body);
+  const ifStatementIndex = statements.findIndex(
+    (statement) => readObject(statement).type === "IfStatement",
+  );
+
+  if (ifStatementIndex >= 0) {
+    return analyzeOxcListIfRenderer(code, statements, ifStatementIndex, context, bodyStatementJsx);
+  }
+
+  const returnStatementIndex = statements.findIndex(
+    (statement) => readObject(statement).type === "ReturnStatement",
+  );
+  const returnStatement =
+    returnStatementIndex === -1 ? undefined : readObject(statements[returnStatementIndex]);
+  const returnArgument =
+    returnStatement === undefined
+      ? undefined
+      : unwrapOxcParentheses(readObject(returnStatement.argument));
+
+  if (returnArgument === undefined) {
+    return undefined;
+  }
+
+  const bodyPrefixStatements = statements.slice(0, returnStatementIndex);
+  const result = analyzeOxcListReturnExpression(
+    code,
+    returnArgument,
+    bodyPrefixStatements.map(
+      (statement) =>
+        lowerOxcBodyStatementJsx(
+          code,
+          statement,
+          context.componentNames,
+          context.target,
+          context.diagnostics,
+          bodyStatementJsx,
+          context.bodyLowerers,
+        ) ?? formatOxcBodyStatement(code, statement, bodyStatementJsx),
+    ),
+    context,
+    bodyStatementJsx,
+  );
+
+  if (result === undefined) {
+    return undefined;
+  }
+
+  markOxcRenderValueExpressions(
+    result.children,
+    collectOxcBodyJsxBindingNames(bodyPrefixStatements),
+  );
+  return result;
+}
+
+function analyzeOxcListReturnExpression(
+  code: string,
+  body: Record<string, unknown>,
+  bodyStatements: string[],
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): { children: JsxNodeIr[]; bodyStatements: string[] } | undefined {
+  if (body.type === "ConditionalExpression") {
+    const children: JsxNodeIr[] = [
+      {
+        kind: "conditional",
+        conditionCode: readOxcReactiveExpressionCode(code, readObject(body.test), context),
+        whenTrue: analyzeOxcDynamicBranch(
+          code,
+          readObject(body.consequent),
+          context,
+          bodyStatementJsx,
+        ),
+        whenFalse: analyzeOxcDynamicBranch(
+          code,
+          readObject(body.alternate),
+          context,
+          bodyStatementJsx,
+        ),
+      },
+    ];
+
+    return {
+      children,
+      bodyStatements,
+    };
+  }
+
+  if (body.type !== "JSXElement" && body.type !== "JSXFragment") {
+    return undefined;
+  }
+
+  return {
+    children: [analyzeOxcJsxNode(code, body, context, bodyStatementJsx)],
+    bodyStatements,
+  };
+}
+
+function analyzeOxcListIfRenderer(
+  code: string,
+  statements: readonly unknown[],
+  ifStatementIndex: number,
+  context: OxcChildAnalysisContext,
+  bodyStatementJsx: OxcBodyStatementJsxMode,
+): { children: JsxNodeIr[]; bodyStatements: string[] } | undefined {
+  const ifStatement = readObject(statements[ifStatementIndex]);
+  const whenTrueExpression = readOxcReturnExpressionFromStatement(ifStatement.consequent);
+  const alternate = readOxcReturnExpressionFromStatement(ifStatement.alternate);
+  const fallthrough = readOxcReturnExpressionFromStatement(statements[ifStatementIndex + 1]);
+  const whenFalseExpression = alternate ?? fallthrough;
+
+  if (whenTrueExpression === undefined || whenFalseExpression === undefined) {
+    return undefined;
+  }
+
+  const bodyPrefixStatements = statements.slice(0, ifStatementIndex);
+  const children: JsxNodeIr[] = [
+    {
+      kind: "conditional",
+      conditionCode: readOxcReactiveExpressionCode(code, readObject(ifStatement.test), context),
+      whenTrue: analyzeOxcDynamicBranch(code, whenTrueExpression, context, bodyStatementJsx),
+      whenFalse: analyzeOxcDynamicBranch(code, whenFalseExpression, context, bodyStatementJsx),
+    },
+  ];
+
+  markOxcRenderValueExpressions(children, collectOxcBodyJsxBindingNames(bodyPrefixStatements));
+
+  return {
+    bodyStatements: bodyPrefixStatements.map(
+      (statement) =>
+        lowerOxcBodyStatementJsx(
+          code,
+          statement,
+          context.componentNames,
+          context.target,
+          context.diagnostics,
+          bodyStatementJsx,
+          context.bodyLowerers,
+        ) ?? formatOxcBodyStatement(code, statement, bodyStatementJsx),
+    ),
+    children,
+  };
+}
+
+function resolveOxcBodyStatementJsx(context: OxcChildAnalysisContext): OxcBodyStatementJsxMode {
+  return context.bodyStatementJsx ?? (context.target === "server" ? "server-string" : "dom-node");
+}