import { emitCompatSsrBoundaryHelper } from "./emit-compat-ssr-boundary.js";
import type { AttributeIr, ComponentPropIr, ComponentIr, JsxNodeIr, ModuleIr } from "./ir.js";
import type { RuntimeImport, ServerEscapeOptions } from "./types.js";
import { emitEscapeHtmlHelper } from "./emit-escape-helper.js";
import { createCodeBuilder } from "./emit-code-builder.js";
import { escapeHtmlAttribute as escapeHtml } from "@reckona/mreact-shared/html-escape";
import {
  emitOptionSelectedAttributeCode,
  emitSelectSelectionValueCode,
  htmlAttributeNameForElement,
  isBooleanishStringAttribute,
  isDangerousHtmlAttribute,
  isStaticUrlValueUnsafe,
  isUrlAttribute,
  isVoidHtmlElement,
  parseStaticStyleObjectLiteral,
  parseStyleLiteralValue,
  simpleSideEffectFreeExpression,
  type OptionSelectedLocalNames,
} from "./emit-server-shared.js";
import {
  emitOxcCompatObjectChildren,
  oxcServerStringReactNodeRenderHelperPlaceholder,
  setOxcServerStringUrlSafeHelperName,
} from "./oxc-runtime-emit.js";

export interface EmitResult {
  code: string;
  imports: RuntimeImport[];
}

export interface EmitServerOptions {
  dynamicAttributes?: "drop" | "emit";
  escape?: ServerEscapeOptions | undefined;
  serverHydration?: boolean;
}

// Module-local handle to the URL-safety helper name for the current emit
// call. Used by deeply-nested attribute emitters to avoid threading the
// name through every signature. Reset at the top of `emitServer`.
let currentRouterLinkComponentNames: ReadonlySet<string> = new Set();
let currentUrlSafeHelperName: string = "_urlAttrSafe";
let currentClientBoundaryHelperName: string | undefined;
let currentCompatChildHelperName: string | undefined;
let currentSpreadAttributesHelperName: string = "_renderSpreadAttributes";
let currentSpreadPropsName: string = "_renderSpreadAttributes$props";
let currentSpreadSelectedValueName: string = "_renderSpreadAttributes$selected";
let currentMarkServerRenderValueHelperName: string = "_registerServerRenderValue";
let currentMarkServerRenderThunkHelperName = "_registerServerRenderThunk";
let currentRenderServerValueHelperName: string = "_renderServerValue";
let currentContainsServerRenderValueHelperName: string = "_containsServerRenderValue";
let currentServerRenderAttributeValueName: string = "_serverRenderAttributeValue";
let currentRenderServerChildHelperName: string = "_renderServerChild";
let currentJoinServerHtmlHelperName = "_joinServerHtml";
let currentAppendServerHtmlHelperName = "_appendServerHtml";
let currentPromiseAwareComposition = false;
let currentSelectionParameterName: string = "_selectedValue";
let currentSelectionMultipleParameterName: string = "_selectedMultiple";
let currentOptionSelectedLocalNames: OptionSelectedLocalNames = {
  selected: "_selected",
  optionValue: "_optionValue",
  boundOptionValue: "_boundOptionValue",
  textValue: "_optionText",
  textParts: "_optionTextParts",
  textBody: "_optionTextBody",
  textHasValue: "_optionTextHasValue",
  selectValue: "_selectValue",
  selectValueAttribute: "_selectValueAttribute",
  selectDefaultValue: "_selectDefaultValue",
  selectMultiple: "_selectMultiple",
  attributes: "_optionAttributes",
  index: "_i",
  candidate: "_candidate",
};
const serverSelectionContextKey = "mreact.server.selected-value";
const serverSelectionMultipleContextKey = "mreact.server.select-multiple";
const serverSelectionRenderValueKey = "mreact.server.selection-render-value";
/**
 * Selection expression of the nearest enclosing `<select>`, or `undefined` outside
 * one. Emit-time only (this walker is a synchronous tree walk, and nothing here
 * survives into generated code), so unlike a runtime global it cannot leak between
 * sibling selects or concurrent requests: every `<select>` saves and restores it
 * around its own children. Threading it through the walker's parameter list would
 * mean touching ~25 recursion sites, and the stream emitter already carries the
 * same value on its `CollectHtmlState`.
 */
let currentSelectedValueCode: string | undefined;
let currentSelectedMultipleCode: string | undefined;
let currentSelectionContextActive = false;

function withSelectedValueCode<T>(
  selectedValueCode: string | undefined,
  selectedMultipleCode: string | undefined,
  emit: () => T,
): T {
  const previous = currentSelectedValueCode;
  const previousMultiple = currentSelectedMultipleCode;
  const previousActive = currentSelectionContextActive;
  currentSelectedValueCode = selectedValueCode;
  currentSelectedMultipleCode = selectedMultipleCode;
  currentSelectionContextActive =
    selectedValueCode !== undefined || selectedMultipleCode !== undefined;
  try {
    return emit();
  } finally {
    currentSelectedValueCode = previous;
    currentSelectedMultipleCode = previousMultiple;
    currentSelectionContextActive = previousActive;
  }
}

export function emitServer(ir: ModuleIr, options: EmitServerOptions = {}): EmitResult {
  currentRouterLinkComponentNames = new Set(ir.routerLinkComponentNames ?? []);
  currentSelectedValueCode = undefined;
  currentSelectedMultipleCode = undefined;
  currentSelectionContextActive = false;
  const escapeHelperName = allocateEscapeHelperName(ir);
  const escapeBatchHelperName =
    options.escape === undefined ? undefined : allocateHelperName(ir, "_escapeHtmlBatch");
  const contextProviderHelperName = usesContextProvider(ir)
    ? allocateHelperName(ir, "_renderContextProviderToString")
    : undefined;
  const contextConsumerHelperName = usesContextConsumer(ir)
    ? allocateHelperName(ir, "_renderContextConsumerToString")
    : undefined;
  const reactNodeRenderHelperName = usesReactNodeRender(ir)
    ? allocateHelperName(ir, "_renderReactNodeToString")
    : undefined;
  const clientBoundaryHelperName = usesClientBoundary(ir)
    ? allocateHelperFamilyName(ir, "_renderClientBoundary", [
        "$hasNonSerializableProps",
        "$markChildren",
        "$compat",
      ])
    : undefined;
  const compatChildHelperName = usesCompatChildRender(ir)
    ? allocateHelperName(ir, "_renderCompatChild")
    : undefined;
  const spreadAttributesHelperName = allocateHelperName(ir, "_renderSpreadAttributes");
  const spreadPropsName = allocateNestedBindingSafeName(ir, `${spreadAttributesHelperName}$props`);
  const spreadSelectedValueName = allocateNestedBindingSafeName(
    ir,
    `${spreadAttributesHelperName}$selected`,
  );
  const markServerRenderValueHelperName = allocateNestedBindingSafeName(
    ir,
    "_registerServerRenderValue",
  );
  currentMarkServerRenderThunkHelperName = allocateNestedBindingSafeName(
    ir,
    "_registerServerRenderThunk",
  );
  const renderServerValueHelperName = allocateNestedBindingSafeName(ir, "_renderServerValue");
  const isServerRenderValueHelperName = allocateNestedBindingSafeName(ir, "_isServerRenderValue");
  const readServerRenderValueHelperName = allocateNestedBindingSafeName(
    ir,
    "_readServerRenderValue",
  );
  const containsServerRenderValueHelperName = allocateNestedBindingSafeName(
    ir,
    "_containsServerRenderValue",
  );
  const serverRenderAttributeValueName = allocateNestedBindingSafeName(
    ir,
    "_serverRenderAttributeValue",
  );
  const renderServerChildHelperName = allocateNestedBindingSafeName(ir, "_renderServerChild");
  currentJoinServerHtmlHelperName = allocateNestedBindingSafeName(ir, "_joinServerHtml");
  currentAppendServerHtmlHelperName = allocateNestedBindingSafeName(ir, "_appendServerHtml");
  currentPromiseAwareComposition = false;
  const selectionParameterName = allocateNestedBindingSafeName(ir, "_selectedValue");
  const selectionMultipleParameterName = allocateNestedBindingSafeName(ir, "_selectedMultiple");
  currentSelectionParameterName = selectionParameterName;
  currentSelectionMultipleParameterName = selectionMultipleParameterName;
  currentOptionSelectedLocalNames = {
    selected: allocateNestedBindingSafeName(ir, "_selected"),
    optionValue: allocateNestedBindingSafeName(ir, "_optionValue"),
    boundOptionValue: allocateNestedBindingSafeName(ir, "_boundOptionValue"),
    textValue: allocateNestedBindingSafeName(ir, "_optionText"),
    textParts: allocateNestedBindingSafeName(ir, "_optionTextParts"),
    textBody: allocateNestedBindingSafeName(ir, "_optionTextBody"),
    textHasValue: allocateNestedBindingSafeName(ir, "_optionTextHasValue"),
    selectValue: allocateNestedBindingSafeName(ir, "_selectValue"),
    selectValueAttribute: allocateNestedBindingSafeName(ir, "_selectValueAttribute"),
    selectDefaultValue: allocateNestedBindingSafeName(ir, "_selectDefaultValue"),
    selectMultiple: allocateNestedBindingSafeName(ir, "_selectMultiple"),
    attributes: allocateNestedBindingSafeName(ir, "_optionAttributes"),
    index: allocateNestedBindingSafeName(ir, "_i"),
    candidate: allocateNestedBindingSafeName(ir, "_candidate"),
  };
  const outAccumulatorName = allocateHelperName(ir, "_out");
  const urlSafeHelperName = allocateHelperName(ir, "_urlAttrSafe");
  currentUrlSafeHelperName = urlSafeHelperName;
  setOxcServerStringUrlSafeHelperName(urlSafeHelperName);
  currentClientBoundaryHelperName = clientBoundaryHelperName;
  currentCompatChildHelperName = compatChildHelperName;
  currentSpreadAttributesHelperName = spreadAttributesHelperName;
  currentSpreadPropsName = spreadPropsName;
  currentSpreadSelectedValueName = spreadSelectedValueName;
  currentMarkServerRenderValueHelperName = markServerRenderValueHelperName;
  currentRenderServerValueHelperName = renderServerValueHelperName;
  currentContainsServerRenderValueHelperName = containsServerRenderValueHelperName;
  currentServerRenderAttributeValueName = serverRenderAttributeValueName;
  currentRenderServerChildHelperName = renderServerChildHelperName;
  const helper = emitEscapeHtmlHelper(escapeHelperName);
  // Inline URL-scheme guard mirroring packages/server/src/url-safety.ts.
  // Returns the original value when safe to emit and undefined when the
  // attribute should be dropped. Inlined so compiler output stays free
  // of cross-package runtime imports.
  // Mirrors packages/server/src/url-safety.ts. Issue 078: in-scheme
  // tab/CR/LF must be stripped anywhere in the value, not just at the
  // start, to match the browser's URL parser.
  const urlSafeHelper = [
    `function ${urlSafeHelperName}(name, value) {`,
    `  name = name.toLowerCase();`,
    `  value = String(value);`,
    `  if (name === "srcset" || name === "imagesrcset") {`,
    `    const _canonicalSet = value.replace(/^[\\x00-\\x20]+/u, "").replace(/[\\t\\r\\n]/g, "");`,
    `    for (const _candidate of _canonicalSet.split(",")) {`,
    `      const _url = (_candidate.trim().split(/\\s+/)[0] || "");`,
    `      if (_url !== "" && ${urlSafeHelperName}("src", _url) === undefined) return undefined;`,
    `    }`,
    `    return value;`,
    `  }`,
    `  const _canonical = value`,
    `    .replace(/^[\\x00-\\x20]+/u, "")`,
    `    .replace(/[\\t\\r\\n]/g, "");`,
    `  const _match = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(_canonical);`,
    `  if (_match === null) return value;`,
    `  const _scheme = _match[1].toLowerCase();`,
    `  if (_scheme !== "javascript" && _scheme !== "vbscript" && _scheme !== "livescript" && _scheme !== "mhtml" && _scheme !== "file" && _scheme !== "data") return value;`,
    `  if (_scheme === "data" && (name === "src" || name === "poster") && /^data:image\\/(?!svg\\+xml\\s*(?:[;,]|$))/i.test(_canonical)) return value;`,
    `  return undefined;`,
    `}`,
  ].join("\n");
  const asyncComponentNames = collectAsyncServerComponentNames(ir.components);
  const components = ir.components
    .map((component) => {
      const emitted = emitComponent(
        component,
        escapeHelperName,
        escapeBatchHelperName,
        outAccumulatorName,
        options,
        asyncComponentNames,
        options.dynamicAttributes ?? "emit",
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
        selectionParameterName,
        selectionMultipleParameterName,
      );
      return component.serverRenderValuePlaceholder === undefined
        ? emitted
        : emitted.replaceAll(
            component.serverRenderValuePlaceholder,
            markServerRenderValueHelperName,
          );
    })
    .join("\n\n");
  const rawModuleStatements = emitModuleStatements(ir);
  const moduleStatements =
    ir.serverRenderValuePlaceholder === undefined
      ? rawModuleStatements
      : rawModuleStatements.replaceAll(
          ir.serverRenderValuePlaceholder,
          markServerRenderValueHelperName,
        );
  const emittedServerCode = `${moduleStatements}\n${components}`;
  // Tree-shake the URL-safety helper when it is not referenced by any
  // component output. Same shape as the existing escapeImport check.
  const needsSpreadAttributesHelper = components.includes(spreadAttributesHelperName);
  const urlSafeBlock =
    components.includes(urlSafeHelperName) || needsSpreadAttributesHelper ? urlSafeHelper : "";
  const needsServerRenderValue =
    emittedServerCode.includes(renderServerChildHelperName) ||
    emittedServerCode.includes(currentMarkServerRenderThunkHelperName) ||
    emittedServerCode.includes(markServerRenderValueHelperName) ||
    emittedServerCode.includes(renderServerValueHelperName) ||
    emittedServerCode.includes(isServerRenderValueHelperName) ||
    emittedServerCode.includes(containsServerRenderValueHelperName);
  const clientBoundaryBlock =
    clientBoundaryHelperName === undefined || !components.includes(clientBoundaryHelperName)
      ? ""
      : emitClientBoundaryHelper(
          clientBoundaryHelperName,
          needsServerRenderValue ? isServerRenderValueHelperName : undefined,
        );
  const spreadAttributesBlock = needsSpreadAttributesHelper
    ? emitSpreadAttributesHelper(
        spreadAttributesHelperName,
        escapeHelperName,
        urlSafeHelperName,
        needsServerRenderValue ? containsServerRenderValueHelperName : undefined,
      )
    : "";
  const serverRenderValueBlock = needsServerRenderValue
    ? emitServerRenderValueHelpers(
        isServerRenderValueHelperName,
        readServerRenderValueHelperName,
        containsServerRenderValueHelperName,
        renderServerValueHelperName,
        escapeHelperName,
      )
    : "";
  const serverChildBlock = emittedServerCode.includes(renderServerChildHelperName)
    ? emitServerChildHelper(
        renderServerChildHelperName,
        escapeHelperName,
        needsServerRenderValue ? isServerRenderValueHelperName : undefined,
        needsServerRenderValue ? readServerRenderValueHelperName : undefined,
        needsServerRenderValue ? renderServerValueHelperName : undefined,
      )
    : "";
  const serverRenderValueImport =
    serverRenderValueBlock === ""
      ? ""
      : `import { isServerRenderValue as ${isServerRenderValueHelperName}, readServerRenderValue as ${readServerRenderValueHelperName}, registerServerRenderValue as ${markServerRenderValueHelperName}, registerServerRenderThunk as ${currentMarkServerRenderThunkHelperName} } from "@reckona/mreact-shared/server-render-value-internal";`;
  // Emit batch escape import only when the helper is actually referenced
  // by the generated component code (issue 048: dead-import elimination).
  // Helper names are uniquely allocated, so a literal substring check is
  // both correct and inexpensive.
  const escapeImport =
    options.escape === undefined ||
    escapeBatchHelperName === undefined ||
    !components.includes(escapeBatchHelperName)
      ? ""
      : `import { ${options.escape.batchImportName} as ${escapeBatchHelperName} } from ${stringLiteral(options.escape.batchImportSource)};`;
  const userImports = emitUserImports(ir);
  const contextImport = emitContextImport(
    contextProviderHelperName,
    contextConsumerHelperName,
    reactNodeRenderHelperName,
    compatChildHelperName,
  );
  const code = createCodeBuilder();
  code.section(userImports);
  code.section(escapeImport);
  code.section(contextImport);
  code.section(serverRenderValueImport);
  code.section(moduleStatements);
  code.section(helper);
  code.section(urlSafeBlock);
  code.section(clientBoundaryBlock);
  code.section(spreadAttributesBlock);
  code.section(serverRenderValueBlock);
  code.section(serverChildBlock);
  if (
    `${components}\n${serverChildBlock}\n${serverRenderValueBlock}`.includes(
      currentJoinServerHtmlHelperName,
    ) ||
    components.includes(currentAppendServerHtmlHelperName)
  )
    code.section(emitJoinServerHtmlHelper(currentJoinServerHtmlHelperName));
  code.section(components);

  return {
    code: code.toString(),
    imports: [
      ...collectContextImports(
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
        compatChildHelperName,
      ),
      ...(serverRenderValueBlock === ""
        ? []
        : [
            {
              source: "@reckona/mreact-shared/server-render-value-internal",
              specifiers: [
                "isServerRenderValue",
                "readServerRenderValue",
                "registerServerRenderValue",
                "registerServerRenderThunk",
              ],
            },
          ]),
    ],
  };
}

