@barefootjs/jsx 0.29.0 → 0.30.2

package/src/__tests__/preamble-declarations.test.ts

@@ -0,0 +1,207 @@
+/**
+ * `.map()` callback preamble → backend-neutral value declarations (#2447).
+ *
+ * ## What was broken
+ *
+ * A block-body `.map()` whose preamble computes a value used in the row
+ * (`const cls = row.done ? 'done' : 'open'`) carried that preamble only as
+ * `segments` — JS text, which a template language cannot execute. Every DSL
+ * adapter emitted the row anyway, reading a name it never assigned: ERB read
+ * `v[:cls]` (an unseeded vars-Hash key), Go read `$.Cls` (a PARENT-struct
+ * field), the rest read a bare undefined local. The class rendered empty, on
+ * eight backends, with no diagnostic — the exact silent divergence the
+ * sound-or-loud invariant forbids.
+ *
+ * ## The two halves pinned here
+ *
+ *  1. **Lowerable → carried.** `MapCallbackPreamble.declarations` holds one
+ *     `{ name, valueParsed }` per declaration, so each adapter emits it in its
+ *     own per-row local syntax through the `ParsedExpr` door it already has.
+ *  2. **Not lowerable → loud.** Anything that is not a sequence of value
+ *     declarations leaves `declarations` unset, and a DSL target refuses with
+ *     the `/* @client *\/` escape rather than emitting a row that reads
+ *     nothing. A JS runtime keeps running the preamble verbatim either way.
+ *
+ * All-or-nothing is the point of the shape assertions below: lowering the
+ * declarable prefix of a mixed preamble and dropping the rest would be a new
+ * silent divergence wearing the fix's clothes.
+ *
+ * The per-adapter emission is asserted end-to-end by the
+ * `loop-preamble-attr-value` conformance fixture (real ERB / Jinja / Twig /
+ * Blade / Kolon / Mojo / minijinja / Go renders vs. the JS reference), not
+ * here; this file pins the IR contract and the gate.
+ */
+
+import { describe, test, expect, beforeAll } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import type { IRElement, IRLoop, IRNode } from '../types'
+
+const ROWS = (preamble: string, row = `<li key={r.id} class={cls}>{r.label}</li>`) => `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function Rows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {rows().map(r => {
+        ${preamble}
+        return ${row}
+      })}
+    </ul>
+  )
+}
+`
+
+function findLoop(node: IRNode | null): IRLoop | null {
+  if (!node) return null
+  if (node.type === 'loop') return node
+  const kids = (node as IRElement).children
+  if (!Array.isArray(kids)) return null
+  for (const c of kids) {
+    const hit = findLoop(c)
+    if (hit) return hit
+  }
+  return null
+}
+
+function loopOf(source: string): IRLoop {
+  const loop = findLoop(jsxToIR(analyzeComponent(source, 'Rows.tsx')))
+  if (!loop) throw new Error('no loop in IR')
+  return loop
+}
+
+/** Compile against a DSL-tier adapter (one that cannot run a callback body). */
+function dslErrors(source: string): string[] {
+  const adapter = new TestAdapter()
+  adapter.acceptsCallbackBody = () => false
+  return compileJSX(source, 'Rows.tsx', { adapter })
+    .errors.filter(e => e.severity !== 'warning')
+    .map(e => `${e.code}: ${e.message}`)
+}
+
+// The first `analyzeComponent` in a process pays the TS program setup, which
+// alone exceeds the default per-test timeout. Pay it once, outside a test.
+beforeAll(() => {
+  analyzeComponent(ROWS(`const warm = r.label`), 'Warmup.tsx')
+}, 60_000)
+
+describe('preamble value declarations — carried as neutral IR', () => {
+  test('a single ternary declaration', () => {
+    const loop = loopOf(ROWS(`const cls = r.done ? 'done' : 'open'`))
+    expect(loop.preamble?.declarations).toEqual([
+      expect.objectContaining({ name: 'cls', raw: `r.done ? 'done' : 'open'` }),
+    ])
+    expect(loop.preamble?.declarations?.[0].valueParsed.kind).toBe('conditional')
+  })
+
+  test('declarations keep SOURCE order, so a later one can read an earlier one', () => {
+    const loop = loopOf(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function Rows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {rows().map(r => {
+        const base = r.done ? 'done' : 'open'
+        const cls = base + ' row'
+        return <li key={r.id} class={cls}>{r.label}</li>
+      })}
+    </ul>
+  )
+}
+`)
+    expect(loop.preamble?.declarations?.map(d => d.name)).toEqual(['base', 'cls'])
+  })
+
+  test('several declarators in one statement each become a declaration', () => {
+    const loop = loopOf(ROWS(`const a = r.label, b = r.id`))
+    expect(loop.preamble?.declarations?.map(d => d.name)).toEqual(['a', 'b'])
+  })
+
+  test('the names are loop-bound for the body, like a loop param', async () => {
+    // `collectLoopBoundNames` is what stops a same-named module const from
+    // inlining over the local the loop just declared.
+    const { collectLoopBoundNames } = await import('../adapters/loop-bound-names.ts')
+    const ctx = analyzeComponent(ROWS(`const cls = r.done ? 'done' : 'open'`), 'Rows.tsx')
+    const root = jsxToIR(ctx)
+    expect(root).not.toBeNull()
+    const names = collectLoopBoundNames({ ...ctx.componentIR!, root: root! })
+    expect(names.has('cls')).toBe(true)
+  })
+})
+
+describe('preamble value declarations — all-or-nothing', () => {
+  // Each of these has SOMETHING declarable in it. Carrying just that part and
+  // dropping the rest would put the missing statement's effect nowhere, with
+  // no diagnostic — so the whole preamble must decline.
+  const notDeclarable: Array<[string, string]> = [
+    ['an assignment after a declaration', `let n = 0\n        n = r.id`],
+    ['an imperative loop', `const out = []\n        for (const c of r.label) out.push(c)`],
+    ['a destructuring binding', `const { label } = r`],
+    ['a declaration with no initializer', `let cls\n        const other = r.label`],
+    [
+      'an initializer the expression subset cannot model',
+      `const cls = (() => r.done)()`,
+    ],
+  ]
+
+  for (const [name, preamble] of notDeclarable) {
+    test(name, () => {
+      const loop = loopOf(ROWS(preamble, `<li key={r.id}>{r.label}</li>`))
+      expect(loop.preamble).toBeDefined()
+      expect(loop.preamble?.declarations).toBeUndefined()
+    })
+  }
+})
+
+describe('the DSL gate — loud, not an empty attribute', () => {
+  test('a declarable preamble compiles clean on a DSL target', () => {
+    expect(dslErrors(ROWS(`const cls = r.done ? 'done' : 'open'`))).toEqual([])
+  })
+
+  test('a non-declarable preamble refuses, with the /* @client */ escape', () => {
+    const errors = dslErrors(
+      ROWS(`let n = 0\n        n = r.id`, `<li key={r.id}>{r.label}</li>`),
+    )
+    expect(errors.length).toBeGreaterThan(0)
+    expect(errors[0]).toMatch(/not a sequence of value declarations/)
+  })
+
+  test('a JS runtime runs the same preamble verbatim — no refusal', () => {
+    // The whole point of the per-backend fidelity model: the price is paid by
+    // the backend that genuinely cannot express the shape.
+    const r = compileJSX(
+      ROWS(`let n = 0\n        n = r.id`, `<li key={r.id}>{r.label}</li>`),
+      'Rows.tsx',
+      { adapter: new TestAdapter() },
+    )
+    expect(r.errors.filter(e => e.severity !== 'warning')).toEqual([])
+  })
+
+  test('/* @client */ silences the DSL refusal', () => {
+    const source = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function Rows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {/* @client */ rows().map(r => {
+        let n = 0
+        n = r.id
+        return <li key={r.id}>{r.label}</li>
+      })}
+    </ul>
+  )
+}
+`
+    expect(dslErrors(source)).toEqual([])
+  })
+})

