@barefootjs/jsx 0.34.0 → 0.35.1

package/src/__tests__/issue-2868-cond-arm-tag-collision.test.ts

@@ -0,0 +1,185 @@
+/**
+ * #2868: a reactive conditional branch's own re-render `template()` builder
+ * could corrupt a tag name that collides with an enclosing `.map()`'s
+ * item/index parameter — `<i>` became `<i()>` — because the loop-param
+ * accessor rewrite ran as a word-boundary regex over the branch's already-
+ * assembled HTML string, and `<`/`>` are non-word characters so `<i>` and
+ * `<i` + identifier `i` are indistinguishable to that regex.
+ *
+ * Fixed by rendering every branch's HTML against the full loop-param chain
+ * at IR time (`irToHtmlTemplate`'s `loopParams`) and deleting the post-hoc
+ * regex pass entirely — `wrapLoopParamAsAccessor` only ever runs over
+ * parsed JS expression positions now, never over assembled markup.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+function compile(source: string): string {
+  const r = compileJSX(source, 'T.tsx', { adapter: new TestAdapter() })
+  expect(r.errors).toEqual([])
+  return r.files.find((f) => f.type === 'clientJs')?.content ?? ''
+}
+
+/** No tag name (or attribute) was corrupted into an accessor call. */
+function expectNoCorruption(clientJs: string): void {
+  expect(clientJs).not.toMatch(/<\/?[A-Za-z][\w-]*\(\)/)
+  expect(clientJs).not.toMatch(/[\w-]+\(\)=["']/)
+}
+
+describe('reactive conditional branch does not corrupt a colliding tag name (#2868)', () => {
+  test('index param named like the branch tag (<i>) — eager row (forced via ref)', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }, { id: 'b' }])
+  const [flag] = createSignal(true)
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          {flag() ? <b>even</b> : <i>odd</i>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+    expect(clientJs).toContain('<i bf-c="s0">odd</i>')
+  })
+
+  test('item param named like the branch tag (<b>)', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }])
+  const [flag] = createSignal(true)
+  return (
+    <ul>
+      {items().map((b) => (
+        <li key={b.id} ref={(el: HTMLElement | null) => {}}>
+          {flag() ? <b>even</b> : <em>odd</em>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+  })
+
+  test('nested conditional inside a branch arm', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }])
+  const [outer, setOuter] = createSignal(true)
+  const [inner] = createSignal(true)
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          {outer() ? (inner() ? <b>x</b> : <i>y</i>) : <em>z</em>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+  })
+
+  test('row template (build-plain-row): index-named tag as the row root, no ref forcing eager', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }])
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          <i>{i}</i>
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+  })
+
+  test('child component prop inside a reactive conditional branch reads the loop item live (#2868 follow-up)', () => {
+    // `irToHtmlTemplate`'s `case 'component':` branch never ran the prop
+    // expression through `wrapExpr` — a pre-existing gap that #2868's own
+    // fix exposed by deleting the post-hoc `wrapLoopParamAsAccessor` regex
+    // pass that had accidentally been fixing it too. Caught by a real
+    // `site/ui` component (`DashboardBuilderDemo`), not by any fixture in
+    // #2868's own PR.
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function Badge(props: { text: string }) {
+  return <span>{props.text}</span>
+}
+function T() {
+  const [items] = createSignal([{ id: 'a', active: true, label: 'A' }])
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          {item.active ? <Badge text={item.label} /> : null}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T, Badge }`)
+    expectNoCorruption(clientJs)
+    // The branch's re-render template (the `insert(...)` reactive-update
+    // path, NOT the outer static SSR template built once from the literal
+    // array) must read the row's live item accessor (`item()`), not the
+    // bare loop param (`item`) — a bare reference would stringify to the
+    // destructured item at row-creation time and never update after that.
+    const insertCall = clientJs.slice(clientJs.indexOf('insert(__el'), clientJs.indexOf("}, 'l0')"))
+    expect(insertCall).toContain("renderChild('Badge', {text: item().label}")
+    expect(insertCall).not.toContain("renderChild('Badge', {text: item.label}")
+  })
+
+  test("nested .map() conditional arm reads the OUTER loop's own index (ancestor chain)", () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [groups] = createSignal([{ id: 'g1', kids: [{ id: 'k1' }] }])
+  const [flag] = createSignal(true)
+  return (
+    <ul>
+      {groups().map((group, gi) => (
+        <li key={group.id}>
+          <ul>
+            {group.kids.map((kid) => (
+              <li key={kid.id}>
+                {flag() ? <b>{gi}</b> : <em>none</em>}
+              </li>
+            ))}
+          </ul>
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+    // The outer index must be called as an accessor inside the inner loop's
+    // branch arm, not passed by reference — passing the bare function would
+    // stringify to its source text instead of its current value.
+    expect(clientJs).toContain('gi()')
+    expect(clientJs).not.toMatch(/__bfSlot\(gi,/)
+  })
+})

package/src/__tests__/issue-2869-attr-dedup-guard.test.ts

@@ -0,0 +1,141 @@
+/**
+ * Codegen-shape pins for #2869: every eager reactive-attribute write must go
+ * through `emitDedupedAttrUpdate` (`emit-reactive.ts`), never `emitAttrUpdate`
+ * directly from an effect body. These are cheap shape assertions alongside
+ * the behavioral regression test in
+ * `packages/client/__tests__/runtime/issue-2869-attr-dedup-guard.test.ts`,
+ * which is the one that actually proves the fix (this file cannot observe
+ * write counts over time, only the emitted source shape).
+ */
+
+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, options: Parameters<typeof compileJSX>[2] = { adapter }): string {
+  const result = compileJSX(source, 'Repro.tsx', options)
+  const errors = result.errors.filter(e => e.severity === 'error')
+  expect(errors).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')?.content
+  if (!clientJs) throw new Error('No client JS emitted')
+  return clientJs
+}
+
+// Non-loop per-slot reactive attrs (`emitReactiveAttributeUpdates`) — two
+// attrs sharing one element, one of them wrapped in `untrack`.
+const NON_LOOP_SOURCE = `'use client'
+import { createSignal, untrack } from '@barefootjs/client'
+
+function docFor(n: number): string {
+  return 'doc-' + n
+}
+
+export function Repro() {
+  const [count, setCount] = createSignal(0)
+  const [step, setStep] = createSignal(1)
+  return (
+    <div>
+      <button class="count" onClick={() => setCount(c => c + 1)}>count</button>
+      <button class="step" onClick={() => setStep(s => s + 1)}>step</button>
+      <p class="target" title={String(count())} data-doc={untrack(() => docFor(step()))}>x</p>
+    </div>
+  )
+}
+`
+
+// Keyed \`.map()\` row whose bindings share one fused row effect
+// (\`emitConsolidatedRowEffect\`). The loop source is a module-level function
+// call (not a signal/prop/literal), so \`lazy-row-eligibility.ts\`'s §9.3(2)
+// hydration-consistency gate refuses lazy adoption and the loop takes the
+// eager \`stringifyPlainLoop\` -> \`emitConsolidatedRowEffect\` path — the
+// primary site #2869 reports. Asserted below (\`mapArray(\` present,
+// \`mapArrayLazy(\` absent) so a future eligibility widening fails this test
+// loudly instead of silently moving the repro onto the already-guarded path.
+const LOOP_SOURCE = `'use client'
+import { createSignal, untrack } from '@barefootjs/client'
+
+function seedItems() {
+  return [{ id: 1, label: 'a' }, { id: 2, label: 'b' }]
+}
+
+function docFor(id: number): string {
+  return 'doc-' + id
+}
+
+export function Repro() {
+  const [items, setItems] = createSignal(seedItems())
+  return (
+    <div>
+      <button onClick={() => setItems(items().map(it => ({ id: it.id, label: it.label + '!' })))}>bump</button>
+      <ul>
+        {items().map(item => (
+          <li key={item.id} title={item.label} data-doc={untrack(() => docFor(item.id))}>{item.label}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+`
+
+describe('#2869 — every eager reactive-attr write goes through emitDedupedAttrUpdate', () => {
+  test('non-loop reactive attrs: one shared __l store, sequential ordinals, guarded writes', () => {
+    const clientJs = clientJsFor(NON_LOOP_SOURCE)
+
+    expect(clientJs).toContain('const __l = []')
+    expect(clientJs).toContain('!(0 in __l) || !Object.is(__l[0], __x)')
+    expect(clientJs).toContain('!(1 in __l) || !Object.is(__l[1], __x)')
+    expect(clientJs).toContain('__l[0] = __x')
+    expect(clientJs).toContain('__l[1] = __x')
+
+    // Exactly one store for this element's effect — not one per attr.
+    const storeCount = clientJs.split('const __l = []').length - 1
+    expect(storeCount).toBe(1)
+  })
+
+  test('fused row effect (emitConsolidatedRowEffect): eager mapArray path, guarded per binding', () => {
+    const clientJs = clientJsFor(LOOP_SOURCE)
+
+    // Pin the eager path — the whole point of this fixture is exercising
+    // `emitConsolidatedRowEffect`, not the already-guarded lazy row graph.
+    expect(clientJs).toContain('mapArray(')
+    expect(clientJs).not.toContain('mapArrayLazy(')
+
+    expect(clientJs).toContain('const __l = []')
+    expect(clientJs).toContain('!(0 in __l) || !Object.is(__l[0], __x)')
+    expect(clientJs).toContain('!(1 in __l) || !Object.is(__l[1], __x)')
+
+    const storeCount = clientJs.split('const __l = []').length - 1
+    expect(storeCount).toBe(1)
+  })
+
+  test('profile mode keeps one createEffect per attr, still guarded', () => {
+    const clientJs = clientJsFor(LOOP_SOURCE, { adapter, profile: true })
+
+    // Granularity preserved: two attrs on the row's slot -> two createEffect
+    // calls (module docstring in reactive-effects.ts explains why profile
+    // mode cannot consolidate — the profiler needs one bfId per binding).
+    const effectCount = clientJs.split('createEffect(() => {').length - 1
+    expect(effectCount).toBeGreaterThanOrEqual(2)
+    expect(clientJs).toContain('const __l = []')
+    expect(clientJs).toContain('!(0 in __l) || !Object.is(__l[0], __x)')
+  })
+
+  test('emitAttrUpdate is never called directly from an effect-body emitter outside emit-reactive.ts', () => {
+    // Shrink-only ledger, same idea as binding-scope-ratchet.test.ts: every
+    // eager call site must go through emitDedupedAttrUpdate. lazy-row.ts's
+    // own dedup mechanism is unified onto the same helper (#2869), so this
+    // is a plain, unconditional invariant now — no allowlist needed.
+    const glob = new Bun.Glob('**/*.ts')
+    const root = new URL('../ir-to-client-js/', import.meta.url).pathname
+    const offenders: string[] = []
+    for (const file of glob.scanSync({ cwd: root })) {
+      if (file.endsWith('emit-reactive.ts')) continue
+      if (file.includes('__tests__')) continue
+      const text = require('node:fs').readFileSync(`${root}${file}`, 'utf8')
+      if (/\bemitAttrUpdate\(/.test(text)) offenders.push(file)
+    }
+    expect(offenders).toEqual([])
+  })
+})

package/src/__tests__/lazy-conditional.test.ts

@@ -51,13 +51,19 @@ const armsOf = (c: LoopChildConditional) => ({
 describe('analyzeLazyConditional — accepted', () => {
   test('two wiring-free static element arms', () => {
     const c = cond()
-    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    const r = analyzeLazyConditional(c, armsOf(c))
     expect(r.lazySafe).toBe(true)
     if (r.lazySafe) {
       expect(r.facts.whenTrueHtml).toContain('bf-c="s0"')
       expect(r.facts.condition).toBe('row.done')
     }
   })
+
+  test('a condition reading the loop index is accepted (#2859 follow-up) — the caller classifies it like any other binding', () => {
+    const c = cond({ conditionFreeIdentifiers: new Set(['row', '__idx']) })
+    const r = analyzeLazyConditional(c, armsOf(c))
+    expect(r.lazySafe).toBe(true)
+  })
 })
 
 describe('analyzeLazyConditional — refusals', () => {
@@ -73,7 +79,7 @@ describe('analyzeLazyConditional — refusals', () => {
   for (const [name, over, reason] of wiring) {
     test(`the true arm owns ${name}`, () => {
       const c = cond({ whenTrue: bare(over) })
-      const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+      const r = analyzeLazyConditional(c, armsOf(c))
       expect(r.lazySafe).toBe(false)
       if (!r.lazySafe) expect(r.reason).toMatch(reason)
     })
@@ -81,14 +87,14 @@ describe('analyzeLazyConditional — refusals', () => {
 
   test('the FALSE arm is checked too, not just the true one', () => {
     const c = cond({ whenFalse: bare({ events: [{} as never] }) })
-    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    const r = analyzeLazyConditional(c, armsOf(c))
     expect(r.lazySafe).toBe(false)
     if (!r.lazySafe) expect(r.reason).toMatch(/its false arm owns events/)
   })
 
   test('a fragment conditional has no single node to replace', () => {
     const c = cond()
-    const r = analyzeLazyConditional(c, '__idx', {
+    const r = analyzeLazyConditional(c, {
       whenTrueHtml: asFragment('text only'),
       whenFalseHtml: asElement(c.whenFalseHtml),
     })
@@ -98,24 +104,18 @@ describe('analyzeLazyConditional — refusals', () => {
 
   test('an arm that interpolates a value cannot be hoisted once per loop', () => {
     const c = cond({ whenTrueHtml: '<span>${row().label}</span>' })
-    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    const r = analyzeLazyConditional(c, armsOf(c))
     expect(r.lazySafe).toBe(false)
     if (!r.lazySafe) expect(r.reason).toMatch(/interpolates a value/)
   })
 
   test('a condition with no analyzable identifier set refuses rather than assumes', () => {
     const c = cond({ conditionFreeIdentifiers: undefined })
-    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    const r = analyzeLazyConditional(c, armsOf(c))
     expect(r.lazySafe).toBe(false)
     if (!r.lazySafe) expect(r.reason).toMatch(/no analyzable identifier set/)
   })
 
-  test('a condition reading the loop index refuses — the apply bodies have none', () => {
-    const c = cond({ conditionFreeIdentifiers: new Set(['row', '__idx']) })
-    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
-    expect(r.lazySafe).toBe(false)
-    if (!r.lazySafe) expect(r.reason).toMatch(/reads the loop index parameter '__idx'/)
-  })
 })
 
 // --- emission ---------------------------------------------------------------
@@ -175,6 +175,46 @@ describe('lazy row emission — wiring-free row conditional', () => {
   })
 })
 
+describe('lazy row emission — a conditional reading the loop index (#2859 follow-up)', () => {
+  // Mixed item+index condition — a PURE index-only reactive condition/attr is
+  // a separate, pre-existing, broader gap (the analyzer never classifies an
+  // expression that reads ONLY the loop index as reactive AT ALL, in either
+  // the eager or lazy path — filed separately, not this widening's job to
+  // fix). `row.done` is what makes the analyzer treat this condition as
+  // reactive in the first place; `i % 2 === 0` then rides along, which is
+  // exactly what this widening needs to prove.
+  const source = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function CondRowsIndex(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {rows().map((row, i) => (
+        <li key={row.id}>{(row.done || i % 2 === 0) ? <span class="even">even</span> : <em class="odd">odd</em>}</li>
+      ))}
+    </ul>
+  )
+}
+`
+  const js = clientJs(source, 'CondRowsIndex.tsx')
+
+  test('the loop is still lazy — the index reference no longer forces eager', () => {
+    expect(js).toContain('mapArrayLazy(')
+  })
+
+  test('the condition is emitted into applyItem, reading the live entry.index', () => {
+    const applyItem = js.slice(js.indexOf('applyItem:'), js.indexOf("}, 'l0')"))
+    expect(applyItem).toMatch(/const i = __e\.index/)
+    expect(applyItem).toContain('i % 2 === 0')
+  })
+
+  test('the plan is marked indexDriven so a pure reorder re-evaluates it', () => {
+    expect(js).toMatch(/indexDriven:\s*true/)
+  })
+})
+
 describe('lazy row emission — conditionals that keep the eager path', () => {
   const cases: Array<[string, string]> = [
     ['an arm with an event', '{row.done ? <button onClick={() => {}}>x</button> : <em>open</em>}'],

package/src/__tests__/lazy-preamble.test.ts

@@ -33,11 +33,11 @@ const SIGNALS: ReadonlySet<string> = new Set(['selected', 'filter'])
 
 describe('analyzeLazyPreamble — accepted', () => {
   test('no preamble at all', () => {
-    expect(analyzeLazyPreamble(undefined, '__idx', SIGNALS).lazySafe).toBe(true)
+    expect(analyzeLazyPreamble(undefined, SIGNALS).lazySafe).toBe(true)
   })
 
   test('const declarations reading only the item', () => {
-    const r = analyzeLazyPreamble(preamble("const full = `${row.a} ${row.b}`;", ['full']), '__idx', SIGNALS)
+    const r = analyzeLazyPreamble(preamble("const full = `${row.a} ${row.b}`;", ['full']), SIGNALS)
     expect(r.lazySafe).toBe(true)
     if (r.lazySafe) expect([...r.facts.declaredNames]).toEqual(['full'])
   })
@@ -45,17 +45,22 @@ describe('analyzeLazyPreamble — accepted', () => {
   test('a zero-arg signal read is allowed — the krausest shape', () => {
     const r = analyzeLazyPreamble(
       preamble("const cls = selected() === row.id ? 'danger' : '';", ['cls']),
-      '__idx',
       SIGNALS,
     )
     expect(r.lazySafe).toBe(true)
   })
 
   test('a destructuring const contributes every bound name, not the property keys', () => {
-    const r = analyzeLazyPreamble(preamble('const { a, b: [c] } = row;', ['a', 'c']), '__idx', SIGNALS)
+    const r = analyzeLazyPreamble(preamble('const { a, b: [c] } = row;', ['a', 'c']), SIGNALS)
     expect(r.lazySafe).toBe(true)
     if (r.lazySafe) expect([...r.facts.declaredNames].sort()).toEqual(['a', 'c'])
   })
+
+  test('a preamble reading the loop index is accepted (#2859 follow-up) — the name survives into freeNames', () => {
+    const r = analyzeLazyPreamble(preamble('const n = __idx + 1;', ['n']), SIGNALS)
+    expect(r.lazySafe).toBe(true)
+    if (r.lazySafe) expect(r.facts.freeNames.has('__idx')).toBe(true)
+  })
 })
 
 describe('analyzeLazyPreamble — refusals', () => {
@@ -112,16 +117,11 @@ describe('analyzeLazyPreamble — refusals', () => {
       preamble('const selected = row.sel;', ['selected']),
       /shadows the signal\/memo getter 'selected'/,
     ],
-    [
-      'a preamble reading the loop index',
-      preamble('const n = __idx + 1;', ['n']),
-      /reads the loop index parameter '__idx'/,
-    ],
   ]
 
   for (const [name, p, reason] of cases) {
     test(name, () => {
-      const r = analyzeLazyPreamble(p, '__idx', SIGNALS)
+      const r = analyzeLazyPreamble(p, SIGNALS)
       expect(r.lazySafe).toBe(false)
       if (!r.lazySafe) expect(r.reason).toMatch(reason)
     })
@@ -134,7 +134,7 @@ describe('analyzeLazyPreamble — refusals', () => {
       declaredNames: [],
       builderNames: [],
     }
-    const r = analyzeLazyPreamble(p, '__idx', SIGNALS)
+    const r = analyzeLazyPreamble(p, SIGNALS)
     expect(r.lazySafe).toBe(false)
     if (!r.lazySafe) expect(r.reason).toMatch(/JSX leaf/)
   })

package/src/__tests__/lazy-row-eligibility.test.ts

@@ -152,12 +152,17 @@ describe('lazyRowEligibility — profile mode', () => {
 })
 
 describe('lazyRowEligibility — binding refusals', () => {
-  test('a binding referencing the loop index parameter is refused', () => {
+  // #2859 follow-up, LIFTED: a binding referencing the loop index no longer
+  // sinks the loop. `classifyLazyBinding` forces `readsItem: true` for it
+  // (the row's position is delivered on `entry.index` exactly like the item
+  // is on `entry.item`), so the row stays eligible and the binding lands in
+  // `applyItem`. Inverted from the refusal it replaces so a gate that starts
+  // refusing again fails here by name.
+  test('a binding referencing the loop index parameter is ELIGIBLE (index tracked via entry.index)', () => {
     const decision = lazyRowEligibility(args({
       bindings: [{ ...itemBinding(), referencesIndex: true }],
     }))
-    expect(decision.eligible).toBe(false)
-    expect((decision as { reason: string }).reason).toMatch(/index parameter/)
+    expect(decision.eligible).toBe(true)
   })
 
   // §9.3a, LIFTED: an outer name the emitter cannot prime no longer sinks

package/src/__tests__/loop-child-reactive-attr-const-shadow.test.ts

@@ -36,6 +36,23 @@
  * `collectLoopChildBindings` / `collectLoopChildConditionals` /
  * `summarizeLoopChildBranch` / `collectLoopChildReactiveAttrs` /
  * `collectLoopChildReactiveTexts` into `buildLoopRowScope`.
+ *
+ * #2859: `i` is now ALSO rewritten to `i()` (`wrapLoopParamAsAccessor`,
+ * `ir-to-client-js/utils.ts`) on the EAGER path — `mapArray` hands
+ * `renderItem` an index ACCESSOR (mirroring the item accessor) and pushes
+ * each row's current position through it on every same-key reconcile, so
+ * a row surviving a reorder keeps reading its live index instead of the
+ * value frozen at creation. The #2595 fix above only prevented the
+ * module-const shadow; it still left `i` reading a plain, never-updated
+ * closure variable.
+ *
+ * #2859 follow-on (lazy-row widening): this exact shape has no ref/child
+ * component/inner loop, so it is now LAZY-eligible — the index reference
+ * no longer forces eager on its own. On the lazy path there is no `i()`
+ * accessor call at all: `applyItem` binds `const i = __e.index` (a plain
+ * value read off the reconciler-tracked entry) and the attribute reads
+ * that bare `i`, which is exactly as live across a reorder as the eager
+ * accessor was.
  */
 
 import { describe, test, expect } from 'bun:test'
@@ -99,9 +116,14 @@ describe('loop-child reactive attr vs a loop INDEX param shadowing a module cons
       }
     `)
 
-    // The per-item attribute effect must read the row's OWN index
-    // closure variable — never the outer module const's baked literal.
-    expect(js).toContain("const __v = i;")
+    // The per-item attribute effect must read the row's OWN, LIVE index
+    // (#2859 follow-on: `entry.index`, tracked by the lazy-row reconciler
+    // the same way it tracks `entry.item`) — never the outer module
+    // const's baked literal, and never a frozen closure variable that
+    // would go stale after a reorder.
+    expect(js).toContain('const i = __e.index')
+    expect(js).toContain('const __x = i')
     expect(js).not.toContain("const __v = 'MODULE_CONST';")
+    expect(js).not.toContain("const __x = 'MODULE_CONST'")
   })
 })