npm - @barefootjs/jsx - Versions diffs - 0.26.4 → 0.27.0 - Mend

@barefootjs/jsx 0.26.4 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

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

@@ -1,7 +1,7 @@
 /**
  * Stringify LoopPlan variants to source lines.
  *
- * Output shapes (preserved byte-identical from the legacy emitter):
+ * Output shapes:
  *
  *   PlainLoopPlan, no reactive effects (single-line renderItem):
  *     <indent>mapArray(() => <arr>, <container>, <keyFn>, (<head>, <idx>, __existing) =>
@@ -12,13 +12,18 @@
  *     <indent>  <unwrap?>
  *     <indent>  <preamble?>
  *     <indent>  const __el = __existing ?? (() => { ... })()
- *     <indent>  <reactive effects via stringifyReactiveEffects>
+ *     <indent>  <reactive effects + preamble regions via stringifyReactiveEffects —
+ *     <indent>   row-granularity (spec/slot-unification.md §3(c)): attrs, outer
+ *     <indent>   texts, and preamble regions merge into ONE createEffect per row
+ *     <indent>   in normal builds; profile-mode builds keep the legacy
+ *     <indent>   one-effect-per-slot shape (see that module's docstring)>
  *     <indent>  return __el
  *     <indent>})
  *
  *   StaticLoopPlan: two parallel forEach blocks (attrs / texts) — see
  *     emitStaticLoop. The forEach-duplication noted in observation O-4 is
- *     preserved bug-for-bug; PR 5+ collapses them.
+ *     preserved bug-for-bug; PR 5+ collapses them. Left untouched by the
+ *     row-granularity pass above — a different (forEach, not mapArray) shape.
  *
  * Indent convention for plain loops: top-level emission uses `'  '` (2 sp);
  * passed in via `topIndent`.
@@ -31,8 +36,8 @@ import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateD
 import { buildSkeletonPathPlan, type SkeletonPathPlan } from './skeleton-paths.ts'
 import { stringifyComponentLoop } from './component-loop.ts'
 import { stringifyCompositeLoop } from './composite-loop.ts'
+import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 import type { LoopChildRefBinding, LoopPlan, PlainLoopPlan, StaticLoopPlan } from '../plan/types.ts'
-import type { PreambleRegionPlan } from '../plan/loop.ts'
 /**
  * Emit `(callback)(__rf)` for each ref on a per-item slot, looking up the
@@ -66,38 +71,16 @@ export function emitLoopChildRefs(
 }
 /**
- * Emit the region-patch effect for each preamble-patched region (#2389 —
- * `arr.map(t => { const cells = []; ...; return <tr>{cells}<td>{t.name}</td></tr> })`).
- * The effect re-runs the (loop-param-accessor-wrapped) preamble on every
- * reactive tick so it re-reads the current per-item signal, recomputes the
- * region's value, and — past the FIRST run (which only records, trusting
- * the SSR/CSR mount-time content already in the DOM) — patches the DOM
- * range via `patchSlotRange(__el, 'sN', html)`. The marker lookup lives
- * inside `patchSlotRange`, so a row that never changes pays zero lookup
- * cost at mount/adoption.
- *
- * Non-empty `regions` forces the caller's multi-line renderItem layout (the
- * effect needs `__el` as a query root), mirroring `emitLoopChildRefs`.
+ * Preamble-patched regions (#2389 — `arr.map(t => { const cells = []; ...;
+ * return <tr>{cells}<td>{t.name}</td></tr> })`) used to get their own
+ * per-region `createEffect` here. Row-granularity effects (perf,
+ * spec/slot-unification.md §3(c)/§8) merged that into the SAME single row
+ * effect `stringifyReactiveEffects` now emits for attrs/outer texts — see
+ * that module's docstring. Both plain-loop-row call sites
+ * (`stringifyPlainLoop` below, `stringify/branch-loop.ts`'s `emitPlain`) pass
+ * `preambleRegions`/`mapPreambleWrapped` straight into
+ * `stringifyReactiveEffects` instead of calling a separate emitter.
  */