function emitContextImport(
  contextProviderHelperName: string | undefined,
  contextConsumerHelperName: string | undefined,
  reactNodeRenderHelperName: string | undefined,
  compatChildHelperName?: string | undefined,
): string {
  const specifiers = [
    reactNodeRenderHelperName === undefined
      ? undefined
      : `renderToString as ${reactNodeRenderHelperName}`,
    compatChildHelperName === undefined
      ? undefined
      : `renderChildToString as ${compatChildHelperName}`,
    contextProviderHelperName === undefined
      ? undefined
      : `renderContextProviderToString as ${contextProviderHelperName}`,
    contextConsumerHelperName === undefined
      ? undefined
      : `renderContextConsumerToString as ${contextConsumerHelperName}`,
  ].filter((specifier): specifier is string => specifier !== undefined);

  return specifiers.length === 0
    ? ""
    : `import { ${specifiers.join(", ")} } from "@reckona/mreact-compat";`;
}

function collectContextImports(
  contextProviderHelperName: string | undefined,
  contextConsumerHelperName: string | undefined,
  reactNodeRenderHelperName?: string,
  compatChildHelperName?: string,
): RuntimeImport[] {
  const specifiers = [
    reactNodeRenderHelperName === undefined ? undefined : "renderToString",
    contextProviderHelperName === undefined ? undefined : "renderContextProviderToString",
    contextConsumerHelperName === undefined ? undefined : "renderContextConsumerToString",
    compatChildHelperName === undefined ? undefined : "renderChildToString",
  ].filter((specifier): specifier is string => specifier !== undefined);

  return specifiers.length === 0 ? [] : [{ source: "@reckona/mreact-compat", specifiers }];
}

function emitUserImports(ir: ModuleIr): string {
  return ir.userImports.join("\n");
}

function emitModuleStatements(ir: ModuleIr): string {
  return ir.moduleStatements.join("\n");
}

function emitComponent(
  component: ComponentIr,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  outAccumulatorName: string,
  options: EmitServerOptions,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
  selectionParameterName?: string,
  selectionMultipleParameterName?: string,
): string {
  const body = component.bodyStatements.map(
    (statement) =>
      `  ${replaceOxcServerStringReactNodeRenderHelper(statement, reactNodeRenderHelperName)}`,
  );
  const parameters = component.parameters.join(", ");
  const selectionContextDeclaration = [
    `  const ${selectionParameterName} = arguments[0]?.[Symbol.for(${JSON.stringify(serverSelectionContextKey)})];`,
    `  const ${selectionMultipleParameterName} = arguments[0]?.[Symbol.for(${JSON.stringify(serverSelectionMultipleContextKey)})];`,
  ];
  const promiseAware = mayRenderDeferredChildren(component.root);
  const previousPromiseAware = currentPromiseAwareComposition;
  currentPromiseAwareComposition = promiseAware;
  const collect = () =>
    collectHtmlStatements(
      component.root,
      outAccumulatorName,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
    );
  const previousSelectedValueCode = currentSelectedValueCode;
  const previousSelectedMultipleCode = currentSelectedMultipleCode;
  const previousSelectionContextActive = currentSelectionContextActive;
  currentSelectedValueCode = selectionParameterName;
  currentSelectedMultipleCode = selectionMultipleParameterName;
  currentSelectionContextActive = false;
  let htmlStatements: string[];
  try {
    htmlStatements = collect();
  } finally {
    currentSelectedValueCode = previousSelectedValueCode;
    currentSelectedMultipleCode = previousSelectedMultipleCode;
    currentSelectionContextActive = previousSelectionContextActive;
    currentPromiseAwareComposition = previousPromiseAware;
  }

  const markerStart = stringLiteral(`<!--mreact-h:start:${encodeURIComponent(component.name)}-->`);
  const markerEnd = stringLiteral(`<!--mreact-h:end:${encodeURIComponent(component.name)}-->`);

  const hydrationOpenStatements =
    options.serverHydration === true
      ? [`  ${emitHtmlAppend(outAccumulatorName, markerStart, promiseAware)}`]
      : [];
  const hydrationCloseStatements =
    options.serverHydration === true
      ? [`  ${emitHtmlAppend(outAccumulatorName, markerEnd, promiseAware)}`]
      : [];

  const functionKeyword = `${component.exportDefault === true ? "export default " : component.exported === false ? "" : "export "}${
    asyncComponentNames.has(component.name) ? "async " : ""
  }function`;

  return [
    `${functionKeyword} ${component.name}(${parameters}) {`,
    ...selectionContextDeclaration,
    ...body,
    `  let ${outAccumulatorName} = "";`,
    ...hydrationOpenStatements,
    ...htmlStatements.map((statement) => `  ${statement}`),
    ...hydrationCloseStatements,
    `  return ${outAccumulatorName};`,
    `}`,
  ].join("\n");
}

function emitHtmlExpression(
  node: JsxNodeIr,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
): string {
  const parts = collectHtmlParts(
    node,
    escapeHelperName,
    escapeBatchHelperName,
    asyncComponentNames,
    dynamicAttributes,
    contextProviderHelperName,
    contextConsumerHelperName,
    reactNodeRenderHelperName,
  );

  if (parts.length === 0) {
    return '""';
  }

  return joinHtmlExpressions(parts, mayRenderDeferredChildren(node));
}

/**
 * Statement-list IR walker (issue 046 followup). Produces a sequence of
 * statements that each append to a shared accumulator variable instead of
 * a single concat expression. Used at the top of component bodies; sub
 * callbacks (`renderContextProviderToString`, async list renderers, etc.)
 * still use the expression form via `emitHtmlExpression`.
 *
 * The benefits over expression mode:
 *   - intermediate string allocations from `+ +` chains disappear
 *   - conditional branches lower to `if/else` (no ternary expression spaghetti)
 *   - sync list rendering inlines the for-loop append without an IIFE wrapper
 *   - debugger / source maps step naturally over the generated statements
 */
