@barefootjs/jsx 0.24.1 → 0.26.0

package/src/errors.ts

@@ -90,6 +90,7 @@ export const ErrorCodes = {
   REACTIVE_FACTORY_RENAME_UNSUPPORTED: 'BF111',
   REACTIVE_FACTORY_MODULE_CAPTURE: 'BF112',
   REACTIVE_FACTORY_IMPORT_COLLISION: 'BF113',
+  REACTIVE_FACTORY_PARAM_SHADOWED: 'BF114',
 } as const
 
 export type ErrorCode = (typeof ErrorCodes)[keyof typeof ErrorCodes]
@@ -184,6 +185,9 @@ const errorMessages: Record<ErrorCode, string> = {
     'Inlining an imported reactive factory requires re-importing one of its helper ' +
     'imports into this file, but that name is already bound here to something else. ' +
     "Rename the conflicting binding in this file, or alias the import in the factory's own file.",
+
+  [ErrorCodes.REACTIVE_FACTORY_PARAM_SHADOWED]:
+    'Reactive factory parameter is shadowed by a nested declaration inside the factory body, so argument substitution at the inline site would be ambiguous. Rename the inner binding so it does not collide with the parameter.',
 }
 
 // =============================================================================

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

@@ -1246,8 +1246,13 @@ export function collectLoopChildBindings(
   const bindings = emptyLoopChildBindings()
   for (const child of children) {
     bindings.events.push(...collectLoopChildEventsWithNesting(child))
-    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings))
-    bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings))
+    // stopAtReactiveConditionals=true (#2347): this function always also
+    // collects nested reactive conditionals below via
+    // `collectLoopChildConditionals`, which gives each its own insert() +
+    // arm-scoped attrs/texts (`LoopChildBranchSummary.reactiveAttrs` /
+    // `.reactiveTexts`) — descending into them here too would double-bind.
+    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings, true))
+    bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings, true))
     bindings.refs.push(...collectLoopChildRefs(child))
     bindings.conditionals.push(...collectLoopChildConditionals(child, ctx, siblingOffsets, loopParam, loopParamBindings))
   }
@@ -1342,5 +1347,26 @@ function summarizeLoopChildBranch(
     innerLoops: inner.length > 0 ? inner : undefined,
     conditionals: collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings),
     events: collectConditionalBranchEvents(node),
+    // Loop-param-aware — reuses the flat loop-item collectors scoped to just
+    // this branch's subtree. Both already stop descending into any further
+    // nested reactive conditional (own insert()/arm), so calling them here
+    // on the branch root yields exactly this branch's direct bindings
+    // without re-collecting what a nested arm already owns (#2347).
+    reactiveAttrs: collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, true),
+    // Skip when the branch's ENTIRE content is a single bare `expression`
+    // (no wrapping element) — e.g. a hoisted `renderNode={(n) => <Pill/>}`
+    // callback (#1211/#1213). That value is already fully re-evaluated and
+    // spliced via `__bfSlot` whenever `insert()` (re-)mounts this branch;
+    // an *additional* nested createEffect for the same expression re-calls
+    // it and creates a second, independent live element (a JSX-callback
+    // result isn't idempotent to re-invoke the way a plain signal read is),
+    // and the loop-child arm's `$t()`-based anchor lookup — designed for
+    // text nodes — doesn't cleanly displace an already-mounted Element,
+    // so the second instance lands beside the first instead of replacing
+    // it. A text *nested inside* a static wrapper element in the branch
+    // (the element-descent case) is unaffected and still collected below.
+    reactiveTexts: node.type === 'expression'
+      ? []
+      : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true),
   }
 }

package/src/ir-to-client-js/control-flow/plan/build-loop-child-arm.ts