-export function emitPreambleRegionEffects(
-  lines: string[],
-  regions: readonly PreambleRegionPlan[],
-  mapPreambleWrapped: string,
-  opts: { indent: string; elVar: string },
-): void {
-  if (regions.length === 0) return
-  const { indent, elVar } = opts
-  for (const region of regions) {
-    const v = varSlotId(region.slotId)
-    lines.push(`${indent}{ let __last_${v}`)
-    lines.push(`${indent}createEffect(() => {`)
-    if (mapPreambleWrapped) lines.push(`${indent}  ${mapPreambleWrapped}`)
-    lines.push(`${indent}  const __html_${v} = ${region.valueExpr}`)
-    lines.push(`${indent}  if (__last_${v} === undefined) { __last_${v} = __html_${v}; return }`)
-    lines.push(`${indent}  if (__html_${v} !== __last_${v}) { __last_${v} = __html_${v}; patchSlotRange(${elVar}, '${region.slotId}', __html_${v}) }`)
-    lines.push(`${indent}}) }`)
-  }
-}
 /**
  * Single dispatch over `LoopPlan` (#1253). Narrows on `plan.kind` and
@@ -254,33 +237,49 @@ export function stringifyPlainLoop(
   // `reactiveEffects.conditionals` is always empty here and needs no path
   // handling. `__p` is `null` on the hydration branch (`__existing` truthy)
   // since the skeleton's empty markers/omitted attrs don't describe the
-  // SSR-rendered tree; every resolution falls back to qsa/$t there.
+  // SSR-rendered tree; every resolution falls back to qsa/$t there. Attr/ref
+  // slots still resolve through `__p` (unchanged by slot unification A3 —
+  // only CONTENT slots migrate to claim plans); text slots below embed the
+  // same skeleton path directly into their claim-plan entry, guarded by the
+  // same `__existing ? [] : […]` ternary so a hydrated row never tries a
+  // path the skeleton doesn't actually describe.
   let pathPlan: SkeletonPathPlan | null = null
   if (hoistedTpl && plan.skeletonPaths) {
     const elementSlotIds = [
       ...(reactiveEffects?.attrSlots.map(s => s.slotId) ?? []),
       ...childRefs.map(r => r.childSlotId),
     ]
-    const textSlotIds = reactiveEffects?.outerTexts.map(t => t.slotId) ?? []
-    if (elementSlotIds.length > 0 || textSlotIds.length > 0) {
-      const built = buildSkeletonPathPlan(plan.skeletonPaths, '__el', { elementSlotIds, textSlotIds })
+    if (elementSlotIds.length > 0) {
+      const built = buildSkeletonPathPlan(plan.skeletonPaths, '__el', { elementSlotIds, textSlotIds: [] })
       if (built.arrayElems.length > 0) {
         pathPlan = built
         lines.push(`${bodyIndent}const __p = __existing ? null : [${built.arrayElems.join(', ')}]`)
       }
     }
   }
-  if (reactiveEffects !== null) {
+  const textClaimPathExprs = new Map<string, string>()
+  if (hoistedTpl && plan.skeletonPaths) {
+    for (const text of reactiveEffects?.outerTexts ?? []) {
+      const path = plan.skeletonPaths.textMarkerPaths.get(text.slotId)
+      if (path) textClaimPathExprs.set(text.slotId, `__existing ? [] : [${path.join(', ')}]`)
+    }
+  }
+  if (reactiveEffects !== null || preambleRegions.length > 0) {
+    // Row-granularity effects (§3(c)): attrs, outer texts, AND preamble
+    // regions all merge into the SAME single row `createEffect` — pass
+    // `preambleRegions`/`mapPreambleWrapped` straight through instead of a
+    // separate emitter call (see `stringifyReactiveEffects`'s docstring).
     stringifyReactiveEffects(lines, reactiveEffects, {
       indent: bodyIndent,
       elVar: '__el',
       bodyIsMultiRoot,
       elementIndexBySlot: pathPlan?.elementIndexBySlot,
-      textIndexBySlot: pathPlan?.textIndexBySlot,
+      textClaimPathExprs,
+      preambleRegions,
+      mapPreambleWrapped,
     })
   }
   emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot, elementIndexBySlot: pathPlan?.elementIndexBySlot })
-  emitPreambleRegionEffects(lines, preambleRegions, mapPreambleWrapped, { indent: bodyIndent, elVar: '__el' })
   lines.push(`${bodyIndent}return __el`)
   lines.push(`${topIndent}}, '${markerId}'${loopBfId})`)
 }
@@ -433,10 +432,13 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
     }
     lines.push(`        }`)
   }
-  for (const text of texts) {
-    const vn = `__rt_${varSlotId(text.slotId)}`
-    lines.push(`        { const [${vn}] = $t(__iterEl, '${text.slotId}')`)
-    lines.push(`        if (${vn}) createEffect(() => { ${vn}.textContent = String(${text.expression}) }${profileBindingId(pc, text.slotId)}) }`)
+  if (texts.length > 0) {
+    const slots: ClaimSlotSpec[] = texts.map(t => ({ id: t.slotId, kind: 'text', path: [] }))
+    const writer = claimWriterVarName(slots, varSlotId)
+    lines.push(`        const ${writer} = lazySlots(__iterEl, ${claimPlanLiteral(slots)})`)
+    for (const text of texts) {
+      lines.push(`        createEffect(() => { ${writer}('${text.slotId}', String(${text.expression})) }${profileBindingId(pc, text.slotId)})`)
+    }
   }
   // Ref callbacks fire on every forEach iteration — initial mount and any
   // future array-change-driven re-iteration (#1244). For static arrays the

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

@@ -6,24 +6,58 @@
  * bodies (events, child component inits, inner loops, nested conditionals,
  * branch-scoped texts) flow through the per-arm stringifiers in
  * `loop-child-arm.ts` — no legacy passthrough remains.
+ *
+ * Row-granularity effects (perf, spec/slot-unification.md §3(c)/§8, the
+ * deferred A3b): for the "plain loop row, top-level or branch-scoped" shape
+ * — the only shape where `stringifyReactiveEffects` is called alongside
+ * `PreambleRegionPlan`s from the SAME renderItem scope (`stringify/loop.ts`'s
+ * `stringifyPlainLoop`, `stringify/branch-loop.ts`'s `emitPlain`) — reactive
+ * attrs, outer texts, and preamble regions all read the SAME per-item signal
+ * dependency, so consolidating them into ONE `createEffect` per row removes
+ * N-1 effect objects and subscription-list entries per row without changing
+ * the firing profile. Composite loops, component loops, and the anchored
+ * (whole-item-conditional) loop shape keep the legacy one-effect-per-slot
+ * emission — their reactiveEffects never carry preamble regions, and
+ * consolidating them wasn't part of this pass's mechanically-verified scope
+ * (see the call sites' docstrings).
+ *
+ * Profile mode (#1690) carries a `<Component>#binding:<slotId>` id per
+ * effect so the profiler attributes a re-run to its source binding — merging
+ * bindings into one effect would make every binding on the row share one id.
+ * Resolution: profile mode (`plan.profileComponentName` set) keeps the
+ * granular per-slot/per-attr effect emission (`emitAttrSlotsGranular` /
+ * `emitOuterTexts` below); normal builds get the consolidated row effect.
+ * Preamble regions never carried a per-region bfId even before this pass, so
+ * they always consolidate into one effect regardless of profile mode.
  */
 import { varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { stringifyLoopChildArm } from './loop-child-arm.ts'
+import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 import type {
   NestedConditionalPlan,
+  ReactiveAttrSlot,
   ReactiveEffectsPlan,
   ReactiveTextEffect,
 } from '../plan/reactive-effects.ts'
+/** A resolved preamble-patched region (#2389) ready to merge into the row
+ *  effect — same shape as `plan/loop.ts`'s `PreambleRegionPlan`, restated
+ *  here so this module doesn't need a cross-import into the loop plan file
+ *  for one two-field shape. */
+export interface RowPreambleRegion {
+  slotId: string
+  valueExpr: string
+}
 export interface StringifyReactiveEffectsOptions {
   /** Indent prefix for every emitted line. */
   indent: string
   /**
    * Element variable to attach effects to (e.g., `__el`, `__existing`,
    * `__csrEl`). The stringifier never inspects it — it is simply substituted
-   * into the qsa() / $t() / insert() call shapes.
+   * into the qsa() / lazySlots() / insert() call shapes.
    */
   elVar: string
   /**
@@ -42,27 +76,88 @@ export interface StringifyReactiveEffectsOptions {
    * still resolves through the battle-tested runtime lookup.
    */
   elementIndexBySlot?: ReadonlyMap<string, number>
-  /** Same as `elementIndexBySlot`, for text-marker slots (`$t`). */
-  textIndexBySlot?: ReadonlyMap<string, number>
+  /**
+   * Rendered path EXPRESSION source (not a plain array — see
+   * `ClaimSlotSpec.pathExpr`) for outer text slots, keyed by slotId: perf,
+   * #2143's hoisted single-root loop skeleton
+   * (`SkeletonSlotPaths.textMarkerPaths`), guarded by `__existing` the same
+   * way `__p` is nulled on the hydration branch (the skeleton's simplified
+   * markup doesn't describe the real SSR-rendered tree). Only
+   * `stringifyPlainLoop`'s hoisted-skeleton path supplies these; every other
+   * caller omits it and each text slot's claim-plan entry gets `path: []`
+   * — A2's marker-scan fallback resolves it at claim time (sound, just
+   * slower), per `spec/slot-unification.md` §5-A3's explicit "cannot be
+   * statically pathed" allowance.
+   */
+  textClaimPathExprs?: ReadonlyMap<string, string>
+  /**
+   * Preamble-patched regions (#2389) to merge into the SAME row effect as
+   * this scope's reactive attrs/outer texts (row-granularity effects,
+   * §3(c)) — only supplied by the plain-loop-row call sites
+   * (`stringify/loop.ts`, `stringify/branch-loop.ts`) where
+   * `PlainLoopVariant.preambleRegions` exists on the plan. Every other
+   * caller omits this and gets the legacy per-slot emission untouched.
+   */
+  preambleRegions?: readonly RowPreambleRegion[]
+  /**
+   * 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`.
+   */
+  mapPreambleWrapped?: string
 }
 export function stringifyReactiveEffects(
   lines: string[],
-  plan: ReactiveEffectsPlan,
+  plan: ReactiveEffectsPlan | null,
   opts: StringifyReactiveEffectsOptions,
 ): void {
-  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textIndexBySlot } = opts
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textClaimPathExprs, preambleRegions = [], mapPreambleWrapped } = opts
   const lookup = bodyIsMultiRoot ? 'qsaItem' : 'qsa'
