@barefootjs/jsx 0.34.0 → 0.35.1

package/src/__tests__/style-css-var-reactive.test.ts

@@ -113,7 +113,10 @@ describe('reactive CSS custom properties (#135)', () => {
 
     // Both reactive sinks live in the init body — one assigning the DOM
     // `disabled` property, the other writing the `aria-busy` attribute.
-    expect(content).toMatch(/\.disabled\s*=\s*!!\(busy\(\)\)/)
+    // The write reads a dedup-guarded temp (`__x`, #2869), not `busy()`
+    // inline — the computed value is still `busy()`'s result either way.
+    expect(content).toMatch(/const __x = busy\(\)/)
+    expect(content).toMatch(/\.disabled\s*=\s*!!\(__x\)/)
     expect(content).toContain("setAttribute('aria-busy'")
   })
 })

package/src/analyzer-context.ts

@@ -26,6 +26,7 @@ import type {
 } from './types.ts'
 import { type ExcludeRange, collectAllTypeRanges, reconstructWithoutTypes } from './strip-types.ts'
 import type { CallbackBodyAcceptor } from './adapters/interface.ts'
+import { nodeContainsJsx } from './reactivity-checker.ts'
 
 /**
  * Deferred info for BF043 (props destructuring warning).
@@ -318,10 +319,17 @@ export function createAnalyzerContext(
       // travel as structured segments, never as raw text. Every getJS call
       // site shares this contract; the env gate keeps the subtree walk off
       // the production hot path (the trichotomy harness enables it). Scoped
-      // to error-free compiles: a compile that already refused loudly may
-      // take degraded fallback paths whose artifacts are gated by the error —
-      // the invariant this trips on is the SILENT leak.
-      if (process.env.BF_ASSERT_NO_JSX_IN_GETJS === '1' && this.errors.length === 0 && nodeContainsJsx(node)) {
+      // to compiles with no `error`-severity diagnostic: a compile that
+      // already refused loudly may take degraded fallback paths whose
+      // artifacts are gated by the error — the invariant this trips on is
+      // the SILENT leak. A `warning` (e.g. BF043 props-destructuring) does
+      // not gate anything, so it must not silently disarm this assertion too
+      // (#2867) — only `error` severity does.
+      if (
+        process.env.BF_ASSERT_NO_JSX_IN_GETJS === '1' &&
+        !this.errors.some((e) => e.severity === 'error') &&
+        nodeContainsJsx(node)
+      ) {
         throw new Error(
           'getJS() called on a JSX-bearing node — raw JSX must never be spliced ' +
           'into emitted output. Carry mixed content as structured segments ' +
@@ -336,12 +344,6 @@ export function createAnalyzerContext(
   }
 }
 
-/** Subtree JSX check for the test-gated getJS assertion above. */
-function nodeContainsJsx(node: ts.Node): boolean {
-  if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)) return true
-  return ts.forEachChild(node, nodeContainsJsx) ?? false
-}
-
 // =============================================================================
 // Source Location Helper
 // =============================================================================

package/src/analyzer.ts

