@barefootjs/jsx 0.18.5 → 0.18.7

package/src/ir-to-client-js/control-flow/shared.ts

@@ -20,21 +20,118 @@ import { emitListenerBlock } from './stringify/event-listener.ts'
 import { nameForRegistryRef } from '../component-scope.ts'
 import { BF_SCOPE, BF_HOST, BF_AT } from '@barefootjs/shared'
 import type { LoopChildRefBinding } from './plan/loop.ts'
+import {
+  extractFreeIdentifiersFromText,
+  extractFreeIdentifiersFromStatementText,
+  extractFreeIdentifiersFromTemplateText,
+} from '../csr-substitute.ts'
 
 /**
  * Build the `keyFn` argument for mapArray / reconcileElements. `null` when
- * the loop has no key expression. Narrowing on `loop.kind` keeps `index`
- * off `NestedLoop` (nested loops never thread an explicit index parameter)
- * and lets the compiler verify we handled every flavour exhaustively.
+ * the loop has no key expression. Every `CollectedLoop` variant (top-level /
+ * branch / nested) carries an `index: string | null` field (#2218 threaded
+ * it onto `NestedLoop` too), so the index param — when present — is always
+ * appended to the keyFn's own parameter list. mapArray invokes `keyFn(item,
+ * i)` directly with the numeric index, independent of the synthetic
+ * `__innerIdx<uid>` binding used inside a nested loop's renderItem body
+ * (see `nestedLoopReferencesIndex` below), so no aliasing is needed here.
  */
 export function loopKeyFn(loop: CollectedLoop): string {
   if (loop.key === null) return 'null'
-  const params = loop.kind === 'nested'
-    ? loop.param
-    : `${loop.param}${loop.index ? `, ${loop.index}` : ''}`
+  const params = `${loop.param}${loop.index ? `, ${loop.index}` : ''}`
   return `(${params}) => String(${loop.key})`
 }
 