-  const pc = plan.profileComponentName
+  const pc = plan?.profileComponentName
   const bindingBfId = (slotId: string): string => profileBindingId(pc, slotId)
+  const attrSlots = plan?.attrSlots ?? []
+  const outerTexts = plan?.outerTexts ?? []
+  const conditionals = plan?.conditionals ?? []
+  if (pc) {
+    // Profile mode: preserve the granular per-slot/per-attr effect shape so
+    // every binding keeps its own bfId (see module docstring).
+    emitAttrSlotsGranular(lines, indent, elVar, lookup, attrSlots, elementIndexBySlot, bindingBfId)
+    emitOuterTexts(lines, indent, elVar, outerTexts, bindingBfId, textClaimPathExprs)
+    emitPreambleRegionsEffect(lines, indent, elVar, preambleRegions, mapPreambleWrapped)
+  } else {
+    emitConsolidatedRowEffect(
+      lines, indent, elVar, lookup,
+      attrSlots, outerTexts, elementIndexBySlot, textClaimPathExprs,
+      preambleRegions, mapPreambleWrapped,
+    )
+  }
+  // Reactive conditionals — each emits an insert(...) over `elVar` whose arm
+  // bodies dispatch through the per-arm stringifiers. Structurally distinct
+  // from the attrs/texts/regions merge above (its own per-branch disposable
+  // effects), so it's untouched by row-granularity consolidation.
+  for (const cond of conditionals) {
+    emitOuterConditional(lines, indent, elVar, cond, pc)
+  }
+}
+// --- profile-mode / legacy granular emission (one createEffect per slot-attr) ---
-  // 1. Reactive attribute effects (one qsa per slot, then per-attr createEffect).
-  for (const slot of plan.attrSlots) {
+function emitAttrSlotsGranular(
+  lines: string[],
+  indent: string,
+  elVar: string,
+  lookup: string,
+  attrSlots: readonly ReactiveAttrSlot[],
+  elementIndexBySlot: ReadonlyMap<string, number> | undefined,
+  bindingBfId: (slotId: string) => string,
+): void {
+  for (const slot of attrSlots) {
     const varName = `__ra_${varSlotId(slot.slotId)}`
-    const pIdx = elementIndexBySlot?.get(slot.slotId)
-    const lookupExpr = pIdx !== undefined
-      ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slot.slotId}"]')`
-      : `${lookup}(${elVar}, '[bf="${slot.slotId}"]')`
+    const lookupExpr = attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot)
     lines.push(`${indent}{ const ${varName} = ${lookupExpr}`)
     lines.push(`${indent}if (${varName}) {`)
     for (const attr of slot.attrs) {
@@ -74,36 +169,151 @@ export function stringifyReactiveEffects(
     }
     lines.push(`${indent}} }`)
   }
+}
+/** ONE createEffect covering every preamble region — never carried a bfId
+ *  before this pass (regions were never profiled per-binding), so this
+ *  shape applies in both profile and non-profile mode. */
+function emitPreambleRegionsEffect(
+  lines: string[],
+  indent: string,
+  elVar: string,
+  preambleRegions: readonly RowPreambleRegion[],
+  mapPreambleWrapped: string | undefined,
+): void {
+  if (preambleRegions.length === 0) return
+  const slots: ClaimSlotSpec[] = preambleRegions.map(r => ({ id: r.slotId, kind: 'markup', path: [] }))
+  const writer = claimWriterVarName(slots, varSlotId)
+  lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(slots)})`)
+  lines.push(`${indent}createEffect(() => {`)
+  if (mapPreambleWrapped) lines.push(`${indent}  ${mapPreambleWrapped}`)
+  for (const region of preambleRegions) {
+    lines.push(`${indent}  ${writer}('${region.slotId}', ${region.valueExpr})`)
+  }
+  lines.push(`${indent}})`)
+}
+function attrLookupExpr(
+  slotId: string,
+  varName: string,
+  elVar: string,
+  lookup: string,
+  elementIndexBySlot: ReadonlyMap<string, number> | undefined,
+): string {
+  const pIdx = elementIndexBySlot?.get(slotId)
+  return pIdx !== undefined
+    ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slotId}"]')`
+    : `${lookup}(${elVar}, '[bf="${slotId}"]')`
+}
+// --- row-granularity consolidated emission (ONE createEffect per row) ---
+/**
+ * Emit ONE `createEffect` covering: reactive attr writes (for every slot in
+ * `attrSlots`), outer text writes, and preamble-region writes — in that
+ * order, mirroring the legacy relative ordering (attrs, then texts, then
+ * regions). Attr-slot element lookups are resolved ONCE, outside the
+ * effect (identical to the legacy shape — only the WRITE moves inside the
+ * shared effect). Outer texts and preamble regions share ONE claimed-slot
+ * writer (mixed 'text'/'markup' kinds — `claim-slots.ts`'s `write()` already
+ * 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`.
+ */
+function emitConsolidatedRowEffect(
+  lines: string[],
+  indent: string,
+  elVar: string,
+  lookup: string,
+  attrSlots: readonly ReactiveAttrSlot[],
+  outerTexts: readonly ReactiveTextEffect[],
+  elementIndexBySlot: ReadonlyMap<string, number> | undefined,
+  textClaimPathExprs: ReadonlyMap<string, string> | undefined,
+  preambleRegions: readonly RowPreambleRegion[],
+  mapPreambleWrapped: string | undefined,
+): void {
+  if (attrSlots.length === 0 && outerTexts.length === 0 && preambleRegions.length === 0) return
+  // 1. Resolve every attr slot's element reference once, outside the effect.
+  for (const slot of attrSlots) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`
+    lines.push(`${indent}const ${varName} = ${attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot)}`)
+  }
-  // 2. Outer text effects (slots NOT inside any conditional branch).
-  for (const text of plan.outerTexts) {
-    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId), textIndexBySlot?.get(text.slotId))
+  // 2. ONE claimed-slot writer covering outer texts (kind 'text') and
+  //    preamble regions (kind 'markup') — mixed-kind plans are supported by
+  //    claim-slots.ts's per-slot `kind` dispatch.
+  const claimSlots: ClaimSlotSpec[] = [
+    ...outerTexts.map((t): ClaimSlotSpec => ({ id: t.slotId, kind: 'text', path: [], pathExpr: textClaimPathExprs?.get(t.slotId) })),
+    ...preambleRegions.map((r): ClaimSlotSpec => ({ id: r.slotId, kind: 'markup', path: [] })),
+  ]
+  const writer = claimSlots.length > 0 ? claimWriterVarName(claimSlots, varSlotId) : null
+  if (writer) {
+    lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(claimSlots)})`)
   }
