@barefootjs/jsx 0.26.3 → 0.26.4

package/src/__tests__/delegated-handler-preamble.test.ts

@@ -0,0 +1,153 @@
+/**
+ * A keyed `.map()` body with an array-builder preamble (`const cells = [];
+ * cells.push(<span>...)`) plus a row-level event handler used to make EVERY
+ * delegated action throw `t is not a function` (BUG-3).
+ *
+ * Root cause: the delegated handler's item-lookup binds the plain `.find()`
+ * result under the loop param (`const t = items().find(...)`) — `t` is a
+ * plain object there, never a signal accessor. But the preamble's JSX leaf
+ * was rendered through `irToHtmlTemplate` WITH a loopParams spec, the same
+ * one used for the mapArray row-render context (where the param genuinely
+ * IS an accessor). That rewrote leaf refs to `t().name` — a call on a plain
+ * object — which throws at click time.
+ *
+ * `build-event-delegation.ts` now renders the delegation-context preamble
+ * leaf with no loopParams spec, so refs stay in their plain (`t.name`) form.
+ * It also only splices the preamble into a given event's handler when that
+ * handler's free identifiers actually reference one of the preamble's
+ * declared names (`MapCallbackPreamble.declaredNames`) — the common case is
+ * an array builder the handler never reads (`cells` here) — and, when
+ * spliced, the preamble always runs INSIDE the item-null guard (BUG-4: a
+ * `.find()` miss from a stale-DOM race must short-circuit before a preamble
+ * that dereferences the item runs).
+ */
+
+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
+}
+
+/**
+ * The delegated-dispatcher body sits between the loop's `addEventListener`
+ * call and the `hydrate(...)` call that follows it in the emitted module —
+ * isolate it so assertions about the HANDLER shape don't accidentally match
+ * the (legitimately accessor-form) mapArray row-render callback that
+ * precedes it in the same file.
+ */
+function delegationBlock(js: string): string {
+  const start = js.indexOf('.addEventListener(')
+  const end = js.indexOf('\n\nhydrate(')
+  expect(start).toBeGreaterThan(-1)
+  expect(end).toBeGreaterThan(start)
+  return js.slice(start, end)
+}
+
+describe('delegated-handler preamble splicing (BUG-3 / BUG-4)', () => {
+  test('unreferenced array-builder preamble: no getter-call leaf refs, no dead splice', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function R2a() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'x' }, { id: 2, name: 'y' }])
+        const del = (id: number) => setItems(items().filter(i => i.id !== id))
+        return <ul id="list">{items().map(t => {
+          const cells = []
+          cells.push(<span>{t.name}</span>)
+          return <li key={t.id}>{cells}<button className="del" onClick={() => del(t.id)}>del</button></li>
+        })}</ul>
+      }
+    `)
+    const handler = delegationBlock(js)
+
+    // BUG-3: the leaf inside the delegation-context preamble must stay in
+    // plain-object form — `t` is the `.find()` result, not a signal accessor.
+    expect(handler).not.toContain('t().')
+
+    // The preamble (`cells`) is never read by the click handler
+    // (`() => del(t.id)`) — it must not be spliced into the dispatcher at
+    // all. `cells.push` legitimately appears three times elsewhere: the
+    // mapArray row-render callback, the SSR-template literal it mirrors,
+    // and (#2389 patch-on-update) the `{cells}` region-patch effect, which
+    // re-runs the preamble so it re-reads the live per-item signal. It must
+    // not appear a FOURTH time, in the handler.
+    expect(handler).not.toContain('cells.push')
+    expect(js.split('cells.push')).toHaveLength(4) // three occurrences total
+
+    // The item guard still gates the handler call.
+    expect(handler).toContain('if (t) {')
+    expect(handler).toContain('(() => del(t.id))(__bfEvt)')
+  })
+
+  test('preamble referenced by the handler: spliced in plain form, inside the item guard', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function R2b() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'x' }, { id: 2, name: 'y' }])
+        const del = (label: string) => setItems(items().filter(i => i.name !== label))
+        return <ul id="list">{items().map(t => {
+          const label = t.name + '!'
+          return <li key={t.id}>{label}<button className="del" onClick={() => del(label)}>del</button></li>
+        })}</ul>
+      }
+    `)
+    const handler = delegationBlock(js)
+
+    // Spliced in plain (non-getter) form.
+    expect(handler).toContain('const label = t.name + \'!\';')
+    expect(handler).not.toContain('t().')
+
+    // Guard-order (part 3): the preamble line and the handler call both
+    // land AFTER `if (t) {`, i.e. inside the item-null guard.
+    const guardIdx = handler.indexOf('if (t) {')
+    const preambleIdx = handler.indexOf('const label = t.name')
+    const callIdx = handler.indexOf('(() => del(label))(__bfEvt)')
+    expect(guardIdx).toBeGreaterThanOrEqual(0)
+    expect(preambleIdx).toBeGreaterThan(guardIdx)
+    expect(callIdx).toBeGreaterThan(preambleIdx)
+  })
+
+  test('destructured param + preamble + handler: no accessor leaks, real destructure resolves refs', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function R2c() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'x' }, { id: 2, name: 'y' }])
+        const del = (label: string) => setItems(items().filter(i => i.name !== label))
+        return <ul id="list">{items().map(({ id, name }) => {
+          const label = name + '!'
+          return <li key={id}>{label}<button className="del" onClick={() => del(label)}>del</button></li>
+        })}</ul>
+      }
+    `)
+    const handler = delegationBlock(js)
+
+    // No `__bfItem()`-style accessor leaks into the delegated handler — the
+    // destructured names resolve as real local bindings off `__bfLoopItem`.
+    expect(handler).not.toContain('__bfItem(')
+
+    // Real destructure (#951 TDZ-safe shape) binds `id`/`name` for real —
+    // the preamble and handler both close over the resulting plain locals.
+    expect(handler).toContain('const __bfLoopItem = ')
+    expect(handler).toContain('const { id, name } = __bfLoopItem')
+    expect(handler).toContain('const label = name + \'!\';')
+    expect(handler).toContain('(() => del(label))(__bfEvt)')
+
+    // Guard-order holds for the bindings-branch shape too.
+    const guardIdx = handler.indexOf('if (__bfLoopItem) {')
+    const preambleIdx = handler.indexOf('const label = name')
+    const callIdx = handler.indexOf('(() => del(label))(__bfEvt)')
+    expect(guardIdx).toBeGreaterThanOrEqual(0)
+    expect(preambleIdx).toBeGreaterThan(guardIdx)
+    expect(callIdx).toBeGreaterThan(preambleIdx)
+  })
+})

package/src/__tests__/flatmap-segments.test.ts

@@ -22,9 +22,13 @@ import { TestAdapter } from '../adapters/test-adapter'
 
 describe('flatMap block bodies on structured segments', () => {
   test('leaf text interpolations are escapeText-wrapped in the client bundle', () => {
+    // The early return keeps this a STATEMENT-carrying body (segments
+    // carrier) — a pure single-`return` projection now lowers to neutral
+    // nested-loop IR instead (see the projection tests below).
     const src = `
 function F({ items }: { items: { id: string; tags: string[] }[] }) {
   return <ul>{items.flatMap((it) => {
+    if (it.tags.length > 9) return []
     return it.tags.map((t) => <li key={t}>{t}</li>)
   })}</ul>
 }
