@barefootjs/jsx 0.31.4 → 0.31.5

package/src/__tests__/binding-scope-ratchet.test.ts

@@ -12,7 +12,9 @@
  * pattern covers both.
  * Modeled in spirit on `map-body-no-silent-divergence.test.ts`'s known-hole
  * ledger: a known-inventory of the current reality that may only shrink as
- * Stages 1-4 migrate call sites onto `BindingScope`, never grow.
+ * Stages 1-4 migrate call sites onto `BindingScope`, never grow. Stage 4
+ * drove this to its FLOOR — every remaining entry is a permanent, justified
+ * exception (see the `ALLOWLIST` doc comment below), not leftover debt.
  *
  * Scans every `.ts` file under `packages/jsx/src/` and each `packages/adapter-X/src/`
  * (excluding `__tests__` directories, `*.test.ts` files, and
@@ -58,44 +60,167 @@ const PATTERNS = [
 type Pattern = (typeof PATTERNS)[number]
 
 /**
- * Exact per-file, per-pattern occurrence counts as of #2482 Stage 0. Only
- * ever shrinks — see header comment. A missing file or missing pattern key
- * means an expected count of 0.
+ * Exact per-file, per-pattern occurrence counts, updated through #2482
+ * Stage 4 (the FLOOR — see that stage's PR for the file-by-file
+ * MIGRATE-or-FLOOR review). Only ever shrinks — see header comment. A
+ * missing file or missing pattern key means an expected count of 0.
+ *
+ * ============================== FLOOR INVARIANT ==============================
+ * Every entry below is a PERMANENT, JUSTIFIED exception, not leftover debt —
+ * each one is annotated with why it can't (or shouldn't) thread a live
+ * `BindingScope` instead. Two shapes recur across the justifications:
+ *
+ *   1. NO LIVE SCOPE TO CONSULT: a prepass that runs once at `generate()` /
+ *      constructor-generation time, OUTSIDE the render-time (or
+ *      render-shaped) tree walk `BindingScope` is threaded through — there is
+ *      no position to ask "what's bound HERE" about, so these fall back to a
+ *      coarser, deliberately over-inclusive whole-component or whole-file
+ *      scan (safe because over-exclusion only ever degrades to the
+ *      already-accepted pre-#2482 residual, never to silently wrong output).
+ *   2. UNRELATED DOMAIN: a `localConstants.find(` matching the ledger's
+ *      textual pattern by coincidence — const/prop resolution for SSR
+ *      dead-code elimination, `Record[key]` lookup, cross-IR CSS class
+ *      resolution, component-scope const-chain inlining — none of which ask
+ *      "is this name shadowed by a loop callback param" at all, so
+ *      `BindingScope` (a loop-row/callback binding stack) has no bearing on
+ *      them.
+ *   3. ACCESSOR/REWRITE PAYLOAD, NOT AN EXISTENCE QUERY: `BindingScope` only
+ *      carries binding EXISTENCE/kind/depth — never per-binding rendering
+ *      payload (a Go template accessor string, an ordered client-JS
+ *      accessor-rewrite spec). The Go adapter's `loopBindingStack` and the
+ *      client-JS emitter's `loopParams: ReadonlyArray<string | LoopParamSpec>`
+ *      (`ir-to-client-js/utils.ts`'s `wrapExprWithLoopParams` and its
+ *      `collect-elements.ts`/`html-template.ts`/`build-event-delegation.ts`
+ *      callers) are this shape — a `BindingScope`-adjacent but structurally
+ *      distinct concern.
+ *
+ * New code must use `BindingScope` (`packages/jsx/src/scope/binding-scope.ts`)
+ * for any "is this name bound by an enclosing loop callback" question. Per
+ * the mechanics already documented below: entries may only shrink (or be
+ * removed outright when a file reaches 0), never grow — a grown or added
+ * entry is a regression to flag in review, not to allowlist away.
+ * ===============================================================================
  */
 const ALLOWLIST: Record<string, Partial<Record<Pattern, number>>> = {
-  'packages/adapter-blade/src/adapter/blade-adapter.ts': { staticLoopSourceBoundNames: 8, loopBoundNames: 12 },
-  'packages/adapter-erb/src/adapter/erb-adapter.ts': { 'localConstants.find(': 1, loopBoundNames: 20 },
-  'packages/adapter-erb/src/adapter/expr/emitters.ts': { loopBoundNames: 1 },
+  // FLOOR (shape 1, already guarded): `expandDynamicPropValue`'s
+  // `this.scope`-mirroring shadow guard (`erb-adapter.ts`'s own
+  // `!this.scope.isBound(trimmed)` check, #2489) precedes this `.find(` —
+  // the lookup itself is the legitimate const-resolution step once the
+  // shadow question is already answered by `scope`.
+  'packages/adapter-erb/src/adapter/erb-adapter.ts': { 'localConstants.find(': 1 },
+  // FLOOR (shape 2/3 boundary): `inlineLocalHelperCall` resolves a call's
+  // CALLEE name against module/component consts to inline a local
+  // arrow-helper's body (`sortClass(k)` → its substituted expression) — a
+  // "does a helper by this name exist" lookup, not itself a shadow guard.
+  // Flagged for the human maintainer (see Stage 4 report): unlike the
+  // sibling `litConst` fast path directly above its call site in
+  // `go-template-adapter.ts` (which DOES guard with `isLoopShadowedName`),
+  // this call site has no such guard — a `.map((sortClass) => ...)`
+  // shadowing a same-named module helper is a narrow, unverified gap left
+  // for a follow-up rather than fixed speculatively here.
   'packages/adapter-go-template/src/adapter/expr/helper-inline.ts': { 'localConstants.find(': 1 },
   'packages/adapter-go-template/src/adapter/go-template-adapter.ts': {
+    // FLOOR: of the 5 `.find(` sites — `resolveDynamicPropValue` (child-prop
+    // passthrough, called only from `generateNewPropsFunction`'s
+    // `emitStaticChildInstances`), `computeDerivedConstFields` and
+    // `isStringExpr` (same `generateNewPropsFunction` constructor-context
+    // bucket), and `resolveModuleNumericConst` (guarded in place by
+    // `isCurrentLoopItem`/`isOuterLoopParam`, both already `this.scope.lookup`-
+    // backed) — 3 are shape-1 (no live scope in the ctor-generation prepass)
+    // and 1 is already scope-guarded. The 5th, `renderLoop`'s loop-array
+    // const lookup, gained a `!this.scope.isBound(arrayName)` guard in
+    // Stage 4 (a real gap: an enclosing loop's own item param could shadow
+    // a same-named module const and misfire a BF101) — MIGRATED in place,
+    // the `.find(` call itself stays as the legitimate lookup once shadow
+    // is ruled out.
     'localConstants.find(': 5,
-    staticLoopSourceBoundNames: 3,
-    loopParamStack: 35,
+    // #2482 Stage 3: `loopParamStack` eliminated entirely (0, down from 35)
+    // — replaced by the threaded `this.scope: BindingScope`. The remaining
+    // 2 `staticLoopSourceBoundNames` uses (down from 3) are the
+    // `getBakedStaticChildLoop` shadow guard shared with two call sites
+    // OUTSIDE the live `renderLoop` tree walk (no live `scope` to consult
+    // there — shape 1) — a genuinely-legitimate surviving use, confirmed
+    // FLOOR in Stage 4 (`primeCompileState`'s own comment documents the
+    // three-call-site agreement requirement).
+    staticLoopSourceBoundNames: 2,
   },
-  'packages/adapter-go-template/src/adapter/lib/compile-state.ts': { staticLoopSourceBoundNames: 1, loopParamStack: 1 },
+  // FLOOR (shape 1 for the field; the doc-only `loopParamStack` mention this
+  // file's top-level comment used to carry was reworded in Stage 4 — that
+  // stack no longer exists anywhere, so the ledger's last trace of it is
+  // gone too).
+  'packages/adapter-go-template/src/adapter/lib/compile-state.ts': { staticLoopSourceBoundNames: 1 },
+  // FLOOR (shape 1): `lowerCtorExpr`/`lowerCtorStringArray` lower a derived-
+  // state memo's computation into Go CODE evaluated in the `NewXxxProps`
+  // constructor — the same no-live-scope bucket as `go-template-adapter.ts`'s
+  // ctor-context `.find(` calls above.
   'packages/adapter-go-template/src/adapter/memo/ctor-lowering.ts': { 'localConstants.find(': 3 },
+  // FLOOR (shape 1): `packageModuleConst` — same `NewXxxProps` ctor-context
+  // bucket as `ctor-lowering.ts`.
   'packages/adapter-go-template/src/adapter/memo/memo-value.ts': { 'localConstants.find(': 1 },
-  'packages/adapter-jinja/src/adapter/jinja-adapter.ts': { staticLoopSourceBoundNames: 8, loopBoundNames: 12 },
+  // FLOOR (shape 1, already guarded): same `this.scope.isBound(trimmed)`
+  // shadow guard as `erb-adapter.ts` (#2221 — `resolveLiteralConst` /
+  // `resolveStaticRecordLiteral`'s established pattern).
   'packages/adapter-mojolicious/src/adapter/mojo-adapter.ts': {
     'localConstants.find(': 1,
-    staticLoopSourceBoundNames: 1,
-    loopBoundNames: 23,
   },
-  'packages/adapter-rust/src/adapter/minijinja-adapter.ts': { staticLoopSourceBoundNames: 8, loopBoundNames: 12 },
-  'packages/adapter-twig/src/adapter/twig-adapter.ts': { staticLoopSourceBoundNames: 8, loopBoundNames: 12 },
-  'packages/adapter-xslate/src/adapter/xslate-adapter.ts': { staticLoopSourceBoundNames: 8, loopBoundNames: 12 },
+  // FLOOR (shape 2): `generateSignalInitializers`'s reachability analysis
+  // for SSR no-op initializer dead-code elimination — module/component-level
+  // declaration reachability, unrelated to loop-row shadowing entirely.
   'packages/jsx/src/adapters/jsx-adapter.ts': { 'localConstants.find(': 1 },
+  // FLOOR (shape 2): resolves a `Record<T,string>[key]`-shaped indexed
+  // lookup's IDENT operand to a module-scope object-literal const for
+  // `renderToTest`'s union-semantics resolution — a component-level static
+  // analysis pass, not a loop-row shadow question.
   'packages/jsx/src/augment-inherited-props.ts': { 'localConstants.find(': 1 },
+  // FLOOR (shape 2): cross-IR CSS class-const resolution for the UnoCSS
+  // layer prefixer's transitive-reference walk — operates across whole
+  // components' `localConstants` lists, no loop-row scope involved.
   'packages/jsx/src/css-layer-prefixer.ts': { 'localConstants.find(': 1 },
-  'packages/jsx/src/debug.ts': { loopParams: 18 },
-  'packages/jsx/src/free-refs.ts': { 'localConstants.find(': 1, loopParams: 4 },
+  'packages/jsx/src/free-refs.ts': {
+    // FLOOR (shape 2): `resolveConstantInitializerRefs`'s transitive-taint
+    // expansion — resolves a local constant's OWN initializer by name to
+    // recurse into its free refs, not a loop-row shadow check.
+    'localConstants.find(': 1,
+    // FLOOR: the `BindingEnvironment.loopParams` field itself was RENAMED
+    // (Stage 4) to `loopValueBoundNames` (it carries `scope.valueBoundNames()`
+    // — the field name now says so). This single remaining occurrence is the
+    // rename's own historical-name mention in `loopValueBoundNames`'s
+    // docstring, matching the established convention elsewhere (e.g.
+    // `binding-scope.ts`'s own header keeps six `ctx.loopParams` mentions as
+    // migration history).
+    loopParams: 1,
+  },
+  // FLOOR (shape 3): `irToPlaceholderTemplate`'s loop-param accessor-rewrite
+  // spec forwarding — see the canonical docstring on
+  // `wrapExprWithLoopParams` in `ir-to-client-js/utils.ts`.
   'packages/jsx/src/ir-to-client-js/collect-elements.ts': { loopParams: 9 },
+  // FLOOR (shape 2): `computeCsrInlinability`'s fixed-point constant-chain
+  // inlining loop over `ctx.localConstants` — component-scope const
+  // resolution, not loop-row scope.
   'packages/jsx/src/ir-to-client-js/compute-inlinability.ts': { 'localConstants.find(': 1 },
+  // FLOOR (shape 3): event-delegation plan building deliberately does NOT
+  // pass a loop-param accessor-rewrite spec (see the file's own comments) —
+  // the remaining mentions are all in that reasoning, not device usage.
   'packages/jsx/src/ir-to-client-js/control-flow/plan/build-event-delegation.ts': { loopParams: 4 },
-  'packages/jsx/src/ir-to-client-js/html-template.ts': { loopParams: 16 },
+  // FLOOR (shape 3): `irToHtmlTemplate`/`irToPlaceholderTemplate`'s
+  // loop-param accessor-rewrite spec — see `ir-to-client-js/utils.ts`'s
+  // `wrapExprWithLoopParams` docstring (the canonical explanation, pointed
+  // to from this file's own function signature since Stage 4).
+  'packages/jsx/src/ir-to-client-js/html-template.ts': { loopParams: 17 },
+  // FLOOR (shape 1, already guarded): both `expandDynamicPropValue` and
+  // `expandConstantForReactivity` precede their `.find(` with
+  // `scope?.isBound(trimmedValue)` — see this file's own header comment
+  // (added Stage 1b) for the full SHADOW GUARD reasoning.
   'packages/jsx/src/ir-to-client-js/prop-handling.ts': { 'localConstants.find(': 2 },
-  'packages/jsx/src/ir-to-client-js/utils.ts': { loopParams: 3 },
-  'packages/jsx/src/jsx-to-ir.ts': { loopParams: 1 },
+  // FLOOR (shape 3): `wrapExprWithLoopParams` / `LoopParamSpec` — the
+  // canonical definition of the accessor-rewrite payload every other
+  // `loopParams`-named parameter in `ir-to-client-js/` forwards. See its
+  // docstring (added Stage 4) for the full shape-3 reasoning.
+  'packages/jsx/src/ir-to-client-js/utils.ts': { loopParams: 4 },
+  // `jsx-to-ir.ts` — MIGRATED to 0 in Stage 4: `makeBindingEnv`'s
+  // `loopParams: boundNames` field now reads `loopValueBoundNames:
+  // boundNames`, matching `free-refs.ts`'s renamed field. No entry needed
+  // (a missing key means an expected count of 0).
 }
 
 const SCOPE_MODULE_DIR = join(REPO_ROOT, 'packages', 'jsx', 'src', 'scope')

package/src/__tests__/component-type-parameters.test.ts

@@ -0,0 +1,70 @@
+/**
+ * Regression test for #2573 (xyflow TS2304 family): a component function's
+ * own generic type parameters (`function Flow<NodeType, EdgeType>(...)`)
+ * were dropped from the emitted `.tsx` SSR template — the function
+ * signature came out as `function Flow(...)` even though its props type
+ * annotation (and often its body) kept referencing `NodeType`/`EdgeType`
+ * verbatim (`props: FlowComponentProps<NodeType, EdgeType>`,
+ * `createFlowStore<NodeType, EdgeType>(props)`). TypeScript then reported
+ * "Cannot find name 'NodeType'" (TS2304) at every such reference — the
+ * declaration that would have brought the name into scope was never
+ * emitted. Runtime output (client JS) was always correct; this is a
+ * type-level emission defect in the SSR template only.
+ *
+ * `IRMetadata.typeParameters` now carries the source's type parameter list
+ * verbatim (`node.getText()` per parameter, mirroring `ConstantInfo.
+ * typeAnnotation`'s #2589 precedent), and `HonoAdapter`/`TestAdapter` splice
+ * it between the function name and the parameter list.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-adapter'
+
+describe('component type parameter preservation in emitted templates (#2573)', () => {
+  test('a generic function component keeps its type parameters on the emitted signature', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      interface NodeBase { id: string }
+      interface EdgeBase { id: string }
+      interface FlowProps<NodeType extends NodeBase, EdgeType extends EdgeBase> {
+        nodes: NodeType[]
+        edges: EdgeType[]
+      }
+
+      export function Flow<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
+        props: FlowProps<NodeType, EdgeType>,
+      ) {
+        const count = props.nodes.length + props.edges.length
+        return <div>{count}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Flow.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain(
+      'function Flow<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(',
+    )
+  })
+
+  test('a non-generic function component gains no type parameter clause', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      interface CardProps { title: string }
+      export function Card(props: CardProps) {
+        return <div>{props.title}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Card.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain('function Card(')
+    expect(template.content).not.toMatch(/function Card</)
+  })
+})

package/src/__tests__/csr-materialize-loop-preamble-shadow.test.ts

@@ -69,7 +69,16 @@ describe('CSR materialize template vs .map() preamble-local shadowing a module c
 
     // The row-local `label` (the preamble's OWN computed value) must
     // drive the branch — never the outer module const's literal.
-    expect(tpl).toContain('label ? `<span>yes</span>`')
+    //
+    // The branch also carries a `bf-c="s0"` slot marker on both arms
+    // (#2596 follow-up): `label`'s initializer reads the real signal `on()`,
+    // so `markPreambleConditionalReactivity` now grants this conditional a
+    // slot id and the `reactive` flag it lacked before — the SAME
+    // observable-failure-mode class this file's docstring describes
+    // ("every row's branch condition evaluated the constant's fixed
+    // truthiness"), just for the signal dimension instead of the shadowing
+    // one. Nothing else about this fixture's shape changed.
+    expect(tpl).toContain('label ? `<span bf-c="s0">yes</span>` : `<span bf-c="s0">no</span>`')
     expect(tpl).not.toContain("('MODULE_CONST')")
     expect(tpl).not.toContain('MODULE_CONST')
   })

package/src/__tests__/free-refs.test.ts

@@ -110,7 +110,7 @@ describe('resolveFreeRefs — kind resolution', () => {
     const env = {
       ...emptyEnv(),
       localConstants: [mkConst('item')],
-      loopParams: new Set(['item']),
+      loopValueBoundNames: new Set(['item']),
     }
     const refs = resolveFreeRefs(parseExpression('item'), env)
     expect(refs.find(r => r.name === 'item')?.kind).toBe('render-item')

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