-  // 3. Reactive conditionals — each emits an insert(...) over `elVar` whose
-  //    arm bodies dispatch through the per-arm stringifiers.
-  for (const cond of plan.conditionals) {
-    emitOuterConditional(lines, indent, elVar, cond, pc)
+  // 3. The single row effect: attr writes, then (if any region needs it) the
+  //    preamble re-run, then text writes, then region writes. The by-far
+  //    most common shape — no attrs, no regions, exactly one outer text —
+  //    collapses to the SAME single-line `createEffect(() => { ... })` the
+  //    legacy per-text emitter used (doc-examples snapshots pin this byte
+  //    shape); anything busier (an attr present, multiple slots, or a
+  //    preamble region) uses the multi-line block.
+  if (attrSlots.length === 0 && preambleRegions.length === 0 && outerTexts.length === 1) {
+    const text = outerTexts[0]
+    lines.push(`${indent}createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) })`)
+    return
+  }
+  lines.push(`${indent}createEffect(() => {`)
+  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}`)
+      }
+      lines.push(`${indent}    }`)
+    }
+    lines.push(`${indent}  }`)
+  }
+  if (preambleRegions.length > 0 && mapPreambleWrapped) {
+    lines.push(`${indent}  ${mapPreambleWrapped}`)
   }
+  for (const text of outerTexts) {
+    lines.push(`${indent}  ${writer}('${text.slotId}', String(${text.wrappedExpression}))`)
+  }
+  for (const region of preambleRegions) {
+    lines.push(`${indent}  ${writer}('${region.slotId}', ${region.valueExpr})`)
+  }
+  lines.push(`${indent}})`)
 }
-function emitOuterText(
+function emitOuterTexts(
   lines: string[],
   indent: string,
   elVar: string,
-  text: ReactiveTextEffect,
-  bfId: string = '',
-  pIdx?: number,
+  texts: readonly ReactiveTextEffect[],
+  bindingBfId: (slotId: string) => string,
+  textClaimPathExprs?: ReadonlyMap<string, string>,
 ): void {
-  const varName = `__rt_${varSlotId(text.slotId)}`
-  if (pIdx !== undefined) {
-    // Direct-path resolution (#2143): `__p` holds the marker Comment node;
-    // `tAfter` mirrors `$t`'s create-if-absent Text-node semantics exactly.
-    lines.push(`${indent}{ const ${varName} = __p ? tAfter(__p[${pIdx}]) : $t(${elVar}, '${text.slotId}')[0]`)
-  } else {
-    lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`)
+  if (texts.length === 0) return
+  const slots: ClaimSlotSpec[] = texts.map(t => ({
+    id: t.slotId,
+    kind: 'text',
+    path: [],
+    pathExpr: textClaimPathExprs?.get(t.slotId),
+  }))
+  const writer = claimWriterVarName(slots, varSlotId)
+  lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(slots)})`)
+  for (const text of texts) {
+    lines.push(`${indent}createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${bindingBfId(text.slotId)})`)
   }
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${bfId}) }`)
 }
 function emitOuterConditional(

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

@@ -4,7 +4,7 @@
  * These three functions are called from `generate-init.ts` to emit the
  * client-side runtime calls that drive reactive conditionals
  * (`insert(...)`) and reactive loops (`mapArray(...)` /
- * `reconcileElements`) for a single component.
+ * `mapArrayAnchored(...)`) for a single component.
  *
  * Each entry point thinly wraps the Plan layer:
  *

