@barefootjs/jsx 0.33.0 → 0.33.1

package/src/__tests__/return-through-local-var.test.ts

@@ -0,0 +1,269 @@
+/**
+ * Regression tests for #2720: a component whose render is bound to a local
+ * const and returned by name —
+ *
+ *   export function Button() {
+ *     const __root = (<button>Go</button>)
+ *     return __root
+ *   }
+ *
+ * — previously produced `{files: [], errors: []}`: neither sound (nothing
+ * emitted) nor loud (nothing reported). Two structural variants of this
+ * shape need two separate detectors, both landing here:
+ *
+ * 1. **Flat** (statements are direct children of the component body, as
+ *    written above): `ctx.jsxReturn` DOES get set (to the `__root`
+ *    Identifier — `visitComponentBody`'s return handler captures any
+ *    return expression, not just syntactic JSX), but return position never
+ *    resolves an identifier through its initializer the way JSX-child
+ *    position does via `jsxConstants` / `inlineableJsxConsts` (#547 /
+ *    #1409) — so `transformJsxExpression`'s scalar-leaf case returns `null`
+ *    and `buildIRRoot` (`jsx-to-ir.ts`) drops the component silently. Fixed
+ *    there: recognize a bare Identifier at return position that names a
+ *    local already proven to hold JSX by those two maps, and report BF027
+ *    instead of dropping it.
+ *
+ * 2. **Nested-block** (`{ const __root = <jsx/>; return __root }` as a
+ *    single block statement — the exact shape the #2481 mutation sweep's
+ *    `block-body` mutation produces by wrapping the ORIGINAL return
+ *    statement): the block is a direct child of the component body, so
+ *    `visitComponentBody`'s opaque-block preservation (#930 — "a bare
+ *    block at the top of a component body is inert side-effect scoping,
+ *    preserve it verbatim, don't recurse") swallows it whole. Neither
+ *    `jsxConstants` nor `jsxReturn` are EVER set, so the flat-case fix
+ *    above never runs. Fixed in `analyzer.ts`'s `visitComponentBody`:
+ *    before preserving such a block, `findBlockBodyReturnedJsxLocalName`
+ *    checks whether it is exactly this "name the JSX, then return the
+ *    name" shape and reports BF027 directly.
+ *
+ * The "faithful" fix (resolving the identifier through its initializer so
+ * the component actually compiles, for either variant) is tracked
+ * separately by #2720 and not implemented here — this PR is the loud
+ * stopgap only.
+ *
+ * Found by the #2481 mutation sweep's `block-body` mutation
+ * (`packages/adapter-tests/mutation/mutations.ts`, the nested-block shape
+ * above): 41/41 corpus fixtures reproduced this identically before this
+ * fix, classified `broken` with `refused` at 0. This fix flips them to
+ * `refused` (a pass under the sound-or-loud trichotomy).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('BF027: return-through-local-variable is not recognized as JSX (#2720)', () => {
+  test('function component: `const __root = (<jsx/>); return __root` reports BF027 instead of silently emitting nothing', () => {
+    const source = `
+      export function Button() {
+        const __root = (<button>Go</button>)
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+
+    // Neither silent-drop nor silent-emit: no files, but a loud diagnostic.
+    expect(result.files).toHaveLength(0)
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.severity).toBe('error')
+    expect(bf027!.message).toContain('Button')
+    expect(bf027!.message).toMatch(/not recognized as JSX/)
+  })
+
+  test('arrow component: same shape via `export const Button = () => {...}`', () => {
+    const source = `
+      export const Button = () => {
+        const __root = <button>Go</button>
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('non-root JSX initializer (ternary) through a local also reports BF027', () => {
+    const source = `
+      export function Button({ ok }: { ok: boolean }) {
+        const __root = ok ? <button>Go</button> : <span>No</span>
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('nested-block shape (the actual mutation-sweep output): `{ const __root = <jsx/>; return __root }` reports BF027', () => {
+    // This is the shape `packages/adapter-tests/mutation/mutations.ts`'s
+    // `blockBody` mutation actually produces (it wraps the ORIGINAL return
+    // statement in a new block rather than splicing the const/return in as
+    // top-level statements) — structurally distinct from the flat case
+    // above because the block is opaque to `visitComponentBody` (#930).
+    const source = `
+      export function Button() {
+        {
+          const __root = <button>Go</button>
+          return __root
+        }
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.message).toContain('Button')
+  })
+
+  test('nested-block shape with a ternary JSX initializer also reports BF027', () => {
+    const source = `
+      export function Button({ ok }: { ok: boolean }) {
+        {
+          const __root = ok ? <button>Go</button> : <span>No</span>
+          return __root
+        }
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('nested-block shape with a `.map()`-with-JSX-callback initializer also reports BF027', () => {
+    // `initializerShapeContainsJsx` stops at arrow boundaries, so this
+    // variant needs the same `isMapLikeCallWithJsx` check `collectConstant`
+    // uses (#1554) — without it this shape slipped back into the silent
+    // drop even after BF027 landed (Copilot review on #2726).
+    const source = `
+      export function List() {
+        {
+          const __root = ['a', 'b'].map((item) => <div>{item}</div>)
+          return __root
+        }
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.message).toContain('List')
+  })
+
+  test('flat shape with a `.map()`-with-JSX-callback initializer reports BF027 (via inlineableJsxConsts)', () => {
+    const source = `
+      export function List() {
+        const __root = ['a', 'b'].map((item) => <div>{item}</div>)
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('multi-component file: the broken sibling is flagged but the good sibling still compiles', () => {
+    const source = `
+      export function Good() { return <div>ok</div> }
+      export function Bad() {
+        const __root = <button>Go</button>
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Multi.tsx', { adapter })
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.message).toContain('Bad')
+    // Good still produces output despite Bad's failure.
+    expect(result.files.length).toBeGreaterThan(0)
+  })
+
+  describe('control: direct JSX return keeps compiling clean', () => {
+    test('function component returning JSX directly has no BF027 and produces files', () => {
+      const source = `
+        export function Button() {
+          return (<button>Go</button>)
+        }
+      `
+      const result = compileJSX(source, 'Button.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+      expect(result.files.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('no false positive: PascalCase exports that legitimately do not return JSX stay silent', () => {
+    test('a PascalCase function returning a plain object is untouched (not a component at all)', () => {
+      const source = `
+        export function CreateUser() {
+          return { name: 'x' }
+        }
+      `
+      const result = compileJSX(source, 'CreateUser.tsx', { adapter })
+      // Pre-existing behaviour for a non-component PascalCase export:
+      // no files, no errors. BF027 must not fire here — there is no local
+      // proven to hold JSX anywhere in this function.
+      expect(result.files).toHaveLength(0)
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+    })
+
+    test('render-nothing literals (null / <></> / false) returned directly stay clean', () => {
+      const source = `
+        export function ReturnsNull() { return null }
+        export function ReturnsFragment() { return <></> }
+        export function ReturnsFalse(): any { return false }
+      `
+      const result = compileJSX(source, 'ReturnsNull.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+    })
+
+    test('a local const unrelated to JSX does not spuriously trip BF027', () => {
+      const source = `
+        export function Button() {
+          const count = 1
+          return <button>{count}</button>
+        }
+      `
+      const result = compileJSX(source, 'Button.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+      expect(result.files.length).toBeGreaterThan(0)
+    })
+
+    test('an ordinary top-level scoping block with no returned local is untouched', () => {
+      // A bare block used for legitimate imperative scoping ahead of the
+      // real render — #930's opaque-block preservation path — must not be
+      // mistaken for the #2720 shape just because SOME block sits at the
+      // top of the component body.
+      const source = `
+        export function Button() {
+          {
+            const x = 1
+            console.log(x)
+          }
+          return <button>Go</button>
+        }
+      `
+      const result = compileJSX(source, 'Button.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+      expect(result.files.length).toBeGreaterThan(0)
+    })
+
+    test('a nested block whose returned identifier is not locally JSX-initialized stays silent', () => {
+      // The block's last statement returns `result`, but nothing in the
+      // block declares `result` as JSX — e.g. it is a prop or an outer
+      // local. Must not false-positive just because the shape ends in
+      // `return <identifier>`.
+      const source = `
+        export function Widget({ result }: { result: number }) {
+          {
+            const other = 1
+            return result
+          }
+        }
+      `
+      const compileResult = compileJSX(source, 'Widget.tsx', { adapter })
+      expect(compileResult.errors.find(e => e.code === 'BF027')).toBeUndefined()
+    })
+  })
+})

package/src/analyzer.ts

@@ -796,6 +796,29 @@ function visitComponentBody(node: ts.Node, ctx: AnalyzerContext): void {
       (ts.isBlock(node) && node.parent === ctx.componentBodyBlock)
     )
   ) {
+    // #2720: a bare top-level block whose ONLY job is naming the render
+    // value before returning it (`{ const __root = <jsx/>; return __root
+    // }`) would otherwise be swallowed whole by the opaque-block
+    // preservation above — this walk never recurses into it, so neither
+    // `jsxConstants` nor `jsxReturn` ever get set and the component
+    // silently produces zero files, zero diagnostics. Detect the shape
+    // before preserving it and report loudly instead.
+    if (ts.isBlock(node)) {
+      const returnedLocal = findBlockBodyReturnedJsxLocalName(node)
+      if (returnedLocal) {
+        ctx.errors.push(createError(
+          ErrorCodes.RETURN_VALUE_NOT_JSX,
+          getSourceLocation(node, ctx.sourceFile, ctx.filePath),
+          {
+            message:
+              `Component '${ctx.componentName ?? '(unknown)'}' return value is not recognized ` +
+              `as JSX — return the JSX expression directly instead of binding it to a local ` +
+              `variable first (\`return ${returnedLocal}\` after \`const ${returnedLocal} = ` +
+              `<jsx/>\` is not resolved at return position).`,
+          },
+        ))
+      }
+    }
     collectInitStatement(node, ctx)
     return
   }
@@ -886,6 +909,54 @@ export function unwrapJsxTransparent(expr: ts.Expression): ts.Expression {
   return current
 }
 
+/**
+ * BF027 (#2720) shape detector: a block whose last statement returns a
+ * bare identifier, where some earlier statement in the SAME block declares
+ * that identifier as a `const`/`let` initialized to JSX (root JSX, or JSX
+ * nested in a ternary/`&&`/`||`/`??`) — `{ const __root = <jsx/>; return
+ * __root }`. Mirrors the same two "does this initializer hold JSX" checks
+ * `collectConstant` uses to populate `jsxConstants` / `inlineableJsxConsts`
+ * for ordinary top-level locals, applied here to a nested block that would
+ * otherwise never be walked (it is preserved whole as an opaque init
+ * statement, see #930). Returns the identifier's name on a match, else
+ * null — deliberately narrow (exact "name, then return that name" shape)
+ * so an ordinary block scoping unrelated imperative logic is untouched.
+ */
+function findBlockBodyReturnedJsxLocalName(block: ts.Block): string | null {
+  const stmts = block.statements
+  const last = stmts[stmts.length - 1]
+  if (!last || !ts.isReturnStatement(last) || !last.expression) return null
+  const returned = unwrapJsxTransparent(last.expression)
+  if (!ts.isIdentifier(returned)) return null
+  const name = returned.text
+
+  for (const stmt of stmts) {
+    if (!ts.isVariableStatement(stmt)) continue
+    for (const decl of stmt.declarationList.declarations) {
+      if (!ts.isIdentifier(decl.name) || decl.name.text !== name || !decl.initializer) continue
+      let init: ts.Expression = decl.initializer
+      while (ts.isParenthesizedExpression(init)) init = init.expression
+      if (
+        ts.isJsxElement(init) ||
+        ts.isJsxSelfClosingElement(init) ||
+        ts.isJsxFragment(init) ||
+        initializerShapeContainsJsx(init) ||
+        // `initializerShapeContainsJsx` deliberately stops at arrow
+        // boundaries, so a `.map()`/`.flatMap()` whose CALLBACK returns JSX
+        // needs the same dedicated check `collectConstant` uses to admit
+        // that shape into `inlineableJsxConsts` (#1554) — without it,
+        // `{ const __root = items.map(i => <div/>); return __root }` slips
+        // past BF027 back into the silent-drop path (Copilot review on
+        // #2726).
+        isMapLikeCallWithJsx(init)
+      ) {
+        return name
+      }
+    }
+  }
+  return null
+}
+
 /**
  * Extract JSX element from an expression, handling parenthesized
  * expressions and TS type-only wrappers (`as`, `satisfies`, `!`,

package/src/errors.ts

@@ -22,11 +22,24 @@ export const ErrorCodes = {
   // Signal/Memo errors (BF011-BF019)
   SIGNAL_OUTSIDE_COMPONENT: 'BF011',
 
-  // JSX errors (BF021-BF029)
+  // JSX errors (BF021-BF029). BF022 was retired (see
+  // `invalid-jsx-attribute.audit.test.ts`) and BF026 is reserved by
+  // `spec/callback-fidelity.md` for a future `.map()`-callback-shape
+  // diagnostic — BF027 is the next free slot.
   UNSUPPORTED_JSX_PATTERN: 'BF021',
   MISSING_KEY_IN_LIST: 'BF023',
   MISSING_KEY_IN_NESTED_LIST: 'BF024',
   UNSUPPORTED_DESTRUCTURE_REST: 'BF025',
+  // The component's return statement resolves to a bare identifier that
+  // refers to a local `const`/`let` whose initializer IS JSX (or a
+  // JSX-shaped ternary/`&&`/`||`/`??`), e.g. `const __root = <div/>; return
+  // __root`. JSX-child position resolves such identifiers through
+  // `jsxConstants` / `inlineableJsxConsts` (#547 / #1409), but return
+  // position deliberately does not (see `transformExpressionInner`'s
+  // docstring) — so the dispatcher's scalar-leaf fallback silently produces
+  // no IR and no diagnostic (#2720). Loud stopgap until the analyzer learns
+  // to resolve the identifier at return position too.
+  RETURN_VALUE_NOT_JSX: 'BF027',
 
   // Component errors (BF043-BF049)
   PROPS_DESTRUCTURING: 'BF043',
@@ -152,6 +165,9 @@ const errorMessages: Record<ErrorCode, string> = {
     // stable.
     'Computed property key in .map() callback destructure is not supported. Rewrite the callback to destructure explicit bindings (e.g., `({ a, b }) => ...`) so the compiler can rewrite references to per-item signal accessors.',
 
+  [ErrorCodes.RETURN_VALUE_NOT_JSX]:
+    "Component's return value is not recognized as JSX — return the JSX expression directly instead of binding it to a local variable first.",
+
   [ErrorCodes.PROPS_DESTRUCTURING]:
     'Props destructuring in function parameters breaks reactivity. Use props object directly.',
   [ErrorCodes.SIGNAL_GETTER_NOT_CALLED]:

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

@@ -325,24 +325,47 @@ export function collectInnerLoops(
         // param) silently dropped its text-child update effect while the
         // sibling attribute effect (ungated) still fired. Refs need to fire
         // on every renderItem invocation (#1244).
-        //   - events / conditionals: only in `collectBindings` (branch)
-        //     mode; the legacy non-branch path didn't wire them on
-        //     `NestedLoop` because event delegation handles them through
-        //     the parent's bindings instead.
+        //   - events: only in `collectBindings` (branch) mode; the
+        //     legacy non-branch path didn't wire them on `NestedLoop`
+        //     because event delegation handles them through the parent's
+        //     bindings instead.
+        //   - conditionals: collected for EVERY inner loop, branch or not
+        //     (#2706) — see the `stopAtReactiveConditionals: true` note
+        //     below for why this must not be gated the same way events are.
         const bindings: LoopChildBindings = emptyLoopChildBindings()
         // Hoisted: one Set per loop, not one per child (Copilot review).
         const innerPreambleNames = preambleNamesOf(n)
         if (ctx) {
           for (const child of n.children) {
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index))
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index))
+            // `stopAtReactiveConditionals: true` (#2347's parameter, #2706's
+            // fix here) — a per-item conditional inside THIS loop's own row
+            // now always gets its own `bindings.conditionals` entry (below)
+            // and its own `insert()`, regardless of branch/general mode.
+            // Descending past it here too (the pre-#2706 default) would
+            // double-bind: once via insert()'s bindEvents, once via this
+            // flat `insideConditional`-flagged reclaim-on-every-run effect
+            // — the latter is also unsound on its own, since nothing
+            // guarantees the branch's marker is mounted the moment this
+            // effect first runs (issue-2706-nested-loop-conditional-slot
+            // .test.ts's original repro).
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
             bindings.refs.push(...collectLoopChildRefs(child))
           }
+          bindings.conditionals.push(...collectLoopChildConditionals(
+            { type: 'fragment', children: n.children, loc: n.loc } as unknown as IRNode,
+            ctx,
+            siblingOffsets,
+            n.param,
+            n.paramBindings,
+            innerPreambleNames,
+            n.index,
+          ))
         }
 
         // Per-item bindings for branch-mode callers (child components,
-        // events, nested conditionals) — matches the pre-Phase 2
-        // `collectBranchInnerLoops` behaviour.
+        // events) — matches the pre-Phase 2 `collectBranchInnerLoops`
+        // behaviour. Conditionals are collected above, uniformly.
         let childComponents: import('../types.ts').IRLoopChildComponent[] | undefined
         if (collectBindings) {
           // skipConditionals=true: components inside conditional branches
@@ -369,18 +392,6 @@ export function collectInnerLoops(
           for (const child of n.children) {
             bindings.events.push(...collectLoopChildEventsWithNesting(child))
           }
-
-          if (ctx) {
-            bindings.conditionals.push(...collectLoopChildConditionals(
-              { type: 'fragment', children: n.children, loc: n.loc } as unknown as IRNode,
-              ctx,
-              siblingOffsets,
-              n.param,
-              n.paramBindings,
-              innerPreambleNames,
-              n.index,
-            ))
-          }
         }
 
         result.push({

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

@@ -30,6 +30,8 @@ import {
 } from '../../utils.ts'
 import { buildChildRefBindings, buildStaticChildRefBindings } from '../shared.ts'
 import { renderPreamble, irToHtmlTemplate } from '../../html-template.ts'
+import { buildLoopChildConditionalsPlan } from './build-loop-child-arm.ts'
+import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
 
 /**
  * Mirror of the helper in `build-loop-child-arm.ts` — kept local to avoid
@@ -160,6 +162,7 @@ function buildReactiveEmit(
   outerLoopParamBindings?: readonly LoopParamBinding[],
 ): InnerLoopReactiveEmit {
   const wrapInner = (expr: string) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings)
+  const wrapBoth = (expr: string) => wrapLoopParamAsAccessor(wrapOuter(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)
@@ -249,6 +252,21 @@ function buildReactiveEmit(
 
   const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings)
 
+  // Per-item conditionals inside THIS loop's own row (#2706) — same
+  // insert()-parity treatment the top-level loop's row conditionals
+  // already get (`buildLoopReactiveEffectsPlan`), now extended to a
+  // NESTED loop's row too. `scopeVar` is the row's own element
+  // (`__innerEl<uidSuffix>`, matching `stringifyInnerLoops`'s emission),
+  // and `wrapBoth` matches every other per-item expression in this emit
+  // (outer accessor, then inner accessor).
+  const conditionals: LoopChildConditionalPlan[] = buildLoopChildConditionalsPlan({
+    conditionals: inner.bindings.conditionals,
+    scopeVar: `__innerEl${uidSuffix}`,
+    wrap: wrapBoth,
+    loopParam: inner.param,
+    loopParamBindings: inner.paramBindings,
+  })
+
   return {
     mode: 'reactive',
     keyFn: loopKeyFn(inner),
@@ -261,6 +279,7 @@ function buildReactiveEmit(
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs,
   }
 }

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

@@ -190,6 +190,14 @@ export interface BuildBranchInnerLoopsArgs {
   innerLoops: readonly NestedLoop[] | undefined
   /** The variable expression naming the parent scope element (e.g. `__branchScope`). */
   scopeVar: string
