@barefootjs/jsx 0.26.3 → 0.27.0

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

@@ -66,8 +66,19 @@ export interface KeyedItemLookup {
    * decision.
    */
   keyWithItem: string
-  /** Optional preamble line — emitted before the handler call. */
+  /** Optional preamble line — emitted before the handler call, inside the item guard. */
   mapPreamble: string | null
+  /**
+   * `const`/`let`/function names `mapPreamble` declares (from
+   * `MapCallbackPreamble.declaredNames`). The stringifier only splices
+   * `mapPreamble` for an event whose handler text actually references one of
+   * these — a preamble that only feeds unused local state (e.g. a `cells`
+   * array builder never read by the click handler) is dead weight the
+   * delegated handler shouldn't pay for, and emitting it unconditionally is
+   * what let BUG-3's stale-context leaf render go unnoticed. Empty when
+   * `mapPreamble` is `null`.
+   */
+  mapPreambleDeclaredNames: readonly string[]
   /** True when `paramBindings` is non-empty — drives TDZ-safe lookup shape. */
   hasBindings: boolean
 }
@@ -77,6 +88,8 @@ export interface DynamicIndexItemLookup {
   arrayExpr: string
   param: string
   mapPreamble: string | null
+  /** See `KeyedItemLookup.mapPreambleDeclaredNames`. */
+  mapPreambleDeclaredNames: readonly string[]
   hasBindings: boolean
   /** Loop index param name — see `KeyedItemLookup.indexParam` (#2189). */
   indexParam: string | null
@@ -87,6 +100,8 @@ export interface StaticIndexItemLookup {
   arrayExpr: string
   param: string
   mapPreamble: string | null
+  /** See `KeyedItemLookup.mapPreambleDeclaredNames`. */
+  mapPreambleDeclaredNames: readonly string[]
   /** Loop index param name — see `KeyedItemLookup.indexParam` (#2189). */
   indexParam: string | null
   /**

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

@@ -78,6 +78,19 @@ interface DynamicLoopCommon extends LoopPlanCommon {
   paramUnwrap: string
 }
 
+/**
+ * A resolved preamble-patched region (#2389), ready to emit: `valueExpr` is
+ * already wrapped with the loop-param accessor and, for a `joinArrayChild`
+ * source, already carries the array-join ternary — the exact value
+ * `irToHtmlTemplate` computes for the same node in the row template, so a
+ * same-key update's re-patch stays byte-identical to what a fresh mount
+ * would render.
+ */
+export interface PreambleRegionPlan {
+  slotId: string
+  valueExpr: string
+}
+
 /** Per-item ref callback resolved against a child slot for emission (#1244). */
 export interface LoopChildRefBinding {
   /** bf slot ID of the target element (root or descendant of the body). */
@@ -146,6 +159,21 @@ interface PlainLoopVariant extends DynamicLoopCommon {
    * Empty when the loop has no key (only meaningful when `anchored`).
    */
   anchorKeyExpr: string
+  /**
+   * flatMap descriptor mode (`LoopCore.flatMapClient`): `arrayExpr` already
+   * includes the `.flatMap(params => descriptorBody)` projection — the
+   * runtime reconciles the FLATTENED `({ k, h })` leaves — and `keyFn` keys
+   * on `d.k` (index fallback). The stringifier emits the build-or-patch
+   * renderItem (`patchLeaf`) instead of the template-clone shape; `template`
+   * is empty and `mapPreambleWrapped` unused in this mode.
+   */
+  flatMapLeafItem?: boolean
+  /**
+   * Preamble-patched regions (#2389) — non-empty forces the multi-line
+   * renderItem layout (mirrors `childRefs`) so the region-patch effects have
+   * `__el` to query against.
+   */
+  preambleRegions: readonly PreambleRegionPlan[]
 }
 
 /**

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

@@ -20,7 +20,8 @@ import { irChildrenToJsExpr } from '../html-template.ts'
 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 type { LoopChildRefBinding, PreambleRegionPlan } from './plan/loop.ts'
+import type { PreambleRegionSource } from '../../types.ts'
 import {
   extractFreeIdentifiersFromText,
   extractFreeIdentifiersFromStatementText,
@@ -28,7 +29,7 @@ import {
 } from '../csr-substitute.ts'
 
 /**
- * Build the `keyFn` argument for mapArray / reconcileElements. `null` when
+ * Build the `keyFn` argument for mapArray / mapArrayAnchored. `null` when
  * 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
@@ -237,6 +238,30 @@ export function destructureLoopParam(
   return { head: param, unwrap: '' }
 }
 
+/**
+ * Resolve `IRLoop.preambleRegions` (#2389) into ready-to-emit
+ * `PreambleRegionPlan`s: wrap each source expression with the loop-param
+ * accessor and, for a `joinArrayChild` source, apply the same array-join
+ * ternary `irToHtmlTemplate` uses for the identical node in the row
+ * template — so the region-patch effect's re-render matches what a fresh
+ * mount would have produced. Shared by the top-level (`build-loop.ts`) and
+ * branch (`build-branch-loop.ts`) plain-loop-plan builders.
+ */
+export function buildPreambleRegionPlans(
+  regions: readonly PreambleRegionSource[] | undefined,
+  loopParam: string,
+  loopParamBindings: readonly LoopParamBinding[] | undefined,
+): readonly PreambleRegionPlan[] {
+  if (!regions || regions.length === 0) return []
+  return regions.map((r) => {
+    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings)
+    const valueExpr = r.joinArrayChild
+      ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')`
+      : `escapeText(${wrapped})`
+    return { slotId: r.slotId, valueExpr }
+  })
+}
+
 /**
  * Build a props object expression string from component prop definitions.
  * Shared by emitComponentLoopReconciliation and emitCompositeElementReconciliation.

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

@@ -58,6 +58,7 @@ function emitPlain(lines: string[], plan: BranchPlainLoopPlan): void {
     childRefs,
     bodyIsMultiRoot,
     profileLoopId,
+    preambleRegions,
   } = plan
 
   const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : ''
@@ -69,9 +70,29 @@ function emitPlain(lines: string[], plan: BranchPlainLoopPlan): void {
   // both the effect and its dependency subscriptions (observation O-2).
   lines.push(`      __disposers.push(createDisposableEffect(() => {`)
 
+  // flatMap descriptor mode — build-or-patch renderItem, mirrors the
+  // top-level shape in stringify/loop.ts (see comment there).
+  if (plan.flatMapLeafItem) {
+    lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (__bfD, ${indexParam}, __existing) => {`)
+    lines.push(`          let __el = __existing`)
+    lines.push(`          if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }`)
+    lines.push(`          let __last = __existing ? undefined : __bfD().h`)
+    lines.push(`          createEffect(() => {`)
+    lines.push(`            const __html = __bfD().h`)
+    lines.push(`            if (__last === undefined) { __last = __html; return }`)
+    lines.push(`            if (__html !== __last) { __last = __html; patchLeaf(__el, __html) }`)
+    lines.push(`          })`)
+    lines.push(`          return __el`)
+    lines.push(`        }, '${markerId}'${loopBfId})`)
+    lines.push(`      }))`)
+    stringifyEventDelegation(lines, eventDelegation)
+    return
+  }
+
   // Non-empty `childRefs` need `__el` as a handle inside the factory body,
-  // so force the multi-line layout (#1244).
-  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0) {
+  // so force the multi-line layout (#1244) — preamble-patched regions
+  // (#2389) need the same handle for their own effect.
+  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0 && preambleRegions.length === 0) {
     // Simple case: single-line renderItem (single root, no reactive effects).
     const cloneExpr = emitTemplateCloneInline(template)
     if (mapPreambleWrapped) {
@@ -94,8 +115,17 @@ function emitPlain(lines: string[], plan: BranchPlainLoopPlan): void {
       indent: '          ',
       singleRootLayout: 'inline',
     })
-    if (reactiveEffects !== null) {
-      stringifyReactiveEffects(lines, reactiveEffects, { indent: '          ', elVar: '__el', bodyIsMultiRoot })
+    if (reactiveEffects !== null || preambleRegions.length > 0) {
+      // Row-granularity effects (§3(c)): mirrors `stringifyPlainLoop`'s
+      // top-level call — attrs, outer texts, and preamble regions merge
+      // into ONE row effect (see `stringifyReactiveEffects`'s docstring).
+      stringifyReactiveEffects(lines, reactiveEffects, {
+        indent: '          ',
+        elVar: '__el',
+        bodyIsMultiRoot,
+        preambleRegions,
+        mapPreambleWrapped,
+      })
     }
     emitLoopChildRefs(lines, childRefs, { indent: '          ', elVar: '__el', bodyIsMultiRoot })
     lines.push(`          return __el`)

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

@@ -0,0 +1,68 @@
+/**
+ * Claim-plan literal rendering — the compiler-side half of slot unification
+ * A3 (`spec/slot-unification.md` §4/§5-A3). The runtime's `SlotSpec`/
+ * `ClaimPlan` (`@barefootjs/client/runtime/claim-slots.ts`, A2) are pure
+ * data: `{ id, kind, path }` triples. This module is the single place that
+ * turns compile-time slot descriptors into that data's source-text form —
+ * every content-slot emission site (loop rows, preamble regions, dynamic
+ * text/JSX slots, `@client` expressions) renders its plan through
+ * `claimPlanLiteral`, never by hand-splicing strings, so the literal shape
+ * can only ever match `SlotSpec`.
+ *
+ * Paths are real root-relative child-index arrays wherever the caller
+ * already has them (the hoisted single-root loop skeleton, #2143's
+ * `SkeletonSlotPaths`); everywhere else a slot gets `path: []` and A2's
+ * `lazySlots`/`claimSlots` marker-scan fallback resolves it — sound, just a
+ * per-claim scan instead of an O(depth) walk. This is the explicit
+ * "cannot be statically pathed" escape valve `spec/slot-unification.md`
+ * §5-A3 sanctions, not a shortcut invented here.
+ */
+
+export interface ClaimSlotSpec {
+  readonly id: string
+  readonly kind: 'text' | 'markup'
+  /** Root-relative child-index path, used when the path is unconditionally
+   *  valid at claim time. Ignored when `pathExpr` is set. */
+  readonly path: readonly number[]
+  /**
+   * Raw JS expression (already rendered source text) evaluating to a
+   * `number[]` at runtime, for the one case a plain literal can't express:
+   * a hoisted-skeleton path that's valid ONLY on the fresh-CSR-clone branch,
+   * never on the hydration-adopts-SSR branch (#2143 precedent — `__p` is
+   * nulled when `__existing` is truthy because the skeleton's simplified
+   * markup doesn't describe the real SSR-rendered tree). Typically
+   * `__existing ? [] : [1, 0]`. Overrides `path` when present.
+   */
+  readonly pathExpr?: string
+  /**
+   * Slot unification Step B (`spec/slot-unification.md` §3(b), §5 Step B):
+   * true when NO marker was emitted for this slot — `path`'s last index is
+   * the slot's own position, not an anchor comment. Only ever set by
+   * `client-only-elision.ts`-derived callers; every other emission site
+   * omits it (falsy = today's marker-based behavior, unchanged).
+   */
+  readonly markerless?: boolean
+}
+
+/** Render one `SlotSpec` as a source-text object literal. */
+function slotSpecLiteral(slot: ClaimSlotSpec): string {
+  const pathSrc = slot.pathExpr ?? `[${slot.path.join(', ')}]`
+  const markerlessSrc = slot.markerless ? ', markerless: true' : ''
+  return `{ id: '${slot.id}', kind: '${slot.kind}', path: ${pathSrc}${markerlessSrc} }`
+}
+
+/** Render a `ClaimPlan` (an array of `SlotSpec`) as a source-text array literal. */
+export function claimPlanLiteral(slots: readonly ClaimSlotSpec[]): string {
+  return `[${slots.map(slotSpecLiteral).join(', ')}]`
+}
+
+/**
+ * A stable JS identifier for the claimed-slot writer covering `slots`,
+ * derived from the first slot's id. Slot ids are unique per component (the
+ * `bf="sN"` marker namespace), so this can never collide across two
+ * distinct claim-plan call sites within the same emitted component.
+ */
+export function claimWriterVarName(slots: readonly ClaimSlotSpec[], sanitize: (id: string) => string): string {
+  const first = slots[0]?.id ?? '0'
+  return `__bfw_${sanitize(first)}`
+}

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

@@ -74,6 +74,26 @@ function indexBindingLine(handler: string, indexParam: string | null, indexExpr:
   return `const ${indexParam} = ${indexExpr}`
 }
 
+/**
+ * Splice-only-when-referenced (#3, BUG-3 fix part 2): a preamble is dead
+ * weight for an event whose handler never reads one of the names it
+ * declares — the common case (an unused array builder like `cells` in the
+ * BUG-3 repro). Only emit `mapPreamble` when `handler`'s free identifiers
+ * intersect `declaredNames`; otherwise the delegated handler pays nothing
+ * for a preamble it never uses. `declaredNames` is empty whenever
+ * `mapPreamble` is `null`, so the `!mapPreamble` short-circuit is mostly
+ * redundant but keeps this correct-by-construction if that ever changes.
+ */
+function preambleLineForHandler(
+  mapPreamble: string | null,
+  declaredNames: readonly string[],
+  handler: string,
+): string | null {
+  if (!mapPreamble || declaredNames.length === 0) return null
+  const free = extractFreeIdentifiersFromText(handler)
+  return declaredNames.some((name) => free.has(name)) ? mapPreamble : null
+}
+
 export function stringifyEventDelegation(lines: string[], plan: EventDelegationPlan): void {
   const { containerVar, events, itemLookup, profileComponentName } = plan
   const eventsByName = new Map<string, LoopChildEvent[]>()
@@ -133,7 +153,8 @@ function emitKeyedLookup(
   handlerCall: string,
   lookup: KeyedItemLookup,
 ): void {
-  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings, indexParam } = lookup
+  const { arrayExpr, param, keyWithItem, mapPreamble, mapPreambleDeclaredNames, hasBindings, indexParam } = lookup
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler)
 
   if (ev.nestedLoops.length === 0) {
     // Single-level keyed lookup.
@@ -146,15 +167,28 @@ function emitKeyedLookup(
       ls.push(`        const __bfLoopItem = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`)
       ls.push(`        if (__bfLoopItem) {`)
       ls.push(`          const ${param} = __bfLoopItem`)
-      if (mapPreamble) ls.push(`          ${mapPreamble}`)
+      if (preambleLine) ls.push(`          ${preambleLine}`)
       if (idxLine) ls.push(`          ${idxLine}`)
-      ls.push(`          ${handlerCall}`)
+      // Leading `;` (not just relying on the preceding line's own
+      // semicolon): `handlerCall` always starts with `(` — an ASI hazard
+      // pre-existing in this branch even with neither optional line above
+      // (`const ${param} = __bfLoopItem` has no trailing `;`), which glues
+      // the call onto it as `__bfLoopItem(...)` and throws
+      // `TypeError: __bfLoopItem is not a function`. Defend at the one
+      // emission point rather than chasing every preceding-line shape.
+      ls.push(`          ;${handlerCall}`)
       ls.push(`        }`)
     } else {
+      // The preamble (when referenced) and the handler call both run INSIDE
+      // the item null guard — a `.find()` miss (stale-DOM race, e.g. the
+      // clicked row's key no longer in the current array) must short-circuit
+      // before a preamble that dereferences the item ever runs (BUG-4).
       ls.push(`        const ${param} = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`)
-      if (mapPreamble) ls.push(`        ${mapPreamble}`)
-      if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
-      else ls.push(`        if (${param}) ${handlerCall}`)
+      ls.push(`        if (${param}) {`)
+      if (preambleLine) ls.push(`          ${preambleLine}`)
+      if (idxLine) ls.push(`          ${idxLine}`)
+      ls.push(`          ;${handlerCall}`)
+      ls.push(`        }`)
     }
     ls.push(`      }`)
     return
@@ -187,10 +221,14 @@ function emitKeyedLookup(
   }
   const outerGuard = hasBindings ? '__bfLoopItem' : param
   const allParams = [outerGuard, ...ev.nestedLoops.map(n => n.param)]
-  if (mapPreamble) ls.push(`      ${mapPreamble}`)
+  // Preamble and idx binding run INSIDE the combined item guard (BUG-4) —
+  // a nested `.find()` miss must short-circuit before the preamble runs.
   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}`)
+  ls.push(`      if (${allParams.join(' && ')}) {`)
+  if (preambleLine) ls.push(`        ${preambleLine}`)
+  if (idxLine) ls.push(`        ${idxLine}`)
+  ls.push(`        ;${handlerCall}`)
+  ls.push(`      }`)
 }
 
 function emitDynamicIndexLookup(
@@ -199,7 +237,8 @@ function emitDynamicIndexLookup(
   handlerCall: string,
   lookup: DynamicIndexItemLookup,
 ): void {
-  const { arrayExpr, param, mapPreamble, hasBindings, indexParam } = lookup
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, hasBindings, indexParam } = lookup
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler)
   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) {`)
@@ -208,15 +247,19 @@ function emitDynamicIndexLookup(
     ls.push(`        const __bfLoopItem = ${arrayExpr}[idx]`)
     ls.push(`        if (__bfLoopItem) {`)
     ls.push(`          const ${param} = __bfLoopItem`)
-    if (mapPreamble) ls.push(`          ${mapPreamble}`)
+    if (preambleLine) ls.push(`          ${preambleLine}`)
     if (idxLine) ls.push(`          ${idxLine}`)
-    ls.push(`          ${handlerCall}`)
+    ls.push(`          ;${handlerCall}`)
     ls.push(`        }`)
   } else {
+    // Preamble and idx binding run INSIDE the item null guard (BUG-4) — an
+    // out-of-range index (stale-DOM race) must short-circuit first.
     ls.push(`        const ${param} = ${arrayExpr}[idx]`)
-    if (mapPreamble) ls.push(`        ${mapPreamble}`)
-    if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
-    else ls.push(`        if (${param}) ${handlerCall}`)
+    ls.push(`        if (${param}) {`)
+    if (preambleLine) ls.push(`          ${preambleLine}`)
+    if (idxLine) ls.push(`          ${idxLine}`)
+    ls.push(`          ;${handlerCall}`)
+    ls.push(`        }`)
   }
   ls.push(`      }`)
 }