package/src/ir-to-client-js/element-refs.ts CHANGED Viewed

@@ -2,13 +2,18 @@
  * Element ref declarations — `const [_s0, _s1] = $(…, 's0', 's1')`.
  *
  * Every element the init body needs to find at hydration time (events,
- * dynamic text, loops, refs, reactive attrs, reactive props, rest-attr
- * elements, child component slots) is emitted via one of three finders:
+ * loops, refs, reactive attrs, reactive props, rest-attr elements, child
+ * component slots) is emitted via one of two finders:
  *
  *   `$(…)`  — regular DOM elements (bf-*)
- *   `$t(…)` — text comment markers for dynamic text (`<!--bf:sN-->`)
  *   `$c(…)` — component slots (bf-s, component-rooted)
  *
+ * Dynamic text/JSX content slots (`<!--bf:sN-->` markers) don't need a ref
+ * here at all — they resolve through a claimed-slot writer built where
+ * they're used (`emitDynamicTextUpdates`/`emitClientOnlyExpressions` in
+ * `ir-to-client-js/emit-reactive.ts`, slot unification A3), not a
+ * pre-resolved `_sN` var.
+ *
  * Slots inside conditional branches are excluded here because
  * `insert()` bindEvents re-queries them when the branch activates.
  * Component slots take precedence over regular slots (#360): when a
@@ -26,7 +31,6 @@ import { varSlotId } from './utils.ts'
  */
 export function generateElementRefs(ctx: ClientJsContext): string {
   const regularSlots = new Set<string>()
-  const textSlots = new Set<string>()
   const componentSlots = new Set<string>()
   const conditionalSlotIds = collectConditionalSlotIds(ctx)
@@ -35,11 +39,6 @@ export function generateElementRefs(ctx: ClientJsContext): string {
       regularSlots.add(elem.slotId)
     }
   }
-  for (const elem of ctx.dynamicElements) {
-    if (!elem.insideConditional) {
-      textSlots.add(elem.slotId)
-    }
-  }
   for (const elem of ctx.conditionalElements) {
     regularSlots.add(elem.slotId)
   }
@@ -72,11 +71,10 @@ export function generateElementRefs(ctx: ClientJsContext): string {
     regularSlots.delete(slotId)
   }
-  if (regularSlots.size === 0 && textSlots.size === 0 && componentSlots.size === 0) return ''
+  if (regularSlots.size === 0 && componentSlots.size === 0) return ''
   const refLines: string[] = []
   emitSlotRefs(refLines, [...regularSlots], '$')
-  emitSlotRefs(refLines, [...textSlots], '$t')
   emitSlotRefs(refLines, [...componentSlots], '$c')
   return refLines.join('\n')
 }

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

