@barefootjs/jsx 0.35.0 → 0.35.2

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

@@ -13,7 +13,7 @@
 
 import { varSlotId, DATA_BF_PH, keyAttrName, mapArrayKeyArgs, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
-import { emitAttrUpdate } from '../../emit-reactive.ts'
+import { emitDedupedAttrUpdate, DEDUP_STORE_DECL } from '../../emit-reactive.ts'
 import { namespaceWrapForTemplate } from './template-parse.ts'
 import { emitListenerLine } from './event-listener.ts'
 import { nameForRegistryRef } from '../../component-scope.ts'
@@ -46,15 +46,25 @@ export function stringifyBranchReactiveAttrs(
   lines: string[],
   plan: readonly ReactiveAttrSlot[],
   indent: string,
-  pc?: string,
+  pc: string | undefined,
+  /** The row's preamble re-run statement, when this scope has one (#2596/#2447) — see `conditionGetterExpr`'s docstring for the shared contract. */
+  mapPreambleWrapped: string | undefined,
 ): void {
   for (const slot of plan) {
     const varName = `__ra_${varSlotId(slot.slotId)}`
     lines.push(`${indent}{ const ${varName} = qsa(__branchScope, '[bf="${slot.slotId}"]')`)
+    lines.push(`${indent}${DEDUP_STORE_DECL}`)
     lines.push(`${indent}if (${varName}) {`)
+    let ordinal = 0
     for (const attr of slot.attrs) {
       lines.push(`${indent}  __disposers.push(createDisposableEffect(() => {`)
-      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
+      // One effect per attr, so an attr reading a preamble local needs the
+      // declarations inside ITS OWN effect — same rule, same line, as
+      // `emitAttrSlotsGranular` (reactive-effects.ts, #2447 follow-up).
+      if (attr.readsPreamble && mapPreambleWrapped) {
+        lines.push(`${indent}    ${mapPreambleWrapped}`)
+      }
+      for (const stmt of emitDedupedAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta, ordinal++)) {
         lines.push(`${indent}    ${stmt}`)
       }
       lines.push(`${indent}  }${profileBindingId(pc, slot.slotId)}))`)
@@ -156,6 +166,8 @@ export function stringifyBranchInnerLoops(
         [...inner.legacyEvents],
         inner.outerLoopParam,
         inner.outerLoopParamBindings,
+        false,
+        inner.outerLoopIndex,
       )
     }
     const conditionalTexts = inner.reactiveTexts.filter(t => t.insideConditional)
@@ -177,7 +189,13 @@ export function stringifyBranchInnerLoops(
       }
     }
     if (inner.nestedConditionals.length > 0) {
-      stringifyLoopChildConditionals(lines, inner.nestedConditionals, `${indent}  `, pc)
+      // An inner loop's own conditionals are classified against the INNER
+      // loop's preamble names, not the outer row's — `BranchInnerLoop`
+      // carries no re-runnable preamble string for that scope, so there is
+      // nothing correct to inject here. The `readsPreamble && mapPreambleWrapped`
+      // guard downstream makes this `undefined` a no-op, exactly as before
+      // this fix (inner-loop preambles are out of scope — see PR notes).
+      stringifyLoopChildConditionals(lines, inner.nestedConditionals, `${indent}  `, pc, undefined)
     }
     lines.push(`${indent}  return __bel${uid}`)
     // #2753 Shape B: see the identical comment in `inner-loop.ts` —
@@ -198,33 +216,55 @@ export function stringifyLoopChildConditionals(
   lines: string[],
   conditionals: readonly LoopChildConditionalPlan[],
   indent: string,
-  pc?: string,
+  pc: string | undefined,
+  /** The row's preamble re-run statement, when this scope has one (#2596/#2447). */
+  mapPreambleWrapped: string | undefined,
 ): void {
   for (const cond of conditionals) {
-    stringifyLoopChildConditional(lines, cond, indent, pc)
+    stringifyLoopChildConditional(lines, cond, indent, pc, mapPreambleWrapped)
   }
 }
 
+/**
+ * The `() => cond` getter handed to `insert()`. A condition flagged
+ * `readsPreamble` (#2596) re-runs the row preamble INSIDE the getter —
+ * `insert()` re-invokes this closure on every dependency change to decide
+ * the branch, and a preamble local is a plain per-row `const`, not a signal
+ * `insert()` can see through on its own. ONE implementation for both the
+ * outer (`emitOuterConditional`, reactive-effects.ts) and nested
+ * (`stringifyLoopChildConditional`, here) levels so the two can't drift.
+ */
+export function conditionGetterExpr(
+  wrappedCondition: string,
+  readsPreamble: boolean | undefined,
+  mapPreambleWrapped: string | undefined,
+): string {
+  return readsPreamble && mapPreambleWrapped
+    ? `() => { ${mapPreambleWrapped}; return (${wrappedCondition}) }`
+    : `() => ${wrappedCondition}`
+}
+
 function stringifyLoopChildConditional(
   lines: string[],
   cond: LoopChildConditionalPlan,
   indent: string,
   pc: string | undefined,
+  mapPreambleWrapped: string | undefined,
 ): void {
   const armIndent = `${indent}    `
   // Body-form arrows wire `__bfSlot` captures into the runtime so live
   // `Node` returns from Child-position interpolations are spliced into
   // the parsed fragment instead of being stringified by the surrounding
   // template literal (#1213).
-  lines.push(`${indent}insert(${cond.scopeVar}, '${cond.slotId}', () => ${cond.wrappedCondition}, {`)
+  lines.push(`${indent}insert(${cond.scopeVar}, '${cond.slotId}', ${conditionGetterExpr(cond.wrappedCondition, cond.readsPreamble, mapPreambleWrapped)}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc, mapPreambleWrapped)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenFalseTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc, mapPreambleWrapped)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
@@ -242,6 +282,8 @@ export function stringifyLoopChildArm(
   arm: LoopChildArmPlan,
   armIndent: string,
   pc: string | undefined,
+  /** The row's preamble re-run statement, when this scope has one (#2596/#2447) — forwarded to this arm's own reactive attrs and nested conditionals. */
+  mapPreambleWrapped: string | undefined,
 ): void {
   stringifyBranchEventBindings(lines, arm.events, armIndent)
   stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
@@ -257,7 +299,7 @@ export function stringifyLoopChildArm(
   if (!hasDisposables) return
 
   lines.push(`${armIndent}const __disposers = []`)
-  stringifyBranchReactiveAttrs(lines, arm.attrs, armIndent, pc)
+  stringifyBranchReactiveAttrs(lines, arm.attrs, armIndent, pc, mapPreambleWrapped)
 
   // Nested conditionals: each inner `insert()` is wrapped in its own
   // disposable effect so disposing THIS entry cascades to whatever
@@ -265,7 +307,7 @@ export function stringifyLoopChildArm(
   // conditional's nested-conditional handling in stringify/insert.ts).
   for (const cond of arm.nestedConditionals) {
     lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => {`)
-    stringifyLoopChildConditional(lines, cond, `${armIndent}  `, pc)
+    stringifyLoopChildConditional(lines, cond, `${armIndent}  `, pc, mapPreambleWrapped)
     lines.push(`${armIndent}}))`)
   }
 

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

@@ -30,7 +30,7 @@
  */
 
 import { emitRefCall, varSlotId, profileBindingId } from '../../utils.ts'
-import { emitAttrUpdate } from '../../emit-reactive.ts'
+import { emitDedupedAttrUpdate, DEDUP_STORE_DECL } from '../../emit-reactive.ts'
 import { stringifyReactiveEffects } from './reactive-effects.ts'
 import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr, namespaceWrapForTemplate, multiRootNamespaceWrapForTemplate, wrapHtmlForNamespace } from './template-parse.ts'
 import { buildSkeletonPathPlan, type SkeletonPathPlan } from './skeleton-paths.ts'