@@ -11,6 +11,8 @@ import type {
   LoopChildBranchSummary,
   LoopChildConditional,
   LoopChildEvent,
+  LoopChildReactiveAttr,
+  LoopChildReactiveText,
   NestedLoop,
 } from '../../types.ts'
 import type {
@@ -20,9 +22,10 @@ import type {
   IRProp,
   LoopParamBinding,
 } from '../../../types.ts'
-import { AttrValueOf } from '../../../types.ts'
+import { AttrValueOf, pickAttrMeta } from '../../../types.ts'
 import { quotePropName, wrapLoopParamAsAccessor, attrValueToString } from '../../utils.ts'
 import { addCondAttrToTemplate, irChildrenToJsExpr } from '../../html-template.ts'
+import type { ReactiveAttrSlot } from './reactive-effects.ts'
 
 /**
  * Apply a string-level expression rewriter (loop-param-accessor wrap, prop
@@ -381,6 +384,56 @@ export function buildLoopChildConditionalsPlan(
   return plans
 }
 
+/**
+ * Group a branch's reactive attrs by child slot (one qsa per slot),
+ * pre-wrapping each expression via the supplied loop-param wrap closure.
+ * Shared by every arm builder — outer conditional arms and recursively
+ * nested ones alike — so an attr binds inside whichever arm directly owns
+ * its element, never a stale outer scope (#2347).
+ */
+export function buildArmAttrsPlan(
+  attrs: readonly LoopChildReactiveAttr[] | undefined,
+  wrap: (expr: string) => string,
+): readonly ReactiveAttrSlot[] {
+  if (!attrs || attrs.length === 0) return []
+  const bySlot = new Map<string, LoopChildReactiveAttr[]>()
+  for (const attr of attrs) {
+    let bucket = bySlot.get(attr.childSlotId)
+    if (!bucket) {
+      bucket = []
+      bySlot.set(attr.childSlotId, bucket)
+    }
+    bucket.push(attr)
+  }
+  const slots: ReactiveAttrSlot[] = []
+  for (const [slotId, slotAttrs] of bySlot) {
+    slots.push({
+      slotId,
+      attrs: slotAttrs.map(attr => ({
+        attrName: attr.attrName,
+        wrappedExpression: wrap(attr.expression),
+        meta: pickAttrMeta(attr),
+      })),
+    })
+  }
+  return slots
+}
+
+/**
+ * Pre-wrap a branch's reactive text interpolations via the supplied
+ * loop-param wrap closure. Shared by every arm builder (#2347).
+ */
+export function buildArmTextsPlan(
+  texts: readonly LoopChildReactiveText[] | undefined,
+  wrap: (expr: string) => string,
+): readonly import('./loop-child-arm.ts').LoopChildArmText[] {
+  if (!texts || texts.length === 0) return []
+  return texts.map(text => ({
+    slotId: text.slotId,
+    wrappedExpression: wrap(text.expression),
+  }))
+}
+
 interface BuildLoopChildArmArgs {
   branch: LoopChildBranchSummary
   wrap: (expr: string) => string
@@ -413,6 +466,7 @@ function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
       loopParam,
       loopParamBindings,
     }),
-    texts: [],
+    attrs: buildArmAttrsPlan(branch.reactiveAttrs, wrap),
+    texts: buildArmTextsPlan(branch.reactiveTexts, wrap),
   }
 }

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

@@ -3,17 +3,20 @@
  *
  * Decisions resolved at build time (no longer in the stringifier):
  *   1. Group reactive attrs by `childSlotId` (one qsa() lookup per slot).