@@ -9,6 +9,7 @@ import type { AttrMeta, IRMetadata } from '../types.ts'
 import { isBooleanAttr } from '../html-constants.ts'
 import type { ClientJsContext } from './types.ts'
 import { toHtmlAttrName, varSlotId, PROPS_PARAM } from './utils.ts'
+import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './control-flow/stringify/claim-plan.ts'
 import { createTemplateAwareStringProtector } from './html-template.ts'
 import { datePlugin, DATE_METHODS } from '../date-lowering.ts'
 import { toLocaleDatePlugin, foldedArgToClientJs } from '../to-locale-date-lowering.ts'
@@ -303,24 +304,44 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
     const normalElems = elems.filter(e => !e.insideConditional)
     if (normalElems.length > 0 || conditionalElems.length > 0) {
-      // Persistent slot trackers for non-conditional elements. `__bfText`
-      // returns the node now occupying the slot; a JSX-valued expression
-      // (`{themeLogo(id)}`) replaces the text node with a live element, so
-      // the next reactive run must operate on that element, not the stale
-      // text node (#1663). Primitive values keep the same text node.
-      for (const elem of normalElems) {
-        const v = varSlotId(elem.slotId)
-        lines.push(`  let __anchor_${v} = _${v}`)
-      }
       const __textSlot = (normalElems[0] ?? conditionalElems[0])?.slotId
+      // Non-conditional elements: ONE claimed 'markup' writer covering every
+      // slot this expression feeds (slot unification A3, row-level claim at
+      // `__scope` — spec/slot-unification.md §3(a)/§5-A3). 'markup' (not
+      // 'text') because the value may be a live Node (e.g. a JSX-returning
+      // call like `{themeLogo(id)}`) — the writer splices a Node in by
+      // identity, exactly the contract `__bfText` used to provide (#1663).
+      let writer = ''
+      if (normalElems.length > 0) {
+        const slots: ClaimSlotSpec[] = normalElems.map(elem => ({ id: elem.slotId, kind: 'markup', path: [] }))
+        writer = claimWriterVarName(slots, varSlotId)
+        lines.push(`  const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`)
+      }
       lines.push(`  createEffect(() => {`)
       if (normalElems.length > 0) {
         // Expression is always evaluated for non-conditional elements
         lines.push(`    const __val = ${expr}`)
+        // `escapeTextOrNode`: `writeMarkup` inserts a string via
+        // `innerHTML =`, which — unlike the plain `Text.nodeValue =`
+        // assignment the initial SSR/CSR TEMPLATE's `escapeText(${expr})`
+        // was standing in for — DOES interpret HTML, so a raw un-escaped
+        // string here is an injection/byte-parity gap; a live Node (this
+        // expression may return one) must pass through untouched instead.
         for (const elem of normalElems) {
-          const v = varSlotId(elem.slotId)
-          lines.push(`    __anchor_${v} = __bfText(__anchor_${v}, __val)`)
+          lines.push(`    ${writer}('${elem.slotId}', escapeTextOrNode(__val))`)
         }
+        // Conditional elements: deferred from slot unification A3 — see
+        // `__bfText`'s docstring for why. `insert()` may swap the branch's
+        // DOM independently of this effect's own reruns, and a cached claim
+        // door's dedup state would go stale across that swap (unlike the
+        // 'text'-kind conditional cases elsewhere in the compiler, this
+        // slot's value may be a live Node, so it can't reuse the "just
+        // re-claim fresh every run" trick those use — a fresh 'markup'
+        // claim's dedup state always starts empty, so re-claiming per-run
+        // would throw away the unchanged-value skip on every single run).
+        // Keeps `$t` + `__bfText`.
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId)
           lines.push(`    const [__el_${v}] = $t(__scope, '${elem.slotId}')`)
@@ -348,13 +369,28 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
   }
 }