function collectHtmlStatements(
  node: JsxNodeIr,
  outVar: string,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
): string[] {
  if (node.kind === "text") {
    const literal = escapeHtml(node.value);
    if (literal === "") {
      return [];
    }
    return [emitHtmlAppend(outVar, `${stringLiteral(literal)}`)];
  }

  if (node.kind === "expr") {
    if (isChildrenExpressionCode(node.code)) {
      return [
        emitHtmlAppend(
          outVar,
          `${currentRenderServerChildHelperName}(${node.code}, ${currentSelectedValueCode ?? "undefined"}, ${currentSelectedMultipleCode ?? "undefined"})`,
        ),
      ];
    }

    if (node.renderMode === "html") {
      return [emitHtmlAppend(outVar, `${rawHtmlExpression(node.code)}`)];
    }

    if (node.renderMode === "react-node" && reactNodeRenderHelperName !== undefined) {
      return [emitHtmlAppend(outVar, `${reactNodeRenderHelperName}(() => (${node.code}))`)];
    }

    if (node.renderMode === "compat-child" && currentCompatChildHelperName !== undefined) {
      return [emitHtmlAppend(outVar, `${currentCompatChildHelperName}(${node.code})`)];
    }

    if (node.renderMode === "server-render-value") {
      return [
        emitHtmlAppend(
          outVar,
          `${currentRenderServerValueHelperName}(${node.code}, 0, ${currentSelectedValueCode ?? "undefined"}, ${currentSelectedMultipleCode ?? "undefined"})`,
        ),
      ];
    }

    return [emitHtmlAppend(outVar, `${escapeHelperName}(${node.code})`)];
  }

  if (node.kind === "conditional") {
    const conditionCode =
      node.conditionValueName === undefined
        ? node.conditionCode
        : (node.conditionTestCode ?? node.conditionValueName);
    const whenTrueStatements = node.whenTrue.flatMap((child) =>
      collectHtmlStatements(
        child,
        outVar,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      ),
    );
    const whenFalseStatements = node.whenFalse.flatMap((child) =>
      collectHtmlStatements(
        child,
        outVar,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      ),
    );

    if (whenTrueStatements.length === 0 && whenFalseStatements.length === 0) {
      return [];
    }

    let statements: string[];
    if (whenFalseStatements.length === 0) {
      statements = [
        `if (${conditionCode}) {`,
        ...whenTrueStatements.map((statement) => `  ${statement}`),
        `}`,
      ];
    } 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 [
      `{`,
      `  const ${node.conditionValueName} = (${node.conditionCode});`,
      ...statements.map((statement) => `  ${statement}`),
      `}`,
    ];
  }

  if (node.kind === "list") {
    const isAsync = containsAsyncServerOperationInChildren(node.children, asyncComponentNames);

    if (isAsync) {
      // Parallel async path keeps the existing renderer + Promise.all + join
      // form to preserve concurrent resolution semantics.
      const parameters = emitListParameters(node);
      const renderer = emitListRenderer(
        node,
        parameters,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      );
      const mapped = `(${node.itemsCode}).map(${renderer})`;
      return [emitHtmlAppend(outVar, `(await Promise.all(${mapped})).join("")`)];
    }

    // Sync list — inline for-loop appending to the caller's accumulator.
    // No inner IIFE wrapper and no intermediate string concat per iteration.
    const itemPattern =
      node.parameterPatterns === undefined ? node.itemName : node.parameterPatterns[0];
    const itemBinding = itemPattern === undefined ? undefined : `const ${itemPattern} = _arr[_i];`;
    const indexPattern = node.parameterPatterns?.[1] ?? node.indexName;
    const arrayPattern = node.parameterPatterns?.[2] ?? node.arrayName;
    const indexBinding = indexPattern === undefined ? undefined : `const ${indexPattern} = _i;`;
    const arrayBinding = arrayPattern === undefined ? undefined : `const ${arrayPattern} = _arr;`;
    const bodyStatements = node.bodyStatements ?? [];
    const childStatements = node.children.flatMap((child) =>
      collectHtmlStatements(
        child,
        outVar,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      ),
    );

    return [
      `{`,
      `  const _arr = (${node.itemsCode});`,
      `  for (let _i = 0, _len = _arr.length; _i < _len; _i++) {`,
      ...(itemBinding === undefined ? [] : [`    ${itemBinding}`]),
      ...(indexBinding === undefined ? [] : [`    ${indexBinding}`]),
      ...(arrayBinding === undefined ? [] : [`    ${arrayBinding}`]),
      ...bodyStatements.map((statement) => `    ${statement}`),
      ...childStatements.map((statement) => `    ${statement}`),
      `  }`,
      `}`,
    ];
  }

  if (node.kind === "fragment") {
    return node.children.flatMap((child) =>
      collectHtmlStatements(
        child,
        outVar,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      ),
    );
  }

  if (node.kind === "component") {
    if (node.name === "Suspense") {
      return [
        emitHtmlAppend(outVar, `"<!--$-->"`),
        ...node.children.flatMap((child) =>
          collectHtmlStatements(
            child,
            outVar,
            escapeHelperName,
            escapeBatchHelperName,
            asyncComponentNames,
            dynamicAttributes,
            contextProviderHelperName,
            contextConsumerHelperName,
            reactNodeRenderHelperName,
          ),
        ),
        emitHtmlAppend(outVar, `"<!--/$-->"`),
      ];
    }

    if (contextProviderHelperName !== undefined && node.name.endsWith(".Provider")) {
      // Provider helper takes a string-returning callback. Use the
      // expression form inside the callback to preserve the existing
      // helper contract.
      const valueCode = findComponentPropCode(node.props, "value") ?? "undefined";
      return [
        emitHtmlAppend(
          outVar,
          `${contextProviderHelperName}(${node.name}, ${valueCode}, () => ${emitHtmlExpressionFromChildren(node.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)})`,
        ),
      ];
    }

    if (contextConsumerHelperName !== undefined && node.name.endsWith(".Consumer")) {
      const renderProp = findComponentRenderProp(node.props, "children");

      if (renderProp !== undefined) {
        const valueName = renderProp.valueName ?? "_value";
        return [
          emitHtmlAppend(
            outVar,
            `${contextConsumerHelperName}(${node.name}, (${valueName}) => ${emitHtmlExpressionFromChildren(renderProp.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)})`,
          ),
        ];
      }
    }

    if (isClientBoundaryPlaceholder(node)) {
      const helperName = currentClientBoundaryHelperName;
      if (helperName !== undefined) {
        const hasComponentFallback = shouldRenderClientBoundaryFallback(node);
        const boundaryProps = emitPropsObject(
          node.props,
          [],
          escapeHelperName,
          escapeBatchHelperName,
          asyncComponentNames,
          dynamicAttributes,
          contextProviderHelperName,
          contextConsumerHelperName,
          reactNodeRenderHelperName,
          undefined,
          undefined,
          false,
        );
        const fallbackHtml = node.clientReference?.compatSsr === true
          ? `(_childrenHtml, _identifierPrefix, _props) => ${reactNodeRenderHelperName}(${node.name}, _props, { identifierPrefix: _identifierPrefix, stringResult: "text" })`
          : hasComponentFallback
          ? `(_childrenHtml) => ${emitComponentCallExpression(
              node.name,
              emitPropsObject(
                node.props,
                node.children,
                escapeHelperName,
                escapeBatchHelperName,
                asyncComponentNames,
                dynamicAttributes,
                contextProviderHelperName,
                contextConsumerHelperName,
                reactNodeRenderHelperName,
                node.name,
                "_childrenHtml",
                false,
              ),
              asyncComponentNames,
            )}`
          : emitHtmlExpressionFromChildren(
              node.children,
              escapeHelperName,
              escapeBatchHelperName,
              asyncComponentNames,
              dynamicAttributes,
              contextProviderHelperName,
              contextConsumerHelperName,
              reactNodeRenderHelperName,
            );
        const originalChildrenHtml = hasComponentFallback
          ? emitHtmlExpressionFromChildren(
              node.children,
              escapeHelperName,
              escapeBatchHelperName,
              asyncComponentNames,
              dynamicAttributes,
              contextProviderHelperName,
              contextConsumerHelperName,
              reactNodeRenderHelperName,
            )
          : undefined;
        return [
          emitHtmlAppend(
            outVar,
            `${helperName}(${stringLiteral(node.name)}, ${boundaryProps}, ${fallbackHtml}${originalChildrenHtml === undefined ? "" : `, true, ${originalChildrenHtml}, ${node.children.length > 0}${node.clientReference?.compatSsr === true ? ", true" : ""}`})`,
          ),
        ];
      }

      return [emitHtmlAppend(outVar, `${stringLiteral(clientBoundaryPlaceholder(node))}`)];
    }

    if (node.runtime === "compat" && reactNodeRenderHelperName !== undefined) {
      return [
        emitHtmlAppend(
          outVar,
          `${reactNodeRenderHelperName}(${node.name}, ${emitCompatRuntimePropsObject(
            node.props,
            node.children,
            currentSelectedValueCode,
            currentSelectedMultipleCode,
          )})`,
        ),
      ];
    }

    return [
      emitHtmlAppend(
        outVar,
        `${emitComponentCallExpression(
          node.name,
          emitPropsObject(
            node.props,
            node.children,
            escapeHelperName,
            escapeBatchHelperName,
            asyncComponentNames,
            dynamicAttributes,
            contextProviderHelperName,
            contextConsumerHelperName,
            reactNodeRenderHelperName,
            node.name,
          ),
          asyncComponentNames,
        )}`,
      ),
    ];
  }

  if (node.kind === "async-boundary") {
    return [];
  }

  // element
  const statements: string[] = [];
  if (node.tagName === "textarea") {
    const attributeScan = scanElementAttributes(node.tagName, node.attributes);
    statements.push(emitHtmlAppend(outVar, `${stringLiteral("<textarea")}`));
    for (const attributePart of collectElementAttributeParts(
      node.tagName,
      node.attributes,
      escapeHelperName,
      escapeBatchHelperName,
      dynamicAttributes,
      attributeScan,
    )) {
      statements.push(emitHtmlAppend(outVar, `${attributePart}`));
    }
    statements.push(emitHtmlAppend(outVar, `">"`));
    for (const valuePart of collectTextareaValueParts(
      node,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
      attributeScan,
    )) {
      statements.push(emitHtmlAppend(outVar, `${valuePart}`));
    }
    statements.push(emitHtmlAppend(outVar, `"</textarea>"`));
    return statements;
  }

  const attributeScan = scanElementAttributes(node.tagName, node.attributes);
  if (hasDynamicSelectSelectionAttribute(node)) {
    return [
      emitHtmlAppend(
        outVar,
        `${emitBoundSelectExpression(
          node,
          escapeHelperName,
          escapeBatchHelperName,
          asyncComponentNames,
          dynamicAttributes,
          contextProviderHelperName,
          contextConsumerHelperName,
          reactNodeRenderHelperName,
          attributeScan,
        )}`,
      ),
    ];
  }
  if (
    dynamicAttributes === "emit" &&
    !isVoidHtmlElement(node.tagName) &&
    node.attributes.some((attr) => attr.kind === "spread-attr")
  ) {
    const capturedOptionText =
      currentSelectedValueCode === undefined ||
      node.attributes.some(
        (attr) => attr.kind !== "spread-attr" && attr.name === "dangerouslySetInnerHTML",
      )
        ? undefined
        : findCapturedOptionText(node, escapeHelperName);
    const selectedAttributePart = collectOptionSelectedAttributePart(
      node,
      true,
      capturedOptionText?.valueCode,
    );
    statements.push(
      emitHtmlAppend(
        outVar,
        `${emitMergedSpreadElementExpression(
          node.tagName,
          node.attributes,
          attributeScan,
          withSelectedValueCode(
            selectedValueCodeForChildren(node, attributeScan),
            selectedMultipleCodeForChildren(node, attributeScan),
            () =>
              capturedOptionText === undefined
                ? emitHtmlExpressionFromChildren(
                    node.children,
                    escapeHelperName,
                    escapeBatchHelperName,
                    asyncComponentNames,
                    dynamicAttributes,
                    contextProviderHelperName,
                    contextConsumerHelperName,
                    reactNodeRenderHelperName,
                  )
                : capturedOptionText.bodyCode,
          ),
          selectedAttributePart,
          containsAsyncServerOperationInChildren(node.children, asyncComponentNames),
          capturedOptionText,
        )}`,
      ),
    );
    return statements;
  }

  const dynamicOptionValueAttribute = findDynamicOptionValueAttribute(node);
  if (dynamicOptionValueAttribute !== undefined && currentSelectedValueCode !== undefined) {
    return [
      emitHtmlAppend(
        outVar,
        `${emitBoundOptionValueExpression(
          node,
          escapeHelperName,
          escapeBatchHelperName,
          asyncComponentNames,
          dynamicAttributes,
          contextProviderHelperName,
          contextConsumerHelperName,
          reactNodeRenderHelperName,
          attributeScan,
          dynamicOptionValueAttribute,
        )}`,
      ),
    ];
  }

  const capturedOptionExpression = emitCapturedOptionExpression(
    node,
    escapeHelperName,
    escapeBatchHelperName,
    dynamicAttributes,
    attributeScan,
  );
  if (capturedOptionExpression !== undefined) {
    return [emitHtmlAppend(outVar, `${capturedOptionExpression}`)];
  }

  statements.push(emitHtmlAppend(outVar, `${stringLiteral(`<${node.tagName}`)}`));

  for (const attributePart of collectElementAttributeParts(
    node.tagName,
    node.attributes,
    escapeHelperName,
    escapeBatchHelperName,
    dynamicAttributes,
    attributeScan,
  )) {
    statements.push(emitHtmlAppend(outVar, `${attributePart}`));
  }
  const selectedAttributePart = collectOptionSelectedAttributePart(node);
  if (selectedAttributePart !== undefined) {
    statements.push(emitHtmlAppend(outVar, `${selectedAttributePart}`));
  }

  statements.push(emitHtmlAppend(outVar, `">"`));

  if (isVoidHtmlElement(node.tagName)) {
    return statements;
  }

  const childSelectedValueCode = selectedValueCodeForChildren(node, attributeScan);
  const childSelectedMultipleCode = selectedMultipleCodeForChildren(node, attributeScan);

  const dangerousInnerHtml = emitDangerouslySetInnerHtmlExpression(
    node.attributes,
    emitHtmlExpressionFromChildren(
      node.children,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
    ),
  );
  if (dangerousInnerHtml !== undefined) {
    statements.push(emitHtmlAppend(outVar, `${dangerousInnerHtml}`));
    statements.push(emitHtmlAppend(outVar, `${stringLiteral(`</${node.tagName}>`)}`));
    return statements;
  }

  const childrenExpression = emitTextSeparatedSimpleChildrenExpression(
    node.children,
    escapeHelperName,
    escapeBatchHelperName,
  );

  if (
    childrenExpression !== undefined &&
    !(node.tagName === "select" && attributeScan.formValueAttributeCode !== undefined)
  ) {
    statements.push(emitHtmlAppend(outVar, `${childrenExpression}`));
  } else {
    withSelectedValueCode(childSelectedValueCode, childSelectedMultipleCode, () => {
      for (const child of node.children) {
        statements.push(
          ...collectHtmlStatements(
            child,
            outVar,
            escapeHelperName,
            escapeBatchHelperName,
            asyncComponentNames,
            dynamicAttributes,
            contextProviderHelperName,
            contextConsumerHelperName,
            reactNodeRenderHelperName,
          ),
        );
      }
    });
  }

  statements.push(emitHtmlAppend(outVar, `${stringLiteral(`</${node.tagName}>`)}`));

  return statements;
}

function hasDynamicSelectSelectionAttribute(
  node: Extract<JsxNodeIr, { kind: "element" }>,
): boolean {
  return (
    node.tagName === "select" &&
    !node.attributes.some((attr) => attr.kind === "spread-attr") &&
    node.attributes.some(
      (attr) =>
        attr.kind === "dynamic-attr" && (attr.name === "value" || attr.name === "defaultValue"),
    )
  );
}

function findDynamicOptionValueAttribute(
  node: Extract<JsxNodeIr, { kind: "element" }>,
): Extract<AttributeIr, { kind: "dynamic-attr" }> | undefined {
  if (node.tagName !== "option") return undefined;
  const valueAttribute = node.attributes.find(
    (attr) => attr.kind !== "spread-attr" && attr.name === "value",
  );
  return valueAttribute?.kind === "dynamic-attr" ? valueAttribute : undefined;
}

function emitBoundSelectExpression(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName: string | undefined,
  contextConsumerHelperName: string | undefined,
  reactNodeRenderHelperName: string | undefined,
  attributeScan: ElementAttributeScan,
): string {
  if (attributeScan.formValueAttributeCode === undefined) {
    return '""';
  }

  const selectValueName = currentOptionSelectedLocalNames.selectValue;
  const selectionCode =
    emitSelectSelectionValueCode(
      currentOptionSelectedLocalNames.selectValueAttribute,
      currentOptionSelectedLocalNames.selectDefaultValue,
    ) ?? "undefined";
  const attributeSetup = emitBoundSelectAttributeSetup(
    node,
    escapeHelperName,
    escapeBatchHelperName,
    dynamicAttributes,
  );
  const selectedMultipleCode =
    attributeScan.multipleAttributeCode === undefined
      ? undefined
      : currentOptionSelectedLocalNames.selectMultiple;
  const childrenHtml = withSelectedValueCode(selectValueName, selectedMultipleCode, () =>
    emitHtmlExpressionFromChildren(
      node.children,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
    ),
  );
  const innerHtml =
    emitDangerouslySetInnerHtmlExpression(node.attributes, childrenHtml) ?? childrenHtml;
  const isAsync = containsAsyncServerOperationInChildren(node.children, asyncComponentNames);
  const invocation = `${isAsync ? "(async () =>" : "(() =>"} { ${attributeSetup} const ${selectValueName} = (${selectionCode}); return ${joinHtmlExpressions([`${stringLiteral("<select")} + ${currentOptionSelectedLocalNames.attributes} + ">"`, `(${innerHtml})`, stringLiteral("</select>")], mayRenderDeferredChildren(node))}; })()`;
  return isAsync ? `(await ${invocation})` : invocation;
}

function emitBoundSelectAttributeSetup(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  dynamicAttributes: "drop" | "emit",
): string {
  const attributesName = currentOptionSelectedLocalNames.attributes;
  const valueAttributeName = currentOptionSelectedLocalNames.selectValueAttribute;
  const defaultValueName = currentOptionSelectedLocalNames.selectDefaultValue;
  const multipleName = currentOptionSelectedLocalNames.selectMultiple;
  const statements = [
    `let ${attributesName} = "";`,
    `let ${valueAttributeName};`,
    `let ${defaultValueName};`,
    `let ${multipleName};`,
  ];

  for (const attr of node.attributes) {
    if (attr.kind !== "spread-attr" && (attr.name === "value" || attr.name === "defaultValue")) {
      const valueCode = readFormValueAttributeCode(attr);
      if (valueCode !== undefined) {
        statements.push(
          `${attr.name === "value" ? valueAttributeName : defaultValueName} = ${valueCode};`,
        );
      }
      continue;
    }

    if (attr.kind !== "spread-attr" && attr.name === "multiple") {
      const multipleCode = readBooleanAttributeCode(attr);
      const parts = collectHtmlAttributeParts(
        node.tagName,
        attr,
        escapeHelperName,
        escapeBatchHelperName,
        dynamicAttributes,
        attr.kind === "dynamic-attr" ? `(${multipleName} = (${attr.code}))` : undefined,
      );
      statements.push(...parts.map((part) => `${attributesName} += ${part};`));
      if (
        multipleCode !== undefined &&
        (dynamicAttributes === "drop" || attr.kind !== "dynamic-attr")
      ) {
        statements.push(`${multipleName} = ${multipleCode};`);
      }
      continue;
    }

    const parts = collectHtmlAttributeParts(
      node.tagName,
      attr,
      escapeHelperName,
      escapeBatchHelperName,
      dynamicAttributes,
    );
    statements.push(...parts.map((part) => `${attributesName} += ${part};`));
  }

  return statements.join(" ");
}

function emitBoundOptionValueExpression(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName: string | undefined,
  contextConsumerHelperName: string | undefined,
  reactNodeRenderHelperName: string | undefined,
  attributeScan: ElementAttributeScan,
  valueAttribute: Extract<AttributeIr, { kind: "dynamic-attr" }>,
): string {
  const boundValueName = currentOptionSelectedLocalNames.boundOptionValue;
  const capturedOptionText = node.attributes.some(
    (attr) => attr.kind !== "spread-attr" && attr.name === "dangerouslySetInnerHTML",
  )
    ? undefined
    : findCapturedOptionText(node, escapeHelperName);
  const attributes = collectElementAttributeParts(
    node.tagName,
    node.attributes,
    escapeHelperName,
    escapeBatchHelperName,
    dynamicAttributes,
    attributeScan,
    valueAttribute,
    `(${boundValueName} = (${valueAttribute.code}))`,
  );
  const attributesCode = attributes.length === 0 ? '""' : attributes.join(" + ");
  const boundValueInitialization =
    dynamicAttributes === "drop" ? `${boundValueName} = (${valueAttribute.code});` : "";
  const selectedAttribute =
    collectOptionSelectedAttributePart(
      node,
      false,
      capturedOptionText?.valueCode,
      boundValueName,
    ) ?? '""';
  const innerHtml =
    capturedOptionText?.bodyCode ??
    emitDangerouslySetInnerHtmlExpression(
      node.attributes,
      emitHtmlExpressionFromChildren(
        node.children,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      ),
    ) ??
    emitHtmlExpressionFromChildren(
      node.children,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
    );
  const optionTextDeclaration = capturedOptionText?.declaration ?? "";
  const isAsync = containsAsyncServerOperationInChildren(node.children, asyncComponentNames);
  const invocation = `${isAsync ? "(async () =>" : "(() =>"} { let ${boundValueName}; const ${currentOptionSelectedLocalNames.attributes} = ${attributesCode}; ${boundValueInitialization} ${optionTextDeclaration} return ${joinHtmlExpressions([stringLiteral("<option"), currentOptionSelectedLocalNames.attributes, `(${selectedAttribute})`, stringLiteral(">"), `(${innerHtml})`, stringLiteral("</option>")], mayRenderDeferredChildren(node))}; })()`;
  return isAsync ? `(await ${invocation})` : invocation;
}