+  /**
+   * The enclosing conditional's own slot id — every call site of this
+   * builder originates from a conditional branch's arm, so this is always
+   * a real id. Used as the `containerExpr` fallback (`findCondContainer`,
+   * #2705) for an inner loop whose IR never got a `containerSlotId` of its
+   * own (its wrapper element sits outside the branch's IR subtree).
+   */
+  condSlotId: string
   /** Outer loop param identifier (the conditional's enclosing loop). */
   outerLoopParam: string
   /** Outer loop param destructuring metadata. */
@@ -214,6 +222,7 @@ export function buildBranchInnerLoopsPlan(
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter,
@@ -230,10 +239,15 @@ export function buildBranchInnerLoopsPlan(
 
     const csl = inner.containerSlotId
     // Inner loop's container: host-side `bf="<slot>"` slot marker first,
-    // then (bf-h, bf-m) when the container is itself a child scope.
+    // then (bf-h, bf-m) when the container is itself a child scope. When
+    // neither exists — the loop's own IR never got a `containerSlotId`
+    // because its wrapper element sits outside the branch's IR subtree
+    // (#2705) — resolve via the conditional's OWN comment marker instead
+    // of falling back to the whole branch scope, which may be several
+    // elements wider than the loop's actual container.
     const containerExpr = csl
       ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST}="\${__scopeId}"][${BF_AT}="${csl}"]\`) ?? ${scopeVar})`