@@ -59,6 +63,184 @@ export { F }
     expect(tpl).not.toMatch(/[^.\w]limit\b/)
   })
 
+  test('projection expression bodies lower to neutral IR + descriptor client', () => {
+    // `it => it.tags.map(...)` (no braces, no statements) is a pure
+    // nested-loop PROJECTION: it lowers to neutral IR (inner IRLoop child)
+    // that every SSR adapter templatizes — including DSL backends, per
+    // spec/callback-fidelity.md's fidelity table — while the client
+    // reconciles the flattened leaves through the descriptor mapArray path
+    // synthesized from the same inner loop. Pre-fix it fell through to the
+    // IRExpression scalar path and spliced raw JSX into the bundle.
+    const src = `
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    // No raw JSX anywhere in the bundle.
+    expect(cj).not.toMatch(/<li key=\{t\}>/)
+    expect(cj).not.toMatch(/__BF_JSX_/)
+    if (cj.includes('mapArray(')) {
+      // Descriptor accessor flattens through the inner loop with the leaf key.
+      expect(cj).toMatch(/\.flatMap\(\(it\) => it\.tags\.map\(\(t\) => \(\{ k: \(t\), h: `<li/)
+      expect(cj).toMatch(/String\(__bfD\.k \?\? __bfI\)/)
+    }
+  })
+
+  test('a member-expression tag leaf is a component, not a projection leaf', () => {
+    // `<icons.Tag/>` starts lowercase but is a component per JSX semantics —
+    // the wireless-leaf gate must not admit it to the projection route
+    // (which cannot wire components). It falls to the segments carrier,
+    // where a DSL-tier adapter refuses loudly instead of templatizing a
+    // component tag as literal HTML.
+    const src = `
+import { icons } from './icons'
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <icons.Tag key={t} label={t} />))}</ul>
+}
+export { F }
+`
+    const dsl = new TestAdapter()
+    ;(dsl as { acceptsCallbackBody?: () => boolean }).acceptsCallbackBody = () => false
+    const r = compileJSX(src, 'F.tsx', { adapter: dsl })
+    expect(r.errors.filter(e => e.severity === 'error').length).toBeGreaterThan(0)
+  })
+
+  test('single-return block projection lowers identically (DSL adapters accept it)', () => {
+    const src = `
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => {
+    return it.tags.map((t) => <li key={t}>{t}</li>)
+  })}</ul>
+}
+export { F }
+`
+    const dsl = new TestAdapter()
+    ;(dsl as { acceptsCallbackBody?: () => boolean }).acceptsCallbackBody = () => false
+    const r = compileJSX(src, 'F.tsx', { adapter: dsl })
+    // Neutral IR — no BF021 gate on a DSL-tier adapter.
+    expect(r.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  })
+
+  test('destructured prop refs rewrite to _p.xxx in expression-body hydrate templates', () => {
+    const src = `
+function F({ owner, items }: { owner: string; items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <li key={t}>{t} ({owner})</li>))}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    const tpl = cj.match(/template: \(_p\) => `[\s\S]*?` \}\)/)?.[0] ?? ''
+    expect(tpl).toMatch(/_p\.owner/)
+    expect(tpl).not.toMatch(/[^.\w]owner\b/)
+  })
+
+  test('client loop reconciles the FLATTENED descriptors, not the source items', () => {
+    // The mapArray accessor flattens through the callback body — each leaf a
+    // `({ k, h })` descriptor keyed by the leaf's own `key` — so hydration
+    // adopts every SSR leaf (not one per source item), adds build real
+    // elements from `h` (not an empty template), and the keyFn is the leaf
+    // key (not null/index). This pins the client half of the flatMap loop;
+    // pre-fix it emitted `mapArray(() => todos(), _sN, null, …innerHTML = ``…)`
+    // — leaf loss at hydration and a cloneNode(null) crash on adds.
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([{ id: 1, tags: ['a'] }])
+  return <ul>{todos().flatMap((t) => {
+    if (t.tags.length > 5) return []
+    const prefix = t.id + ':'
+    return t.tags.map((tag) => <li key={\`\${t.id}:\${tag}\`}>{prefix}{tag}</li>)
+  })}</ul>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    // Flattened source with descriptor leaves…
+    expect(cj).toMatch(/mapArray\(\(\) => \(todos\(\)\)\.flatMap\(\(t\) => \{/)
+    expect(cj).toMatch(/\(\{ k: \(`\$\{t\.id\}:\$\{tag\}`\), h: `<li>/)
+    // …keyed on the leaf key with index fallback…
+    expect(cj).toMatch(/\(__bfD, __bfI\) => String\(__bfD\.k \?\? __bfI\)/)
+    // …renderItem builds from the descriptor HTML and patches on change…
+    expect(cj).toMatch(/__tpl\.innerHTML = __bfD\(\)\.h/)
+    expect(cj).toMatch(/patchLeaf\(__el, __html\)/)
+    // …and the statements-before-return are NOT duplicated as a renderItem
+    // preamble (the segments carrier is the single door).
+    expect(cj).not.toMatch(/return \[\];* if \(__existing\)/)
+    // Leaf data-key never rides the string templates — mapArray stamps it.
+    expect(cj).not.toMatch(/data-key/)
+  })
+
+  test('a leaf with an event handler refuses loudly (no silent dead DOM)', () => {
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([])
+  return <ul>{todos().flatMap((t) => {
+    return t.tags.map((tag) => <li key={tag} onClick={() => console.log(tag)}>{tag}</li>)
+  })}</ul>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    const errs = r.errors.filter(e => e.severity === 'error')
+    expect(errs.length).toBeGreaterThan(0)
+    expect(errs[0].message).toContain('cannot carry')
+  })
+
+  test('a fragment leaf refuses loudly (descriptor path is single-element)', () => {
+    // The renderItem adopts `template.content.firstElementChild` and
+    // patchLeaf patches ONE element root — a fragment leaf would silently
+    // drop its siblings client-side while SSR renders them all.
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([])
+  return <ul>{todos().flatMap((t) => {
+    return t.tags.map((tag) => <><b>{tag}</b><i>{tag}</i></>)
+  })}</ul>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    const errs = r.errors.filter(e => e.severity === 'error')
+    expect(errs.length).toBeGreaterThan(0)
+    expect(errs.some(e => e.message.includes('must be a single'))).toBe(true)
+  })
+
+  test('the structural net stays armed when an unrelated diagnostic fired earlier', () => {
+    // The scalar-fallthrough net de-dups against refusals fired during the
+    // SAME map call (entry-count gate), never against diagnostics recorded
+    // earlier in the file — a prior error in another loop must not let raw
+    // JSX splice silently into the bundle.
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([])
+  const wrap = (n: unknown) => n
+  return <div>
+    <ul>{todos().flatMap((t) => {
+      return t.tags.map((tag) => <li key={tag} onClick={() => console.log(tag)}>{tag}</li>)
+    })}</ul>
+    <ol>{todos().map((t) => wrap(<li>{t.id}</li>))}</ol>
+  </div>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    const errs = r.errors.filter(e => e.severity === 'error')
+    // One refusal per loop: the leaf-wiring refusal AND the structural net.
+    expect(errs.some(e => e.message.includes('cannot carry'))).toBe(true)
+    expect(errs.some(e => e.message.includes('would leak verbatim'))).toBe(true)
+  })
+
   test('TS type annotations in the block body are stripped from the client bundle', () => {
     const src = `
 function F({ items }: { items: { id: string; labels: string[] }[] }) {

package/src/__tests__/map-body-no-silent-divergence.test.ts

@@ -258,6 +258,51 @@ function T({ groups }: { groups: { id: string; items: { id: string; tags: string
     })}</ul>
   ))}</div>
 }
+export { T }`,
+  },
+  {
+    id: 'flatmap-expression-body',
+    // The unbraced twin of flatmap-block-body: `t => t.tags.map(...)` with no
+    // block. Pre-fix this fell through every dispatch arm to the IRExpression
+    // scalar path and spliced the raw callback — JSX included — verbatim into
+    // the client bundle (a silent SyntaxError caught only by parseErrors).
+    dslTier: true,
+    source: `
+function T({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { T }`,
+  },
+  {
+    id: 'flatmap-expression-body-parenthesized',
+    source: `
+function T({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => (it.tags.map((t) => <li key={t}>{t}</li>)))}</ul>
+}
+export { T }`,
+  },
+  {
+    id: 'flatmap-expression-body-signal-array',
+    source: `
+'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 }`,
+  },
+  {
+    id: 'map-jsx-inside-unrecognized-call',
+    // An inline JSX literal in a body shape no dispatch arm recognizes (a call
+    // wrapping JSX). The structural net refuses loudly instead of letting the
+    // scalar fallback splice the raw JSX into the bundle.
+    dslTier: true,
+    source: `
+declare function wrap(x: unknown): unknown
+function T({ items }: { items: { id: string }[] }) {
+  return <ul>{items.map((it) => wrap(<li key={it.id}>{it.id}</li>))}</ul>
+}
 export { T }`,
   },
   {

package/src/__tests__/preamble-region-patch.test.ts

@@ -0,0 +1,150 @@
+/**
+ * #2389 patch-on-update: a keyed `.map()` row body whose preamble builds
+ * content from item state (`const stateLabel = t.done ? ... ; const cells
+ * = []; cells.push(<td>{stateLabel}</td>)`) goes STALE on a same-key item
+ * update — `mapArray` reuses the row via per-item `setItem`, re-running
+ * only the row's wired text/attr slots. `{cells}` had no slot wiring at
+ * all, so it froze at its mount-time content forever while the sibling
+ * `{t.name}` text slot updated normally.
+ *
+ * The fix: a loop-body expression child whose free identifiers intersect
+ * the preamble's `declaredNames` is classified as a preamble-patched
+ * region — slot-marked like an ordinary reactive text (so SSR/CSR row
+ * templates render `<!--bf:sN-->...<!--/-->` / `{bfText("sN")}` the same
+ * door a reactive text uses), but wired on the client via a dedicated
+ * `patchSlotRange`-based region-patch effect rather than a `reactiveTexts`
+ * `.textContent` assignment (which would corrupt the array-joined markup).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { HonoAdapter } from '../../../adapter-hono/src/index.ts'
+
+const ROW_SOURCE = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function Todos() {
+    const [todos, setTodos] = createSignal([
+      { id: 1, name: 'a', done: false },
+      { id: 2, name: 'b', done: false },
+    ])
+    const toggle = (id: number) =>
+      setTodos(todos().map(t => t.id === id ? { ...t, done: !t.done } : t))
+    return (
+      <table><tbody>
+        {todos().map((t) => {
+          const stateLabel = t.done ? 'done & dusted' : 'open'
+          const cells = []
+          cells.push(<td className="state">{stateLabel}</td>)
+          return (
+            <tr key={t.id}>
+              {cells}
+              <td>{t.name}</td>
+              <td><button onClick={() => toggle(t.id)}>toggle</button></td>
+            </tr>
+          )
+        })}
+      </tbody></table>
+    )
+  }
+`
+
+function compileWith(adapter: TestAdapter | HonoAdapter, source: string = ROW_SOURCE) {
+  const result = compileJSX(source, 'Todos.tsx', { adapter })
+  expect(result.errors.filter((e) => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find((f) => f.type === 'clientJs')
+  const marked = result.files.find((f) => f.type === 'markedTemplate' || f.type === 'ssr')
+  expect(clientJs).toBeDefined()
+  return { clientJs: clientJs!.content, marked: marked?.content, result }
+}
+
+describe('preamble-region-patch (#2389)', () => {
+  test('(a) row template + SSR marked template both carry the region slot marker', () => {
+    const { clientJs } = compileWith(new TestAdapter())
+    // Row template (the `__tpl.innerHTML = ...` string literal inside
+    // renderItem): the region renders as a paired comment marker around the
+    // array-joined value, exactly like a reactive text slot.
+    expect(clientJs).toMatch(/<!--bf:s\d+-->\$\{Array\.isArray\(cells\) \? cells\.join\(''\) : \(cells \?\? ''\)\}<!--\/-->/)
+
+    const hono = compileWith(new HonoAdapter())
+    expect(hono.clientJs).toContain('patchSlotRange')
+    // Hono SSR renders the SAME slotId through `renderExpression`'s generic
+    // `{bfText("id")}...{bfTextEnd()}` door — no bespoke region handling.
+    const slotMatch = /<!--bf:(s\d+)-->\$\{Array\.isArray\(cells\)/.exec(hono.clientJs)
+    expect(slotMatch).not.toBeNull()
+    const slotId = slotMatch![1]
+    expect(hono.marked).toContain(`{bfText("${slotId}")}`)
+    expect(hono.marked).toContain('{cells}')
+    expect(hono.marked).toContain('{bfTextEnd()}')
+  })
+
+  test('(b) renderItem emits the region-patch effect, re-running the preamble in accessor form', () => {
+    const { clientJs } = compileWith(new TestAdapter())
+    expect(clientJs).toContain('patchSlotRange')
+    // The preamble re-runs inside the effect with the loop-param accessor
+    // wrap (`t().done`), not the plain (`t.done`) form used at the
+    // top-level construction line.
+    expect(clientJs).toMatch(/createEffect\(\(\) => \{\s*const stateLabel = t\(\)\.done/)
+    // First run only records (trusts SSR/CSR mount-time content); only a
+    // SUBSEQUENT change patches via patchSlotRange.
+    expect(clientJs).toMatch(/if \(__last_\w+ === undefined\) \{ __last_\w+ = __html_\w+; return \}/)
+    expect(clientJs).toMatch(/patchSlotRange\(__el, 's\d+', __html_\w+\)/)
+  })
+
+  test('(c) a loop without a preamble gets no region', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Plain() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'a' }])
+        return <ul>{items().map(t => <li key={t.id}>{t.name}</li>)}</ul>
+      }
+    `
+    const { clientJs } = compileWith(new TestAdapter(), source)
+    expect(clientJs).not.toContain('patchSlotRange')
+  })
+
+  test('(c) a static-array loop with a preamble gets no region', () => {
+    const source = `
+      import { createSignal } from '@barefootjs/client'
+      const items = [{ id: 1, done: false }, { id: 2, done: true }]
+      export function StaticRows() {
+        return (
+          <table><tbody>
+            {items.map((t) => {
+              const stateLabel = t.done ? 'done' : 'open'
+              const cells = []
+              cells.push(<td>{stateLabel}</td>)
+              return <tr key={t.id}>{cells}<td>{t.id}</td></tr>
+            })}
+          </tbody></table>
+        )
+      }
+    `
+    const { clientJs } = compileWith(new TestAdapter(), source)
+    expect(clientJs).not.toContain('patchSlotRange')
+  })
+
+  test('(d) a preamble local never referenced by an expression child gets no region', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Unread() {
+        const [todos, setTodos] = createSignal([{ id: 1, name: 'a', done: false }])
+        return (
+          <ul>
+            {todos().map((t) => {
+              // Declared but never read as a bare expression child anywhere
+              // in the returned JSX — nothing qualifies for a region.
+              const stateLabel = t.done ? 'done' : 'open'
+              return <li key={t.id}>{t.name}</li>
+            })}
+          </ul>
+        )
+      }
+    `
+    const { clientJs } = compileWith(new TestAdapter(), source)
+    expect(clientJs).not.toContain('patchSlotRange')
+  })
+})

package/src/__tests__/static-loop-csr-materialize.test.ts

@@ -124,8 +124,9 @@ describe('#1247 — static-loop CSR self-heal', () => {
     const m = clientJs.match(/if \(!__iterEl\) \{[\s\S]*?\n\s+\}\n\s+if \(__iterEl\)/)
     expect(m).toBeTruthy()
     const block = m![0]
-    // The cloned template must reference `emoji` directly.
-    expect(block).toMatch(/\$\{emoji\}/)
+    // The cloned template must reference `emoji` directly (possibly through
+    // the escapeAttr/escapeText interpolation wrappers).
+    expect(block).toMatch(/\$\{(?:escape(?:Attr|Text)\()?emoji\)?\}/)
     // It must NOT reference `__bfItem()` — that accessor only exists
     // inside `mapArray` renderItems, not inside a plain forEach.
     expect(block).not.toMatch(/__bfItem\(\)/)

package/src/ir-to-client-js/build-references.ts

@@ -153,6 +153,13 @@ export function buildReferencesGraph(ctx: ClientJsContext, irRoot: IRNode): Refe
     if (elem.filterPredicate) addExprEdges(ROOT_SOURCE, elem.filterPredicate.raw, 'template-closure')
     if (elem.sortComparator) addExprEdges(ROOT_SOURCE, elem.sortComparator.raw, 'template-closure')
     if (elem.preamble) addExprEdges(ROOT_SOURCE, preambleAnalysisText(elem.preamble), 'template-closure')
+    // flatMap descriptor bodies (`elem.flatMapClient`) are NOT traced here:
+    // the rendered body embeds leaf HTML template literals, and the regex
+    // identifier extractor would turn tag/attr names into false-positive
+    // edges. The Phase 3 loop visitor traces the same content structurally
+    // (js segments via `preambleAnalysisText`, leaf attrs/keys/interpolations
+    // via `walkIR` on `flatMapCallback` segments) — that's what keeps
+    // `const maxTags = _p.maxTags` in the extracted props.
     for (const attr of elem.bindings.reactiveAttrs) {
       addExprEdges(ROOT_SOURCE, attr.expression, 'template-closure')
     }
@@ -318,6 +325,15 @@ export function buildReferencesGraph(ctx: ClientJsContext, irRoot: IRNode): Refe
       if (l.filterPredicate) addExprEdges(ROOT_SOURCE, l.filterPredicate.raw, 'template-closure')
       if (l.sortComparator) addExprEdges(ROOT_SOURCE, l.sortComparator.raw, 'template-closure')
       if (l.preamble) addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.preamble), 'template-closure')
+      // flatMap bodies: js segments reference init-scope names; segment
+      // leaves are IR nodes off `children`, so `descend()` never reaches
+      // them — walk them explicitly (mirrors attachParsedExpressions).
+      if (l.flatMapCallback) {
+        addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.flatMapCallback), 'template-closure')
+        for (const seg of l.flatMapCallback.segments) {
+          if (seg.kind === 'jsx') walkIR(seg.ir, null, visitor)
+        }
+      }
       descend()
       if (l.childComponent) walkChildComponent(l.childComponent)
       if (l.nestedComponents) {