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

@barefootjs/jsx 0.26.4 → 0.28.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 (106) 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,9 @@ 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 { stringifyLazyRowLoop } from './lazy-row.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 +72,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
@@ -199,6 +183,28 @@ export function stringifyPlainLoop(
     return
   }
+  // Lazy row graph (spec/slot-unification.md §9, L3): rows carry NO per-row
+  // reactive resources. `plan.lazyRow` is set only when
+  // `lazyRowEligibility` accepted this loop; every other loop falls through
+  // to the eager emission below, byte-for-byte unchanged.
+  if (plan.lazyRow) {
+    stringifyLazyRowLoop(lines, {
+      indent: topIndent,
+      containerVar,
+      guardContainer: false,
+      markerId,
+      arrayExpr,
+      keyFn,
+      paramHead,
+      indexParam,
+      template,
+      skeletonTemplate,
+      skeletonPaths: plan.skeletonPaths,
+      lazyRow: plan.lazyRow,
+    })
+    return
+  }
   // Hoisted shared-template fast path (perf, see `buildLoopSkeletonTemplate`):
   // declare the once-per-loop template BEFORE the `mapArray` call so every
   // row clones from an already-parsed node instead of re-running
@@ -254,33 +260,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 +455,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:
  *
@@ -25,6 +25,7 @@ import { internalInvariant } from '../errors.ts'
 import { buildInsertPlan } from './control-flow/plan/build-insert.ts'
 import { stringifyInsert } from './control-flow/stringify/insert.ts'
 import { buildLoopPlan } from './control-flow/plan/build-loop.ts'
+import { buildLazyRowScopeInfo } from './control-flow/plan/build-lazy-row.ts'
 import { stringifyLoop } from './control-flow/stringify/loop.ts'
 import {
   buildDynamicLoopDelegationPlan,
@@ -36,7 +37,7 @@ import { stringifyEventDelegation } from './control-flow/stringify/event-delegat
 export function emitConditionalUpdates(lines: string[], ctx: ClientJsContext): void {
   const profileComponentName = ctx.profile ? ctx.componentName : undefined
   for (const elem of ctx.conditionalElements) {
-    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'dom', profileComponentName })
+    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'dom', profileComponentName, lazyScope: buildLazyRowScopeInfo(ctx) })
     stringifyInsert(lines, plan, { leadingIndent: '  ', bodyIndent: '      ' })
     lines.push('')
   }
@@ -46,7 +47,7 @@ export function emitConditionalUpdates(lines: string[], ctx: ClientJsContext): v
 export function emitClientOnlyConditionals(lines: string[], ctx: ClientJsContext): void {
   const profileComponentName = ctx.profile ? ctx.componentName : undefined
   for (const elem of ctx.clientOnlyConditionals) {
-    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'raw', profileComponentName })
+    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'raw', profileComponentName, lazyScope: buildLazyRowScopeInfo(ctx) })
     lines.push(`  // @client conditional: ${elem.slotId}`)
     stringifyInsert(lines, plan, { leadingIndent: '  ', bodyIndent: '      ' })
     lines.push('')
@@ -66,10 +67,14 @@ export function emitClientOnlyConditionals(lines: string[], ctx: ClientJsContext
  *     event surface, no delegation pass needed
  */
 export function emitLoopUpdates(lines: string[], ctx: ClientJsContext, unsafeLocalNames: Set<string>): void {
+  // Lazy row graph (§9.4) name facts — built once per component, consulted
+  // by every plain loop's eligibility gate.
+  const lazyScope = buildLazyRowScopeInfo(ctx)
   for (const elem of ctx.loopElements) {
     const plan = buildLoopPlan(elem, {
       unsafeLocalNames,
       profileComponentName: ctx.profile ? ctx.componentName : undefined,
+      lazyScope,
     })
     // Stage 3 root cure — a JSX-bearing preamble can only be spliced into a
     // string-templated row (renderPreamble). Every shape that reaches a

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')
 }