@barefootjs/jsx 0.33.6 → 0.35.0

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'")
   })
 })

package/src/__tests__/loop-item-conditional-codegen.test.ts

@@ -71,9 +71,11 @@ describe('#1665 — keyless whole-item conditional emits valid JS (BF023)', () =
     const { js, errorCodes } = clientJsFor('sel() === t.id && <li>{t.id}</li>', /* withKey */ false)
     expect(errorCodes).toContain(ErrorCodes.MISSING_KEY_IN_LIST)
     // No empty template-literal interpolation, and the anchor falls back to the
-    // iteration index so the comment value is well-formed.
+    // iteration index so the comment value is well-formed. `__idx` is bound to
+    // an index ACCESSOR at runtime (#2859), so the fallback calls it like
+    // every other reference to the loop's index parameter.
     expect(js).not.toContain('${}')
-    expect(js).toContain('bf-loop-i:${__idx}')
+    expect(js).toContain('bf-loop-i:${__idx()}')
     // The whole client module must parse.
     const body = js.replace(/^import[^\n]*\n/gm, '').replace(/^export /gm, '')
     expect(() => new Function(body)).not.toThrow()

package/src/__tests__/lowering-value-position.test.ts

@@ -0,0 +1,232 @@
+/**
+ * Registered-lowering recognition at ANY value position (#2843), not only
+ * a call's own top-level entry point. Two independent seams share this
+ * shared-layer test:
+ *
+ *  - the SUPPORT GATE (`isSupported`/`isSupportedValue`, `expression-parser.ts`),
+ *    which must admit a matched call's own params — even an `object-literal`,
+ *    normally refused at `rendered` position — wherever it's nested
+ *    (a ternary branch, a template-literal interpolation, a binary operand),
+ *    by re-checking the neutral node's `loweringNodeChildren` instead of the
+ *    call's raw `args`;
+ *  - the shared `emitParsedExpr` DISPATCHER (`parsed-expr-emitter.ts`), whose
+ *    `call` case now tries an emitter's optional `lowering` seam before its
+ *    ordinary `call()`/`callbackMethod` dispatch, so an adapter that adopts
+ *    it renders the matched node correctly at any nesting depth too.
+ *
+ * Uses a standalone SAMPLE plugin (independent of `queryHref`) so these tests
+ * exercise the mechanism itself, mirroring `lowering-registry.test.ts`.
+ */
+
+import { describe, test, expect, afterEach } from 'bun:test'
+import {
+  registerLoweringPlugin,
+  getLoweringPlugins,
+  prepareLoweringMatchers,
+  __resetLoweringPluginsForTest,
+  isSupported,
+  isSupportedValue,
+  emitParsedExpr,
+  type LoweringPlugin,
+  type LoweringEmitter,
+  type ParsedExprEmitter,
+  type IRMetadata,
+  type ParsedExpr,
+} from '../index'
+
+// A minimal sample plugin: active only when the component imports anything
+// from `@sample/pkg`, lowering `demo(base, { … })` to a neutral `guard-list`
+// on the `query` helper — the exact shape `queryHref` produces, so these
+// tests exercise the same object-literal-admission path #2743/#2841 needed.
+const samplePlugin: LoweringPlugin = {
+  name: 'sample-value-position-demo',
+  prepare(metadata) {
+    const active = metadata.imports.some(i => i.source === '@sample/pkg' && !i.isTypeOnly)
+    if (!active) return null
+    return (callee, args) => {
+      if (callee.kind !== 'identifier' || callee.name !== 'demo') return null
+      const [base, obj] = args
+      if (!base || obj?.kind !== 'object-literal') return null
+      return {
+        kind: 'guard-list',
+        helper: 'query',
+        base,
+        triples: obj.properties
+          .filter((p): p is Extract<typeof p, { kind: 'prop' }> => p.kind === 'prop')
+          .map(p => ({ guard: null, key: p.key, value: p.value })),
+      }
+    }
+  },
+}
+
+function metadataImporting(source: string): IRMetadata {
+  return { imports: [{ source, isTypeOnly: false, specifiers: [] }] } as unknown as IRMetadata
+}
+
+afterEach(() => {
+  const remaining = getLoweringPlugins().filter(p => p.name !== 'sample-value-position-demo')
+  __resetLoweringPluginsForTest(remaining)
+})
+
+const base = { kind: 'literal', value: '/x', literalType: 'string' } as ParsedExpr
+const tagValue = { kind: 'literal', value: 'a', literalType: 'string' } as ParsedExpr
+const paramsObj = {
+  kind: 'object-literal',
+  raw: '{ tag: "a" }',
+  properties: [{ kind: 'prop', key: 'tag', shorthand: false, value: tagValue }],
+} as ParsedExpr
+const demoCall = { kind: 'call', callee: { kind: 'identifier', name: 'demo' }, args: [base, paramsObj] } as ParsedExpr
+
+function matchers(): ReturnType<typeof prepareLoweringMatchers> {
+  registerLoweringPlugin(samplePlugin)
+  return prepareLoweringMatchers(metadataImporting('@sample/pkg'))
+}
+
+describe('isSupported / isSupportedValue with loweringMatchers (#2843)', () => {
+  test('a matched call nested in a conditional branch is admitted at rendered position', () => {
+    const ms = matchers()
+    const cond: ParsedExpr = {
+      kind: 'conditional',
+      test: { kind: 'identifier', name: 'ok' },
+      consequent: demoCall,
+      alternate: { kind: 'literal', value: '/fallback', literalType: 'string' },
+    }
+    expect(isSupported(cond, { loweringMatchers: ms }).supported).toBe(true)
+    // Without matchers, the same tree is refused (the object-literal arg).
+    expect(isSupported(cond).supported).toBe(false)
+  })
+
+  test('a matched call nested in a logical operand is admitted', () => {
+    const ms = matchers()
+    const logical: ParsedExpr = {
+      kind: 'logical',
+      op: '||',
+      left: demoCall,
+      right: { kind: 'literal', value: '/fallback', literalType: 'string' },
+    }
+    expect(isSupported(logical, { loweringMatchers: ms }).supported).toBe(true)
+  })
+
+  test('a matched call nested in a template-literal interpolation is admitted', () => {
+    const ms = matchers()
+    const tmpl: ParsedExpr = {
+      kind: 'template-literal',
+      parts: [
+        { type: 'string', value: 'pre ' },
+        { type: 'expression', expr: demoCall },
+      ],
+    }
+    expect(isSupported(tmpl, { loweringMatchers: ms }).supported).toBe(true)
+  })
+
+  test('an unmatched call inside the same shapes still refuses (no regression)', () => {
+    const ms = matchers()
+    const unmatchedCall: ParsedExpr = {
+      kind: 'call',
+      callee: { kind: 'identifier', name: 'other' },
+      args: [base, paramsObj],
+    }
+    const cond: ParsedExpr = {
+      kind: 'conditional',
+      test: { kind: 'identifier', name: 'ok' },
+      consequent: unmatchedCall,
+      alternate: { kind: 'literal', value: '/fallback', literalType: 'string' },
+    }
+    expect(isSupported(cond, { loweringMatchers: ms }).supported).toBe(false)
+  })
+
+  test('a matched call whose own child is unsupported still refuses, loudly (sound-or-loud)', () => {
+    const ms = matchers()
+    // The value of the one triple is itself an unsupported node (a bare
+    // arrow function) — the plugin's node still carries it as a child, so
+    // it must still be checked, not silently passed through.
+    const arrow: ParsedExpr = { kind: 'arrow', params: ['x'], body: { kind: 'identifier', name: 'x' } }
+    const badParams = {
+      kind: 'object-literal',
+      raw: '{ tag: (x) => x }',
+      properties: [{ kind: 'prop', key: 'tag', shorthand: false, value: arrow }],
+    } as ParsedExpr
+    const badCall: ParsedExpr = {
+      kind: 'call',
+      callee: { kind: 'identifier', name: 'demo' },
+      args: [base, badParams],
+    }
+    expect(isSupported(badCall, { loweringMatchers: ms }).supported).toBe(false)
+  })
+
+  test('isSupportedValue behaves the same way as isSupported for a matched nested call', () => {
+    const ms = matchers()
+    const cond: ParsedExpr = {
+      kind: 'conditional',
+      test: { kind: 'identifier', name: 'ok' },
+      consequent: demoCall,
+      alternate: { kind: 'literal', value: '/fallback', literalType: 'string' },
+    }
+    expect(isSupportedValue(cond, { loweringMatchers: ms }).supported).toBe(true)
+  })
+})
+
+describe('emitParsedExpr dispatch with an emitter.lowering seam (#2843)', () => {
+  // A stub emitter exercising only what the `call` case needs; every other
+  // method throws so an accidental fallthrough fails loudly in the test.
+  function stubEmitter(lowering?: LoweringEmitter): ParsedExprEmitter {
+    const unimplemented = (name: string) => () => {
+      throw new Error(`unexpected emitter.${name} call in this test`)
+    }
+    return {
+      identifier: (name: string) => `ID(${name})`,
+      literal: (v) => `LIT(${JSON.stringify(v)})`,
+      call: (callee, args, emit) => `CALL(${emit(callee)}, ${args.map(emit).join(', ')})`,
+      member: unimplemented('member'),
+      indexAccess: unimplemented('indexAccess'),
+      binary: unimplemented('binary'),
+      unary: unimplemented('unary'),
+      logical: unimplemented('logical'),
+      conditional: unimplemented('conditional'),
+      templateLiteral: unimplemented('templateLiteral'),
+      callbackMethod: unimplemented('callbackMethod'),
+      arrow: unimplemented('arrow'),
+      regex: unimplemented('regex'),
+      arrayLiteral: unimplemented('arrayLiteral'),
+      objectLiteral: (_props, raw) => `OBJ(${raw})`,
+      arrayMethod: unimplemented('arrayMethod'),
+      flatMethod: unimplemented('flatMethod'),
+      unsupported: (raw) => `UNSUPPORTED(${raw})`,
+      lowering,
+    }
+  }
+
+  test('a matched call renders via emitter.lowering.render, not the ordinary call() dispatch', () => {
+    const ms = matchers()
+    const lowering: LoweringEmitter = {
+      matchers: ms,
+      render: (node, emit) => {
+        if (node.kind !== 'guard-list') return null
+        const parts = node.triples.map(t => `${t.key}=${emit(t.value)}`).join('&')
+        return `QUERY(${emit(node.base)}, ${parts})`
+      },
+    }
+    expect(emitParsedExpr(demoCall, stubEmitter(lowering))).toBe('QUERY(LIT("/x"), tag=LIT("a"))')
+  })
+
+  test('without emitter.lowering, the same call falls through to the ordinary call() dispatch', () => {
+    expect(emitParsedExpr(demoCall, stubEmitter())).toBe('CALL(ID(demo), LIT("/x"), OBJ({ tag: "a" }))')
+  })
+
+  test('lowering present but the node kind/helper has no mapping falls through to call()', () => {
+    const ms = matchers()
+    const lowering: LoweringEmitter = { matchers: ms, render: () => null }
+    expect(emitParsedExpr(demoCall, stubEmitter(lowering))).toBe('CALL(ID(demo), LIT("/x"), OBJ({ tag: "a" }))')
+  })
+
+  test('an unmatched call is unaffected by an emitter.lowering seam', () => {
+    const ms = matchers()
+    const lowering: LoweringEmitter = { matchers: ms, render: () => 'SHOULD NOT BE REACHED' }
+    const unmatchedCall: ParsedExpr = {
+      kind: 'call',
+      callee: { kind: 'identifier', name: 'other' },
+      args: [base],
+    }
+    expect(emitParsedExpr(unmatchedCall, stubEmitter(lowering))).toBe('CALL(ID(other), LIT("/x"))')
+  })
+})

package/src/__tests__/map-arbitrary-body.test.ts

@@ -60,7 +60,7 @@ describe('.map() array-builder body — JS-runtime verbatim (Stage 3 / D4)', ()
     // Byte-level parity is pinned by the map-array-builder-escaping fixture.
     const r = compile(arrayBuilder, false)
     const cj = r.files.find(f => f.type === 'clientJs')!.content
-    expect(cj).toMatch(/out\.push\(`<td>\$\{escapeText\(\(c\)\)\}<\/td>`\)/)
+    expect(cj).toMatch(/out\.push\(`<td>\$\{escapeText\(c\)\}<\/td>`\)/)
   })
 
   test('the element-array child {out} is joined into the row', () => {

package/src/__tests__/nested-loop-index-param.test.ts

@@ -63,7 +63,11 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     // The renderItem body binds the alias before using it.
     expect(content).toContain('const i = __innerIdx')
     const aliasIdx = content.indexOf('const i = __innerIdx')
-    const setAttrIdx = content.indexOf(`setAttribute('data-key-1', String(i))`)
+    // `i` is bound to an index ACCESSOR at runtime (#2859) — `mapArray` hands
+    // every renderItem an index accessor (mirroring the item accessor) and
+    // pushes the row's current position through it on reorder, so `i()` reads
+    // the live value instead of a plain number frozen at row creation.
+    const setAttrIdx = content.indexOf(`setAttribute('data-key-1', String(i()))`)
     expect(aliasIdx).toBeGreaterThanOrEqual(0)
     expect(setAttrIdx).toBeGreaterThan(aliasIdx)
     // The alias must land before the clone IIFE too — the cloned template's
@@ -156,7 +160,12 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     `)
 
     expect(content).toContain('const i = __innerIdx')
-    expect(content).toContain('setClicked(i)')
+    // A direct (non-delegated) listener on a nested-loop row reads the row's
+    // LIVE index accessor (#2859) — unlike the top-level delegated click
+    // dispatcher (`event-delegation-index-param.test.ts`), this handler is
+    // attached once at row creation, so without this it would keep firing
+    // with the index the row was first created at after a same-key reorder.
+    expect(content).toContain('setClicked(i())')
   })
 
   test('byte-stability: index declared but never referenced emits no alias', () => {
@@ -278,7 +287,9 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     expect(content).toContain('(item, i) => String(i)')
     expect(content).toContain('const i = __bidx')
     const aliasIdx = content.indexOf('const i = __bidx')
-    const setAttrIdx = content.indexOf(`setAttribute('data-key-1', String(i))`)
+    // `i` reads the live index accessor (#2859) — see the sibling assertion
+    // in the 'key={i}' test above.
+    const setAttrIdx = content.indexOf(`setAttribute('data-key-1', String(i()))`)
     expect(aliasIdx).toBeGreaterThanOrEqual(0)
     expect(setAttrIdx).toBeGreaterThan(aliasIdx)
   })

package/src/__tests__/nested-loop-reactive-attrs.test.ts

@@ -394,8 +394,10 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     // The helper call must appear inside a createEffect alongside the
     // textContent write — `labelAt(` also appears in the static template
     // clone, so asserting it independently would pass even with the
-    // effect missing (the exact regression here).
-    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?__bfw_\w+\('s\d+', String\(labelAt\(pi\)\)\)/)
+    // effect missing (the exact regression here). `pi` reads the row's
+    // live index accessor (#2859), so `labelAt(pi())` also stays correct
+    // if this innermost loop's rows ever survive a same-key reorder.
+    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?__bfw_\w+\('s\d+', String\(labelAt\(pi\(\)\)\)\)/)
     expect(content).toContain("setAttribute('class'")
   })
 })

package/src/__tests__/reactive-attrs-in-map.test.ts

@@ -266,17 +266,20 @@ describe('reactive attributes inside .map() callbacks', () => {
     expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
 
     const clientJs = result.files.find(f => f.type === 'clientJs')!.content
-    // The per-item style binding must be wired through a createEffect that
-    // re-reads the helper and writes the style attribute, so it tracks the
-    // `items()` signal and updates after hydration. Pin the helper call
-    // *inside* the createEffect alongside the style write — `widthAt(` also
+    // The per-item style binding must be wired reactively — re-reading the
+    // helper and writing the style attribute, so it tracks the `items()`
+    // signal and updates after hydration, rather than being baked into the
+    // item template once. This row has no ref/child component/inner loop,
+    // so it is lazy-eligible (#2859 follow-on): `widthAt(i)` reads the
+    // index (forcing `applyItem`) and closes over `items()` opaquely
+    // (forcing `applyOuter` too, via the re-subscribe seam), so BOTH apply
+    // bodies re-evaluate it, not a `createEffect`. Pin the helper call
+    // *inside* `applyItem` alongside the style write — `widthAt(` also
     // appears in the static template clone, so asserting it independently
-    // could pass even if the effect was missing (the exact regression here).
-    // The index resolves to the loop's renderItem index param, in scope
-    // inside the factory.
-    expect(clientJs).toMatch(
-      /createEffect\(\(\)\s*=>\s*\{[\s\S]*?widthAt\([\s\S]*?setAttribute\('style'/,
-    )
+    // could pass even if the reactive wiring were missing (the exact
+    // regression here).
+    const applyItem = clientJs.slice(clientJs.indexOf('applyItem:'), clientJs.indexOf('applyOuter:'))
+    expect(applyItem).toMatch(/widthAt\([\s\S]*?setAttribute\('style'/)
   })
 
   test('keyed loop: `key` prop is not emitted as a reactive DOM attribute', () => {

package/src/__tests__/rewrite-destructured-props.test.ts

@@ -124,3 +124,40 @@ export { Comp }
     expect(js).toContain("items.map((tag) => tag.a).join(',') + _p.tag")
   })
 })
+
+// #2828 follow-up (pullfrog review on #2853): `collectBranchLocalPropRefsViaSubstitution`
+// (jsx-to-ir.ts) is a second, independent AST walk that decides whether a
+// branch-local variable's TRANSITIVE prop dependency gets unioned into a
+// reactive expression's rewrite — same "is this a value reference" question
+// #2828 fixed in `collectAstPropRefs`, but this walk had its own,
+// un-fixed `isShorthand` exclusion. A branch-local whose own initializer
+// reads a prop, referenced via object-literal shorthand inside a REACTIVE
+// expression, had its prop dependency silently dropped: the emitted
+// module-scope hydrate template lambda kept a bare, unprefixed reference
+// to the prop name instead of `_p.<prop>`.
+describe('branch-local transitive prop-dep via shorthand reference (#2828 follow-up)', () => {
+  test('a branch-local read from a prop, referenced via shorthand, still resolves to _p.<prop> in the hydrate template', () => {
+    const source = `
+"use client"
+import { createSignal } from '@barefootjs/client'
+export function Comp({ tag }: { tag: string }) {
+  const [n] = createSignal(0)
+  if (n() > 0) {
+    const local = tag
+    return <div data-x={JSON.stringify({ local }) + n()}>{n()}</div>
+  }
+  return <div>none</div>
+}
+`
+    const js = compileClientJs(source)
+    // Pre-fix: the hydrate template's module-scope lambda kept a bare
+    // `tag` reference (no binding at that scope -- ReferenceError at pure
+    // CSR mount). Post-fix: it resolves through `_p.tag` like every other
+    // prop reference. (The surrounding `{ (_p.tag) }` shape -- the branch-
+    // local substitution dropping the shorthand's own key -- is a
+    // separate, pre-existing defect tracked independently; this test pins
+    // only the prop-dependency question #2828's follow-up fixed.)
+    expect(js).not.toContain('{ (tag) }')
+    expect(js).toContain('{ (_p.tag) }')
+  })
+})