@barefootjs/jsx 0.26.4 → 0.27.0

package/src/ir-to-client-js/client-only-elision.ts

@@ -0,0 +1,273 @@
+/**
+ * Slot unification Step B (`spec/slot-unification.md` §3(b), §5 "Step B —
+ * marker elision"): decide, EXACTLY ONCE and BEFORE either `adapter.generate`
+ * (SSR) or `generateClientJs` (CSR) run, which `/* @client *\/` text slots
+ * can drop their `<!--bf:sN-->…<!--/-->` marker pair entirely from both
+ * outputs. Every consumer (all nine SSR adapters' `renderExpression`, and
+ * the CSR emitters in `html-template.ts`) reads the single
+ * `IRExpression.markerless` flag this pass writes — nobody re-derives the
+ * decision, per CLAUDE.md's "Never add compiler options/hooks for
+ * tool-specific output rewriting" spirit: one door in, everyone reads it.
+ *
+ * Scope — deliberately the NARROWEST slice of §3(b)'s elision rule that is
+ * fully sound today, not the general case:
+ *
+ *   Only `expr.clientOnly && expr.slotId` expressions OUTSIDE any loop or
+ *   conditional branch (i.e. reachable from the component's own render tree
+ *   by walking only `element`/`text`/`expression`/`fragment` nodes).
+ *
+ * Why THIS slice and not ordinary reactive text slots (loop rows,
+ * conditional branches): every other kind of slot's SSR-rendered width is
+ * DATA-DEPENDENT — an ordinary `{item.name}` may render empty or non-empty
+ * per request, so a LATER sibling's absolute child-index path would only be
+ * valid for the specific width THIS request happened to produce, not for
+ * every request the compiled function ever serves. `/* @client *\/`
+ * expressions are the one case free of that problem: SSR can never evaluate
+ * client-only JS (the whole point of the escape valve), so its rendered
+ * width is deterministically ZERO on every request, for every adapter, with
+ * no data dependence at all. That determinism is what makes computing a
+ * real, reusable, hydration-safe path sound here without also solving the
+ * general "does an earlier sibling's width vary by request" problem.
+ *
+ * Path safety within that scope — the part that generalizes A3's
+ * `computeSkeletonSlotPaths` (`html-template.ts`) rather than reinventing
+ * it: paths are root-relative child-index chains, exactly like that
+ * function's, walked in document order with the SAME "once we hit something
+ * whose contributed width isn't a compile-time constant, every remaining
+ * sibling AND everything nested inside it loses eligibility" rule (nested
+ * content reached only through an uncertain-index sibling would resolve an
+ * absolute path through that uncertain index — silently wrong, not loud, so
+ * it must never be attempted). Concretely, walking a children list left to
+ * right:
+ *   - a static `element` always contributes exactly one node — recurse into
+ *     its own children as an independent, freshly-indexed scope (its own
+ *     internal accounting can't leak out, and nothing external can poison
+ *     it either, since the element itself is a fixed anchor regardless of
+ *     what's inside it);
+ *   - static `text` contributes a node per HTML-parser text-run-merging
+ *     rules (adjacent text/expression children collapse into ONE Text
+ *     node — mirrors `computeSkeletonSlotPaths`'s `pendingText` tracking);
+ *   - a `clientOnly` expression with a slotId is the one ELIGIBLE case,
+ *     PROVIDED it is not itself part of a merged text run (rule (i) — the
+ *     `/* @client *\/` slot must not be immediately adjacent, once markers
+ *     are gone, to loose text or another expression, or the HTML parser
+ *     would merge them into one Text node with no way to tell which
+ *     content is which). Once one is elided, this level (and everything
+ *     nested inside any later sibling) is marked ineligible for the
+ *     remainder of the walk at this level — see the "freeze" note below;
+ *   - any other `expression` (a real reactive/static text or markup slot),
+ *     any `conditional`/`loop`/`component`/`async`/`provider`/
+ *     `if-statement`/`slot` node, is data-dependent or opaque width and
+ *     FREEZES the rest of this children list (see below) — this is
+ *     strictly conservative: it also means a `/* @client *\/` expression
+ *     is never eligible once any of these appears earlier at the same
+ *     level, even though `/* @client *\/`'s own width is always zero,
+ *     because SIBLINGS reached only via nested recursion past that point
+ *     would otherwise resolve an absolute path through the frozen node's
+ *     uncertain contributed width;
+ *   - the same hazard-tag / force-close-group / void-element / `<tr>`
+ *     foster-parenting guards `computeSkeletonSlotPaths` uses (imported,
+ *     not re-derived) abort the ENTIRE walk (a global bail, exactly like
+ *     that function's `state.bailed`) — a parser hazard means every index
+ *     computed anywhere in this tree is suspect, not just the ones near
+ *     the hazard, so "don't guess" means don't guess about the blast
+ *     radius either.
+ *
+ * "Freeze" (the one simplification versus a maximally-precise per-branch
+ * eligibility tracker): once ANY `/* @client *\/` slot at a given level is
+ * elided — OR once anything data-dependent/opaque is seen at that level —
+ * that level's remaining siblings (and anything nested only through them)
+ * stop being assigned real paths for the rest of THIS walk, even though a
+ * maximally precise analysis could sometimes still find one. This caps
+ * elision at (at most) one `/* @client *\/` slot per static subtree —
+ * conservative by design, matching the elision rule's own framing, and it
+ * guarantees two elided slots can never end up needing an insertion whose
+ * reference node depends on the other's still-unresolved width. Freezing is
+ * PER CHILDREN-LIST (an element's own children start a fresh, unfrozen
+ * scope) — global-bail is reserved for hazard tags alone.
+ *
+ * Deferred (loudly, not silently): ordinary reactive text slots in loop
+ * rows / conditional branches keep their markers — see above for why
+ * widening this to data-dependent-width content needs a materially
+ * different (and per-adapter-verified) safety argument that this PR does
+ * not attempt.
+ */
+
+import type { IRNode, IRExpression } from '../types.ts'
+import {
+  VOID_ELEMENTS,
+  SKELETON_PATH_HAZARD_TAGS,
+  skeletonForceCloseGroup,
+  hasForeignTableRowContent,
+  flattenSkeletonChildren,
+} from './html-template.ts'
+
+/** Global bail, mirroring `computeSkeletonSlotPaths`'s `state.bailed`: once
+ *  a parser hazard is seen anywhere, every remaining step of this ONE
+ *  `decideClientOnlyElision` call becomes a no-op. Slots already elided
+ *  before the hazard was reached keep their `markerless`/`elidedPath` —
+ *  those paths were computed from safe ground and remain valid; only
+ *  FURTHER assignment stops. */
+interface ElisionState {
+  bailed: boolean
+}
+
+/**
+ * Entry point: mutates `root`'s `expression` nodes in place, setting
+ * `markerless`/`elidedPath` on every eligible `/* @client *\/` slot found.
+ * Safe to call on any component's render tree; a tree with none simply
+ * mutates nothing.
+ */
+export function decideClientOnlyElision(root: IRNode): void {
+  walkNode(root, [], new Set(), { bailed: false })
+}
+
+/** Walk one node that occupies a known position (`path`) in its parent's
+ *  children. Only `element`/`fragment` are ever recursed into by the
+ *  children-list walker below — this wrapper exists so both the top-level
+ *  call and `walkChildren`'s per-element recursion can share one path. */
+function walkNode(
+  node: IRNode,
+  path: readonly number[],
+  forceCloseAncestors: ReadonlySet<number>,
+  state: ElisionState,
+): void {
+  if (state.bailed) return
+  if (node.type === 'element') {
+    if (!elementIsPathSafe(node.tag, flattenSkeletonChildren(node.children))) {
+      state.bailed = true
+      return
+    }
+    const groupIdx = skeletonForceCloseGroup(node.tag)
+    if (groupIdx >= 0 && forceCloseAncestors.has(groupIdx)) {
+      state.bailed = true
+      return
+    }
+    const nextAncestors = groupIdx >= 0 ? new Set([...forceCloseAncestors, groupIdx]) : forceCloseAncestors
+    walkChildren(flattenSkeletonChildren(node.children), path, nextAncestors, state)
+  } else if (node.type === 'fragment') {
+    walkChildren(flattenSkeletonChildren(node.children), path, forceCloseAncestors, state)
+  }
+  // Any other root shape (a bare conditional/loop/component return, etc.)
+  // has no static children list to walk — nothing to do.
+}
+
+/**
+ * Walk one parent's (already-fragment-flattened) children left to right,
+ * assigning paths to eligible `/* @client *\/` slots. `parentPath` is the
+ * path to the PARENT of this children list (the element/root whose
+ * `childNodes` these indices are relative to). `forceCloseAncestors`
+ * mirrors `computeSkeletonSlotPaths`'s ancestor-threaded force-close-group
+ * tracking (`<h2>` inside an open `<h1>`, `<li>` inside an open `<li>`, …) —
+ * threaded down through element recursion, exactly like that function.
+ * `frozen` is local to THIS call (this one children list) — an element's
+ * own children get a fresh, unfrozen scope regardless of what froze here.
+ */
+function walkChildren(
+  children: readonly IRNode[],
+  parentPath: readonly number[],
+  forceCloseAncestors: ReadonlySet<number>,
+  state: ElisionState,
+): void {
+  let frozen = false
+  let idx = 0
+  let pendingText = false
+
+  for (let i = 0; i < children.length; i++) {
+    if (state.bailed) return
+    const child = children[i]
+
+    switch (child.type) {
+      case 'text': {
+        if (child.value === '') continue
+        if (!pendingText) idx += 1
+        pendingText = true
+        continue
+      }
+
+      case 'expression': {
+        if (child.expr === 'null' || child.expr === 'undefined') continue
+        if (child.clientOnly && child.slotId) {
+          const adjacent = isTextLike(children[i - 1]) || isTextLike(children[i + 1])
+          if (!frozen && !adjacent) {
+            markElided(child, [...parentPath, idx])
+            frozen = true // one elision per level — see module docstring
+          } else {
+            frozen = true // still freeze: an un-elided expression here is
+            // no different from any other data-dependent-width sibling.
+          }
+          idx += 1
+          pendingText = false
+          continue
+        }
+        // Any other expression — data-dependent width. Freeze the rest of
+        // this level; still consume ONE index (best-effort bookkeeping —
+        // nothing downstream reads `idx` past this point since `frozen`
+        // blocks any further assignment).
+        frozen = true
+        idx += 1
+        pendingText = false
+        continue
+      }
+
+      case 'element': {
+        if (!elementIsPathSafe(child.tag, flattenSkeletonChildren(child.children))) {
+          // Hazard shape: bail the WHOLE walk (matches
+          // `computeSkeletonSlotPaths`'s "don't guess" stance), not just
+          // this level — a parser hazard means indices anywhere in this
+          // tree are untrustworthy, not only the ones near it.
+          state.bailed = true
+          return
+        }
+        if (!frozen) {
+          walkNode(child, [...parentPath, idx], forceCloseAncestors, state)
+        }
+        idx += 1
+        pendingText = false
+        continue
+      }
+
+      case 'fragment':
+        continue // already flattened
+
+      default:
+        // conditional / loop / component / async / provider / if-statement /
+        // slot: opaque or variable width. Freeze the rest of this level.
+        frozen = true
+        idx += 1
+        pendingText = false
+        continue
+    }
+  }
+}
+
+/** True for a node that would merge (per HTML text-node-merging rules) with
+ *  an adjacent bare-text-position slot if that slot's markers were removed —
+ *  rule (i) of §3(b). `undefined` (no sibling — start/end of the children
+ *  list) is never adjacent. */
+function isTextLike(node: IRNode | undefined): boolean {
+  if (!node) return false
+  if (node.type === 'text') return node.value !== ''
+  if (node.type === 'expression') return node.expr !== 'null' && node.expr !== 'undefined'
+  return false
+}
+
+function markElided(expr: IRExpression, path: readonly number[]): void {
+  expr.markerless = true
+  expr.elidedPath = path
+}
+
+/**
+ * Mirrors `computeSkeletonSlotPaths`'s per-element safety checks (hazard
+ * tags, void elements, `<tr>` foster-parenting) without re-deriving the
+ * underlying tag sets — imported from `html-template.ts` so the two walks
+ * can never silently diverge on which shapes are hazardous. Force-close
+ * groups are checked separately by the caller (`walkNode`), which has the
+ * ancestor set this check does not.
+ */
+function elementIsPathSafe(tag: string, flatChildren: readonly IRNode[]): boolean {
+  if (SKELETON_PATH_HAZARD_TAGS.has(tag)) return false
+  if (VOID_ELEMENTS.has(tag) && flatChildren.length > 0) return false
+  if (tag === 'tr' && hasForeignTableRowContent(flatChildren)) return false
+  return true
+}

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