+ *      `attrs` only ever carries outer-scope entries — the collector that
+ *      produces it already stops descending into reactive conditionals
+ *      (#2347), so no branch/outer partition is needed here.
  *   2. Wrap every attr / text / condition expression via
  *      `wrapLoopParamAsAccessor` so the stringifier never touches the wrap.
- *   3. Partition reactive texts: those whose slot id appears inside any
- *      conditional branch HTML must be emitted *inside* that branch's
- *      `bindEvents` (insert() may replace the DOM nodes), the rest stay in
- *      the outer renderItem scope.
+ *   3. Each conditional arm gets its own reactive attrs / texts directly
+ *      from `LoopChildBranchSummary.reactiveAttrs` / `.reactiveTexts` —
+ *      collected per-branch, recursively, so a doubly-nested conditional's
+ *      arm carries its own bindings instead of an outer scope reaching in.
  *   4. Apply `addCondAttrToTemplate` to the wrapped branch HTML so the
  *      stringifier emits a ready-to-interpolate template literal.
  *   5. Recurse into the per-arm sub-plans via `LoopChildArmPlan` —
- *      events, child component inits, inner loops, nested conditionals.
- *      No legacy passthrough remains.
+ *      events, child component inits, inner loops, nested conditionals,
+ *      attrs, texts. No legacy passthrough remains.
  */
 
 import type {
@@ -28,15 +31,14 @@ import { pickAttrMeta } from '../../../types.ts'
 import { wrapLoopParamAsAccessor } from '../../utils.ts'
 import { addCondAttrToTemplate } from '../../html-template.ts'
 import {
+  buildArmAttrsPlan,
+  buildArmTextsPlan,
   buildBranchChildComponentInitsPlan,
   buildBranchEventBindingsPlan,
   buildBranchInnerLoopsPlan,
   buildLoopChildConditionalsPlan,
 } from './build-loop-child-arm.ts'
-import type {
-  LoopChildArmPlan,
-  LoopChildArmText,
-} from './loop-child-arm.ts'
+import type { LoopChildArmPlan } from './loop-child-arm.ts'
 import type {
   NestedConditionalPlan,
   ReactiveAttrSlot,
@@ -84,57 +86,31 @@ export function buildReactiveEffectsPlan(
     })
   }
 
-  // 2. Identify text slots that must be deferred into a conditional branch's
-  //    bindEvents. The check mirrors the legacy `cond.whenXxxHtml.includes(
-  //    'bf:' + slotId)` heuristic — the rendered template HTML is the only
-  //    pre-runtime signal available.
-  const textSlotsInConditionals = new Set<string>()
-  if (conditionals) {
-    for (const cond of conditionals) {
-      for (const text of texts) {
-        if (
-          cond.whenTrueHtml.includes(`bf:${text.slotId}`) ||
-          cond.whenFalseHtml.includes(`bf:${text.slotId}`)
-        ) {
-          textSlotsInConditionals.add(text.slotId)
-        }
-      }
-    }
-  }
-
-  const outerTexts: ReactiveTextEffect[] = []
-  for (const text of texts) {
-    if (textSlotsInConditionals.has(text.slotId)) continue
-    outerTexts.push({
-      slotId: text.slotId,
-      wrappedExpression: wrap(text.expression),
-    })
-  }
+  // 2. Outer text effects. `texts` (elem.bindings.reactiveTexts) is produced
+  //    by `collectLoopChildReactiveTexts`, which already stops descending
+  //    into any reactive (slotId'd) conditional — so every entry here is
+  //    genuinely outer-scope, no HTML-substring partition needed (#2347).
+  const outerTexts: ReactiveTextEffect[] = texts.map(text => ({
+    slotId: text.slotId,
+    wrappedExpression: wrap(text.expression),
+  }))
 
-  // 3. Per-conditional plans. Branch-scoped texts are partitioned by which
-  //    branch HTML mentions the slot (declaration order preserved). The
-  //    arm bodies are fully Plan-built — no legacy passthrough.
+  // 3. Per-conditional plans. Each arm's own reactive attrs / texts come
+  //    from `LoopChildBranchSummary.reactiveAttrs` / `.reactiveTexts` —
+  //    collected directly on that branch's subtree (#2347) — instead of a
+  //    flat list partitioned by searching the rendered branch HTML for a
+  //    `bf:<slotId>` marker. The arm bodies are fully Plan-built — no
+  //    legacy passthrough.
   const conditionalPlans: NestedConditionalPlan[] = []
   if (conditionals) {
     for (const cond of conditionals) {
-      const trueTexts: LoopChildArmText[] = []
-      const falseTexts: LoopChildArmText[] = []
-      for (const text of texts) {
-        if (!textSlotsInConditionals.has(text.slotId)) continue
-        const wrapped: LoopChildArmText = {
-          slotId: text.slotId,
-          wrappedExpression: wrap(text.expression),
-        }
-        if (cond.whenTrueHtml.includes(`bf:${text.slotId}`)) trueTexts.push(wrapped)
-        if (cond.whenFalseHtml.includes(`bf:${text.slotId}`)) falseTexts.push(wrapped)
-      }
       conditionalPlans.push({
         slotId: cond.slotId,
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, trueTexts, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, falseTexts, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
       })
     }
   }
@@ -149,7 +125,6 @@ export function buildReactiveEffectsPlan(
 
 function buildOuterArm(
   branch: LoopChildBranchSummary,
-  texts: readonly LoopChildArmText[],
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
@@ -179,7 +154,8 @@ function buildOuterArm(
       loopParam,
       loopParamBindings,
     }),
-    texts,
+    attrs: buildArmAttrsPlan(branch.reactiveAttrs, wrap),
+    texts: buildArmTextsPlan(branch.reactiveTexts, wrap),
   }
 }
 