+/**
+ * Does a nested inner loop's body reference its own declared index
+ * parameter (e.g. `i` from `.map((item, i) => ...)`)? Scans every surface
+ * the renderItem/forEach body can read the index from — the key
+ * expression, reactive text/attr expressions, the map-preamble statements,
+ * the per-item HTML template's `${...}` interpolations, per-item events,
+ * ref callbacks, and child-component props — so the byte-stable gate only
+ * fires when the index is truly used (mirrors #2189's handler-only gate
+ * for delegated events, `indexBindingLine` in `stringify/event-delegation.ts`).
+ *
+ * `comps` / `events` are passed separately (rather than read off `inner`)
+ * because callers hold them in different shapes at different points in the
+ * build pipeline — `DepthLevel.comps`/`.events` for the plain inner-loop
+ * path, `inner.childComponents`/`inner.bindings.events` for the loop-child-
+ * arm (conditional-branch) path.
+ *
+ * AST-based throughout (never regex) per repo convention — a token-level
+ * scan would false-match a property access like `item.i` as a reference to
+ * an index param named `i`.
+ */
+export function nestedLoopReferencesIndex(
+  inner: NestedLoop,
+  comps: readonly IRLoopChildComponent[],
+  events: readonly LoopChildEvent[],
+): boolean {
+  const index = inner.index
+  if (!index) return false
+
+  const exprRefs = (text: string | null | undefined, precomputed?: ReadonlySet<string>): boolean => {
+    if (precomputed) return precomputed.has(index)
+    if (!text) return false
+    return extractFreeIdentifiersFromText(text).has(index)
+  }
+
+  if (exprRefs(inner.key)) return true
+  for (const t of inner.bindings.reactiveTexts) {
+    if (exprRefs(t.expression, t.freeIdentifiers)) return true
+  }
+  for (const a of inner.bindings.reactiveAttrs) {
+    if (exprRefs(a.expression, a.freeIdentifiers)) return true
+  }
+  if (inner.mapPreamble && extractFreeIdentifiersFromStatementText(inner.mapPreamble).has(index)) return true
+  if (inner.template && extractFreeIdentifiersFromTemplateText(inner.template).has(index)) return true
+  for (const ev of events) {
+    if (exprRefs(ev.handler)) return true
+  }
+  for (const r of inner.bindings.refs) {
+    if (exprRefs(r.callback)) return true
+  }
+  for (const c of comps) {
+    for (const p of c.props) {
+      if (exprRefs(attrValueToString(p.value))) return true
+    }
+    if (c.children?.length) {
+      const childrenExpr = irChildrenToJsExpr(c.children)
+      if (childrenExpr && exprRefs(childrenExpr)) return true
+    }
+  }
+  return false
+}
+
+/**
+ * Build the prelude alias statement that binds a nested inner loop's index
+ * param to the synthetic numeric-index value mapArray/forEach passes into
+ * renderItem (#2218), or `null` when no alias is needed. Gated by
+ * `nestedLoopReferencesIndex` for byte-for-byte stability — loops that
+ * declare an index but never read it emit no extra line. `paramHead` guards
+ * against the (JS-illegal, can't actually happen) case where the index name
+ * collides with the loop's own emitted item-parameter identifier — mirrors
+ * the self-alias guard in #2189's `indexBindingLine`.
+ *
+ * `syntheticIndexVar` is the already-formatted variable name the caller's
+ * stringifier binds the numeric index to (`__innerIdx<uid>` in
+ * `stringify/inner-loop.ts`, `__bidx<uid>` in `stringify/loop-child-arm.ts`)
+ * — passed in rather than assembled here so this helper doesn't need to
+ * know which emission family is calling it.
+ */
+export function nestedLoopIndexAlias(
+  inner: NestedLoop,
+  syntheticIndexVar: string,
+  paramHead: string,
+  comps: readonly IRLoopChildComponent[],
+  events: readonly LoopChildEvent[],
+): string | null {
+  const index = inner.index
+  if (!index || index === paramHead) return null
+  if (!nestedLoopReferencesIndex(inner, comps, events)) return null
+  return `const ${index} = ${syntheticIndexVar}`
+}
+
 /**
  * Wrap each ref's `callback` expression with the loop-param accessor and
  * return `LoopChildRefBinding[]` ready for the stringifier. For dynamic

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

@@ -33,7 +33,7 @@
 import { keyAttrName, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
-import { emitMultiRootTemplateCloneLines } from './template-parse.ts'
+import { emitMultiRootTemplateCloneLines, templateRootIsSvg } from './template-parse.ts'
 import { emitLoopChildRefs } from './loop.ts'
 import type {
   InnerLoopPlan,
@@ -82,7 +82,16 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
     lines.push(`${innerIndent}  __innerEl${uid}.__bfExtras = __innerExtras${uid}`)
     lines.push(`${indent}  }`)
   } else {
-    lines.push(`${indent}  let __innerEl${uid} = __existing ?? (() => { const __t = document.createElement('template'); __t.innerHTML = \`${emit.wrappedTemplate}\`; return __t.content.firstElementChild.cloneNode(true) })()`)
+    // SVG-rooted item templates must parse inside a synthetic `<svg>` wrap
+    // (#2219): `template.innerHTML` parses in the HTML namespace, so a bare
+    // `<line>`/`<circle>` root clones as an HTMLUnknownElement and the SVG
+    // renderer silently draws nothing. Mirrors `templateRootIsSvg` handling
+    // on the top-level (#135/#1088) and branch-arm paths; HTML-rooted
+    // templates keep byte-identical output.
+    const isSvg = templateRootIsSvg(emit.wrappedTemplate)
+    const innerHtml = isSvg ? `<svg>${emit.wrappedTemplate}</svg>` : emit.wrappedTemplate
+    const childPath = isSvg ? '.firstElementChild.firstElementChild' : '.firstElementChild'
+    lines.push(`${indent}  let __innerEl${uid} = __existing ?? (() => { const __t = document.createElement('template'); __t.innerHTML = \`${innerHtml}\`; return __t.content${childPath}.cloneNode(true) })()`)
   }
   if (emit.wrappedKey) {
     lines.push(`${indent}  __innerEl${uid}.setAttribute('${keyAttrName(inner.keyDepth)}', String(${emit.wrappedKey}))`)

package/src/ir-to-client-js/control-flow/stringify/loop-child-arm.ts

@@ -86,6 +86,11 @@ export function stringifyBranchInnerLoops(
     const uid = inner.uidSuffix
     lines.push(`${indent}{ const __bic${uid} = ${inner.containerExpr}`)
     lines.push(`${indent}if (__bic${uid}) mapArray(() => ${inner.arrayExpr} || [], __bic${uid}, ${inner.keyFn}, (${inner.paramHead}, __bidx${uid}, __existing) => {`)
+    // Index alias (#2218) lands first — before the destructure unwrap and
+    // the template clone, either of which may reference the index.
+    if (inner.indexAlias) {
+      lines.push(`${indent}  ${inner.indexAlias}`)
+    }
     if (inner.paramUnwrap) {
       lines.push(`${indent}  ${inner.paramUnwrap}`)
     }

package/src/ir-to-client-js/control-flow/stringify/loop.ts

@@ -27,7 +27,8 @@
 import { emitRefCall, varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { stringifyReactiveEffects } from './reactive-effects.ts'
-import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr } from './template-parse.ts'
+import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr, templateRootIsSvg, multiRootTemplateNeedsSvgWrap } from './template-parse.ts'
+import { buildSkeletonPathPlan, type SkeletonPathPlan } from './skeleton-paths.ts'
 import { stringifyComponentLoop } from './component-loop.ts'
 import { stringifyCompositeLoop } from './composite-loop.ts'
 import type { LoopChildRefBinding, LoopPlan, PlainLoopPlan, StaticLoopPlan } from '../plan/types.ts'
@@ -47,14 +48,18 @@ import type { LoopChildRefBinding, LoopPlan, PlainLoopPlan, StaticLoopPlan } fro
 export function emitLoopChildRefs(
   lines: string[],
   refs: readonly LoopChildRefBinding[],
-  opts: { indent: string; elVar: string; bodyIsMultiRoot: boolean },
+  opts: { indent: string; elVar: string; bodyIsMultiRoot: boolean; elementIndexBySlot?: ReadonlyMap<string, number> },
 ): void {
   if (refs.length === 0) return
-  const { indent, elVar, bodyIsMultiRoot } = opts
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot } = opts
   const lookup = bodyIsMultiRoot ? 'qsaItem' : 'qsa'
   for (const ref of refs) {
     const varName = `__rf_${varSlotId(ref.childSlotId)}`
-    lines.push(`${indent}{ const ${varName} = ${lookup}(${elVar}, '[bf="${ref.childSlotId}"]')`)
+    const pIdx = elementIndexBySlot?.get(ref.childSlotId)
+    const lookupExpr = pIdx !== undefined
+      ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${ref.childSlotId}"]')`
+      : `${lookup}(${elVar}, '[bf="${ref.childSlotId}"]')`
+    lines.push(`${indent}{ const ${varName} = ${lookupExpr}`)
     lines.push(`${indent}if (${varName}) ${emitRefCall(ref.callback, varName)} }`)
   }
 }
@@ -181,10 +186,37 @@ export function stringifyPlainLoop(
       singleRootLayout: 'inline',
     })
   }
+  // Direct child-index paths (perf, #2143): only reachable when hoistedTpl
+  // is set, which itself requires a single-root, conditional-free body — so
+  // `reactiveEffects.conditionals` is always empty here and needs no path
+  // handling. `__p` is `null` on the hydration branch (`__existing` truthy)
+  // since the skeleton's empty markers/omitted attrs don't describe the
+  // SSR-rendered tree; every resolution falls back to qsa/$t there.
+  let pathPlan: SkeletonPathPlan | null = null
+  if (hoistedTpl && plan.skeletonPaths) {
+    const elementSlotIds = [
+      ...(reactiveEffects?.attrSlots.map(s => s.slotId) ?? []),
+      ...childRefs.map(r => r.childSlotId),
+    ]
+    const textSlotIds = reactiveEffects?.outerTexts.map(t => t.slotId) ?? []
+    if (elementSlotIds.length > 0 || textSlotIds.length > 0) {
+      const built = buildSkeletonPathPlan(plan.skeletonPaths, '__el', { elementSlotIds, textSlotIds })
+      if (built.arrayElems.length > 0) {
+        pathPlan = built
+        lines.push(`${bodyIndent}const __p = __existing ? null : [${built.arrayElems.join(', ')}]`)
+      }
+    }
+  }
   if (reactiveEffects !== null) {
-    stringifyReactiveEffects(lines, reactiveEffects, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot })
+    stringifyReactiveEffects(lines, reactiveEffects, {
+      indent: bodyIndent,
+      elVar: '__el',
+      bodyIsMultiRoot,
+      elementIndexBySlot: pathPlan?.elementIndexBySlot,
+      textIndexBySlot: pathPlan?.textIndexBySlot,
+    })
   }
-  emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot })
+  emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot, elementIndexBySlot: pathPlan?.elementIndexBySlot })
   lines.push(`${bodyIndent}return __el`)
   lines.push(`${topIndent}}, '${markerId}'${loopBfId})`)
 }
@@ -283,15 +315,26 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
   lines.push(`      let __iterEl = ${containerVar}.children[${childIndexExpr}]`)
   if (csrMaterialize) {
     lines.push(`      if (!__iterEl) {`)
+    // SVG-rooted item templates parse inside a synthetic `<svg>` wrap and
+    // descend one extra level (#2219) — `template.innerHTML` alone parses in
+    // the HTML namespace and the materialized elements would never draw.
+    // Mirrors `templateRootIsSvg` handling on the reactive clone paths;
+    // HTML-rooted templates keep byte-identical output. Multi-root fragments
+    // use the fragment-aware predicate so an `<svg>`-container-first fragment
+    // isn't over-wrapped (#2233 Copilot review).
+    const isSvg = csrMaterialize.bodyIsMultiRoot
+      ? multiRootTemplateNeedsSvgWrap(csrMaterialize.itemTemplate)
+      : templateRootIsSvg(csrMaterialize.itemTemplate)
+    const itemHtml = isSvg ? `<svg>${csrMaterialize.itemTemplate}</svg>` : csrMaterialize.itemTemplate
     if (csrMaterialize.bodyIsMultiRoot) {
       // Multi-root: clone every top-level sibling of the per-item template and
       // insert them in order. `__iterEl` is the first root (the one reactive
       // bindings attach to); the rest land alongside it via insertBefore.
       lines.push(`        const __mtpl = document.createElement('template')`)
-      lines.push(`        __mtpl.innerHTML = \`${csrMaterialize.itemTemplate}\``)
+      lines.push(`        __mtpl.innerHTML = \`${itemHtml}\``)
       lines.push(`        const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`        let __first = null`)
-      lines.push(`        let __sib = __mtpl.content.firstElementChild`)
+      lines.push(`        let __sib = __mtpl.content${isSvg ? '.firstElementChild' : ''}.firstElementChild`)
       lines.push(`        while (__sib) {`)
       lines.push(`          const __next = __sib.nextElementSibling`)
       lines.push(`          const __cloned = __sib.cloneNode(true)`)
@@ -302,8 +345,8 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
       lines.push(`        __iterEl = __first`)
     } else {
       lines.push(`        const __tpl = document.createElement('template')`)
-      lines.push(`        __tpl.innerHTML = \`${csrMaterialize.itemTemplate}\``)
-      lines.push(`        const __cloned = __tpl.content.firstElementChild`)
+      lines.push(`        __tpl.innerHTML = \`${itemHtml}\``)
+      lines.push(`        const __cloned = __tpl.content${isSvg ? '.firstElementChild' : ''}.firstElementChild`)
       lines.push(`        if (__cloned) {`)
       lines.push(`          const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`          ${containerVar}.insertBefore(__cloned, __anchor)`)

package/src/ir-to-client-js/control-flow/stringify/reactive-effects.ts

@@ -40,6 +40,16 @@ export interface StringifyReactiveEffectsOptions {
    * `<!--bf-loop-i-->`-bounded siblings). Optional — defaults to `false`.
    */
   bodyIsMultiRoot?: boolean