-/** Emit createEffect blocks for client-only expressions using comment markers. */
+/**
+ * Emit createEffect blocks for `@client` expressions. Slot unification A3:
+ * these are ordinary claimed 'text' slots now (never Node-valued — `@client`
+ * only ever evaluates a plain expression), one writer per slot at `__scope`,
+ * replacing `updateClientMarker`'s full-tree rescan + zero-width-space
+ * managed-node marker (no longer needed: a claimed Text node's identity is
+ * already known, so there's nothing to disambiguate from other content).
+ */
 export function emitClientOnlyExpressions(lines: string[], ctx: ClientJsContext): void {
   for (const elem of ctx.clientOnlyElements) {
+    // Slot unification Step B: `elem.elidedPath`, when present, was proven
+    // safe by `client-only-elision.ts` before this pass ran — use the real
+    // position-based path and skip the marker-scan fallback entirely.
+    const slots: ClaimSlotSpec[] = elem.elidedPath
+      ? [{ id: elem.slotId, kind: 'text', path: elem.elidedPath, markerless: true }]
+      : [{ id: elem.slotId, kind: 'text', path: [] }]
+    const writer = claimWriterVarName(slots, varSlotId)
     lines.push(`  // @client: ${elem.slotId}`)
+    lines.push(`  { const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`)
     lines.push(`  createEffect(() => {`)
-    lines.push(`    updateClientMarker(__scope, '${elem.slotId}', ${elem.expression})`)
-    lines.push(`  }${bindingIdArg(ctx, elem.slotId)})`)
+    lines.push(`    ${writer}('${elem.slotId}', ${elem.expression})`)
+    lines.push(`  }${bindingIdArg(ctx, elem.slotId)}) }`)
     lines.push('')
   }
 }