/**
 * Selection expression that this element's descendants compare against. A
 * `<select>` installs its own (possibly `undefined`, when it is uncontrolled) and
 * every other element simply passes the enclosing one through, so `<optgroup>`,
 * fragments, conditionals and list bodies keep the selection.
 */
function selectedValueCodeForChildren(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  attributeScan: ElementAttributeScan,
): string | undefined {
  if (node.tagName !== "select") {
    return currentSelectedValueCode;
  }

  return node.attributes.some((attr) => attr.kind === "spread-attr")
    ? currentSpreadSelectedValueName
    : attributeScan.formValueAttributeCode;
}

function selectedMultipleCodeForChildren(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  attributeScan: ElementAttributeScan,
): string | undefined {
  if (node.tagName !== "select") {
    return currentSelectedMultipleCode;
  }

  return node.attributes.some((attr) => attr.kind === "spread-attr")
    ? `${currentSpreadPropsName}.multiple`
    : attributeScan.multipleAttributeCode;
}

function collectHtmlParts(
  node: JsxNodeIr,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
): string[] {
  if (node.kind === "text") {
    return [stringLiteral(escapeHtml(node.value))];
  }

  if (node.kind === "expr") {
    if (isChildrenExpressionCode(node.code)) {
      return [
        `${currentRenderServerChildHelperName}(${node.code}, ${currentSelectedValueCode ?? "undefined"}, ${currentSelectedMultipleCode ?? "undefined"})`,
      ];
    }

    if (node.renderMode === "html") {
      return [rawHtmlExpression(node.code)];
    }

    if (node.renderMode === "react-node" && reactNodeRenderHelperName !== undefined) {
      return [`${reactNodeRenderHelperName}(() => (${node.code}))`];
    }

    if (node.renderMode === "compat-child" && currentCompatChildHelperName !== undefined) {
      return [`${currentCompatChildHelperName}(${node.code})`];
    }

    if (node.renderMode === "server-render-value") {
      return [
        `${currentRenderServerValueHelperName}(${node.code}, 0, ${currentSelectedValueCode ?? "undefined"}, ${currentSelectedMultipleCode ?? "undefined"})`,
      ];
    }

    return [`${escapeHelperName}(${node.code})`];
  }

  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.conditionValueName === undefined
        ? `((${node.conditionCode}) ? ${whenTrue} : ${whenFalse})`
        : `(() => { const ${node.conditionValueName} = (${node.conditionCode}); return ${node.conditionTestCode ?? node.conditionValueName} ? ${whenTrue} : ${whenFalse}; })()`,
    ];
  }

  if (node.kind === "list") {
    const isAsync = containsAsyncServerOperationInChildren(node.children, asyncComponentNames);

    if (isAsync) {
      // Async lists rely on Promise.all() for parallel resolution; the
      // callback allocation is amortized across `await` latency, so we keep
      // the `.map().then(...).join("")` form.
      const parameters = emitListParameters(node);
      const renderer = emitListRenderer(
        node,
        parameters,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      );
      const mapped = `(${node.itemsCode}).map(${renderer})`;
      return [`(await Promise.all(${mapped})).join("")`];
    }

    // 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,
      ),
    ];
  }

  if (node.kind === "fragment") {
    return node.children.flatMap((child) =>
      collectHtmlParts(
        child,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
      ),
    );
  }

  if (node.kind === "component") {
    if (node.name === "Suspense") {
      return [
        stringLiteral("<!--$-->"),
        ...node.children.flatMap((child) =>
          collectHtmlParts(
            child,
            escapeHelperName,
            escapeBatchHelperName,
            asyncComponentNames,
            dynamicAttributes,
            contextProviderHelperName,
            contextConsumerHelperName,
            reactNodeRenderHelperName,
          ),
        ),
        stringLiteral("<!--/$-->"),
      ];
    }

    if (contextProviderHelperName !== undefined && node.name.endsWith(".Provider")) {
      const valueCode = findComponentPropCode(node.props, "value") ?? "undefined";
      return [
        `${contextProviderHelperName}(${node.name}, ${valueCode}, () => ${emitHtmlExpressionFromChildren(node.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)})`,
      ];
    }

    if (contextConsumerHelperName !== undefined && node.name.endsWith(".Consumer")) {
      const renderProp = findComponentRenderProp(node.props, "children");

      if (renderProp !== undefined) {
        const valueName = renderProp.valueName ?? "_value";
        return [
          `${contextConsumerHelperName}(${node.name}, (${valueName}) => ${emitHtmlExpressionFromChildren(renderProp.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)})`,
        ];
      }
    }

    if (isClientBoundaryPlaceholder(node)) {
      const helperName = currentClientBoundaryHelperName;
      if (helperName !== undefined) {
        const hasComponentFallback = shouldRenderClientBoundaryFallback(node);
        const boundaryProps = emitPropsObject(
          node.props,
          [],
          escapeHelperName,
          escapeBatchHelperName,
          asyncComponentNames,
          dynamicAttributes,
          contextProviderHelperName,
          contextConsumerHelperName,
          reactNodeRenderHelperName,
          undefined,
          undefined,
          false,
        );
        const fallbackHtml = hasComponentFallback
          ? `(_childrenHtml) => ${emitComponentCallExpression(
              node.name,
              emitPropsObject(
                node.props,
                node.children,
                escapeHelperName,
                escapeBatchHelperName,
                asyncComponentNames,
                dynamicAttributes,
                contextProviderHelperName,
                contextConsumerHelperName,
                reactNodeRenderHelperName,
                node.name,
                "_childrenHtml",
                false,
              ),
              asyncComponentNames,
            )}`
          : emitHtmlExpressionFromChildren(
              node.children,
              escapeHelperName,
              escapeBatchHelperName,
              asyncComponentNames,
              dynamicAttributes,
              contextProviderHelperName,
              contextConsumerHelperName,
              reactNodeRenderHelperName,
            );
        const originalChildrenHtml = hasComponentFallback
          ? emitHtmlExpressionFromChildren(
              node.children,
              escapeHelperName,
              escapeBatchHelperName,
              asyncComponentNames,
              dynamicAttributes,
              contextProviderHelperName,
              contextConsumerHelperName,
              reactNodeRenderHelperName,
            )
          : undefined;
        return [
          `${helperName}(${stringLiteral(node.name)}, ${boundaryProps}, ${fallbackHtml}${originalChildrenHtml === undefined ? "" : `, true, ${originalChildrenHtml}, ${node.children.length > 0}`})`,
        ];
      }

      return [stringLiteral(clientBoundaryPlaceholder(node))];
    }

    if (node.runtime === "compat" && reactNodeRenderHelperName !== undefined) {
      return [
        `${reactNodeRenderHelperName}(${node.name}, ${emitCompatRuntimePropsObject(
          node.props,
          node.children,
          currentSelectedValueCode,
          currentSelectedMultipleCode,
        )})`,
      ];
    }

    return [
      emitComponentCallExpression(
        node.name,
        emitPropsObject(
          node.props,
          node.children,
          escapeHelperName,
          escapeBatchHelperName,
          asyncComponentNames,
          dynamicAttributes,
          contextProviderHelperName,
          contextConsumerHelperName,
          reactNodeRenderHelperName,
        ),
        asyncComponentNames,
      ),
    ];
  }

  if (node.kind === "async-boundary") {
    return [];
  }

  const closeTag = `</${node.tagName}>`;

  if (node.tagName === "textarea") {
    const attributeScan = scanElementAttributes(node.tagName, node.attributes);
    return [
      stringLiteral("<textarea"),
      ...collectElementAttributeParts(
        node.tagName,
        node.attributes,
        escapeHelperName,
        escapeBatchHelperName,
        dynamicAttributes,
        attributeScan,
      ),
      stringLiteral(">"),
      ...collectTextareaValueParts(
        node,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
        attributeScan,
      ),
      stringLiteral(closeTag),
    ];
  }

  const childrenExpression = emitTextSeparatedSimpleChildrenExpression(
    node.children,
    escapeHelperName,
    escapeBatchHelperName,
  );
  const attributeScan = scanElementAttributes(node.tagName, node.attributes);
  if (hasDynamicSelectSelectionAttribute(node)) {
    return [
      emitBoundSelectExpression(
        node,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
        attributeScan,
      ),
    ];
  }
  const childSelectedValueCode = selectedValueCodeForChildren(node, attributeScan);
  const childSelectedMultipleCode = selectedMultipleCodeForChildren(node, attributeScan);
  const forceChildWalk =
    node.tagName === "select" && attributeScan.formValueAttributeCode !== undefined;
  const selectedAttributePart = collectOptionSelectedAttributePart(
    node,
    node.attributes.some((attr) => attr.kind === "spread-attr"),
  );
  if (
    dynamicAttributes === "emit" &&
    !isVoidHtmlElement(node.tagName) &&
    node.attributes.some((attr) => attr.kind === "spread-attr")
  ) {
    const capturedOptionText =
      currentSelectedValueCode === undefined ||
      node.attributes.some(
        (attr) => attr.kind !== "spread-attr" && attr.name === "dangerouslySetInnerHTML",
      )
        ? undefined
        : findCapturedOptionText(node, escapeHelperName);
    const spreadSelectedAttributePart =
      capturedOptionText === undefined
        ? selectedAttributePart
        : collectOptionSelectedAttributePart(node, true, capturedOptionText.name);
    return [
      emitMergedSpreadElementExpression(
        node.tagName,
        node.attributes,
        attributeScan,
        withSelectedValueCode(childSelectedValueCode, childSelectedMultipleCode, () =>
          emitHtmlExpressionFromChildren(
            node.children,
            escapeHelperName,
            escapeBatchHelperName,
            asyncComponentNames,
            dynamicAttributes,
            contextProviderHelperName,
            contextConsumerHelperName,
            reactNodeRenderHelperName,
          ),
        ),
        spreadSelectedAttributePart,
        containsAsyncServerOperationInChildren(node.children, asyncComponentNames),
        capturedOptionText,
      ),
    ];
  }
  const dynamicOptionValueAttribute = findDynamicOptionValueAttribute(node);
  if (dynamicOptionValueAttribute !== undefined && currentSelectedValueCode !== undefined) {
    return [
      emitBoundOptionValueExpression(
        node,
        escapeHelperName,
        escapeBatchHelperName,
        asyncComponentNames,
        dynamicAttributes,
        contextProviderHelperName,
        contextConsumerHelperName,
        reactNodeRenderHelperName,
        attributeScan,
        dynamicOptionValueAttribute,
      ),
    ];
  }
  const capturedOptionExpression = emitCapturedOptionExpression(
    node,
    escapeHelperName,
    escapeBatchHelperName,
    dynamicAttributes,
    attributeScan,
  );
  if (capturedOptionExpression !== undefined) {
    return [capturedOptionExpression];
  }
  const dangerousInnerHtml = emitDangerouslySetInnerHtmlExpression(
    node.attributes,
    emitHtmlExpressionFromChildren(
      node.children,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
    ),
  );
  const childrenParts = isVoidHtmlElement(node.tagName)
    ? []
    : dangerousInnerHtml !== undefined
      ? [dangerousInnerHtml]
      : childrenExpression === undefined || forceChildWalk
        ? withSelectedValueCode(childSelectedValueCode, childSelectedMultipleCode, () =>
            node.children.flatMap((child) =>
              collectHtmlParts(
                child,
                escapeHelperName,
                escapeBatchHelperName,
                asyncComponentNames,
                dynamicAttributes,
                contextProviderHelperName,
                contextConsumerHelperName,
                reactNodeRenderHelperName,
              ),
            ),
          )
        : [childrenExpression];

  return [
    stringLiteral(`<${node.tagName}`),
    ...collectElementAttributeParts(
      node.tagName,
      node.attributes,
      escapeHelperName,
      escapeBatchHelperName,
      dynamicAttributes,
      attributeScan,
    ),
    ...(selectedAttributePart === undefined ? [] : [selectedAttributePart]),
    stringLiteral(">"),
    ...childrenParts,
    ...(isVoidHtmlElement(node.tagName) ? [] : [stringLiteral(closeTag)]),
  ];
}

function emitDangerouslySetInnerHtmlExpression(
  attrs: readonly AttributeIr[],
  fallbackCode: string,
): string | undefined {
  if (
    !attrs.some((attr) => attr.kind === "spread-attr" || attr.name === "dangerouslySetInnerHTML")
  ) {
    return undefined;
  }

  const assignments = attrs.flatMap((attr): string[] => {
    if (attr.kind === "spread-attr") {
      return [`${currentSpreadAttributesHelperName}$assign(_props, (${attr.code}) ?? {});`];
    }
    return attr.kind === "dynamic-attr" && attr.name === "dangerouslySetInnerHTML"
      ? [`_props.dangerouslySetInnerHTML = (${attr.code});`]
      : [];
  });
  return `(() => { const _props = {}; ${assignments.join(" ")} if (!Object.prototype.hasOwnProperty.call(_props, "dangerouslySetInnerHTML")) return ${fallbackCode}; return ${emitExactDangerouslySetInnerHtmlExpression("_props.dangerouslySetInnerHTML")}; })()`;
}

function emitMergedSpreadElementExpression(
  tagName: string,
  attrs: readonly AttributeIr[],
  attributeScan: ElementAttributeScan,
  fallbackCode: string,
  selectedAttributePart: string | undefined,
  asyncFallback: boolean,
  capturedOptionText?: CapturedOptionText,
): string {
  const propsName = currentSpreadPropsName;
  const omitSelectedCode =
    tagName === "option" && currentSelectedValueCode !== undefined
      ? `(${currentSelectedValueCode}) != null`
      : "false";
  const selectedValueDeclaration =
    tagName === "select"
      ? `const ${currentSpreadSelectedValueName} = ${emitSelectSelectionValueCode(`${propsName}.value`, `${propsName}.defaultValue`) ?? "undefined"};`
      : "";
  const assignments = emitMergedSpreadPropsAssignments(
    tagName,
    attrs,
    attributeScan,
    propsName,
    true,
  );
  const opening = `${stringLiteral(`<${tagName}`)} + ${currentSpreadAttributesHelperName}(${stringLiteral(tagName)}, ${propsName}, ${omitSelectedCode})${selectedAttributePart === undefined ? "" : ` + (${selectedAttributePart})`} + ">"`;
  const optionTextDeclaration =
    capturedOptionText === undefined ? "" : capturedOptionText.declaration;
  const innerHtml = `Object.prototype.hasOwnProperty.call(${propsName}, "dangerouslySetInnerHTML") ? ${emitExactDangerouslySetInnerHtmlExpression(`${propsName}.dangerouslySetInnerHTML`)} : (${fallbackCode})`;

  const invocation = `${asyncFallback ? "(async () =>" : "(() =>"} { const ${propsName} = {}; ${assignments.join(" ")} ${selectedValueDeclaration}${optionTextDeclaration} return ${joinHtmlExpressions([opening, `(${innerHtml})`, stringLiteral(`</${tagName}>`)])}; })()`;
  return asyncFallback ? `(await ${invocation})` : invocation;
}

