@barefootjs/jsx 0.26.2 → 0.26.3

package/dist/index.js

@@ -250,6 +250,7 @@ var UNSUPPORTED_METHODS = new Set([
   "some",
   "forEach",
   "flatMap",
+  "fill",
   "charAt",
   "charCodeAt",
   "codePointAt",
@@ -3380,6 +3381,41 @@ function buildSpreadAttrsMergeCall(args) {
 function itemAnchorTemplate(keyExpr) {
   return `<!--${loopItemMarker("${" + keyExpr + "}")}-->`;
 }
+function renderPreamble(preamble, opts) {
+  let out = "";
+  for (const seg of preamble.segments) {
+    if (seg.kind === "js") {
+      const text = opts.textVariant === "template" ? seg.templateText ?? seg.text : seg.text;
+      out += opts.transformJs ? opts.transformJs(text) : text;
+    } else {
+      out += "`" + opts.renderLeaf(escapeLeafTextExpressions(seg.ir)) + "`";
+    }
+  }
+  return out;
+}
+function escapeLeafTextExpressions(ir) {
+  switch (ir.type) {
+    case "element":
+      return { ...ir, children: ir.children.map(escapeLeafTextExpressions) };
+    case "fragment":
+      return { ...ir, children: ir.children.map(escapeLeafTextExpressions) };
+    case "expression": {
+      if (ir.expr === "null" || ir.expr === "undefined")
+        return ir;
+      if (ir.slotId || ir.expr.trimStart().startsWith("escapeText("))
+        return ir;
+      return { ...ir, expr: `escapeText((${ir.expr}))`, templateExpr: ir.templateExpr ? `escapeText((${ir.templateExpr}))` : ir.templateExpr };
+    }
+    case "conditional":
+      return {
+        ...ir,
+        whenTrue: escapeLeafTextExpressions(ir.whenTrue),
+        whenFalse: ir.whenFalse ? escapeLeafTextExpressions(ir.whenFalse) : ir.whenFalse
+      };
+    default:
+      return ir;
+  }
+}
 function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, branchSlotsVar, insideLoop = false, inHoistedChildren = false) {
   const recurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, inHoistedChildren);
   const wrapExpr = (expr) => wrapExprWithLoopParams(expr, loopParams);
@@ -3421,15 +3457,17 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
     }
     case "text":
       return escapeHtml(node.value);
-    case "expression":
+    case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
+      const inner = wrapInterpolation(wrapExpr(node.expr));
+      const valueExpr = node.joinArrayChild ? `Array.isArray(${inner}) ? ${inner}.join('') : (${inner} ?? '')` : inner;
       if (node.slotId) {
-        const inner = wrapInterpolation(wrapExpr(node.expr));
-        const slotted = branchSlotsVar ? inner : escapeTextSlotExpr(inner);
+        const slotted = branchSlotsVar || node.joinArrayChild ? valueExpr : escapeTextSlotExpr(valueExpr);
         return `<!--bf:${node.slotId}-->\${${slotted}}<!--/-->`;
       }
-      return `\${${wrapInterpolation(wrapExpr(node.expr))}}`;
+      return `\${${valueExpr}}`;
+    }
     case "conditional": {
       const trueBranch = recurse(node.whenTrue);
       const falseBranch = recurse(node.whenFalse);
@@ -3488,14 +3526,13 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       const iterMethod = node.method ?? "map";
       let mapExpr;
       if (node.flatMapCallback) {
-        let body = node.flatMapCallback.templateBody ?? node.flatMapCallback.body;
-        for (const frag of node.flatMapCallback.fragments) {
-          const renderedIr = irToHtmlTemplate(frag.ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop);
-          body = body.replace(frag.placeholder, `\`${renderedIr}\``);
-        }
+        const body = renderPreamble(node.flatMapCallback, {
+          renderLeaf: (ir) => irToHtmlTemplate(ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop)
+        });
         mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
-      } else if (node.mapPreamble) {
-        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${node.mapPreamble} return \`${childTemplate}\` }).join('')}`;
+      } else if (node.preamble) {
+        const preamble = renderPreamble(node.preamble, { textVariant: "client", renderLeaf: (ir) => irToHtmlTemplate(ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop) });
+        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`;
       } else {
         mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`;
       }
@@ -3743,13 +3780,16 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
     }
     case "text":
       return escapeHtml(node.value);
-    case "expression":
+    case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
+      const wrapped = wrapExpr(node.expr);
+      const value = node.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : wrapped;
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(wrapExpr(node.expr))}}<!--/-->`;
+        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped)}}<!--/-->`;
       }
-      return `\${${wrapExpr(node.expr)}}`;
+      return `\${${value}}`;
+    }
     case "conditional": {
       const trueBranch = recurse(node.whenTrue);
       const falseBranch = recurse(node.whenFalse);
@@ -3776,14 +3816,13 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
       const iterMethod = node.method ?? "map";
       let mapExpr;
       if (node.flatMapCallback) {
-        let body = node.flatMapCallback.templateBody ?? node.flatMapCallback.body;
-        for (const frag of node.flatMapCallback.fragments) {
-          const renderedIr = irToPlaceholderTemplate(frag.ir, restSpreadNames, loopDepth + 1, loopParams);
-          body = body.replace(frag.placeholder, `\`${renderedIr}\``);
-        }
+        const body = renderPreamble(node.flatMapCallback, {
+          renderLeaf: (ir) => irToPlaceholderTemplate(ir, restSpreadNames, loopDepth + 1, loopParams)
+        });
         mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
-      } else if (node.mapPreamble) {
-        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${node.mapPreamble} return \`${childTemplate}\` }).join('')}`;
+      } else if (node.preamble) {
+        const preamble = renderPreamble(node.preamble, { textVariant: "client", renderLeaf: (ir) => irToPlaceholderTemplate(ir, restSpreadNames, loopDepth + 1, loopParams) });
+        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`;
       } else {
         mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`;
       }
@@ -3971,13 +4010,16 @@ function irToComponentTemplateWithOpts(node, opts) {
     }
     case "text":
       return escapeHtml(node.value);
-    case "expression":
+    case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
+      const wrapped = transformExpr(node.expr, node.templateExpr);
+      const value = node.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : wrapped;
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(transformExpr(node.expr, node.templateExpr))}}<!--/-->`;
+        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped)}}<!--/-->`;
       }
