@barefootjs/jsx 0.31.3 → 0.31.5

package/src/__tests__/rewrite-dynamic-imports.test.ts

@@ -0,0 +1,98 @@
+/**
+ * Unit coverage for `rewriteDynamicImportsInSource` (#2588) — the source-text
+ * counterpart to `rewriteImportsForTemplate`.
+ *
+ * The e2e half lives in `packages/vite/src/__tests__/dynamic-import-rewrite.test.ts`
+ * (real `vite build`, real emitted template). This half pins the cases that
+ * an e2e fixture can't isolate: which AST nodes count, and the false matches
+ * a regex-based implementation would produce. Those false-match cases are
+ * the entire reason this parses (CLAUDE.md: never parse JS/TS with regex) —
+ * without them, a regex rewrite would pass every other assertion here.
+ */
+import { describe, test, expect } from 'bun:test'
+import { rewriteDynamicImportsInSource } from '../adapters/template-imports.ts'
+
+/** Stand-in for `buildRelativeImportRewriter`: shifts one directory deeper. */
+const deeper = (spec: string): string => `../${spec}`
+
+describe('rewriteDynamicImportsInSource', () => {
+  test('rewrites a dynamic import call', () => {
+    expect(rewriteDynamicImportsInSource(`const m = import('./heavy')`, deeper))
+      .toBe(`const m = import('.././heavy')`)
+  })
+
+  test('rewrites an import type node (`typeof import(...)`)', () => {
+    expect(rewriteDynamicImportsInSource(`let p: Promise<typeof import('../lib/x')> | null = null`, deeper))
+      .toBe(`let p: Promise<typeof import('../../lib/x')> | null = null`)
+  })
+
+  test('rewrites a qualified import type (`import(...).Foo`)', () => {
+    expect(rewriteDynamicImportsInSource(`let v: import('../lib/x').Foo`, deeper))
+      .toBe(`let v: import('../../lib/x').Foo`)
+  })
+
+  test('rewrites every occurrence, keeping earlier spans intact', () => {
+    const out = rewriteDynamicImportsInSource(
+      `const a = import('./one'); const b = import('./two'); const c = import('./three')`,
+      deeper,
+    )
+    expect(out).toBe(
+      `const a = import('.././one'); const b = import('.././two'); const c = import('.././three')`,
+    )
+  })
+
+  test('leaves bare specifiers alone', () => {
+    const src = `const m = import('hono/jsx')`
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+
+  test('leaves a non-literal specifier alone', () => {
+    const src = `const m = import(chunkPath)`
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+
+  test('leaves static import statements to rewriteImportsForTemplate', () => {
+    // The adapter rewrites those from the parsed `templateImports` list; if
+    // this touched them too they would be rewritten twice.
+    const src = `import { x } from './sibling'`
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+
+  test('does not touch `import(` inside a string literal', () => {
+    const src = `const code = "const m = import('./heavy')"`
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+
+  test('does not touch `import(` inside a template literal', () => {
+    const src = 'const code = `await import(\'./heavy\')`'
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+
+  test('does not touch `import(` inside a comment', () => {
+    const src = `// const m = import('./heavy')\nconst n = 1`
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+
+  test('rewrites inside a TSX component body without disturbing the JSX', () => {
+    const src = [
+      `export function Lazy() {`,
+      `  const onClick = async () => { await import('./heavy') }`,
+      `  return <button onClick={onClick} data-x="import('./nope')">go</button>`,
+      `}`,
+    ].join('\n')
+    const out = rewriteDynamicImportsInSource(src, deeper)
+    expect(out).toContain(`await import('.././heavy')`)
+    // The attribute string is data, not a module reference.
+    expect(out).toContain(`data-x="import('./nope')"`)
+  })
+
+  test('returns the input unchanged when the rewriter is a no-op', () => {
+    const src = `const m = import('./heavy')`
+    expect(rewriteDynamicImportsInSource(src, (s) => s)).toBe(src)
+  })
+
+  test('returns the input unchanged when there is nothing to rewrite', () => {
+    const src = `export const answer = 42`
+    expect(rewriteDynamicImportsInSource(src, deeper)).toBe(src)
+  })
+})

package/src/__tests__/signal-setter-updater-type.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Regression test for #2573 (chart TS7006 family): the SSR no-op signal
+ * setter stub was declared as `(..._args: any[]) => {}`. Calling it with
+ * an updater function — `setBars((prev) => [...prev, bar])` — puts that
+ * arrow in a rest-`any[]` argument position, not a function-typed one, so
+ * TypeScript has no contextual signature to infer the arrow's own
+ * parameter from and flags it implicit-any (TS7006). Runtime output
+ * (client JS) was always correct; this is a type-level emission defect in
+ * the SSR template only.
+ *
+ * The real `createSignal<T>` setter accepts `T | ((prev: T) => T)`
+ * (`packages/client/src/reactive.ts`'s `Signal<T>`). The stub now mirrors
+ * that signature whenever the signal's type is known (`SignalInfo.type`,
+ * the same field `needsTypeAssertion` already reads for the getter), so
+ * the updater arrow's parameter infers from the real element type.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-adapter'
+
+describe('signal setter updater-function typing in emitted templates (#2573)', () => {
+  test('a typed signal gets an updater-aware setter stub', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Bar { id: string; height: number }
+
+      export function Chart() {
+        const [bars, setBars] = createSignal<Bar[]>([])
+
+        // Called directly from the returned JSX (not from an onXxx handler
+        // prop, which SSR stubs to a no-op) so it — and the setter call
+        // inside it — stays reachable into the emitted template.
+        const addBar = (bar: Bar) => {
+          setBars((prev) => [...prev, bar])
+          return bars().length
+        }
+
+        return <div>{addBar({ id: 'a', height: 1 })}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Chart.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain(
+      'const setBars: (valueOrFn: Bar[] | ((prev: Bar[]) => Bar[])) => void = () => {}',
+    )
+  })
+
+  test('a signal with no resolvable type keeps the untyped rest-args stub', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Widget(props: { initial: unknown }) {
+        const [value, setValue] = createSignal(props.initial)
+
+        const reset = () => {
+          setValue(props.initial)
+          return value()
+        }
+
+        return <div>{String(reset())}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Widget.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain('const setValue = (..._args: any[]) => {}')
+  })
+})

package/src/adapters/jsx-adapter.ts

@@ -17,8 +17,9 @@ import { BF_SCOPE, BF_SLOT, BF_COND } from '@barefootjs/shared'
 import { BaseAdapter } from './interface.ts'
 import type { CallbackBodyAcceptor } from './interface.ts'
 import { ENV_SIGNAL_CLIENT_FACTORY } from './env-signal.ts'
-import { formatParamWithType, findReachableNames } from '../module-exports.ts'
+import { formatParamWithType, closeOverWritersOfMutableBindings } from '../module-exports.ts'
 import { extractFreeIdentifiersFromText } from '../ir-to-client-js/csr-substitute.ts'
+import { identifierPattern } from '../identifier-pattern.ts'
 
 export interface JsxAdapterConfig {
   /** Use typed versions (typedInitialValue, etc.) for type-safe .tsx output */
@@ -112,7 +113,15 @@ export abstract class JsxAdapter extends BaseAdapter {
     ]
 
     // Find reachable declarations via transitive dependency analysis
-    const reachable = findReachableNames(primaryRefText, declarations)
+    const reachable = closeOverWritersOfMutableBindings(
+      primaryRefText,
+      declarations,
+      new Set(
+        ir.metadata.localConstants
+          .filter(c => (c.declarationKind ?? 'const') !== 'const')
+          .map(c => c.name),
+      ),
+    )
 
     // Also check which signal setters are referenced
     const reachableBodies = [...reachable].map(name => {
@@ -165,9 +174,27 @@ export abstract class JsxAdapter extends BaseAdapter {
 
       // Create a no-op setter for SSR — omit entirely if not referenced anywhere
       if (signal.setter) {
-        const setterUsed = new RegExp(`\\b${signal.setter}\\b`).test(setterRefText)
+        const setterUsed = identifierPattern(signal.setter).test(setterRefText)
         if (setterUsed) {
-          lines.push(`  const ${signal.setter} = (..._args: any[]) => {}`)
+          // The real `createSignal<T>` setter accepts `T | ((prev: T) =>
+          // T)` (`packages/client/src/reactive.ts`'s `Signal<T>`). The
+          // untyped `(..._args: any[]) => {}` stub gave every `setX((prev)
+          // => ...)` updater-function call site an `any[]`-typed argument
+          // position — not a function-typed one — so the arrow's own
+          // `prev` parameter had no contextual type to infer from and
+          // `tsc` flagged it implicit-any (TS7006, #2573 chart family).
+          // Mirror the real setter's signature whenever the signal's type
+          // is known, so updater-function callers keep their inference;
+          // fall back to the untyped stub only when it isn't (matches
+          // `needsTypeAssertion`'s `'unknown'` guard just above).
+          const setterType = preserveTypes && signal.type.kind !== 'unknown'
+            ? `(valueOrFn: ${signal.type.raw} | ((prev: ${signal.type.raw}) => ${signal.type.raw})) => void`
+            : null
+          lines.push(
+            setterType
+              ? `  const ${signal.setter}: ${setterType} = () => {}`
+              : `  const ${signal.setter} = (..._args: any[]) => {}`,
+          )
         }
       }
     }

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

@@ -16,6 +16,24 @@
  * degrades to the ALREADY-accepted residual (`+` falls back to numeric,
  * same as before #2212 for an unresolvable operand) rather than ever
  * producing silently-wrong output.
+ *
+ * #2482 (BindingScope) does NOT replace this: it answers "is NAME bound
+ * AT THIS POSITION", a live, position-accurate query built by walking
+ * INTO scopes during a render-time (or render-shaped) tree walk. This
+ * function answers a deliberately different, coarser question —
+ * "is NAME EVER a loop-bound name ANYWHERE in the component" — a single
+ * whole-component prepass run once at `generate()` entry, before any
+ * loop scope exists to thread. The two are complementary, not
+ * duplicative: swapping this for `BindingScope` would require re-deriving
+ * a position-accurate answer at every string-typed-operand call site,
+ * which is exactly the coarse-but-safe trade-off this function exists to
+ * avoid. Stays outside the `binding-scope-ratchet.test.ts` ledger for an
+ * incidental reason too — a lowercase-`l`-led spelling of this file's own
+ * export once lived as a per-adapter ref-counted-map field name (fully
+ * migrated away in an earlier #2482 stage) that the ledger's scan tracked;
+ * this function's own `collectLoopBoundNames` name is capitalized
+ * differently (a capital `L`) and so was never inside that scan's reach in
+ * the first place.
  */
 
 import type { ComponentIR, IRNode } from '../types.ts'

package/src/adapters/template-imports.ts

@@ -16,6 +16,7 @@
  * Adapters are responsible for calling this themselves before emitting any
  * import block. The compiler hands them `metadata.imports` unchanged.
  */
+import ts from 'typescript'
 import type { ImportInfo, ImportSpecifier } from '../types.ts'
 
 const CLIENT_PACKAGE_SOURCES = new Set([
@@ -77,3 +78,95 @@ export function rewriteImportsForTemplate(
 function specKey(s: ImportSpecifier): string {
   return `${s.isDefault ? 'd' : ''}${s.isNamespace ? 'n' : ''}:${s.name}:${s.alias ?? ''}`
 }
+
+/**
+ * Re-anchor relative specifiers carried inside emitted SOURCE TEXT — the
+ * counterpart to `rewriteImportsForTemplate`, which only sees the parsed
+ * static import list (`metadata.templateImports`).
+ *
+ * Declaration bodies re-emitted verbatim into a template
+ * (`generateModuleScopeDeclarations`' consts/functions, a component body's
+ * local handlers) can carry their own module references that never appear
+ * in that list:
+ *
+ * - `import('./x')` — a dynamic import expression
+ * - `typeof import('./x')` — an import TYPE node
+ *
+ * Those specifiers are written relative to the SOURCE file, so they break
+ * once the template is emitted to a directory at a different depth — the
+ * same depth shift `rewriteImportsForTemplate` already fixes for static
+ * imports (#1453, #2588).
+ *
+ * Only literal relative paths beginning with `.` are rewritten; bare
+ * specifiers pass through, matching `remap`'s guard above. A non-literal
+ * argument (`import(someVar)`) is left alone — there is no specifier to
+ * re-anchor, and guessing would be worse than leaving the source as-is.
+ *
+ * Parsed with the TS AST and applied by span splicing rather than by
+ * matching text: a regex would false-match `import(` inside a string or a
+ * comment, which is exactly the class of bug the repo-wide "never parse JS
+ * with regex" rule exists to prevent. Splices are applied back-to-front so
+ * earlier spans keep their offsets.
+ */
+export function rewriteDynamicImportsInSource(
+  sourceText: string,
+  rewriteRelative: (importPath: string) => string,
+): string {
+  // Cheap pre-check: skip the parse entirely for the overwhelmingly common
+  // case of text with no dynamic import at all. Substring presence is not
+  // used to LOCATE anything — the AST still does that — so a false positive
+  // here costs one wasted parse and a false negative is impossible.
+  if (!sourceText.includes('import')) return sourceText
+
+  const sf = ts.createSourceFile(
+    'bf-template-fragment.tsx',
+    sourceText,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ false,
+    ts.ScriptKind.TSX,
+  )
+
+  const edits: Array<{ start: number, end: number, text: string }> = []
+
+  const visit = (node: ts.Node): void => {
+    // `import('./x')` — the argument is the first (and only) call argument.
+    if (
+      ts.isCallExpression(node) &&
+      node.expression.kind === ts.SyntaxKind.ImportKeyword &&
+      node.arguments.length > 0 &&
+      ts.isStringLiteralLike(node.arguments[0])
+    ) {
+      collect(node.arguments[0] as ts.StringLiteralLike)
+    }
+    // `typeof import('./x')` / `import('./x').Foo` — a TYPE-position node
+    // whose argument is a literal type wrapping the string.
+    if (ts.isImportTypeNode(node) && ts.isLiteralTypeNode(node.argument)) {
+      const literal = node.argument.literal
+      if (ts.isStringLiteralLike(literal)) collect(literal)
+    }
+    ts.forEachChild(node, visit)
+  }
+
+  const collect = (literal: ts.StringLiteralLike): void => {
+    const specifier = literal.text
+    if (!specifier.startsWith('.')) return
+    const next = rewriteRelative(specifier)
+    if (next === specifier) return
+    edits.push({
+      start: literal.getStart(sf),
+      end: literal.getEnd(),
+      // Re-quote rather than reusing the original delimiters: a rewritten
+      // POSIX-relative path never contains a quote to escape.
+      text: `'${next}'`,
+    })
+  }
+
+  ts.forEachChild(sf, visit)
+  if (edits.length === 0) return sourceText
+
+  let out = sourceText
+  for (const edit of edits.sort((a, b) => b.start - a.start)) {
+    out = out.slice(0, edit.start) + edit.text + out.slice(edit.end)
+  }
+  return out
+}

package/src/adapters/test-adapter.ts

@@ -164,7 +164,10 @@ export class TestAdapter extends JsxAdapter {
     // Module-export keyword belongs to the adapter: it knows the target language
     // and whether the source declared the component as exported.
     const exportPrefix = ir.metadata.isExported === false ? '' : 'export '
-    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
+    // Carry the source component's own generic type parameters, if any
+    // (mirrors `HonoAdapter` — see `IRMetadata.typeParameters`'s docstring).
+    const typeParameters = ir.metadata.typeParameters ?? ''
+    lines.push(`${exportPrefix}function ${name}${typeParameters}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
 
     // Generate scope ID
     if (hasClientInteractivity) {

package/src/augment-inherited-props.ts

@@ -464,14 +464,26 @@ export function collectModuleStringConsts(
  * compile-time lookup (the icon registry's `strokePaths['chevron-down']`,
  * pagination's `variantClasses.ghost`; #1896 / #1897). Returns the
  * looked-up scalar, or `null` for any other shape so callers fall back
- * to their generic lowering. Shared by all three SSR template adapters;
+ * to their generic lowering. Shared by all seven template-string adapters;
  * the prop-KEYED variant of the pattern lives in `parseRecordIndexAccess`.
+ *
+ * `isShadowed` is REQUIRED (#2482 Stage 2) rather than left to caller
+ * discipline: an enclosing loop callback's own param/index/destructure/
+ * preamble binding of the same name as `objectName` (`.map((cfg) =>
+ * <li>{cfg.x}</li>)` shadowing a module `const cfg = {…}`) must resolve to
+ * the ROW value, not the outer const's member — every call site used to
+ * check this itself, against its own ad-hoc per-adapter shadow-name
+ * bookkeeping, with no static guarantee a new caller wouldn't forget it.
+ * Pass `scope.isBound` (or `scope.asShadowPredicate()`) from the caller's
+ * threaded `BindingScope`.
  */
 export function lookupStaticRecordLiteral(
   objectName: string,
   key: string,
   constants: IRMetadata['localConstants'] | undefined,
+  isShadowed: (name: string) => boolean,
 ): { kind: 'string' | 'number'; text: string } | null {
+  if (isShadowed(objectName)) return null
   const constInfo = (constants ?? []).find(c => c.name === objectName && c.isModule)
   if (constInfo?.value === undefined) return null
   const sf = ts.createSourceFile(

package/src/compiler.ts

@@ -624,6 +624,23 @@ function compileMultipleComponents(
 // Helpers
 // =============================================================================
 
+/**
+ * Verbatim text of the component function's own generic type parameter
+ * list (`<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase
+ * = EdgeBase>`), or `null` when the component isn't generic. Source text
+ * per parameter (`node.getText(sourceFile)`), not a re-printed AST, so
+ * constraints/defaults/comments round-trip exactly like `ConstantInfo.
+ * typeAnnotation` does for `let` (#2589) — see `IRMetadata.typeParameters`.
+ */
+function componentTypeParametersText(
+  componentNode: ts.FunctionDeclaration | ts.ArrowFunction | null,
+  sourceFile: ts.SourceFile,
+): string | null {
+  const typeParameters = componentNode?.typeParameters
+  if (!typeParameters || typeParameters.length === 0) return null
+  return `<${typeParameters.map(p => p.getText(sourceFile)).join(', ')}>`
+}
+
 export function buildMetadata(
   ctx: ReturnType<typeof analyzeComponent>,
 ): IRMetadata {
@@ -634,6 +651,7 @@ export function buildMetadata(
     isClientComponent: ctx.hasUseClientDirective,
     typeDefinitions: ctx.typeDefinitions,
     propsType: ctx.propsType,
+    typeParameters: componentTypeParametersText(ctx.componentNode, ctx.sourceFile),
     propsParams: ctx.propsParams,
     propsObjectName: ctx.propsObjectName,
     restPropsName: ctx.restPropsName,

package/src/debug.ts

@@ -29,6 +29,8 @@ import { analyzeClientNeeds } from './ir-to-client-js/index.ts'
 import type { WrapReason } from './ir-to-client-js/reactivity.ts'
 import { decideWrapFromAstFlags } from './ir-to-client-js/reactivity.ts'
 import { tokenContainsIdent } from './ir-to-client-js/utils.ts'
+import { identifierCallPattern } from './identifier-pattern.ts'
+import { BindingScope } from './scope/binding-scope.ts'
 
 // =============================================================================
 // Types
@@ -359,7 +361,7 @@ export function buildGraphFromIR(ir: ComponentIR): ComponentGraph {
 
   // Collect DOM bindings from IR tree
   const domBindings: DomBinding[] = []
-  collectDomBindings(ir.root, domBindings, signalGetters, memoNames, undefined, new Set(), exprReadsProp)
+  collectDomBindings(ir.root, domBindings, signalGetters, memoNames, undefined, BindingScope.EMPTY, exprReadsProp)
 
   // Build consumer lists for signals
   const signalConsumers = new Map<string, string[]>()
@@ -1675,30 +1677,41 @@ function collectDomBindings(
   signalGetters: Set<string>,
   memoNames: Set<string>,
   parentTag?: string,
-  // Loop-param names in scope (#1690, #1795 Phase 2). Inside a `map(it => …)`
+  // Loop-param names in scope (#1690, #1795 Phase 2; threaded via the shared
+  // `BindingScope` service since #2482 Stage 4). Inside a `map(it => …)`
   // body the emitter rewrites every `it.x` read into a reactive accessor and
   // wraps the binding in `createEffect`, yet `it` is neither a signal nor a
   // memo — so without this context loop-child text / attribute bindings are
   // invisible to the graph. When a binding expression references one of these
   // names it is treated as reactive (matching the emitter's gate), giving the
   // profiler a `domBinding` (slotId + loc) to resolve `<Comp>#binding:<slotId>`.
-  loopParams: Set<string> = new Set(),
+  // This is the REACTIVITY / SLOT-ID CLASSIFIER consumer class (see
+  // `BindingScope.valueBoundNames`'s docstring) — reads `valueBoundNames()`,
+  // not `boundNames()`.
+  scope: BindingScope = BindingScope.EMPTY,
   // Predicate: does an attribute expression read a component prop? Mirrors the
   // emitter's `needsEffectWrapper` prop detection so a prop-driven attribute
   // (wrapped in `createEffect` at codegen, hence emitting `#binding:<slot>`) is
   // tracked here too — otherwise its profiler id resolves to `(unresolved)`.
   readsProp: (expr: string, freeIds?: ReadonlySet<string>) => boolean = () => false,
 ): void {
+  const boundNames = scope.valueBoundNames()
   // Does a loop-child binding read a loop param (or index)? Use the analyzer's
   // lexer-resolved metadata, NOT a raw-string regex — so a param name that only
   // appears inside a string literal (index `i` vs `'i'`) is not mistaken for a
   // reactive read. Text expressions carry `origin.freeRefs` (a `render-item`
   // kind == map-callback param); attributes carry `freeIdentifiers` (bare
   // identifier set). This matches the emitter's actual loop-param gate.
+  // Set-intersection test without spreading into an array — these run per
+  // node in the graph walk, so avoid the per-call allocation.
+  const setSomeIn = (names: ReadonlySet<string>, other: ReadonlySet<string>): boolean => {
+    for (const n of names) if (other.has(n)) return true
+    return false
+  }
   const exprReadsLoopParam = (n: IRExpression): boolean =>
-    loopParams.size > 0 && (n.origin?.freeRefs?.some(r => loopParams.has(r.name)) ?? false)
+    boundNames.size > 0 && (n.origin?.freeRefs?.some(r => boundNames.has(r.name)) ?? false)
   const attrReadsLoopParam = (free: ReadonlySet<string> | undefined): boolean =>
-    loopParams.size > 0 && free !== undefined && [...loopParams].some(p => free.has(p))
+    boundNames.size > 0 && free !== undefined && setSomeIn(boundNames, free)
   switch (node.type) {
     case 'element': {
       // Dynamic attribute bindings (style, class, aria-*, data-*, etc.)
@@ -1712,7 +1725,7 @@ function collectDomBindings(
         // `key` is consumed by the loop's keyFn, never emitted as an attribute
         // effect — skip it inside loops so a `key={it.id}` read isn't mistaken
         // for a reactive binding (matches `collectLoopChildBindings`).
-        if (attr.name === 'key' && loopParams.size > 0) continue
+        if (attr.name === 'key' && boundNames.size > 0) continue
         const expr = attrValueToString(attr.value)
         if (!expr) continue
         const deps = extractReactiveDeps(expr, signalGetters, memoNames)
@@ -1755,7 +1768,7 @@ function collectDomBindings(
       }
       // Recurse — pass element tag as parent context for text bindings
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag, loopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag, scope, readsProp)
       }
       break
     }
@@ -1793,7 +1806,7 @@ function collectDomBindings(
       // (the emitter wraps its `insert()` in a per-item effect) even though the
       // param is neither signal nor memo. Use the resolved `origin.freeRefs`.
       const loopReactive =
-        loopParams.size > 0 && (node.origin?.freeRefs?.some(r => loopParams.has(r.name)) ?? false)
+        boundNames.size > 0 && (node.origin?.freeRefs?.some(r => boundNames.has(r.name)) ?? false)
       if ((decision.wrap || loopReactive) && node.slotId) {
         const deps = extractReactiveDeps(node.condition, signalGetters, memoNames)
         bindings.push({
@@ -1812,8 +1825,8 @@ function collectDomBindings(
           jsxPreview: `{${truncateExpr(node.condition)} ? ... : ...}`,
         })
       }
-      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
-      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
+      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       break
     }
     case 'loop': {
@@ -1827,9 +1840,9 @@ function collectDomBindings(
         // An inner loop whose array reads an outer loop param (`r.tags.map(...)`)
         // is reactive per item — use the resolved `arrayFreeIdentifiers`.
         const loopReactive =
-          loopParams.size > 0 &&
+          boundNames.size > 0 &&
           node.arrayFreeIdentifiers !== undefined &&
-          [...loopParams].some(p => node.arrayFreeIdentifiers!.has(p))
+          setSomeIn(boundNames, node.arrayFreeIdentifiers)
         const isReactive = deps.length > 0 || node.callsReactiveGetters === true || loopReactive
         const isFallback = !isReactive && node.hasFunctionCalls === true
         if (isReactive || isFallback) {
@@ -1858,12 +1871,13 @@ function collectDomBindings(
           })
         }
       }
-      // Loop-param names enter scope for the children (#1690, #1795 Phase 2).
-      const childLoopParams = new Set(loopParams)
-      for (const p of extractLoopParamNames(node.param, node)) childLoopParams.add(p)
-      if (node.index) childLoopParams.add(node.index)
+      // Loop-param names enter scope for the children (#1690, #1795 Phase 2),
+      // via the same `BindingScope.enterLoopRow` the emitter uses — `IRLoop`
+      // already satisfies `LoopBindingSource` structurally (`param`/`index`/
+      // `paramBindings`/`preamble`), so no bespoke Set bookkeeping is needed.
+      const childScope = scope.enterLoopRow(node)
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, childLoopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, childScope, readsProp)
       }
       break
     }
@@ -1902,21 +1916,21 @@ function collectDomBindings(
         }
       }
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       }
       break
     }
     case 'fragment':
     case 'provider': {
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       }
       break
     }
     case 'if-statement': {
-      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       if (node.alternate) {
-        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag, scope, readsProp)
       }
       break
     }
@@ -1990,12 +2004,12 @@ function attrValueToString(value: AttrValue): string | null {
 function extractReactiveDeps(expr: string, signalGetters: Set<string>, memoNames: Set<string>): string[] {
   const deps: string[] = []
   for (const getter of signalGetters) {
-    if (new RegExp(`\\b${getter}\\s*\\(`).test(expr)) {
+    if (identifierCallPattern(getter).test(expr)) {
       deps.push(getter)
     }
   }
   for (const memo of memoNames) {
-    if (new RegExp(`\\b${memo}\\s*\\(`).test(expr)) {
+    if (identifierCallPattern(memo).test(expr)) {
       deps.push(memo)
     }
   }
@@ -2012,7 +2026,7 @@ function extractSetterRefs(expr: string, signalGetters: Set<string>): string[] {
   }
   // Also detect signal getter reads in handler
   for (const getter of signalGetters) {
-    if (new RegExp(`\\b${getter}\\s*\\(`).test(expr)) {
+    if (identifierCallPattern(getter).test(expr)) {
       refs.push(getter)
     }
   }

package/src/free-refs.ts

@@ -41,14 +41,23 @@ export interface BindingEnvironment {
   localFunctions: readonly FunctionInfo[]
   imports: readonly ImportInfo[]
   ambientGlobals: ReadonlySet<string>
-  /** Active `.map()` callback parameter names — present inside loop bodies. */
-  loopParams?: ReadonlySet<string>
+  /**
+   * Active `.map()` callback VALUE-bound names (item/index/destructure —
+   * excludes preamble locals and callback params) — present inside loop
+   * bodies. Named after, and fed from, `BindingScope.valueBoundNames()`
+   * (#2482 Stage 4 rename from `loopParams`, which predated the shared
+   * `BindingScope` service and named the mechanism, not the query). This
+   * is the REACTIVITY / SLOT-ID CLASSIFIER consumer class — see that
+   * method's docstring for why it must stay `valueBoundNames`, not
+   * `boundNames`.
+   */
+  loopValueBoundNames?: ReadonlySet<string>
   checker: ts.TypeChecker | null
 }
 
 /**
  * Per-environment cache for the binding map. `BindingEnvironment` identity
- * is stable per (analyzer, loopParams snapshot) — `jsx-to-ir.ts` memoizes
+ * is stable per (analyzer, loopValueBoundNames snapshot) — `jsx-to-ir.ts` memoizes
  * `makeBindingEnv` so the same object is reused across every
  * `resolveFreeRefs` call within a loop scope. With N expressions per
  * component and M bindings per env, this drops binding-table construction
@@ -114,8 +123,8 @@ function buildBindingMap(env: BindingEnvironment): Map<string, BindingKind> {
     map.set(m.name, 'memo-getter')
   }
   // Highest precedence — innermost scope.
-  if (env.loopParams) {
-    for (const name of env.loopParams) map.set(name, 'render-item')
+  if (env.loopValueBoundNames) {
+    for (const name of env.loopValueBoundNames) map.set(name, 'render-item')
   }
 
   _bindingMapCache.set(env, map)