@barefootjs/jsx 0.26.4 → 0.28.0

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

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

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

@@ -126,7 +126,11 @@ export function createTemplateAwareStringProtector(): {
   return { protect, restore, replaceProtectedCall }
 }
 
-const VOID_ELEMENTS = new Set([
+// Exported (not just module-local) so `client-only-elision.ts` (slot
+// unification Step B) can reuse the exact same void-element list when it
+// walks the IR tree computing markerless-eligible child-index paths —
+// duplicating this list would risk the two walks silently drifting apart.
+export const VOID_ELEMENTS = new Set([
   'area', 'base', 'br', 'col', 'embed', 'hr', 'img',
   'input', 'link', 'meta', 'param', 'source', 'track', 'wbr',
 ])
@@ -794,6 +798,16 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
 
     case 'expression': {
       if (node.expr === 'null' || node.expr === 'undefined') return ''
+      // Slot unification Step B (`markerless`, decided once by
+      // `client-only-elision.ts` before this CSR pass runs): drop the
+      // marker pair and fall through to the same bare `${...}` shape the
+      // no-slotId branch below already uses — `elidedPath` (not this
+      // string) is what the claim plan resolves against, so no marker
+      // anchor is needed here at all.
+      if (node.markerless) {
+        const bare = wrapInterpolation(wrapExpr(node.expr))
+        return `\${${bare}}`
+      }
       const inner = wrapInterpolation(wrapExpr(node.expr))
       // Stage 3 / D4 — an element-array child ({out}) built by an arbitrary
       // .map() preamble is an array of HTML strings; join it rather than let
@@ -908,8 +922,8 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       // (Go's `bf_sort`, etc.) applied the sort separately and
       // hydration only needed to match, but broken on Hono / CSR
       // where the template is the only source of truth. The chain
-      // mirrors `buildChainedArrayExpr` so reconcileList sees the
-      // same array shape this template emits.
+      // mirrors `buildChainedArrayExpr` so mapArray/mapArrayAnchored sees
+      // the same array shape this template emits.
       const rawChainedArray = applyLoopChain(node)
       const { array: iterArray, callbackParam } = applyIterationShape(node, rawChainedArray, indexParam)
       const wrappedArray = wrapExpr(iterArray)
@@ -1120,7 +1134,9 @@ export interface SkeletonSlotPaths {
  * the loop keeps its hoisted-clone fast path, but every slot lookup falls
  * back to `qsa`/`$t`.
  */
-const SKELETON_PATH_HAZARD_TAGS = new Set([
+// Exported for reuse by `client-only-elision.ts` (Step B) — same hazard
+// class, same reasoning, must never drift out of sync with a second copy.
+export const SKELETON_PATH_HAZARD_TAGS = new Set([
   'table', 'thead', 'tbody', 'tfoot', 'caption', 'colgroup', 'col',
   'select', 'optgroup',
   'p',
@@ -1136,7 +1152,7 @@ const SKELETON_PATH_HAZARD_TAGS = new Set([
  * `<dt>` closes the `<dt>`). A skeleton hitting this bails on path
  * computation entirely (see `SKELETON_PATH_HAZARD_TAGS` doc).
  */
-const SKELETON_PATH_FORCE_CLOSE_GROUPS: ReadonlyArray<ReadonlySet<string>> = [
+export const SKELETON_PATH_FORCE_CLOSE_GROUPS: ReadonlyArray<ReadonlySet<string>> = [
   new Set(['a']),
   new Set(['button']),
   new Set(['form']),
@@ -1146,7 +1162,7 @@ const SKELETON_PATH_FORCE_CLOSE_GROUPS: ReadonlyArray<ReadonlySet<string>> = [
   new Set(['li']),
 ]
 
-function skeletonForceCloseGroup(tag: string): number {
+export function skeletonForceCloseGroup(tag: string): number {
   return SKELETON_PATH_FORCE_CLOSE_GROUPS.findIndex(group => group.has(tag))
 }
 
@@ -1204,7 +1220,7 @@ function walkSkeletonPathNode(
 }
 
 /** True if `children` (already flattened) contains anything the HTML parser would foster-parent out of a `<tr>`. */
-function hasForeignTableRowContent(children: readonly IRNode[]): boolean {
+export function hasForeignTableRowContent(children: readonly IRNode[]): boolean {
   for (const child of children) {
     if (child.type === 'text') {
       if (child.value.trim() !== '') return true
@@ -1218,7 +1234,7 @@ function hasForeignTableRowContent(children: readonly IRNode[]): boolean {
 }
 
 /** Splice fragment children inline — a fragment contributes no DOM node of its own. */
-function flattenSkeletonChildren(children: readonly IRNode[]): IRNode[] {
+export function flattenSkeletonChildren(children: readonly IRNode[]): IRNode[] {
   const out: IRNode[] = []
   for (const child of children) {
     if (child.type === 'fragment') {
@@ -2322,7 +2338,11 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
     case 'expression':
       if (node.expr === 'null' || node.expr === 'undefined') return ''
       if (node.clientOnly && node.slotId) {
-        return `<!--bf-client:${node.slotId}--><!--/-->`
+        // Ordinary claimed 'text' slot pair (slot unification A3) — matches
+        // the SSR adapters' `renderExpression` byte-for-byte (byte parity):
+        // empty at CSR mount too, since the expression is evaluated only
+        // once init's createEffect runs, same as the SSR case.
+        return `<!--bf:${node.slotId}--><!--/-->`
       }
       {
         const transformed = transformExpr(node.expr, node.templateExpr)

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

@@ -8,13 +8,22 @@ import { isClientBuiltinName } from '../builtins.ts'
 // All exports from @barefootjs/client/runtime that may be used in generated code
 export const RUNTIME_IMPORT_CANDIDATES = [
   'createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount',
-  'hydrate', 'insert', 'reconcileElements', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'patchLeaf', 'patchSlotRange', 'createDisposableEffect',
-  'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'updateClientMarker',
+  'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect',
+  'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
-  'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText',
+  'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode',
   'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
-  'tAfter',
+  // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
+  // — the "one claim mechanism" that replaced `patchSlotRange` and
+  // `updateClientMarker` (both deleted) as the content-slot update door.
+  // `lazyClaimSlots` is the read-capable twin of `lazySlots` over the same
+  // claim — emitted only by lazy loops that seed an outer-involving TEXT
+  // binding by read-compare-write (§9.3(1)).
+  // `textOrNode` is the 'text' door's Node guard: a child-position value that
+  // turns out to be a live Node must reach the writer as a Node so the claim
+  // can promote to 'markup', never as `String(node)`.
+  'claimSlots', 'lazySlots', 'lazyClaimSlots', 'textOrNode',
   // Profile mode (#1690, SR3) — turn-boundary markers around event handlers.
   'beginTurn', 'endTurn',
   // Catalogued `Date` lowering (#2274/#2292) — the client counterpart to

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

@@ -571,8 +571,9 @@ export function collectLoopChildReactiveTexts(
     expression: ({ node: n, scope: insideConditional }) => {
       if (!n.slotId) return
       // #2389 — a preamble-patched region (see `IRLoop.preambleRegions`) has
-      // its own `patchSlotRange`-based effect (`preambleRegions` in the
-      // client-JS loop plan); it must never ALSO become a `reactiveTexts`
+      // its own claimed 'markup'-slot effect (`preambleRegions` in the
+      // client-JS loop plan; slot unification A3, `@barefootjs/client/
+      // runtime/claim-slots.ts`); it must never ALSO become a `reactiveTexts`
       // entry, which would patch it via `.textContent` and corrupt markup
       // (a `joinArrayChild` region's value is raw HTML, not text).
       if (n.preambleRegion) return

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

@@ -255,7 +255,7 @@ export interface LoopCore {
   /**
    * Unique id for this loop's `<!--bf-loop:<id>--> ... <!--bf-/loop:<id>-->`
    * marker pair, threaded from `IRLoop.markerId`. Each `mapArray()` /
-   * `reconcileElements()` call passes this id so sibling loops under the
+   * `mapArrayAnchored()` call passes this id so sibling loops under the
    * same parent reconcile their own range (#1087).
    */
   markerId: string
@@ -609,7 +609,7 @@ export interface TopLevelLoop extends LoopCore {
   // Per-item bindings (events / reactiveAttrs / reactiveTexts / refs / conditionals)
   // now live on `LoopCore.bindings` — see issue #1244 §B.
   isStaticArray: boolean // True if array is a static prop (not a signal)
-  useElementReconciliation?: boolean // True: reconcileElements + composite rendering (native root with child components)
+  useElementReconciliation?: boolean // True: mapArray/mapArrayAnchored + composite rendering (native root with child components)
   /** Inner loop metadata for composite element reconciliation (array, param, key, container) */
   innerLoops?: NestedLoop[]
   /** Offset of this loop's items past its preceding container siblings (#1693). */
@@ -654,6 +654,14 @@ export interface ReactiveAttribute extends AttrMeta {
 export interface ClientOnlyElement {
   slotId: string
   expression: string
+  /**
+   * Slot unification Step B (`spec/slot-unification.md` §3(b), §5 Step B):
+   * copied from `IRExpression.elidedPath` (`client-only-elision.ts`) when
+   * the compiler proved this slot's marker pair can be elided. Absent
+   * (`undefined`) is always safe — the claim plan falls back to `path: []`
+   * / marker-based resolution exactly as before Step B.
+   */
+  elidedPath?: readonly number[]
 }
 
 

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

@@ -180,7 +180,7 @@ export function applyObjectIterationWrap(
 }
 
 /**
- * Build the chained array expression for reconcileList. Thin
+ * Build the chained array expression for mapArray/mapArrayAnchored. Thin
  * adapter over `buildLoopChainExpr` that unpacks the collected
  * `TopLevelLoop` / `BranchLoop` shape into the primitive inputs.
  * Branch loops carry the same `filterPredicate` / `sortComparator`

package/src/jsx-to-ir.ts

@@ -2707,7 +2707,24 @@ function transformConditionalBranch(
   const callsReactive = exprCallsReactiveGetters(node, ctx)
   const hasCalls = exprHasFunctionCalls(node)
   const reactive = isReactiveExpression(exprText, ctx, node) || isReactiveOrigin(branchOrigin)
-  const needsSlot = reactive || callsReactive
+  // A branch whose entire value is a bare loop-item read (`row.label`) sets
+  // neither `reactive` nor `callsReactive`: `render-item` is deliberately
+  // excluded from `REACTIVE_BINDING_KINDS` (types.ts) because per-item
+  // reactivity flows through the loop's own per-item signal accessor, not
+  // this origin-based classification, and there is no call to trip
+  // `callsReactive`/`hasCalls` either. Without a slotId here, a keyed loop
+  // row that changes value without its condition flipping has nothing for
+  // `collectLoopChildReactiveTexts` (ir-to-client-js/reactivity.ts) to
+  // attach an update effect to, and the branch is frozen at its
+  // mount-time value forever (the loop-branch-stale-text defect). Read the
+  // freeRefs this function already computed above — no new parse, and no
+  // regex re-scan of `exprText` (contrast the legacy `referencesLoopParam`
+  // used by the sibling `transformConditional`/`transformLogicalAnd`
+  // condition-side decisions, which token-matches the loop param name
+  // against expression TEXT and can false-match inside an unrelated string
+  // literal branch like `"this row is empty"`).
+  const refsLoopParam = branchOrigin.freeRefs?.some(r => r.kind === 'render-item') ?? false
+  const needsSlot = reactive || callsReactive || refsLoopParam
   const slotId = needsSlot ? generateSlotId(ctx) : null
   return {
     type: 'expression',
@@ -4610,8 +4627,8 @@ function transformMapCall(
   const bodyIsMultiRoot = loopBodyIsMultiRoot(children)
 
   // Determine if array is static (prop) or dynamic (signal/memo).
-  // Static arrays don't need reconcileList — SSR elements are hydrated
-  // directly. Signal / memo arrays need reconcileList for dynamic DOM
+  // Static arrays don't need mapArray/mapArrayAnchored — SSR elements are
+  // hydrated directly. Signal / memo arrays need mapArray for dynamic DOM
   // updates.
   //
   // Solid-style wrap-by-default fallback (#943, follow-up to
@@ -4621,7 +4638,7 @@ function transformMapCall(
   // where `getItems` is an imported helper previously silent-dropped
   // into the static-render path, freezing the SSR-time list on the
   // client. Over-reconciling an array that happens to contain a pure
-  // call costs one extra `reconcileList` per loop; under-reconciling
+  // call costs one extra `mapArray` per loop; under-reconciling
   // is the silent-drop bug this closes.
   //
   // Destructured map params (`([, cfg]) => ...`, `({ a, b }) => ...`,
@@ -4660,8 +4677,9 @@ function transformMapCall(
 
   // Collect nested components for both static and dynamic arrays.
   // Static arrays: needed for initChild hydration.
-  // Dynamic arrays with native root + component descendants: enables reconcileElements
-  // with composite rendering (placeholder + createComponent replacement).
+  // Dynamic arrays with native root + component descendants: enables
+  // mapArray/mapArrayAnchored with composite rendering (placeholder +
+  // createComponent replacement).
   const nestedComponents = collectNestedComponents(children).filter(c => c.name !== childComponent?.name)
 
   return {
@@ -6564,7 +6582,7 @@ function isArrayExprDirectPropRef(arrayExpr: ts.Expression, ctx: TransformContex
 
 /**
  * Check if array expression is a signal or memo getter call.
- * Used to determine if a loop needs reconcileList for dynamic DOM updates.
+ * Used to determine if a loop needs mapArray for dynamic DOM updates.
  * Props and local constants are considered static (don't change at runtime).
  */
 function isSignalOrMemoArray(array: string, ctx: TransformContext): boolean {
@@ -6767,7 +6785,7 @@ function attrValueReactivityProbe(value: AttrValue): string | null {
 
 /**
  * Propagate slotId to loop children that need it.
- * Loops need to use their parent element's slotId for reconcileList.
+ * Loops need to use their parent element's slotId for mapArray.
  * This handles loops directly in children or nested in fragments.
  */
 function propagateSlotIdToLoops(children: IRNode[], slotId: string): void {

package/src/types.ts

@@ -386,7 +386,8 @@ export interface IRExpression {
    * intersect the enclosing loop's `preamble.declaredNames`. Excludes the
    * node from `collectLoopChildReactiveTexts` (which patches via
    * `.textContent`, wrong for markup) regardless of `reactive` / `slotId` —
-   * the region-patch effect (`patchSlotRange`) is its only wiring.
+   * the region-patch effect (a claimed 'markup' slot writer, slot
+   * unification A3) is its only wiring.
    */
   preambleRegion?: boolean
   /** When true, expression calls signal getters or memos (has reactive `foo()` pattern). */
@@ -400,6 +401,28 @@ export interface IRExpression {
    * source of truth for free-reference / reactivity classification.
    */
   origin: OriginInfo
+  /**
+   * Slot unification Step B (`spec/slot-unification.md` §3(b), §5 Step B):
+   * true when this slot's `<!--bf:sN-->…<!--/-->` marker pair can be safely
+   * omitted from BOTH SSR and CSR output, because `elidedPath` already gives
+   * every claimer a real compile-time DOM path to the slot's position.
+   * Decided EXACTLY ONCE, by `client-only-elision.ts`, before either
+   * `adapter.generate()` (SSR) or `generateClientJs()` (CSR) run — every one
+   * of the nine SSR adapters' `renderExpression` and the CSR template
+   * emitters (`html-template.ts`) read this single flag and must never
+   * re-derive their own elision decision. Unset/false is always safe
+   * (keeps markers, today's behavior); only the compiler pass above may
+   * ever set it true.
+   */
+  markerless?: boolean
+  /**
+   * Root-relative child-index path to this slot's position (parent index
+   * chain, LAST element = the index of the slot itself within its parent's
+   * `childNodes`). Valid, and required, only when `markerless` is true —
+   * see `SlotSpec.markerless` in `@barefootjs/client/runtime/claim-slots.ts`
+   * for the claim-time resolve-or-create semantics this path feeds.
+   */
+  elidedPath?: readonly number[]
 }
 
 export interface IRConditional {
@@ -723,7 +746,7 @@ export interface IRLoop {
    * `slotId` is emitted as the usual `<!--bf:sN-->...<!--/-->` marker pair
    * (same door as a reactive text slot — `irToHtmlTemplate` / Hono's
    * `renderExpression` key off `slotId` alone), but the CLIENT wiring is a
-   * distinct `patchSlotRange`-based region-patch effect (`preambleRegions`
+   * distinct claimed 'markup'-slot region-patch effect (`preambleRegions`
    * in the client-JS loop plan), NOT a `reactiveTexts` entry — patching via
    * `.textContent` would escape markup that a `joinArrayChild` region must
    * render raw. `collectLoopChildReactiveTexts` excludes any node collected