+  /**
+   * Compile-time `__p` index for each attr slotId (perf, #2143) — see
+   * `buildSkeletonPathPlan`. When a slot has an entry, the emitted lookup
+   * becomes `__p ? __p[i] : qsa(...)` instead of the bare `qsa(...)` call;
+   * `__p` is `null` on the hydration branch (`__existing`), so hydration
+   * still resolves through the battle-tested runtime lookup.
+   */
+  elementIndexBySlot?: ReadonlyMap<string, number>
+  /** Same as `elementIndexBySlot`, for text-marker slots (`$t`). */
+  textIndexBySlot?: ReadonlyMap<string, number>
 }
 
 export function stringifyReactiveEffects(
@@ -47,7 +57,7 @@ export function stringifyReactiveEffects(
   plan: ReactiveEffectsPlan,
   opts: StringifyReactiveEffectsOptions,
 ): void {
-  const { indent, elVar, bodyIsMultiRoot } = opts
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textIndexBySlot } = opts
   const lookup = bodyIsMultiRoot ? 'qsaItem' : 'qsa'
   const pc = plan.profileComponentName
   const bindingBfId = (slotId: string): string => profileBindingId(pc, slotId)
@@ -55,7 +65,11 @@ export function stringifyReactiveEffects(
   // 1. Reactive attribute effects (one qsa per slot, then per-attr createEffect).
   for (const slot of plan.attrSlots) {
     const varName = `__ra_${varSlotId(slot.slotId)}`
-    lines.push(`${indent}{ const ${varName} = ${lookup}(${elVar}, '[bf="${slot.slotId}"]')`)
+    const pIdx = elementIndexBySlot?.get(slot.slotId)
+    const lookupExpr = pIdx !== undefined
+      ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slot.slotId}"]')`
+      : `${lookup}(${elVar}, '[bf="${slot.slotId}"]')`
+    lines.push(`${indent}{ const ${varName} = ${lookupExpr}`)
     lines.push(`${indent}if (${varName}) {`)
     for (const attr of slot.attrs) {
       lines.push(`${indent}  createEffect(() => {`)
@@ -69,7 +83,7 @@ export function stringifyReactiveEffects(
 
   // 2. Outer text effects (slots NOT inside any conditional branch).
   for (const text of plan.outerTexts) {
-    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId))
+    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId), textIndexBySlot?.get(text.slotId))
   }
 
   // 3. Reactive conditionals — each emits an insert(...) over `elVar` whose
