@barefootjs/jsx 0.31.2 → 0.31.4

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/adapters/jsx-adapter.ts

@@ -19,6 +19,7 @@ import type { CallbackBodyAcceptor } from './interface.ts'
 import { ENV_SIGNAL_CLIENT_FACTORY } from './env-signal.ts'
 import { formatParamWithType, findReachableNames } 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 */
@@ -165,7 +166,7 @@ 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[]) => {}`)
         }
@@ -197,7 +198,10 @@ export abstract class JsxAdapter extends BaseAdapter {
         // No initializer (e.g. `let emblaApi: EmblaCarouselType | undefined`)
         // — carry the declared type annotation through so `.tsx` output
         // doesn't fall back to implicit `any` (TS7034/TS7005, #2573).
-        const typeAnnotation = preserveTypes && constant.type ? `: ${constant.type.raw}` : ''
+        const typeAnnotation =
+          preserveTypes && (constant.typeAnnotation ?? constant.type)
+            ? `: ${constant.typeAnnotation ?? constant.type?.raw}`
+            : ''
         lines.push(`  ${keyword} ${constant.name}${typeAnnotation}`)
         continue
       }
@@ -213,7 +217,17 @@ export abstract class JsxAdapter extends BaseAdapter {
       const constValue = preserveTypes
         ? (constant.typedValue ?? constant.value)
         : constant.value
-      lines.push(`  ${keyword} ${constant.name} = ${constValue}`)
+      // Preserve an explicit `let` type annotation from source (#2589) —
+      // without it, TS infers the initializer's (often narrower) type and
+      // later reassignments/reads fail under strict (TS7034/TS7005, and
+      // TS2339 via `never` narrowing). `const` is left alone: its type
+      // always infers correctly from the (immutable) initializer, so
+      // adding annotations there would only churn snapshots.
+      const letTypeAnnotation =
+        preserveTypes && keyword === 'let' && constant.typeAnnotation
+          ? `: ${constant.typeAnnotation}`
+          : ''
+      lines.push(`  ${keyword} ${constant.name}${letTypeAnnotation} = ${constValue}`)
     }
 
     // Include local functions — skip unreachable ones (only used in event
@@ -412,14 +426,29 @@ export abstract class JsxAdapter extends BaseAdapter {
       const keyword = c.declarationKind ?? 'const'
       const exportKw = c.isExported ? 'export ' : ''
       if (!c.value) {
-        entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name}` })
+        // No initializer (e.g. module-scope `let pending: number`) — carry
+        // the declared type annotation through, mirroring the function-scope
+        // fix above (#2573 / #2589).
+        const typeAnnotation =
+          preserveTypes && (c.typeAnnotation ?? c.type)
+            ? `: ${c.typeAnnotation ?? c.type?.raw}`
+            : ''
+        entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name}${typeAnnotation}` })
         continue
       }
       const trimmed = c.value.trim()
       if (/^new WeakMap\b/.test(trimmed)) continue
       if (c.isExported && /^createContext\b/.test(trimmed)) continue
       const value = preserveTypes ? (c.typedValue ?? c.value) : c.value
-      entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name} = ${value}` })
+      // Preserve an explicit module-scope `let` type annotation from source
+      // (#2589) — see the function-scope sibling above for rationale. `const`
+      // is left alone: its type always infers correctly from the (immutable)
+      // initializer.
+      const letTypeAnnotation =
+        preserveTypes && keyword === 'let' && c.typeAnnotation
+          ? `: ${c.typeAnnotation}`
+          : ''
+      entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name}${letTypeAnnotation} = ${value}` })
     }
 
     for (const f of ir.metadata.localFunctions) {

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/analyzer.ts

@@ -504,8 +504,18 @@ function visit(
     collectAmbientGlobals(node, ctx)
   }
 
-  // Module-level constants (outside component)
-  if (ts.isVariableStatement(node) && !ctx.componentNode) {
+  // Module-level constants (outside component). Ambient statements
+  // (`declare let X: T`) are type-only contracts with no runtime binding —
+  // collectAmbientGlobals above already tracks them for BF052, and
+  // re-emitting one as a runtime `let` would shadow the real global, so
+  // they must not reach collectConstant. (Previously excluded only by
+  // accident: this path required an initializer, which `declare`
+  // statements never have — the #2589 uninitialized-`let` fix removed
+  // that gate, so the exclusion is now explicit.)
+  const isDeclareStatement =
+    ts.isVariableStatement(node) &&
+    (node.modifiers?.some(m => m.kind === ts.SyntaxKind.DeclareKeyword) ?? false)
+  if (ts.isVariableStatement(node) && !ctx.componentNode && !isDeclareStatement) {
     const isExported = node.modifiers?.some(m => m.kind === ts.SyntaxKind.ExportKeyword) ?? false
     const isLet = (node.declarationList.flags & ts.NodeFlags.Let) !== 0
     const isModuleClientDirective = hasLeadingClientDirectiveOnStatement(node, ctx.sourceFile)
@@ -525,9 +535,15 @@ function visit(
         }
         continue
       }
+      // An initializer is required for `const` (TS grammar enforces this),
+      // but an uninitialized module-scope `let` (e.g. `let pending: number`)
+      // is legal source and must still be collected — mirroring the
+      // component-scope path below (line ~687), which has never gated on
+      // `decl.initializer` — so its declared type carries into the emitted
+      // template instead of the declaration vanishing outright (#2589).
       if (
         ts.isIdentifier(decl.name) &&
-        decl.initializer &&
+        (decl.initializer || isLet) &&
         !isArrowComponentFunction(decl)
       ) {
         collectConstant(decl, ctx, true, isLet ? 'let' : 'const', isExported)
@@ -3203,6 +3219,7 @@ function collectConstant(
     value,
     parsed,
     typedValue: typedValue !== value ? typedValue : undefined,
+    typeAnnotation: node.type ? node.type.getText(ctx.sourceFile) : undefined,
     valueBranches,
     declarationKind,
     isExported,

package/src/debug.ts

@@ -29,6 +29,7 @@ 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'
 
 // =============================================================================
 // Types
@@ -1990,12 +1991,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 +2013,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/identifier-pattern.ts

@@ -0,0 +1,79 @@
+/**
+ * Single door for building "does this expression text reference identifier
+ * X?" regexes (#2592).
+ *
+ * The naive `new RegExp(`\\b${name}\\b`)` idiom used throughout the compiler
+ * breaks for `$`-containing identifiers (legal in JS: `$item`, `item$`,
+ * `a$b`) in two independent ways:
+ *
+ *   1. Unescaped: an interpolated `$` is a regex metacharacter (end-of-
+ *      input/line anchor), so `\b$item\b` / `\ba$b\b` can (almost) never
+ *      match mid-string — false negative.
+ *   2. Even escaped, `\b` requires a `\w`/non-`\w` transition and `$` is
+ *      not `\w` (`[A-Za-z0-9_]`) — so `\b\$item\b` still fails to match the
+ *      leading boundary in `($item)` (both `(` and `$` are non-word, so no
+ *      transition occurs there).
+ *
+ * `identifierPattern` / `identifierCallPattern` fix both: the identifier
+ * text is escaped before interpolation, and the boundary is asserted with
+ * lookaround against `\p{ID_Continue}` (Unicode "can continue an
+ * identifier") unioned with `$`, so `$` is correctly treated as
+ * identifier-like on both sides of the match.
+ *
+ * Scope: these remain the same *bounded lexical heuristic* the compiler has
+ * always used for expression-text scanning (not a general JS/TS parse —
+ * see CLAUDE.md's structural-parsing rule, which does not apply to this
+ * class of check). This module only fixes the `$` boundary bug; it does not
+ * change what the heuristic considers a "reference" (string literals,
+ * comments, and member-access tails are still opaque to it — callers that
+ * need that precision use `tokenContainsIdent` / `node.freeIdentifiers`
+ * instead, per #1267).
+ */
+
+// Duplicate regex flags throw at construction ('gu' + 'u' -> SyntaxError),
+// so `u` is added only when the caller didn't already pass it.
+function withUnicodeFlag(flags: string): string {
+  return flags.includes('u') ? flags : `${flags}u`
+}
+
+/** Escape regex metacharacters in a literal identifier before interpolation. */
+export function escapeIdentifierForRegex(name: string): string {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/**
+ * Lookaround fragments asserting "not preceded/followed by an identifier
+ * continuation character (including `$`)". `$` is a legal identifier char
+ * in JS but is not `\p{ID_Continue}`, so it's unioned in explicitly.
+ *
+ * Exported for the few call sites that must splice extra assertions
+ * between the identifier and the trailing boundary (e.g. "not followed by
+ * a call" as well as "not followed by an identifier char") — compose with
+ * these fragments rather than reintroducing a bare `\b`.
+ */
+export const ID_BOUNDARY_BEFORE = '(?<![\\p{ID_Continue}$])'
+export const ID_BOUNDARY_AFTER = '(?![\\p{ID_Continue}$])'
+
+/**
+ * Regex matching a standalone reference to identifier `name` — the `$`-safe
+ * replacement for `new RegExp(`\\b${name}\\b`)`. Always carries the `u`
+ * (unicode) flag, required for `\p{ID_Continue}`; pass additional flags
+ * (e.g. `'g'` for `String.replace`/`matchAll` substitution sites) via
+ * `flags`.
+ */
+export function identifierPattern(name: string, flags = ''): RegExp {
+  const esc = escapeIdentifierForRegex(name)
+  return new RegExp(`${ID_BOUNDARY_BEFORE}${esc}${ID_BOUNDARY_AFTER}`, withUnicodeFlag(flags))
+}
+
+/**
+ * Regex matching identifier `name` used in call position (`name(...)`,
+ * allowing whitespace before the paren) — the `$`-safe replacement for
+ * `new RegExp(`\\b${name}\\s*\\(`)`. No trailing boundary assertion is
+ * needed: `\s`/`(` are already not `\p{ID_Continue}`/`$`, so they can't be
+ * mistaken for a continuation of `name`.
+ */
+export function identifierCallPattern(name: string, flags = ''): RegExp {
+  const esc = escapeIdentifierForRegex(name)
+  return new RegExp(`${ID_BOUNDARY_BEFORE}${esc}\\s*\\(`, withUnicodeFlag(flags))
+}

package/src/index.ts

@@ -89,7 +89,7 @@ export type {
 } from './adapters/interface.ts'
 export { JsxAdapter } from './adapters/jsx-adapter.ts'
 export type { JsxAdapterConfig } from './adapters/jsx-adapter.ts'
-export { rewriteImportsForTemplate } from './adapters/template-imports.ts'
+export { rewriteImportsForTemplate, rewriteDynamicImportsInSource } 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'
@@ -214,6 +214,10 @@ export { buildLoopChainExpr } from './loop-chain.ts'
 export type { LoopChainInputs } from './loop-chain.ts'
 export { isLowerableLoopDestructure, isLowerableObjectRestDestructure } from './loop-destructure.ts'
 
+// Binding scope (#2482) — shared loop-bound-name resolution service
+export { BindingScope } from './scope/binding-scope.ts'
+export type { ScopeBindingSource, ScopeBinding, ScopeFrame, LoopBindingSource } from './scope/binding-scope.ts'
+
 // Debug analysis
 export {
   buildComponentGraph,

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

@@ -5,12 +5,13 @@
 import { type IRNode, type IRElement, type IRComponent, type IRLoop, type IRProp, pickAttrMetaFromIR } from '../types.ts'
 import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranchReactiveAttr, BranchLoop, ConditionalBranchTextEffect, ConditionalElement, LoopChildBindings, LoopChildBranchSummary, LoopChildConditional, LoopOffset, NestedLoop } from './types.ts'
 import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from './utils.ts'
-import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings } from './reactivity.ts'
+import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { templateRootIsSvg } from './control-flow/stringify/template-parse.ts'
 import { expandDynamicPropValue, expandConstantForReactivity } from './prop-handling.ts'
 import { walkIR, stopAt } from './walker.ts'
 import { buildLoopChainExpr } from '../loop-chain.ts'
+import { identifierPattern } from '../identifier-pattern.ts'
 
 /** Expressions that render nothing (0 DOM nodes) — `&&` / `?:` empty branches. */
 const EMPTY_RENDER_EXPRS = new Set(['null', 'undefined', 'false', "''", '""', '``'])
@@ -311,7 +312,7 @@ export function collectInnerLoops(
         const template = n.children.map(c => irToPlaceholderTemplate(c, undefined, emitDepth, loopParamsForTemplate)).join('')
         // Check if array expression references the outer loop param
         const refsOuter = outerLoopParam
-          ? new RegExp(`\\b${outerLoopParam}\\b`).test(n.array)
+          ? identifierPattern(outerLoopParam).test(n.array)
           : false
         // Per-item bindings for inner loop body, collected uniformly when
         // ctx is available: reactiveTexts / reactiveAttrs / refs are each
@@ -332,8 +333,8 @@ export function collectInnerLoops(
         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, false, innerPreambleNames))
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index))
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index))
             bindings.refs.push(...collectLoopChildRefs(child))
           }
         }
@@ -375,6 +376,8 @@ export function collectInnerLoops(
               siblingOffsets,
               n.param,
               n.paramBindings,
+              innerPreambleNames,
+              n.index,
             ))
           }
         }
@@ -671,7 +674,7 @@ export function collectElements(
       const childHandlers: string[] = []
       const bindings = projectionInner
         ? emptyLoopChildBindings()
-        : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings, preambleNamesOf(l))
+        : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings, preambleNamesOf(l), l.index)
       if (!projectionInner) {
         for (const child of l.children) {
           childHandlers.push(...collectEventHandlersFromIR(child))
@@ -1146,7 +1149,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, preambleNamesOf(n))
+        ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings, preambleNamesOf(n), n.index)
         : emptyLoopChildBindings()
 
       loops.push({
@@ -1346,6 +1349,12 @@ export function collectLoopChildBindings(
    * `collectLoopChildReactiveAttrs`. Omitted for a loop with no preamble.
    */
   preambleNames?: ReadonlySet<string>,
+  /**
+   * The loop's index param name (`.map((item, i) => ...)`'s `i`), when
+   * present — folded into the shadow guard (Copilot review on #2595) so
+   * an index-shadowing const doesn't get const-folded either.
+   */
+  loopIndex?: string | null,
 ): LoopChildBindings {
   const bindings = emptyLoopChildBindings()
   for (const child of children) {
@@ -1355,10 +1364,10 @@ 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, preambleNames))
-    bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings, true))
+    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex))
+    bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex))
     bindings.refs.push(...collectLoopChildRefs(child))
-    bindings.conditionals.push(...collectLoopChildConditionals(child, ctx, siblingOffsets, loopParam, loopParamBindings))
+    bindings.conditionals.push(...collectLoopChildConditionals(child, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex))
   }
   return bindings
 }
@@ -1369,8 +1378,24 @@ export function collectLoopChildConditionals(
   siblingOffsets: Map<IRLoop, IRNode[]>,
   loopParam?: string,
   loopParamBindings?: readonly import('../types.ts').LoopParamBinding[],
+  /**
+   * The enclosing loop's `.map()` callback preamble locals (#2447), when
+   * known — folded into the `expandConstantForReactivity` shadow guard
+   * (#2482 Stage 1b) so a preamble local shadowing a component/module
+   * const doesn't get const-folded into the condition, which would
+   * corrupt `classifyReactivity`'s verdict below (a substituted literal
+   * reads as "not reactive," silently freezing the branch at its initial
+   * value instead of wiring an `insert()`).
+   */
+  preambleNames?: ReadonlySet<string>,
+  /**
+   * The loop's index param name, when present — see
+   * `collectLoopChildBindings`'s doc comment (Copilot review on #2595).
+   */
+  loopIndex?: string | null,
 ): LoopChildConditional[] {
   const conditionals: LoopChildConditional[] = []
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex)
 
   // Widen the source-level "references loop param" check so destructured
   // callbacks fire too — the pattern text `[, cfg]` never word-matches on
@@ -1402,7 +1427,7 @@ export function collectLoopChildConditionals(
       // Pre-gate using AST `reactive` flag on the source condition before
       // paying for constant expansion — matches the legacy short-circuit.
       if (!n.reactive && !refsLoopParamInSource) return
-      const expanded = expandConstantForReactivity(n.condition, ctx, sourceFreeIds)
+      const expanded = expandConstantForReactivity(n.condition, ctx, sourceFreeIds, scope)
       // Loop-param conditionals are reactive via per-item signal accessors;
       // classifyReactivity sees both paths (signal/memo/prop + loop-param).
       if (classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') return
@@ -1421,8 +1446,8 @@ export function collectLoopChildConditionals(
         condition: expanded.expr,
         whenTrueHtml,
         whenFalseHtml,
-        whenTrue: summarizeLoopChildBranch(n.whenTrue, ctx, siblingOffsets, loopParam, loopParamBindings),
-        whenFalse: summarizeLoopChildBranch(n.whenFalse, ctx, siblingOffsets, loopParam, loopParamBindings),
+        whenTrue: summarizeLoopChildBranch(n.whenTrue, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
+        whenFalse: summarizeLoopChildBranch(n.whenFalse, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
         ...(expanded.freeIds !== undefined && { conditionFreeIdentifiers: expanded.freeIds }),
       })
     },
@@ -1444,19 +1469,23 @@ function summarizeLoopChildBranch(
   siblingOffsets: Map<IRLoop, IRNode[]>,
   loopParam?: string,
   loopParamBindings?: readonly import('../types.ts').LoopParamBinding[],
+  /** Enclosing loop's preamble locals (#2447) — see `collectLoopChildConditionals`. */
+  preambleNames?: ReadonlySet<string>,
+  /** Enclosing loop's index param name — see `collectLoopChildConditionals` (Copilot review on #2595). */
+  loopIndex?: string | null,
 ): LoopChildBranchSummary {
   const inner = collectInnerLoops([node], siblingOffsets, loopParam, ctx, branchInnerLoopOptions)
   return {
     childComponents: collectConditionalBranchChildComponents(node),
     innerLoops: inner.length > 0 ? inner : undefined,
-    conditionals: collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings),
+    conditionals: collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
     events: collectConditionalBranchEvents(node),
     // Loop-param-aware — reuses the flat loop-item collectors scoped to just
     // this branch's subtree. Both already stop descending into any further
     // nested reactive conditional (own insert()/arm), so calling them here
     // on the branch root yields exactly this branch's direct bindings
     // without re-collecting what a nested arm already owns (#2347).
-    reactiveAttrs: collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, true),
+    reactiveAttrs: collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex),
     // Skip ONLY when the branch's entire content is a single bare
     // `expression` (no wrapping element) that MAY yield a live DOM node —
     // i.e. it contains a call anywhere (`node.hasFunctionCalls`, computed
@@ -1506,6 +1535,6 @@ function summarizeLoopChildBranch(
     // two can't disagree on shape).
     reactiveTexts: node.type === 'expression' && node.hasFunctionCalls
       ? []
-      : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true),
+      : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex),
   }
 }

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

@@ -11,6 +11,7 @@
 
 import type { TopLevelLoop, BranchLoop, LoopChildEvent } from '../../types.ts'
 import { buildChainedArrayExpr, varSlotId, substituteLoopBindings } from '../../utils.ts'
+import { identifierPattern } from '../../../identifier-pattern.ts'
 import { renderPreamble, irToHtmlTemplate } from '../../html-template.ts'
 import type {
   EventDelegationPlan,
@@ -138,7 +139,7 @@ function buildKeyedOrIndexLookup(args: {
     // we substitute bindings with `item.<path>` directly (#951).
     const keyWithItem = hasBindings
       ? substituteLoopBindings(args.key, args.paramBindings!, 'item')
-      : args.key.replace(new RegExp(`\\b${args.param}\\b`, 'g'), 'item')
+      : args.key.replace(identifierPattern(args.param, 'g'), 'item')
     return {
       kind: 'keyed',
       arrayExpr: args.array,