-      : scopeVar
+      : `findCondContainer(${scopeVar}, '${condSlotId}')`
 
     const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings)
     const wrappedKey = inner.key
@@ -372,12 +386,14 @@ export function buildLoopChildConditionalsPlan(
         wrap,
         loopParam,
         loopParamBindings,
+        condId: cond.slotId,
       }),
       whenFalseArm: buildLoopChildArmPlan({
         branch: cond.whenFalse,
         wrap,
         loopParam,
         loopParamBindings,
+        condId: cond.slotId,
       }),
     })
   }
@@ -439,10 +455,12 @@ interface BuildLoopChildArmArgs {
   wrap: (expr: string) => string
   loopParam: string
   loopParamBindings?: readonly LoopParamBinding[]
+  /** The enclosing conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
+  condId: string
 }
 
 function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
-  const { branch, wrap, loopParam, loopParamBindings } = args
+  const { branch, wrap, loopParam, loopParamBindings, condId } = args
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -455,6 +473,7 @@ function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: '__branchScope',
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap,

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

@@ -110,8 +110,8 @@ export function buildReactiveEffectsPlan(
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
         ...(cond.readsPreamble && { readsPreamble: true }),
       })
     }
@@ -130,6 +130,8 @@ function buildOuterArm(
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  /** The conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
+  condSlotId: string,
   profileComponentName?: string,
 ): LoopChildArmPlan {
   return {
@@ -145,6 +147,7 @@ function buildOuterArm(
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: '__branchScope',
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap,

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

@@ -17,6 +17,7 @@ import type {
   LoopParamBinding,
 } from '../../../types.ts'
 import type { LoopChildRefBinding } from './loop.ts'
+import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
 
 /**
  * Body-entry statements emitted in order at the top of a `mapArray`
@@ -148,6 +149,17 @@ export interface InnerLoopReactiveEmit {
   reactiveTexts: readonly InnerLoopText[]
   /** Pre-wrapped reactive attribute effects for the inner-item body. */
   reactiveAttrs: readonly InnerLoopReactiveAttr[]
+  /**
+   * Per-item conditionals inside THIS loop's own row (#2706) — each gets
+   * its own `insert()` call, the same insert()-parity the top-level loop's
+   * row conditionals already have (`ReactiveEffectsPlan.conditionals`).
+   * Before this field existed, a per-item conditional inside a nested
+   * loop's row was baked into the static row template ONCE at row
+   * creation and never revisited — silently frozen against later signal
+   * changes — while its reactive text still (unsoundly) assumed insert()
+   * kept the branch's marker around.
+   */
+  conditionals: readonly LoopChildConditionalPlan[]
   /** Pre-wrapped imperative ref callbacks for the inner-item body (#1244). */
   childRefs: readonly LoopChildRefBinding[]
 }

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

