@barefootjs/jsx 0.18.4 → 0.18.7

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

@@ -6,7 +6,8 @@ import { type IRNode, type IRElement, type IRComponent, type IRLoop, type IRProp
 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 { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate } from './html-template.ts'
+import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, 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'
@@ -385,11 +386,13 @@ export function collectInnerLoops(
           arrayFreeIdentifiers: n.arrayFreeIdentifiers,
           param: n.param,
           paramBindings: n.paramBindings,
+          index: n.index,
           key: n.key,
           markerId: n.markerId,
           bodyIsMultiRoot: n.bodyIsMultiRoot,
           bodyIsItemConditional: n.bodyIsItemConditional,
           iterationShape: n.iterationShape,
+          objectIteration: n.objectIteration,
           containerSlotId: scope.parentSlotId,
           template,
           mapPreamble: n.mapPreamble,
@@ -672,6 +675,7 @@ export function collectElements(
       let template = ''
       let staticItemTemplate: string | undefined
       let skeletonTemplate: string | undefined
+      let skeletonPaths: SkeletonSlotPaths | undefined
       if (l.childComponent) {
         template = '' // childComponent path uses createComponent directly
         // CSR materialize fallback (#1268): when the loop array references an
@@ -723,10 +727,18 @@ export function collectElements(
           // expressions, …) and returns `null` for anything it can't prove
           // safe; the plan builder (`build-loop.ts`) falls back to the
           // per-row `template` above whenever this stays `undefined`.
-          skeletonTemplate = buildLoopSkeletonTemplate(l.children[0], {
+          const skeletonSafeSlots = {
             reactiveAttrKeys: new Set(bindings.reactiveAttrs.map(a => `${a.childSlotId}::${a.attrName}`)),
             reactiveTextSlotIds: new Set(bindings.reactiveTexts.map(t => t.slotId)),
-          }) ?? undefined
+          }
+          skeletonTemplate = buildLoopSkeletonTemplate(l.children[0], skeletonSafeSlots) ?? undefined
+          // Direct child-index paths (perf, #2143): only attempted when the
+          // skeleton itself hoisted, and skipped for SVG roots for now (the
+          // `<svg>`-wrap namespace fix-up is orthogonal and untested against
+          // this path model — safe fallback to qsa/$t for those loops).
+          if (skeletonTemplate && !templateRootIsSvg(skeletonTemplate)) {
+            skeletonPaths = computeSkeletonSlotPaths(l.children[0], skeletonSafeSlots) ?? undefined
+          }
         }
       }
 
@@ -743,9 +755,11 @@ export function collectElements(
         bodyIsMultiRoot: l.bodyIsMultiRoot,
         bodyIsItemConditional: l.bodyIsItemConditional,
         iterationShape: l.iterationShape,
+        objectIteration: l.objectIteration,
         template,
         staticItemTemplate,
         skeletonTemplate,
+        skeletonPaths,
         childEventHandlers: childHandlers,
         bindings,
         childComponent: l.childComponent,
@@ -1096,6 +1110,7 @@ function collectBranchLoops(
         bodyIsMultiRoot: n.bodyIsMultiRoot,
         bodyIsItemConditional: n.bodyIsItemConditional,
         iterationShape: n.iterationShape,
+        objectIteration: n.objectIteration,
         template: childTemplate,
         containerSlotId: containerSlot,
         mapPreamble: n.mapPreamble ?? null,

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

@@ -34,6 +34,7 @@ export function buildDynamicLoopDelegationPlan(
       param: elem.param,
       paramBindings: elem.paramBindings,
       key: elem.key,
+      index: elem.index,
       mapPreamble: elem.mapPreamble ?? null,
     }),
   }
@@ -58,6 +59,7 @@ export function buildBranchLoopDelegationPlan(
       param: loop.param,
       paramBindings: loop.paramBindings,
       key: loop.key,
+      index: loop.index,
       mapPreamble: loop.mapPreamble ?? null,
     }),
   }
@@ -86,6 +88,7 @@ export function buildStaticArrayDelegationPlan(
       param: elem.param,
       mapPreamble: elem.mapPreamble ?? null,
       offset: elem.offset ?? null,
+      indexParam: elem.index ?? null,
     },
   }
 }
