@barefootjs/jsx 0.28.1 → 0.30.0

package/src/ir-to-client-js/html-template.ts

@@ -12,6 +12,7 @@ import { buildSignalMemoEnv, csrSubstitute, applyPropsRewrite, type CsrEnv } fro
 import type { ClientJsContext } from './types.ts'
 import { BF_PARENT_SCOPE_PLACEHOLDER, BF_SCOPE, escapeHtml } from '@barefootjs/shared'
 import { buildLoopChainExpr } from '../loop-chain.ts'
+import { derivesScopeFromSlot } from '../adapters/child-scope.ts'
 
 /**
  * Protect string literals from regex-based replacements.
@@ -547,12 +548,11 @@ function buildSpreadAttrsMergeCall(args: {
  *    are wrapped with `__bfSlot(EXPR, <branchSlotsVar>)` so the runtime can
  *    splice live `Node` returns into the parsed fragment instead of
  *    stringifying them via the template literal (#1213).
- *  @param insideLoop - When true, component nodes omit their `slotId` from the
- *    `renderChild` call. Each loop iteration produces its own scope (identified
- *    by `data-key`), so the parent-slot suffix would create scopes that don't
- *    match the SSR shape — see #1268 and the matching `insideLoop` guard in
- *    `generateCsrTemplate` (case `'component'`). Set to `true` when generating
- *    the per-iteration `staticItemTemplate` for static loops.
+ *  Component nodes omit their `slotId` from the `renderChild` call exactly
+ *  when `derivesScopeFromSlot()` says so — a loop-item-root component (its
+ *  own scope, identified by `data-key`) never derives from the parent slot;
+ *  a component nested below the row root does (#2444). See
+ *  `IRComponent.loopItemRoot` / `./adapters/child-scope.ts`.
  */
 /**
  * Build the per-item `<!--bf-loop-i:KEY-->` anchor comment for a whole-item
@@ -660,7 +660,7 @@ export function renderFlatMapClientBody(
     rawLeaf: true,
     renderLeaf: (ir) => {
       const key = flatMapLeafKeyExpr(ir)
-      const html = irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, 1, undefined, undefined, true)
+      const html = irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, 1, undefined, undefined)
       return `({ k: ${key ?? 'undefined'}, h: \`${html}\` })`
     },
   })
@@ -691,7 +691,7 @@ export function renderFlatMapProjectionClientBody(
   const params = inner.index ? `(${inner.param}, ${inner.index})` : `(${inner.param})`
   const key = inner.key ? `(${inner.key})` : 'undefined'
   const html = inner.children
-    .map((c) => irToHtmlTemplate(escapeLeafTextExpressions(c), restSpreadNames, 1, undefined, undefined, true))
+    .map((c) => irToHtmlTemplate(escapeLeafTextExpressions(c), restSpreadNames, 1, undefined, undefined))
     .join('')
   return `${chained}.map(${params} => ({ k: ${key}, h: \`${html}\` }))`
 }
@@ -728,8 +728,8 @@ function escapeLeafTextExpressions(ir: IRNode): IRNode {
   }
 }
 
-export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>, branchSlotsVar?: string, insideLoop = false, inHoistedChildren = false): string {
-  const recurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, inHoistedChildren)
+export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>, branchSlotsVar?: string, inHoistedChildren = false): string {
+  const recurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, inHoistedChildren)
   const wrapExpr = (expr: string) => wrapExprWithLoopParams(expr, loopParams)
   const wrapInterpolation = (expr: string): string => branchSlotsVar
     ? `__bfSlot(${expr}, ${branchSlotsVar})`
@@ -781,7 +781,7 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       }
 
       const attrs = attrParts.join(' ')
-      const childrenRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, false)
+      const childrenRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, false)
       const children = dangerouslyHtmlChildren(node.attrs, v => wrapExpr(v.expr)) ?? node.children.map(childrenRecurse).join('')
 
       // Non-void elements must use open+close tags (HTML parsers ignore self-closing on div, span, etc.)
@@ -853,13 +853,17 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       // instead of emitting empty placeholders (#435).
       const propsEntries = node.props
         .filter(p => p.name !== '...' && !p.name.startsWith('...') && p.name !== 'key')
-        .filter(p => !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))
+        // `ref` joins the `on*` handlers here: a function prop cannot run
+        // during module-scope string rendering, and a ref closing over an
+        // init-scope setter would leak it into the template (#2468). The
+        // init path re-applies refs once real DOM exists.
+        .filter(p => p.name !== 'ref' && !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))
         .map(p => {
           // `/* @client */` defers the prop to hydrate via initChild.
           if (p.clientOnly) return null
           switch (p.value.kind) {
             case 'jsx-children': {
-              const hoistedRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, true)
+              const hoistedRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, true)
               const childHtml = p.value.children.map(c => hoistedRecurse(c)).join('')
               return `${quotePropName(p.name)}: \`${childHtml}\``
             }