@@ -228,7 +271,8 @@ function emitStaticIndexLookup(
   lookup: StaticIndexItemLookup,
   containerVar: string,
 ): void {
-  const { arrayExpr, param, mapPreamble, offset, indexParam } = lookup
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, offset, indexParam } = lookup
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler)
   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`)
@@ -236,8 +280,12 @@ function emitStaticIndexLookup(
   const idxOffset = buildLoopChildIndexSubtraction(offset ?? undefined)
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`)
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`)
-  if (mapPreamble) ls.push(`        ${mapPreamble}`)
-  if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
-  else ls.push(`        if (${param}) ${handlerCall}`)
+  // Preamble and idx binding run INSIDE the item null guard (BUG-4) — an
+  // out-of-range index (stale-DOM race) must short-circuit first.
+  ls.push(`        if (${param}) {`)
+  if (preambleLine) ls.push(`          ${preambleLine}`)
+  if (idxLine) ls.push(`          ${idxLine}`)
+  ls.push(`          ;${handlerCall}`)
+  ls.push(`        }`)
   ls.push(`      }`)
 }

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

@@ -30,11 +30,12 @@
  *     <indent>}) }
  */
 
-import { keyAttrName, profileBindingId } from '../../utils.ts'
+import { keyAttrName, profileBindingId, varSlotId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { emitMultiRootTemplateCloneLines, templateRootIsSvg } from './template-parse.ts'
 import { emitLoopChildRefs } from './loop.ts'
+import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 import type {
   InnerLoopPlan,
   InnerLoopsPlan,
@@ -110,15 +111,23 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
   if (inner.childLevels.length > 0) {
     stringifyInnerLoops(lines, inner.childLevels, `${indent}  `, pc)
   }
-  for (const text of emit.reactiveTexts) {
+  const conditionalTexts = emit.reactiveTexts.filter(t => t.insideConditional)
+  const plainTexts = emit.reactiveTexts.filter(t => !t.insideConditional)
+  for (const text of conditionalTexts) {
     const bf = profileBindingId(pc, text.slotId)
-    if (text.insideConditional) {
-      // Re-query $t inside the effect: insert() may swap the text node so a
-      // captured reference would silently stop updating.
-      lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__innerEl${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`)
-    } else {
-      lines.push(`${indent}  { const [__rt] = $t(__innerEl${uid}, '${text.slotId}')`)
-      lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`)
+    // A fresh `claimSlots` claim on every run (not the cached `lazySlots`
+    // door): insert() may swap the branch's DOM between runs, and 'text'
+    // writes are a plain, idempotent `nodeValue` assignment with no
+    // dedup/trust-first-run state to go stale — so re-claiming here is exactly
+    // as safe as, and replaces, the old re-query-$t-on-every-run discipline.
+    lines.push(`${indent}  createEffect(() => { claimSlots(__innerEl${uid}, [{ id: '${text.slotId}', kind: 'text', path: [] }]).write('${text.slotId}', String(${text.wrappedExpression})) }${bf})`)
+  }
+  if (plainTexts.length > 0) {
+    const slots: ClaimSlotSpec[] = plainTexts.map(t => ({ id: t.slotId, kind: 'text', path: [] }))
+    const writer = claimWriterVarName(slots, varSlotId)
+    lines.push(`${indent}  const ${writer} = lazySlots(__innerEl${uid}, ${claimPlanLiteral(slots)})`)
+    for (const text of plainTexts) {
+      lines.push(`${indent}  createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)})`)
     }
   }
   for (const attr of emit.reactiveAttrs) {

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

@@ -34,6 +34,7 @@ import type { InsertPlan, InsertArm, ArmBody, ScopeRef } from '../plan/types.ts'
 import { stringifyBranchLoops } from './branch-loop.ts'
 import { emitListenerLine } from './event-listener.ts'
 import { nameForRegistryRef } from '../../component-scope.ts'
+import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 
 export interface StringifyInsertOptions {
   /** Indent on the `insert(` line itself. */
@@ -173,18 +174,23 @@ function emitArmBody(
     lines.push(`${indent}} }`)
   }
 
-  for (const te of body.textEffects) {
-    const v = varSlotId(te.slotId)
-    // Route through `__bfText` so a JSX-valued expression (`{cond && logo(id)}`)
+  if (body.textEffects.length > 0) {
+    // 'markup' kind so a JSX-valued expression (`{cond && logo(id)}`)
     // re-splices the live element by identity instead of stringifying it to
-    // "[object HTMLElement]" — the branch template already spliced it via
-    // `__bfSlot`, and this effect re-renders it when its deps change (#1663).
-    // The `let` tracker carries the replaced node across reactive re-runs.
-    lines.push(`${indent}let __anchor_${v} = $t(__branchScope, '${te.slotId}')[0]`)
-    lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`)
-    lines.push(`${indent}  const __val = ${te.expression}`)
-    lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`)
-    lines.push(`${indent}}${bindingBfId(te.slotId)}))`)
+    // "[object HTMLElement]" — the same contract `__bfText` used to provide
+    // (#1663). Built fresh here, inside this arm's `bindEvents` body, so
+    // every branch activation re-claims against that swap's own
+    // `__branchScope` DOM (spec/slot-unification.md §5-A3's "branch-internal
+    // slots re-claim per branch activation").
+    const slots: ClaimSlotSpec[] = body.textEffects.map(te => ({ id: te.slotId, kind: 'markup', path: [] }))
+    const writer = claimWriterVarName(slots, varSlotId)
+    lines.push(`${indent}const ${writer} = lazySlots(__branchScope, ${claimPlanLiteral(slots)})`)
+    for (const te of body.textEffects) {
+      // `escapeTextOrNode`: see emit-reactive.ts's identical wrap for why a
+      // string value must be escaped before a 'markup' writer's
+      // `innerHTML =` insertion, while a live Node passes through untouched.
+      lines.push(`${indent}__disposers.push(createDisposableEffect(() => { ${writer}('${te.slotId}', escapeTextOrNode(${te.expression})) }${bindingBfId(te.slotId)}))`)
+    }
   }
 
   // Branch loops, now fully Plan-built. The stringifier writes its own

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

@@ -17,6 +17,7 @@ import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { templateRootIsSvg } from './template-parse.ts'
 import { emitListenerLine } from './event-listener.ts'
 import { nameForRegistryRef } from '../../component-scope.ts'
+import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 import type {
   BranchChildComponentInitsPlan,
   BranchEventBindingsPlan,
@@ -153,15 +154,22 @@ export function stringifyBranchInnerLoops(
         inner.outerLoopParamBindings,
       )
     }
-    for (const text of inner.reactiveTexts) {
+    const conditionalTexts = inner.reactiveTexts.filter(t => t.insideConditional)
+    const plainTexts = inner.reactiveTexts.filter(t => !t.insideConditional)
+    for (const text of conditionalTexts) {
       const bf = profileBindingId(pc, text.slotId)
-      if (text.insideConditional) {
-        // Re-query $t inside the effect: insert() may swap the text node so a
-        // captured reference would silently stop updating.
-        lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__bel${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`)
-      } else {
-        lines.push(`${indent}  { const [__rt] = $t(__bel${uid}, '${text.slotId}')`)
-        lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`)
+      // Fresh `claimSlots` claim every run (not the cached `lazySlots` door):
+      // insert() may swap the branch's DOM between runs, and a 'text' write
+      // is a plain, idempotent `nodeValue` assignment with no dedup state to
+      // go stale — replaces the old re-query-$t-on-every-run discipline.
+      lines.push(`${indent}  createEffect(() => { claimSlots(__bel${uid}, [{ id: '${text.slotId}', kind: 'text', path: [] }]).write('${text.slotId}', String(${text.wrappedExpression})) }${bf})`)
+    }
+    if (plainTexts.length > 0) {
+      const slots: ClaimSlotSpec[] = plainTexts.map(t => ({ id: t.slotId, kind: 'text', path: [] }))
+      const writer = claimWriterVarName(slots, varSlotId)
+      lines.push(`${indent}  const ${writer} = lazySlots(__bel${uid}, ${claimPlanLiteral(slots)})`)
+      for (const text of plainTexts) {
+        lines.push(`${indent}  createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)})`)
       }
     }
     if (inner.nestedConditionals.length > 0) {
@@ -254,14 +262,25 @@ export function stringifyLoopChildArm(
     lines.push(`${armIndent}}))`)
   }
 
-  for (const text of arm.texts) {
-    // __bfText (not a naive `.textContent = String(...)`) so a Child-position
-    // expression whose value is a live Node (e.g. a hoisted `renderNode={(n)
-    // => <PillNode/>}` callback, #1213) is spliced into the slot by identity
-    // instead of being stringified to "[object HTMLElement]" (#2347).
-    const varName = `__rt_${varSlotId(text.slotId)}`
-    lines.push(`${armIndent}let ${varName} = $t(__branchScope, '${text.slotId}')[0]`)
-    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${varName} = __bfText(${varName}, ${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}))`)
+  if (arm.texts.length > 0) {
+    // 'markup' kind (not 'text') because a Child-position expression's value
+    // may be a live Node (e.g. a hoisted `renderNode={(n) => <PillNode/>}`
+    // callback, #1213) — claim-slots' markup writer splices a Node in by
+    // identity instead of stringifying it to "[object HTMLElement]" (#2347),
+    // the same contract `__bfText` used to provide. The writer is built
+    // fresh HERE, inside this arm's `bindEvents` body, so every branch
+    // activation re-claims against that swap's own `__branchScope` DOM
+    // (spec/slot-unification.md §5-A3's "branch-internal slots re-claim per
+    // branch activation").
+    const slots: ClaimSlotSpec[] = arm.texts.map(t => ({ id: t.slotId, kind: 'markup', path: [] }))
+    const writer = claimWriterVarName(slots, varSlotId)
+    lines.push(`${armIndent}const ${writer} = lazySlots(__branchScope, ${claimPlanLiteral(slots)})`)
+    for (const text of arm.texts) {
+      // `escapeTextOrNode`: see emit-reactive.ts's identical wrap for why a
+      // string value must be escaped before a 'markup' writer's
+      // `innerHTML =` insertion, while a live Node passes through untouched.
+      lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${writer}('${text.slotId}', escapeTextOrNode(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)}))`)
+    }
   }
 
   lines.push(`${armIndent}return () => __disposers.forEach(d => d())`)