@@ -99,6 +102,7 @@ function buildKeyedOrIndexLookup(args: {
   param: string
   paramBindings: TopLevelLoop['paramBindings']
   key: string | null
+  index: string | null
   mapPreamble: string | null
 }): ItemLookup {
   const hasBindings = (args.paramBindings?.length ?? 0) > 0
@@ -116,6 +120,7 @@ function buildKeyedOrIndexLookup(args: {
       keyWithItem,
       mapPreamble: args.mapPreamble,
       hasBindings,
+      indexParam: args.index,
     }
   }
   return {
@@ -124,6 +129,7 @@ function buildKeyedOrIndexLookup(args: {
     param: args.param,
     mapPreamble: args.mapPreamble,
     hasBindings,
+    indexParam: args.index,
   }
 }
 

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

@@ -58,6 +58,7 @@ import type { DepthLevel } from '../shared.ts'
 import {
   destructureLoopParam,
   loopKeyFn,
+  nestedLoopIndexAlias,
 } from '../shared.ts'
 import type {
   InnerLoopPlan,
@@ -114,8 +115,8 @@ export function buildInnerLoopsPlan(args: BuildInnerLoopsArgs): InnerLoopsPlan {
     const useReactive = refsParent && !!inner.template
 
     const emit: InnerLoopReactiveEmit | InnerLoopStaticEmit = useReactive
-      ? buildReactiveEmit(inner, level, wrapOuter)
-      : buildStaticEmit(inner, level)
+      ? buildReactiveEmit(inner, level, wrapOuter, uidSuffix)
+      : buildStaticEmit(inner, level, uidSuffix)
 
     const arrayExpr = useReactive ? wrapOuter(inner.array) : inner.array
 
@@ -153,6 +154,7 @@ function buildReactiveEmit(
   inner: NestedLoop,
   level: DepthLevel,
   wrapOuter: (expr: string) => string,
+  uidSuffix: string,
 ): InnerLoopReactiveEmit {
   const wrapInner = (expr: string) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings)
@@ -218,7 +220,14 @@ function buildReactiveEmit(
   // The destructure unwrap (when `inner.param` is a binding pattern)
   // has to land before the preamble so the preamble's bare-binding
   // references resolve.
+  //
+  // The index alias (#2218) lands first — before both the unwrap and the
+  // preamble — since either may reference the user's index name (e.g. a
+  // `const rowTag = \`row-${i}\`` preamble line), and both run before the
+  // cloned-template IIFE that may also reference it.
   const preludeStatements: string[] = []
+  const indexAlias = nestedLoopIndexAlias(inner, `__innerIdx${uidSuffix}`, paramHead, level.comps, level.events)
+  if (indexAlias) preludeStatements.push(indexAlias)
   if (paramUnwrap) preludeStatements.push(paramUnwrap)
   if (inner.mapPreamble) preludeStatements.push(wrapInner(wrapOuter(inner.mapPreamble)))
 
@@ -240,7 +249,7 @@ function buildReactiveEmit(
   }
 }
 
-function buildStaticEmit(inner: NestedLoop, level: DepthLevel): InnerLoopStaticEmit {
+function buildStaticEmit(inner: NestedLoop, level: DepthLevel, uidSuffix: string): InnerLoopStaticEmit {
   // Static `forEach` iterates with the literal item as its first param, so
   // no signal-accessor rewrite is needed — emit the preamble verbatim
   // before the component/event setup so prop getters and event handlers
@@ -248,7 +257,15 @@ function buildStaticEmit(inner: NestedLoop, level: DepthLevel): InnerLoopStaticE
   // wrapping the callback would rewrite `s.x` to `s().x` and throw at
   // runtime when the callback closes over the static inner param (#1244,
   // PR #1352 Copilot review).
-  const preludeStatements: string[] = inner.mapPreamble ? [inner.mapPreamble] : []
+  //
+  // The index alias (#2218) lands first, same rationale as the reactive
+  // path: `forEach`'s second param is the synthetic `__innerIdx<uid>`, not
+  // the user's index name, so a preamble/prop/event that reads it needs the
+  // alias bound before anything else runs.
+  const preludeStatements: string[] = []
+  const indexAlias = nestedLoopIndexAlias(inner, `__innerIdx${uidSuffix}`, inner.param, level.comps, level.events)
+  if (indexAlias) preludeStatements.push(indexAlias)
+  if (inner.mapPreamble) preludeStatements.push(inner.mapPreamble)
   return {
     mode: 'static',
     rawKey: inner.key ?? null,

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

@@ -57,7 +57,7 @@ function wrapAttrValueExpression(value: AttrValue, wrap: (s: string) => string):
       return AttrValueOf.spread(wrap(value.expr), value.templateExpr ? wrap(value.templateExpr) : undefined)
   }
 }
-import { destructureLoopParam, loopKeyFn, buildCompSelector } from '../shared.ts'
+import { destructureLoopParam, loopKeyFn, buildCompSelector, nestedLoopIndexAlias } from '../shared.ts'
 import { BF_HOST, BF_AT } from '@barefootjs/shared'
 import type {
   BranchChildComponentInit,
@@ -269,6 +269,17 @@ export function buildBranchInnerLoopsPlan(
       handler: wrapInner(ev.handler),
     }))
 
+    // Index-param gating runs against the RAW (pre-wrap) component/event
+    // data — wrapping only rewrites loop-param references, never the
+    // index name, so it doesn't affect whether the index is referenced.
+    const indexAlias = nestedLoopIndexAlias(
+      inner,
+      `__bidxbr_${i}`,
+      paramHead,
+      inner.childComponents ?? [],
+      inner.bindings.events,
+    )
+
     const reactiveTexts: BranchInnerLoopText[] = inner.bindings.reactiveTexts.map(text => ({
       slotId: text.slotId,
       wrappedExpression: wrapBoth(text.expression),
@@ -286,6 +297,7 @@ export function buildBranchInnerLoopsPlan(
       keyFn: loopKeyFn(inner),
       paramHead,
       paramUnwrap,
+      indexAlias,
       wrappedTemplate: inner.template!,
       wrappedKey,
       keyDepth: 1,

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

@@ -103,6 +103,7 @@ export function buildPlainLoopPlan(elem: TopLevelLoop, profileComponentName?: st
     mapPreambleWrapped: elem.mapPreamble ? wrap(elem.mapPreamble) : '',
     template: elem.template,
     skeletonTemplate: elem.skeletonTemplate,
+    skeletonPaths: elem.skeletonPaths,
     reactiveEffects: hasReactive ? buildLoopReactiveEffectsPlan(elem, profileComponentName) : null,
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,

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

@@ -51,6 +51,12 @@ export interface KeyedItemLookup {
   arrayExpr: string
   /** Loop param identifier (or destructure pattern text — used as receiver name only). */
   param: string
+  /**
+   * Loop index param name (e.g. `i` from `.map((item, i) => ...)`), or `null`.
+   * When a delegated handler closes over it, the stringifier re-derives the
+   * index at dispatch time and binds it so the reference resolves (#2189).
+   */
+  indexParam: string | null
   /** Destructured-binding metadata. Determines TDZ-safe `__bfLoopItem` shape (#951). */
   paramBindings: TopLevelLoop['paramBindings']
   /**
@@ -72,6 +78,8 @@ export interface DynamicIndexItemLookup {
   param: string
   mapPreamble: string | null
   hasBindings: boolean
+  /** Loop index param name — see `KeyedItemLookup.indexParam` (#2189). */
+  indexParam: string | null
 }
 
 export interface StaticIndexItemLookup {
@@ -79,6 +87,8 @@ export interface StaticIndexItemLookup {
   arrayExpr: string
   param: string
   mapPreamble: string | null
+  /** Loop index param name — see `KeyedItemLookup.indexParam` (#2189). */
+  indexParam: string | null
   /**
    * Offset of the loop's items past its preceding container siblings. Its
    * terms are subtracted from the DOM child index to recover the array index,

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

@@ -108,6 +108,15 @@ export interface BranchInnerLoop {
   paramHead: string
   /** Body-entry unwrap statement (empty when no destructured param). */
   paramUnwrap: string
+  /**
+   * Body-entry index-alias statement (#2218), or `null` when the inner
+   * loop declares no index param or never references it. Binds the user's
+   * index name to the synthetic `__bidx<uid>` renderItem param — mirrors
+   * `InnerLoopReactiveEmit`'s prelude alias in `plan/inner-loop.ts`. Must
+   * be emitted before `paramUnwrap` and the template clone, since either
+   * may reference the index.
+   */
+  indexAlias: string | null
   /** Already-wrapped HTML template for one inner-loop item. */
   wrappedTemplate: string
   /** Pre-wrapped key expression for setAttribute, or null when no key. */

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

@@ -23,6 +23,7 @@ import type {
   TopLevelLoop,
 } from '../../types.ts'
 import type { IRLoopChildComponent } from '../../../types.ts'
+import type { SkeletonSlotPaths } from '../../html-template.ts'
 import type { ReactiveEffectsPlan } from './reactive-effects.ts'
 import type { InnerLoopsPlan } from './inner-loop.ts'
 
@@ -103,6 +104,14 @@ interface PlainLoopVariant extends DynamicLoopCommon {
    * stringifier falls back to the legacy per-row `emitTemplateCloneInline`.
    */
   skeletonTemplate?: string
+  /**
+   * Compile-time child-index paths for `skeletonTemplate`'s dynamic slots
+   * (perf, #2143). When present, the stringifier resolves attr/text/ref
+   * slots via direct `.firstChild`/`.nextSibling` property chains on a
+   * fresh clone instead of `qsa`/`$t`, falling back to the runtime lookup
+   * only for hydration (`__existing`) or any slot missing from the map.
+   */
+  skeletonPaths?: SkeletonSlotPaths
   /** Resolved reactive-effects plan — null forces the single-line renderItem shape. */
   reactiveEffects: ReactiveEffectsPlan | null
   /**

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/event-delegation.ts

@@ -33,6 +33,7 @@
  */
 
 import { toDomEventName, varSlotId, substituteLoopBindings, buildLoopChildIndexSubtraction, DATA_KEY, keyAttrName } from '../../utils.ts'
+import { extractFreeIdentifiersFromText } from '../../csr-substitute.ts'
 import type {
   EventDelegationPlan,
   KeyedItemLookup,
@@ -60,6 +61,19 @@ function withTurn(call: string, componentName: string | undefined, childSlotId:
   return `beginTurn(${id}); try { ${call} } finally { endTurn() }`
 }
 
+/**
+ * Bind the loop index under the user's param name for a delegated handler that
+ * closes over it (#2189). Returns `null` when there is no index param, the
+ * handler doesn't reference it (so unaffected loops keep byte-for-byte output),
+ * or the name already equals the in-scope index var (a self-alias). Uses AST
+ * free identifiers, not a token match, so `item.id` (property) doesn't count.
+ */
+function indexBindingLine(handler: string, indexParam: string | null, indexExpr: string): string | null {
+  if (!indexParam || indexParam === indexExpr) return null
+  if (!extractFreeIdentifiersFromText(handler).has(indexParam)) return null
+  return `const ${indexParam} = ${indexExpr}`
+}
+
 export function stringifyEventDelegation(lines: string[], plan: EventDelegationPlan): void {
   const { containerVar, events, itemLookup, profileComponentName } = plan
   const eventsByName = new Map<string, LoopChildEvent[]>()
@@ -112,10 +126,11 @@ function emitKeyedLookup(
   handlerCall: string,
   lookup: KeyedItemLookup,
 ): void {
-  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings } = lookup
+  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings, indexParam } = lookup
 
   if (ev.nestedLoops.length === 0) {
     // Single-level keyed lookup.
+    const idxLine = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === key)`)
     ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('[${DATA_KEY}]')`)
     ls.push(`      if (li) {`)
     ls.push(`        const key = li.getAttribute('${DATA_KEY}')`)
@@ -125,12 +140,14 @@ function emitKeyedLookup(
       ls.push(`        if (__bfLoopItem) {`)
       ls.push(`          const ${param} = __bfLoopItem`)
       if (mapPreamble) ls.push(`          ${mapPreamble}`)
+      if (idxLine) ls.push(`          ${idxLine}`)
       ls.push(`          ${handlerCall}`)
       ls.push(`        }`)
     } else {
       ls.push(`        const ${param} = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`)
       if (mapPreamble) ls.push(`        ${mapPreamble}`)
-      ls.push(`        if (${param}) ${handlerCall}`)
+      if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
+      else ls.push(`        if (${param}) ${handlerCall}`)
     }
     ls.push(`      }`)
     return
@@ -164,7 +181,9 @@ function emitKeyedLookup(
   const outerGuard = hasBindings ? '__bfLoopItem' : param
   const allParams = [outerGuard, ...ev.nestedLoops.map(n => n.param)]
   if (mapPreamble) ls.push(`      ${mapPreamble}`)
-  ls.push(`      if (${allParams.join(' && ')}) ${handlerCall}`)
+  const idxLine = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === outerKey)`)
+  if (idxLine) ls.push(`      if (${allParams.join(' && ')}) { ${idxLine}; ${handlerCall} }`)
+  else ls.push(`      if (${allParams.join(' && ')}) ${handlerCall}`)
 }
 
 function emitDynamicIndexLookup(
@@ -173,7 +192,8 @@ function emitDynamicIndexLookup(
   handlerCall: string,
   lookup: DynamicIndexItemLookup,
 ): void {
-  const { arrayExpr, param, mapPreamble, hasBindings } = lookup
+  const { arrayExpr, param, mapPreamble, hasBindings, indexParam } = lookup
+  const idxLine = indexBindingLine(ev.handler, indexParam, 'idx')
   ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('li, [bf-i]')`)
   ls.push(`      if (li && li.parentElement) {`)
   ls.push(`        const idx = Array.from(li.parentElement.children).indexOf(li)`)
@@ -182,12 +202,14 @@ function emitDynamicIndexLookup(
     ls.push(`        if (__bfLoopItem) {`)
     ls.push(`          const ${param} = __bfLoopItem`)
     if (mapPreamble) ls.push(`          ${mapPreamble}`)
+    if (idxLine) ls.push(`          ${idxLine}`)
     ls.push(`          ${handlerCall}`)
     ls.push(`        }`)
   } else {
     ls.push(`        const ${param} = ${arrayExpr}[idx]`)
     if (mapPreamble) ls.push(`        ${mapPreamble}`)
-    ls.push(`        if (${param}) ${handlerCall}`)
+    if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
+    else ls.push(`        if (${param}) ${handlerCall}`)
   }
   ls.push(`      }`)
 }
@@ -199,7 +221,8 @@ function emitStaticIndexLookup(
   lookup: StaticIndexItemLookup,
   containerVar: string,
 ): void {
-  const { arrayExpr, param, mapPreamble, offset } = lookup
+  const { arrayExpr, param, mapPreamble, offset, indexParam } = lookup
+  const idxLine = indexBindingLine(ev.handler, indexParam, '__idx')
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`)
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`)
   ls.push(`      if (__el.parentElement === ${containerVar}) {`)
@@ -207,6 +230,7 @@ function emitStaticIndexLookup(
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`)
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`)
   if (mapPreamble) ls.push(`        ${mapPreamble}`)
-  ls.push(`        if (${param}) ${handlerCall}`)
+  if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
+  else ls.push(`        if (${param}) ${handlerCall}`)
   ls.push(`      }`)
 }

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}`)
     }