function emitExactDangerouslySetInnerHtmlExpression(code: string): string {
  return `(() => { const _value = (${code}); if (typeof _value !== "object" || _value === null) return ""; try { const _descriptor = Object.getOwnPropertyDescriptor(_value, "__html"); return _descriptor !== undefined && "value" in _descriptor && typeof _descriptor.value === "string" ? _descriptor.value : ""; } catch { return ""; } })()`;
}

function collectHtmlAttributeParts(
  tagName: string,
  attr: AttributeIr,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  dynamicAttributes: "drop" | "emit",
  valueCodeOverride?: string,
): string[] {
  if (attr.kind === "dom-ref") {
    return [];
  }

  if (attr.kind === "spread-attr") {
    return dynamicAttributes === "drop"
      ? []
      : [`${currentSpreadAttributesHelperName}(${stringLiteral(tagName)}, (${attr.code}))`];
  }

  if (attr.kind === "event" || attr.name === "key" || attr.name === "dangerouslySetInnerHTML") {
    return [];
  }

  const htmlName = htmlAttributeNameForElement(tagName, attr.name);

  if (attr.kind === "static-attr") {
    // Reject literal `javascript:` / `data:` / etc. in JSX source. This
    // never produces a runtime branch because the value is known at
    // compile time -- we just drop the attribute (matching the dynamic
    // path) so a developer cannot statically introduce the same XSS.
    if (isUrlAttribute(htmlName) && isStaticUrlValueUnsafe(htmlName, attr.value)) {
      return [];
    }
    // Issue 077: a literal string value for `srcdoc` etc. can never be
    // the `{ __html: ... }` opt-in shape, so it is dropped at compile
    // time.
    if (isDangerousHtmlAttribute(htmlName)) {
      return [];
    }
    return [`${stringLiteral(` ${htmlName}="${escapeHtml(attr.value)}"`)}`];
  }

  if (dynamicAttributes === "drop") {
    return [];
  }

  const valueCode = valueCodeOverride ?? attr.code;

  if (attr.name === "style") {
    if (attr.serialization !== "compat" && attr.omitServerRenderValue === true) {
      return [
        emitDynamicStyleAttributeExpression(
          valueCode,
          escapeHelperName,
          escapeBatchHelperName,
          currentContainsServerRenderValueHelperName,
        ),
      ];
    }
    return [
      emitDynamicAttributeWithServerRenderValueOmission(
        attr,
        (code) =>
          attr.serialization === "compat"
            ? emitCompatDynamicStyleAttributeExpression(code, escapeHelperName)
            : emitDynamicStyleAttributeExpression(
                code,
                escapeHelperName,
                escapeBatchHelperName,
                attr.omitServerRenderValue === true
                  ? currentContainsServerRenderValueHelperName
                  : undefined,
              ),
        valueCode,
      ),
    ];
  }

  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 [
      emitDynamicAttributeWithServerRenderValueOmission(
        attr,
        (code) =>
          `(() => { const _value = (${code}); if (typeof _value !== "object" || _value === null) return ""; try { const _descriptor = Object.getOwnPropertyDescriptor(_value, "__html"); if (_descriptor !== undefined && "value" in _descriptor && typeof _descriptor.value === "string") return ${stringLiteral(` ${htmlName}="`)} + ${escapeHelperName}(_descriptor.value) + ${stringLiteral('"')}; return ""; } catch { return ""; } })()`,
        valueCode,
      ),
    ];
  }

  return [
    emitDynamicAttributeWithServerRenderValueOmission(
      attr,
      (code) =>
        attr.serialization === "compat" && !isUrlAttribute(htmlName)
          ? emitCompatDynamicAttributeExpression(htmlName, code, escapeHelperName)
          : emitDynamicAttributeExpression(htmlName, code, escapeHelperName),
      valueCode,
    ),
  ];
}

function emitDynamicAttributeWithServerRenderValueOmission(
  attr: Extract<AttributeIr, { kind: "dynamic-attr" }>,
  emit: (code: string) => string,
  valueCodeOverride?: string,
): string {
  const valueCode = valueCodeOverride ?? attr.code;
  if (attr.omitServerRenderValue !== true) {
    return emit(valueCode);
  }

  if (simpleSideEffectFreeExpression(valueCode)) {
    return `${currentContainsServerRenderValueHelperName}(${valueCode}) ? "" : (${emit(valueCode)})`;
  }

  const valueName = currentServerRenderAttributeValueName;
  return `(() => { const ${valueName} = (${valueCode}); return ${currentContainsServerRenderValueHelperName}(${valueName}) ? "" : (${emit(valueName)}); })()`;
}

function collectElementAttributeParts(
  tagName: string,
  attrs: readonly AttributeIr[],
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  dynamicAttributes: "drop" | "emit",
  attributeScan = scanElementAttributes(tagName, attrs),
  optionValueAttribute?: Extract<AttributeIr, { kind: "dynamic-attr" }>,
  optionValueCodeOverride?: string,
): string[] {
  if (dynamicAttributes === "emit" && attrs.some((attr) => attr.kind === "spread-attr")) {
    return [emitMergedSpreadAttributeExpression(tagName, attrs, attributeScan)];
  }

  return attrs.flatMap((attr) => {
    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")) ||
        isSuppressedOptionSelectedAttribute(tagName, attr.name))
    ) {
      return [];
    }

    return collectHtmlAttributeParts(
      tagName,
      attr,
      escapeHelperName,
      escapeBatchHelperName,
      dynamicAttributes,
      attr === optionValueAttribute ? optionValueCodeOverride : undefined,
    );
  });
}

function emitMergedSpreadAttributeExpression(
  tagName: string,
  attrs: readonly AttributeIr[],
  attributeScan: ElementAttributeScan,
): string {
  const propsName = currentSpreadPropsName;
  const statements = emitMergedSpreadPropsAssignments(
    tagName,
    attrs,
    attributeScan,
    propsName,
    false,
  );

  return `(() => { const ${propsName} = {}; ${statements.join(" ")} return ${currentSpreadAttributesHelperName}(${stringLiteral(tagName)}, ${propsName}); })()`;
}

function emitMergedSpreadPropsAssignments(
  tagName: string,
  attrs: readonly AttributeIr[],
  attributeScan: ElementAttributeScan,
  propsName: string,
  includeDangerouslySetInnerHtml: boolean,
): string[] {
  return attrs.flatMap((attr): string[] => {
    if (
      attr.kind !== "spread-attr" &&
      ((tagName === "input" &&
        ((attr.name === "defaultValue" && attributeScan.hasExplicitInputValue) ||
          (attr.name === "defaultChecked" && attributeScan.hasExplicitInputChecked))) ||
        (tagName === "textarea" && (attr.name === "value" || attr.name === "defaultValue")))
    ) {
      return [];
    }

    if (attr.kind === "spread-attr") {
      return [`${currentSpreadAttributesHelperName}$assign(${propsName}, (${attr.code}) ?? {});`];
    }

    if (attr.kind === "event" || attr.name === "key") {
      return [];
    }

    if (attr.name === "dangerouslySetInnerHTML" && !includeDangerouslySetInnerHtml) return [];

    const valueCode =
      attr.kind === "static-attr"
        ? stringLiteral(attr.value)
        : attr.kind === "dynamic-attr" && attr.omitServerRenderValue === true
          ? `(() => { const _value = (${attr.code}); return ${currentContainsServerRenderValueHelperName}(_value) ? undefined : _value; })()`
          : `(${attr.code})`;
    return [`${propsName}[${stringLiteral(attr.name)}] = ${valueCode};`];
  });
}

interface ElementAttributeScan {
  hasExplicitInputValue: boolean;
  hasExplicitInputChecked: boolean;
  formValueAttributeCode: string | undefined;
  multipleAttributeCode: string | undefined;
}

function scanElementAttributes(
  tagName: string,
  attrs: readonly AttributeIr[],
): ElementAttributeScan {
  let hasExplicitInputValue = false;
  let hasExplicitInputChecked = false;
  let valueAttributeCode: string | undefined;
  let defaultValueAttributeCode: string | undefined;
  let multipleAttributeCode: string | undefined;

  for (const attr of attrs) {
    if (attr.kind === "spread-attr") {
      continue;
    }

    if (tagName === "input") {
      if (attr.name === "value") {
        hasExplicitInputValue = true;
      } else if (attr.name === "checked") {
        hasExplicitInputChecked = true;
      }
    }

    if ((tagName === "textarea" || tagName === "select") && attr.name === "value") {
      valueAttributeCode = readFormValueAttributeCode(attr);
    } else if ((tagName === "textarea" || tagName === "select") && attr.name === "defaultValue") {
      defaultValueAttributeCode = readFormValueAttributeCode(attr);
    }

    if (tagName === "select" && attr.name === "multiple") {
      multipleAttributeCode = readBooleanAttributeCode(attr);
    }
  }

  return {
    hasExplicitInputValue,
    hasExplicitInputChecked,
    formValueAttributeCode:
      tagName === "select"
        ? emitSelectSelectionValueCode(valueAttributeCode, defaultValueAttributeCode)
        : (valueAttributeCode ?? defaultValueAttributeCode),
    multipleAttributeCode,
  };
}

function readFormValueAttributeCode(
  attr: Exclude<AttributeIr, { kind: "spread-attr" }>,
): string | undefined {
  if (attr.kind === "event") {
    return undefined;
  }

  return attr.kind === "static-attr" ? stringLiteral(attr.value) : `(${attr.code})`;
}

function readBooleanAttributeCode(
  attr: Exclude<AttributeIr, { kind: "spread-attr" }>,
): string | undefined {
  if (attr.kind === "event") {
    return undefined;
  }

  return attr.kind === "static-attr"
    ? attr.value === ""
      ? "true"
      : stringLiteral(attr.value)
    : `(${attr.code})`;
}

function emitDynamicAttributeExpression(
  name: string,
  code: string,
  escapeHelperName: string,
): string {
  const booleanishString = isBooleanishStringAttribute(name);

  if (isUrlAttribute(name)) {
    // Run the value through the inline URL safety helper. The helper
    // 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('"')}; })()`;
  }

  const inlineExpr = simpleSideEffectFreeExpression(code);

  if (inlineExpr !== undefined) {
    // Inline 3 evaluations to avoid per-attribute IIFE closure allocation.
    // Safe because `simpleSideEffectFreeExpression` only matches expressions
    // whose evaluation has no observable side effects (identifier read,
    // member chain, literal, this).
    return booleanishString
      ? `(${inlineExpr} == null ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr}) + ${stringLiteral('"')})`
      : `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral('"')})`;
  }

  return booleanishString
    ? `(() => { 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('"')}; })()`;
}

// Mirrors packages/react-compat/src/server-render.ts renderHtmlAttribute for
// dynamic values: functions and objects drop, booleans serialize as
// "true"/"false" for booleanish-string and data attributes, and false drops
// elsewhere. Byte parity with the interpreter is pinned by tests.
function emitCompatDynamicAttributeExpression(
  name: string,
  code: string,
  escapeHelperName: string,
): string {
  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('"')}; })()`;
}

// Mirrors packages/react-compat/src/server-render.ts renderStyleAttribute and
// renderCssValue: skips null/boolean/empty entries and appends px to nonzero
// numeric values outside the react unitless list.
function emitCompatDynamicStyleAttributeExpression(code: string, escapeHelperName: string): string {
  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: string,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  containsServerRenderValueHelperName?: string,
): string {
  const staticStyleExpression = emitStaticStyleObjectAttributeExpression(
    code,
    escapeHelperName,
    containsServerRenderValueHelperName,
  );

  if (staticStyleExpression !== undefined) {
    return staticStyleExpression;
  }

  const escapedPair =
    escapeBatchHelperName === undefined
      ? `${escapeHelperName}(_cssName) + ":" + ${escapeHelperName}(_styleValue === true ? "" : _styleValue)`
      : `(() => { const _escaped = ${escapeBatchHelperName}([_cssName, _styleValue === true ? "" : _styleValue]); return _escaped[0] + ":" + _escaped[1]; })()`;

  const renderValueGuard =
    containsServerRenderValueHelperName === undefined
      ? ""
      : ` if (_entries.some(([, _styleValue]) => ${containsServerRenderValueHelperName}(_styleValue))) return "";`;

  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 _entries = Object.entries(_value);${renderValueGuard} const _style = _entries.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: string,
  escapeHelperName: string,
  containsServerRenderValueHelperName?: string,
): string | undefined {
  const entries = parseStaticStyleObjectLiteral(code);

  if (entries === undefined) {
    return undefined;
  }

  if (entries.length === 0) {
    return `""`;
  }

  // Stage B — all values are compile-time literals: collapse to a single
  // constant string. null/false entries are dropped at build time.
  const literalEntries = entries.map((entry) => ({
    cssName: entry.cssName,
    literal: parseStyleLiteralValue(entry.valueCode),
  }));

  if (literalEntries.every((entry) => entry.literal !== undefined)) {
    const parts = literalEntries
      .filter((entry) => entry.literal !== null)
      .map((entry) => `${entry.cssName}:${escapeHtml(String(entry.literal))}`);

    if (parts.length === 0) {
      return `""`;
    }

    return stringLiteral(` style="${parts.join(";")}"`);
  }

  // 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});${containsServerRenderValueHelperName === undefined ? "" : ` if (${containsServerRenderValueHelperName}(_v)) return "";`} 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('"')}; })()`;
}

function collectTextareaValueParts(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
  attributeScan = scanElementAttributes(node.tagName, node.attributes),
): string[] {
  const valueCode = attributeScan.formValueAttributeCode;
  if (valueCode !== undefined) {
    return [`${escapeHelperName}(${valueCode})`];
  }

  return node.children.flatMap((child) =>
    collectHtmlParts(
      child,
      escapeHelperName,
      escapeBatchHelperName,
      asyncComponentNames,
      dynamicAttributes,
      contextProviderHelperName,
      contextConsumerHelperName,
      reactNodeRenderHelperName,
    ),
  );
}

function collectOptionSelectedAttributePart(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  useMergedSpreadFallback = false,
  textValueCodeOverride?: string,
  optionValueCodeOverride?: string,
): string | undefined {
  const selectedValueCode = currentSelectedValueCode;
  if (selectedValueCode === undefined || node.tagName !== "option") {
    return undefined;
  }

  const optionValueCode = findOptionValueCode(
    node,
    currentOptionSelectedLocalNames.textValue,
    node.attributes.some((attr) => attr.kind === "spread-attr")
      ? currentSpreadPropsName
      : undefined,
    textValueCodeOverride,
    optionValueCodeOverride,
  );
  return emitOptionSelectedAttributeCode(
    selectedValueCode,
    optionValueCode,
    useMergedSpreadFallback ? '""' : emitOwnSelectedFallbackCode(node),
    currentOptionSelectedLocalNames,
    currentSelectedMultipleCode,
  );
}