@@ -85,9 +99,16 @@ function emitOuterText(
   elVar: string,
   text: ReactiveTextEffect,
   bfId: string = '',
+  pIdx?: number,
 ): void {
   const varName = `__rt_${varSlotId(text.slotId)}`
-  lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`)
+  if (pIdx !== undefined) {
+    // Direct-path resolution (#2143): `__p` holds the marker Comment node;
+    // `tAfter` mirrors `$t`'s create-if-absent Text-node semantics exactly.
+    lines.push(`${indent}{ const ${varName} = __p ? tAfter(__p[${pIdx}]) : $t(${elVar}, '${text.slotId}')[0]`)
+  } else {
+    lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`)
+  }
   lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${bfId}) }`)
 }
 

package/src/ir-to-client-js/control-flow/stringify/skeleton-paths.ts

@@ -0,0 +1,70 @@
+/**
+ * Turn compile-time `SkeletonSlotPaths` (html-template.ts) into the `__p`
+ * array-literal contents plus slot -> index maps consumed by
+ * `stringifyPlainLoop` / `stringifyReactiveEffects` / `emitLoopChildRefs`
+ * (perf: direct child-index paths for hoisted single-root loops, #2143).
+ *
+ * Single source of truth for `__p` ordering: `loop.ts` (which emits the
+ * array literal) and `reactive-effects.ts` (which emits the per-slot index
+ * reads) both derive their indices from the SAME `SkeletonPathPlan`, so the
+ * two can never drift out of sync.
+ */
+
+import type { SkeletonSlotPaths } from '../../html-template.ts'
+
+/**
+ * Convert a root-relative child-index path into a `.firstChild.nextSibling…`
+ * property chain off `base`. An empty path resolves to `base` itself (the
+ * slot lives on the clone root, e.g. an attr on the loop body's own tag).
+ */
+export function pathExpr(base: string, path: readonly number[]): string {
+  let expr = base
+  for (const idx of path) {
+    expr += '.firstChild'
+    if (idx > 0) expr += '.nextSibling'.repeat(idx)
+  }
+  return expr
+}
+
+export interface SkeletonPathPlan {
+  /** Expressions for the `const __p = [...]` array literal, in stable order. */
+  arrayElems: string[]
+  /** slotId -> index into `__p`, for element-anchored slots (reactive attrs, refs). */
+  elementIndexBySlot: Map<string, number>
+  /** slotId -> index into `__p`, for text-marker-anchored slots (reactive texts). */
+  textIndexBySlot: Map<string, number>
+}
+
+/**
+ * Build the `__p` plan for a hoisted loop's reactive attr / text / ref
+ * slots. A slotId absent from `skeletonPaths` (shouldn't happen for a
+ * successfully-hoisted skeleton, but handled defensively) is simply left
+ * out of both maps — its stringifier call site falls back to `qsa`/`$t`
+ * for that one slot without affecting any other slot's resolution.
+ */
+export function buildSkeletonPathPlan(
+  skeletonPaths: SkeletonSlotPaths,
+  elVar: string,
+  opts: { elementSlotIds: readonly string[]; textSlotIds: readonly string[] },
+): SkeletonPathPlan {
+  const arrayElems: string[] = []
+  const elementIndexBySlot = new Map<string, number>()
+  const textIndexBySlot = new Map<string, number>()
+
+  for (const slotId of opts.elementSlotIds) {
+    if (elementIndexBySlot.has(slotId)) continue
+    const path = skeletonPaths.elementPaths.get(slotId)
+    if (!path) continue
+    elementIndexBySlot.set(slotId, arrayElems.length)
+    arrayElems.push(pathExpr(elVar, path))
+  }
+  for (const slotId of opts.textSlotIds) {
+    if (textIndexBySlot.has(slotId)) continue
+    const path = skeletonPaths.textMarkerPaths.get(slotId)
+    if (!path) continue
+    textIndexBySlot.set(slotId, arrayElems.length)
+    arrayElems.push(pathExpr(elVar, path))
+  }
+
+  return { arrayElems, elementIndexBySlot, textIndexBySlot }
+}

package/src/ir-to-client-js/control-flow/stringify/template-parse.ts

@@ -82,6 +82,30 @@ export function templateRootIsSvg(template: string): boolean {
   return branches.every(templateRootIsSvg)
 }
 
+/**
+ * Wrap decision for MULTI-ROOT (fragment) templates, where the synthetic
+ * `<svg>` wrap swallows every sibling root at once (#2233 Copilot review).
+ *
+ * `templateRootIsSvg` inspects only the FIRST root tag. For single-root
+ * templates that's exact, but a fragment whose first root is an `<svg>`
+ * CONTAINER (`<><svg/><span/></>`) doesn't need the wrap at all — the
+ * HTML parser enters foreign content at `<svg>` on its own — and wrapping
+ * would drag the HTML siblings into the SVG namespace (`<span>` becomes an
+ * SVGUnknownElement, silently undrawn). So `<svg>`-first fragments skip
+ * the wrap; only leaf-rooted fragments (`<line>`, `<circle>`, ...) get it.
+ *
+ * Known edge (degenerate, pre-existing): an `<svg>`-first fragment with
+ * SVG-LEAF siblings (`<><svg/><line/></>`) leaves the bare leaf siblings
+ * in the HTML namespace — exactly the pre-#2219 behavior. Deciding that
+ * shape correctly needs a scan of every top-level root tag; not worth the
+ * parser until a real component hits it.
+ */
+export function multiRootTemplateNeedsSvgWrap(template: string): boolean {
+  const m = stripLeadingNonContent(template).match(/^<\s*([A-Za-z][A-Za-z0-9-]*)/)
+  if (m && m[1].toLowerCase() === 'svg') return false
+  return templateRootIsSvg(template)
+}
+
 /**
  * Strip leading whitespace and HTML comment markers (`<!-- ... -->`) so
  * that a branch like `<!--bf-cond-start:s0-->${...}<!--bf-cond-end:s0-->`
@@ -269,7 +293,7 @@ export function emitMultiRootTemplateCloneLines(
   varEl: string,
   varExtras: string,
 ): string[] {
-  const isSvg = templateRootIsSvg(template)
+  const isSvg = multiRootTemplateNeedsSvgWrap(template)
   // Wrap in `<svg>` so the parser walks into SVG foreign content; we then
   // descend one level to pick up the per-item roots.
   const innerHtmlExpr = isSvg ? `\`<svg>${template}</svg>\`` : `\`${template}\``