package/src/__tests__/ssr-defaults.test.ts

@@ -102,6 +102,50 @@ describe('extractSsrDefaults', () => {
     expect(defaults?.n).toEqual({ value: 0 })
   })
 
+  test('aliased destructured prop (#2460): `propName` is the CALLER-facing key, not the local binding', () => {
+    // `{ n: count }` — the caller passes `n`, the template variable (and
+    // stash entry key) is the local binding `count`. The manifest
+    // consumer (`_derive_stash_from_defaults` in the Perl runtime) reads
+    // the caller's props by `propName`, so `propName` must be `n`, not
+    // `count` — using the local name here silently drops the caller's
+    // value (the stash entry falls back to the static `value`, `null`).
+    const metadata = metadataFor(`
+      function Badge({ text, n: count }: { text: string; n: number }) {
+        return <span>{text}:{count}</span>
+      }
+    `)
+
+    const defaults = extractSsrDefaults(metadata)
+    expect(defaults).toBeDefined()
+    // Keyed by the LOCAL binding (the template variable name)...
+    expect(defaults?.count).toEqual({ propName: 'n', value: null })
+    // ...but `propName` is the CALLER-facing key.
+    expect(defaults?.text).toEqual({ propName: 'text', value: null })
+  })
+
+  test('aliased destructured prop with a default (#2460): `propName` still resolves to the source key', () => {
+    const metadata = metadataFor(`
+      function Badge({ n: count = 7 }: { n?: number }) {
+        return <span>{count}</span>
+      }
+    `)
+
+    const defaults = extractSsrDefaults(metadata)
+    expect(defaults?.count).toEqual({ propName: 'n', value: 7 })
+  })
+
+  test('un-aliased destructured prop (regression): `propName` equals the local name', () => {
+    const metadata = metadataFor(`
+      function Badge({ text, n }: { text: string; n: number }) {
+        return <span>{text}:{n}</span>
+      }
+    `)
+
+    const defaults = extractSsrDefaults(metadata)
+    expect(defaults?.n).toEqual({ propName: 'n', value: null })
+    expect(defaults?.text).toEqual({ propName: 'text', value: null })
+  })
+
   test('memo derived from a signal evaluates through the chain', () => {
     const metadata = metadataFor(`
       'use client'

package/src/adapters/child-scope.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether a child component derives its `bf-s` scope id from its parent
+ * scope + mount slot (`${parentScopeId}_${slotId}`) rather than getting a
+ * freshly randomized one (`${name}_${random}`).
+ *
+ * A component derives from its slot unless it is the DIRECT root of a loop
+ * row (`IRComponent.loopItemRoot`, set once in `jsx-to-ir.ts`'s loop
+ * builder) — a row root owns its own per-row identity, matching Hono's
+ * reference behaviour (#2444). Every backend (Hono, each DSL adapter, and
+ * both CSR template emitters) MUST consult this single predicate instead of
+ * re-deriving the fact from a mutable "am I inside a loop" flag, which is
+ * what caused #2444: such flags stay true for an entire loop subtree and
+ * can't distinguish a row root from a component nested below it.
+ */
+
+import type { IRComponent } from '../types.ts'
+
+export function derivesScopeFromSlot(
+  comp: Pick<IRComponent, 'slotId' | 'loopItemRoot'>
+): boolean {
+  return comp.slotId != null && comp.loopItemRoot !== true
+}

package/src/adapters/loop-bound-names.ts

@@ -50,6 +50,12 @@ export function collectLoopBoundNames(ir: ComponentIR): Set<string> {
         // param (which may differ from the map callback's `param`) before
         // any rename to the loop param happens.
         if (node.filterPredicate) names.add(node.filterPredicate.param)
+        // A `.map()` callback preamble's declarations lower to per-row locals
+        // in the loop body on every DSL adapter (#2447), so a preamble name is
+        // bound in body scope exactly like a param — and must get the same
+        // exclusion, or a same-named module const would inline over the local
+        // the loop just declared.
+        for (const name of node.preamble?.declaredNames ?? []) names.add(name)
         for (const child of node.children) visit(child)
         if (node.childComponent) {
           for (const child of node.childComponent.children) visit(child)

package/src/analyzer-context.ts

@@ -448,6 +448,49 @@ export function typeNodeToTypeInfo(
     return { kind: 'array', raw, elementType: recurse(typeNode.elementType) }
   }
 
+  // Literal types (`'a'`, `42`, `-1`, `true`, `null`) — including as union
+  // members, which is where the absence of this arm hurt: `'a' | 'b'`
+  // members fell to `{kind:'unknown', raw:"'a'"}`, forcing every consumer
+  // that needed the member's family or value to re-parse `raw` with a
+  // regex (the Go adapter's literal-union collapse, #2324's
+  // `unionMemberLiteral`, `rich-type-evidence`'s nullish-arm match — all
+  // three carried one). A literal is structurally a primitive of its
+  // family carrying its value; consumers that only care about the family
+  // see a plain primitive, and the value rides along in `literalValue`
+  // for the ones that need it. `null` inside a union arrives as
+  // `LiteralTypeNode(NullKeyword)` — NOT the bare `NullKeyword` the
+  // switch above catches — which is exactly why nullish union arms were
+  // invisible before.
+  if (ts.isLiteralTypeNode(typeNode)) {
+    const lit = typeNode.literal
+    if (ts.isStringLiteral(lit) || ts.isNoSubstitutionTemplateLiteral(lit)) {
+      return { kind: 'primitive', raw, primitive: 'string', literalValue: lit.text }
+    }
+    if (ts.isNumericLiteral(lit)) {
+      return { kind: 'primitive', raw, primitive: 'number', literalValue: lit.text }
+    }
+    if (
+      ts.isPrefixUnaryExpression(lit) &&
+      lit.operator === ts.SyntaxKind.MinusToken &&
+      ts.isNumericLiteral(lit.operand)
+    ) {
+      return { kind: 'primitive', raw, primitive: 'number', literalValue: `-${lit.operand.text}` }
+    }
+    if (lit.kind === ts.SyntaxKind.TrueKeyword || lit.kind === ts.SyntaxKind.FalseKeyword) {
+      return {
+        kind: 'primitive',
+        raw,
+        primitive: 'boolean',
+        literalValue: lit.kind === ts.SyntaxKind.TrueKeyword ? 'true' : 'false',
+      }
+    }
+    if (lit.kind === ts.SyntaxKind.NullKeyword) {
+      return { kind: 'primitive', raw, primitive: 'null' }
+    }
+    // BigInt and anything newer: opaque, as before.
+    return { kind: 'unknown', raw }
+  }
+
   // Union types
   if (ts.isUnionTypeNode(typeNode)) {
     return { kind: 'union', raw, unionTypes: typeNode.types.map(recurse) }

package/src/analyzer.ts

@@ -1201,10 +1201,21 @@ function collectSignal(node: ts.VariableDeclaration, ctx: AnalyzerContext): void
   const callExpr = node.initializer as ts.CallExpression
 
   const elements = pattern.elements
+  // Getter-elided form: `const [, setActive] = createSignal(0)`. The first
+  // element is a hole (ts.OmittedExpression), not a BindingElement.
+  // Rejecting it here used to drop the whole declaration from the emitted
+  // init while the setter stayed referenced by handlers — a guaranteed
+  // ReferenceError (adapter-tests scope-gate, #2468 sweep). Accept it,
+  // synthesize an internal getter name for the IR (never referenced by any
+  // expression, so substitution/SSR consumers see an unused entry), and
+  // mark `getterElided` so emit reproduces the source's `[, setter]` shape.
+  const getterElided = elements.length === 2 && ts.isOmittedExpression(elements[0])
   if (
     elements.length < 1 || elements.length > 2 ||
-    !ts.isBindingElement(elements[0]) ||
-    !ts.isIdentifier(elements[0].name)
+    (!getterElided && (
+      !ts.isBindingElement(elements[0]) ||
+      !ts.isIdentifier(elements[0].name)
+    ))
   ) {
     return
   }
@@ -1216,10 +1227,11 @@ function collectSignal(node: ts.VariableDeclaration, ctx: AnalyzerContext): void
     return
   }
 
-  const getter = elements[0].name.text
   const setter = elements.length === 2 && ts.isBindingElement(elements[1]) && ts.isIdentifier(elements[1].name)
     ? elements[1].name.text
     : null
+  if (getterElided && !setter) return
+  const getter = getterElided ? `__bfGet_${setter}` : (elements[0] as ts.BindingElement & { name: ts.Identifier }).name.text
   const initialValue = callExpr.arguments[0] ? ctx.getJS(callExpr.arguments[0]) : ''
   const typedInitialValue = callExpr.arguments[0] ? callExpr.arguments[0].getText(ctx.sourceFile) : undefined
 
@@ -1257,6 +1269,7 @@ function collectSignal(node: ts.VariableDeclaration, ctx: AnalyzerContext): void
   ctx.signals.push({
     getter,
     setter,
+    getterElided: getterElided || undefined,
     initialValue,
     typedInitialValue: typedInitialValue !== initialValue ? typedInitialValue : undefined,
     templateInitialValue,
@@ -1577,9 +1590,26 @@ function collectMemo(node: ts.VariableDeclaration, ctx: AnalyzerContext): void {
   const parsedBlockComplete =
     parsedBlock && blockBody ? parsedBlock.length === blockBody.statements.length : undefined
 
+  // Destructured-arg components only — the memo twin of the signal
+  // `templateInitialValue` rewrite (#2265) a few hundred lines up: a memo
+  // body referencing a bare destructured prop (`createMemo(() => value *
+  // 10)` with `{ value }: { value: number }`) is inlined into the CSR
+  // `template:` arrow by `buildSignalMemoEnv`, and that arrow runs at
+  // module scope — it is not a closure over `initXxx`'s `const value =
+  // _p.value` extraction, so the bare ref must become `_p.value`
+  // (adapter-tests scope-gate, #2468 sweep).
+  let templateComputation: string | undefined
+  if (!ctx.propsObjectName && callExpr.arguments[0]) {
+    const propNames = new Set(ctx.propsParams.map(p => p.name))
+    if (propNames.size > 0) {
+      templateComputation = rewriteBarePropRefs(computation, callExpr.arguments[0], propNames)
+    }
+  }
+
   ctx.memos.push({
     name,
     computation,
+    templateComputation,
     parsedBlock,
     parsedBlockComplete,
     typedComputation: typedComputation !== computation ? typedComputation : undefined,

package/src/index.ts

@@ -90,6 +90,7 @@ export { rewriteImportsForTemplate } from './adapters/template-imports.ts'
 export { emitParsedExpr, groupBinaryOperand, isStringTypedOperand, isStringConcatBinary } from './adapters/parsed-expr-emitter.ts'
 export type { ParsedExprEmitter, HigherOrderMethod, ArrayMethod, SortMethod, LiteralType } from './adapters/parsed-expr-emitter.ts'
 export { collectLoopBoundNames } from './adapters/loop-bound-names.ts'
+export { derivesScopeFromSlot } from './adapters/child-scope.ts'
 export { evaluateSignalInit, tryEvaluateSignalInit, type SignalInitEvalResult } from './signal-init-eval.ts'
 export { evaluateStaticLiteral, isFullyStaticLiteral, resolveStaticLoopSource } from './static-literal.ts'
 export { importsSearchParams, searchParamsLocalNames, envSignalLocalNames, envSignalReaderFor, ENV_SIGNAL_READERS, queryHrefLocalNames, formatDateLocalNames, matchSearchParamsMethodCall } from './adapters/env-signal.ts'

package/src/ir-to-client-js/collect-elements.ts

@@ -328,10 +328,12 @@ export function collectInnerLoops(
         //     `NestedLoop` because event delegation handles them through
         //     the parent's bindings instead.
         const bindings: LoopChildBindings = emptyLoopChildBindings()
+        // Hoisted: one Set per loop, not one per child (Copilot review).
+        const innerPreambleNames = preambleNamesOf(n)
         if (ctx) {
           for (const child of n.children) {
             bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings))
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings))
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames))
             bindings.refs.push(...collectLoopChildRefs(child))
           }
         }
@@ -669,7 +671,7 @@ export function collectElements(
       const childHandlers: string[] = []
       const bindings = projectionInner
         ? emptyLoopChildBindings()
-        : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings)
+        : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings, preambleNamesOf(l))
       if (!projectionInner) {
         for (const child of l.children) {
           childHandlers.push(...collectEventHandlersFromIR(child))
@@ -708,10 +710,12 @@ export function collectElements(
         // Loop-param refs use the raw destructured binding (no loopParams
         // passed), matching the plain-element path's `staticItemTemplate`.
         if (l.isStaticArray && l.children[0]) {
-          // `insideLoop=true` so the component-emit drops the parent's slot
-          // suffix — each iteration owns a distinct scope identified by
-          // `data-key`, mirroring the SSR template's renderChild emit.
-          staticItemTemplate = irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, undefined, undefined, /* insideLoop */ true)
+          // `l.children[0]` is the loop's row-root component — already
+          // tagged `loopItemRoot` in the IR, so `derivesScopeFromSlot`
+          // drops the parent's slot suffix automatically. Each iteration
+          // owns a distinct scope identified by `data-key`, mirroring the
+          // SSR template's renderChild emit.
+          staticItemTemplate = irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, undefined, undefined)
         }
       } else if (l.children[0] && !projectionInner) {
         // Pass loopParams so expressions are wrapped at generation time,
@@ -728,8 +732,8 @@ export function collectElements(
         // accessor wrap so the CSR materialize fallback (#1247) can clone
         // items inside the forEach body without rewriting the template.
         if (l.isStaticArray) {
-          // Plain-element body: leave `insideLoop=false` so any nested
-          // component nodes keep their parent-slot context in the
+          // Plain-element body: nested component nodes are never tagged
+          // `loopItemRoot`, so they keep their parent-slot context in the
           // per-iteration renderChild call. Per #1249, the
           // `outer-nested` static-array-child-init plan addresses
           // children by the (bf-h, bf-m) pair against the enclosing
@@ -1139,7 +1143,7 @@ function collectBranchLoops(
       // which caused reactive reads inside simple loop bodies to silently
       // no-op for existing items.
       const branchBindings = ctx && !projectionInner
-        ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings)
+        ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings, preambleNamesOf(n))
         : emptyLoopChildBindings()
 
       loops.push({
@@ -1296,12 +1300,49 @@ function collectBranchConditionals(
  * resolve child slot ids inside nested loops; the rest of the per-item
  * collectors don't read them but pass them through for symmetry.
  */
+/**
+ * The names a loop's `.map()` callback preamble declares, or `undefined` when
+ * there are none to consider — the input to the attribute classifier's
+ * preamble-local check (#2447 follow-up). `undefined` rather than an empty set
+ * so the classifier's fast path stays a single `!== undefined` for the
+ * overwhelmingly common preamble-free loop.
+ *
+ * A STATIC-ARRAY loop returns `undefined` even when it has a preamble, and
+ * this is load-bearing rather than an optimisation. Its items are emitted
+ * through `static-array-child-init` — a `forEach` over the SSR-rendered
+ * children, with no per-row body and therefore no preamble in scope. Wiring an
+ * attribute there would emit `setAttribute('class', active ? … : …)` against a
+ * free variable: a ReferenceError at init that takes the whole component's
+ * hydration with it, including any nested child. (Caught exactly that way —
+ * the gallery nav shells are static arrays whose rows read
+ * `const active = item.key === currentRoute`, and the badge components mounted
+ * inside them stopped appearing.)
+ *
+ * Nothing is lost by declining: a static array's items are rendered once at
+ * SSR and never recreated from a signal, so there is no same-key update for a
+ * patch to be missing from. The same reasoning gates `markPreambleAttrSlots`
+ * and `preambleRegions` in Phase 1, and the two gates must agree — a slot
+ * granted without wiring, or wiring without a slot, is a silent hole either
+ * way.
+ */
+function preambleNamesOf(loop: IRLoop): ReadonlySet<string> | undefined {
+  if (loop.isStaticArray) return undefined
+  const declared = loop.preamble?.declaredNames
+  return declared && declared.length > 0 ? new Set(declared) : undefined
+}
+
 export function collectLoopChildBindings(
   children: readonly IRNode[],
   ctx: ClientJsContext,
   siblingOffsets: Map<IRLoop, IRNode[]>,
   loopParam: string,
   loopParamBindings: readonly import('../types.ts').LoopParamBinding[] | undefined,
+  /**
+   * Names the loop's `.map()` callback preamble declares, so an attribute
+   * reading one is classified reactive (#2447 follow-up) — see
+   * `collectLoopChildReactiveAttrs`. Omitted for a loop with no preamble.
+   */
+  preambleNames?: ReadonlySet<string>,
 ): LoopChildBindings {
   const bindings = emptyLoopChildBindings()
   for (const child of children) {
@@ -1311,7 +1352,7 @@ export function collectLoopChildBindings(
     // `collectLoopChildConditionals`, which gives each its own insert() +
     // arm-scoped attrs/texts (`LoopChildBranchSummary.reactiveAttrs` /
     // `.reactiveTexts`) — descending into them here too would double-bind.
-    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings, true))
+    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings, true, preambleNames))
     bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings, true))
     bindings.refs.push(...collectLoopChildRefs(child))
     bindings.conditionals.push(...collectLoopChildConditionals(child, ctx, siblingOffsets, loopParam, loopParamBindings))

package/src/ir-to-client-js/control-flow/plan/build-branch-loop.ts

@@ -58,7 +58,7 @@ export function buildBranchLoopPlan(
   const mapPreambleWrapped = loop.preamble
     ? renderPreamble(loop.preamble, {
         transformJs: (t) => wrapLoopParamAsAccessor(t, loop.param, loop.paramBindings),
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true),
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined),
       })
     : ''
   const preambleRegions = buildPreambleRegionPlans(loop.preambleRegions, loop.param, loop.paramBindings)

package/src/ir-to-client-js/control-flow/plan/build-composite-loop.ts

@@ -48,7 +48,7 @@ export function buildTopLevelCompositePlan(elem: TopLevelLoop, profileComponentN
     mapPreambleWrapped: elem.preamble
       ? renderPreamble(elem.preamble, {
           transformJs: wrap,
-          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true),
+          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined),
         })
       : '',
     template: elem.template,
