@barefootjs/jsx 0.31.4 → 0.31.6

package/src/debug.ts

@@ -30,6 +30,7 @@ import type { WrapReason } from './ir-to-client-js/reactivity.ts'
 import { decideWrapFromAstFlags } from './ir-to-client-js/reactivity.ts'
 import { tokenContainsIdent } from './ir-to-client-js/utils.ts'
 import { identifierCallPattern } from './identifier-pattern.ts'
+import { BindingScope } from './scope/binding-scope.ts'
 
 // =============================================================================
 // Types
@@ -360,7 +361,7 @@ export function buildGraphFromIR(ir: ComponentIR): ComponentGraph {
 
   // Collect DOM bindings from IR tree
   const domBindings: DomBinding[] = []
-  collectDomBindings(ir.root, domBindings, signalGetters, memoNames, undefined, new Set(), exprReadsProp)
+  collectDomBindings(ir.root, domBindings, signalGetters, memoNames, undefined, BindingScope.EMPTY, exprReadsProp)
 
   // Build consumer lists for signals
   const signalConsumers = new Map<string, string[]>()
@@ -1676,30 +1677,41 @@ function collectDomBindings(
   signalGetters: Set<string>,
   memoNames: Set<string>,
   parentTag?: string,
-  // Loop-param names in scope (#1690, #1795 Phase 2). Inside a `map(it => …)`
+  // Loop-param names in scope (#1690, #1795 Phase 2; threaded via the shared
+  // `BindingScope` service since #2482 Stage 4). Inside a `map(it => …)`
   // body the emitter rewrites every `it.x` read into a reactive accessor and
   // wraps the binding in `createEffect`, yet `it` is neither a signal nor a
   // memo — so without this context loop-child text / attribute bindings are
   // invisible to the graph. When a binding expression references one of these
   // names it is treated as reactive (matching the emitter's gate), giving the
   // profiler a `domBinding` (slotId + loc) to resolve `<Comp>#binding:<slotId>`.
-  loopParams: Set<string> = new Set(),
+  // This is the REACTIVITY / SLOT-ID CLASSIFIER consumer class (see
+  // `BindingScope.valueBoundNames`'s docstring) — reads `valueBoundNames()`,
+  // not `boundNames()`.
+  scope: BindingScope = BindingScope.EMPTY,
   // Predicate: does an attribute expression read a component prop? Mirrors the
   // emitter's `needsEffectWrapper` prop detection so a prop-driven attribute
   // (wrapped in `createEffect` at codegen, hence emitting `#binding:<slot>`) is
   // tracked here too — otherwise its profiler id resolves to `(unresolved)`.
   readsProp: (expr: string, freeIds?: ReadonlySet<string>) => boolean = () => false,
 ): void {
+  const boundNames = scope.valueBoundNames()
   // Does a loop-child binding read a loop param (or index)? Use the analyzer's
   // lexer-resolved metadata, NOT a raw-string regex — so a param name that only
   // appears inside a string literal (index `i` vs `'i'`) is not mistaken for a
   // reactive read. Text expressions carry `origin.freeRefs` (a `render-item`
   // kind == map-callback param); attributes carry `freeIdentifiers` (bare
   // identifier set). This matches the emitter's actual loop-param gate.
+  // Set-intersection test without spreading into an array — these run per
+  // node in the graph walk, so avoid the per-call allocation.
+  const setSomeIn = (names: ReadonlySet<string>, other: ReadonlySet<string>): boolean => {
+    for (const n of names) if (other.has(n)) return true
+    return false
+  }
   const exprReadsLoopParam = (n: IRExpression): boolean =>
-    loopParams.size > 0 && (n.origin?.freeRefs?.some(r => loopParams.has(r.name)) ?? false)
+    boundNames.size > 0 && (n.origin?.freeRefs?.some(r => boundNames.has(r.name)) ?? false)
   const attrReadsLoopParam = (free: ReadonlySet<string> | undefined): boolean =>
-    loopParams.size > 0 && free !== undefined && [...loopParams].some(p => free.has(p))
+    boundNames.size > 0 && free !== undefined && setSomeIn(boundNames, free)
   switch (node.type) {
     case 'element': {
       // Dynamic attribute bindings (style, class, aria-*, data-*, etc.)
@@ -1713,7 +1725,7 @@ function collectDomBindings(
         // `key` is consumed by the loop's keyFn, never emitted as an attribute
         // effect — skip it inside loops so a `key={it.id}` read isn't mistaken
         // for a reactive binding (matches `collectLoopChildBindings`).
-        if (attr.name === 'key' && loopParams.size > 0) continue
+        if (attr.name === 'key' && boundNames.size > 0) continue
         const expr = attrValueToString(attr.value)
         if (!expr) continue
         const deps = extractReactiveDeps(expr, signalGetters, memoNames)
@@ -1756,7 +1768,7 @@ function collectDomBindings(
       }
       // Recurse — pass element tag as parent context for text bindings
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag, loopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag, scope, readsProp)
       }
       break
     }
@@ -1794,7 +1806,7 @@ function collectDomBindings(
       // (the emitter wraps its `insert()` in a per-item effect) even though the
       // param is neither signal nor memo. Use the resolved `origin.freeRefs`.
       const loopReactive =
-        loopParams.size > 0 && (node.origin?.freeRefs?.some(r => loopParams.has(r.name)) ?? false)
+        boundNames.size > 0 && (node.origin?.freeRefs?.some(r => boundNames.has(r.name)) ?? false)
       if ((decision.wrap || loopReactive) && node.slotId) {
         const deps = extractReactiveDeps(node.condition, signalGetters, memoNames)
         bindings.push({
@@ -1813,8 +1825,8 @@ function collectDomBindings(
           jsxPreview: `{${truncateExpr(node.condition)} ? ... : ...}`,
         })
       }
-      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
-      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
+      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       break
     }
     case 'loop': {
@@ -1828,9 +1840,9 @@ function collectDomBindings(
         // An inner loop whose array reads an outer loop param (`r.tags.map(...)`)
         // is reactive per item — use the resolved `arrayFreeIdentifiers`.
         const loopReactive =
-          loopParams.size > 0 &&
+          boundNames.size > 0 &&
           node.arrayFreeIdentifiers !== undefined &&
-          [...loopParams].some(p => node.arrayFreeIdentifiers!.has(p))
+          setSomeIn(boundNames, node.arrayFreeIdentifiers)
         const isReactive = deps.length > 0 || node.callsReactiveGetters === true || loopReactive
         const isFallback = !isReactive && node.hasFunctionCalls === true
         if (isReactive || isFallback) {
@@ -1859,12 +1871,13 @@ function collectDomBindings(
           })
         }
       }
-      // Loop-param names enter scope for the children (#1690, #1795 Phase 2).
-      const childLoopParams = new Set(loopParams)
-      for (const p of extractLoopParamNames(node.param, node)) childLoopParams.add(p)
-      if (node.index) childLoopParams.add(node.index)
+      // Loop-param names enter scope for the children (#1690, #1795 Phase 2),
+      // via the same `BindingScope.enterLoopRow` the emitter uses — `IRLoop`
+      // already satisfies `LoopBindingSource` structurally (`param`/`index`/
+      // `paramBindings`/`preamble`), so no bespoke Set bookkeeping is needed.
+      const childScope = scope.enterLoopRow(node)
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, childLoopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, childScope, readsProp)
       }
       break
     }