@@ -14,6 +14,7 @@
  *     <indent>  emitComponentAndEventSetup(...)
  *     <indent>  recurse on childLevels
  *     <indent>  reactive text effects
+ *     <indent>  per-item conditionals: insert() over __innerEl<uid> (#2706)
  *     <indent>  return __innerEl<uid>
  *     <indent>}) }
  *
@@ -36,6 +37,7 @@ import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { emitMultiRootTemplateCloneLines, namespaceWrapForTemplate } from './template-parse.ts'
 import { emitLoopChildRefs } from './loop.ts'
 import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
+import { stringifyLoopChildConditionals } from './loop-child-arm.ts'
 import type {
   InnerLoopPlan,
   InnerLoopsPlan,
@@ -139,6 +141,13 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
     }
     lines.push(`${indent}  }${profileBindingId(pc, attr.slotId)}) }`)
   }
+  // Per-item conditionals inside THIS loop's own row (#2706) — each is a
+  // real `insert()` over `__innerEl<uid>`, not a bake-once-at-creation
+  // ternary. Mirrors `stringifyBranchInnerLoops`'s identical call for a
+  // branch-scoped inner loop's own conditionals.
+  if (emit.conditionals.length > 0) {
+    stringifyLoopChildConditionals(lines, emit.conditionals, `${indent}  `, pc)
+  }
   // Imperative ref callbacks fire on every renderItem invocation, which
   // means every mount: SSR hydration, initial CSR creation, and same-key
   // remount after unmount (#1244).