@@ -452,13 +452,15 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
     lines.push(`      }`)
   }
   lines.push(`      if (__iterEl) {`)
+  if (attrsBySlot.length > 0) lines.push(`        ${DEDUP_STORE_DECL}`)
+  let ordinal = 0
   for (const [slotId, attrs] of attrsBySlot) {
     const varName = `__t_${varSlotId(slotId)}`
     lines.push(`        const ${varName} = qsa(__iterEl, '[bf="${slotId}"]')`)
     lines.push(`        if (${varName}) {`)
     for (const attr of attrs) {
       lines.push(`          createEffect(() => {`)
-      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.expression, attr)) {
+      for (const stmt of emitDedupedAttrUpdate(varName, attr.attrName, attr.expression, attr, ordinal++)) {
         lines.push(`            ${stmt}`)
       }
       lines.push(`          }${profileBindingId(pc, slotId)})`)

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

@@ -32,8 +32,8 @@
  */
 
 import { varSlotId, profileBindingId } from '../../utils.ts'
-import { emitAttrUpdate } from '../../emit-reactive.ts'
-import { stringifyLoopChildArm } from './loop-child-arm.ts'
+import { emitDedupedAttrUpdate, DEDUP_STORE_DECL } from '../../emit-reactive.ts'
+import { stringifyLoopChildArm, conditionGetterExpr } from './loop-child-arm.ts'
 import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 import type {
   NestedConditionalPlan,
@@ -103,7 +103,11 @@ export interface StringifyReactiveEffectsOptions {
    * The loop callback's pre-return preamble (already wrapped with the loop
    * param accessor), re-run once per row-effect tick — BEFORE any preamble
    * region read — so `preambleRegions`' `valueExpr`s see freshly recomputed
-   * locals. Only meaningful alongside `preambleRegions`.
+   * locals. Also consumed by every OTHER `readsPreamble` site in this row's
+   * scope: row-level attrs (`emitAttrSlotsGranular`/`emitConsolidatedRowEffect`),
+   * outer condition getters (`emitOuterConditional`), and — forwarded
+   * through `stringifyLoopChildArm` (#2596 follow-up) — that row's branch
+   * arms' own reactive attrs and nested condition getters.
    */
   mapPreambleWrapped?: string
 }
@@ -160,7 +164,9 @@ function emitAttrSlotsGranular(
     const varName = `__ra_${varSlotId(slot.slotId)}`
     const lookupExpr = attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot)
     lines.push(`${indent}{ const ${varName} = ${lookupExpr}`)
+    lines.push(`${indent}${DEDUP_STORE_DECL}`)
     lines.push(`${indent}if (${varName}) {`)
+    let ordinal = 0
     for (const attr of slot.attrs) {
       lines.push(`${indent}  createEffect(() => {`)
       // Profile mode keeps one effect per attr, so an attr reading a preamble
@@ -171,7 +177,7 @@ function emitAttrSlotsGranular(
       if (attr.readsPreamble && mapPreambleWrapped) {
         lines.push(`${indent}    ${mapPreambleWrapped}`)
       }
-      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
+      for (const stmt of emitDedupedAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta, ordinal++)) {
         lines.push(`${indent}    ${stmt}`)
       }
       lines.push(`${indent}  }${bindingBfId(slot.slotId)})`)
@@ -233,11 +239,14 @@ function attrLookupExpr(
  * dispatches per-slot on `kind`), so a row pays for at most one `lazySlots`
  * closure + one claim `Map` instead of one per category.
  *
- * Every attr's write statements are wrapped in their own `{ }` block (not
- * just each slot's) — `emitAttrUpdate`'s 'value'-attr shape emits a bare
- * `const __val = …` with no block of its own, and merging multiple attrs
- * into one function body (previously each had its own arrow-function scope)
- * would let two 'value' attrs in the same row effect collide on `__val`.
+ * Every attr write goes through `emitDedupedAttrUpdate` (#2869): a
+ * self-contained `{ }` block (so two 'value' attrs in the same row effect
+ * can't collide on `emitAttrUpdate`'s bare `const __val`) behind a
+ * previous-value guard on the row's ONE `__l` store, ordinals sequential
+ * across every slot in the row. Without the guard, fusing bindings into one
+ * effect meant a change to ANY binding rewrote ALL of them on every rerun —
+ * `untrack()` on one binding's read couldn't stop a sibling binding's
+ * legitimate change from re-triggering this effect and re-writing it anyway.
  */
 function emitConsolidatedRowEffect(
   lines: string[],
@@ -258,6 +267,11 @@ function emitConsolidatedRowEffect(
     const varName = `__ra_${varSlotId(slot.slotId)}`
     lines.push(`${indent}const ${varName} = ${attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot)}`)
   }
+  // Row-wide dedup store (#2869) — one `__l`, shared by every attr write
+  // below via a sequential ordinal, so a sibling binding's legitimate
+  // rerun of this shared effect can't force an unchanged binding to
+  // rewrite too.
+  if (attrSlots.length > 0) lines.push(`${indent}${DEDUP_STORE_DECL}`)
 
   // 2. ONE claimed-slot writer covering outer texts (kind 'text') and
   //    preamble regions (kind 'markup') — mixed-kind plans are supported by
@@ -293,15 +307,14 @@ function emitConsolidatedRowEffect(
   if (mapPreambleWrapped && (preambleRegions.length > 0 || attrsReadPreamble(attrSlots))) {
     lines.push(`${indent}  ${mapPreambleWrapped}`)
   }
+  let ordinal = 0
   for (const slot of attrSlots) {
     const varName = `__ra_${varSlotId(slot.slotId)}`
     lines.push(`${indent}  if (${varName}) {`)
     for (const attr of slot.attrs) {
-      lines.push(`${indent}    {`)
-      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
-        lines.push(`${indent}      ${stmt}`)
+      for (const stmt of emitDedupedAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta, ordinal++)) {
+        lines.push(`${indent}    ${stmt}`)
       }
-      lines.push(`${indent}    }`)
     }
     lines.push(`${indent}  }`)
   }
@@ -354,18 +367,16 @@ function emitOuterConditional(
   // scope here (it's a plain per-row `const`, not a signal `insert()` can see
   // through on its own). Same treatment as `readsPreamble` attrs
   // (`emitAttrUpdate`'s callers) get ahead of their own write.
-  const conditionGetter = cond.readsPreamble && mapPreambleWrapped
-    ? `() => { ${mapPreambleWrapped}; return (${cond.wrappedCondition}) }`
-    : `() => ${cond.wrappedCondition}`
+  const conditionGetter = conditionGetterExpr(cond.wrappedCondition, cond.readsPreamble, mapPreambleWrapped)
   lines.push(`${indent}insert(${elVar}, '${cond.slotId}', ${conditionGetter}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc, mapPreambleWrapped)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenFalseTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc, mapPreambleWrapped)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }

package/src/ir-to-client-js/emit-reactive.ts

@@ -85,6 +85,9 @@ function emitChildValueMirrorStatements(target: string, expression: string): str
  * Generate JS statements to update a DOM attribute reactively.
  * Centralizes the attribute-type dispatch (value, class, boolean, presence, generic)
  * so that new AttrMeta flags are handled in one place.
+ *
+ * Per-kind WRITE dispatch only — an effect body must never call this
+ * directly, only through `emitDedupedAttrUpdate` below (#2869).
  */
 export function emitAttrUpdate(target: string, attrName: string, expression: string, meta: AttrMeta): string[] {
   const htmlName = toHtmlAttrName(attrName)
@@ -126,6 +129,81 @@ export function emitAttrUpdate(target: string, attrName: string, expression: str
   ]
 }
 
+/**
+ * Last-value store every deduped attribute write in one emitting block
+ * shares — `const __l = []`, declared ONCE in the block that creates the
+ * effect(s), so the effect closure (a stable object across its own reruns)
+ * captures it and no other effect can see it. Each binding owns a fixed
+ * numeric ordinal into it. The lazy row graph (`control-flow/stringify/
+ * lazy-row.ts`) declares the same `__l` from the reconciler's `entry.last`
+ * instead — `applyItem` / `applyOuter` are separate invocations with no
+ * closure of their own to own the array — but the guard, the temp name,
+ * the ordinal scheme and the record-after-write rule below are shared with
+ * it (#2869).
+ */
+export const DEDUP_STORE_DECL = 'const __l = []'
+
+/**
+ * `__l`-backed dedup test. `in` (not a truthiness check) so a legitimately
+ * `undefined` value still records and still writes once; `!(N in __l)` on
+ * the first run is what makes the first write unconditional — the same
+ * "dedup, no trust-first-run" contract `claim-slots.ts` documents for
+ * 'markup' slots. Moved here from `control-flow/stringify/lazy-row.ts`
+ * so the eager paths below and the lazy row graph share one guard (#2869).
+ */
+export function dedupGuard(ordinal: number): string {
+  return `!(${ordinal} in __l) || !Object.is(__l[${ordinal}], __x)`
+}
+
+/**
+ * The ONLY way an effect body should write a reactive attribute (#2869).
+ * Wraps `emitAttrUpdate`'s per-kind write in a previous-value guard:
+ * compute once into `__x`, write only when `guard` holds, then record
+ * `__x` into `__l[ordinal]` whether or not the write happened, so the
+ * stored value always tracks the latest computation. Without this, every
+ * rerun of a shared effect — a keyed row's fused effect (#2869's report),
+ * or even a plain per-slot effect covering two attrs on one element — rewrote
+ * every attribute in it on every rerun, no matter which binding actually
+ * changed. `untrack()` cannot fix this on its own: it only suppresses
+ * dependency REGISTRATION for the read inside it, not re-execution of the
+ * surrounding effect when an unrelated sibling binding legitimately changes
+ * — so an `<iframe srcdoc={untrack(...)}>` kept reloading every time a
+ * sibling attribute in the same row effect changed.
+ *
+ * Self-contained block: `__x` (and `emitAttrUpdate`'s own `__v` / bare
+ * `const __val`) never leak into the caller's scope, so several bindings
+ * can sit in one effect body without a wrapper block of their own.
+ *
+ * Compares the RAW value, exactly like the lazy-row path always has: an
+ * object-valued `style` / `dangerouslySetInnerHTML` is a fresh object per
+ * run and simply keeps writing as before (no regression, no gain — a
+ * follow-up could compare the coerced value instead).
+ *
+ * `guard` is overridable for the lazy row graph's `__seed`-run DOM
+ * read-compare (`__seed ? <DOM read-compare> : <dedupGuard>`) and `null`
+ * for its `createRow` (fresh clone: write unconditionally, still record).
+ */
+export function emitDedupedAttrUpdate(
+  target: string,
+  attrName: string,
+  expression: string,
+  meta: AttrMeta,
+  ordinal: number,
+  guard: string | null = dedupGuard(ordinal),
+): string[] {
+  const write = emitAttrUpdate(target, attrName, '__x', meta)
+  const lines = [`{ const __x = ${expression}`]
+  if (guard) {
+    lines.push(`if (${guard}) {`)
+    for (const stmt of write) lines.push(`  ${stmt}`)
+    lines.push(`}`)
+  } else {
+    lines.push(...write)
+  }
+  lines.push(`__l[${ordinal}] = __x }`)
+  return lines
+}
+
 /**
  * Rewrite destructured prop names in an expression to `(props.xxx ?? default)`.
  * Only applies when the component uses destructured props (not props.xxx style).
@@ -494,20 +572,22 @@ export function emitReactiveAttributeUpdates(lines: string[], ctx: ClientJsConte
 
     for (const [slotId, attrs] of attrsBySlot) {
       const v = varSlotId(slotId)
+      lines.push(`  { ${DEDUP_STORE_DECL}`)
       lines.push(`  createEffect(() => {`)
       lines.push(`    if (_${v}) {`)
+      let ordinal = 0
       for (const attr of attrs) {
         // Catalogued-lowering MUST run before the bare-prop-name rewrite:
         // the matcher needs the source-form receiver (a bare identifier or
         // `props.x`), the exact two shapes `resolveReceiverType` supports —
         // same ordering `jsx-to-ir.ts`'s static-template path documents.
         const expression = rewriteDestructuredPropsInExpr(lower(attr.expression), ctx)
-        for (const stmt of emitAttrUpdate(`_${v}`, attr.attrName, expression, attr)) {
+        for (const stmt of emitDedupedAttrUpdate(`_${v}`, attr.attrName, expression, attr, ordinal++)) {
           lines.push(`      ${stmt}`)
         }
       }
       lines.push(`    }`)
-      lines.push(`  }${bindingIdArg(ctx, slotId)})`)
+      lines.push(`  }${bindingIdArg(ctx, slotId)}) }`)
       lines.push('')
     }
   }
@@ -580,6 +660,7 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
   if (ctx.reactiveChildProps.length > 0) {
     lines.push('')
     lines.push(`  // Reactive child component props`)
+    lines.push(`  { ${DEDUP_STORE_DECL}`)
     lines.push(`  createEffect(() => {`)
 
     const propsByComponent = new Map<string, typeof ctx.reactiveChildProps>()
@@ -591,6 +672,7 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
       propsByComponent.get(key)!.push(prop)
     }
 
+    let ordinal = 0
     for (const [, props] of propsByComponent) {
       const first = props[0]
       // The component's own `comment: true` root child IS `__scope` — query
@@ -609,10 +691,11 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
         // `value` is the CHILD-ROOT MIRROR case, not a developer-authored
         // attribute — route it through the no-SSR-fallback helper instead
         // of `emitAttrUpdate`'s generic (attribute-fallback) dispatch;
-        // see `emitChildValueMirrorStatements`'s docstring (#2716).
+        // see `emitChildValueMirrorStatements`'s docstring (#2716). It has
+        // its own DOM-compare and consumes no dedup ordinal (#2869).
         const stmts = toHtmlAttrName(prop.attrName) === 'value'
           ? emitChildValueMirrorStatements(varName, prop.expression)
-          : emitAttrUpdate(varName, prop.attrName, prop.expression, prop)
+          : emitDedupedAttrUpdate(varName, prop.attrName, prop.expression, prop, ordinal++)
         for (const stmt of stmts) {
           lines.push(`      ${stmt}`)
         }
@@ -620,6 +703,6 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
       lines.push(`    }`)
     }
 
-    lines.push(`  }${bindingIdArg(ctx, ctx.reactiveChildProps[0]?.slotId ?? undefined)})`)
+    lines.push(`  }${bindingIdArg(ctx, ctx.reactiveChildProps[0]?.slotId ?? undefined)}) }`)
   }
 }

package/src/ir-to-client-js/html-template.ts

@@ -911,7 +911,15 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
               // emit sites (`irToComponentTemplateWithOpts`,
               // `generateCsrTemplateWithOpts`), which already pick the
               // prop-rewritten variant.
-              const expr = attrValueToString(p.value, { useTemplate: true }) ?? 'undefined'
+              // Also wrap through `wrapExpr` (#2868 follow-up): this
+              // `renderChild(...)` call can itself live inside a loop row's
+              // conditional-branch HTML (a child component rendered by
+              // `.map()`-row type), so a prop reading the row's own loop
+              // param/index must read the live accessor, same as every
+              // other expression position `irToHtmlTemplate` renders —
+              // previously masked by the post-hoc `wrapLoopParamAsAccessor`
+              // pass over the whole branch string, which #2868 removed.
+              const expr = wrapExpr(attrValueToString(p.value, { useTemplate: true }) ?? 'undefined')
               return `${quotePropName(p.name)}: ${expr}`
             }
           }