function emitCapturedOptionExpression(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  dynamicAttributes: "drop" | "emit",
  attributeScan: ElementAttributeScan,
): string | undefined {
  if (
    currentSelectedValueCode === undefined ||
    node.tagName !== "option" ||
    node.attributes.some((attr) => attr.kind === "spread-attr") ||
    node.attributes.some(
      (attr) => attr.kind !== "spread-attr" && attr.name === "dangerouslySetInnerHTML",
    )
  ) {
    return undefined;
  }

  const capturedOptionText = findCapturedOptionText(node, escapeHelperName);
  if (capturedOptionText === undefined) {
    return undefined;
  }

  const textValueName = capturedOptionText.name;
  const attributes = collectElementAttributeParts(
    node.tagName,
    node.attributes,
    escapeHelperName,
    escapeBatchHelperName,
    dynamicAttributes,
    attributeScan,
  );
  const attributesCode = attributes.length === 0 ? '""' : attributes.join(" + ");
  const optionValueCode = findOptionValueCode(
    node,
    textValueName,
    undefined,
    capturedOptionText.valueCode,
  );
  const selectedAttribute = emitOptionSelectedAttributeCode(
    currentSelectedValueCode,
    optionValueCode,
    emitOwnSelectedFallbackCode(node),
    currentOptionSelectedLocalNames,
    currentSelectedMultipleCode,
  );

  return `(() => { const ${currentOptionSelectedLocalNames.attributes} = ${attributesCode}; ${capturedOptionText.declaration} return ${stringLiteral("<option")} + ${currentOptionSelectedLocalNames.attributes} + (${selectedAttribute}) + ">" + ${capturedOptionText.bodyCode} + ${stringLiteral("</option>")}; })()`;
}

type CapturableOptionTextChild = Extract<JsxNodeIr, { kind: "text" | "expr" }>;

type CapturedOptionText = {
  name: string;
  valueCode: string;
  bodyCode: string;
  declaration: string;
};

function findCapturableOptionTextChildren(
  node: Extract<JsxNodeIr, { kind: "element" }>,
): CapturableOptionTextChild[] | undefined {
  let hasDynamicText = false;

  for (const child of node.children) {
    if (child.kind === "text") {
      continue;
    }

    if (
      child.kind === "expr" &&
      (child.renderMode === undefined ||
        child.renderMode === "dynamic" ||
        child.renderMode === "compiler-keyed-initial-text" ||
        child.renderMode === "compiler-keyed-cell-text" ||
        child.renderMode === "compiler-keyed-text") &&
      !isChildrenExpressionCode(child.code)
    ) {
      hasDynamicText = true;
      continue;
    }

    return undefined;
  }

  return hasDynamicText ? (node.children as CapturableOptionTextChild[]) : undefined;
}

function findCapturedOptionText(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  escapeHelperName: string,
): CapturedOptionText | undefined {
  const children = findCapturableOptionTextChildren(node);
  if (children === undefined) {
    return undefined;
  }

  const name = currentOptionSelectedLocalNames.textValue;
  const partsName = currentOptionSelectedLocalNames.textParts;
  const bodyName = currentOptionSelectedLocalNames.textBody;
  const hasTextName = currentOptionSelectedLocalNames.textHasValue;
  const indexName = currentOptionSelectedLocalNames.index;
  const parts = children.map((child) =>
    child.kind === "text" ? stringLiteral(child.value) : `String((${child.code}) ?? "")`,
  );
  const partsCode = `(${partsName} ??= [${parts.join(", ")}])`;
  return {
    name,
    valueCode: `(${name} ??= ${partsCode}.join(""))`,
    bodyCode: `(() => { let ${bodyName} = ""; let ${hasTextName} = false; for (const ${indexName} of ${partsCode}) { if (${indexName} !== "") { if (${hasTextName}) ${bodyName} += "<!-- -->"; ${bodyName} += ${escapeHelperName}(${indexName}); ${hasTextName} = true; } } return ${bodyName}; })()`,
    declaration: `let ${partsName}; let ${name};`,
  };
}

/**
 * `<option selected>` only decides the selection when the enclosing `<select>`
 * has none, so its attribute is dropped from the normal attribute list (see
 * `isSuppressedOptionSelectedAttribute`) and re-emitted here as the fallback
 * branch. Without that, a stale `selected` would survive next to the match.
 */
function emitOwnSelectedFallbackCode(node: Extract<JsxNodeIr, { kind: "element" }>): string {
  const selectedAttr = node.attributes.find(
    (attr) => attr.kind !== "spread-attr" && attr.name === "selected",
  );
  if (selectedAttr === undefined || selectedAttr.kind === "spread-attr") {
    return '""';
  }
  if (selectedAttr.kind === "static-attr") {
    return stringLiteral(' selected=""');
  }
  if (selectedAttr.kind !== "dynamic-attr") {
    return '""';
  }

  return `((_own) => _own == null || _own === false ? "" : ${stringLiteral(' selected=""')})(${selectedAttr.code})`;
}

/**
 * True while an `<option>`'s own `selected` attribute is folded into the
 * selection expression emitted by `collectOptionSelectedAttributePart`.
 */
function isSuppressedOptionSelectedAttribute(tagName: string, attributeName: string): boolean {
  return (
    tagName === "option" && attributeName === "selected" && currentSelectedValueCode !== undefined
  );
}

function findOptionValueCode(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  textValueName: string,
  mergedPropsName?: string,
  textValueCodeOverride?: string,
  optionValueCodeOverride?: string,
): string | undefined {
  const textValueCode = textValueCodeOverride ?? findOptionTextValueCode(node, textValueName);
  if (mergedPropsName !== undefined) {
    return textValueCode === undefined
      ? `${mergedPropsName}.value`
      : `(${mergedPropsName}.value ?? ${textValueCode})`;
  }

  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)
      : textValueCode === undefined
        ? `(${optionValueCodeOverride ?? valueAttr.code})`
        : `((${optionValueCodeOverride ?? valueAttr.code}) ?? ${textValueCode})`;
  }

  return textValueCode;
}

function findOptionTextValueCode(
  node: Extract<JsxNodeIr, { kind: "element" }>,
  textValueName: string,
): string | undefined {
  const textParts = node.children.map((child) => {
    if (child.kind === "text") {
      return stringLiteral(child.value);
    }
    if (
      child.kind === "expr" &&
      (child.renderMode === undefined ||
        child.renderMode === "dynamic" ||
        child.renderMode === "compiler-keyed-initial-text" ||
        child.renderMode === "compiler-keyed-cell-text" ||
        child.renderMode === "compiler-keyed-text")
    ) {
      return `String((${child.code}) ?? "")`;
    }
    return undefined;
  });

  if (textParts.some((part) => part === undefined)) {
    return undefined;
  }

  const parts = textParts as string[];
  return parts.length === 0
    ? stringLiteral("")
    : `(() => { const ${textValueName} = ${parts.join(" + ")}; return ${textValueName}; })()`;
}

function rawHtmlExpression(code: string): string {
  return `(() => { const _value = (${code}); return Array.isArray(_value) ? _value.join("") : String(_value ?? ""); })()`;
}

function emitTextSeparatedSimpleChildrenExpression(
  children: readonly JsxNodeIr[],
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
): string | undefined {
  if (children.length < 2) {
    return undefined;
  }

  const dynamicChildren = children.filter(
    (child) =>
      child.kind === "expr" &&
      child.renderMode !== "html" &&
      child.renderMode !== "react-node" &&
      child.renderMode !== "compat-child",
  ) as Array<Extract<JsxNodeIr, { kind: "expr" }>>;

  if (
    children.some(
      (child) =>
        child.kind !== "text" &&
        !(
          child.kind === "expr" &&
          child.renderMode !== "html" &&
          child.renderMode !== "react-node" &&
          child.renderMode !== "compat-child"
        ),
    )
  ) {
    return undefined;
  }

  const useBatch =
    escapeBatchHelperName !== undefined &&
    dynamicChildren.length >= 2 &&
    dynamicChildren.every((child) => child.renderMode !== "server-render-value");
  const values = dynamicChildren.map((child) => child.code);
  let dynamicIndex = 0;
  const pieces = children.map((child) => {
    if (child.kind === "text") {
      return stringLiteral(escapeHtml(child.value));
    }

    const index = dynamicIndex;
    dynamicIndex += 1;
    const expressionChild = child as Extract<JsxNodeIr, { kind: "expr" }>;

    return useBatch
      ? `_escaped[${index}]`
      : expressionChild.renderMode === "server-render-value"
        ? `${currentRenderServerValueHelperName}(${expressionChild.code}, 0, ${currentSelectedValueCode ?? "undefined"}, ${currentSelectedMultipleCode ?? "undefined"})`
        : `${escapeHelperName}(${expressionChild.code})`;
  });
  if (dynamicChildren.some((child) => child.renderMode === "server-render-value")) {
    if (pieces.length === 1) return pieces[0];
    return `${currentJoinServerHtmlHelperName}([${pieces.join(", ")}], "<!-- -->")`;
  }
  const appendStatements = pieces.map(
    (piece) =>
      `{ const _text = ${piece}; if (_text !== "") { if (_hasText) _textOut += "<!-- -->"; _textOut += _text; _hasText = true; } }`,
  );
  const batchStatement = useBatch
    ? `const _escaped = ${escapeBatchHelperName}([${values.join(", ")}]); `
    : "";

  return `(() => { ${batchStatement}let _textOut = ""; let _hasText = false; ${appendStatements.join(" ")} return _textOut; })()`;
}

function emitHtmlExpressionFromChildren(
  children: JsxNodeIr[],
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
): string {
  if (children.length === 0) {
    return '""';
  }

  return emitHtmlExpression(
    { kind: "fragment", children },
    escapeHelperName,
    escapeBatchHelperName,
    asyncComponentNames,
    dynamicAttributes,
    contextProviderHelperName,
    contextConsumerHelperName,
    reactNodeRenderHelperName,
  );
}

function emitSyncListIife(
  node: Extract<JsxNodeIr, { kind: "list" }>,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
): string {
  const valueExpression = emitHtmlExpressionFromChildren(
    node.children,
    escapeHelperName,
    escapeBatchHelperName,
    asyncComponentNames,
    dynamicAttributes,
    contextProviderHelperName,
    contextConsumerHelperName,
    reactNodeRenderHelperName,
  );
  const itemPattern =
    node.parameterPatterns === undefined ? node.itemName : node.parameterPatterns[0];
  const itemBinding = itemPattern === undefined ? "" : `const ${itemPattern} = _arr[_i];`;
  const indexPattern = node.parameterPatterns?.[1] ?? node.indexName;
  const arrayPattern = node.parameterPatterns?.[2] ?? node.arrayName;
  const indexBinding = indexPattern === undefined ? "" : ` const ${indexPattern} = _i;`;
  const arrayBinding = arrayPattern === undefined ? "" : ` const ${arrayPattern} = _arr;`;
  const bodyStatements =
    node.bodyStatements === undefined || node.bodyStatements.length === 0
      ? ""
      : ` ${node.bodyStatements.join(" ")}`;

  return `(() => { let _o = ""; const _arr = (${node.itemsCode}); for (let _i = 0, _len = _arr.length; _i < _len; _i++) { ${itemBinding}${indexBinding}${arrayBinding}${bodyStatements} ${node.children.some(mayRenderDeferredChildren) ? `_o = ${currentAppendServerHtmlHelperName}(_o, ${valueExpression});` : `_o += ${valueExpression};`} } return _o; })()`;
}

function emitListRenderer(
  node: Extract<JsxNodeIr, { kind: "list" }>,
  parameters: string,
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
): string {
  const valueExpression = emitHtmlExpressionFromChildren(
    node.children,
    escapeHelperName,
    escapeBatchHelperName,
    asyncComponentNames,
    dynamicAttributes,
    contextProviderHelperName,
    contextConsumerHelperName,
    reactNodeRenderHelperName,
  );
  const asyncKeyword = containsAsyncServerOperationInChildren(node.children, asyncComponentNames)
    ? "async "
    : "";

  if (node.bodyStatements === undefined || node.bodyStatements.length === 0) {
    return `${asyncKeyword}(${parameters}) => ${valueExpression}`;
  }

  return `${asyncKeyword}(${parameters}) => {\n${node.bodyStatements.map((statement) => `    ${statement}`).join("\n")}\n    return ${valueExpression};\n  }`;
}

function emitListParameters(node: Extract<JsxNodeIr, { kind: "list" }>): string {
  if (node.parameterPatterns !== undefined) {
    return node.parameterPatterns.join(", ");
  }

  return [node.itemName, node.indexName, node.arrayName]
    .filter((name): name is string => name !== undefined)
    .join(", ");
}

function emitPropsObject(
  props: ComponentPropIr[],
  children: JsxNodeIr[] = [],
  escapeHelperName: string,
  escapeBatchHelperName: string | undefined,
  asyncComponentNames: ReadonlySet<string>,
  dynamicAttributes: "drop" | "emit",
  contextProviderHelperName?: string,
  contextConsumerHelperName?: string,
  reactNodeRenderHelperName?: string,
  componentName?: string,
  childrenExpressionOverride?: string,
  selectionContextAllowed = true,
): string {
  const entries = props.map((prop) => {
    if (prop.kind === "spread-prop") {
      const code =
        prop.serverRenderValuePlaceholder === undefined
          ? prop.code
          : prop.code.replaceAll(
              prop.serverRenderValuePlaceholder,
              currentMarkServerRenderValueHelperName,
            );
      return `...(${code})`;
    }

    if (prop.kind === "render-prop") {
      return `${emitPropName(prop.name)}: ${currentMarkServerRenderValueHelperName}(${emitHtmlExpressionFromChildren(prop.children, escapeHelperName, escapeBatchHelperName, asyncComponentNames, dynamicAttributes, contextProviderHelperName, contextConsumerHelperName, reactNodeRenderHelperName)})`;
    }

    const code =
      prop.serverRenderValuePlaceholder !== undefined
        ? prop.code.replaceAll(
            prop.serverRenderValuePlaceholder,
            currentMarkServerRenderValueHelperName,
          )
        : prop.code;
    return `${emitPropName(prop.name)}: (${code})`;
  });

  if (children.length > 0) {
    const directChildrenExpression =
      childrenExpressionOverride === undefined &&
      !isRouterLinkComponentName(componentName) &&
      children.length === 1 &&
      children[0]?.kind === "expr" &&
      isChildrenExpressionCode(children[0].code)
        ? children[0].code
        : undefined;
    if (directChildrenExpression !== undefined) {
      entries.push(`children: ${directChildrenExpression}`);
    } else {
      const shouldDeferChildren =
        childrenExpressionOverride === undefined &&
        !isRouterLinkComponentName(componentName) &&
        children.some(needsLazyServerChildren);
      const selectionAwareChildren = shouldDeferChildren;
      const childrenExpression =
        childrenExpressionOverride ??
        (selectionAwareChildren
          ? withSelectedValueCode(
              currentSelectionParameterName,
              currentSelectionMultipleParameterName,
              () =>
                emitHtmlExpressionFromChildren(
                  children,
                  escapeHelperName,
                  escapeBatchHelperName,
                  asyncComponentNames,
                  dynamicAttributes,
                  contextProviderHelperName,
                  contextConsumerHelperName,
                  reactNodeRenderHelperName,
                ),
            )
          : emitHtmlExpressionFromChildren(
              children,
              escapeHelperName,
              escapeBatchHelperName,
              asyncComponentNames,
              dynamicAttributes,
              contextProviderHelperName,
              contextConsumerHelperName,
              reactNodeRenderHelperName,
            ));
      if (selectionAwareChildren) {
        const childRenderValue = `${containsAsyncServerOperationInChildren(children, asyncComponentNames) ? "async " : ""}(${currentSelectionParameterName}, ${currentSelectionMultipleParameterName}) => (${childrenExpression})`;
        entries.push(`children: ${currentMarkServerRenderThunkHelperName}(${childRenderValue})`);
      } else {
        entries.push(
          `children: ${isRouterLinkComponentName(componentName) ? `${componentName}.trustedHtml(${childrenExpression})` : childrenExpression}`,
        );
      }
    }
  }

  const object = `{ ${entries.join(", ")} }`;
  return !selectionContextAllowed ||
    currentSelectedValueCode === undefined ||
    isRouterLinkComponentName(componentName)
    ? object
    : `Object.defineProperty(Object.defineProperty(${object}, Symbol.for(${JSON.stringify(serverSelectionContextKey)}), { value: ${currentSelectedValueCode} }), Symbol.for(${JSON.stringify(serverSelectionMultipleContextKey)}), { value: ${currentSelectedMultipleCode} })`;
}