@@ -414,8 +414,8 @@ export function collectInnerLoops(
 
 /**
  * Decide whether a loop's runtime rendering needs element reconciliation
- * (reconcileElements + composite item rendering) rather than the simple
- * template-per-item path, and collect inner-loop metadata for its body.
+ * (mapArray/mapArrayAnchored + composite item rendering) rather than the
+ * simple template-per-item path, and collect inner-loop metadata for its body.
  *
  * Used by both the top-level `case 'loop'` in `collectElements` and the
  * branch-loop collector in `collectBranchLoops`. Each call site applies
@@ -595,7 +595,11 @@ export function collectElements(
     },
     expression: ({ node: ex, scope: inCond }) => {
       if (ex.clientOnly && ex.slotId) {
-        ctx.clientOnlyElements.push({ slotId: ex.slotId, expression: ex.expr })
+        ctx.clientOnlyElements.push({
+          slotId: ex.slotId,
+          expression: ex.expr,
+          elidedPath: ex.markerless ? ex.elidedPath : undefined,
+        })
         return
       }
       if (!ex.slotId || inCond) return
@@ -1113,7 +1117,7 @@ function collectBranchLoops(
         : decideLoopRendering(n, siblingOffsets, undefined)
 
       // Build the item template from loop children.
-      // Use loopDepth=0: this loop gets its own reconcileElements (independent
+      // Use loopDepth=0: this loop gets its own mapArray/mapArrayAnchored call (independent
       // from the conditional's template), so items use data-key (not data-key-1).
       // Pass loopParams so expressions reference the per-item signal accessor,
       // keeping the template consistent with reactive effect expressions that

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

@@ -29,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

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

@@ -14,7 +14,7 @@ import { stringifyCompositeLoop } from './composite-loop.ts'
 import { stringifyEventDelegation } from './event-delegation.ts'
 import { stringifyReactiveEffects } from './reactive-effects.ts'
 import { emitTemplateCloneInline, emitLoopItemElementSetup } from './template-parse.ts'
-import { emitLoopChildRefs, emitPreambleRegionEffects } from './loop.ts'
+import { emitLoopChildRefs } from './loop.ts'
 import type {
   BranchLoopPlan,
   BranchPlainLoopPlan,
@@ -115,11 +115,19 @@ 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 })
-    emitPreambleRegionEffects(lines, preambleRegions, mapPreambleWrapped, { indent: '          ', elVar: '__el' })
     lines.push(`          return __el`)
     lines.push(`        }, '${markerId}'${loopBfId})`)
   }

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/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())`)