@@ -108,7 +108,7 @@ export function buildBranchCompositePlan(loop: BranchLoop, cv: string, profileCo
     mapPreambleWrapped: loop.preamble
       ? renderPreamble(loop.preamble, {
           transformJs: wrap,
-          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true),
+          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined),
         })
       : '',
     template: loop.template,

package/src/ir-to-client-js/control-flow/plan/build-event-delegation.ts

@@ -44,7 +44,7 @@ export function buildDynamicLoopDelegationPlan(
       // which throws since `t` is a plain object in this scope.
       mapPreamble: elem.preamble
         ? renderPreamble(elem.preamble, {
-            renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true),
+            renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined),
           })
         : null,
       mapPreambleDeclaredNames: elem.preamble?.declaredNames ?? [],
@@ -76,7 +76,7 @@ export function buildBranchLoopDelegationPlan(
       // loopParams spec — leaf refs must stay in plain-object form here.
       mapPreamble: loop.preamble
         ? renderPreamble(loop.preamble, {
-            renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true),
+            renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined),
           })
         : null,
       mapPreambleDeclaredNames: loop.preamble?.declaredNames ?? [],
@@ -109,7 +109,7 @@ export function buildStaticArrayDelegationPlan(
       // loopParams spec — leaf refs must stay in plain-object form here.
       mapPreamble: elem.preamble
         ? renderPreamble(elem.preamble, {
-            renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true),
+            renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined),
           })
         : null,
       mapPreambleDeclaredNames: elem.preamble?.declaredNames ?? [],

package/src/ir-to-client-js/control-flow/plan/build-inner-loop.ts

@@ -243,7 +243,7 @@ function buildReactiveEmit(
       : [{ param: inner.param, bindings: inner.paramBindings }]
     preludeStatements.push(renderPreamble(inner.preamble, {
       transformJs: (t) => wrapInner(wrapOuter(t)),
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, leafLoopParams, undefined, true),
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, leafLoopParams, undefined),
     }))
   }
 
@@ -286,7 +286,7 @@ function buildStaticEmit(inner: NestedLoop, level: DepthLevel, uidSuffix: string
   // of the js segments above).
   if (inner.preamble) {
     preludeStatements.push(renderPreamble(inner.preamble, {
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true),
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined),
     }))
   }
   return {