package/src/ir-to-client-js/control-flow/plan/loop-child-arm.ts

@@ -152,8 +152,7 @@ export type BranchInnerLoopsPlan = readonly BranchInnerLoop[]
 
 /**
  * One branch-scoped reactive text effect (slotId + already-wrapped
- * expression). The top-level outer conditional's arms emit these inside
- * `bindEvents`; recursive nested conditionals never carry texts.
+ * expression), attached inside the arm's `bindEvents`.
  */
 export interface LoopChildArmText {
   slotId: string
@@ -169,16 +168,23 @@ export interface LoopChildArmText {
  *   - `childComponents`   — `buildBranchChildComponentInitsPlan`
  *   - `innerLoops`        — `buildBranchInnerLoopsPlan`
  *   - `nestedConditionals`— `buildLoopChildConditionalPlan` (recursive)
+ *   - `attrs`             — reactive attrs on elements directly inside the
+ *     arm, grouped by slot (#2347)
+ *   - `texts`             — reactive text interpolations on elements
+ *     directly inside the arm (#2347)
  *
- * `texts` is only populated for the *outer* conditional — the recursion
- * branch (`emitNestedLoopChildConditionals` legacy) never threaded text
- * effects through, so nested arms always carry an empty list.
+ * Both `attrs` and `texts` are collected per-arm at every nesting depth —
+ * an element inside a doubly-nested conditional gets its bindings from the
+ * innermost enclosing arm, never from an outer scope's own initial-clone
+ * query, so a branch swap (`insert()` mounting a fresh node) never leaves a
+ * binding pointed at a detached element.
  */
 export interface LoopChildArmPlan {
   events: BranchEventBindingsPlan
   childComponents: BranchChildComponentInitsPlan
   innerLoops: BranchInnerLoopsPlan
   nestedConditionals: readonly LoopChildConditionalPlan[]
+  attrs: readonly import('./reactive-effects.ts').ReactiveAttrSlot[]
   texts: readonly LoopChildArmText[]
 }
 

package/src/ir-to-client-js/control-flow/stringify/loop-child-arm.ts

@@ -13,6 +13,7 @@
 
 import { varSlotId, DATA_BF_PH, keyAttrName, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
+import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { templateRootIsSvg } from './template-parse.ts'
 import { emitListenerLine } from './event-listener.ts'
 import { nameForRegistryRef } from '../../component-scope.ts'
@@ -23,6 +24,43 @@ import type {
   LoopChildArmPlan,
   LoopChildConditionalPlan,
 } from '../plan/loop-child-arm.ts'
+import type { ReactiveAttrSlot } from '../plan/reactive-effects.ts'
+
+/**
+ * Emit reactive attribute effects for one arm — one qsa() per slot, then one
+ * `createDisposableEffect` per attr on that slot, pushed onto the caller's
+ * `__disposers` array. Mirrors the outer renderItem-scope attr emission in
+ * `stringifyReactiveEffects` (#2347): binding attrs inside the arm that owns
+ * the element (instead of an outer scope's own initial clone) means a branch
+ * swap's fresh `insert()`-mounted node is always the one the effect targets.
+ *
+ * `createDisposableEffect` (not `createEffect`) so the caller's `bindEvents`
+ * can return a cleanup that disposes this effect on the NEXT branch swap —
+ * otherwise it would keep running against the node this branch swap just
+ * detached, and every subsequent swap stacks another orphaned effect.
+ * Callers must declare `const __disposers = []` before emitting this and
+ * return `() => __disposers.forEach(d => d())` from `bindEvents`.
+ */
+export function stringifyBranchReactiveAttrs(
+  lines: string[],
+  plan: readonly ReactiveAttrSlot[],
+  indent: string,
+  pc?: string,
+): void {
+  for (const slot of plan) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`
+    lines.push(`${indent}{ const ${varName} = qsa(__branchScope, '[bf="${slot.slotId}"]')`)
+    lines.push(`${indent}if (${varName}) {`)
+    for (const attr of slot.attrs) {
+      lines.push(`${indent}  __disposers.push(createDisposableEffect(() => {`)
+      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
+        lines.push(`${indent}    ${stmt}`)
+      }
+      lines.push(`${indent}  }${profileBindingId(pc, slot.slotId)}))`)
+    }
+    lines.push(`${indent}} }`)
+  }
+}
 
 /**
  * Emit `addEventListener` setup for a loop-cond branch arm. One qsa() per
@@ -176,7 +214,15 @@ function stringifyLoopChildConditional(
   lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
 
-function stringifyLoopChildArm(
+/**
+ * Emit one arm's full body: events, child component inits, inner loops,
+ * then a disposable section (reactive attrs, nested conditionals, texts)
+ * whose aggregate cleanup `bindEvents` returns to `insert()` (#2347 follow-up).
+ * Shared by both the loop-scoped-conditional stringifier in this file and
+ * the outer (top-of-loop-item) conditional stringifier in
+ * `reactive-effects.ts` — the two arm shapes are identical.
+ */
+export function stringifyLoopChildArm(
   lines: string[],
   arm: LoopChildArmPlan,
   armIndent: string,
@@ -185,10 +231,38 @@ function stringifyLoopChildArm(
   stringifyBranchEventBindings(lines, arm.events, armIndent)
   stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
   stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent, pc)
-  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent, pc)
+
+  // Disposable section: reactive attrs + text effects + nested conditionals.
+  // `bindEvents` returns the aggregate cleanup so `insert()` disposes this
+  // arm's scoped effects (and any nested insert()'s own effect tree) before
+  // the NEXT branch swap — otherwise they'd keep running against the node
+  // this swap just detached, stacking another orphaned effect on every
+  // subsequent toggle (#2347 follow-up).
+  const hasDisposables = arm.attrs.length > 0 || arm.texts.length > 0 || arm.nestedConditionals.length > 0
+  if (!hasDisposables) return
+
+  lines.push(`${armIndent}const __disposers = []`)
+  stringifyBranchReactiveAttrs(lines, arm.attrs, armIndent, pc)
+
+  // Nested conditionals: each inner `insert()` is wrapped in its own
+  // disposable effect so disposing THIS entry cascades to whatever
+  // reactive state that insert() set up internally (mirrors the top-level
+  // conditional's nested-conditional handling in stringify/insert.ts).
+  for (const cond of arm.nestedConditionals) {
+    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => {`)
+    stringifyLoopChildConditional(lines, cond, `${armIndent}  `, pc)
+    lines.push(`${armIndent}}))`)
+  }
+
   for (const text of arm.texts) {
+    // __bfText (not a naive `.textContent = String(...)`) so a Child-position
+    // expression whose value is a live Node (e.g. a hoisted `renderNode={(n)
+    // => <PillNode/>}` callback, #1213) is spliced into the slot by identity
+    // instead of being stringified to "[object HTMLElement]" (#2347).
     const varName = `__rt_${varSlotId(text.slotId)}`
-    lines.push(`${armIndent}{ const [${varName}] = $t(__branchScope, '${text.slotId}')`)
-    lines.push(`${armIndent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}) }`)
+    lines.push(`${armIndent}let ${varName} = $t(__branchScope, '${text.slotId}')[0]`)
+    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${varName} = __bfText(${varName}, ${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}))`)
   }
+
+  lines.push(`${armIndent}return () => __disposers.forEach(d => d())`)
 }

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

@@ -10,13 +10,7 @@
 
 import { varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
-import {
-  stringifyBranchChildComponentInits,
-  stringifyBranchEventBindings,
-  stringifyBranchInnerLoops,
-  stringifyLoopChildConditionals,
-} from './loop-child-arm.ts'
-import type { LoopChildArmPlan, LoopChildArmText } from '../plan/loop-child-arm.ts'
+import { stringifyLoopChildArm } from './loop-child-arm.ts'
 import type {
   NestedConditionalPlan,
   ReactiveEffectsPlan,
@@ -126,28 +120,12 @@ function emitOuterConditional(
   lines.push(`${indent}insert(${elVar}, '${cond.slotId}', () => ${cond.wrappedCondition}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, cond.whenTrueArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenFalseTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, cond.whenFalseArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
-
-function emitArmBody(lines: string[], arm: LoopChildArmPlan, armIndent: string, pc: string | undefined): void {
-  stringifyBranchEventBindings(lines, arm.events, armIndent)
-  stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
-  stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent, pc)
-  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent, pc)
-  for (const text of arm.texts) {
-    emitArmText(lines, armIndent, text, pc)
-  }
-}
-
-function emitArmText(lines: string[], indent: string, text: LoopChildArmText, pc: string | undefined): void {
-  const varName = `__rt_${varSlotId(text.slotId)}`
-  lines.push(`${indent}{ const [${varName}] = $t(__branchScope, '${text.slotId}')`)
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}) }`)
-}

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

@@ -265,14 +265,32 @@ export function collectEventHandlersFromIR(node: IRNode): string[] {
 /**
  * Traverse an IR tree depth-first, calling visitor for each element node.
  * Shared by collectConditionalBranchEvents, collectConditionalBranchRefs,
- * and collectLoopChildEvents to avoid duplicating the traversal logic.
+ * collectLoopChildRefs, and collectLoopChildEvents to avoid duplicating the
+ * traversal logic.
  *
  * 'loop' is intentionally skipped. Nested .map() event delegation requires
  * a different approach (nested data-key lookup + inner loop variable
  * resolution) that isn't implemented yet. See memory:
  * compiler-reconcile-templates-events.md
+ *
+ * `stopAtReactiveConditionals` (#2347): when true, a nested `conditional`
+ * with a `slotId` is NOT descended into — the caller is one that also
+ * separately collects that nested conditional via `collectBranchConditionals`
+ * / `collectLoopChildConditionals` and gives it its own `insert()` call, so
+ * descending here too would double-bind (against the enclosing scope's own
+ * initial template node, in addition to the nested conditional's own
+ * `bindEvents` against whatever node `insert()` mounts). Defaults to false
+ * because several callers (e.g. a plain nested `.map()`'s own per-item
+ * bindings, `collectInnerLoops`'s non-branch path) have no such sibling
+ * collector — for those, a slotId'd conditional's content is ONLY ever
+ * reachable by unconditionally descending here, since it's inlined directly
+ * into that scope's template rather than switched via its own `insert()`.
  */
-function traverseElements(node: IRNode, visitor: (el: IRElement, domDepth: number) => void): void {
+function traverseElements(
+  node: IRNode,
+  visitor: (el: IRElement, domDepth: number) => void,
+  stopAtReactiveConditionals = false,
+): void {
   walkIR(node, 0, {
     element: ({ node: el, scope: domDepth, descend }) => {
       visitor(el, domDepth)
@@ -281,12 +299,25 @@ function traverseElements(node: IRNode, visitor: (el: IRElement, domDepth: numbe
     loop: () => {
       // skip: nested-loop event delegation is handled separately
     },
+    ...(stopAtReactiveConditionals
+      ? {
+          conditional: ({ node: c, scope: domDepth, descend }: { node: IRNode & { type: 'conditional' }; scope: number; descend: (s: number) => void }) => {
+            if (!c.slotId) descend(domDepth)
+          },
+        }
+      : {}),
   })
 }
 
 /**
  * Collect events from a conditional branch for use with insert().
  * These events will be bound via the branch's bindEvents function.
+ *
+ * Always stops at a nested reactive conditional (#2347): every caller
+ * (`summarizeBranch`, `summarizeLoopChildBranch`) also collects that nested
+ * conditional separately (`collectBranchConditionals` /
+ * `collectLoopChildConditionals`), so its own `insert()`/bindEvents owns
+ * its events.
  */
 export function collectConditionalBranchEvents(node: IRNode): ConditionalBranchEvent[] {
   const events: ConditionalBranchEvent[] = []
@@ -300,13 +331,17 @@ export function collectConditionalBranchEvents(node: IRNode): ConditionalBranchE
         })
       }
     }
-  })
+  }, true)
   return events
 }
 
 /**
  * Collect refs from a conditional branch for use with insert().
  * These refs will be called via the branch's bindEvents function.
+ *
+ * Always stops at a nested reactive conditional (#2347): its sole caller
+ * (`summarizeBranch`) also collects that nested conditional separately via
+ * `collectBranchConditionals`, so its own `insert()`/bindEvents owns its refs.
  */
 export function collectConditionalBranchRefs(node: IRNode): ConditionalBranchRef[] {
   const refs: ConditionalBranchRef[] = []
@@ -317,7 +352,7 @@ export function collectConditionalBranchRefs(node: IRNode): ConditionalBranchRef
         callback: el.ref,
       })
     }
-  })
+  }, true)
   return refs
 }
 
@@ -511,12 +546,21 @@ function traverseForComponents(
  * Includes expressions that read signals OR reference the loop parameter.
  * With per-item signals, loop param access (item().text) is reactive
  * because item is a signal accessor.
+ *
+ * `stopAtReactiveConditionals` (#2347): pass true only when the caller also
+ * separately collects nested reactive conditionals (via
+ * `collectLoopChildConditionals`) and gives each its own `insert()` /
+ * bindEvents — otherwise a text inside such a conditional would bind twice.
+ * Defaults to false: some callers (e.g. a plain nested `.map()`'s own
+ * per-item bindings) have no sibling conditional collector, so a slotId'd
+ * conditional's inlined content is only ever reachable by descending here.
  */
 export function collectLoopChildReactiveTexts(
   node: IRNode,
   ctx: ClientJsContext,
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
+  stopAtReactiveConditionals = false,
 ): LoopChildReactiveText[] {
   const texts: LoopChildReactiveText[] = []
   walkIR(node, false, {
@@ -549,8 +593,13 @@ export function collectLoopChildReactiveTexts(
         ...(expanded.freeIds !== undefined && { freeIdentifiers: expanded.freeIds }),
       })
     },
-    conditional: ({ descend }) => {
-      descend(true)
+    conditional: ({ node: c, descend }) => {
+      // When stopAtReactiveConditionals is set, a reactive conditional
+      // (slotId set) gets its own insert() call that rebinds its branch
+      // text effects independently — descending here too would bind the
+      // same expression twice, once against the enclosing scope's initial
+      // node and once against insert()'s mounted node (#2347).
+      if (!stopAtReactiveConditionals || !c.slotId) descend(true)
     },
   })
   return texts
@@ -560,12 +609,17 @@ export function collectLoopChildReactiveTexts(
  * Collect reactive attributes from loop children.
  * These are dynamic attributes that read signals and need createEffect
  * to update the DOM when signals change.
+ *
+ * `stopAtReactiveConditionals` (#2347): see `collectLoopChildReactiveTexts` —
+ * same semantics. Pass true only when the caller also separately collects
+ * nested reactive conditionals and gives each its own `insert()`.
  */
 export function collectLoopChildReactiveAttrs(
   node: IRNode,
   ctx: ClientJsContext,
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
+  stopAtReactiveConditionals = false,
 ): LoopChildReactiveAttr[] {
   const attrs: LoopChildReactiveAttr[] = []
   traverseElements(node, (el) => {
@@ -617,6 +671,6 @@ export function collectLoopChildReactiveAttrs(
         })
       }
     }
-  })
+  }, stopAtReactiveConditionals)
   return attrs
 }

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

@@ -512,6 +512,19 @@ export interface LoopChildBranchSummary {
   conditionals?: LoopChildConditional[]
   /** Events on elements inside the branch — attached via insert() bindEvents (#839). */
   events?: ConditionalBranchEvent[]
+  /**
+   * Reactive attrs on elements directly inside the branch — attached via
+   * insert() bindEvents (#2347). Collected loop-param-aware so `u().active`
+   * style loop-item accessors classify as reactive; stops at any further
+   * nested reactive conditional (which gets its own insert() + arm).
+   */
+  reactiveAttrs?: LoopChildReactiveAttr[]
+  /**
+   * Reactive text interpolations on elements directly inside the branch —
+   * attached via insert() bindEvents (#2347). Same loop-param-aware /
+   * nested-conditional-stopping semantics as `reactiveAttrs`.
+   */
+  reactiveTexts?: LoopChildReactiveText[]
 }
 
 export interface LoopChildConditional {