@barefootjs/jsx 0.34.0 → 0.35.1

package/src/__tests__/loop-index-reactivity.test.ts

@@ -0,0 +1,208 @@
+/**
+ * #2861: a `.map()` row's index-derived output stays live even when the
+ * expression reads NOTHING else reactive — no item, no signal, no memo, no
+ * function call. `String(i + 1)`-shaped expressions were already fixed by
+ * #2859/#2860 (they trip the AST-flag function-call fallback); this file
+ * covers the residual gap `classifyReactivity` had no case for at all: a
+ * bare `{i}` text, an `i % 2 === 0 ? … : …` class/conditional, and the
+ * same shapes one level deeper when the index in question belongs to an
+ * OUTER loop, not the row's own.
+ *
+ * Root cause (see `reactivity.ts`'s `ReactivitySource`/`classifyReactivity`
+ * doc comments): Phase 1 (`jsx-to-ir.ts`'s `referencesLoopParam`, via
+ * `BindingScope.valueBoundNames()`) already grants such an expression a
+ * patchable slot — item/index/destructure are graneted a slot together —
+ * but Phase 2's `classifyReactivity` had no `loop-index` case mirroring its
+ * existing `loop-param` one, so the slot was written once at row-creation
+ * time and never revisited.
+ */
+
+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('plain loop: pure index-only expressions (#2861)', () => {
+  test('bare {i} text wires reactively through the lazy row graph', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [items] = createSignal([{ id: 'a' }, { id: 'b' }, { id: 'c' }])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li key={item.id}>{i}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    // No refs/child components/inner loops — this row is lazy-eligible, and
+    // the widened `classifyLazyBinding` (#2859/#2860 stacked work) already
+    // routes an index-only binding into applyItem/indexDriven once it's
+    // collected at all — which is exactly the part #2861 fixes.
+    expect(content).toContain('mapArrayLazy(')
+    expect(content).toContain('indexDriven: true')
+    expect(content).toMatch(/applyItem: \(__e\) => \{[\s\S]*?const i = __e\.index/)
+  })
+
+  test('class={i % 2 === 0 ? … : …} wires a createEffect on the eager path', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [items] = createSignal([{ id: 'a' }, { id: 'b' }])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li key={item.id} class={i % 2 === 0 ? 'even' : 'odd'} ref={(el: HTMLElement | null) => {}}>{item.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    // A ref forces the eager `mapArray` path (no lazy row graph for rows
+    // that own an imperative ref) — the class binding must still be wired
+    // through a per-item `createEffect` reading the index ACCESSOR (#2859).
+    // The expression is read into `__x` first (#2869's dedup-guard shape,
+    // `emitDedupedAttrUpdate`) before the write reads it back as `__v`.
+    expect(content).toContain('mapArray(')
+    expect(content).toMatch(
+      /createEffect\(\(\) => \{[\s\S]*?const __x = `\$\{i\(\) % 2 === 0 \? 'even' : 'odd'\}`[\s\S]*?const __v = __x;/
+    )
+  })
+
+  test('an index-only conditional ({i % 2 === 0 ? <b/> : <em/>}) reconciles reactively on the lazy path', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [items] = createSignal([{ id: 'a' }, { id: 'b' }])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li key={item.id}>{i % 2 === 0 ? <b>even</b> : <em>odd</em>}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    // Before #2861 this pre-gate (`collectLoopChildConditionals`'s
+    // `refsAnyBindingViaFreeIds`) never even reached `classifyReactivity` —
+    // an index-only condition died at the AST-`reactive`-flag short-circuit
+    // and baked into `createRow` only, once, forever.
+    expect(content).toContain('mapArrayLazy(')
+    expect(content).toMatch(/applyItem: \(__e\) => \{[\s\S]*?const i = __e\.index/)
+    expect(content).toContain('!!(i % 2 === 0)')
+  })
+})
+
+describe('nested loop: referencing an OUTER loop\'s own index (#2861)', () => {
+  test('composite path: inner row text reads the outer index through its accessor', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: string; label: string }
+      interface Group { id: string; items: Item[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <div>
+            {groups().map((g, gi) => (
+              <div key={g.id}>
+                {g.items.map((it) => (
+                  <span key={it.id}>{gi}-{it.label}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The inner mapArray's own renderItem has no `gi` param at all — the
+    // outer accessor must be read directly by name, exactly as `item()`
+    // reads the outer ITEM in the sibling case #2865 already covers.
+    expect(content).toMatch(
+      /mapArray\(\(\) => g\(\)\.items \|\| \[\], .*?, \(it, __innerIdx\d+_\d+, __existing\) => \{[\s\S]*?createEffect\(\(\) => \{ __bfw_s0\('s0', String\(gi\(\)\)\) \}\)/
+    )
+  })
+
+  test('composite path: inner row class attr reads the outer index through its accessor', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: string }
+      interface Group { id: string; items: Item[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <div>
+            {groups().map((g, gi) => (
+              <div key={g.id}>
+                {g.items.map((it) => (
+                  <span key={it.id} class={gi % 2 === 0 ? 'even' : 'odd'}>{it.id}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The expression is read into `__x` first (#2869's dedup-guard shape,
+    // `emitDedupedAttrUpdate`) before the write reads it back as `__v`.
+    expect(content).toMatch(
+      /createEffect\(\(\) => \{[\s\S]*?const __x = `\$\{gi\(\) % 2 === 0 \? 'even' : 'odd'\}`[\s\S]*?const __v = __x;/
+    )
+  })
+
+  test('conditional-branch-arm path: a loop nested inside a branch reads the OUTER (pre-branch) loop\'s index', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: string; text: string }
+      interface Group { id: string; flag: boolean; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o, oi) => (
+              <div key={o.id}>
+                {o.flag ? (
+                  <div>
+                    {o.items.map((item) => (
+                      <span key={item.id}>{oi}: {item.text}</span>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // Before #2861, `collectInnerLoops` (called from `summarizeLoopChildBranch`
+    // for a loop nested inside a conditional arm) only ever built a scope
+    // from the INNER loop's own param/index — a row referencing the loop
+    // ONE LEVEL UP (the one whose conditional this branch belongs to) was
+    // classified 'none' and baked once into the branch's initial template.
+    expect(content).toMatch(
+      /mapArray\(\(\) => o\(\)\.items \|\| \[\], .*?, \(item, __bidxbr_\d+, __existing\) => \{[\s\S]*?createEffect\(\(\) => \{ __bfw_s1\('s1', String\(oi\(\)\)\) \}\)/
+    )
+  })
+})

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__/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__/map-body-brand-checker.test.ts

@@ -0,0 +1,176 @@
+/**
+ * #2867 / #2830: `shouldAutoDeferReactiveBrand` (jsx-to-ir.ts) used to call
+ * `getJS()` on the whole candidate expression to regex-test it for a native
+ * signal/memo call. For a `.map()` loop or a ternary/`&&` with JSX arms, that
+ * expression IS JSX-bearing — and whenever the TypeChecker was active and
+ * resolved a `Reactive<T>` brand anywhere in the expression, `getJS()`'s
+ * trust-boundary assertion (armed by `map-body-no-silent-divergence.test.ts`)
+ * threw, uncaught, on `signal-array-builder` / `flatmap-expression-body-signal-array`.
+ *
+ * That harness's own `assess()` compiles via a bare relative path (`T.tsx`)
+ * with no injected `ts.Program`, so whether the checker actually activates —
+ * and thus whether this reproduces — silently depended on the process's cwd
+ * and whether `@barefootjs/client`'s `dist` happened to be built, which is
+ * exactly why the failure looked like an environment-dependent flake (#2867)
+ * rather than the deterministic compiler bug it is. These tests pin it with
+ * an explicitly injected `ts.Program` (mirroring `auto-defer-brand.test.ts`)
+ * so the repro — and the fix — hold regardless of cwd or build state.
+ */
+
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test'
+import ts from 'typescript'
+import path from 'path'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+let prevAssertEnv: string | undefined
+beforeAll(() => {
+  prevAssertEnv = process.env.BF_ASSERT_NO_JSX_IN_GETJS
+  process.env.BF_ASSERT_NO_JSX_IN_GETJS = '1'
+})
+afterAll(() => {
+  if (prevAssertEnv === undefined) delete process.env.BF_ASSERT_NO_JSX_IN_GETJS
+  else process.env.BF_ASSERT_NO_JSX_IN_GETJS = prevAssertEnv
+})
+
+interface Compiled {
+  errors: string[]
+  hasError: boolean
+  clientJs: string
+}
+
+/**
+ * Compile `source` with a real TypeChecker that resolves `@barefootjs/client`
+ * (found deterministically via `packages/jsx/node_modules`, since the virtual
+ * file lives under this file's own directory — no dependency on `process.cwd()`).
+ */
+function compileWithChecker(source: string): Compiled {
+  const componentPath = path.join(path.resolve(__dirname), '_map-body-brand-component.tsx')
+  const virtualFiles = new Map<string, string>([[componentPath, source]])
+
+  const compilerOptions: ts.CompilerOptions = {
+    target: ts.ScriptTarget.Latest,
+    module: ts.ModuleKind.ESNext,
+    moduleResolution: ts.ModuleResolutionKind.Bundler,
+    jsx: ts.JsxEmit.ReactJSX,
+    strict: true,
+    skipLibCheck: true,
+    noEmit: true,
+  }
+
+  const defaultHost = ts.createCompilerHost(compilerOptions)
+  const host: ts.CompilerHost = {
+    ...defaultHost,
+    getSourceFile(fileName, languageVersion) {
+      const resolved = path.resolve(fileName)
+      const content = virtualFiles.get(resolved)
+      if (content !== undefined) {
+        return ts.createSourceFile(fileName, content, languageVersion, true, ts.ScriptKind.TSX)
+      }
+      return defaultHost.getSourceFile(fileName, languageVersion)
+    },
+    fileExists(fileName) {
+      return virtualFiles.has(path.resolve(fileName)) || defaultHost.fileExists(fileName)
+    },
+    readFile(fileName) {
+      return virtualFiles.get(path.resolve(fileName)) ?? defaultHost.readFile(fileName)
+    },
+  }
+
+  const program = ts.createProgram([componentPath], compilerOptions, host)
+  const adapter = new TestAdapter()
+  const r = compileJSX(source, componentPath, { adapter, program })
+  const clientJs = r.files.find((f) => f.type === 'clientJs')?.content ?? ''
+  return {
+    errors: r.errors.map((e) => `[${e.code}] ${e.message}`),
+    hasError: r.errors.some((e) => e.severity === 'error'),
+    clientJs,
+  }
+}
+
+function assertSound(clientJs: string): void {
+  const sf = ts.createSourceFile('bundle.js', clientJs, ts.ScriptTarget.ES2022, false, ts.ScriptKind.JS)
+  const parseErrors = (sf as unknown as { parseDiagnostics: unknown[] }).parseDiagnostics.length
+  expect(parseErrors).toBe(0)
+  expect(clientJs).not.toMatch(/__BF_JSX_\d+__/)
+  expect(clientJs).not.toMatch(/\bpush\(</)
+}
+
+describe('shouldAutoDeferReactiveBrand does not stringify JSX-bearing expressions (#2867/#2830)', () => {
+  test('signal-sourced .map() array builder compiles clean under an active checker', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [rows] = createSignal([{ id: '1', cells: ['a'] }])
+  return <table><tbody>{rows().map((r) => {
+    const out = []
+    for (const c of r.cells) out.push(<td>{c}</td>)
+    return <tr key={r.id}>{out}</tr>
+  })}</tbody></table>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('signal-sourced .flatMap() with an expression-body inner .map() compiles clean under an active checker', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: '1', tags: ['a'] }])
+  return <ul>{items().flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('memo-sourced .map() array builder also compiles clean (not just signals)', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal, createMemo } from '@barefootjs/client'
+function T() {
+  const [rows] = createSignal([{ id: '1', cells: ['a'] }])
+  const upper = createMemo(() => rows())
+  return <table><tbody>{upper().map((r) => {
+    const out = []
+    for (const c of r.cells) out.push(<td>{c}</td>)
+    return <tr key={r.id}>{out}</tr>
+  })}</tbody></table>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('signal-conditioned ternary with JSX on both arms, no props destructuring (BF043) to mask the assertion', () => {
+    // No destructured props here (which would emit a BF043 warning and, pre-
+    // fix, incidentally have silently disarmed the trust-boundary assertion
+    // for this shape). This pins the conditional-arm path directly.
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [show] = createSignal(true)
+  return <div>{show() ? <b>yes</b> : <em>no</em>}</div>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('a component also importing @barefootjs/client but with no .map() and no reactive JSX branch is unaffected', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [count, setCount] = createSignal(0)
+  return <button onClick={() => setCount((c) => c + 1)}>{count()}</button>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+})

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
@@ -104,6 +108,14 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     // *after* the alias, inside the inner renderItem's own clone template.
     const templateIdx = content.indexOf('escapeText(i)', aliasIdx)
     expect(templateIdx).toBeGreaterThan(aliasIdx)
+    // #2861: a bare `{i}` — no signal, no function call anywhere in the
+    // expression — used to be classified fully static by Phase 2 and never
+    // get a `createEffect` at all, so it stayed frozen at whatever value it
+    // had when the row was first created. `classifyReactivity`'s new
+    // `loop-index` source fixes this: the index is wired through the same
+    // accessor `mapArray` already hands every row (#2859/#2860), and the
+    // slot now gets a real update effect.
+    expect(content).toContain(`createEffect(() => { __bfw_s0('s0', String(i())) })`)
   })
 
   test('index referenced in a reactive attribute expression is bound', () => {
@@ -130,6 +142,17 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
 
     expect(content).toContain('const i = __innerIdx')
     expect(content).toContain(`i % 2 === 0 ? 'even' : 'odd'`)
+    // #2861: `class={i % 2 === 0 ? …}` has no signal read and no function
+    // call — before `classifyReactivity`'s `loop-index` source existed this
+    // was classified fully static and never got a `createEffect`, so the
+    // class stayed frozen at whichever value the row was created with.
+    // The expression is read into `__x` first (#2869's dedup-guard shape,
+    // `emitDedupedAttrUpdate`) before the actual attribute write reads it
+    // back as `__v` — assert both halves rather than the old direct
+    // `const __v = <expr>` shape #2869 replaced.
+    expect(content).toMatch(
+      /createEffect\(\(\) => \{[\s\S]*?const __x = `\$\{i\(\) % 2 === 0 \? 'even' : 'odd'\}`[\s\S]*?const __v = __x;/
+    )
   })
 
   test('index referenced only in an event handler inside the inner loop is bound', () => {
@@ -156,7 +179,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', () => {
@@ -214,10 +242,13 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     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).
+  test('inner array with no outer-item dependency still binds the index alias (#2865: no more static forEach)', () => {
+    // Sibling of the reactive-path test above. Before #2865, an inner loop
+    // whose array didn't reference the outer loop param was routed to
+    // `emitStatic` in `stringify/inner-loop.ts` — a hydration-only
+    // `forEach` that never wired reactivity for anything inside the row.
+    // That fork is gone: every inner loop now gets the full `mapArray`
+    // emission regardless of what its array depends on.
     const content = clientJsFor(`
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -242,7 +273,7 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
       }
     `)
 
-    expect(content).toMatch(/SHARED\.forEach\(\(cell, __innerIdx[^)]+\) => \{[\s\S]*?const\s+i\s*=\s*__innerIdx/)
+    expect(content).toMatch(/mapArray\(\(\) => SHARED \|\| \[\], .*?, \(cell, __innerIdx[^)]+, __existing\) => \{[\s\S]*?const\s+i\s*=\s*__innerIdx/)
   })
 
   test('conditional-branch-arm inner loop (loop -> conditional -> inner loop) binds the index alias', () => {
@@ -278,7 +309,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)
   })