@barefootjs/jsx 0.34.0 → 0.35.1

package/src/__tests__/__snapshots__/doc-examples.test.ts.snap

@@ -441,7 +441,7 @@ export function initExample(__scope, _p = {}) {
 
   mapArray(() => (todos()).flatMap((todo) => {
   if (todo.hidden) return []
-  return todo.tags.map(tag => ({ k: (\`\${todo.id}:\${tag}\`), h: \`<li>\${escapeText((tag))}</li>\` }))
+  return todo.tags.map(tag => ({ k: (\`\${todo.id}:\${tag}\`), h: \`<li>\${escapeText(tag)}</li>\` }))
 }), _s0, (__bfD, __bfI) => String(__bfD.k ?? __bfI), (__bfD, __idx, __existing) => {
     let __el = __existing
     if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }
@@ -458,7 +458,7 @@ export function initExample(__scope, _p = {}) {
 
 hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s0"><!--bf-loop:l0-->\${([]).flatMap((todo) => {
   if (todo.hidden) return []
-  return todo.tags.map(tag => \`<li>\${escapeText((tag))}</li>\`)
+  return todo.tags.map(tag => \`<li>\${escapeText(tag)}</li>\`)
 }).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
@@ -2550,6 +2550,99 @@ hydrate('StatementExample', { init: initStatementExample, template: (_p) => \`<d
 export function StatementExample(_p, __bfKey) { return createComponent('StatementExample', _p, __bfKey) }"
 `;
 
+exports[`docs/core/reactivity/untrack.md doc-examples L79 — (no label) 1`] = `
+"import { $, createComponent, createSignal, escapeAttr, escapeText, hydrate, lazySlots, mapArrayLazy, qsa, textOrNode, untrack } from '@barefootjs/client/runtime'
+
+var renderPreview = renderPreview ?? function(id) {
+  return \`<p>Preview for item \${id}</p>\`
+}
+
+export function initGallery(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [items, setItems] = createSignal([{ id: 1, label: 'First' }, { id: 2, label: 'Second' }])
+  const rename = () => setItems(items().map(item => ({ id: item.id, label: item.label + '!' })))
+
+  const [_s0, _s3] = $(__scope, 's0', 's3')
+
+  if (_s0) _s0.addEventListener('click', rename)
+  const __tpl_l0 = document.createElement('template')
+  __tpl_l0.innerHTML = \`<li data-key="" bf="s2"><!--bf:s1--><!--/--></li>\`
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's1', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's1', kind: 'text', path: __lzp_l0[0] }]
+  mapArrayLazy(() => items(), _s3, (item) => String(item.id), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [__el, lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __t = __r[0]
+      if (__t) {
+        { const __x = item().label
+        { const __v = __x; if (__v != null) __t.setAttribute('title', String(__v)); else __t.removeAttribute('title') }
+        __l[0] = __x }
+      } }
+      { const __t = __r[0]
+      if (__t) {
+        { const __x = untrack(() => renderPreview(item().id))
+        { const __v = __x; if (__v != null) __t.setAttribute('data-preview', String(__v)); else __t.removeAttribute('data-preview') }
+        __l[1] = __x }
+      } }
+      { const __x = item().label
+      __r[1]('s1', textOrNode(__x))
+      __l[2] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = [])
+      const __l = __e.last ?? (__e.last = [])
+      { const __t = 0 in __r ? __r[0] : (__r[0] = qsa(__e.primaryEl, '[bf="s2"]'))
+      if (__t) {
+        { const __x = item().label
+        if (!(0 in __l) || !Object.is(__l[0], __x)) {
+          { const __v = __x; if (__v != null) __t.setAttribute('title', String(__v)); else __t.removeAttribute('title') }
+        }
+        __l[0] = __x }
+      } }
+      { const __t = 0 in __r ? __r[0] : (__r[0] = qsa(__e.primaryEl, '[bf="s2"]'))
+      if (__t) {
+        { const __x = untrack(() => renderPreview(item().id))
+        if (!(1 in __l) || !Object.is(__l[1], __x)) {
+          { const __v = __x; if (__v != null) __t.setAttribute('data-preview', String(__v)); else __t.removeAttribute('data-preview') }
+        }
+        __l[1] = __x }
+      } }
+      const __d = __r[1] ?? (__r[1] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().label
+      if (!(2 in __l) || !Object.is(__l[2], __x)) __d('s1', textOrNode(__x))
+      __l[2] = __x }
+    },
+    applyOuter: (__es, __seed) => {
+      for (const __e of __es) {
+        const item = () => __e.item
+        const __r = __e.refs ?? (__e.refs = [])
+        const __l = __e.last ?? (__e.last = [])
+        { const __t = 0 in __r ? __r[0] : (__r[0] = qsa(__e.primaryEl, '[bf="s2"]'))
+        if (__t) {
+          { const __x = untrack(() => renderPreview(item().id))
+          if (__seed ? (__t.getAttribute('data-preview') !== (__x != null ? String(__x) : null)) : (!(1 in __l) || !Object.is(__l[1], __x))) {
+            { const __v = __x; if (__v != null) __t.setAttribute('data-preview', String(__v)); else __t.removeAttribute('data-preview') }
+          }
+          __l[1] = __x }
+        } }
+      }
+    },
+  }, 'l0')
+
+}
+
+hydrate('Gallery', { init: initGallery, template: (_p) => \`<div><button bf="s0">Rename all</button><ul bf="s3"><!--bf-loop:l0-->\${([{ id: 1, label: 'First' }, { id: 2, label: 'Second' }]).map((item) => \`<li data-key="\${escapeAttr(item.id)}" \${(item.label) != null ? 'title="' + escapeAttr(item.label) + '"' : ''} \${(untrack(() => renderPreview(item.id))) != null ? 'data-preview="' + escapeAttr(untrack(() => renderPreview(item.id))) + '"' : ''} bf="s2"><!--bf:s1-->\${escapeText(item.label)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></ul></div>\` })
+export function Gallery(_p, __bfKey) { return createComponent('Gallery', _p, __bfKey) }"
+`;
+
 exports[`docs/core/reactivity/props-reactivity.md doc-examples L16 — (no label) 1`] = `
 "import { createComponent, hydrate } from '@barefootjs/client/runtime'
 
@@ -2635,12 +2728,13 @@ export function initExample(__scope, _p = {}) {
   })
 
   // Reactive child component props
+  { const __l = []
   createEffect(() => {
     const [__Child_s0El] = $c(__scope, 's0')
     if (__Child_s0El) {
       if ('value' in __Child_s0El) { const __val = String(count()); if (__Child_s0El.value !== __val) __Child_s0El.value = __val }
     }
-  })
+  }) }
 
   // Initialize child components with props
   initChild('Child', _s0, { get value() { return count() } })
@@ -2651,7 +2745,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/reactivity/props-reactivity.md doc-examples L85 — Compiled props object 1`] = `
-"import { createComponent, createEffect, createSignal, escapeTextOrMarkup, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeTextOrMarkup, escapeTextOrNode, hydrate, lazySlots, escapeText } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -2688,8 +2782,6 @@ export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c3
 export function initExample(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
-
-  const children = _p.children
   const [count, setCount] = createSignal(0)
   const [isLoggedIn] = createSignal(false)
   const [todos] = createSignal([])
@@ -2700,7 +2792,7 @@ export function initExample(__scope, _p = {}) {
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div>\${get} value() \${} return count() } } </div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div>\${escapeText(get)} value() \${escapeText()} return count() } } </div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
@@ -2752,7 +2844,7 @@ export function Counter(_p, __bfKey) { return createComponent('Counter', _p, __b
 `;
 
 exports[`docs/core/components/component-authoring.mdx doc-examples L79 — (no label) 1`] = `
-"import { $, __bfSlot, createComponent, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, __bfSlot, createComponent, createSignal, escapeText, hydrate, insert } from '@barefootjs/client/runtime'
 
 
 export function initToggle(__scope, _p = {}) {
@@ -2776,7 +2868,7 @@ export function initToggle(__scope, _p = {}) {
   if (_s1) _s1.addEventListener('click', () => { setOn(prev => !prev) })
 }
 
-hydrate('Toggle', { init: initToggle, template: (_p) => \`<button bf="s1">\${(false) ? \`<!--bf-cond-start:s0-->\${'ON'}<!--bf-cond-end:s0-->\` : \`<!--bf-cond-start:s0-->\${'OFF'}<!--bf-cond-end:s0-->\`}</button>\` })
+hydrate('Toggle', { init: initToggle, template: (_p) => \`<button bf="s1">\${(false) ? \`<!--bf-cond-start:s0-->\${escapeText('ON')}<!--bf-cond-end:s0-->\` : \`<!--bf-cond-start:s0-->\${escapeText('OFF')}<!--bf-cond-end:s0-->\`}</button>\` })
 export function Toggle(_p, __bfKey) { return createComponent('Toggle', _p, __bfKey) }"
 `;
 
@@ -3255,12 +3347,17 @@ export function initExample(__scope, _p = {}) {
 
 
   // Reactive child component props
+  { const __l = []
   createEffect(() => {
     const [__Dialog_s9El] = $c(__scope, 's9')
     if (__Dialog_s9El) {
-      __Dialog_s9El.open = !!(open())
+      { const __x = open()
+      if (!(0 in __l) || !Object.is(__l[0], __x)) {
+        __Dialog_s9El.open = !!(__x)
+      }
+      __l[0] = __x }
     }
-  })
+  }) }
 
   // Initialize child components with props
   initChild('Dialog', _s9, { get open() { return open() }, onOpenChange: setOpen })
@@ -3823,7 +3920,7 @@ hydrate('StatementExample', { init: initStatementExample, template: (_p) => \`<d
 export function StatementExample(_p, __bfKey) { return createComponent('StatementExample', _p, __bfKey) }"
 `;
 
-exports[`docs/core/components/portals.md doc-examples L134 — (no label) 1`] = `
+exports[`docs/core/components/portals.md doc-examples L141 — (no label) 1`] = `
 "import { $, createComponent, createEffect, createPortal, hydrate, isSSRPortal, useContext } from '@barefootjs/client/runtime'
 
 
@@ -3862,7 +3959,7 @@ hydrate('DialogOverlay__b3c36eee', { init: initDialogOverlay, template: (_p) =>
 export function DialogOverlay(_p, __bfKey) { return createComponent('DialogOverlay__b3c36eee', _p, __bfKey) }"
 `;
 
-exports[`docs/core/components/portals.md doc-examples L190 — (no label) 1`] = `
+exports[`docs/core/components/portals.md doc-examples L197 — (no label) 1`] = `
 "import { createComponent, createEffect, createMemo, createPortal, createSignal, hydrate, onCleanup, onMount, untrack } from '@barefootjs/client/runtime'
 
 
@@ -3938,11 +4035,16 @@ export function initButton(__scope, _p = {}) {
 
   const [_s0] = $(__scope, 's0')
 
+  { const __l = []
   createEffect(() => {
     if (_s0) {
-      { const __v = classes; if (__v != null) _s0.setAttribute('class', String(__v)); else _s0.removeAttribute('class') }
+      { const __x = classes
+      if (!(0 in __l) || !Object.is(__l[0], __x)) {
+        { const __v = __x; if (__v != null) _s0.setAttribute('class', String(__v)); else _s0.removeAttribute('class') }
+      }
+      __l[0] = __x }
     }
-  })
+  }) }
 
   if (_s0) applyRestAttrs(_s0, _p, ["class"])
 
@@ -4111,24 +4213,38 @@ export function initProductPage(__scope, _p = {}) {
     __bfw_s2('s2', escapeTextOrNode(__val))
   })
 
+  { const __l = []
   createEffect(() => {
     if (_s4) {
-      { const __v = _p.product.image; if (__v != null) _s4.setAttribute('src', String(__v)); else _s4.removeAttribute('src') }
+      { const __x = _p.product.image
+      if (!(0 in __l) || !Object.is(__l[0], __x)) {
+        { const __v = __x; if (__v != null) _s4.setAttribute('src', String(__v)); else _s4.removeAttribute('src') }
+      }
+      __l[0] = __x }
     }
-  })
+  }) }
 
 
   // Reactive child component props
+  { const __l = []
   createEffect(() => {
     const [__ReviewStars_s5El] = $c(__scope, 's5')
     if (__ReviewStars_s5El) {
-      { const __v = product.rating; if (__v != null) __ReviewStars_s5El.setAttribute('rating', String(__v)); else __ReviewStars_s5El.removeAttribute('rating') }
+      { const __x = product.rating
+      if (!(0 in __l) || !Object.is(__l[0], __x)) {
+        { const __v = __x; if (__v != null) __ReviewStars_s5El.setAttribute('rating', String(__v)); else __ReviewStars_s5El.removeAttribute('rating') }
+      }
+      __l[0] = __x }
     }
     const [__AddToCart_s6El] = $c(__scope, 's6')
     if (__AddToCart_s6El) {
-      { const __v = product.id; if (__v != null) __AddToCart_s6El.setAttribute('productId', String(__v)); else __AddToCart_s6El.removeAttribute('productId') }
+      { const __x = product.id
+      if (!(1 in __l) || !Object.is(__l[1], __x)) {
+        { const __v = __x; if (__v != null) __AddToCart_s6El.setAttribute('productId', String(__v)); else __AddToCart_s6El.removeAttribute('productId') }
+      }
+      __l[1] = __x }
     }
-  })
+  }) }
 
   // Initialize child components with props
   initChild('ReviewStars', _s5, { get rating() { return product.rating } })
@@ -4337,7 +4453,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L177 — (no label) 1`] = `
-"import { createComponent, createEffect, createSignal, escapeTextOrMarkup, escapeTextOrNode, hydrate, lazySlots, $, __bfSlot, insert } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeTextOrMarkup, escapeTextOrNode, hydrate, lazySlots, $, __bfSlot, escapeText, insert } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4396,7 +4512,7 @@ export function initExample(__scope, _p = {}) {
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div>\${on() ? \`<!--bf-cond-start:s0-->\${'ON'}<!--bf-cond-end:s0-->\` : \`<!--bf-cond-start:s0-->\${'OFF'}<!--bf-cond-end:s0-->\`}</div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div>\${on() ? \`<!--bf-cond-start:s0-->\${escapeText('ON')}<!--bf-cond-end:s0-->\` : \`<!--bf-cond-start:s0-->\${escapeText('OFF')}<!--bf-cond-end:s0-->\`}</div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 

package/src/__tests__/binding-scope-ratchet.test.ts

@@ -192,8 +192,16 @@ const ALLOWLIST: Record<string, Partial<Record<Pattern, number>>> = {
   },
   // FLOOR (shape 3): `irToPlaceholderTemplate`'s loop-param accessor-rewrite
   // spec forwarding — see the canonical docstring on
-  // `wrapExprWithLoopParams` in `ir-to-client-js/utils.ts`.
-  'packages/jsx/src/ir-to-client-js/collect-elements.ts': { loopParams: 9 },
+  // `wrapExprWithLoopParams` in `ir-to-client-js/utils.ts`. Grew by 3 for
+  // #2868: `collectLoopChildConditionals` gained an optional `loopParams`
+  // parameter (the full ancestor loop-param chain) so a conditional arm
+  // inside an inner `.map()` can render against an outer loop's item/index
+  // too — same accessor-rewrite-payload shape, one more forwarding site.
+  // Grew by 1 more merging #2861's `parentScope` param (a DIFFERENT,
+  // independent extension of the same function for the reactivity-scope
+  // concern) alongside #2868's `loopParams` — both trailing params now
+  // coexist on `collectLoopChildConditionals`'s signature.
+  'packages/jsx/src/ir-to-client-js/collect-elements.ts': { loopParams: 13 },
   // FLOOR (shape 2): `computeCsrInlinability`'s fixed-point constant-chain
   // inlining loop over `ctx.localConstants` — component-scope const
   // resolution, not loop-row scope.
@@ -202,6 +210,16 @@ const ALLOWLIST: Record<string, Partial<Record<Pattern, number>>> = {
   // pass a loop-param accessor-rewrite spec (see the file's own comments) —
   // the remaining mentions are all in that reasoning, not device usage.
   'packages/jsx/src/ir-to-client-js/control-flow/plan/build-event-delegation.ts': { loopParams: 4 },
+  // FLOOR (shape 3, new for #2868): a doc comment pointing at
+  // `collect-elements.ts`'s `irToHtmlTemplate` `loopParams` — explaining why
+  // `cond.whenTrueHtml`/`whenFalseHtml` must not be re-wrapped post-hoc.
+  'packages/jsx/src/ir-to-client-js/control-flow/plan/build-lazy-row.ts': { loopParams: 1 },
+  // FLOOR (shape 3, new for #2868): same doc-comment reference as
+  // `build-lazy-row.ts` above.
+  'packages/jsx/src/ir-to-client-js/control-flow/plan/build-loop-child-arm.ts': { loopParams: 1 },
+  // FLOOR (shape 3, new for #2868): same doc-comment reference as
+  // `build-lazy-row.ts` above.
+  'packages/jsx/src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts': { loopParams: 1 },
   // FLOOR (shape 3): `irToHtmlTemplate`/`irToPlaceholderTemplate`'s
   // loop-param accessor-rewrite spec — see `ir-to-client-js/utils.ts`'s
   // `wrapExprWithLoopParams` docstring (the canonical explanation, pointed
@@ -221,6 +239,11 @@ const ALLOWLIST: Record<string, Partial<Record<Pattern, number>>> = {
   // `loopParams`-named parameter in `ir-to-client-js/` forwards. See its
   // docstring (added Stage 4) for the full shape-3 reasoning.
   'packages/jsx/src/ir-to-client-js/utils.ts': { loopParams: 4 },
+  // FLOOR (shape 3, new for #2868): `TopLevelLoop.templateIndexed` /
+  // `BranchLoop.templateIndexed`'s doc comments point at `irToHtmlTemplate`'s
+  // `loopParams` to explain why the index-wrapped render is a second
+  // structured render, not a post-hoc regex pass over `template`.
+  'packages/jsx/src/ir-to-client-js/types.ts': { loopParams: 1 },
   // `jsx-to-ir.ts` — MIGRATED to 0 in Stage 4: `makeBindingEnv`'s
   // `loopParams: boundNames` field now reads `loopValueBoundNames:
   // boundNames`, matching `free-refs.ts`'s renamed field. No entry needed

package/src/__tests__/build-plain-row-consolidation.test.ts

@@ -0,0 +1,120 @@
+/**
+ * Regression pin for the `buildPlainRowCore` extraction
+ * (`control-flow/plan/build-plain-row.ts`).
+ *
+ * `buildPlainLoopPlan` (build-loop.ts, `callSite: 'plain'`) and
+ * `buildBranchLoopPlan` (build-branch-loop.ts, `callSite: 'branch-plain'`)
+ * used to duplicate the "wrap item → decide lazy → wrap index" sequence
+ * verbatim. This pins that both call sites now go through the ONE shared
+ * implementation and cannot silently diverge again (CLAUDE.md's "one
+ * decision, two implementations, no test comparing them"):
+ *
+ *   - A row forced eager for a reason UNRELATED to the index (here, an
+ *     imperative ref — #2859 follow-on lifted the index-only refusal, so a
+ *     bare index reference no longer forces eager on its own) still gets
+ *     its index wrapped into a live accessor call at BOTH call sites.
+ *   - A lazy-eligible row (index-referencing or not) goes through
+ *     `mapArrayLazy` at BOTH call sites, with no leaked eager-only index
+ *     wrap in the shared `mapPreambleWrapped`/`template` strings — the
+ *     exact shape of the original #2859 CI regression.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(source: string): string {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  const errors = result.errors.filter(e => e.severity === 'error')
+  if (errors.length > 0) throw new Error(errors.map(e => e.message).join('\n'))
+  return result.files.find(f => f.type === 'clientJs')!.content
+}
+
+describe('buildPlainRowCore — shared wrap-item/decide-lazy/wrap-index sequence', () => {
+  test('top-level plain loop: a ref forces eager, and the index is wrapped into a live accessor call', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      type Row = { id: number; label: string }
+      export function Repro() {
+        const [rows] = createSignal<Row[]>([])
+        const refs: HTMLLIElement[] = []
+        return <ul>{rows().map((row, i) => <li key={row.id} ref={el => { refs[i] = el! }}>{String(i + 1)}. {row.label}</li>)}</ul>
+      }
+    `)
+    expect(js).not.toContain('mapArrayLazy(')
+    expect(js).toMatch(/i\(\)\s*\+\s*1/)
+  })
+
+  test('branch-plain loop (ternary): the SAME ref-bearing shape wraps the index identically', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      type Row = { id: number; label: string }
+      export function Repro() {
+        const [active, setActive] = createSignal(true)
+        const [rows] = createSignal<Row[]>([])
+        const refs: HTMLLIElement[] = []
+        return <div>{active() ? rows().map((row, i) => <li key={row.id} ref={el => { refs[i] = el! }}>{String(i + 1)}. {row.label}</li>) : <span>Empty</span>}</div>
+      }
+    `)
+    expect(js).not.toContain('mapArrayLazy(')
+    expect(js).toMatch(/i\(\)\s*\+\s*1/)
+  })
+
+  test('top-level plain loop: a lazy-eligible row (no index reference) goes lazy with no leaked index wrap', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      type Row = { id: number; label: string }
+      export function Repro() {
+        const [rows] = createSignal<Row[]>([{ id: 1, label: 'alpha' }])
+        const [selected, setSelected] = createSignal(1)
+        return (
+          <ul>
+            {rows().map(row => (
+              <li key={row.id} onClick={() => setSelected(row.id)}>{String(selected() === row.id ? 'YES' : 'NO')}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(js).toContain('mapArrayLazy(')
+  })
+
+  test('branch-plain loop (ternary): the SAME lazy-eligible shape also goes lazy', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      type Row = { id: number; label: string }
+      export function Repro() {
+        const [active] = createSignal(true)
+        const [rows] = createSignal<Row[]>([{ id: 1, label: 'alpha' }])
+        const [selected, setSelected] = createSignal(1)
+        return (
+          <div>
+            {active() ? rows().map(row => (
+              <li key={row.id} onClick={() => setSelected(row.id)}>{String(selected() === row.id ? 'YES' : 'NO')}</li>
+            )) : <span>Empty</span>}
+          </div>
+        )
+      }
+    `)
+    expect(js).toContain('mapArrayLazy(')
+  })
+
+  test('a ref callback closing over the loop index reads the live accessor at the top-level call site (#2859)', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      type Row = { id: number; label: string }
+      export function Repro() {
+        const [rows] = createSignal<Row[]>([])
+        const refs: HTMLLIElement[] = []
+        return <ul>{rows().map((row, i) => <li key={row.id} ref={el => { refs[i] = el! }}>{row.label}</li>)}</ul>
+      }
+    `)
+    expect(js).toMatch(/refs\[i\(\)\]/)
+  })
+})

package/src/__tests__/child-prop-fallback-wrap.test.ts

@@ -260,7 +260,9 @@ describe('Solid-style wrap-by-default fallback for child-component props (#942)'
     // The emitted code rewrites `props.xxx` to the internal props-param
     // name (`_p.xxx`) via rewriteDestructuredPropsInExpr. Assert on the
     // emitted form — the gate's `expandedValue.includes('props.')` check
-    // still runs against the source expression before rewriting.
-    expect(clientJs).toMatch(/__v\s*=\s*_p\.title/)
+    // still runs against the source expression before rewriting. The
+    // dedup-guarded write (#2869) computes into `__x` first, then assigns
+    // `__v = __x` inside `emitAttrUpdate`'s own generic branch.
+    expect(clientJs).toMatch(/__x\s*=\s*_p\.title/)
   })
 })