@@ -1998,6 +1998,9 @@ const CLIENT_EXPORTS = new Set([
   'forwardProps', 'unwrap', '__slot',
   'createContext', 'useContext', 'provideContext',
   'createPortal', 'isSSRPortal', 'findSiblingSlot', 'cleanupPortalPlaceholder',
+  // Floating-element position tracking (#2848) — same runtime-only shape
+  // as the portal entries above.
+  'trackPosition',
   // Request-scoped environment signal factory (router v0.5) — `createSignal`-
   // shaped, recognised structurally (#2057) so its getter is just a signal
   // getter; the compiler lowers the reader value per adapter via the signal's
@@ -4221,6 +4224,7 @@ export const BROWSER_ONLY_CLIENT_APIS = new Set([
   'isSSRPortal',
   'findSiblingSlot',
   'cleanupPortalPlaceholder',
+  'trackPosition',
 ])
 
 function importsBrowserOnlyClientApi(ctx: AnalyzerContext): boolean {

package/src/index.ts

@@ -11,10 +11,16 @@ export type { CompileResult, CompileOptions, CompileOptionsWithAdapter, FileOutp
 // SSR template-variable defaults (manifest seeds for stash-based adapters)
 export { extractSsrDefaults, deriveStashFromDefaults } from './ssr-defaults.ts'
 
-// Shared props-destructure binding + alias-map helpers (#2524)
-export { propsDestructureBinding, buildPropAliasMap, isIdentifierName } from './props-binding.ts'
+// Shared props-destructure binding + alias-map helpers (#2524, #2788)
+export { propsDestructureBinding, buildPropAliasMap, isIdentifierName, resolveBodyDestructuredPropAliases } from './props-binding.ts'
 export type { SsrDefault } from './ssr-defaults.ts'
 
+// Bare local-const alias-hop resolution for a signal/memo getter name
+// (`const items__alias = items`) — #2778's CSR-template fix, reused (not
+// re-walked) by SSR-side alias resolution (#2813: DSL stash seeding,
+// Go's zero-arg-call field routing).
+export { resolveGetterAliases, collectAliasableGetterNames } from './ir-to-client-js/csr-substitute.ts'
+
 // Import-alias resolution (#2777 client-JS registry key; #2822 SSR cross-template
 // call names) — a local alias -> declared/exported name map built from
 // `ir.metadata.imports`. DSL adapters build this once per compile and look up

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

@@ -4,7 +4,7 @@
 
 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 { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM, type LoopParamSpec } from './utils.ts'
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, jsxChildrenPropGetterExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { detectRootNamespaceWrapTag } from './control-flow/stringify/template-parse.ts'
@@ -12,8 +12,8 @@ import { expandDynamicPropValue, expandConstantForReactivity, resolveRestSpreadO
 import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
 import { buildLoopChainExpr } from '../loop-chain.ts'
-import { identifierPattern } from '../identifier-pattern.ts'
 import { classifyDOMProp } from '@barefootjs/shared'
+import type { BindingScope } from '../scope/binding-scope.ts'
 
 /** Expressions that render nothing (0 DOM nodes) — `&&` / `?:` empty branches. */
 const EMPTY_RENDER_EXPRS = new Set(['null', 'undefined', 'false', "''", '""', '``'])
@@ -272,7 +272,7 @@ export const branchInnerLoopOptions: CollectInnerLoopsOptions = {
 export function collectInnerLoops(
   nodes: IRNode[],
   siblingOffsets: Map<IRLoop, IRNode[]>,
-  outerLoopParam?: string,
+  outerLoopParam?: string | LoopParamSpec,
   ctx?: ClientJsContext,
   options?: CollectInnerLoopsOptions,
 ): NestedLoop[] {
@@ -280,12 +280,29 @@ export function collectInnerLoops(
     parentSlotId: string | null
     depth: number
     insideCond: boolean
+    /**
+     * Every ancestor loop's own item/index binding, innermost-first
+     * (#2861) — `undefined` above the outermost loop. Threaded (not just
+     * captured once from `outerLoopParam`) so a THIRD-level-deep loop's row
+     * sees BOTH its grandparent's and its immediate parent's bindings, not
+     * only the outermost one: each `loop:` visit below pushes its own
+     * frame via `buildLoopRowScope(..., scope.bindingScope)` before
+     * descending into that loop's own children.
+     */
+    bindingScope: BindingScope | undefined
   }
   const result: NestedLoop[] = []
   const flat = options?.flatBranchMode === true
   const fixedDepth = options?.templateDepth
   const collectBindings = options?.collectItemBindings === true
-  const initialScope: Scope = { parentSlotId: null, depth: 0, insideCond: false }
+  // Normalize to a spec regardless of which shape the caller passed (#2868
+  // callers always pass a full spec; a bare string carries no bindings/index
+  // of its own) — one shape feeds both the reactivity scope below and
+  // `loopParamsForTemplate` inside the `loop:` visitor.
+  const outerSpec: LoopParamSpec | undefined =
+    typeof outerLoopParam === 'string' ? { param: outerLoopParam } : outerLoopParam
+  const outerScope = buildLoopRowScope(outerSpec?.param, outerSpec?.bindings, undefined, outerSpec?.index)
+  const initialScope: Scope = { parentSlotId: null, depth: 0, insideCond: false, bindingScope: outerScope }
 
   for (const root of nodes) {
     walkIR<Scope>(root, initialScope, {
@@ -308,14 +325,10 @@ export function collectInnerLoops(
         // Pass loopParams so expressions are wrapped at generation time (not post-hoc regex).
         // Forward destructured bindings (#951) so inner-loop template
         // references to the destructured locals are rewritten.
-        const loopParamsForTemplate = outerLoopParam
-          ? [outerLoopParam, { param: n.param, bindings: n.paramBindings }]
+        const loopParamsForTemplate = outerSpec
+          ? [outerSpec, { param: n.param, bindings: n.paramBindings, index: n.index }]
           : undefined
         const template = n.children.map(c => irToPlaceholderTemplate(c, undefined, emitDepth, loopParamsForTemplate)).join('')
-        // Check if array expression references the outer loop param
-        const refsOuter = outerLoopParam
-          ? identifierPattern(outerLoopParam).test(n.array)
-          : false
         // Per-item bindings for inner loop body, collected uniformly when
         // ctx is available: reactiveTexts / reactiveAttrs / refs are each
         // classified against the loop's OWN param via `classifyReactivity`,
@@ -349,8 +362,8 @@ export function collectInnerLoops(
             // guarantees the branch's marker is mounted the moment this
             // effect first runs (issue-2706-nested-loop-conditional-slot
             // .test.ts's original repro).
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index, scope.bindingScope))
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index, scope.bindingScope))
             bindings.refs.push(...collectLoopChildRefs(child))
           }
           bindings.conditionals.push(...collectLoopChildConditionals(
@@ -361,6 +374,12 @@ export function collectInnerLoops(
             n.paramBindings,
             innerPreambleNames,
             n.index,
+            // Render a branch's HTML against the FULL ancestor chain (outer
+            // loop(s) + this loop's own param), not just this loop's own
+            // param — an inner-loop conditional arm can read an outer
+            // loop's item/index too (#2868).
+            loopParamsForTemplate,
+            scope.bindingScope,
           ))
         }
 
@@ -412,7 +431,6 @@ export function collectInnerLoops(
           containerSlotId: scope.parentSlotId,
           template,
           preamble: n.preamble,
-          refsOuterParam: refsOuter,
           childComponents,
           insideConditional: !flat && scope.insideCond ? true : undefined,
           offset: flat ? undefined : resolveLoopOffset(siblingOffsets.get(n)),
@@ -420,7 +438,14 @@ export function collectInnerLoops(
         })
         // Branch-mode callers handle deeper nesting via their own collection paths.
         if (!flat) {
-          descend({ ...scope, depth: scope.depth + 1 })
+          // #2861: push THIS loop's own item/index frame onto the scope
+          // stack before descending, so a loop found deeper still (depth 2+)
+          // sees every ancestor's bindings, not just the outermost one.
+          descend({
+            ...scope,
+            depth: scope.depth + 1,
+            bindingScope: buildLoopRowScope(n.param, n.paramBindings, innerPreambleNames, n.index, scope.bindingScope),
+          })
         }
       },
       // fragment / provider / async auto-descend with the same scope.
@@ -455,7 +480,12 @@ function decideLoopRendering(
   // loop. These only surface for static arrays (gated at the call site via
   // `isStaticArray && innerLoops.length`) so dynamic child-component loops —
   // which render through `createComponent` — are unaffected.
-  const innerLoops = collectInnerLoops(loop.children, siblingOffsets, loop.param, ctx)
+  const innerLoops = collectInnerLoops(
+    loop.children,
+    siblingOffsets,
+    { param: loop.param, bindings: loop.paramBindings, index: loop.index },
+    ctx,
+  )
   const hasInnerLoops = (innerLoops?.length ?? 0) > 0
   const useElementReconciliation =
     !loop.childComponent && !loop.isStaticArray && (hasNestedComps || hasInnerLoops)
@@ -727,6 +757,7 @@ export function collectElements(
         : decideLoopRendering(l, siblingOffsets, ctx)
 
       let template = ''
+      let templateIndexed: string | undefined
       let staticItemTemplate: string | undefined
       let skeletonTemplate: string | undefined
       let skeletonPaths: SkeletonSlotPaths | undefined
@@ -755,10 +786,34 @@ export function collectElements(
         // avoiding post-hoc regex wrapping that corrupts literal attribute values.
         // Forward destructured bindings (#951) so references like `cfg.color`
         // in the emitted template literal are rewritten to `__bfItem()[1].color`.
+        // NOT `index: l.index` here (#2859 follow-up): this exact template
+        // string is reused verbatim by the LAZY row plan when this loop is
+        // lazy-eligible (`LazyRowPlanData`'s clone source, and — via
+        // `mapPreambleWrapped` — its `preambleStatements`) — `mapArrayLazy`'s
+        // `createRow(entry, index)` still hands the row a plain NUMBER
+        // (map-array-lazy.ts is untouched by #2859), so baking `i()` in here
+        // would call a number. Lazy-row eligibility only refuses a REACTIVE
+        // binding that references the index — a non-reactive use like a
+        // `data-key` built from the index is not gated the same way, so this
+        // can't assume "lazy-eligible ⇒ no index in the template" either.
+        // `buildPlainLoopPlan`/`buildBranchLoopPlan` apply the index wrap
+        // themselves, AFTER lazy eligibility is decided, only when it's `null`.
         const loopParamSpec = [{ param: l.param, bindings: l.paramBindings }]
         template = useElementReconciliation
           ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
           : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
+        // Second structured render, WITH the index wrapped too — used by
+        // `build-plain-row.ts` once lazy eligibility rules out the lazy row
+        // plan (which needs `template` above, index-unwrapped, verbatim).
+        // Rendered here (IR level) rather than via a post-hoc regex pass
+        // over `template`, which can corrupt a tag name colliding with the
+        // index identifier (`<i>` -> `<i()>`, #2868).
+        if (l.index) {
+          const loopParamSpecIndexed = [{ param: l.param, bindings: l.paramBindings, index: l.index }]
+          templateIndexed = useElementReconciliation
+            ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpecIndexed)
+            : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpecIndexed)
+        }
         // Static-array loops emit a `forEach((param, idx) => ...)` whose body
         // references the destructured param directly — `__bfItem()` is not in
         // scope there. Build a second template that skips the loop-param
@@ -815,6 +870,7 @@ export function collectElements(
         iterationShape: l.iterationShape,
         objectIteration: l.objectIteration,
         template,
+        templateIndexed,
         staticItemTemplate,
         skeletonTemplate,
         skeletonPaths,
@@ -1165,6 +1221,11 @@ function collectBranchLoops(
       // keeping the template consistent with reactive effect expressions that
       // use `param()` to read the current item value.
       let childTemplate: string
+      let childTemplateIndexed: string | undefined
+      // NOT `index: n.index` here — see the identical note on `loopParamSpec`
+      // above; `BranchLoop.template` is reused verbatim by the lazy row plan
+      // too (`callSite: 'branch-plain'`), and `buildBranchLoopPlan` applies
+      // the index wrap itself once lazy eligibility is known (#2859 follow-up).
       const branchLoopParamSpec = [{ param: n.param, bindings: n.paramBindings }]
       if (projectionInner) {
         childTemplate = '' // descriptor renderItem builds from d.h, not a row template
@@ -1173,6 +1234,15 @@ function collectBranchLoops(
       } else {
         childTemplate = n.children.map(c => irToHtmlTemplate(c, undefined, 0, branchLoopParamSpec)).join('')
       }
+      // Second structured render, WITH the index wrapped too — see the
+      // identical `templateIndexed` note on the top-level loop path above
+      // (#2868).
+      if (n.index && !projectionInner) {
+        const branchLoopParamSpecIndexed = [{ param: n.param, bindings: n.paramBindings, index: n.index }]
+        childTemplateIndexed = useElementReconciliation && n.children[0]
+          ? irToPlaceholderTemplate(n.children[0], restNames, 0, branchLoopParamSpecIndexed)
+          : n.children.map(c => irToHtmlTemplate(c, undefined, 0, branchLoopParamSpecIndexed)).join('')
+      }
 
       // Collect per-item bindings (events, reactive attrs/texts, refs,
       // conditionals) for ALL branch loops — simple loops also need
@@ -1198,6 +1268,7 @@ function collectBranchLoops(
         iterationShape: n.iterationShape,
         objectIteration: n.objectIteration,
         template: childTemplate,
+        templateIndexed: childTemplateIndexed,
         containerSlotId: containerSlot,
         preamble: n.preamble,
         preambleRegions: n.preambleRegions,
@@ -1425,24 +1496,41 @@ export function collectLoopChildConditionals(
    * `collectLoopChildBindings`'s doc comment (Copilot review on #2595).
    */
   loopIndex?: string | null,
+  /**
+   * The full ancestor loop-param chain to render branch HTML against
+   * (outermost first), when known — e.g. `[outerSpec, innerSpec]` for a
+   * conditional inside an inner `.map()`. Defaults to just
+   * `[{ param: loopParam, bindings: loopParamBindings, index: loopIndex }]`
+   * (this function's own single-loop scope) when omitted, which is correct
+   * for every caller except `collectInnerLoops`'s inner-loop handler, which
+   * passes the full chain so an inner loop's conditional arm can also
+   * reference an OUTER loop's item/index (#2868). Rendering the branch's
+   * HTML against the full chain at IR time — rather than re-wrapping the
+   * assembled HTML string with a word-boundary regex afterward — is also
+   * what makes it safe for a branch root tag name to collide with a
+   * param/index identifier (`<i>`, `<b>`, …): `irToHtmlTemplate` only wraps
+   * JS expression positions, never tag names.
+   */
+  loopParams?: ReadonlyArray<string | LoopParamSpec>,
+  /** Enclosing loop's own scope, for a NESTED loop (#2861) — see `buildLoopRowScope`. */
+  parentScope?: BindingScope,
 ): LoopChildConditional[] {
   const conditionals: LoopChildConditional[] = []
-  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex)
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex, parentScope)
 
   // Widen the source-level "references loop param" check so destructured
   // callbacks fire too — the pattern text `[, cfg]` never word-matches on
   // bare `cfg` but individual binding names do (#951). Consumes a
   // pre-computed `Set<string>` of free identifiers (#1267) rather than
   // running word-boundary regex on the expression text.
-  const refsAnyBindingViaFreeIds = (freeIds: ReadonlySet<string>): boolean => {
-    if (loopParamBindings && loopParamBindings.length > 0) {
-      for (const b of loopParamBindings) {
-        if (freeIds.has(b.name)) return true
-      }
-      return false
-    }
-    return loopParam ? freeIds.has(loopParam) : false
-  }
+  //
+  // #2861: also checks the loop's INDEX binding, not just item/destructure
+  // — `scope.valueBoundNames()` already unions all three (the same query
+  // Phase 1's `referencesLoopParam` reads to grant a slot at all), so a
+  // condition referencing only the index (e.g. `{i % 2 === 0 ? … : null}`)
+  // no longer dies at this pre-gate before `classifyReactivity` even runs.
+  const refsAnyBindingViaFreeIds = (freeIds: ReadonlySet<string>): boolean =>
+    scope !== undefined && anyNameIn(scope.valueBoundNames(), freeIds)
 
   walkIR(node, null, {
     // element / fragment / component / provider auto-descend with same scope.
@@ -1473,13 +1561,13 @@ export function collectLoopChildConditionals(
         preambleNames !== undefined &&
         preambleNames.size > 0 &&
         anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames)
-      // Loop-param conditionals are reactive via per-item signal accessors;
-      // classifyReactivity sees both paths (signal/memo/prop + loop-param).
-      if (!readsPreamble && classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') return
+      // Loop-param/loop-index conditionals are reactive via per-item signal
+      // accessors; classifyReactivity sees all three paths (signal/memo/prop
+      // + loop-param + loop-index, #2861).
+      if (!readsPreamble && classifyReactivity(expanded.expr, ctx, scope, expanded.freeIds).kind === 'none') return
 
-      const loopParamsForCond = loopParam
-        ? [{ param: loopParam, bindings: loopParamBindings }]
-        : undefined
+      const loopParamsForCond =
+        loopParams ?? (loopParam ? [{ param: loopParam, bindings: loopParamBindings, index: loopIndex }] : undefined)
       // `__slots` matches the closure variable emitted by
       // `stringifyLoopChildConditional` — Child-position interpolations
       // get wrapped in `__bfSlot(EXPR, __slots)` so live `Node` returns
@@ -1520,7 +1608,13 @@ function summarizeLoopChildBranch(
   /** Enclosing loop's index param name — see `collectLoopChildConditionals` (Copilot review on #2595). */
   loopIndex?: string | null,
 ): LoopChildBranchSummary {
-  const inner = collectInnerLoops([node], siblingOffsets, loopParam, ctx, branchInnerLoopOptions)
+  const inner = collectInnerLoops(
+    [node],
+    siblingOffsets,
+    loopParam ? { param: loopParam, bindings: loopParamBindings, index: loopIndex } : undefined,
+    ctx,
+    branchInnerLoopOptions,
+  )
   return {
     childComponents: collectConditionalBranchChildComponents(node),
     innerLoops: inner.length > 0 ? inner : undefined,

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

@@ -11,14 +11,13 @@
  */
 
 import type { BranchLoop } from '../../types.ts'
-import { buildChainedArrayExpr, varSlotId, wrapLoopParamAsAccessor } from '../../utils.ts'
+import { buildChainedArrayExpr, varSlotId } from '../../utils.ts'
 import { buildBranchCompositePlan } from './build-composite-loop.ts'
 import { buildBranchLoopDelegationPlan } from './build-event-delegation.ts'
 import { buildReactiveEffectsPlan } from './build-reactive-effects.ts'
-import { buildLazyRowPlan } from './build-lazy-row.ts'
+import { buildPlainRowCore } from './build-plain-row.ts'
 import type { LazyRowScopeInfo } from './lazy-row-eligibility.ts'
-import { destructureLoopParam, loopKeyFn, buildChildRefBindings, buildPreambleRegionPlans } from '../shared.ts'
-import { renderPreamble, irToHtmlTemplate } from '../../html-template.ts'
+import { loopKeyFn, buildChildRefBindings } from '../shared.ts'
 import type {
   BranchCompositeLoopPlan,
   BranchLoopPlan,
@@ -44,7 +43,6 @@ export function buildBranchLoopPlan(
     return composite
   }
 
-  const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(loop.param, loop.paramBindings)
   const hasReactiveEffects = loop.bindings.reactiveAttrs.length > 0
     || loop.bindings.reactiveTexts.length > 0
     || loop.bindings.conditionals.length > 0
@@ -54,14 +52,18 @@ export function buildBranchLoopPlan(
   const arrayExpr = fm
     ? `(${buildChainedArrayExpr(loop)}).flatMap(${fm.params} => ${fm.body})`
     : buildChainedArrayExpr(loop)
-  const indexParam = loop.index || '__idx'
-  const mapPreambleWrapped = loop.preamble
-    ? renderPreamble(loop.preamble, {
-        transformJs: (t) => wrapLoopParamAsAccessor(t, loop.param, loop.paramBindings),
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined),
-      })
-    : ''
-  const preambleRegions = buildPreambleRegionPlans(loop.preambleRegions, loop.param, loop.paramBindings)
+
+  // Shared "wrap item → decide lazy → wrap index" core (#2859 follow-up) —
+  // see `build-plain-row.ts`'s module docstring for the full rationale.
+  const core = buildPlainRowCore({
+    loop,
+    arrayExpr,
+    callSite: 'branch-plain',
+    flatMapLeafItem: Boolean(fm),
+    anchored: false,
+    scope: lazyScope,
+  })
+  const { paramHead, paramUnwrap, indexParam, preambleRegions, lazyRow } = core
   const plan: BranchPlainLoopPlan = {
     kind: 'plain',
     rowConstruction: 'string-template',
@@ -78,21 +80,10 @@ export function buildBranchLoopPlan(
     indexParam,
     // Wrap loop-param references to signal-accessor form so the preamble
     // matches the template literal's already-wrapped reads (#1065).
-    mapPreambleWrapped,
+    mapPreambleWrapped: core.mapPreambleWrapped,
     // Lazy row graph (§9, L3) — undefined for every ineligible loop.
-    lazyRow: buildLazyRowPlan({
-      loop,
-      arrayExpr,
-      indexParam,
-      paramUnwrap,
-      mapPreambleWrapped,
-      preambleRegionCount: preambleRegions.length,
-      callSite: 'branch-plain',
-      flatMapLeafItem: Boolean(fm),
-      anchored: false,
-      scope: lazyScope,
-    }) ?? undefined,
-    template: loop.template,
+    lazyRow,
+    template: core.template,
     reactiveEffects: hasReactiveEffects
       ? buildReactiveEffectsPlan({
           attrs: loop.bindings.reactiveAttrs,
@@ -100,11 +91,12 @@ export function buildBranchLoopPlan(
           conditionals: loop.bindings.conditionals,
           loopParam: loop.param,
           loopParamBindings: loop.paramBindings,
+          loopIndex: loop.index,
           profileComponentName,
         })
       : null,
     eventDelegation: buildBranchLoopDelegationPlan(loop, cv, profileComponentName),
-    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings),
+    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings, loop.index),
     preambleRegions,
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${containerSlotId}` : undefined,

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

@@ -34,8 +34,8 @@ import { internalInvariant } from '../../../errors.ts'
 /** @internal — prefer `buildLoopPlan`. */
 export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?: string): ComponentLoopPlan {
   const { name } = elem.childComponent!
-  const propsExpr = buildComponentPropsExpr(elem.childComponent!, elem.param)
-  const keyExpr = wrapLoopParamAsAccessor(elem.key || '__idx', elem.param, elem.paramBindings)
+  const propsExpr = buildComponentPropsExpr(elem.childComponent!, elem.param, undefined, elem.index)
+  const keyExpr = wrapLoopParamAsAccessor(elem.key || '__idx', elem.param, elem.paramBindings, elem.index)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings)
 
   // A component-root loop's preamble is JS-only by construction: Phase 1
@@ -47,7 +47,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
   // that let a JSX-bearing preamble through is missing, not this line.
   const mapPreambleWrapped = elem.preamble
     ? renderPreamble(elem.preamble, {
-        transformJs: text => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings),
+        transformJs: text => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings, elem.index),
         renderLeaf: () => {
           internalInvariant(false, 'component-root loop received a JSX-bearing preamble — Phase 1 should have refused it')
         },
@@ -62,13 +62,14 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
       : false
     const rawChildrenExpr = isTextOnly ? irChildrenToJsExpr(comp.children!) : null
     const childrenFreeIds = isTextOnly && comp.children ? irChildrenFreeIds(comp.children) : undefined
-    const childrenRefsLoop = rawChildrenExpr != null && childrenFreeIds != null && childrenFreeIds.has(elem.param)
+    const childrenRefsLoop = rawChildrenExpr != null && childrenFreeIds != null
+      && (childrenFreeIds.has(elem.param) || (!!elem.index && childrenFreeIds.has(elem.index)))
     return {
       componentName: comp.name,
       selector: buildCompSelector(comp),
-      propsExpr: buildComponentPropsExpr(comp, elem.param),
+      propsExpr: buildComponentPropsExpr(comp, elem.param, undefined, elem.index),
       childrenTextEffect: childrenRefsLoop
-        ? { wrappedChildren: wrapLoopParamAsAccessor(rawChildrenExpr!, elem.param, elem.paramBindings) }
+        ? { wrappedChildren: wrapLoopParamAsAccessor(rawChildrenExpr!, elem.param, elem.paramBindings, elem.index) }
         : null,
     }
   })
@@ -98,7 +99,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
     // the per-item factory has no `__el` handle to invoke. Still required
     // by the type so the structural invariant (every variant has a
     // `childRefs`) is preserved; populated as empty.
-    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings, elem.index),
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
     childConditionalEffects: hasChildConds
       ? buildReactiveEffectsPlan({
@@ -107,6 +108,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
           conditionals: elem.bindings.conditionals,
           loopParam: elem.param,
           loopParamBindings: elem.paramBindings,
+          loopIndex: elem.index,
           profileComponentName,
         })
       : null,

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

@@ -31,7 +31,7 @@ export function buildTopLevelCompositePlan(elem: TopLevelLoop, profileComponentN
   const nestedComps = elem.nestedComponents!
   const depthLevels = buildDepthLevels(elem.innerLoops ?? [], nestedComps, elem.bindings.events)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings)
-  const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings)
+  const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings, elem.index)
 
   const outerCompsByDepth = nestedComps.filter(c => !c.loopDepth || c.loopDepth === 0)
 
@@ -48,21 +48,23 @@ export function buildTopLevelCompositePlan(elem: TopLevelLoop, profileComponentN
     mapPreambleWrapped: elem.preamble
       ? renderPreamble(elem.preamble, {
           transformJs: wrap,
-          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined),
+          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings, index: elem.index }], undefined),
         })
       : '',
     template: elem.template,
     outerComps: filterCondCompsOut(outerCompsByDepth, elem.bindings.conditionals),
     outerEvents: elem.bindings.events.filter(ev => ev.nestedLoops.length === 0),
-    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings, elem.index),
     innerLoops: buildInnerLoopsPlan({
       levels: depthLevels,
       parentElVar: '__el',
       outerLoopParam: elem.param,
       outerLoopParamBindings: elem.paramBindings,
+      outerLoopIndex: elem.index,
     }),
     loopParam: elem.param,
     loopParamBindings: elem.paramBindings,
+    loopIndex: elem.index,
     reactiveEffects: hasReactive(elem)
       ? buildReactiveEffectsPlan({
           attrs: elem.bindings.reactiveAttrs,
@@ -70,6 +72,7 @@ export function buildTopLevelCompositePlan(elem: TopLevelLoop, profileComponentN
           conditionals: elem.bindings.conditionals,
           loopParam: elem.param,
           loopParamBindings: elem.paramBindings,
+          loopIndex: elem.index,
           profileComponentName,
         })
       : null,
@@ -88,7 +91,7 @@ export function buildBranchCompositePlan(loop: BranchLoop, cv: string, profileCo
   const childEvents = loop.bindings.events
   const depthLevels = buildDepthLevels(innerLoops, nestedComps, childEvents)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(loop.param, loop.paramBindings)
-  const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, loop.param, loop.paramBindings)
+  const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, loop.param, loop.paramBindings, loop.index)
 
   const outerCompsByDepth = nestedComps.filter(c => !c.loopDepth || c.loopDepth === 0)
 
@@ -108,21 +111,23 @@ export function buildBranchCompositePlan(loop: BranchLoop, cv: string, profileCo
     mapPreambleWrapped: loop.preamble
       ? renderPreamble(loop.preamble, {
           transformJs: wrap,
-          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined),
+          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings, index: loop.index }], undefined),
         })
       : '',
     template: loop.template,
     outerComps: filterCondCompsOut(outerCompsByDepth, loop.bindings.conditionals),
     outerEvents: childEvents.filter(ev => ev.nestedLoops.length === 0),
-    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings),
+    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings, loop.index),
     innerLoops: buildInnerLoopsPlan({
       levels: depthLevels,
       parentElVar: '__el',
       outerLoopParam: loop.param,
       outerLoopParamBindings: loop.paramBindings,
+      outerLoopIndex: loop.index,
     }),
     loopParam: loop.param,
     loopParamBindings: loop.paramBindings,
+    loopIndex: loop.index,
     reactiveEffects: hasReactiveBranch(loop)
       ? buildReactiveEffectsPlan({
           attrs: loop.bindings.reactiveAttrs,
@@ -130,6 +135,7 @@ export function buildBranchCompositePlan(loop: BranchLoop, cv: string, profileCo
           conditionals: loop.bindings.conditionals,
           loopParam: loop.param,
           loopParamBindings: loop.paramBindings,
+          loopIndex: loop.index,
           profileComponentName,
         })
       : null,