/**
 * Reports whether a tag name is bound to the router `Link` export in this module.
 *
 * The set comes from the module's import declarations, so a renamed import still
 * answers yes and a module-local component named `Link` answers no. Spelling
 * cannot decide this: the paths gated on it require the export's own
 * `trustedHtml` helper and its single-argument overload.
 */
function isRouterLinkComponentName(name: string | undefined): name is string {
  return name !== undefined && currentRouterLinkComponentNames.has(name);
}

function needsLazyServerChildren(node: JsxNodeIr): boolean {
  if (node.kind === "expr" && node.renderMode === "server-render-value") return true;
  if (node.kind === "component" || node.kind === "element") {
    return true;
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(needsLazyServerChildren);
  }

  if (node.kind === "list") {
    return node.children.some(needsLazyServerChildren);
  }

  if (node.kind === "fragment") {
    return node.children.some(needsLazyServerChildren);
  }

  if (node.kind === "async-boundary") {
    return [
      ...node.children,
      ...(node.placeholderChildren ?? []),
      ...(node.catchChildren ?? []),
    ].some(needsLazyServerChildren);
  }

  return false;
}

function isChildrenExpressionCode(code: string): boolean {
  const trimmed = code.trim();
  return (
    trimmed === "children" ||
    trimmed.endsWith(".children") ||
    trimmed.endsWith('["children"]') ||
    trimmed.endsWith("['children']")
  );
}

function mayRenderDeferredChildren(node: JsxNodeIr): boolean {
  if (node.kind === "component")
    return !isRouterLinkComponentName(node.name) || node.children.some(mayRenderDeferredChildren);
  if (node.kind === "expr")
    return isChildrenExpressionCode(node.code) || node.renderMode === "server-render-value";
  if (node.kind === "conditional")
    return [...node.whenTrue, ...node.whenFalse].some(mayRenderDeferredChildren);
  if (
    node.kind === "element" ||
    node.kind === "fragment" ||
    node.kind === "list" ||
    node.kind === "async-boundary"
  )
    return node.children.some(mayRenderDeferredChildren);
  return false;
}

function emitHtmlAppend(
  outVar: string,
  value: string,
  promiseAware = currentPromiseAwareComposition,
): string {
  return promiseAware
    ? `${outVar} = ${currentAppendServerHtmlHelperName}(${outVar}, ${value});`
    : `${outVar} += ${value};`;
}

function joinHtmlExpressions(
  parts: string[],
  promiseAware = currentPromiseAwareComposition,
): string {
  if (parts.length === 0) return '""';
  return promiseAware
    ? parts.reduce((left, right) => `${currentAppendServerHtmlHelperName}(${left}, ${right})`)
    : parts.join(" + ");
}

function emitJoinServerHtmlHelper(name: string): string {
  return [
    `function ${currentAppendServerHtmlHelperName}(left, right) {`,
    `  if (typeof left === "string" && typeof right === "string") return left + right;`,
    `  if ((left != null && typeof left.then === "function") || (right != null && typeof right.then === "function")) return Promise.all([left, right]).then((parts) => parts.join(""));`,
    `  return left + right;`,
    `}`,
    `function ${name}(parts, separator = "") {`,
    `  if (parts.some((part) => part != null && typeof part.then === "function")) return Promise.all(parts).then((resolved) => ${name}(resolved, separator));`,
    `  return (separator === "" ? parts : parts.filter((part) => part !== "")).join(separator);`,
    `}`,
  ].join("\n");
}

function emitServerChildHelper(
  name: string,
  escapeHelperName: string,
  isServerRenderValueHelperName?: string,
  readServerRenderValueHelperName?: string,
  renderServerValueHelperName?: string,
): string {
  const renderRegisteredValue =
    isServerRenderValueHelperName === undefined ||
    readServerRenderValueHelperName === undefined ||
    renderServerValueHelperName === undefined
      ? undefined
      : `if (${isServerRenderValueHelperName}(value)) return ${renderServerValueHelperName}(value, 0, arguments[1], arguments[2]);`;
  const renderArray = `if (Array.isArray(value)) return ${renderServerValueHelperName}(value, 0, arguments[1], arguments[2]);`;
  return [
    `function ${name}(value) {`,
    `  if (value == null || typeof value === "boolean") return "";`,
    ...(renderRegisteredValue === undefined ? [] : [`  ${renderRegisteredValue}`]),
    `  if (typeof value === "function") {`,
    `    if (value[Symbol.for(${JSON.stringify(serverSelectionRenderValueKey)})] === true) return value(arguments[1], arguments[2]);`,
    `    return value();`,
    `  }`,
    `  ${renderArray}`,
    `  return ${escapeHelperName}(value);`,
    `}`,
  ].join("\n");
}

function emitCompatRuntimePropsObject(
  props: ComponentPropIr[],
  children: JsxNodeIr[] = [],
  selectedValueCode?: string,
  selectedMultipleCode?: string,
): string {
  const entries = props.map((prop) => {
    if (prop.kind === "spread-prop") {
      const code =
        prop.serverRenderValuePlaceholder === undefined
          ? prop.code
          : prop.code.replaceAll(
              prop.serverRenderValuePlaceholder,
              currentMarkServerRenderValueHelperName,
            );
      return `...(${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)}`);
  }

  const object = `{ ${entries.join(", ")} }`;
  return selectedValueCode === undefined
    ? object
    : `Object.defineProperty(Object.defineProperty(${object}, Symbol.for(${JSON.stringify(serverSelectionContextKey)}), { value: ${selectedValueCode} }), Symbol.for(${JSON.stringify(serverSelectionMultipleContextKey)}), { value: ${selectedMultipleCode} })`;
}

function emitComponentCallExpression(
  name: string,
  propsCode: string,
  asyncComponentNames: ReadonlySet<string>,
): string {
  const call = `${name}(${propsCode})`;
  return emitRenderableHtmlExpression(asyncComponentNames.has(name) ? `(await ${call})` : call);
}

function emitRenderableHtmlExpression(code: string): string {
  return `((_value) => _value == null || typeof _value === "boolean" ? "" : _value)(${code})`;
}

function isClientBoundaryPlaceholder(node: Extract<JsxNodeIr, { kind: "component" }>): boolean {
  return node.clientReference !== undefined;
}

function shouldRenderClientBoundaryFallback(
  node: Extract<JsxNodeIr, { kind: "component" }>,
): boolean {
  return node.clientReference?.ssrFallback === true;
}

function clientBoundaryPlaceholder(node: Extract<JsxNodeIr, { kind: "component" }>): string {
  return `<!--mreact-client-boundary:${escapeHtml(node.name)}-->`;
}

function collectAsyncServerComponentNames(components: readonly ComponentIr[]): Set<string> {
  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)) {
        names.add(component.name);
        changed = true;
      }
    }
  }

  return names;
}

function containsAsyncServerOperationInChildren(
  children: readonly JsxNodeIr[],
  asyncComponentNames: ReadonlySet<string>,
): boolean {
  return children.some((child) => containsAsyncServerOperation(child, asyncComponentNames));
}

function containsAsyncServerOperation(
  node: JsxNodeIr,
  asyncComponentNames: ReadonlySet<string>,
): boolean {
  if (node.kind === "async-boundary") {
    return true;
  }

  if (node.kind === "component") {
    return (
      asyncComponentNames.has(node.name) ||
      containsAsyncServerOperationInChildren(node.children, asyncComponentNames) ||
      node.props.some(
        (prop) =>
          prop.kind === "render-prop" &&
          containsAsyncServerOperationInChildren(prop.children, asyncComponentNames),
      )
    );
  }

  if (node.kind === "conditional") {
    return containsAsyncServerOperationInChildren(
      [...node.whenTrue, ...node.whenFalse],
      asyncComponentNames,
    );
  }

  if (node.kind === "list") {
    return containsAsyncServerOperationInChildren(node.children, asyncComponentNames);
  }

  if (node.kind === "element" || node.kind === "fragment") {
    return containsAsyncServerOperationInChildren(node.children, asyncComponentNames);
  }

  return false;
}

function containsServerSelectionContext(ir: ModuleIr): boolean {
  return ir.components.some((component) => containsServerSelectionContextInNode(component.root));
}

function containsServerSelectionContextInNode(node: JsxNodeIr): boolean {
  if (node.kind === "expr") {
    return isChildrenExpressionCode(node.code);
  }

  if (node.kind === "element") {
    return (
      node.tagName === "select" ||
      node.tagName === "option" ||
      node.children.some(containsServerSelectionContextInNode)
    );
  }

  if (node.kind === "component") {
    return (
      node.children.some(containsServerSelectionContextInNode) ||
      node.props.some(
        (prop) =>
          prop.kind === "render-prop" && prop.children.some(containsServerSelectionContextInNode),
      )
    );
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(containsServerSelectionContextInNode);
  }

  if (node.kind === "list" || node.kind === "fragment") {
    return node.children.some(containsServerSelectionContextInNode);
  }

  if (node.kind === "async-boundary") {
    return [
      ...node.children,
      ...(node.placeholderChildren ?? []),
      ...(node.catchChildren ?? []),
    ].some(containsServerSelectionContextInNode);
  }

  return false;
}

function emitPropName(name: string): string {
  return /^[A-Za-z_$][\w$]*$/.test(name) ? name : JSON.stringify(name);
}

function allocateEscapeHelperName(ir: ModuleIr): string {
  return allocateHelperName(ir, "_escapeHtml");
}

function allocateHelperName(ir: ModuleIr, baseName: string): string {
  const reservedNames = new Set<string>(ir.moduleBindingNames);

  for (const component of ir.components) {
    reservedNames.add(component.name);

    for (const bindingName of component.bindingNames) {
      reservedNames.add(bindingName);
    }
  }

  let name = baseName;
  let index = 1;

  while (reservedNames.has(name)) {
    name = `${baseName}$${index}`;
    index += 1;
  }

  return name;
}

function allocateNestedBindingSafeName(ir: ModuleIr, baseName: string): string {
  const serializedIr = JSON.stringify(ir);
  let name = allocateHelperName(ir, baseName);
  let index = name === baseName ? 1 : Number(name.slice(baseName.length + 1)) + 1;

  while (
    new RegExp(`(?<![A-Za-z0-9_$])${name.replaceAll("$", "\\$")}(?![A-Za-z0-9_$])`).test(
      serializedIr,
    )
  ) {
    name = allocateHelperName(ir, `${baseName}$${index}`);
    index += 1;
  }

  return name;
}

function allocateHelperFamilyName(
  ir: ModuleIr,
  baseName: string,
  suffixes: readonly string[],
): string {
  const serializedIr = JSON.stringify(ir);
  let index = 0;

  while (true) {
    const candidate = index === 0 ? baseName : `${baseName}$${index}`;
    const names = [candidate, ...suffixes.map((suffix) => `${candidate}${suffix}`)];

    if (
      names.every(
        (name) =>
          !new RegExp(`(?<![A-Za-z0-9_$])${name.replaceAll("$", "\\$")}(?![A-Za-z0-9_$])`).test(
            serializedIr,
          ),
      )
    ) {
      return candidate;
    }

    index += 1;
  }
}

function emitServerRenderValueHelpers(
  isHelperName: string,
  readHelperName: string,
  containsHelperName: string,
  renderHelperName: string,
  escapeHelperName: string,
): string {
  return [
    `function ${containsHelperName}(value) {`,
    `  const pending = [value];`,
    `  const seen = new Set();`,
    `  while (pending.length > 0) {`,
    `    const current = pending.pop();`,
    `    if (${isHelperName}(current)) return true;`,
    `    if ((typeof current !== "object" && typeof current !== "function") || current === null) continue;`,
    `    if (seen.has(current)) continue;`,
    `    seen.add(current);`,
    `    if (Array.isArray(current)) {`,
    `      try {`,
    `        for (let index = 0; index < current.length; index += 1) pending.push(current[index]);`,
    `      } catch { return true; }`,
    `      continue;`,
    `    }`,
    `    let descriptors;`,
    `    try { descriptors = Object.getOwnPropertyDescriptors(current); } catch { return true; }`,
    `    for (const descriptor of Object.values(descriptors)) {`,
    `      if ("value" in descriptor) pending.push(descriptor.value);`,
    `    }`,
    `  }`,
    `  return false;`,
    `}`,
    `function ${renderHelperName}(value, depth = 0, selectedValue, selectedMultiple) {`,
    `  if (depth > 256) throw new Error("mreact render value is too deep: exceeded 256 levels");`,
    `  if (value == null || typeof value === "boolean") return "";`,
    `  if (Array.isArray(value)) {`,
    `    const rendered = [];`,
    `    for (let index = 0; index < value.length; index += 1) rendered.push(${renderHelperName}(value[index], depth + 1, selectedValue, selectedMultiple));`,
    `    return ${currentJoinServerHtmlHelperName}(rendered);`,
    `  }`,
    `  if (${isHelperName}(value)) {`,
    `    const rendered = ${readHelperName}(value);`,
    `    if (typeof rendered === "function" && rendered === value) return rendered(selectedValue, selectedMultiple);`,
    `    return rendered;`,
    `  }`,
    `  return ${escapeHelperName}(value);`,
    `}`,
  ].join("\n");
}

function usesContextProvider(ir: ModuleIr): boolean {
  return ir.components.some((component) => containsContextProvider(component.root));
}

function usesContextConsumer(ir: ModuleIr): boolean {
  return ir.components.some((component) => containsContextConsumer(component.root));
}

function usesReactNodeRender(ir: ModuleIr): boolean {
  return ir.components.some(
    (component) =>
      containsReactNodeRender(component.root) ||
      component.bodyStatements.some((statement) =>
        statement.includes(oxcServerStringReactNodeRenderHelperPlaceholder),
      ),
  );
}

function replaceOxcServerStringReactNodeRenderHelper(
  code: string,
  helperName: string | undefined,
): string {
  return helperName === undefined
    ? code
    : code.replaceAll(oxcServerStringReactNodeRenderHelperPlaceholder, helperName);
}

function usesClientBoundary(ir: ModuleIr): boolean {
  return ir.components.some((component) => containsClientBoundary(component.root));
}