package/src/ir-to-client-js/reactivity.ts

@@ -38,15 +38,27 @@ import { identifierCallPattern } from '../identifier-pattern.ts'
  * `index` field through before this fix (see each call site's own
  * `undefined`/omitted-arg default), so `undefined` here still means "not
  * guarded," not "no index param."
+ *
+ * `parentScope` (#2861): stacks this loop-row frame on top of an
+ * ENCLOSING loop's own scope, rather than always starting from
+ * `BindingScope.EMPTY` — for a nested `.map()` inside another `.map()`'s
+ * JSX body. `BindingScope.lookup`/`valueBoundNames` search innermost-first
+ * across every frame, so a row expression referencing the OUTER loop's
+ * item/index (with no dependency on the INNER loop's own item/index or any
+ * signal) is still granted a slot and classified reactive, instead of
+ * silently returning `'none'` because only the inner-most frame was ever
+ * visible. Omitted (or `undefined`) for a loop with no enclosing loop —
+ * identical to the pre-#2861 shape.
  */
 export function buildLoopRowScope(
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
   preambleNames?: ReadonlySet<string>,
   loopIndex?: string | null,
+  parentScope?: BindingScope,
 ): BindingScope | undefined {
   if (!loopParam) return undefined
-  return BindingScope.EMPTY.enterLoopRow({
+  return (parentScope ?? BindingScope.EMPTY).enterLoopRow({
     param: loopParam,
     paramBindings: loopParamBindings,
     index: loopIndex,
@@ -274,14 +286,28 @@ function needsEffectWrapperCore(
 /**
  * Why a given expression should be treated as reactive inside a loop item.
  *
- * Surfaces the two distinct reasons loop-child collectors care about:
+ * Surfaces the three distinct reasons loop-child collectors care about:
  * - `signal-or-memo-or-prop` — the expression reads a signal getter, a memo,
  *   or a prop name (what `needsEffectWrapper` already classifies).
- * - `loop-param` — the expression reads the loop parameter, which becomes a
- *   per-item signal accessor at runtime; the string-level `needsEffectWrapper`
- *   does not know about loop params.
+ * - `loop-param` — the expression reads the loop's item (or a destructured
+ *   binding of it), which becomes a per-item signal accessor at runtime;
+ *   the string-level `needsEffectWrapper` does not know about loop params.
+ * - `loop-index` (#2861) — the expression reads ONLY the loop's index
+ *   parameter (`.map((item, i) => ...)`'s `i`), with no item/signal/memo/prop
+ *   read anywhere else in it (e.g. bare `{i}`, `class={i % 2 === 0 ? …}`).
+ *   `mapArray`/`mapArrayAnchored` hand `renderItem` an index ACCESSOR
+ *   exactly like the item accessor (#2859/#2860), and `mapArrayLazy` tracks
+ *   a row's position on `entry.index` exactly like `entry.item` — but
+ *   before this classification existed, nothing ever put such an
+ *   expression in front of that machinery in the first place: Phase 1
+ *   (`jsx-to-ir.ts`'s `referencesLoopParam`) already grants it a patchable
+ *   slot via `BindingScope.valueBoundNames()` (item/index/destructure
+ *   together), while this function — Phase 2 — had no equivalent case for
+ *   the index alone, so the slot was written once at row-creation time and
+ *   never revisited.
  *
- * `none` means neither applies and the collector can skip the expression.
+ * `none` means none of the three applies and the collector can skip the
+ * expression.
  *
  * Consolidates the duplicated reactive-classification check shared by
  * `collectLoopChildReactiveTexts`, `collectLoopChildReactiveAttrs`, and
@@ -291,37 +317,53 @@ export type ReactivitySource =
   | { kind: 'none' }
   | { kind: 'signal-or-memo-or-prop' }
   | { kind: 'loop-param'; param: string }
+  | { kind: 'loop-index'; param: string }
 
 /**
  * Classify a (constant-expanded) expression as reactive inside a loop item.
- * See `ReactivitySource` for the two reasons we care about. Loop-param
- * matching takes precedence so `loop-param` is reported even when the
- * expression also reads a signal — the `kind` is purely informational and
- * collectors only care about `kind !== 'none'`.
+ * See `ReactivitySource` for the three reasons we care about. Loop-param
+ * and loop-index matching take precedence so one of them is reported even
+ * when the expression also reads a signal — the `kind` is purely
+ * informational and collectors only care about `kind !== 'none'`.
+ *
+ * Takes the row's `BindingScope` (#2482) rather than a raw `(loopParam,
+ * loopParamBindings)` pair so this reads the EXACT SAME query Phase 1's
+ * `referencesLoopParam` reads (`scope.valueBoundNames()` — item/index/
+ * destructure together) to decide whether an expression gets a patchable
+ * slot at all. `undefined` means no enclosing loop.
+ *
+ * For destructured `.map()` callbacks (#951), a `'destructure'`-sourced
+ * binding is reported as `loop-param` — the pattern text itself (e.g.
+ * `{ id, label }`) never word-matches on a bare binding like `id`, so
+ * iterating `valueBoundNames()` (rather than testing the raw param text)
+ * is what catches a destructured reference at all.
  *
- * For destructured `.map()` callbacks (#951), `loopParamBindings` lists each
- * destructured binding name; any reference to one of those names is treated
- * as a `loop-param` hit. The pattern text itself (e.g. `{ id, label }`)
- * never word-matches on a bare binding like `id`, so the straight
- * `loopParam` check misses destructured references without this widening.
+ * Item/destructure bindings are checked before the index so `loop-param`
+ * wins when an expression reads both (e.g. `` `${item.id}-${i}` ``) — this
+ * only affects which `kind` is reported, since every caller of this
+ * function besides the two `ReactivitySource`-typed union members simply
+ * tests `.kind !== 'none'`.
  */
 export function classifyReactivity(
   expr: string,
   ctx: ClientJsContext,
-  loopParam?: string,
-  loopParamBindings?: readonly LoopParamBinding[],
+  scope: BindingScope | undefined,
   freeIdentifiers?: ReadonlySet<string>,
 ): ReactivitySource {
   const has = (name: string): boolean =>
     freeIdentifiers ? freeIdentifiers.has(name) : tokenContainsIdent(expr, name)
-  if (loopParamBindings && loopParamBindings.length > 0) {
-    for (const b of loopParamBindings) {
-      if (has(b.name)) {
-        return { kind: 'loop-param', param: loopParam ?? b.name }
+  if (scope) {
+    let indexHit: string | undefined
+    for (const name of scope.valueBoundNames()) {
+      if (!has(name)) continue
+      const source = scope.lookup(name)?.binding.source
+      if (source === 'index') {
+        indexHit ??= name
+        continue
       }
+      return { kind: 'loop-param', param: name }
     }
-  } else if (loopParam && has(loopParam)) {
-    return { kind: 'loop-param', param: loopParam }
+    if (indexHit) return { kind: 'loop-index', param: indexHit }
   }
   if (needsEffectWrapper(expr, ctx, freeIdentifiers)) {
     return { kind: 'signal-or-memo-or-prop' }
@@ -666,9 +708,11 @@ export function collectLoopChildReactiveTexts(
   stopAtReactiveConditionals = false,
   preambleNames?: ReadonlySet<string>,
   loopIndex?: string | null,
+  /** Enclosing loop's own scope, for a NESTED loop (#2861) — see `buildLoopRowScope`. */
+  parentScope?: BindingScope,
 ): LoopChildReactiveText[] {
   const texts: LoopChildReactiveText[] = []
-  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex)
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex, parentScope)
   walkIR(node, false, {
     // Skip loop/async/if-statement subtrees — the original walker omitted
     // them; they have their own scopes (inner-loop reconciliation, async
@@ -696,7 +740,7 @@ export function collectLoopChildReactiveTexts(
       // `classifyReactivity` can't see through) still gets an update
       // effect instead of silently freezing at its SSR value (#2282).
       const reactive =
-        classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== 'none'
+        classifyReactivity(expanded.expr, ctx, scope, expanded.freeIds).kind !== 'none'
         || decideWrapFromAstFlags(n).wrap
       if (!reactive) return
       texts.push({
@@ -746,9 +790,11 @@ export function collectLoopChildReactiveAttrs(
   stopAtReactiveConditionals = false,
   preambleNames?: ReadonlySet<string>,
   loopIndex?: string | null,
+  /** Enclosing loop's own scope, for a NESTED loop (#2861) — see `buildLoopRowScope`. */
+  parentScope?: BindingScope,
 ): LoopChildReactiveAttr[] {
   const attrs: LoopChildReactiveAttr[] = []
-  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex)
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex, parentScope)
   traverseElements(node, (el) => {
     if (el.slotId) {
       for (const attr of el.attrs) {
@@ -799,7 +845,7 @@ export function collectLoopChildReactiveAttrs(
           preambleNames.size > 0 &&
           anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames)
         const reactive =
-          classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== 'none'
+          classifyReactivity(expanded.expr, ctx, scope, expanded.freeIds).kind !== 'none'
           || readsPreamble
           || attr.callsReactiveGetters
           || attr.hasFunctionCalls