@@ -1903,21 +1916,21 @@ function collectDomBindings(
         }
       }
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       }
       break
     }
     case 'fragment':
     case 'provider': {
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       }
       break
     }
     case 'if-statement': {
-      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       if (node.alternate) {
-        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       }
       break
     }

package/src/free-refs.ts

@@ -41,14 +41,23 @@ export interface BindingEnvironment {
   localFunctions: readonly FunctionInfo[]
   imports: readonly ImportInfo[]
   ambientGlobals: ReadonlySet<string>
-  /** Active `.map()` callback parameter names — present inside loop bodies. */
-  loopParams?: ReadonlySet<string>
+  /**
+   * Active `.map()` callback VALUE-bound names (item/index/destructure —
+   * excludes preamble locals and callback params) — present inside loop
+   * bodies. Named after, and fed from, `BindingScope.valueBoundNames()`
+   * (#2482 Stage 4 rename from `loopParams`, which predated the shared
+   * `BindingScope` service and named the mechanism, not the query). This
+   * is the REACTIVITY / SLOT-ID CLASSIFIER consumer class — see that
+   * method's docstring for why it must stay `valueBoundNames`, not
+   * `boundNames`.
+   */
+  loopValueBoundNames?: ReadonlySet<string>
   checker: ts.TypeChecker | null
 }
 
 /**
  * Per-environment cache for the binding map. `BindingEnvironment` identity
- * is stable per (analyzer, loopParams snapshot) — `jsx-to-ir.ts` memoizes
+ * is stable per (analyzer, loopValueBoundNames snapshot) — `jsx-to-ir.ts` memoizes
  * `makeBindingEnv` so the same object is reused across every
  * `resolveFreeRefs` call within a loop scope. With N expressions per
  * component and M bindings per env, this drops binding-table construction
@@ -114,8 +123,8 @@ function buildBindingMap(env: BindingEnvironment): Map<string, BindingKind> {
     map.set(m.name, 'memo-getter')
   }
   // Highest precedence — innermost scope.
-  if (env.loopParams) {
-    for (const name of env.loopParams) map.set(name, 'render-item')
+  if (env.loopValueBoundNames) {
+    for (const name of env.loopValueBoundNames) map.set(name, 'render-item')
   }
 
   _bindingMapCache.set(env, map)

package/src/index.ts

@@ -57,6 +57,9 @@ export type {
   TypeDefinition,
   SourceLocation,
   CompilerError,
+  ErrorSuggestion,
+  EscapeKind,
+  EscapeSsrCost,
   ConformancePin,
   ConformancePins,
   RenderDivergences,
@@ -186,6 +189,9 @@ export interface BarefootPaths {
 // AttrValue constructors
 export { AttrValueOf } from './types.ts'
 
+// Per-escape-kind SSR cost — the one place every renderer reads the trade from (#2613)
+export { ESCAPE_SSR_COST } from './types.ts'
+
 // CSS Layer Prefixer
 export { applyCssLayerPrefix } from './css-layer-prefixer.ts'
 

package/src/ir-to-client-js/client-only-elision.ts

@@ -3,11 +3,17 @@
  * marker elision"): decide, EXACTLY ONCE and BEFORE either `adapter.generate`
  * (SSR) or `generateClientJs` (CSR) run, which `/* @client *\/` text slots
  * can drop their `<!--bf:sN-->…<!--/-->` marker pair entirely from both
- * outputs. Every consumer (all nine SSR adapters' `renderExpression`, and
- * the CSR emitters in `html-template.ts`) reads the single
- * `IRExpression.markerless` flag this pass writes — nobody re-derives the
- * decision, per CLAUDE.md's "Never add compiler options/hooks for
- * tool-specific output rewriting" spirit: one door in, everyone reads it.
+ * outputs. Every consumer reads the single `IRExpression.markerless` flag
+ * this pass writes; nobody re-derives the decision, per CLAUDE.md's "Never
+ * add compiler options/hooks for tool-specific output rewriting" spirit:
+ * one door in, everyone reads it.
+ *
+ * The consumers are all nine SSR adapters' `renderExpression`, plus BOTH
+ * top-level CSR emitters in `html-template.ts` — `irToHtmlTemplate`'s
+ * `case 'expression'` and `generateCsrTemplateWithOpts`'s own. The second
+ * of those was wired up only by #2617; the flag shipped with just the
+ * first, which is exactly how the divergence that issue fixed went
+ * unnoticed.
  *
  * Scope — deliberately the NARROWEST slice of §3(b)'s elision rule that is
  * fully sound today, not the general case:

package/src/ir-to-client-js/collect-elements.ts

@@ -5,10 +5,11 @@
 import { type IRNode, type IRElement, type IRComponent, type IRLoop, type IRProp, pickAttrMetaFromIR } from '../types.ts'
 import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranchReactiveAttr, BranchLoop, ConditionalBranchTextEffect, ConditionalElement, LoopChildBindings, LoopChildBranchSummary, LoopChildConditional, LoopOffset, NestedLoop } from './types.ts'
 import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from './utils.ts'
-import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope } from './reactivity.ts'
+import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { templateRootIsSvg } from './control-flow/stringify/template-parse.ts'
 import { expandDynamicPropValue, expandConstantForReactivity } from './prop-handling.ts'
+import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
 import { buildLoopChainExpr } from '../loop-chain.ts'
 import { identifierPattern } from '../identifier-pattern.ts'
@@ -1428,9 +1429,22 @@ export function collectLoopChildConditionals(
       // paying for constant expansion — matches the legacy short-circuit.
       if (!n.reactive && !refsLoopParamInSource) return
       const expanded = expandConstantForReactivity(n.condition, ctx, sourceFreeIds, scope)
+      // A `.map()` callback preamble local (#2596, twin of
+      // `collectLoopChildReactiveAttrs`'s `readsPreamble` #2447). Phase 1
+      // already proved this condition reactive when it's set (`n.reactive`
+      // came from `markPreambleConditionalReactivity`, gated on the local's
+      // OWN initializer reading a signal) — `classifyReactivity` below
+      // cannot independently confirm that: `expandConstantForReactivity`
+      // leaves a preamble-bound identifier like `label` unexpanded on
+      // purpose (the #2482 Stage 1b shadow guard, `scope.isBound`), so the
+      // raw token never string-matches a signal/memo/prop pattern.
+      const readsPreamble =
+        preambleNames !== undefined &&
+        preambleNames.size > 0 &&
+        anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames)
       // Loop-param conditionals are reactive via per-item signal accessors;
       // classifyReactivity sees both paths (signal/memo/prop + loop-param).
-      if (classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') return
+      if (!readsPreamble && classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') return
 
       const loopParamsForCond = loopParam
         ? [{ param: loopParam, bindings: loopParamBindings }]
@@ -1449,6 +1463,7 @@ export function collectLoopChildConditionals(
         whenTrue: summarizeLoopChildBranch(n.whenTrue, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
         whenFalse: summarizeLoopChildBranch(n.whenFalse, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
         ...(expanded.freeIds !== undefined && { conditionFreeIdentifiers: expanded.freeIds }),
+        ...(readsPreamble && { readsPreamble: true }),
       })
     },
   })

package/src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts

@@ -112,6 +112,7 @@ export function buildReactiveEffectsPlan(
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
         whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
         whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
+        ...(cond.readsPreamble && { readsPreamble: true }),
       })
     }
   }

package/src/ir-to-client-js/control-flow/plan/reactive-effects.ts

@@ -62,6 +62,13 @@ export interface NestedConditionalPlan {
   whenFalseTemplateHtml: string
   whenTrueArm: LoopChildArmPlan
   whenFalseArm: LoopChildArmPlan
+  /**
+   * `wrappedCondition` reads a `.map()` callback preamble local (#2596,
+   * twin of `ReactiveAttrEffect.readsPreamble`) — the stringifier must run
+   * the row's preamble ahead of evaluating the condition getter passed to
+   * `insert()`; the local isn't otherwise in scope there.
+   */
+  readsPreamble?: boolean
 }
 
 export interface ReactiveEffectsPlan {

package/src/ir-to-client-js/control-flow/stringify/reactive-effects.ts

@@ -140,7 +140,7 @@ export function stringifyReactiveEffects(
   // from the attrs/texts/regions merge above (its own per-branch disposable
   // effects), so it's untouched by row-granularity consolidation.
   for (const cond of conditionals) {
-    emitOuterConditional(lines, indent, elVar, cond, pc)
+    emitOuterConditional(lines, indent, elVar, cond, pc, mapPreambleWrapped)
   }
 }
 
@@ -342,12 +342,22 @@ function emitOuterConditional(
   elVar: string,
   cond: NestedConditionalPlan,
   pc: string | undefined,
+  mapPreambleWrapped: string | undefined,
 ): void {
   const armIndent = `${indent}    `
 
   // Body-form arrows so live `Node` returns from Child-position
   // interpolations route through `__bfSlot` and survive the splice (#1213).
-  lines.push(`${indent}insert(${elVar}, '${cond.slotId}', () => ${cond.wrappedCondition}, {`)
+  // A condition reading a preamble local (#2596) needs the preamble re-run
+  // INSIDE the getter — `insert()` re-invokes this closure on every
+  // dependency change to decide the branch, and the local isn't otherwise in
+  // scope here (it's a plain per-row `const`, not a signal `insert()` can see
+  // through on its own). Same treatment as `readsPreamble` attrs
+  // (`emitAttrUpdate`'s callers) get ahead of their own write.
+  const conditionGetter = cond.readsPreamble && mapPreambleWrapped
+    ? `() => { ${mapPreambleWrapped}; return (${cond.wrappedCondition}) }`
+    : `() => ${cond.wrappedCondition}`
+  lines.push(`${indent}insert(${elVar}, '${cond.slotId}', ${conditionGetter}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
   stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc)

package/src/ir-to-client-js/html-template.ts

@@ -729,6 +729,11 @@ function escapeLeafTextExpressions(ir: IRNode): IRNode {
   }
 }
 
+// `loopParams` here is the accessor-rewrite spec list `wrapExprWithLoopParams`
+// consumes, not a `BindingScope`-trackable name set — see that function's
+// docstring (`ir-to-client-js/utils.ts`) for why this stays outside #2482's
+// migration (it's the client-JS-emitter twin of the Go adapter's
+// `loopBindingStack`).
 export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>, branchSlotsVar?: string, inHoistedChildren = false): string {
   const recurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, inHoistedChildren)
   const wrapExpr = (expr: string) => wrapExprWithLoopParams(expr, loopParams)
@@ -805,6 +810,36 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       // no-slotId branch below already uses — `elidedPath` (not this
       // string) is what the claim plan resolves against, so no marker
       // anchor is needed here at all.
+      //
+      // This branch evaluates `node.expr` eagerly, while the sibling
+      // top-level emitter (`generateCsrTemplateWithOpts`) emits NOTHING
+      // for its `markerless` case. That difference is safe only because
+      // this branch is UNREACHABLE today, which rests on three facts —
+      // all three must hold, so check them before widening either one:
+      //
+      //   1. `markerless` is only ever set by `markElided`, which
+      //      `client-only-elision.ts` calls exclusively under
+      //      `child.clientOnly && child.slotId`. So today
+      //      `markerless === true` IMPLIES `clientOnly && slotId` — it is
+      //      never some other, eagerly-renderable kind of markerless slot.
+      //   2. That walk never descends into a loop or conditional: its
+      //      `default:` case freezes the level and returns without
+      //      recursing (only `element` recurses).
+      //   3. This function only ever runs ON loop bodies and conditional
+      //      branches (every caller passes `l.children[0]`, a `renderLeaf`,
+      //      or `whenTrue`/`whenFalse`), and by its own docstring "does not
+      //      honour `clientOnly`".
+      //
+      // (2) + (3) mean no marked node reaches here; (1) means that if one
+      // ever did, eager evaluation would be WRONG — it would render a
+      // deferred `/* @client */` read at template time instead of leaving
+      // it to init's createEffect. So if #2483 widens elision to cover
+      // loop/conditional subtrees, this branch stops being dead code and
+      // must gain the same `clientOnly` deferral check the sibling emitter
+      // has; it cannot simply keep evaluating. The two checks were left
+      // separate rather than collapsed into a shared helper precisely
+      // because their `clientOnly` semantics differ — see that function's
+      // own comment (#2617).
       if (node.markerless) {
         const bare = wrapInterpolation(wrapExpr(node.expr))
         return `\${${bare}}`
@@ -2358,6 +2393,22 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
         // the SSR adapters' `renderExpression` byte-for-byte (byte parity):
         // empty at CSR mount too, since the expression is evaluated only
         // once init's createEffect runs, same as the SSR case.
+        //
+        // Slot unification Step B (`markerless`, decided once by
+        // `client-only-elision.ts` before this CSR pass runs; mirrors the
+        // nested `if (expr.markerless) return ''` shape all nine SSR
+        // adapters' `renderExpression` use inside their own identical
+        // `clientOnly && slotId` branch — see `spec/slot-unification.md`
+        // §5a): when the marker pair itself was ALSO elided, drop it and
+        // emit nothing. The claim plan resolves the elided slot via
+        // `elidedPath` (a precomputed child-index path), not a marker
+        // scan, so no anchor comment is needed here at all — matches SSR's
+        // fully-empty output for this case byte-for-byte (#2617; this is
+        // the second of the two top-level CSR emitters `irToHtmlTemplate`
+        // and `generateCsrTemplateWithOpts` that must each consult
+        // `markerless` — see that function's own check at this file's
+        // `case 'expression'` for why the two aren't collapsed into one).
+        if (node.markerless) return ''
         return `<!--bf:${node.slotId}--><!--/-->`
       }
       {

package/src/ir-to-client-js/reactivity.ts

@@ -671,8 +671,10 @@ export function collectLoopChildReactiveTexts(
  * `loopIndex` (Copilot review on #2595): see `collectLoopChildReactiveTexts`.
  */
 /** Does any name in `names` appear in `set`? Iterates rather than
- *  spreading — this runs per attribute (Copilot review). */
-function anyNameIn(names: Iterable<string>, set: ReadonlySet<string>): boolean {
+ *  spreading — this runs per attribute (Copilot review). Exported for
+ *  `collectLoopChildConditionals`'s `readsPreamble` check (#2596), the
+ *  condition-position twin of the attr check just below this uses it for. */
+export function anyNameIn(names: Iterable<string>, set: ReadonlySet<string>): boolean {
   for (const n of names) if (set.has(n)) return true
   return false
 }

package/src/ir-to-client-js/types.ts

@@ -578,6 +578,22 @@ export interface LoopChildConditional {
    * constants' own `freeIdentifiers`.
    */
   conditionFreeIdentifiers?: ReadonlySet<string>
+  /**
+   * `condition` references a `.map()` callback preamble-declared name
+   * (#2596, twin of `LoopChildReactiveAttr.readsPreamble` #2447) — the
+   * emitter must run the preamble ahead of evaluating the condition getter
+   * passed to `insert()`, since the local is not otherwise in scope there.
+   * Set whenever the condition mentions ANY preamble-declared name
+   * (`preambleNamesOf`), regardless of why the conditional was classified
+   * reactive — the scope obligation is the same either way. Whether the
+   * conditional is wired reactive AT ALL is the separate, stricter Phase-1
+   * question (`IRLoop.preamble.reactiveNames` via
+   * `markPreambleConditionalReactivity`, plus the ordinary signal/prop
+   * classifiers); `classifyReactivity` can't answer it from the token
+   * alone because `expandConstantForReactivity`'s shadow guard leaves a
+   * preamble-bound identifier unexpanded on purpose (#2482 Stage 1b).
+   */
+  readsPreamble?: boolean
 }
 
 export interface TopLevelLoop extends LoopCore {

package/src/ir-to-client-js/utils.ts

@@ -698,6 +698,21 @@ export interface LoopParamSpec {
  * avoiding post-hoc regex replacement on full template strings.
  *
  * Accepts either a bare param name or a spec carrying destructure bindings.
+ *
+ * #2482: this `loopParams` parameter (and the same-named param on
+ * `irToHtmlTemplate` / `irToPlaceholderTemplate` in `html-template.ts`,
+ * threaded through `collect-elements.ts` / `build-event-delegation.ts`) is
+ * NOT one of the ratchet's tracked ad-hoc scope devices, even though the
+ * ledger's textual pattern happens to match its spelling. `BindingScope`
+ * answers EXISTENCE/kind/depth queries about bound names; this ordered
+ * `ReadonlyArray<string | LoopParamSpec>` instead carries the ACCESSOR-
+ * REWRITE payload for outermost-to-innermost text substitution
+ * (`item` → `__bfItem().path`) — a rendering/codegen concern `BindingScope`
+ * has no field for by design, the client-JS-emitter twin of the Go
+ * adapter's `loopBindingStack` (see that field's docstring on
+ * `GoTemplateAdapter`). Order matters here (each nesting level's wrap
+ * composes over the previous), which is exactly what a scope EXISTENCE
+ * stack does not model.
  */
 export function wrapExprWithLoopParams(expr: string, loopParams?: ReadonlyArray<string | LoopParamSpec>): string {
   if (!loopParams) return expr

package/src/jsx-to-ir.ts

@@ -845,7 +845,7 @@ function makeBindingEnv(ctx: TransformContext): BindingEnvironment {
     // mutated (cached on the immutable `BindingScope`) — a stable
     // snapshot even if `ctx.scope` is later reassigned by an enclosing
     // visitor frame, which swaps the instance rather than mutating it.
-    loopParams: boundNames,
+    loopValueBoundNames: boundNames,
     checker: a.checker,
   }
   ctx._bindingEnv = env
@@ -5021,6 +5021,13 @@ function transformMapCall(
   // the row effect re-runs the preamble ahead of the write.
   if (preamble && !isStaticArray) {
     markPreambleAttrSlots(children, new Set(preamble.declaredNames), ctx)
+    // #2596 follow-up to the two passes above — the CONDITION-position twin.
+    // See `markPreambleConditionalReactivity`'s docstring for why this one is
+    // gated on `reactiveNames` (genuinely signal-derived) rather than the
+    // blanket `declaredNames` the region/attr passes use.
+    if (preamble.reactiveNames && preamble.reactiveNames.length > 0) {
+      markPreambleConditionalReactivity(children, new Set(preamble.reactiveNames), ctx)
+    }
   }
 
   // Collect nested components for both static and dynamic arrays.
@@ -5457,6 +5464,67 @@ function markPreambleAttrSlots(
   visit(nodes)
 }
 
+/**
+ * Grant the IR `reactive` flag (and a slot id) to a loop-body CONDITIONAL
+ * whose condition bare-references a preamble local that is itself reactive
+ * (#2596) — `reactiveNames`, computed by `computePreambleReactiveNames`.
+ *
+ * Root cause this closes: a plain (non-preamble) condition's `reactive` flag
+ * comes from `isReactiveExpression`/`isReactiveOrigin` run against the
+ * condition's OWN text at `transformConditional`/`transformLogicalAnd`/the
+ * if-else-chain builder — none of which know about an enclosing loop's
+ * `.map()` callback preamble (that's assembled and only becomes available
+ * on `IRLoop` after `children` is already built, same ordering constraint
+ * `collectPreambleRegions`/`markPreambleAttrSlots` work around). A condition
+ * that's just a bare reference to a preamble local (`label ? <A/> : <B/>`)
+ * therefore falls through every one of those classifiers with `reactive:
+ * false` even when `label`'s initializer reads a signal — the classifiers
+ * only ever see the token `label`, never its declaration.
+ *
+ * Deliberately narrower than `collectPreambleRegions`/`markPreambleAttrSlots`:
+ * those two mark ANY reference to `declaredNames` because their region-patch
+ * effect re-runs the WHOLE preamble unconditionally on row update, so a
+ * merely item-derived local (`const label = item.title`) still ends up
+ * correctly tracked by ordinary signal auto-tracking inside that effect —
+ * marking it reactive there costs nothing extra. A conditional is different:
+ * `reactive: true` here means Phase 2 wraps it in an `insert()` that swaps
+ * whole DOM subtrees, which is real cost and, for an item-only local, pure
+ * waste — the row already renders fresh whenever it's (re)constructed. So
+ * this only fires for `reactiveNames`, the subset PROVEN to depend on an
+ * actual external signal/memo/prop.
+ *
+ * Mirrors the sibling passes' traversal shape (conditional arms included).
+ */
+function markPreambleConditionalReactivity(
+  nodes: IRNode[],
+  reactiveNames: ReadonlySet<string>,
+  ctx: TransformContext,
+): void {
+  if (reactiveNames.size === 0) return
+  const visit = (list: IRNode[]): void => {
+    for (const node of list) {
+      switch (node.type) {
+        case 'element':
+        case 'fragment':
+          visit(node.children)
+          break
+        case 'conditional': {
+          if (!node.reactive) {
+            const refs = extractFreeIdentifiersFromText(node.condition)
+            if ([...refs].some((r) => reactiveNames.has(r))) {
+              node.reactive = true
+              if (!node.slotId) node.slotId = generateSlotId(ctx)
+            }
+          }
+          visit([node.whenTrue, ...(node.whenFalse ? [node.whenFalse] : [])])
+          break
+        }
+      }
+    }
+  }
+  visit(nodes)
+}
+
 /**
  * Expression-bearing source text of an attribute value, for the
  * free-identifier scan. Only used as a FALLBACK — an attribute normally
@@ -5503,6 +5571,52 @@ function collectPreambleDeclaredNames(stmt: ts.Statement, out: Set<string>): voi
   }
 }
 
+/**
+ * Which {@link MapCallbackPreamble.declaredNames} are themselves reactive —
+ * their OWN initializer reads a signal / memo / reactive prop, directly or
+ * transitively through an earlier declaration in the same preamble (#2596).
+ *
+ * Reuses the same Phase-1 classifier (`isReactiveExpression`) already applied
+ * to every non-preamble condition/attribute — this doesn't invent a second
+ * reactivity heuristic, it runs the existing one over one more declaration
+ * list. `ctx.patterns.constants` (the component-level constant chain
+ * `isSignalOrMemoReference`/`isPropsReference` already walk) doesn't reach
+ * these names — they're scoped to the `.map()` callback body, never added to
+ * `ctx.patterns` — so without this pass a preamble local reading a signal is
+ * invisible to the classifier.
+ *
+ * Value-declaration statements only (`const`/`let x = expr`, including
+ * destructuring targets, which mark every bound name reactive together since
+ * they share one initializer). A non-declaration preamble statement
+ * (assignment, loop, side-effecting call) contributes no reactive names —
+ * consistent with `neutralPreambleDeclarations`'s all-or-nothing DSL gate
+ * treating anything past that as un-lowerable, though this walk (client/JS-
+ * runtime SSR only) doesn't require the same all-or-nothing: it simply skips
+ * what it can't classify.
+ */
+function computePreambleReactiveNames(
+  statements: readonly ts.Statement[],
+  ctx: TransformContext,
+): Set<string> {
+  const reactiveNames = new Set<string>()
+  for (const stmt of statements) {
+    if (!ts.isVariableStatement(stmt)) continue
+    for (const decl of stmt.declarationList.declarations) {
+      if (!decl.initializer) continue
+      const boundNames = new Set<string>()
+      collectBindingNames(decl.name, boundNames)
+      const initText = ctx.getJS(decl.initializer)
+      const initFreeRefs = extractFreeIdentifiersFromNode(decl.initializer)
+      const readsEarlierReactive = [...initFreeRefs].some((r) => reactiveNames.has(r))
+      const isReactive = readsEarlierReactive || isReactiveExpression(initText, ctx, decl.initializer)
+      if (isReactive) {
+        for (const n of boundNames) reactiveNames.add(n)
+      }
+    }
+  }
+  return reactiveNames
+}
+
 /**
  * Build a {@link MapCallbackPreamble} from value-only (JSX-free) pre-return
  * statements — the Stage-2 fold preamble and the plain block-body preamble.
@@ -5526,6 +5640,7 @@ function preambleFromValueStatements(
     typedParts.push(raw0.endsWith(';') ? raw0 : raw0 + ';')
     segments.push(tjs !== js ? { kind: 'js', text: js, templateText: tjs } : { kind: 'js', text: js })
   }
+  const reactiveNames = computePreambleReactiveNames(statements, ctx)
   return {
     segments: trimPreambleSegments(segments),
     ssrText: tsxSourceText(typedParts.join(' ')),
@@ -5533,6 +5648,7 @@ function preambleFromValueStatements(
     // Value-only preambles accumulate no JSX, so no child needs the array join.
     builderNames: [],
     declarations: neutralPreambleDeclarations(statements, ctx) ?? undefined,
+    reactiveNames: reactiveNames.size > 0 ? [...reactiveNames] : undefined,
   }
 }