function usesCompatChildRender(ir: ModuleIr): boolean {
  return ir.components.some((component) => containsCompatChildRender(component.root));
}

function containsCompatChildRender(node: JsxNodeIr): boolean {
  if (node.kind === "expr") {
    return node.renderMode === "compat-child";
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(containsCompatChildRender);
  }

  if (node.kind === "list" || 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);
  }

  if (node.kind === "component") {
    return node.children.some(containsCompatChildRender);
  }

  return false;
}

function emitClientBoundaryHelper(name: string, isServerRenderValueHelperName?: string): string {
  const propsHelperName = `${name}$hasNonSerializableProps`;
  const markChildrenHelperName = `${name}$markChildren`;

  return [
    `function ${propsHelperName}(value) {`,
    `  const pending = [value];`,
    `  const seen = new Set();`,
    `  while (pending.length > 0) {`,
    `    const current = pending.pop();`,
    ...(isServerRenderValueHelperName === undefined
      ? []
      : [`    if (${isServerRenderValueHelperName}(current)) return true;`]),
    `    if (typeof current === "function" || typeof current === "symbol" || typeof current === "bigint") return true;`,
    `    if (current === null || typeof current !== "object") continue;`,
    `    if (seen.has(current)) continue;`,
    `    seen.add(current);`,
    `    if (Array.isArray(current)) {`,
    `      try {`,
    `        for (let index = 0; index < current.length; index += 1) pending.push(current[index]);`,
    `      } catch { return true; }`,
    `      continue;`,
    `    }`,
    `    let descriptors;`,
    `    try { descriptors = Object.getOwnPropertyDescriptors(current); } catch { return true; }`,
    `    for (const descriptor of Object.values(descriptors)) {`,
    `      if (descriptor.enumerable !== true) continue;`,
    `      if (!("value" in descriptor)) return true;`,
    `      pending.push(descriptor.value);`,
    `    }`,
    `  }`,
    `  return false;`,
    `}`,
    `function ${markChildrenHelperName}(fallbackHtml, childrenHtml, startMarker, endMarker) {`,
    `  if (childrenHtml === "") return undefined;`,
    `  const _start = fallbackHtml.indexOf(childrenHtml);`,
    `  if (_start === -1 || fallbackHtml.indexOf(childrenHtml, _start + childrenHtml.length) !== -1) return undefined;`,
    `  const _end = _start + childrenHtml.length;`,
    `  const _opening = /<([a-z][a-z0-9:-]*)(?:\\s[^<>]*)?>$/i.exec(fallbackHtml.slice(0, _start));`,
    `  const _closing = /^<\\/([a-z][a-z0-9:-]*)\\s*>/i.exec(fallbackHtml.slice(_end));`,
    `  if (_opening === null || _closing === null || _opening[1].toLowerCase() !== _closing[1].toLowerCase()) return undefined;`,
    `  if (["iframe", "noembed", "noframes", "noscript", "plaintext", "script", "style", "template", "textarea", "title", "xmp"].includes(_opening[1].toLowerCase())) return undefined;`,
    `  return fallbackHtml.slice(0, _start) + startMarker + childrenHtml + endMarker + fallbackHtml.slice(_end);`,
    `}`,
    emitCompatSsrBoundaryHelper(name),
    `function ${name}(name, props, fallbackHtml = "", componentFallback = false, originalChildrenHtml = "", hasOriginalChildren = false, compatSsr = false) {`,
    `  if (compatSsr) return ${name}$compat(name, props, fallbackHtml, originalChildrenHtml, hasOriginalChildren);`,
    `  const _name = String(name);`,
    `  const _escapedName = _name.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");`,
    `  const _props = props ?? {};`,
    `  let _nonSerializable = ${propsHelperName}(_props);`,
    `  const _componentFallbackAttr = componentFallback ? ' data-mreact-client-boundary-fallback="component"' : "";`,
    `  const _startMarker = "<!--mreact-client-boundary-children-start-->";`,
    `  const _endMarker = "<!--mreact-client-boundary-children-end-->";`,
    `  const _fallbackHtml = String(componentFallback && typeof fallbackHtml === "function" ? fallbackHtml(originalChildrenHtml) : fallbackHtml);`,
    `  const _markedFallbackHtml = componentFallback ? ${markChildrenHelperName}(_fallbackHtml, originalChildrenHtml, _startMarker, _endMarker) : undefined;`,
    `  const childrenHtml = _markedFallbackHtml ?? _fallbackHtml;`,
    `  const _childrenArchive = componentFallback && hasOriginalChildren && _markedFallbackHtml === undefined ? '<template data-mreact-client-boundary-children="' + _escapedName + '">' + _startMarker + originalChildrenHtml + _endMarker + '</template>' : "";`,
    `  let _jsonValue = "{}";`,
    `  if (!_nonSerializable) { try { _jsonValue = JSON.stringify(_props) ?? "{}"; } catch { _nonSerializable = true; _jsonValue = "{}"; } }`,
    `  const _nonSerializableAttr = _nonSerializable ? ' data-mreact-client-boundary-nonserializable="true"' : "";`,
    `  const _json = _jsonValue`,
    `    .replaceAll("&", "\\\\u0026")`,
    `    .replaceAll("<", "\\\\u003c")`,
    `    .replaceAll(">", "\\\\u003e")`,
    `    .replaceAll("\\u2028", "\\\\u2028")`,
    `    .replaceAll("\\u2029", "\\\\u2029");`,
    `  return \`<template data-mreact-client-boundary="\${_escapedName}"\${_nonSerializableAttr}\${_componentFallbackAttr}></template>\${childrenHtml}\${_childrenArchive}<script type="application/json" data-mreact-client-boundary-props="\${_escapedName}">\${_json}</script>\`;`,
    `}`,
  ].join("\n");
}

function emitSpreadAttributesHelper(
  name: string,
  escapeHelperName: string,
  urlSafeHelperName: string,
  isServerRenderValueHelperName?: string,
): string {
  const aliases = JSON.stringify({
    acceptCharset: "accept-charset",
    autoFocus: "autofocus",
    autoPlay: "autoplay",
    charSet: "charset",
    className: "class",
    colSpan: "colspan",
    contentEditable: "contenteditable",
    crossOrigin: "crossorigin",
    encType: "enctype",
    formAction: "formaction",
    frameBorder: "frameborder",
    htmlFor: "for",
    httpEquiv: "http-equiv",
    maxLength: "maxlength",
    minLength: "minlength",
    noValidate: "novalidate",
    playsInline: "playsinline",
    readOnly: "readonly",
    rowSpan: "rowspan",
    spellCheck: "spellcheck",
    imageSrcSet: "imagesrcset",
    srcDoc: "srcdoc",
    srcSet: "srcset",
    tabIndex: "tabindex",
    useMap: "usemap",
  });
  const urlAttributes = JSON.stringify([
    "href",
    "src",
    "action",
    "formaction",
    "xlink:href",
    "ping",
    "poster",
    "background",
    "manifest",
    "data",
    "codebase",
    "srcset",
    "imagesrcset",
  ]);
  const dangerousAttributes = JSON.stringify(["srcdoc"]);

  return [
    `const ${name}$aliases = ${aliases};`,
    `const ${name}$urlAttributes = new Set(${urlAttributes});`,
    `const ${name}$dangerousAttributes = new Set(${dangerousAttributes});`,
    `function ${name}$html(value) {`,
    `  try {`,
    `    if (typeof value !== "object" || value === null) return undefined;`,
    `    const _descriptor = Object.getOwnPropertyDescriptor(value, "__html");`,
    `    return _descriptor !== undefined && "value" in _descriptor && typeof _descriptor.value === "string" ? _descriptor.value : undefined;`,
    `  } catch { return undefined; }`,
    `}`,
    `function ${name}$assign(target, source) {`,
    `  for (const _rawName of Object.keys(source)) {`,
    `    if (_rawName === "key" || _rawName === "ref" || _rawName === "domRef" || _rawName === "children" || /^on/i.test(_rawName)) continue;`,
    `    if (_rawName === "__proto__") Object.defineProperty(target, _rawName, { configurable: true, enumerable: true, value: source[_rawName], writable: true });`,
    `    else target[_rawName] = source[_rawName];`,
    `  }`,
    `}`,
    `function ${name}$style(value) {`,
    `  if (value == null || value === false) return "";`,
    `  if (typeof value === "string") return value;`,
    `  let _style = "";`,
    `  for (const _styleName of Object.keys(value)) {`,
    `    const _styleValue = value[_styleName];`,
    `    if (_styleValue == null || _styleValue === false) continue;`,
    `    const _cssName = String(_styleName).startsWith("--") ? String(_styleName) : String(_styleName).replace(/[A-Z]/g, (_char) => "-" + _char.toLowerCase());`,
    `    _style += (_style === "" ? "" : ";") + _cssName + ":" + (_styleValue === true ? "" : String(_styleValue));`,
    `  }`,
    `  return _style;`,
    `}`,
    `function ${name}(tagName, props, omitSelected) {`,
    `  if (props == null || props === false) return "";`,
    `  let _out = "";`,
    `  for (const _rawName of Object.keys(props)) {`,
    `    if (_rawName === "key" || _rawName === "ref" || _rawName === "domRef" || _rawName === "children" || _rawName === "dangerouslySetInnerHTML") continue;`,
    `    if (/^on/i.test(_rawName)) continue;`,
    `    if (omitSelected && tagName === "option" && _rawName === "selected") continue;`,
    `    if (tagName === "select" && (_rawName === "value" || _rawName === "defaultValue")) continue;`,
    `    let _value = props[_rawName];`,
    `    if (_value == null) continue;`,
    ...(isServerRenderValueHelperName === undefined
      ? []
      : [`    if (${isServerRenderValueHelperName}(_value)) continue;`]),
    `    let _name = tagName === "input" && _rawName === "defaultValue" ? "value" : tagName === "input" && _rawName === "defaultChecked" ? "checked" : (Object.hasOwn(${name}$aliases, _rawName) ? ${name}$aliases[_rawName] : _rawName);`,
    `    if (!/^[A-Za-z_:][A-Za-z0-9:_.-]*$/.test(_name)) continue;`,
    `    const _lowerName = _name.toLowerCase();`,
    `    const _booleanish = _lowerName.startsWith("aria-") || _lowerName.startsWith("data-") || _lowerName === "autocapitalize" || _lowerName === "contenteditable" || _lowerName === "draggable" || _lowerName === "spellcheck" || _lowerName === "translate";`,
    `    if (_value === false && !_booleanish) continue;`,
    `    if (_name === "style") {`,
    `      const _style = ${name}$style(_value);`,
    `      if (_style !== "") _out += " style=\\"" + ${escapeHelperName}(_style) + "\\"";`,
    `      continue;`,
    `    }`,
    `    if (${name}$dangerousAttributes.has(_lowerName)) {`,
    `      const _html = ${name}$html(_value);`,
    `      if (_html !== undefined) {`,
    `        _out += " " + _name + "=\\"" + ${escapeHelperName}(_html) + "\\"";`,
    `      }`,
    `      continue;`,
    `    }`,
    `    if (${name}$urlAttributes.has(_lowerName)) {`,
    `      _value = ${urlSafeHelperName}(_name, _value === true ? "" : _value);`,
    `      if (_value === undefined) continue;`,
    `    }`,
    `    _out += " " + _name + "=\\"" + ${escapeHelperName}(_value === true && !_booleanish ? "" : _value) + "\\"";`,
    `  }`,
    `  return _out;`,
    `}`,
  ].join("\n");
}

function containsClientBoundary(node: JsxNodeIr): boolean {
  if (node.kind === "component" && isClientBoundaryPlaceholder(node)) {
    return true;
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(containsClientBoundary);
  }

  if (node.kind === "list") {
    return node.children.some(containsClientBoundary);
  }

  if (node.kind === "fragment" || node.kind === "element") {
    return node.children.some(containsClientBoundary);
  }

  if (node.kind === "component") {
    return (
      node.children.some(containsClientBoundary) ||
      node.props.some(
        (prop) => prop.kind === "render-prop" && prop.children.some(containsClientBoundary),
      )
    );
  }

  if (node.kind === "async-boundary") {
    return (
      node.children.some(containsClientBoundary) ||
      node.placeholderChildren?.some(containsClientBoundary) === true ||
      node.catchChildren?.some(containsClientBoundary) === true
    );
  }

  return false;
}

function containsReactNodeRender(node: JsxNodeIr): boolean {
  if (node.kind === "expr") {
    return node.renderMode === "react-node";
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(containsReactNodeRender);
  }

  if (node.kind === "list") {
    return node.children.some(containsReactNodeRender);
  }

  if (node.kind === "fragment" || node.kind === "element") {
    return node.children.some(containsReactNodeRender);
  }

  if (node.kind === "component") {
    if (node.clientReference?.compatSsr === true || (node.runtime === "compat" && !isClientBoundaryPlaceholder(node))) {
      return true;
    }

    return (
      node.children.some(containsReactNodeRender) ||
      node.props.some(
        (prop) => prop.kind === "render-prop" && prop.children.some(containsReactNodeRender),
      )
    );
  }

  if (node.kind === "async-boundary") {
    return (
      node.children.some(containsReactNodeRender) ||
      node.placeholderChildren?.some(containsReactNodeRender) === true ||
      node.catchChildren?.some(containsReactNodeRender) === true
    );
  }

  return false;
}

function containsContextProvider(node: JsxNodeIr): boolean {
  if (node.kind === "component" && node.name.endsWith(".Provider")) {
    return true;
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(containsContextProvider);
  }

  if (node.kind === "list") {
    return node.children.some(containsContextProvider);
  }

  if (node.kind === "fragment" || node.kind === "element") {
    return node.children.some(containsContextProvider);
  }

  if (node.kind === "component") {
    return (
      node.children.some(containsContextProvider) ||
      node.props.some(
        (prop) => prop.kind === "render-prop" && prop.children.some(containsContextProvider),
      )
    );
  }

  return false;
}

function containsContextConsumer(node: JsxNodeIr): boolean {
  if (node.kind === "component" && node.name.endsWith(".Consumer")) {
    return true;
  }

  if (node.kind === "conditional") {
    return [...node.whenTrue, ...node.whenFalse].some(containsContextConsumer);
  }

  if (node.kind === "list") {
    return node.children.some(containsContextConsumer);
  }

  if (node.kind === "fragment" || node.kind === "element") {
    return node.children.some(containsContextConsumer);
  }

  if (node.kind === "component") {
    return (
      node.children.some(containsContextConsumer) ||
      node.props.some(
        (prop) => prop.kind === "render-prop" && prop.children.some(containsContextConsumer),
      )
    );
  }

  return false;
}

function findComponentPropCode(
  props: readonly ComponentPropIr[],
  name: string,
): string | undefined {
  for (const prop of props) {
    if (prop.kind === "prop" && prop.name === name) {
      return prop.code;
    }
  }

  return undefined;
}

function findComponentRenderProp(
  props: readonly ComponentPropIr[],
  name: string,
): Extract<ComponentPropIr, { kind: "render-prop" }> | undefined {
  for (const prop of props) {
    if (prop.kind === "render-prop" && prop.name === name) {
      return prop;
    }
  }

  return undefined;
}

function stringLiteral(value: string): string {
  return JSON.stringify(value);
}