package/src/ir-to-client-js/csr-substitute.ts

@@ -338,6 +338,59 @@ export function extractFreeIdentifiersFromText(text: string): Set<string> {
   return extractFreeIdentifiersFromNode(expr)
 }
 
+/**
+ * Free identifiers referenced by a block of JS *statements* — e.g. an inner
+ * `.map()` callback's block-body preamble (`mapPreamble`, #1052). Unlike
+ * `extractFreeIdentifiersFromText`, which wraps its input in `(...)` to
+ * force single-expression parsing, statement text (`const x = ...;`) is
+ * not a valid expression and would fail to parse inside parens — parse it
+ * as top-level source instead. Used by nested-loop index-param reference
+ * gating (#2218).
+ */
+export function extractFreeIdentifiersFromStatementText(text: string): Set<string> {
+  if (!text || text.trim().length === 0) return new Set()
+  const sf = ts.createSourceFile(
+    '__free_ids_stmt__.ts',
+    text,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ true,
+    ts.ScriptKind.TS,
+  )
+  return extractFreeIdentifiersFromNode(sf)
+}
+
+/**
+ * Free identifiers referenced inside a template-literal-style string's
+ * `${...}` interpolations — e.g. a nested loop's per-item HTML `template`
+ * (#2218). Wraps the text in backticks and parses it as a real
+ * `TemplateExpression` so brace balancing, string literals, and nested
+ * object/array literals inside `${...}` are handled correctly by the TS
+ * parser (AST-based — never the char-class regex `extractTemplateExpressions`
+ * in `identifiers.ts` uses for its looser references-graph pass). Safe by
+ * construction: the same `template` string is embedded verbatim inside a
+ * real backtick literal at emit time (`__t.innerHTML = \`${template}\``),
+ * so wrapping it here to parse mirrors exactly how it's already used.
+ */
+export function extractFreeIdentifiersFromTemplateText(template: string): Set<string> {
+  if (!template || template.length === 0) return new Set()
+  const sf = ts.createSourceFile(
+    '__free_ids_template__.ts',
+    `(\`${template}\`);`,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ true,
+    ts.ScriptKind.TS,
+  )
+  const stmt = sf.statements[0]
+  if (!stmt || !ts.isExpressionStatement(stmt)) return new Set()
+  const expr = ts.isParenthesizedExpression(stmt.expression) ? stmt.expression.expression : stmt.expression
+  if (!ts.isTemplateExpression(expr)) return new Set()
+  const ids = new Set<string>()
+  for (const span of expr.templateSpans) {
+    for (const id of extractFreeIdentifiersFromNode(span.expression)) ids.add(id)
+  }
+  return ids
+}
+
 /**
  * Reduce a memo's `() => expr` source to the expression that should be
  * substituted in for `memoName()`. Matches the extraction done by the