@@ -872,7 +876,15 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
             case 'expression':
             case 'template':
             case 'spread': {
-              const expr = attrValueToString(p.value) ?? 'undefined'
+              // Template-variant form (`useTemplate`): this props object
+              // lands inside the module-scope registration template, which
+              // is not a closure over init's destructured-prop extractions
+              // — the raw form leaked bare refs like `${className}` into
+              // `renderChild(...)` (#2468). Mirrors the sibling component
+              // emit sites (`irToComponentTemplateWithOpts`,
+              // `generateCsrTemplateWithOpts`), which already pick the
+              // prop-rewritten variant.
+              const expr = attrValueToString(p.value, { useTemplate: true }) ?? 'undefined'
               return `${quotePropName(p.name)}: ${expr}`
             }
           }
@@ -884,11 +896,12 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       const keyProp = node.props.find(p => p.name === 'key')
       const keyArg = keyProp ? `, ${attrValueToString(keyProp.value) ?? 'undefined'}` : ''
       // Pass slotId as suffix so $c() can find the child component by slot
-      // after branch swap. Inside a loop body each iteration owns a
-      // separate scope (identified by `data-key`), so the parent-slot
-      // suffix is dropped to avoid anchoring a deeply-nested child to a
-      // wrong component-wrapper scope (#1268).
-      const slotArg = (!insideLoop && node.slotId) ? `, '${node.slotId}'` : ''
+      // after branch swap. A loop-item-root component owns a separate scope
+      // per iteration (identified by `data-key`), so the parent-slot suffix
+      // is dropped to avoid anchoring it to a wrong component-wrapper scope
+      // (#1268) — a component nested BELOW the row root still derives from
+      // its slot, matching the Hono reference (#2444).
+      const slotArg = derivesScopeFromSlot(node) ? `, '${node.slotId}'` : ''
       return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg || (slotArg ? ', undefined' : '')}${slotArg})}`
     }
 
@@ -897,13 +910,7 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       // Increment loopDepth so inner key attrs become data-key-N
       // Forward loopParams so expressions referencing outer/inner loop params
       // get wrapped as signal accessors (e.g., task.title → task().title).
-      // `insideLoop` is preserved (not forced to `true`): downstream branch /
-      // inner-loop templates depend on the legacy slot-suffix-keeping shape
-      // to find scopes via `findSsrScopeBySlotIn`. The opt-in at the entry
-      // call site is the only place that wants the suffix dropped (#1268
-      // Case 1 — childComponent body materialize); propagating it through
-      // every nested loop regressed form-builder's inner-loop Select wiring.
-      const innerRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop)
+      const innerRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar)
       let childTemplate = node.children.map(innerRecurse).join('')
       // Whole-item conditional loops (#1665): prepend an always-present
       // `<!--bf-loop-i:KEY-->` anchor before each item's (possibly empty)
@@ -938,13 +945,13 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
         // identity is stamped by mapArray via setAttribute — emitting it
         // here was the CSR/SSR data-key asymmetry (unescaped, client-only).
         const body = renderPreamble(node.flatMapCallback, {
-          renderLeaf: (ir) => irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop),
+          renderLeaf: (ir) => irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar),
         })
         mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`
       } else if (node.preamble) {
         // Stage 3 / D4 — render JSX leaves in an arbitrary array-builder
         // preamble (the hydrate-template context uses the bare loop param).
-        const preamble = renderPreamble(node.preamble, { textVariant: 'client', renderLeaf: (ir) => irToHtmlTemplate(ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop) })
+        const preamble = renderPreamble(node.preamble, { textVariant: 'client', renderLeaf: (ir) => irToHtmlTemplate(ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar) })
         mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`
       } else {
         mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`
@@ -1563,7 +1570,6 @@ export interface TemplateOptions {
    * `compute-inlinability` (#1277).
    */
   csrEnv?: CsrEnv
-  insideLoop?: boolean
   loopDepth?: number
   /**
    * Names bound by the ENCLOSING loops' callback params (item / index /
@@ -1799,7 +1805,11 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
       // Use renderChild() to render child component's template at runtime (#435)
       const propsEntries = node.props
         .filter(p => p.name !== '...' && !p.name.startsWith('...') && p.name !== 'key')
-        .filter(p => !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))
+        // `ref` joins the `on*` handlers here: a function prop cannot run
+        // during module-scope string rendering, and a ref closing over an
+        // init-scope setter would leak it into the template (#2468). The
+        // init path re-applies refs once real DOM exists.
+        .filter(p => p.name !== 'ref' && !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))
         .map(p => {
           // `/* @client */` defers the prop to hydrate via initChild.
           if (p.clientOnly) return null
@@ -1990,7 +2000,6 @@ export function generateCsrTemplate(
   node: IRNode,
   inlinableConstants: Map<string, string> | undefined,
   ctx: ClientJsContext,
-  insideLoop?: boolean,
   restSpreadNames?: Set<string>,
   propsObjectName?: string | null,
   unsafeLocalNames?: Set<string>,
@@ -2010,7 +2019,7 @@ export function generateCsrTemplate(
     }
   }
   const effectiveUnsafeLocalNames = mergeCsrNullUnsafe(ctx, unsafeLocalNames)
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1 })
+  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1 })
 }
 
 /**
@@ -2171,6 +2180,7 @@ export function computeDeferredChildSlots(
             // filter set MUST mirror the `propsEntries` filter in the CSR
             // `component` emit below so the deferral decision matches output.
             if (p.name === '...' || p.name.startsWith('...') || p.name === 'key') return false
+            if (p.name === 'ref') return false
             if (p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()) return false
             if (p.clientOnly) return false
             return propResolvesUnsafe(p, env, unsafeLocalNames)
@@ -2204,7 +2214,7 @@ export function computeDeferredChildSlots(
 }
 
 function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): string {
-  const { restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, loopDepth = 0 } = opts
+  const { restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames, loopDepth = 0 } = opts
   const env: CsrEnv = csrEnv ?? { substitutions: new Map(), propsObjectName: propsObjectName ?? null }
   const transformExpr = (expr: string, templateExpr?: string): string => {
     // Single AST substitution pass: replaces signal getter calls
@@ -2241,12 +2251,10 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
   }
 
   // `recurse` preserves `inHoistedChildren` for structural pass-through
-  // (fragment / conditional); `childrenRecurse` and `recurseInLoop`
-  // clear it — a new element root or loop iteration starts a fresh
-  // scope. (#1320)
+  // (fragment / conditional); `childrenRecurse` clears it — a new element
+  // root starts a fresh scope. (#1320)
   const recurse = (n: IRNode): string => generateCsrTemplateWithOpts(n, opts)
   const childrenRecurse = (n: IRNode): string => generateCsrTemplateWithOpts(n, { ...opts, inHoistedChildren: false })
-  const recurseInLoop = (n: IRNode): string => generateCsrTemplateWithOpts(n, { ...opts, insideLoop: true, loopDepth: loopDepth + 1, inHoistedChildren: false })
 
   switch (node.type) {
     case 'element': {
@@ -2399,7 +2407,11 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
 
       const propsEntries = node.props
         .filter(p => p.name !== '...' && !p.name.startsWith('...') && p.name !== 'key')
-        .filter(p => !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))
+        // `ref` joins the `on*` handlers here: a function prop cannot run
+        // during module-scope string rendering, and a ref closing over an
+        // init-scope setter would leak it into the template (#2468). The
+        // init path re-applies refs once real DOM exists.
+        .filter(p => p.name !== 'ref' && !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))
         .map(p => {
           // `/* @client */` defers the prop to hydrate. Drop from the
           // SSR `renderChild` props — `initChild`'s `propsExpr` getter
@@ -2441,7 +2453,7 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
       const propsExpr = propsEntries.length > 0 ? `{${propsEntries.join(', ')}}` : '{}'
       const keyProp = node.props.find(p => p.name === 'key')
       const keyArg = keyProp ? `, ${transformKeyValue(keyProp.value, transformExpr)}` : ''
-      const slotArg = (!insideLoop && node.slotId) ? `, '${node.slotId}'` : ''
+      const slotArg = derivesScopeFromSlot(node) ? `, '${node.slotId}'` : ''
       return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg || (slotArg ? ', undefined' : '')}${slotArg})}`
     }
 
@@ -2469,7 +2481,6 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
       }
       const recurseInLoopBody = (n: IRNode): string => generateCsrTemplateWithOpts(n, {
         ...opts,
-        insideLoop: true,
         loopDepth: loopDepth + 1,
         inHoistedChildren: false,
         loopBoundNames: boundHere,

package/src/ir-to-client-js/imports.ts

@@ -11,6 +11,11 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   'createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount',
   'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect',
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild',
+  // Connects a template-clone loop row before the body's tail runs, so a child
+  // that inits inside it resolves context against real ancestors rather than
+  // falling through to the global store. The clone-root counterpart of the
+  // mount point `createComponent` consumes for component-root rows.
+  'mountRowRoot',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
   'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode',

package/src/ir-to-client-js/index.ts

@@ -267,7 +267,7 @@ function generateTemplateOnlyMount(ir: ComponentIR, ctx: ClientJsContext): strin
   if (!templateHtml) {
     const csrInlinableConstants = csrInlinableConstantsFromCtx(ctx)
     templateHtml = generateCsrTemplate(
-      ir.root, csrInlinableConstants, ctx, undefined, restSpreadNames, ctx.propsObjectName, unsafeLocalNames
+      ir.root, csrInlinableConstants, ctx, restSpreadNames, ctx.propsObjectName, unsafeLocalNames
     )
   }
 

package/src/ir-to-client-js/plan/build-declaration-emit.ts

@@ -95,6 +95,7 @@ function buildSignalPlan(
         kind: 'signal',
         getter: signal.getter,
         setter: signal.setter,
+        getterElided: signal.getterElided,
         initialValueExpr: '',
         controlledEffect: null,
         initializerOverride: `${factory}()`,
@@ -109,6 +110,7 @@ function buildSignalPlan(
     kind: 'signal',
     getter: signal.getter,
     setter: signal.setter,
+    getterElided: signal.getterElided,
     initialValueExpr: resolveSignalInitialValue(signal, ctx, lookups),
     controlledEffect,
     branchCondition: signal.branchCondition,

package/src/ir-to-client-js/plan/build-static-array-child-init.ts

@@ -30,7 +30,7 @@ import { irChildrenToJsExpr, renderPreamble, irToHtmlTemplate } from '../html-te
 function staticPreludeStatements(preamble: MapCallbackPreamble | undefined): string[] {
   return preamble
     ? [renderPreamble(preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true),
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined),
       })]
     : []
 }

package/src/ir-to-client-js/plan/declaration-emit.ts

@@ -27,6 +27,12 @@ export interface SignalEmitPlan {
   getter: string
   /** Setter identifier — `null` for read-only signals. */
   setter: string | null
+  /**
+   * Source used the getter-elided form (`const [, setX] = ...`). `getter`
+   * holds the synthesized internal name (see `SignalInfo.getterElided`);
+   * stringify reproduces the source's hole instead of emitting it.
+   */
+  getterElided?: boolean
   /**
    * Fully-resolved initial value expression. Prop rewrites
    * (`<propsName>.X` → `_p.X`) and `?? <default>` insertions for controlled

package/src/ir-to-client-js/reactivity.ts

@@ -16,6 +16,7 @@ import type {
 } from './types.ts'
 import { attrValueToString, freeIdsFromRefs, tokenContainsIdent } from './utils.ts'
 import { expandConstantForReactivity } from './prop-handling.ts'
+import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
 
 /**
@@ -621,12 +622,20 @@ export function collectLoopChildReactiveTexts(
  * same semantics. Pass true only when the caller also separately collects
  * nested reactive conditionals and gives each its own `insert()`.
  */
+/** Does any name in `names` appear in `set`? Iterates rather than
+ *  spreading — this runs per attribute (Copilot review). */
+function anyNameIn(names: Iterable<string>, set: ReadonlySet<string>): boolean {
+  for (const n of names) if (set.has(n)) return true
+  return false
+}
+
 export function collectLoopChildReactiveAttrs(
   node: IRNode,
   ctx: ClientJsContext,
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
   stopAtReactiveConditionals = false,
+  preambleNames?: ReadonlySet<string>,
 ): LoopChildReactiveAttr[] {
   const attrs: LoopChildReactiveAttr[] = []
   traverseElements(node, (el) => {
@@ -664,8 +673,23 @@ export function collectLoopChildReactiveAttrs(
         // / `hasFunctionCalls` fallback so the loop-child path matches the
         // top-level one — a harmless over-wrap at worst (an effect that
         // subscribes to nothing runs once).
+        // A `.map()` callback preamble local (#2447 follow-up). The
+        // classifier cannot see it: `const cls = row.done ? …` makes `cls`
+        // neither a signal read nor a loop-param read, so `class={cls}`
+        // scored 'none' and the value froze at its row-construction value —
+        // a same-key item update rewrote the sibling `{row.label}` text and
+        // left the class stale. Its reactivity is the PREAMBLE's: whatever
+        // the initializer read. Flag it and let the emitter re-run the
+        // preamble ahead of the write (`stringifyReactiveEffects`), which is
+        // the child-position `preambleRegions` treatment (#2389) applied to
+        // the attribute position.
+        const readsPreamble =
+          preambleNames !== undefined &&
+          preambleNames.size > 0 &&
+          anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames)
         const reactive =
           classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== 'none'
+          || readsPreamble
           || attr.callsReactiveGetters
           || attr.hasFunctionCalls
         if (!attr.clientOnly && !reactive) continue
@@ -675,6 +699,7 @@ export function collectLoopChildReactiveAttrs(
           expression: expanded.expr,
           ...pickAttrMetaFromIR(attr),
           ...(expanded.freeIds !== undefined && { freeIdentifiers: expanded.freeIds }),
+          ...(readsPreamble && { readsPreamble: true }),
         })
       }
     }

package/src/ir-to-client-js/stringify/declaration-emit.ts

@@ -65,12 +65,17 @@ function bfIdArg(bfId: string | undefined): string {
 }
 
 function emitSignal(lines: string[], plan: SignalEmitPlan): void {
+  // Getter-elided source form (`const [, setX] = createSignal(...)`):
+  // reproduce the hole instead of introducing the synthesized internal
+  // getter name into output (#2468 sweep — dropping the declaration
+  // entirely left the setter as a guaranteed ReferenceError).
+  const getterSlot = plan.getterElided ? '' : plan.getter
   // Env signal (#2057): emit its own factory call verbatim (`createSearchParams()`)
   // — a stable request-scoped view, so no baked initial value, profile id,
   // controlled effect, or branch condition applies.
   if (plan.initializerOverride) {
     if (plan.setter) {
-      lines.push(`  const [${plan.getter}, ${plan.setter}] = ${plan.initializerOverride}`)
+      lines.push(`  const [${getterSlot}, ${plan.setter}] = ${plan.initializerOverride}`)
     } else {
       lines.push(`  const [${plan.getter}] = ${plan.initializerOverride}`)
     }
@@ -85,9 +90,9 @@ function emitSignal(lines: string[], plan: SignalEmitPlan): void {
     // runs when the branch is taken. Sibling branches with different
     // signals coexist because each gets its own `let` + guarded assign.
     if (plan.setter) {
-      lines.push(`  let ${plan.getter}, ${plan.setter}`)
+      lines.push(plan.getterElided ? `  let ${plan.setter}` : `  let ${plan.getter}, ${plan.setter}`)
       lines.push(`  if (${plan.branchCondition}) {`)
-      lines.push(`    ;[${plan.getter}, ${plan.setter}] = createSignal(${plan.initialValueExpr}${id})`)
+      lines.push(`    ;[${getterSlot}, ${plan.setter}] = createSignal(${plan.initialValueExpr}${id})`)
       lines.push(`  }`)
     } else {
       lines.push(`  let ${plan.getter}`)
@@ -101,7 +106,7 @@ function emitSignal(lines: string[], plan: SignalEmitPlan): void {
     return
   }
   if (plan.setter) {
-    lines.push(`  const [${plan.getter}, ${plan.setter}] = createSignal(${plan.initialValueExpr}${id})`)
+    lines.push(`  const [${getterSlot}, ${plan.setter}] = createSignal(${plan.initialValueExpr}${id})`)
   } else {
     lines.push(`  const [${plan.getter}] = createSignal(${plan.initialValueExpr}${id})`)
   }

package/src/ir-to-client-js/types.ts

@@ -494,6 +494,18 @@ export interface LoopChildReactiveAttr extends AttrMeta {
   childSlotId: string // bf slot ID of the element with reactive attr
   attrName: string // 'className', 'disabled', etc.
   expression: string // Expression that reads signals
+  /**
+   * The expression reads a `.map()` callback preamble local (#2447
+   * follow-up), so it is reactive by way of whatever the preamble read — the
+   * classifier cannot see through the declaration, and the local is not in
+   * scope in the update body until the preamble is re-run there.
+   *
+   * Two consequences, both handled by the emitter rather than here: the row
+   * effect runs `mapPreambleWrapped` BEFORE the attr writes, and the lazy row
+   * graph refuses the loop (`lazyRowEligibility`'s `readsPreamble` gate), so
+   * such a row keeps the eager per-row effect.
+   */
+  readsPreamble?: boolean
 }
 
 export interface LoopChildReactiveText {