-      return `\${${transformExpr(node.expr, node.templateExpr)}}`;
+      return `\${${value}}`;
+    }
     case "conditional": {
       if (node.clientOnly && node.slotId) {
         return `<!--bf-cond-start:${node.slotId}--><!--bf-cond-end:${node.slotId}-->`;
@@ -4298,10 +4340,11 @@ function generateCsrTemplateWithOpts(node, opts) {
       {
         const transformed = transformExpr(node.expr, node.templateExpr);
         const expr = transformed === UNSAFE_TEMPLATE_EXPR ? "''" : transformed;
+        const value = node.joinArrayChild ? `Array.isArray(${expr}) ? ${expr}.join('') : (${expr} ?? '')` : expr;
         if (node.slotId) {
-          return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(expr)}}<!--/-->`;
+          return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr)}}<!--/-->`;
         }
-        return `\${${expr}}`;
+        return `\${${value}}`;
       }
     case "conditional": {
       if (node.clientOnly && node.slotId) {
@@ -4397,16 +4440,14 @@ function generateCsrTemplateWithOpts(node, opts) {
       const iterMethod = node.method ?? "map";
       let mapExpr;
       if (node.flatMapCallback) {
-        let body = node.flatMapCallback.templateBody ?? node.flatMapCallback.body;
-        for (const frag of node.flatMapCallback.fragments) {
-          const renderedIr = recurseInLoopBody(frag.ir);
-          body = body.replace(frag.placeholder, `\`${renderedIr}\``);
-        }
-        body = applyPropsRewrite(body, propsObjectName ?? null);
+        const body = renderPreamble(node.flatMapCallback, {
+          textVariant: "template",
+          transformJs: (t) => applyPropsRewrite(t, propsObjectName ?? null),
+          renderLeaf: (ir) => recurseInLoopBody(ir)
+        });
         mapExpr = `\${${iterArrayExpr}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
-      } else if (node.mapPreamble) {
-        const rawPreamble = node.templateMapPreamble ?? node.mapPreamble;
-        const preamble = applyPropsRewrite(rawPreamble, propsObjectName ?? null);
+      } else if (node.preamble) {
+        const preamble = renderPreamble(node.preamble, { textVariant: "template", transformJs: (t) => applyPropsRewrite(t, propsObjectName ?? null), renderLeaf: (ir) => recurseInLoopBody(ir) });
         mapExpr = `\${${iterArrayExpr}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`;
       } else {
         mapExpr = `\${${iterArrayExpr}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`;
@@ -4561,6 +4602,39 @@ function reconstructWithoutTypes(node, sourceFile, ranges) {
   }
   return result;
 }
+function reconstructAsSegments(node, sourceFile, ranges, markers) {
+  const nodeStart = node.getStart(sourceFile);
+  const nodeEnd = node.getEnd();
+  const fullText = sourceFile.text;
+  const edits = [];
+  for (const r of ranges) {
+    if (r.end <= nodeStart || r.start >= nodeEnd)
+      continue;
+    edits.push({ start: r.start, end: r.end, marker: null });
+  }
+  markers.forEach((m, i) => edits.push({ start: m.start, end: m.end, marker: i }));
+  edits.sort((a, b) => a.start - b.start || b.end - a.end);
+  const segments = [];
+  let jsBuf = "";
+  let pos = nodeStart;
+  for (const edit of edits) {
+    if (edit.start < pos)
+      continue;
+    jsBuf += fullText.slice(pos, edit.start);
+    if (edit.marker !== null) {
+      if (jsBuf)
+        segments.push({ js: jsBuf });
+      jsBuf = "";
+      segments.push({ marker: edit.marker });
+    }
+    pos = edit.end;
+  }
+  if (pos < nodeEnd)
+    jsBuf += fullText.slice(pos, nodeEnd);
+  if (jsBuf)
+    segments.push({ js: jsBuf });
+  return segments;
+}
 function mergeRanges(ranges) {
   if (ranges.length === 0)
     return [];
@@ -4706,10 +4780,11 @@ function findAngleBracketAfter(lastTypeArg, fullText) {
 }
 
 // src/analyzer-context.ts
-function createAnalyzerContext(sourceFile, filePath) {
+function createAnalyzerContext(sourceFile, filePath, acceptsCallbackBody) {
   return {
     sourceFile,
     filePath,
+    acceptsCallbackBody,
     componentName: null,
     componentNode: null,
     hasDefaultExport: false,
@@ -4755,6 +4830,9 @@ function createAnalyzerContext(sourceFile, filePath) {
       } catch {
         ownSourceFile = undefined;
       }
+      if (process.env.BF_ASSERT_NO_JSX_IN_GETJS === "1" && this.errors.length === 0 && nodeContainsJsx(node)) {
+        throw new Error("getJS() called on a JSX-bearing node — raw JSX must never be spliced " + "into emitted output. Carry mixed content as structured segments " + "(MapCallbackPreamble / FlatMapCallback) instead.");
+      }
       if (ownSourceFile && ownSourceFile !== sourceFile) {
         return node.getText(ownSourceFile);
       }
@@ -4762,6 +4840,11 @@ function createAnalyzerContext(sourceFile, filePath) {
     }
   };
 }
+function nodeContainsJsx(node) {
+  if (ts7.isJsxElement(node) || ts7.isJsxSelfClosingElement(node) || ts7.isJsxFragment(node))
+    return true;
+  return ts7.forEachChild(node, nodeContainsJsx) ?? false;
+}
 function getSourceLocation(node, sourceFile, filePath) {
   const start = sourceFile.getLineAndCharacterOfPosition(node.getStart());
   const end = sourceFile.getLineAndCharacterOfPosition(node.getEnd());
@@ -5564,7 +5647,7 @@ function createProgramForFile(source, filePath) {
     return null;
   }
 }
-function analyzeComponent(source, filePath, targetComponentName, program) {
+function analyzeComponent(source, filePath, targetComponentName, program, acceptsCallbackBody) {
   incrementCounter("filesAnalyzed");
   const hadSharedProgram = program !== undefined;
   const prescan = prescanReactiveFactoriesInSource(source, filePath);
@@ -5597,7 +5680,7 @@ function analyzeComponent(source, filePath, targetComponentName, program) {
       checker = result.checker;
     }
   }
-  const ctx = createAnalyzerContext(sourceFile, filePath);
+  const ctx = createAnalyzerContext(sourceFile, filePath, acceptsCallbackBody);
   ctx.checker = checker;
   ctx.reactiveFactories = prescan.factories;
   ctx.declinedReactiveFactories = prescan.declined;
@@ -6649,9 +6732,15 @@ function extractSingleJsxReturn(body) {
     return null;
   return jsxReturn;
 }
-function extractMultiReturnJsxBranches(body) {
+function preambleUnsafe(preamble, branches, fallback) {
+  if (preamble.length === 0)
+    return false;
+  return fallback === null || branches.some((b) => b.jsxReturn === null);
+}
+function extractMultiReturnJsxBranches(body, allowPreamble = false) {
   const branches = [];
   let fallback = null;
+  const preamble = [];
   const stmts = body.statements;
   for (let i = 0;i < stmts.length; i++) {
     const stmt = stmts[i];
@@ -6681,7 +6770,9 @@ function extractMultiReturnJsxBranches(body) {
           }
           if (branches.length === 0)
             return null;
-          return { branches, fallback };
+          if (preambleUnsafe(preamble, branches, fallback))
+            return null;
+          return { branches, fallback, preamble };
         }
         break;
       }
@@ -6696,23 +6787,38 @@ function extractMultiReturnJsxBranches(body) {
       const hasDefault = stmt.caseBlock.clauses.some((c) => ts8.isDefaultClause(c));
       if (!hasDefault)
         return null;
+      let pendingCases = [];
       for (const clause of stmt.caseBlock.clauses) {
+        if (ts8.isCaseClause(clause) && clause.statements.length === 0) {
+          pendingCases.push(clause.expression);
+          continue;
+        }
         const jsxReturn = findJsxReturnInCaseClause(clause);
         const nullReturn = findNullReturnInCaseClause(clause);
         if (!jsxReturn && !nullReturn)
           return null;
+        if (!caseClauseIsDirectReturn(clause))
+          return null;
         if (ts8.isCaseClause(clause)) {
           branches.push({
             condition: clause.expression,
-            jsxReturn: jsxReturn ?? null
+            jsxReturn: jsxReturn ?? null,
+            extraCaseConditions: pendingCases.length > 0 ? pendingCases : undefined
           });
+          pendingCases = [];
         } else {
+          if (pendingCases.length > 0)
+            return null;
           fallback = jsxReturn ?? null;
         }
       }
+      if (pendingCases.length > 0)
+        return null;
       if (branches.length === 0)
         return null;
-      return { branches, fallback, switchDiscriminant: stmt.expression };
+      if (preambleUnsafe(preamble, branches, fallback))
+        return null;
+      return { branches, fallback, switchDiscriminant: stmt.expression, preamble };
     }
     if (ts8.isReturnStatement(stmt) && stmt.expression) {
       const expr = unwrapJsxTransparent(stmt.expression);
@@ -6723,13 +6829,22 @@ function extractMultiReturnJsxBranches(body) {
       }
       continue;
     }
-    if (ts8.isVariableStatement(stmt))
+    if (ts8.isVariableStatement(stmt)) {
+      const declFlags = stmt.declarationList.flags;
+      const isConstOrLet = (declFlags & ts8.NodeFlags.Const) !== 0 || (declFlags & ts8.NodeFlags.Let) !== 0;
+      if (allowPreamble && isConstOrLet && branches.length === 0 && fallback === null) {
+        preamble.push(stmt);
+        continue;
+      }
       return null;
+    }
     return null;
   }
   if (branches.length === 0)
     return null;
-  return { branches, fallback };
+  if (preambleUnsafe(preamble, branches, fallback))
+    return null;
+  return { branches, fallback, preamble };
 }
 function isDirectReturnBlock(node) {
   if (ts8.isReturnStatement(node))
@@ -6739,9 +6854,9 @@ function isDirectReturnBlock(node) {
     for (const stmt of node.statements) {
       if (ts8.isReturnStatement(stmt)) {
         returnCount++;
-      } else if (ts8.isIfStatement(stmt) || ts8.isSwitchStatement(stmt) || ts8.isForStatement(stmt) || ts8.isForOfStatement(stmt) || ts8.isForInStatement(stmt) || ts8.isWhileStatement(stmt) || ts8.isDoStatement(stmt) || ts8.isTryStatement(stmt)) {
-        return false;
+        continue;
       }
+      return false;
     }
     return returnCount === 1;
   }
@@ -6772,6 +6887,24 @@ function findJsxReturnInCaseClause(clause) {
   }
   return null;
 }
+function caseClauseIsDirectReturn(clause) {
+  let returnCount = 0;
+  let seenReturn = false;
+  for (const stmt of clause.statements) {
+    if (ts8.isReturnStatement(stmt)) {
+      returnCount++;
+      seenReturn = true;
+      continue;
+    }
+    if (ts8.isBreakStatement(stmt)) {
+      if (!seenReturn)
+        return false;
+      continue;
+    }
+    return false;
+  }
+  return returnCount === 1;
+}
 function findNullReturnInCaseClause(clause) {
   for (const stmt of clause.statements) {
     if (ts8.isReturnStatement(stmt) && stmt.expression) {
@@ -8812,6 +8945,23 @@ var REACTIVE_BINDING_KINDS = new Set([
 function isReactiveOrigin(origin) {
   return origin.freeRefs?.some((r) => REACTIVE_BINDING_KINDS.has(r.kind)) ?? false;
 }
+function tsxSourceText(raw) {
+  return raw;
+}
+function preambleAnalysisText(p) {
+  let out = "";
+  for (const seg of p.segments)
+    if (seg.kind === "js")
+      out += seg.text;
+  return out;
+}
+function preambleAnalysisTemplateText(p) {
+  let out = "";
+  for (const seg of p.segments)
+    if (seg.kind === "js")
+      out += seg.templateText ?? seg.text;
+  return out;
+}
 var AttrValueOf = {
   literal(value) {
     return { kind: "literal", value };
@@ -10051,8 +10201,13 @@ function attachParsedExpressions(node, analyzer, bound = EMPTY_BOUND) {
         for (const child of nested.children)
           attachParsedExpressions(child, analyzer, loopBound);
       }
-      for (const frag of node.flatMapCallback?.fragments ?? []) {
-        attachParsedExpressions(frag.ir, analyzer, loopBound);
+      for (const seg of node.flatMapCallback?.segments ?? []) {
+        if (seg.kind === "jsx")
+          attachParsedExpressions(seg.ir, analyzer, loopBound);
+      }
+      for (const seg of node.preamble?.segments ?? []) {
+        if (seg.kind === "jsx")
+          attachParsedExpressions(seg.ir, analyzer, loopBound);
       }
       break;
     }
@@ -10687,74 +10842,78 @@ function transformMultiReturnJsxFunctionCall(callExpr, info, ctx) {
   ctx.analyzer.getJS = substitutedGetJS;
   try {
     const loc = getSourceLocation(callExpr, ctx.sourceFile, ctx.filePath);
-    const nullExpr = {
-      type: "expression",
-      expr: "null",
-      typeInfo: { kind: "primitive", raw: "null", primitive: "null" },
-      reactive: false,
-      slotId: null,
-      loc,
-      origin: { phase: "tick", scope: "template", effect: "pure", freeRefs: [] }
-    };
-    let result = info.fallback ? transformNode(info.fallback, ctx) ?? nullExpr : nullExpr;
-    for (let i = info.branches.length - 1;i >= 0; i--) {
-      const branch = info.branches[i];
-      let conditionText;
-      if (info.switchDiscriminant) {
-        const discText = substitutedGetJS(info.switchDiscriminant);
-        const caseText = substitutedGetJS(branch.condition);
-        conditionText = `${discText} === ${caseText}`;
-      } else {
-        conditionText = substitutedGetJS(branch.condition);
-      }
-      const env = makeBindingEnv(ctx);
-      const caseFreeRefs = resolveFreeRefs(branch.condition, env);
-      const discFreeRefs = info.switchDiscriminant ? resolveFreeRefs(info.switchDiscriminant, env) : [];
-      const conditionOrigin = {
-        phase: "tick",
-        scope: "template",
-        effect: "pure",
-        freeRefs: [...discFreeRefs, ...caseFreeRefs]
-      };
-      const reactive = isReactiveExpression(conditionText, ctx, branch.condition) || isReactiveOrigin(conditionOrigin);
-      const loopParamReactive = !reactive && referencesLoopParam(conditionText, ctx);
-      const callsReactive = exprCallsReactiveGetters(branch.condition, ctx) || (info.switchDiscriminant ? exprCallsReactiveGetters(info.switchDiscriminant, ctx) : false);
-      const hasCalls = exprHasFunctionCalls(branch.condition) || (info.switchDiscriminant ? exprHasFunctionCalls(info.switchDiscriminant) : false);
-      const needsSlot = reactive || loopParamReactive || callsReactive || hasCalls;
-      const slotId = needsSlot ? generateSlotId(ctx) : null;
-      const whenTrue = branch.jsxReturn ? transformNode(branch.jsxReturn, ctx) ?? nullExpr : nullExpr;
-      let templateCondition;
-      if (info.switchDiscriminant) {
-        const discRewritten = rewriteBarePropRefs2(substitutedGetJS(info.switchDiscriminant), info.switchDiscriminant, ctx);
-        const caseRewritten = rewriteBarePropRefs2(substitutedGetJS(branch.condition), branch.condition, ctx);
-        const discPart = discRewritten ?? substitutedGetJS(info.switchDiscriminant);
-        const casePart = caseRewritten ?? substitutedGetJS(branch.condition);
-        templateCondition = `${discPart} === ${casePart}`;
-      } else {
-        templateCondition = rewriteBarePropRefs2(conditionText, branch.condition, ctx);
-      }
-      const conditional = {
-        type: "conditional",
-        condition: conditionText,
-        templateCondition,
-        conditionType: null,
-        reactive,
-        whenTrue,
-        whenFalse: result,
-        slotId,
-        callsReactiveGetters: callsReactive || undefined,
-        hasFunctionCalls: hasCalls || undefined,
-        loc,
-        origin: conditionOrigin
-      };
-      result = conditional;
-    }
-    return result;
+    return foldMultiReturnBranches(info, ctx, loc, substitutedGetJS);
   } finally {
     ctx.getJS = originalCtxGetJS;
     ctx.analyzer.getJS = originalAnalyzerGetJS;
   }
 }
+function foldMultiReturnBranches(info, ctx, loc, getText) {
+  const nullExpr = {
+    type: "expression",
+    expr: "null",
+    typeInfo: { kind: "primitive", raw: "null", primitive: "null" },
+    reactive: false,
+    slotId: null,
+    loc,
+    origin: { phase: "tick", scope: "template", effect: "pure", freeRefs: [] }
+  };
+  let result = info.fallback ? transformNode(info.fallback, ctx) ?? nullExpr : nullExpr;
+  for (let i = info.branches.length - 1;i >= 0; i--) {
+    const branch = info.branches[i];
+    const caseConds = info.switchDiscriminant ? [branch.condition, ...branch.extraCaseConditions ?? []] : [branch.condition];
+    let conditionText;
+    if (info.switchDiscriminant) {
+      const discText = getText(info.switchDiscriminant);
+      conditionText = caseConds.map((c) => `(${discText}) === (${getText(c)})`).join(" || ");
+    } else {
+      conditionText = getText(branch.condition);
+    }
+    const env = makeBindingEnv(ctx);
+    const caseFreeRefs = caseConds.flatMap((c) => resolveFreeRefs(c, env));
+    const discFreeRefs = info.switchDiscriminant ? resolveFreeRefs(info.switchDiscriminant, env) : [];
+    const conditionOrigin = {
+      phase: "tick",
+      scope: "template",
+      effect: "pure",
+      freeRefs: [...discFreeRefs, ...caseFreeRefs]
+    };
+    const reactive = isReactiveExpression(conditionText, ctx, branch.condition) || isReactiveOrigin(conditionOrigin);
+    const loopParamReactive = !reactive && referencesLoopParam(conditionText, ctx);
+    const callsReactive = caseConds.some((c) => exprCallsReactiveGetters(c, ctx)) || (info.switchDiscriminant ? exprCallsReactiveGetters(info.switchDiscriminant, ctx) : false);
+    const hasCalls = caseConds.some((c) => exprHasFunctionCalls(c)) || (info.switchDiscriminant ? exprHasFunctionCalls(info.switchDiscriminant) : false);
+    const needsSlot = reactive || loopParamReactive || callsReactive || hasCalls;
+    const slotId = needsSlot ? generateSlotId(ctx) : null;
+    const whenTrue = branch.jsxReturn ? transformNode(branch.jsxReturn, ctx) ?? nullExpr : nullExpr;
+    let templateCondition;
+    if (info.switchDiscriminant) {
+      const discRewritten = rewriteBarePropRefs2(getText(info.switchDiscriminant), info.switchDiscriminant, ctx);
+      const discPart = discRewritten ?? getText(info.switchDiscriminant);
+      templateCondition = caseConds.map((c) => {
+        const casePart = rewriteBarePropRefs2(getText(c), c, ctx) ?? getText(c);
+        return `(${discPart}) === (${casePart})`;
+      }).join(" || ");
+    } else {
+      templateCondition = rewriteBarePropRefs2(conditionText, branch.condition, ctx);
+    }
+    const conditional = {
+      type: "conditional",
+      condition: conditionText,
+      templateCondition,
+      conditionType: null,
+      reactive,
+      whenTrue,
+      whenFalse: result,
+      slotId,
+      callsReactiveGetters: callsReactive || undefined,
+      hasFunctionCalls: hasCalls || undefined,
+      loc,
+      origin: conditionOrigin
+    };
+    result = conditional;
+  }
+  return result;
+}
 function transformConditional(node, ctx) {
   const condition = ctx.getJS(node.condition);
   const conditionOrigin = {
@@ -11605,9 +11764,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   let filterPredicate;
   let sortComparator;
   let chainOrder;
-  let mapPreamble;
-  let templateMapPreamble;
-  let typedMapPreamble;
+  let preamble;
   let iterationShape;
   let objectIteration;
   const setArray = (node2) => {
@@ -11637,7 +11794,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     const innerFilter = isFilterCall(sortInfo.array);
     const sortExtraction = extractSortComparator(sortInfo.callback, sortInfo.method, ctx);
     if (isClientOnly || !sortExtraction.result) {
-      if (!isClientOnly && sortExtraction.unsupportedReason) {
+      if (!isClientOnly && sortExtraction.unsupportedReason && !(ctx.analyzer.acceptsCallbackBody?.("sort") ?? false)) {
         ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(sortInfo.callback, ctx.sourceFile, ctx.filePath), {
           message: `Expression cannot be compiled to marked template: ${sortExtraction.unsupportedReason}`,
           suggestion: {
@@ -11652,7 +11809,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         chainOrder = "filter-sort";
         const filterExtraction = extractFilterPredicate(innerFilter.callback, ctx);
         if (isClientOnly || !filterExtraction.result) {
-          if (!isClientOnly && filterExtraction.unsupportedReason) {
+          if (!isClientOnly && filterExtraction.unsupportedReason && !(ctx.analyzer.acceptsCallbackBody?.("filter") ?? false)) {
             ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(innerFilter.callback, ctx.sourceFile, ctx.filePath), {
               message: `Expression cannot be compiled to marked template: ${filterExtraction.unsupportedReason}`,
               suggestion: {
@@ -11675,7 +11832,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     const innerSort = isSortCall(filterInfo.array);
     const filterExtraction = extractFilterPredicate(filterInfo.callback, ctx);
     if (isClientOnly || !filterExtraction.result) {
-      if (!isClientOnly && filterExtraction.unsupportedReason) {
+      if (!isClientOnly && filterExtraction.unsupportedReason && !(ctx.analyzer.acceptsCallbackBody?.("filter") ?? false)) {
         ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(filterInfo.callback, ctx.sourceFile, ctx.filePath), {
           message: `Expression cannot be compiled to marked template: ${filterExtraction.unsupportedReason}`,
           suggestion: {
@@ -11690,7 +11847,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         chainOrder = "sort-filter";
         const sortExtraction = extractSortComparator(innerSort.callback, innerSort.method, ctx);
         if (isClientOnly || !sortExtraction.result) {
-          if (!isClientOnly && sortExtraction.unsupportedReason) {
+          if (!isClientOnly && sortExtraction.unsupportedReason && !(ctx.analyzer.acceptsCallbackBody?.("sort") ?? false)) {
             ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(innerSort.callback, ctx.sourceFile, ctx.filePath), {
               message: `Expression cannot be compiled to marked template: ${sortExtraction.unsupportedReason}`,
               suggestion: {
@@ -11805,7 +11962,24 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     } else if (method === "flatMap" && ts11.isArrayLiteralExpression(body)) {
       children = transformArrayLiteralChildren(body, ctx);
     } else if (ts11.isBlock(body)) {
-      const returnStmt = body.statements.find((s) => ts11.isReturnStatement(s) && s.expression != null);
+      const multiReturn = method !== "flatMap" ? extractMultiReturnJsxBranches(body, true) : null;
+      if (multiReturn && multiReturn.branches.length > 0) {
+        const loc = getSourceLocation(body, ctx.sourceFile, ctx.filePath);
+        children = [foldMultiReturnBranches(multiReturn, ctx, loc, ctx.getJS)];
+        const pre = multiReturn.preamble ?? [];
+        if (pre.length > 0) {
+          preamble = preambleFromValueStatements(pre, ctx);
+          if (!isClientOnly && !(ctx.analyzer.acceptsCallbackBody?.("map") ?? false)) {
+            ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, loc, {
+              message: "A .map() callback body with a `const`/`let` preamble before its " + "branches cannot be lowered to a template: the loop-local binding " + "cannot be carried into a conditional branch on this backend.",
+              suggestion: {
+                message: "Add /* @client */ to evaluate this expression on the client only"
+              }
+            }));
+          }
+        }
+      }
+      const returnStmt = children.length === 0 ? body.statements.find((s) => ts11.isReturnStatement(s) && s.expression != null) : undefined;
       if (returnStmt && returnStmt.expression) {
         let returnExpr = returnStmt.expression;
         while (ts11.isParenthesizedExpression(returnExpr)) {
@@ -11817,32 +11991,53 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
             children = [transformed];
           }
         }
-        const preambleStmts = [];
-        const templatePreambleStmts = [];
-        const typedPreambleStmts = [];
-        let hasTypeDiff = false;
-        let hasTemplateDiff = false;
+        let jsxPreambleStmt;
         for (const stmt of body.statements) {
           if (stmt === returnStmt)
             break;
-          const js = ctx.getJS(stmt);
-          const tjs = ctx.getTemplateJS(stmt);
-          const ts12 = stmt.getText(ctx.sourceFile);
-          preambleStmts.push(js.endsWith(";") ? js : js + ";");
-          templatePreambleStmts.push(tjs.endsWith(";") ? tjs : tjs + ";");
-          typedPreambleStmts.push(ts12.endsWith(";") ? ts12 : ts12 + ";");
-          if (js !== ts12)
-            hasTypeDiff = true;
-          if (js !== tjs)
-            hasTemplateDiff = true;
+          if (containsJsxInExpression(stmt)) {
+            jsxPreambleStmt = stmt;
+            break;
+          }
         }
-        if (preambleStmts.length > 0) {
-          mapPreamble = preambleStmts.join(" ");
-          if (hasTemplateDiff) {
-            templateMapPreamble = templatePreambleStmts.join(" ");
+        if (jsxPreambleStmt) {
+          const jsRuntime = isClientOnly || (ctx.analyzer.acceptsCallbackBody?.("map") ?? false);
+          if (children.length === 0) {
+            ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(jsxPreambleStmt, ctx.sourceFile, ctx.filePath), {
+              message: "A .map() callback that builds JSX in a statement before its " + "`return` must return a single JSX element that embeds the " + "built array — this return shape has no element root to host it.",
+              suggestion: {
+                message: "Wrap the result in one element root, e.g. `return <tr key={item.id}>{out}</tr>`."
+              }
+            }));
+          } else if (!jsRuntime) {
+            ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(jsxPreambleStmt, ctx.sourceFile, ctx.filePath), {
+              message: "A .map() callback that builds JSX in a statement before its " + "`return` (for example pushing elements into an array in a loop) " + "cannot be lowered to a template on this backend.",
+              suggestion: {
+                message: "Add /* @client */ to render this loop on the client only"
+              }
+            }));
+          } else {
+            const collected = buildPreambleSegments(body.statements, returnStmt, ctx);
+            if (collected.refusalNode) {
+              ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(collected.refusalNode, ctx.sourceFile, ctx.filePath), {
+                message: "A JSX element built in a .map() callback preamble cannot carry " + "event handlers, components, nested loops, or reactive expressions, " + "and cannot sit inside a template literal — the verbatim render " + "path builds it once, with no reactive wiring.",
+                suggestion: {
+                  message: "Return the element directly (not through a preamble variable), " + "or add /* @client */ to render the loop on the client only."
+                }
+              }));
+            } else {
+              preamble = collected.preamble;
+            }
           }
-          if (hasTypeDiff) {
-            typedMapPreamble = typedPreambleStmts.join(" ");
+        } else {
+          const valueStmts = [];
+          for (const stmt of body.statements) {
+            if (stmt === returnStmt)
+              break;
+            valueStmts.push(stmt);
+          }
+          if (valueStmts.length > 0) {
+            preamble = preambleFromValueStatements(valueStmts, ctx);
           }
         }
       }
@@ -11871,6 +12066,31 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const itemConditional = children.length > 0 ? loopBodyItemConditional(children) : null;
   const bodyIsItemConditional = itemConditional !== null;
   const key = bodyIsItemConditional ? extractItemConditionalKey(itemConditional) : children.length > 0 ? extractLoopKey(children[0]) : null;
+  const declaredNameSet = preamble && preamble.declaredNames.length > 0 ? new Set(preamble.declaredNames) : undefined;
+  if (key && declaredNameSet) {
+    const keyRefs = extractFreeIdentifiersFromText(key);
+    const usesLocal = [...keyRefs].some((r) => declaredNameSet.has(r));
+    if (usesLocal) {
+      ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(node, ctx.sourceFile, ctx.filePath), {
+        message: "A .map() loop key must be derivable from the loop item — it is " + "evaluated before the callback body runs, so it cannot reference a " + "value computed in the callback preamble.",
+        suggestion: {
+          message: "Derive the key directly from the loop item (e.g. key={item.id})."
+        }
+      }));
+    }
+  }
+  if (preamble && preamble.builderNames.length > 0) {
+    flagArrayChildExpressions(children, new Set(preamble.builderNames));
+  }
+  if (preamble && preamble.builderNames.length > 0 && children.length === 1 && children[0].type === "component") {
+    ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(node, ctx.sourceFile, ctx.filePath), {
+      message: "A .map() callback that builds JSX in its preamble cannot return a " + "component: the built elements would reach the component as raw HTML " + "strings on the client but as JSX elements at SSR (a silent divergence).",
+      suggestion: {
+        message: "Return a plain element root that embeds the array, or move the " + "building logic inside the component."
+      }
+    }));
+    preamble = undefined;
+  }
   let childComponent;
   if (children.length === 1 && children[0].type === "component") {
     const comp = children[0];
@@ -11919,11 +12139,9 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     objectIteration,
     depth,
     clientOnly: isClientOnly || undefined,
-    mapPreamble,
-    templateMapPreamble,
+    preamble,
     paramType,
     indexType,
-    typedMapPreamble,
     paramBindings,
     arrayFreeIdentifiers: extractFreeIdentifiersFromNode(arrayExpr),
     flatMapCallback,
@@ -11959,47 +12177,206 @@ function containsJsx(node) {
 function buildFlatMapCallback(callback, body, ctx) {
   if (!containsJsx(body))
     return;
-  const fragments = [];
-  const sourceText = ctx.sourceFile.text;
-  const bodyStart = body.getStart(ctx.sourceFile);
-  const bodyEnd = body.getEnd();
-  const bodyText = sourceText.slice(bodyStart, bodyEnd);
-  const jsxNodes = [];
-  function collectJsx(n) {
+  const leafSpans = [];
+  const leafIrs = [];
+  let refusalNode;
+  const collectJsx = (n, underTemplate) => {
     if (ts11.isJsxElement(n) || ts11.isJsxSelfClosingElement(n) || ts11.isJsxFragment(n)) {
-      jsxNodes.push({
-        node: n,
-        start: n.getStart(ctx.sourceFile) - bodyStart,
-        end: n.getEnd() - bodyStart
-      });
+      if (underTemplate)
+        refusalNode ??= n;
+      leafSpans.push({ start: n.getStart(ctx.sourceFile), end: n.getEnd() });
+      const ir = transformNode(n, ctx);
+      leafIrs.push(ir ?? { type: "text", value: "", loc: getSourceLocation(n, ctx.sourceFile, ctx.filePath) });
       return;
     }
-    n.forEachChild(collectJsx);
-  }
-  collectJsx(body);
-  if (jsxNodes.length === 0)
+    const inTemplate = underTemplate || ts11.isTemplateExpression(n) || ts11.isTaggedTemplateExpression(n);
+    n.forEachChild((c) => collectJsx(c, inTemplate));
+  };
+  collectJsx(body, false);
+  if (leafSpans.length === 0)
+    return;
+  if (refusalNode) {
+    ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(refusalNode, ctx.sourceFile, ctx.filePath), {
+      message: "A JSX element inside a template literal in a .flatMap() callback " + "body cannot be compiled.",
+      suggestion: { message: "Build the element outside the template literal." }
+    }));
     return;
-  let compiledBody = "";
-  let lastEnd = 0;
-  for (let i = 0;i < jsxNodes.length; i++) {
-    const { node, start, end } = jsxNodes[i];
-    const placeholder = `__BF_JSX_${i}__`;
-    compiledBody += bodyText.slice(lastEnd, start) + placeholder;
-    lastEnd = end;
-    const ir = transformNode(node, ctx);
-    fragments.push({
-      placeholder,
-      ir: ir ?? { type: "text", value: "", loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath) }
-    });
   }
-  compiledBody += bodyText.slice(lastEnd);
+  const pieces = reconstructAsSegments(body, ctx.sourceFile, ctx.analyzer.typeExcludeRanges, leafSpans);
+  const segments = pieces.map((piece) => {
+    if ("marker" in piece)
+      return { kind: "jsx", ir: leafIrs[piece.marker] };
+    const tpl = rewriteBarePropRefs2(piece.js, body, ctx);
+    return tpl !== undefined && tpl !== piece.js ? { kind: "js", text: piece.js, templateText: tpl } : { kind: "js", text: piece.js };
+  });
   const paramsText = callback.parameters.map((p) => p.getText(ctx.sourceFile)).join(", ");
   return {
     params: `(${paramsText})`,
-    body: compiledBody,
-    templateBody: compiledBody,
-    rawBody: bodyText,
-    fragments
+    segments,
+    rawBody: tsxSourceText(body.getText(ctx.sourceFile))
+  };
+}
+function preambleFragmentNeedsWiring(ir) {
+  switch (ir.type) {
+    case "component":
+    case "loop":
+      return true;
+    case "element":
+      if (ir.events.length > 0)
+        return true;
+      if (ir.attrs.some((a) => a.name.startsWith("...")))
+        return true;
+      return ir.children.some(preambleFragmentNeedsWiring);
+    case "expression":
+      return ir.reactive === true;
+    case "conditional":
+      return preambleFragmentNeedsWiring(ir.whenTrue) || (ir.whenFalse ? preambleFragmentNeedsWiring(ir.whenFalse) : false);
+    case "fragment":
+      return ir.children.some(preambleFragmentNeedsWiring);
+    default:
+      return false;
+  }
+}
+function flagArrayChildExpressions(nodes, declared) {
+  for (const node of nodes) {
+    switch (node.type) {
+      case "expression": {
+        const name = node.expr.trim();
+        const refs = extractFreeIdentifiersFromText(node.expr);
+        if (refs.size === 1 && refs.has(name) && declared.has(name)) {
+          node.joinArrayChild = true;
+        }
+        break;
+      }
+      case "element":
+      case "fragment":
+        flagArrayChildExpressions(node.children, declared);
+        break;
+      case "conditional":
+        flagArrayChildExpressions([node.whenTrue, ...node.whenFalse ? [node.whenFalse] : []], declared);
+        break;
+    }
+  }
+}
+function collectBindingNames(name, out) {
+  if (ts11.isIdentifier(name)) {
+    out.add(name.text);
+    return;
+  }
+  for (const el of name.elements) {
+    if (ts11.isBindingElement(el))
+      collectBindingNames(el.name, out);
+  }
+}
+function collectPreambleDeclaredNames(stmt, out) {
+  if (ts11.isVariableStatement(stmt)) {
+    for (const decl of stmt.declarationList.declarations) {
+      collectBindingNames(decl.name, out);
+    }
+  } else if (ts11.isFunctionDeclaration(stmt) && stmt.name) {
+    out.add(stmt.name.text);
+  }
+}
+function preambleFromValueStatements(statements, ctx) {
+  const segments = [];
+  const typedParts = [];
+  const declared = new Set;
+  for (const stmt of statements) {
+    collectPreambleDeclaredNames(stmt, declared);
+    const js0 = ctx.getJS(stmt);
+    const tjs0 = ctx.getTemplateJS(stmt);
+    const raw0 = stmt.getText(ctx.sourceFile);
+    const js = (js0.endsWith(";") ? js0 : js0 + ";") + " ";
+    const tjs = (tjs0.endsWith(";") ? tjs0 : tjs0 + ";") + " ";
+    typedParts.push(raw0.endsWith(";") ? raw0 : raw0 + ";");
+    segments.push(tjs !== js ? { kind: "js", text: js, templateText: tjs } : { kind: "js", text: js });
+  }
+  return {
+    segments: trimPreambleSegments(segments),
+    ssrText: tsxSourceText(typedParts.join(" ")),
+    declaredNames: [...declared],
+    builderNames: []
+  };
+}
+function trimPreambleSegments(segments) {
+  const last = segments[segments.length - 1];
+  if (last?.kind === "js") {
+    const text = last.text.trimEnd();
+    const templateText = last.templateText?.trimEnd();
+    segments[segments.length - 1] = templateText !== undefined ? { kind: "js", text, templateText } : { kind: "js", text };
+  }
+  return segments;
+}
+function buildPreambleSegments(statements, returnStmt, ctx) {
+  const segments = [];
+  const typedParts = [];
+  const declared = new Set;
+  const builders = new Set;
+  let refusalNode;
+  const recordBuilderTarget = (leaf, stmt) => {
+    for (let n = leaf.parent;n && n !== stmt.parent; n = n.parent) {
+      if (ts11.isCallExpression(n) && ts11.isPropertyAccessExpression(n.expression) && (n.expression.name.text === "push" || n.expression.name.text === "unshift") && ts11.isIdentifier(n.expression.expression)) {
+        builders.add(n.expression.expression.text);
+        return;
+      }
+      if (ts11.isVariableDeclaration(n) && ts11.isIdentifier(n.name)) {
+        builders.add(n.name.text);
+        return;
+      }
+    }
+  };
+  for (const stmt of statements) {
+    if (stmt === returnStmt)
+      break;
+    collectPreambleDeclaredNames(stmt, declared);
+    const leafSpans = [];
+    const leafIrs = [];
+    const collect = (n, underTemplate) => {
+      if (ts11.isJsxElement(n) || ts11.isJsxSelfClosingElement(n) || ts11.isJsxFragment(n)) {
+        if (underTemplate)
+          refusalNode ??= n;
+        recordBuilderTarget(n, stmt);
+        leafSpans.push({ start: n.getStart(ctx.sourceFile), end: n.getEnd() });
+        const ir = transformNode(n, ctx);
+        if (ir && preambleFragmentNeedsWiring(ir))
+          refusalNode ??= n;
+        leafIrs.push(ir ?? { type: "text", value: "", loc: getSourceLocation(n, ctx.sourceFile, ctx.filePath) });
+        return;
+      }
+      const inTemplate = underTemplate || ts11.isTemplateExpression(n) || ts11.isTaggedTemplateExpression(n);
+      n.forEachChild((c) => collect(c, inTemplate));
+    };
+    collect(stmt, false);
+    const raw0 = stmt.getText(ctx.sourceFile);
+    typedParts.push(raw0.endsWith(";") ? raw0 : raw0 + ";");
+    if (leafSpans.length === 0) {
+      const js0 = ctx.getJS(stmt);
+      const tjs0 = ctx.getTemplateJS(stmt);
+      const js = (js0.endsWith(";") ? js0 : js0 + ";") + " ";
+      const tjs = (tjs0.endsWith(";") ? tjs0 : tjs0 + ";") + " ";
+      segments.push(tjs !== js ? { kind: "js", text: js, templateText: tjs } : { kind: "js", text: js });
+      continue;
+    }
+    const pieces = reconstructAsSegments(stmt, ctx.sourceFile, ctx.analyzer.typeExcludeRanges, leafSpans);
+    for (const piece of pieces) {
+      if ("marker" in piece) {
+        segments.push({ kind: "jsx", ir: leafIrs[piece.marker] });
+      } else {
+        const tpl = rewriteBarePropRefs2(piece.js, stmt, ctx);
+        segments.push(tpl !== undefined && tpl !== piece.js ? { kind: "js", text: piece.js, templateText: tpl } : { kind: "js", text: piece.js });
+      }
+    }
+    const sep2 = raw0.endsWith(";") ? " " : "; ";
+    segments.push({ kind: "js", text: sep2 });
+  }
+  return {
+    preamble: {
+      segments: trimPreambleSegments(segments),
+      ssrText: tsxSourceText(typedParts.join(" ")),
+      declaredNames: [...declared],
+      builderNames: [...builders]
+    },
+    refusalNode
   };
 }
 function collectNestedComponents(nodes) {
@@ -13642,7 +14019,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
           objectIteration: n.objectIteration,
           containerSlotId: scope.parentSlotId,
           template,
-          mapPreamble: n.mapPreamble,
+          preamble: n.preamble,
           refsOuterParam: refsOuter,
           childComponents,
           insideConditional: !flat && scope.insideCond ? true : undefined,
@@ -13889,7 +14266,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
           raw: l.sortComparator.raw
         } : undefined,
         chainOrder: l.chainOrder,
-        mapPreamble: l.mapPreamble
+        preamble: l.preamble
       });
     },
     component: ({ node: c, descend, descendJsxChildren }) => {
@@ -14070,7 +14447,7 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
         objectIteration: n.objectIteration,
         template: childTemplate,
         containerSlotId: containerSlot,
-        mapPreamble: n.mapPreamble ?? null,
+        preamble: n.preamble,
         nestedComponents: useElementReconciliation ? n.nestedComponents : undefined,
         bindings: branchBindings,
         innerLoops: useElementReconciliation ? innerLoopsCollected : undefined,
@@ -14346,8 +14723,8 @@ function buildReferencesGraph(ctx, irRoot) {
       addExprEdges(ROOT_SOURCE, elem.filterPredicate.raw, "template-closure");
     if (elem.sortComparator)
       addExprEdges(ROOT_SOURCE, elem.sortComparator.raw, "template-closure");
-    if (elem.mapPreamble)
-      addExprEdges(ROOT_SOURCE, elem.mapPreamble, "template-closure");
+    if (elem.preamble)
+      addExprEdges(ROOT_SOURCE, preambleAnalysisText(elem.preamble), "template-closure");
     for (const attr of elem.bindings.reactiveAttrs) {
       addExprEdges(ROOT_SOURCE, attr.expression, "template-closure");
     }
@@ -14457,8 +14834,8 @@ function buildReferencesGraph(ctx, irRoot) {
         addExprEdges(ROOT_SOURCE, l.filterPredicate.raw, "template-closure");
       if (l.sortComparator)
         addExprEdges(ROOT_SOURCE, l.sortComparator.raw, "template-closure");
-      if (l.mapPreamble)
-        addExprEdges(ROOT_SOURCE, l.mapPreamble, "template-closure");
+      if (l.preamble)
+        addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.preamble), "template-closure");
       descend();
       if (l.childComponent)
         walkChildComponent(l.childComponent);
@@ -16567,7 +16944,7 @@ function nestedLoopReferencesIndex(inner, comps, events) {
     if (exprRefs(a.expression, a.freeIdentifiers))
       return true;
   }
-  if (inner.mapPreamble && extractFreeIdentifiersFromStatementText(inner.mapPreamble).has(index))
+  if (inner.preamble && extractFreeIdentifiersFromStatementText(preambleAnalysisText(inner.preamble)).has(index))
     return true;
   if (inner.template && extractFreeIdentifiersFromTemplateText(inner.template).has(index))
     return true;
@@ -16722,6 +17099,11 @@ function emitComponentAndEventSetup(ls, indent, elVar, comps, events, loopParam,
 }
 
 // src/ir-to-client-js/plan/build-static-array-child-init.ts
+function staticPreludeStatements(preamble) {
+  return preamble ? [renderPreamble(preamble, {
+    renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true)
+  })] : [];
+}
 function buildStaticArrayChildInitsPlan(ctx) {
   const plans = [];
   for (const elem of ctx.loopElements) {
@@ -16759,7 +17141,7 @@ function buildSingleCompPlan(elem, childComponent) {
     arrayExpr: elem.array,
     param: elem.param,
     indexParam: elem.index || "__idx",
-    outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
+    outerPreludeStatements: staticPreludeStatements(elem.preamble),
     propsExpr: buildStaticPropsExpr(props)
   };
 }
@@ -16774,7 +17156,7 @@ function buildOuterNestedPlan(elem, comp) {
     param: elem.param,
     indexParam,
     offsetExpr: buildLoopChildIndexExpr(indexParam, elem.offset),
-    outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
+    outerPreludeStatements: staticPreludeStatements(elem.preamble),
     propsExpr: buildStaticPropsExpr(comp.props)
   };
 }
@@ -16793,13 +17175,13 @@ function buildInnerLoopNestedPlan(elem, innerLoop, innerComps) {
     outerParam: elem.param,
     outerIndexParam,
     outerOffsetExpr: buildLoopChildIndexExpr(outerIndexParam, elem.offset),
-    outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
+    outerPreludeStatements: staticPreludeStatements(elem.preamble),
     innerContainerSlotId: innerLoop.containerSlotId ?? null,
     innerArrayExpr: innerLoop.array,
     innerParam: innerLoop.param,
     innerIndexParam,
     innerOffsetExpr: buildLoopChildIndexExpr(innerIndexParam, innerLoop.offset),
-    innerPreludeStatements: innerLoop.mapPreamble ? [innerLoop.mapPreamble] : [],
+    innerPreludeStatements: staticPreludeStatements(innerLoop.preamble),
     depth: innerLoop.depth,
     comps
   };
@@ -16816,11 +17198,11 @@ function buildComponentRootedInnerLoopPlan(elem, innerLoop, innerComps) {
     outerArrayExpr: elem.array,
     outerParam: elem.param,
     outerIndexParam: elem.index,
-    outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
+    outerPreludeStatements: staticPreludeStatements(elem.preamble),
     innerArrayExpr: innerLoop.array,
     innerParam: innerLoop.param,
     innerIndexParam: innerLoop.index,
-    innerPreludeStatements: innerLoop.mapPreamble ? [innerLoop.mapPreamble] : [],
+    innerPreludeStatements: staticPreludeStatements(innerLoop.preamble),
     depth: innerLoop.depth,
     comps
   };
@@ -17389,7 +17771,7 @@ function buildInnerLoopsPlan(args) {
     const containerExpr = inner.containerSlotId ? `qsa(${parentElVar}, '[bf="${inner.containerSlotId}"]')` : parentElVar;
     const refsParent = !!outerLoopParam && (inner.arrayFreeIdentifiers?.has(outerLoopParam) ?? false);
     const useReactive = refsParent && !!inner.template;
-    const emit = useReactive ? buildReactiveEmit(inner, level, wrapOuter, uidSuffix) : buildStaticEmit(inner, level, uidSuffix);
+    const emit = useReactive ? buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings) : buildStaticEmit(inner, level, uidSuffix);
     const arrayExpr = useReactive ? wrapOuter(inner.array) : inner.array;
     const childLevelsPlan = childLevels.length > 0 ? buildInnerLoopsPlan({
       levels: childLevels,
@@ -17415,7 +17797,7 @@ function buildInnerLoopsPlan(args) {
   }
   return plan;
 }
-function buildReactiveEmit(inner, level, wrapOuter, uidSuffix) {
+function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings) {
   const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
   const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
@@ -17467,8 +17849,16 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix) {
     preludeStatements.push(indexAlias);
   if (paramUnwrap)
     preludeStatements.push(paramUnwrap);
-  if (inner.mapPreamble)
-    preludeStatements.push(wrapInner(wrapOuter(inner.mapPreamble)));
+  if (inner.preamble) {
+    const leafLoopParams = outerLoopParam ? [
+      { param: outerLoopParam, bindings: outerLoopParamBindings },
+      { param: inner.param, bindings: inner.paramBindings }
+    ] : [{ param: inner.param, bindings: inner.paramBindings }];
+    preludeStatements.push(renderPreamble(inner.preamble, {
+      transformJs: (t) => wrapInner(wrapOuter(t)),
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, leafLoopParams, undefined, true)
+    }));
+  }
   const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings);
   return {
     mode: "reactive",
@@ -17490,8 +17880,11 @@ function buildStaticEmit(inner, level, uidSuffix) {
   const indexAlias = nestedLoopIndexAlias(inner, `__innerIdx${uidSuffix}`, inner.param, level.comps, level.events);
   if (indexAlias)
     preludeStatements.push(indexAlias);
-  if (inner.mapPreamble)
-    preludeStatements.push(inner.mapPreamble);
+  if (inner.preamble) {
+    preludeStatements.push(renderPreamble(inner.preamble, {
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true)
+    }));
+  }
   return {
     mode: "static",
     rawKey: inner.key ?? null,
@@ -17511,6 +17904,7 @@ function buildTopLevelCompositePlan(elem, profileComponentName) {
   const outerCompsByDepth = nestedComps.filter((c) => !c.loopDepth || c.loopDepth === 0);
   return {
     kind: "composite",
+    rowConstruction: "string-template",
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     arrayExpr: buildChainedArrayExpr(elem),
@@ -17518,7 +17912,10 @@ function buildTopLevelCompositePlan(elem, profileComponentName) {
     paramHead,
     paramUnwrap,
     indexParam: elem.index || "__idx",
-    mapPreambleWrapped: elem.mapPreamble ? wrap(elem.mapPreamble) : "",
+    mapPreambleWrapped: elem.preamble ? renderPreamble(elem.preamble, {
+      transformJs: wrap,
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+    }) : "",
     template: elem.template,
     outerComps: filterCondCompsOut(outerCompsByDepth, elem.bindings.conditionals),
     outerEvents: elem.bindings.events.filter((ev) => ev.nestedLoops.length === 0),
@@ -17557,6 +17954,7 @@ function buildBranchCompositePlan(loop, cv, profileComponentName) {
   const outerCompsByDepth = nestedComps.filter((c) => !c.loopDepth || c.loopDepth === 0);
   return {
     kind: "composite",
+    rowConstruction: "string-template",
     containerVar: `__loop_${cv}`,
     markerId: loop.markerId,
     arrayExpr: buildChainedArrayExpr(loop),
@@ -17564,7 +17962,10 @@ function buildBranchCompositePlan(loop, cv, profileComponentName) {
     paramHead,
     paramUnwrap,
     indexParam: loop.index || "__idx",
-    mapPreambleWrapped: loop.mapPreamble ? wrap(loop.mapPreamble) : "",
+    mapPreambleWrapped: loop.preamble ? renderPreamble(loop.preamble, {
+      transformJs: wrap,
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true)
+    }) : "",
     template: loop.template,
     outerComps: filterCondCompsOut(outerCompsByDepth, loop.bindings.conditionals),
     outerEvents: childEvents.filter((ev) => ev.nestedLoops.length === 0),
@@ -17627,7 +18028,9 @@ function buildDynamicLoopDelegationPlan(elem, profileComponentName) {
       paramBindings: elem.paramBindings,
       key: elem.key,
       index: elem.index,
-      mapPreamble: elem.mapPreamble ?? null
+      mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+      }) : null
     })
   };
 }
@@ -17643,7 +18046,9 @@ function buildBranchLoopDelegationPlan(loop, cv, profileComponentName) {
       paramBindings: loop.paramBindings,
       key: loop.key,
       index: loop.index,
-      mapPreamble: loop.mapPreamble ?? null
+      mapPreamble: loop.preamble ? renderPreamble(loop.preamble, {
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true)
+      }) : null
     })
   };
 }
@@ -17657,7 +18062,9 @@ function buildStaticArrayDelegationPlan(elem, profileComponentName) {
       kind: "static-index",
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
-      mapPreamble: elem.mapPreamble ?? null,
+      mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+      }) : null,
       offset: elem.offset ?? null,
       indexParam: elem.index ?? null
     }
@@ -17706,6 +18113,7 @@ function buildBranchLoopPlan(loop, profileComponentName) {
   const hasReactiveEffects = loop.bindings.reactiveAttrs.length > 0 || loop.bindings.reactiveTexts.length > 0 || loop.bindings.conditionals.length > 0;
   const plan = {
     kind: "plain",
+    rowConstruction: "string-template",
     containerSlotId,
     containerVar,
     markerId: loop.markerId,
@@ -17714,7 +18122,10 @@ function buildBranchLoopPlan(loop, profileComponentName) {
     paramHead,
     paramUnwrap,
     indexParam: loop.index || "__idx",
-    mapPreambleWrapped: loop.mapPreamble ? wrapLoopParamAsAccessor(loop.mapPreamble, loop.param, loop.paramBindings) : "",
+    mapPreambleWrapped: loop.preamble ? renderPreamble(loop.preamble, {
+      transformJs: (t) => wrapLoopParamAsAccessor(t, loop.param, loop.paramBindings),
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true)
+    }) : "",
     template: loop.template,
     reactiveEffects: hasReactiveEffects ? buildReactiveEffectsPlan({
       attrs: loop.bindings.reactiveAttrs,
@@ -18804,7 +19215,7 @@ function stringifyEventDelegation(lines, plan) {
     for (const ev of evs) {
       const childVar = varSlotId(ev.childSlotId);
       lines.push(`    const ${childVar}El = target.closest('[bf="${ev.childSlotId}"]')`);
-      lines.push(`    if (${childVar}El) {`);
+      lines.push(`    if (${childVar}El && ${containerVar}.contains(${childVar}El)) {`);
       const handlerCall = withTurn(`(${ev.handler.trim()})(__bfEvt)`, profileComponentName, ev.childSlotId, ev.eventName);
       switch (itemLookup.kind) {
         case "keyed":
@@ -19130,6 +19541,7 @@ function buildComponentLoopPlan(elem, profileComponentName) {
   const hasChildConds = elem.bindings.conditionals.length > 0;
   return {
     kind: "component",
+    rowConstruction: "dom-ops",
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     arrayExpr: buildChainedArrayExpr(elem),
@@ -19177,6 +19589,7 @@ function buildPlainLoopPlan(elem, profileComponentName) {
   const hasReactive2 = elem.bindings.reactiveAttrs.length > 0 || elem.bindings.reactiveTexts.length > 0 || elem.bindings.conditionals.length > 0;
   return {
     kind: "plain",
+    rowConstruction: "string-template",
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
@@ -19185,7 +19598,10 @@ function buildPlainLoopPlan(elem, profileComponentName) {
     paramHead,
     paramUnwrap,
     indexParam: elem.index || "__idx",
-    mapPreambleWrapped: elem.mapPreamble ? wrap(elem.mapPreamble) : "",
+    mapPreambleWrapped: elem.preamble ? renderPreamble(elem.preamble, {
+      transformJs: wrap,
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+    }) : "",
     template: elem.template,
     skeletonTemplate: elem.skeletonTemplate,
     skeletonPaths: elem.skeletonPaths,
@@ -19212,6 +19628,7 @@ function buildStaticLoopPlan(elem, unsafeLocalNames, profileComponentName) {
   const childIndexExpr = buildLoopChildIndexExpr(indexParam, elem.offset);
   return {
     kind: "static",
+    rowConstruction: "string-template",
     containerVar: `_${varSlotId(elem.slotId)}`,
     arrayExpr: elem.array,
     param: elem.param,
@@ -19233,7 +19650,9 @@ function buildStaticLoopMaterialize(elem, unsafeLocalNames) {
     return null;
   return {
     itemTemplate: elem.staticItemTemplate,
-    mapPreamble: elem.mapPreamble ?? "",
+    mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+    }) : "",
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false
   };
 }
@@ -19262,6 +19681,7 @@ function emitLoopUpdates(lines, ctx, unsafeLocalNames) {
       unsafeLocalNames,
       profileComponentName: ctx.profile ? ctx.componentName : undefined
     });
+    internalInvariant(!(elem.preamble && elem.preamble.builderNames.length > 0 && plan.rowConstruction === "dom-ops"), `loop variant '${plan.kind}' declares dom-ops row construction but received a JSX-bearing preamble — add a Phase-1 refusal (or wire renderPreamble support) for this shape`);
     stringifyLoop(lines, plan);
     emitLoopEventDelegation(lines, elem, plan.kind, ctx.profile ? ctx.componentName : undefined);
   }
@@ -20192,19 +20612,19 @@ function isJsxLike(expr) {
 function collectArrowParamNames(arrow) {
   const names = new Set;
   for (const p of arrow.parameters)
-    collectBindingNames(p.name, names);
+    collectBindingNames2(p.name, names);
   return names;
 }
-function collectBindingNames(name, out) {
+function collectBindingNames2(name, out) {
   const push = Array.isArray(out) ? (n) => out.push(n) : (n) => out.add(n);
   if (ts16.isIdentifier(name)) {
     push(name.text);
   } else if (ts16.isObjectBindingPattern(name)) {
-    name.elements.forEach((el) => collectBindingNames(el.name, out));
+    name.elements.forEach((el) => collectBindingNames2(el.name, out));
   } else if (ts16.isArrayBindingPattern(name)) {
     name.elements.forEach((el) => {
       if (!ts16.isOmittedExpression(el))
-        collectBindingNames(el.name, out);
+        collectBindingNames2(el.name, out);
     });
   }
 }
@@ -20213,12 +20633,12 @@ function collectFreeIdentifiers(arrow) {
   const bound = [];
   for (const p of arrow.parameters) {
     const names = [];
-    collectBindingNames(p.name, names);
+    collectBindingNames2(p.name, names);
     bound.push(...names);
   }
   function pushBindings(name) {
     const names = [];
-    collectBindingNames(name, names);
+    collectBindingNames2(name, names);
     bound.push(...names);
     return names;
   }
@@ -20345,7 +20765,7 @@ function collectModuleScopeNames(sourceFile) {
       names.add(stmt.name.text);
     else if (ts16.isVariableStatement(stmt)) {
       for (const decl of stmt.declarationList.declarations)
-        collectBindingNames(decl.name, names);
+        collectBindingNames2(decl.name, names);
     } else if (ts16.isImportDeclaration(stmt) && stmt.importClause) {
       const ic = stmt.importClause;
       if (ic.name)
@@ -21364,8 +21784,13 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
         for (const child of nested.children)
           walkNode(child, meta, loopBindings, matchers, errors, seen);
       }
-      for (const frag of node.flatMapCallback?.fragments ?? []) {
-        walkNode(frag.ir, meta, loopBindings, matchers, errors, seen);
+      for (const seg of node.flatMapCallback?.segments ?? []) {
+        if (seg.kind === "jsx")
+          walkNode(seg.ir, meta, loopBindings, matchers, errors, seen);
+      }
+      for (const seg of node.preamble?.segments ?? []) {
+        if (seg.kind === "jsx")
+          walkNode(seg.ir, meta, loopBindings, matchers, errors, seen);
       }
       break;
     }
@@ -21427,7 +21852,7 @@ function compileMultipleComponents(source, filePath, componentNames, options) {
   const entries = [];
   const program = options.program ?? (needsTypeBasedDetection(source) ? createProgramForFile(source, filePath)?.program : undefined);
   for (const componentName of componentNames) {
-    const ctx = analyzeComponent(source, filePath, componentName, program);
+    const ctx = analyzeComponent(source, filePath, componentName, program, adapter.acceptsCallbackBody);
     if (!ctx.jsxReturn) {
       errors.push(...ctx.errors);
       continue;
@@ -21736,7 +22161,7 @@ function compileJSX(source, filePath, options) {
   if (componentNames.length > 1) {
     return compileMultipleComponents(compileSource, filePath, componentNames, options);
   }
-  const ctx = analyzeComponent(compileSource, filePath, undefined, options.program);
+  const ctx = analyzeComponent(compileSource, filePath, undefined, options.program, options.adapter.acceptsCallbackBody);
   if (!ctx.jsxReturn) {
     errors.push(...ctx.errors);
     const exportedModuleSignals = ctx.signals.filter((s2) => s2.isModule && s2.isExported);
@@ -21936,6 +22361,7 @@ class BaseAdapter {
 import { BF_SCOPE as BF_SCOPE4, BF_SLOT, BF_COND } from "@barefootjs/shared";
 class JsxAdapter extends BaseAdapter {
   componentName = "";
+  acceptsCallbackBody = () => true;
   formatImportSpecifiers(specifiers) {
     const defaultSpec = specifiers.find((s) => s.isDefault);
     const namespaceSpec = specifiers.find((s) => s.isNamespace);
@@ -22281,6 +22707,10 @@ export default ${this.componentName}` : "";
     const indexParam = loop.index ? `, ${loop.index}` : "";
     const children = this.renderChildren(loop.children);
     const safeChildren = children.startsWith("{") ? `<>${children}</>` : children;
+    const preamble = loop.preamble?.ssrText;
+    if (preamble) {
+      return `{${loop.array}.map((${loop.param}${indexParam}) => { ${preamble} return ${safeChildren} })}`;
+    }
     return `{${loop.array}.map((${loop.param}${indexParam}) => ${safeChildren})}`;
   }
   renderComponent(comp) {
@@ -22481,8 +22911,13 @@ function collectLoopBoundNames(ir) {
           for (const child of nested.children)
             visit3(child);
         }
-        for (const frag of node.flatMapCallback?.fragments ?? []) {
-          visit3(frag.ir);
+        for (const seg of node.flatMapCallback?.segments ?? []) {
+          if (seg.kind === "jsx")
+            visit3(seg.ir);
+        }
+        for (const seg of node.preamble?.segments ?? []) {
+          if (seg.kind === "jsx")
+            visit3(seg.ir);
         }
         break;
       case "conditional":
@@ -23058,12 +23493,16 @@ function restNamesMisused(loop, names) {
     check(l.array);
     check(l.templateArray);
     check(l.key);
-    check(l.mapPreamble);
-    check(l.templateMapPreamble);
+    if (l.preamble) {
+      check(preambleAnalysisText(l.preamble));
+      check(preambleAnalysisTemplateText(l.preamble));
+    }
     if (l.flatMapCallback) {
-      check(l.flatMapCallback.body);
-      check(l.flatMapCallback.templateBody);
-      l.flatMapCallback.fragments.forEach((f) => visit3(f.ir));
+      check(preambleAnalysisText(l.flatMapCallback));
+      for (const seg of l.flatMapCallback.segments) {
+        if (seg.kind === "jsx")
+          visit3(seg.ir);
+      }
     }
     l.children.forEach(visit3);
   };