@barefootjs/jsx 0.18.4 → 0.18.7

package/src/__tests__/map-function-reference.test.ts

@@ -0,0 +1,303 @@
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { asCallbackMethodCall, isSupported } from '../expression-parser'
+import type { IRExpression } from '../types'
+
+// #2206: a bare-identifier callback passed to a value-position higher-order
+// array method (`tags.map(format)`) resolves one hop to its declaration
+// (`resolveCallbackMethodFunctionReferences` in jsx-to-ir.ts), reusing the
+// SAME `findLocalConst` / `findLocalFunction` scope machinery #2090
+// established for `.sort(cb)` — but as a post-parse pass over the whole
+// `ParsedExpr` tree, since the value-returning `.map(cb).join(...)` form is
+// recognized generically downstream of parsing (`asCallbackMethodCall`), not
+// during it.
+describe('function-reference .map(cb) callback (#2206)', () => {
+  function textExpr(ir: ReturnType<typeof jsxToIR>): IRExpression {
+    if (!ir || ir.type !== 'element') throw new Error('expected a root element')
+    const expr = ir.children.find(c => c.type === 'expression')
+    if (!expr || expr.type !== 'expression') throw new Error('expected an expression child')
+    return expr
+  }
+
+  test('const arrow reference resolves like an inline arrow', () => {
+    const source = `
+      const format = (t: string) => '#' + t
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+
+    expect(expr.parsed).toBeDefined()
+    // .join(' ') is the outer call; its object is the resolved .map(...) call.
+    const joinCall = expr.parsed!
+    expect(joinCall.kind).toBe('array-method')
+    if (joinCall.kind !== 'array-method') return
+    const mapCall = asCallbackMethodCall(joinCall.object)
+    expect(mapCall).not.toBeNull()
+    expect(mapCall!.method).toBe('map')
+    expect(mapCall!.arrow.kind).toBe('arrow')
+    expect(mapCall!.arrow.params).toEqual(['t'])
+    // Resolved body is identical to what an inline `t => '#' + t` would parse to.
+    expect(isSupported(joinCall).supported).toBe(true)
+  })
+
+  test('function-declaration reference resolves too', () => {
+    const source = `
+      function format(t: string) { return '#' + t }
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+
+    expect(expr.parsed).toBeDefined()
+    const joinCall = expr.parsed!
+    expect(joinCall.kind).toBe('array-method')
+    if (joinCall.kind !== 'array-method') return
+    const mapCall = asCallbackMethodCall(joinCall.object)
+    expect(mapCall).not.toBeNull()
+    expect(mapCall!.arrow.params).toEqual(['t'])
+  })
+
+  test('component-scope const shadows a module-scope const of the same name', () => {
+    const source = `
+      const format = (t: string) => 'module:' + t
+      function TagLine({ tags }: { tags: string[] }) {
+        const format = (t: string) => 'local:' + t
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    const mapCall = asCallbackMethodCall(joinCall.object)!
+    // The resolved body must be the component-scope binding ('local:'), not
+    // the module-scope one ('module:').
+    expect(JSON.stringify(mapCall.arrow.body)).toContain('local:')
+  })
+
+  test('unresolvable reference (imported) stays refused with BF101', () => {
+    const source = `
+      import { format } from './format'
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    // The identifier arg passes through untouched — asCallbackMethodCall
+    // still refuses it, so the adapter's UNSUPPORTED_METHODS gate fires.
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+    expect(isSupported(joinCall).supported).toBe(false)
+  })
+
+  test('non-function const (unresolvable) stays refused with BF101', () => {
+    const source = `
+      const format = 5
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+    expect(isSupported(joinCall).supported).toBe(false)
+  })
+
+  test('/* @client */ still suppresses regardless of resolvability', () => {
+    const source = `
+      import { format } from './format'
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{/* @client */ tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    expect(expr.clientOnly).toBe(true)
+  })
+
+  test('inline arrow callback is unaffected (pre-existing #2073 shape)', () => {
+    const source = `
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(t => '#' + t).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    expect(isSupported(joinCall).supported).toBe(true)
+  })
+
+  test('resolution generalizes to other CALLBACK_METHODS (e.g. value-position .sort)', () => {
+    const source = `
+      const byLen = (a: string, b: string) => a.length - b.length
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.sort(byLen).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    const sortCall = asCallbackMethodCall(joinCall.object)
+    expect(sortCall).not.toBeNull()
+    expect(sortCall!.arrow.params).toEqual(['a', 'b'])
+  })
+
+  test('cross-kind ambiguity (const AND function of the same name) stays refused', () => {
+    const source = `
+      const format = (t: string) => 'const:' + t
+      function format2() {}
+      function TagLine({ tags }: { tags: string[] }) {
+        function format(t: string) { return 'fn:' + t }
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    // Component scope has BOTH a const `format` (module scope) and a
+    // `function format` (component scope) in play once findLocalConst /
+    // findLocalFunction search across scopes — same cross-kind ambiguity
+    // `resolveSortComparatorIdentifier` refuses for `.sort(fnref)`.
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+    expect(isSupported(joinCall).supported).toBe(false)
+  })
+
+  test('.reduce(fnref, init) resolves the callback and preserves the init arg', () => {
+    const source = `
+      const sum = (acc: number, t: string) => acc + t.length
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.reduce(sum, 0)}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const parsed = expr.parsed!
+    const reduceCall = asCallbackMethodCall(parsed)
+    expect(reduceCall).not.toBeNull()
+    expect(reduceCall!.method).toBe('reduce')
+    expect(reduceCall!.arrow.params).toEqual(['acc', 't'])
+    // The trailing `0` init arg survives resolution untouched.
+    expect(reduceCall!.args).toEqual([{ kind: 'literal', value: 0, literalType: 'number', raw: '0' }])
+  })
+
+  // Fable review (#2214): a spliced-in resolved arrow's body is NOT
+  // re-walked, so a bare-identifier callback nested inside another
+  // resolved declaration stays refused — a deliberate one-hop limit (see
+  // resolveCallbackMethodFunctionReferences's docstring), pinned here so a
+  // future change to that behavior is a conscious decision, not a silent
+  // regression.
+  test('a bare-identifier callback nested inside a resolved declaration stays refused (one-hop limit)', () => {
+    const source = `
+      const inner = (t: string) => '#' + t
+      const outer = (xs: string[]) => xs.map(inner).join(',')
+      function TagLine({ rows }: { rows: string[][] }) {
+        return <p>{rows.map(outer).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const outerJoin = expr.parsed!
+    if (outerJoin.kind !== 'array-method') throw new Error('expected array-method')
+    const outerMap = asCallbackMethodCall(outerJoin.object)!
+    expect(outerMap).not.toBeNull()
+    // `outer`'s body resolves one hop (`xs.map(inner).join(',')`), but the
+    // nested `.map(inner)` inside that spliced body is never re-walked.
+    const innerJoin = outerMap.arrow.body
+    if (innerJoin.kind !== 'array-method') throw new Error('expected inner array-method')
+    if (innerJoin.object.kind !== 'call') throw new Error('expected inner call')
+    expect(innerJoin.object.args[0]).toEqual({ kind: 'identifier', name: 'inner' })
+    expect(asCallbackMethodCall(innerJoin.object)).toBeNull()
+  })
+
+  // Fable review (#2214): the resolver must respect lexical scoping — a
+  // bare identifier in callback position that's actually bound by an
+  // ENCLOSING arrow's own parameter (not a same-file const/function) must
+  // never be resolved against the const/function tables, or SSR silently
+  // renders the wrong function while CSR (which evaluates the raw,
+  // correctly-scoped expression) renders the right one.
+  test('an enclosing callback arrow param shadows a same-named module const', () => {
+    const source = `
+      const fn = (t: string) => 'WRONG:' + t
+      function TagLine({ rows }: { rows: { tags: string[] }[] }) {
+        return <p>{rows.map(fn => fn.tags.map(fn).join(',')).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const outerJoin = expr.parsed!
+    if (outerJoin.kind !== 'array-method') throw new Error('expected array-method')
+    const outerMap = asCallbackMethodCall(outerJoin.object)!
+    // The outer arrow's body is `fn.tags.map(fn).join(',')` — the inner
+    // `.map(fn)` refers to the outer arrow's OWN param `fn`, not the
+    // module-scope const, so it must stay unresolved (an identifier arg).
+    const innerJoin = outerMap.arrow.body
+    if (innerJoin.kind !== 'array-method') throw new Error('expected inner array-method')
+    if (innerJoin.object.kind !== 'call') throw new Error('expected inner call')
+    expect(innerJoin.object.args[0]).toEqual({ kind: 'identifier', name: 'fn' })
+    expect(asCallbackMethodCall(innerJoin.object)).toBeNull()
+  })
+
+  test('a loop item param shadows a same-named module const inside the loop body', () => {
+    const source = `
+      const format = (t: string) => 'WRONG:' + t
+      function TagLine({ fns, tags }: { fns: string[]; tags: string[] }) {
+        return <ul>{fns.map(format => <li>{tags.map(format).join(' ')}</li>)}</ul>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    if (!ir || ir.type !== 'element') throw new Error('expected a root element')
+    const loop = ir.children.find(c => c.type === 'loop')
+    if (!loop || loop.type !== 'loop') throw new Error('expected a loop child')
+    expect(loop.param).toBe('format')
+    const li = loop.children.find(c => c.type === 'element')
+    if (!li || li.type !== 'element') throw new Error('expected the <li> element')
+    const innerExpr = li.children.find(c => c.type === 'expression')
+    if (!innerExpr || innerExpr.type !== 'expression') throw new Error('expected an expression child')
+    const joinCall = innerExpr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    // `tags.map(format)` inside the loop body refers to the loop's own item
+    // variable `format`, not the module-scope const — must stay unresolved.
+    if (joinCall.object.kind !== 'call') throw new Error('expected inner call')
+    expect(joinCall.object.args[0]).toEqual({ kind: 'identifier', name: 'format' })
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+  })
+})

package/src/__tests__/materialize-getter-calls.test.ts

@@ -43,6 +43,7 @@ describe('materializeGetterCalls', () => {
           object: { kind: 'identifier', name: 'p' },
           property: 'tags',
           computed: false,
+          optional: false,
         },
         args: [{ kind: 'identifier', name: 'tag' }],
       },

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)
+  })
+})