@barefootjs/jsx 0.31.3 → 0.31.5

package/src/__tests__/identifier-pattern.test.ts

@@ -0,0 +1,170 @@
+/**
+ * #2592 — `$`-containing identifiers broke the compiler's
+ * `new RegExp(`\\b${name}\\b`)` "does this expression reference identifier
+ * X?" heuristic in two ways: an unescaped `$` acts as a regex end anchor
+ * (false negative anywhere but the very end of the pattern), and even once
+ * escaped, `\b` treats `$` as a non-word character, so it fails to find a
+ * boundary between e.g. `(` and a leading `$` (both non-word — no
+ * transition). See `../identifier-pattern.ts` for the fix.
+ */
+import { describe, test, expect } from 'bun:test'
+import { identifierPattern, identifierCallPattern } from '../identifier-pattern.ts'
+import { compileJSX } from '../compiler.ts'
+import { TestAdapter } from '../adapters/test-adapter.ts'
+
+describe('identifierPattern (#2592)', () => {
+  describe.each(['$item', 'item$', 'a$b', 'item'])('name = %p', (name) => {
+    test('matches a standalone parenthesized reference', () => {
+      expect(identifierPattern(name).test(`(${name})`)).toBe(true)
+    })
+
+    test('matches a reference after a binary operator', () => {
+      expect(identifierPattern(name).test(`x + ${name}`)).toBe(true)
+    })
+
+    test('matches as the base of a member-access expression', () => {
+      expect(identifierPattern(name).test(`${name}.foo`)).toBe(true)
+    })
+
+    test('does not match when it is a substring of a longer identifier (suffix)', () => {
+      expect(identifierPattern(name).test(`my${name}`)).toBe(false)
+    })
+
+    test('does not match when it is a substring of a longer identifier (prefix)', () => {
+      expect(identifierPattern(name).test(`${name}s`)).toBe(false)
+    })
+
+    test('does not match when it appears as a substring inside another identifier', () => {
+      // e.g. name="item" inside "xitem" / name="$item" inside "x$item"
+      expect(identifierPattern(name).test(`x${name}`)).toBe(false)
+    })
+  })
+
+  // Literal spellings from the issue, so the fixture reads without having
+  // to mentally substitute the parameterised %p name above.
+  test('$item: matches ($item), x + $item, $item.foo', () => {
+    const re = identifierPattern('$item')
+    expect(re.test('($item)')).toBe(true)
+    expect(re.test('x + $item')).toBe(true)
+    expect(re.test('$item.foo')).toBe(true)
+  })
+
+  test('$item: does not match my$item, $items, item$s, aitem, xitem', () => {
+    const re = identifierPattern('$item')
+    expect(re.test('my$item')).toBe(false)
+    expect(re.test('$items')).toBe(false)
+    expect(re.test('item$s')).toBe(false)
+    expect(re.test('aitem')).toBe(false)
+    expect(re.test('xitem')).toBe(false)
+  })
+
+  test('item (plain, no $) still matches only standalone references', () => {
+    const re = identifierPattern('item')
+    expect(re.test('(item)')).toBe(true)
+    expect(re.test('x + item')).toBe(true)
+    expect(re.test('item.foo')).toBe(true)
+    expect(re.test('my$item')).toBe(false)
+    expect(re.test('$items')).toBe(false)
+    expect(re.test('item$s')).toBe(false)
+    expect(re.test('aitem')).toBe(false)
+    expect(re.test('xitem')).toBe(false)
+  })
+
+  test('the `g` flag supports substitution scanning across multiple matches', () => {
+    const re = identifierPattern('$x', 'g')
+    expect('$x + $x'.replace(re, () => 'Y')).toBe('Y + Y')
+  })
+
+  test('regex-metacharacter identifiers are escaped, not interpreted', () => {
+    // Not a realistic JS identifier, but guards the escape step directly:
+    // an unescaped '.' would match any character.
+    const re = identifierPattern('a.b')
+    expect(re.test('a.b')).toBe(true)
+    expect(re.test('axb')).toBe(false)
+  })
+})
+
+describe('identifierCallPattern (#2592)', () => {
+  test('matches call syntax for a $-prefixed getter, with or without whitespace', () => {
+    expect(identifierCallPattern('$count').test('$count()')).toBe(true)
+    expect(identifierCallPattern('$count').test('$count ()')).toBe(true)
+    expect(identifierCallPattern('$count').test('1 + $count()')).toBe(true)
+  })
+
+  test('does not match a bare (non-call) reference', () => {
+    expect(identifierCallPattern('$count').test('$count')).toBe(false)
+  })
+
+  test('does not match when the name is a substring of a longer call', () => {
+    expect(identifierCallPattern('$count').test('my$count()')).toBe(false)
+    expect(identifierCallPattern('$count').test('$counter()')).toBe(false)
+  })
+
+  test('plain (non-$) getter names keep matching call syntax as before', () => {
+    expect(identifierCallPattern('count').test('count()')).toBe(true)
+    expect(identifierCallPattern('count').test('acount()')).toBe(false)
+    expect(identifierCallPattern('count').test('counter()')).toBe(false)
+  })
+})
+
+// -----------------------------------------------------------------------------
+// End-to-end: a `.map()` callback whose param is `$item` must classify
+// identically to one named `item` — same slotId allocation, same
+// `$item() ` accessor-wrapping in the emitted client JS. Before the fix,
+// `referencesLoopParam` / `wrapLoopParamAsAccessor`'s `\b$item\b` pattern
+// never matched, so the loop body silently lost slotId/reactive
+// classification for the `$item`-named param (wrong-but-silent: `bun test`
+// still passed because nothing asserted the accessor wrap for a `$`-param
+// until now). Verified red-without/green-with: reverting `identifier-
+// pattern.ts` to a plain `` new RegExp(`\\b${name}\\b`) ``-style
+// implementation fails this describe block while leaving the plain-`item`
+// sibling test green — see PR description for the local repro.
+// -----------------------------------------------------------------------------
+describe('$-prefixed loop param compiles identically to a plain-named one (#2592)', () => {
+  const adapter = new TestAdapter()
+
+  function compileMapBody(param: string): string {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      type Row = { id: number; label: string }
+      export function List() {
+        const [rows] = createSignal<Row[]>([])
+        return (
+          <ul>
+            {rows().map((${param}) => (
+              <Card key={${param}.id}>
+                <CardHeader>{${param}.label}</CardHeader>
+              </Card>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    const errors = result.errors.filter(e => e.severity === 'error')
+    if (errors.length > 0) throw new Error(errors.map(e => e.message).join('\n'))
+    return result.files.find(f => f.type === 'clientJs')!.content
+  }
+
+  test('a plain `item` param is wrapped as an accessor in the child component prop', () => {
+    const js = compileMapBody('item')
+    expect(js).toContain('item().label')
+  })
+
+  test('a `$item` param is wrapped as an accessor identically (was previously left bare)', () => {
+    const js = compileMapBody('$item')
+    expect(js).toContain('$item().label')
+    expect(js).toContain('$item().id')
+  })
+})
+
+describe('flags handling', () => {
+  test("passing flags that already include 'u' does not throw (no duplicate flag)", () => {
+    const p = identifierPattern('item', 'gu')
+    expect(p.flags).toBe('gu')
+    const c = identifierCallPattern('item', 'u')
+    expect(c.flags).toBe('u')
+    expect('a item b item'.replace(identifierPattern('item', 'gu'), 'x')).toBe('a x b x')
+  })
+})

package/src/__tests__/loop-child-reactive-attr-const-shadow.test.ts

@@ -0,0 +1,107 @@
+/**
+ * #2482 Stage 1b — `prop-handling.ts`'s `expandConstantForReactivity` /
+ * `expandDynamicPropValue` run on `ClientJsContext`, a per-component object
+ * with no loop-scope field at all. Both do a flat
+ * `ctx.localConstants.find((c) => c.name === trimmedValue)` lookup with no
+ * awareness that the expression being expanded might be sitting inside a
+ * `.map()` row whose OWN item/index/destructured/preamble binding shadows
+ * that same-named module/component-level const — the lookup resolves to
+ * the OUTER const's value regardless.
+ *
+ * This test pins the reachable, currently-shipping instance: a per-item
+ * reactive DOM attribute (forced via `/* @client *\/`, so it bypasses the
+ * loop-param-only reactivity classifier and always reaches
+ * `collectLoopChildReactiveAttrs` → `expandConstantForReactivity`) whose
+ * value is a bare reference to the loop's OWN item parameter, which
+ * shares a name with a module-level const. Before the fix, the per-item
+ * `createEffect`-equivalent (`applyItem`/`createRow` in the lazy-row
+ * runtime) baked in the outer const's fixed literal for every row instead
+ * of reading the row's own item value — every row rendered the SAME
+ * `data-label`, and it never diverged from that one baked value.
+ *
+ * Modeled on `csr-template-loop-shadowing.test.ts` (the sibling shadowing
+ * fix for the CSR *template* lambda, #2222) — this is the analogous fix
+ * for the per-item *reactive attribute effect* body, a different codegen
+ * path (`reactivity.ts`'s `collectLoopChildReactiveAttrs`, not
+ * `html-template.ts`).
+ *
+ * A second describe block below pins the INDEX-param shadowing case
+ * (Copilot review on PR #2595): `buildLoopRowScope` initially omitted
+ * the loop's second callback param (`.map((item, i) => ...)`'s `i`) from
+ * the `BindingScope` it builds, so an `i`-shadows-a-module-const attr
+ * const-folded the outer value exactly like the item-param case above,
+ * empirically confirmed reachable through the same
+ * `collectLoopChildReactiveAttrs` → `expandConstantForReactivity` path.
+ * Fixed by threading the IR loop's `index` field through
+ * `collectLoopChildBindings` / `collectLoopChildConditionals` /
+ * `summarizeLoopChildBranch` / `collectLoopChildReactiveAttrs` /
+ * `collectLoopChildReactiveTexts` into `buildLoopRowScope`.
+ */
+
+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('loop-child reactive attr vs a loop-param shadowing a module const (#2482)', () => {
+  test('a /* @client */ attr reading the shadowing item param reads the row value, not the outer const', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: string[] }) {
+        const label = 'MODULE_CONST'
+        const [n, setN] = createSignal(0)
+        return (
+          <div onClick={() => setN(n() + 1)}>
+            <ul>
+              {items.map((label) => (
+                <li key={label} data-label={/* @client */ label}>{n()}</li>
+              ))}
+            </ul>
+          </div>
+        )
+      }
+    `)
+
+    // The per-item attribute effect must read the row's OWN item
+    // accessor — never the outer module const's baked literal.
+    expect(js).toContain('const __x = label()')
+    expect(js).not.toContain("const __x = 'MODULE_CONST'")
+  })
+})
+
+describe('loop-child reactive attr vs a loop INDEX param shadowing a module const (#2482 / #2595)', () => {
+  test('a /* @client */ attr reading the shadowing index param reads the row index, not the outer const', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: string[] }) {
+        const i = 'MODULE_CONST'
+        const [n, setN] = createSignal(0)
+        return (
+          <div onClick={() => setN(n() + 1)}>
+            <ul>
+              {items.map((item, i) => (
+                <li key={item} data-idx={/* @client */ i}>{n()}</li>
+              ))}
+            </ul>
+          </div>
+        )
+      }
+    `)
+
+    // The per-item attribute effect must read the row's OWN index
+    // closure variable — never the outer module const's baked literal.
+    expect(js).toContain("const __v = i;")
+    expect(js).not.toContain("const __v = 'MODULE_CONST';")
+  })
+})

package/src/__tests__/mutable-binding-writers.test.ts

@@ -0,0 +1,133 @@
+/**
+ * Unit coverage for `findAssignedNames` / `closeOverWritersOfMutableBindings`
+ * (#2598).
+ *
+ * The e2e half lives in `packages/vite/src/__tests__/mutable-binding-writers.test.ts`
+ * (real `vite build`, emitted template type-checked). This half pins what an
+ * e2e fixture can't isolate: which syntactic forms count as a WRITE, and the
+ * reads/false matches that must not. Those negative cases are why this uses
+ * the AST — a regex for `name\s*=` would match every one of them.
+ */
+import { describe, test, expect } from 'bun:test'
+import { findAssignedNames, closeOverWritersOfMutableBindings } from '../module-exports.ts'
+
+const candidates = (...names: string[]) => new Set(names)
+
+describe('findAssignedNames', () => {
+  test('plain assignment', () => {
+    expect([...findAssignedNames(`el = node`, candidates('el'))]).toEqual(['el'])
+  })
+
+  test('compound assignment', () => {
+    expect([...findAssignedNames(`seq += 1`, candidates('seq'))]).toEqual(['seq'])
+  })
+
+  test('logical assignment', () => {
+    expect([...findAssignedNames(`cached ??= build()`, candidates('cached'))]).toEqual(['cached'])
+  })
+
+  test('postfix and prefix update', () => {
+    expect([...findAssignedNames(`a++`, candidates('a'))]).toEqual(['a'])
+    expect([...findAssignedNames(`--b`, candidates('b'))]).toEqual(['b'])
+  })
+
+  test('assignment nested inside a function body', () => {
+    const body = `(el) => { if (el) { highlightEl = el } }`
+    expect([...findAssignedNames(body, candidates('highlightEl'))]).toEqual(['highlightEl'])
+  })
+
+  test('reports only the candidates asked about', () => {
+    const body = `a = 1; b = 2; c = 3`
+    expect([...findAssignedNames(body, candidates('b'))]).toEqual(['b'])
+  })
+
+  test('a read is not a write', () => {
+    expect([...findAssignedNames(`const x = el`, candidates('el'))]).toEqual([])
+  })
+
+  test('a comparison is not a write', () => {
+    expect([...findAssignedNames(`if (el == null) {}`, candidates('el'))]).toEqual([])
+    expect([...findAssignedNames(`if (el === other) {}`, candidates('el'))]).toEqual([])
+  })
+
+  test('a property write through the binding is not a write TO it', () => {
+    // `el` keeps whatever it already held — this cannot be what gives a
+    // never-narrowed binding its value.
+    expect([...findAssignedNames(`el.scrollTop = 0`, candidates('el'))]).toEqual([])
+  })
+
+  test('a same-named property key is not a write', () => {
+    expect([...findAssignedNames(`const o = { el: 1 }`, candidates('el'))]).toEqual([])
+  })
+
+  test('`name=` inside a string or JSX attribute is not a write', () => {
+    expect([...findAssignedNames(`const s = "el = node"`, candidates('el'))]).toEqual([])
+    expect([...findAssignedNames(`<div data-x="el = node" />`, candidates('el'))]).toEqual([])
+  })
+
+  test('no candidates means no parse and no results', () => {
+    expect([...findAssignedNames(`el = node`, candidates())]).toEqual([])
+  })
+})
+
+describe('closeOverWritersOfMutableBindings', () => {
+  // `declarations` carries the local `let` bindings themselves alongside the
+  // functions, exactly as the adapter builds it (localConstants +
+  // localFunctions) — a binding only counts as "surviving" if it is in this
+  // list and reachable.
+  const decls = [
+    { name: 'binding', body: `null` },
+    // Reachable from the rendered JSX below.
+    { name: 'reader', body: `() => { if (binding) return binding.x; return 0 }` },
+    // Reachable ONLY through a stripped attribute — the writer.
+    { name: 'writer', body: `(el) => { binding = el }` },
+    // Reachable from nothing at all; must stay pruned.
+    { name: 'orphan', body: `() => { unrelated = 1 }` },
+  ]
+  const rendered = `<div onScroll={reader} />`
+
+  test('pulls in the writer of a surviving mutable binding', () => {
+    const out = closeOverWritersOfMutableBindings(rendered, decls, new Set(['binding']))
+    expect(out.has('reader')).toBe(true)
+    expect(out.has('writer')).toBe(true)
+  })
+
+  test('leaves declarations that write nothing reachable alone', () => {
+    const out = closeOverWritersOfMutableBindings(rendered, decls, new Set(['binding']))
+    expect(out.has('orphan')).toBe(false)
+  })
+
+  test('does not retain a writer when the binding itself was pruned', () => {
+    // Nothing references `binding`, so it is not emitted and its writer is
+    // dead client-only code — the pruning this feature must not undo.
+    const out = closeOverWritersOfMutableBindings(`<div />`, decls, new Set(['binding']))
+    expect(out.has('writer')).toBe(false)
+    expect(out.has('reader')).toBe(false)
+  })
+
+  test('is a no-op when nothing is mutable', () => {
+    const withMutables = closeOverWritersOfMutableBindings(rendered, decls, new Set(['binding']))
+    const withoutMutables = closeOverWritersOfMutableBindings(rendered, decls, new Set())
+    expect(withoutMutables.has('writer')).toBe(false)
+    expect(withMutables.has('writer')).toBe(true)
+  })
+
+  test('reaches a writer that is only retained transitively', () => {
+    // `outerWriter` writes `a`; retaining it makes `b` reachable, whose own
+    // writer must then come along too — one round is not enough.
+    const chained = [
+      { name: 'a', body: `null` },
+      { name: 'b', body: `null` },
+      { name: 'reader', body: `() => (a ? a.x : 0)` },
+      { name: 'outerWriter', body: `(el) => { a = el; touch(b) }` },
+      { name: 'innerWriter', body: `(el) => { b = el }` },
+    ]
+    const out = closeOverWritersOfMutableBindings(
+      `<div onScroll={reader} />`,
+      chained,
+      new Set(['a', 'b']),
+    )
+    expect(out.has('outerWriter')).toBe(true)
+    expect(out.has('innerWriter')).toBe(true)
+  })
+})

package/src/__tests__/preamble-conditional-reactivity.test.ts

@@ -0,0 +1,191 @@
+/**
+ * #2596 — inside a `.map()` callback, a conditional whose condition is a
+ * bare reference to a preamble-declared local (a pre-return `const` in the
+ * callback body) never got its IR `reactive` flag set, even when the
+ * preamble local reads a signal:
+ *
+ *   {items().map((item) => {
+ *     const label = item.title || fallback()   // preamble local reading a signal
+ *     return <li>{label ? <Badge/> : <Placeholder/>}</li>   // never re-evaluated
+ *   })}
+ *
+ * Root cause: Phase 1's conditional-reactivity classifiers
+ * (`isReactiveExpression` for the condition's own text, `referencesLoopParam`
+ * for item/index/destructure names via `BindingScope.valueBoundNames()`) only
+ * ever see the token `label` — never its declaration — so a bare preamble-
+ * local reference tripped neither.
+ *
+ * Fix (`jsx-to-ir.ts`):
+ *  - `computePreambleReactiveNames` determines which preamble-declared names
+ *    are THEMSELVES reactive — read a signal/memo/reactive prop, directly or
+ *    transitively through an earlier preamble declaration — by re-running
+ *    the SAME `isReactiveExpression` classifier already used for ordinary
+ *    conditions, against each declaration's initializer.
+ *  - `markPreambleConditionalReactivity` is a new post-hoc pass (same shape
+ *    as `collectPreambleRegions`/`markPreambleAttrSlots`, #2447) that grants
+ *    `reactive: true` + a slot id to a loop-body conditional whose condition
+ *    bare-references one of those names.
+ *
+ * This alone isn't sufficient — Phase 2's `collectLoopChildConditionals`
+ * independently re-derives reactivity from the condition's EXPANDED text via
+ * `classifyReactivity`, and `expandConstantForReactivity`'s shadow guard
+ * (#2482 Stage 1b) deliberately leaves a preamble-bound identifier like
+ * `label` unexpanded, so `classifyReactivity('label', …)` always reads
+ * 'none'. `collectLoopChildConditionals` and `emitOuterConditional` (in
+ * `ir-to-client-js/`) got the same `readsPreamble` bypass +
+ * preamble-re-run-in-getter treatment `collectLoopChildReactiveAttrs`
+ * already had (#2447) — the condition-position twin.
+ *
+ * These tests assert the COMPILED OUTPUT shape (mirrors
+ * `csr-materialize-loop-preamble-shadow.test.ts` and
+ * `preamble-region-patch.test.ts`'s convention: compiler-internals
+ * correctness is a generated-code-shape pin, not a live-DOM test — DOM
+ * execution of `insert()`/`mapArrayLazy`'s own reactive-tracking contract is
+ * covered by their own runtime unit tests).
+ *
+ * Depending on loop-row shape, the fix surfaces through one of two Phase 2
+ * plans — both draw from the SAME `collectLoopChildConditionals` fix:
+ *  - Both branches "wiring-free static elements" (`analyzeLazyConditional`,
+ *    §9.4 L3): the lazy-row plan (`mapArrayLazy`), which recomputes the
+ *    preamble in `applyItem` (per-row) AND `applyOuter` (outer-signal
+ *    effect, primed by reading the signal unconditionally).
+ *  - Otherwise: the eager `mapArray` + `insert()` plan, which recomputes the
+ *    preamble inside the getter passed to `insert()`.
+ */
+
+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('preamble-conditional-reactivity (#2596)', () => {
+  test('(a) a conditional condition reading a signal-derived preamble local is reactive (lazy-row plan)', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [fallback, setFallback] = createSignal('x')
+        return (
+          <ul>
+            {items.map((item) => {
+              const label = item.title || fallback()
+              return <li key={item.id}>{label ? <span>yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // Both arms are wiring-free static elements — eligible for the lazy-row
+    // plan (§9.4 L3), which carries no per-row insert()/createEffect.
+    expect(js).toContain('mapArrayLazy(')
+    // The preamble re-runs (loop-param accessor form, `item()`) inside BOTH
+    // apply bodies — `applyItem` (per-row, same-key update) and `applyOuter`
+    // (the outer-signal effect) — never the plain (`item.title`) form.
+    const preambleRerun = /const label = item\(\)\.title \|\| fallback\(\);/g
+    expect(js.match(preambleRerun)?.length).toBeGreaterThanOrEqual(2)
+    // `applyOuter` primes the signal read unconditionally (§9.3(3)) so the
+    // effect subscribes even when the row list is momentarily empty — this
+    // IS the fix: before it, nothing in the emitted plan read `fallback()`
+    // outside the one-time row-construction line, so the effect never
+    // subscribed and the branch froze at its SSR-time value.
+    expect(js).toMatch(/applyOuter:\s*\(__es, __seed\) => \{\s*fallback\(\)/)
+    // The conditional actually got wired — not the empty no-op body a
+    // non-reactive conditional gets (see negative-case test below).
+    expect(js).not.toContain('applyItem: () => {}')
+  })
+
+  test('(b) the same shape through the eager insert() plan when a branch carries its own reactive text', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [fallback, setFallback] = createSignal('x')
+        return (
+          <ul>
+            {items.map((item) => {
+              const label = item.title || fallback()
+              return <li key={item.id}>{label ? <span>{item.title} yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // A branch with its own reactive text disqualifies the lazy-row plan
+    // (`analyzeLazyConditional` requires wiring-free arms) — this exercises
+    // the OTHER Phase 2 path the fix threads through.
+    expect(js).toContain('mapArray(')
+    expect(js).not.toContain('mapArrayLazy(')
+    // `insert()`'s condition getter re-runs the preamble before reading
+    // `label` — the local isn't otherwise in scope inside that closure.
+    expect(js).toMatch(
+      /insert\(__el, 's1', \(\) => \{ const label = item\(\)\.title \|\| fallback\(\);; return \(label\) \}/,
+    )
+  })
+
+  test('(c) a conditional reading a NON-reactive preamble local stays non-reactive', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [count, setCount] = createSignal(0)
+        return (
+          <ul>
+            {items.map((item) => {
+              const label = item.title
+              return <li key={item.id}>{label ? <span>yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // Still lazy-eligible (both arms are wiring-free statics), but the
+    // conditional itself never got a slot id / reactive flag — no per-row
+    // OR per-outer wiring for it at all.
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).toContain('applyItem: () => {}')
+    expect(js).not.toContain('applyOuter')
+    expect(js).not.toContain('insert(')
+    // The condition's static, row-construction-time value is still baked
+    // into the row template (correct — it's genuinely never going to
+    // change without a fresh row).
+    expect(js).toMatch(/label \? `<span>yes<\/span>` : `<span>no<\/span>`/)
+  })
+
+  test('(d) transitive: a preamble local reading another preamble local that reads a signal', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [fallback, setFallback] = createSignal('x')
+        return (
+          <ul>
+            {items.map((item) => {
+              const base = fallback()
+              const label = item.title || base
+              return <li key={item.id}>{label ? <span>yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // `computePreambleReactiveNames` walks preamble declarations in source
+    // order, folding each name into the reactive set when its initializer
+    // reads a signal/memo/prop directly OR references an earlier name
+    // already in that set — `label` qualifies via `base`, not via any
+    // signal call of its own.
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).not.toContain('applyItem: () => {}')
+    expect(js).toMatch(/applyOuter:\s*\(__es, __seed\) => \{\s*fallback\(\)/)
+    const preambleRerun = /const base = fallback\(\); const label = item\(\)\.title \|\| base;/g
+    expect(js.match(preambleRerun)?.length).toBeGreaterThanOrEqual(2)
+  })
+})