@barefootjs/jsx 0.18.5 → 0.19.0

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

@@ -0,0 +1,285 @@
+/**
+ * A NESTED (inner) `.map()` callback closing over its own `.map((item, i) =>
+ * ...)` index param (#2218). Sibling of `event-delegation-index-param.test.ts`
+ * (#2189), which fixed the same class of bug for delegated event handlers —
+ * this covers the emit path #2189 did NOT touch: the nested-loop `key`,
+ * reactive text/attr, and template-interpolation emit path in
+ * `control-flow/plan/build-inner-loop.ts` / `stringify/inner-loop.ts` (and
+ * the conditional-branch-arm sibling in `build-loop-child-arm.ts` /
+ * `stringify/loop-child-arm.ts`).
+ *
+ * Root cause: `NestedLoop` never carried an `index` field, so `loopKeyFn`
+ * dropped the index param from the keyFn's own parameter list, and the
+ * renderItem body only ever received the index as a synthetic
+ * `__innerIdx<uid>` positional param — the user's index name (e.g. `i`) was
+ * never bound to it, so any reference threw `ReferenceError: i is not
+ * defined` and the inner loop rendered nothing.
+ *
+ * Gating (byte-for-byte stability, same philosophy as #2189): the alias
+ * `const i = __innerIdx<uid>` is only emitted when something in the inner
+ * loop body actually references the index — see `nestedLoopReferencesIndex`
+ * in `control-flow/shared.ts`.
+ */
+
+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 })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+describe('nested .map() index param referenced in key/text/attr (#2218)', () => {
+  test('key={i}: keyFn includes the index param and renderItem binds the alias', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string }
+      interface Group { id: number; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.items.map((item, i) => (
+                  <span key={i}>{item.text}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // keyFn threads the index param, mirroring TopLevelLoop/BranchLoop.
+    expect(content).toContain('(item, i) => String(i)')
+    // 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))`)
+    expect(aliasIdx).toBeGreaterThanOrEqual(0)
+    expect(setAttrIdx).toBeGreaterThan(aliasIdx)
+    // The alias must land before the clone IIFE too — the cloned template's
+    // `data-key-1="${i}"` interpolation reads it.
+    const cloneIdx = content.indexOf('__t.innerHTML')
+    expect(cloneIdx).toBeGreaterThan(aliasIdx)
+  })
+
+  test('index referenced in a template text interpolation is bound and rendered', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string }
+      interface Group { id: number; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.items.map((item, i) => (
+                  <span key={item.id}>{i}: {item.text}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toContain('const i = __innerIdx')
+    // The template's `${i}` interpolation is emitted (escaped for text).
+    expect(content).toContain('escapeText(i)')
+    const aliasIdx = content.indexOf('const i = __innerIdx')
+    // The outer element's own clone IIFE also bakes the initial nested HTML
+    // via a plain (unrelated, arrow-scoped) `.map((item, i) => ...)` — so
+    // `escapeText(i)` appears once there too. Look for the occurrence
+    // *after* the alias, inside the inner renderItem's own clone template.
+    const templateIdx = content.indexOf('escapeText(i)', aliasIdx)
+    expect(templateIdx).toBeGreaterThan(aliasIdx)
+  })
+
+  test('index referenced in a reactive attribute expression is bound', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string; active: boolean }
+      interface Group { id: number; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.items.map((item, i) => (
+                  <span key={item.id} className={i % 2 === 0 ? 'even' : 'odd'}>{item.text}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toContain('const i = __innerIdx')
+    expect(content).toContain(`i % 2 === 0 ? 'even' : 'odd'`)
+  })
+
+  test('index referenced only in an event handler inside the inner loop is bound', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string }
+      interface Group { id: number; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        const [clicked, setClicked] = createSignal(-1)
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.items.map((item, i) => (
+                  <span key={item.id} onClick={() => setClicked(i)}>{item.text}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toContain('const i = __innerIdx')
+    expect(content).toContain('setClicked(i)')
+  })
+
+  test('byte-stability: index declared but never referenced emits no alias', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string }
+      interface Group { id: number; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.items.map((item, i) => (
+                  <span key={item.id}>{item.text}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).not.toContain('const i = __innerIdx')
+    // The keyFn also has no reason to thread `i` — the key doesn't use it.
+    expect(content).toContain('(item, i) => String(item.id)')
+  })
+
+  test('index named like a property is not bound when only the property is used', () => {
+    // Mirrors the #2189 test of the same name: gating is AST-based (free
+    // identifiers), so `item.id` (a property access) never false-matches
+    // an index param literally named `id`.
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string }
+      interface Group { id: number; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.items.map((item, id) => (
+                  <span key={item.id}>{item.text}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).not.toContain('const id = __innerIdx')
+  })
+
+  test('static inner array (no signal dependency) also binds the index alias', () => {
+    // Sibling of the reactive-path test above, exercising `emitStatic` in
+    // `stringify/inner-loop.ts` (the `forEach` renderItem path used when the
+    // inner array does not reference the outer loop param reactively).
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; n: number }
+      const SHARED: Item[] = [{ id: 1, n: 7 }]
+      function MyChild(props: { tag: string }) {
+        return <span>{props.tag}</span>
+      }
+      export function Repro() {
+        const [rows, setRows] = createSignal([{ id: 1, key: 'a' }])
+        return (
+          <div onClick={() => setRows(prev => [...prev])}>
+            {rows().map((row) => (
+              <div key={row.id}>
+                {SHARED.map((cell, i) => (
+                  <MyChild key={cell.id} tag={\`\${i}-\${cell.n}\`} />
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/SHARED\.forEach\(\(cell, __innerIdx[^)]+\) => \{[\s\S]*?const\s+i\s*=\s*__innerIdx/)
+  })
+
+  test('conditional-branch-arm inner loop (loop -> conditional -> inner loop) binds the index alias', () => {
+    // Exercises `build-loop-child-arm.ts::buildBranchInnerLoopsPlan` /
+    // `stringify/loop-child-arm.ts::stringifyBranchInnerLoops` — the sibling
+    // emit path for an inner loop that lives inside a reactive conditional
+    // branch which is itself inside an outer loop's item body.
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: number; text: string }
+      interface Group { id: number; flag: boolean; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o) => (
+              <div key={o.id}>
+                {o.flag ? (
+                  <div>
+                    {o.items.map((item, i) => (
+                      <span key={i}>{i}: {item.text}</span>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    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))`)
+    expect(aliasIdx).toBeGreaterThanOrEqual(0)
+    expect(setAttrIdx).toBeGreaterThan(aliasIdx)
+  })
+})

package/src/__tests__/props-destructuring.test.ts

@@ -356,21 +356,74 @@ describe('Destructured props keep their declared types (BF043 fixture #2150)', (
     expect(typeOf(ctx, 'value')).toEqual({ kind: 'unknown', raw: 'unknown' })
   })
 
-  // Deliberate scope: only required primitives are resolved. Optional and
-  // non-primitive members stay `unknown` so typed adapters keep their existing
-  // interface{}-based lowering (attribute omission, bf_flat/spread/bf_json).
-  test('leaves OPTIONAL members as unknown (preserves nillable omission)', () => {
+  // #2259: optional primitives resolve type AND optionality, same as the
+  // props-object path — pre-#2259 they were skipped wholesale so typed
+  // adapters kept a nillable interface{} field; #2252's nullish-flip
+  // machinery now supplies the absent representation where it matters.
+  test('resolves OPTIONAL primitive members with optional: true (#2259)', () => {
     const source = `
-      type Props = { value?: number }
+      type Props = { label: string; size?: number; on?: boolean }
 
-      export function Component({ value }: Props) {
-        return <div>{value}</div>
+      export function Component({ label, size, on }: Props) {
+        return <div>{label}{size ?? 0}{on ? 'y' : 'n'}</div>
       }
     `
 
     const ctx = analyzeComponent(source, 'Component.tsx')
 
-    expect(typeOf(ctx, 'value')).toEqual({ kind: 'unknown', raw: 'unknown' })
+    const param = (name: string) => ctx.propsParams.find((p) => p.name === name)
+    expect(param('label')).toMatchObject({
+      type: { kind: 'primitive', primitive: 'string' },
+      optional: false,
+    })
+    expect(param('size')).toMatchObject({
+      type: { kind: 'primitive', primitive: 'number' },
+      optional: true,
+    })
+    expect(param('on')).toMatchObject({
+      type: { kind: 'primitive', primitive: 'boolean' },
+      optional: true,
+    })
+  })
+
+  // A non-primitive optional keeps `unknown` (interface{}-based lowering)
+  // but still reports the type's `?` — the adversarial catalogue derives
+  // absent points from `optional` alone.
+  test('marks OPTIONAL non-primitive members optional while keeping unknown type (#2259)', () => {
+    const source = `
+      type Todo = { id: number }
+      type Props = { items?: Todo[] }
+
+      export function Component({ items }: Props) {
+        return <div>{(items ?? []).length}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(ctx.propsParams.find((p) => p.name === 'items')).toMatchObject({
+      type: { kind: 'unknown', raw: 'unknown' },
+      optional: true,
+    })
+  })
+
+  // A destructure default and the type's `?` both mean "caller may omit";
+  // the default keeps `defaultValue` so adapters bake it (and the Go
+  // nullish flip keeps excluding defaulted props).
+  test('keeps defaultValue alongside optional for `{ size = 5 }` (#2259)', () => {
+    const source = `
+      export function Component({ size = 5 }: { size?: number }) {
+        return <div>{size}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(ctx.propsParams.find((p) => p.name === 'size')).toMatchObject({
+      type: { kind: 'primitive', primitive: 'number' },
+      optional: true,
+      defaultValue: '5',
+    })
   })
 
   test('leaves NON-primitive members (arrays/objects) as unknown', () => {

package/src/__tests__/signal-init-eval.test.ts

@@ -0,0 +1,138 @@
+import { describe, test, expect } from 'bun:test'
+import { evaluateSignalInit, tryEvaluateSignalInit } from '../signal-init-eval'
+
+// #2209: replaces 7 near-duplicate regex-based `evaluateSignalInit`
+// evaluators (one per template-string adapter's test-render.ts harness)
+// with a single sandboxed real-JS evaluator. Absorbs and supersedes
+// `packages/adapter-mojolicious/src/__tests__/evaluate-signal-init.test.ts`
+// (#1672's pins) plus the actual #2209 repro shape.
+describe('evaluateSignalInit (#2209)', () => {
+  test('the #2209 repro: (props.x ?? []).map(t => ({ ...t, editing: false }))', () => {
+    const expr = `(props.initialTodos ?? []).map(t => ({ ...t, editing: false }))`
+    expect(evaluateSignalInit(expr, { initialTodos: [{ id: 1, done: false }] })).toEqual([
+      { id: 1, done: false, editing: false },
+    ])
+    expect(evaluateSignalInit(expr, undefined)).toEqual([])
+    expect(evaluateSignalInit(expr, {})).toEqual([])
+  })
+
+  test('an object-spread override applies after the spread (matches JS semantics)', () => {
+    const expr = `(props.items ?? []).map(t => ({ ...t, done: true }))`
+    expect(evaluateSignalInit(expr, { items: [{ id: 1, done: false }] })).toEqual([
+      { id: 1, done: true },
+    ])
+  })
+
+  // #1672 pins, absorbed from the deleted mojolicious-local test file.
+  test('parses an inline object-array initial value', () => {
+    expect(evaluateSignalInit(`[{ id: 'a' }, { id: 'b' }, { id: 'c' }]`)).toEqual([
+      { id: 'a' },
+      { id: 'b' },
+      { id: 'c' },
+    ])
+  })
+
+  test('parses scalar and mixed arrays, including nested objects', () => {
+    expect(evaluateSignalInit(`['x', 'y']`)).toEqual(['x', 'y'])
+    expect(evaluateSignalInit(`[1, 2, 3]`)).toEqual([1, 2, 3])
+    expect(evaluateSignalInit(`[{ id: 'a', n: 1, ok: true }]`)).toEqual([
+      { id: 'a', n: 1, ok: true },
+    ])
+  })
+
+  test('still parses scalars, empty array, and props passthrough', () => {
+    expect(evaluateSignalInit(`'b'`)).toBe('b')
+    expect(evaluateSignalInit(`5`)).toBe(5)
+    expect(evaluateSignalInit(`[]`)).toEqual([])
+    expect(evaluateSignalInit(`props.value`, { value: 42 })).toBe(42)
+  })
+
+  test('bails to null for arrays with non-literal, unbound elements', () => {
+    expect(evaluateSignalInit(`[foo(), bar]`)).toBeNull()
+  })
+
+  // Additional shapes the old regex evaluators supported.
+  test('props.x ?? default with x present, absent, or explicitly null', () => {
+    expect(evaluateSignalInit(`props.x ?? 7`, { x: 3 })).toBe(3)
+    expect(evaluateSignalInit(`props.x ?? 7`, {})).toBe(7)
+    expect(evaluateSignalInit(`props.x ?? 7`, undefined)).toBe(7)
+    // Fix over the old regex evaluators: JS `??` also falls through on an
+    // explicit `null`/`undefined` prop value — the old regex only checked
+    // `propName in props` and returned the raw (null) value, which was
+    // actually a bug relative to real JS `??` semantics.
+    expect(evaluateSignalInit(`props.x ?? 7`, { x: null })).toBe(7)
+  })
+
+  test('negative and decimal number literals', () => {
+    expect(evaluateSignalInit(`-7.6`)).toBe(-7.6)
+    expect(evaluateSignalInit(`42`)).toBe(42)
+  })
+
+  test('booleans', () => {
+    expect(evaluateSignalInit(`true`)).toBe(true)
+    expect(evaluateSignalInit(`false`)).toBe(false)
+  })
+
+  test('an explicit null initializer maps to null (the "skip" outcome)', () => {
+    expect(evaluateSignalInit(`null`)).toBeNull()
+  })
+
+  // New coverage for #2209's sandboxing contract.
+  test('blocked globals fail deterministically and fall back to null', () => {
+    expect(evaluateSignalInit(`Date.now()`)).toBeNull()
+    expect(evaluateSignalInit(`Math.random()`)).toBeNull()
+    expect(evaluateSignalInit(`typeof window`)).not.toBe('object')
+  })
+
+  test('a TS-only remnant that fails to parse as an expression falls back to null', () => {
+    expect(evaluateSignalInit(`foo as Bar`)).toBeNull()
+  })
+
+  test('a non-transportable value (class instance) falls back to null', () => {
+    expect(evaluateSignalInit(`new Set([1, 2])`)).toBeNull()
+  })
+
+  test('a bare destructured-prop identifier (not props.x) is unbound and falls back to null', () => {
+    expect(evaluateSignalInit(`count`, { count: 5 })).toBeNull()
+  })
+
+  test('tryEvaluateSignalInit distinguishes an explicit undefined from a real ok:false', () => {
+    expect(tryEvaluateSignalInit(`undefined`)).toEqual({ ok: true, value: undefined })
+    expect(tryEvaluateSignalInit(`foo()`)).toEqual({ ok: false })
+    // evaluateSignalInit's wrapper collapses both to null:
+    expect(evaluateSignalInit(`undefined`)).toBeNull()
+    expect(evaluateSignalInit(`foo()`)).toBeNull()
+  })
+
+  // Copilot review (#2229): `Function` is now shadowed too — closes the
+  // most direct bypass of the blocked-globals list.
+  test('the Function constructor is shadowed', () => {
+    expect(evaluateSignalInit(`Function('return 1')()`)).toBeNull()
+  })
+
+  // Copilot review (#2229): `isTransportable` must reject a sparse array
+  // (a hole is not the same as an element that's explicitly `undefined` —
+  // `Array.prototype.every` silently skips holes, which previously let
+  // one through undetected).
+  test('a sparse array (a hole, not an explicit undefined) falls back to null', () => {
+    // biome-ignore lint: intentional sparse-array literal for the hole test
+    expect(evaluateSignalInit(`[1, , 3]`)).toBeNull()
+  })
+
+  // Copilot review (#2229): the same object appearing twice in a
+  // non-cyclic shape (shared by reference, not by cycle) is transportable
+  // — JSON-equivalent behavior would just duplicate it — and must NOT be
+  // rejected by an overly-global "seen" set.
+  test('a shared (non-cyclic) reference is transportable', () => {
+    expect(evaluateSignalInit(`(() => { const shared = { id: 1 }; return [shared, shared] })()`)).toEqual([
+      { id: 1 },
+      { id: 1 },
+    ])
+  })
+
+  test('a genuine cycle still falls back to null', () => {
+    expect(
+      evaluateSignalInit(`(() => { const o = { id: 1 }; o.self = o; return o })()`),
+    ).toBeNull()
+  })
+})

package/src/__tests__/static-array-inner-loop-index-param.test.ts

@@ -0,0 +1,180 @@
+/**
+ * A FULLY-STATIC nested loop's inner `.map((item, i) => ...)` index param
+ * referenced in a child-component prop (#2231). Follow-up to #2218, which
+ * fixed the reactive (`mapArray`) and branch-arm paths — this covers the
+ * static-array child-init family (`plan/build-static-array-child-init.ts` /
+ * `stringify/static-array-child-init.ts`), which those fixes didn't reach
+ * because it never goes through `loopKeyFn` or the renderItem alias.
+ *
+ * Root cause: the `inner-loop-nested` shape hardcoded the synthetic
+ * `__innerIdx` as the inner `forEach`'s index param, and the
+ * `component-rooted-inner-loop` shape (#1725) declared no index params at
+ * all — so a prop getter like `get label() { return i }` threw
+ * `ReferenceError: i is not defined` on `initChild`'s first prop read at
+ * hydration.
+ *
+ * Fix: emit the user's declared index name directly as the `forEach` index
+ * param — the same idiom the outer loop has always used (`elem.index ||
+ * '__idx'`). No alias binding is needed because `forEach` supplies the real
+ * array index positionally. Loops that declare no index keep byte-identical
+ * output (`__innerIdx` fallback for `inner-loop-nested`, bare single-param
+ * heads for `component-rooted-inner-loop`).
+ */
+
+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 })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+describe('static inner-loop index param in child-component props (#2231)', () => {
+  test('inner-loop-nested: the inner forEach binds the user index name', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { Cell } from './cell'
+      const OUTER = [
+        { id: 1, subs: [{ id: 11 }, { id: 12 }] },
+        { id: 2, subs: [{ id: 21 }] },
+      ]
+      export function Repro() {
+        return (
+          <div>
+            {OUTER.map((o, oi) => (
+              <div key={o.id}>
+                {o.subs.map((sub, i) => (
+                  <Cell key={sub.id} label={i} outerPos={oi} />
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The inner forEach's index param is the user's name, so the prop
+    // getters `return i` / `return oi` resolve.
+    expect(content).toContain('o.subs.forEach((sub, i) => {')
+    // The inner element offset indexes with the same (renamed) param.
+    expect(content).toContain('__ic.children[i]')
+    expect(content).toContain('get label() { return i }')
+    expect(content).toContain('get outerPos() { return oi }')
+    expect(content).not.toContain('__innerIdx')
+  })
+
+  test('inner-loop-nested: no declared index keeps the synthetic __innerIdx (byte stability)', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { Cell } from './cell'
+      const OUTER = [
+        { id: 1, subs: [{ id: 11 }, { id: 12 }] },
+      ]
+      export function Repro() {
+        return (
+          <div>
+            {OUTER.map((o) => (
+              <div key={o.id}>
+                {o.subs.map((sub) => (
+                  <Cell key={sub.id} label={sub.id} />
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toContain('o.subs.forEach((sub, __innerIdx) => {')
+    expect(content).toContain('__ic.children[__innerIdx]')
+  })
+
+  test('component-rooted-inner-loop: outer AND inner index params are bound', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { Card, Cell } from './cell'
+      const OUTER = [
+        { id: 1, subs: [{ id: 11 }, { id: 12 }] },
+      ]
+      export function Repro2() {
+        return (
+          <div>
+            {OUTER.map((o, oi) => (
+              <Card key={o.id}>
+                {o.subs.map((sub, i) => (
+                  <Cell key={sub.id} label={i} outerPos={oi} />
+                ))}
+              </Card>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // Document-order zip: both forEach heads carry the declared index names.
+    expect(content).toContain('OUTER.forEach((o, oi) => {')
+    expect(content).toContain('o.subs.forEach((sub, i) => {')
+    expect(content).toContain('get label() { return i }')
+    expect(content).toContain('get outerPos() { return oi }')
+  })
+
+  test('component-rooted-inner-loop: no declared index keeps bare single-param heads (byte stability)', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { Card, Cell } from './cell'
+      const OUTER = [
+        { id: 1, subs: [{ id: 11 }] },
+      ]
+      export function Repro2() {
+        return (
+          <div>
+            {OUTER.map((o) => (
+              <Card key={o.id}>
+                {o.subs.map((sub) => (
+                  <Cell key={sub.id} label={sub.id} />
+                ))}
+              </Card>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toContain('OUTER.forEach((o) => {')
+    expect(content).toContain('o.subs.forEach((sub) => {')
+  })
+
+  test('index named like a property access is not confused (item.i stays untouched)', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { Cell } from './cell'
+      const OUTER = [
+        { id: 1, subs: [{ id: 11, i: 'a' }] },
+      ]
+      export function Repro() {
+        return (
+          <div>
+            {OUTER.map((o) => (
+              <div key={o.id}>
+                {o.subs.map((sub) => (
+                  <Cell key={sub.id} label={sub.i} />
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // No index declared → synthetic param; the `sub.i` property access is
+    // untouched (this fix renames the forEach param, never rewrites bodies).
+    expect(content).toContain('o.subs.forEach((sub, __innerIdx) => {')
+    expect(content).toContain('get label() { return sub.i }')
+  })
+})