@barefootjs/jsx 0.33.6 → 0.35.0

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

@@ -23,6 +23,7 @@ import type {
   TopLevelLoop,
 } from '../../types.ts'
 import type { IRLoopChildComponent } from '../../../types.ts'
+import type { SafeHtml } from '../../safe-html.ts'
 import type { SkeletonSlotPaths } from '../../html-template.ts'
 import type { ReactiveEffectsPlan } from './reactive-effects.ts'
 import type { InnerLoopsPlan } from './inner-loop.ts'
@@ -83,15 +84,16 @@ interface DynamicLoopCommon extends LoopPlanCommon {
 
 /**
  * A resolved preamble-patched region (#2389), ready to emit: `valueExpr` is
- * already wrapped with the loop-param accessor and, for a `joinArrayChild`
- * source, already carries the array-join ternary — the exact value
- * `irToHtmlTemplate` computes for the same node in the row template, so a
- * same-key update's re-patch stays byte-identical to what a fresh mount
- * would render.
+ * already wrapped with the loop-param accessor and already went through the
+ * child-splice door (`safe-html.ts`) — the exact value `irToHtmlTemplate`
+ * computes for the same node in the row template, so a same-key update's
+ * re-patch stays byte-identical to what a fresh mount would render. Typed
+ * `SafeHtml` because the region writer is an `innerHTML` write: only a
+ * value the door (or a named producer) vouched for may reach it.
  */
 export interface PreambleRegionPlan {
   slotId: string
-  valueExpr: string
+  valueExpr: SafeHtml
 }
 
 /** Per-item ref callback resolved against a child slot for emission (#1244). */
@@ -237,6 +239,8 @@ interface CompositeLoopVariant extends DynamicLoopCommon {
   loopParam: string
   /** Destructured-binding metadata for the loop param. */
   loopParamBindings: TopLevelLoop['paramBindings']
+  /** This loop's index param name, when it declares one (#2859). */
+  loopIndex: TopLevelLoop['index']
   /** Reactive effects rendered after the SSR/CSR split. */
   reactiveEffects: ReactiveEffectsPlan | null
   /**

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

@@ -17,6 +17,7 @@ import type { IRLoopChildComponent, LoopParamBinding } from '../../types.ts'
 import { preambleAnalysisText } from '../../types.ts'
 import { quotePropName, wrapLoopParamAsAccessor, irChildrenFreeIds, attrValueToString } from '../utils.ts'
 import { irChildrenToJsExpr, jsxChildrenPropGetterExpr } from '../html-template.ts'
+import { spliceChildValue } from '../safe-html.ts'
 import { emitListenerBlock } from './stringify/event-listener.ts'
 import { nameForRegistryRef } from '../component-scope.ts'
 import { BF_SCOPE, BF_HOST, BF_AT } from '@barefootjs/shared'
@@ -147,11 +148,12 @@ export function buildChildRefBindings(
   refs: readonly LoopChildRef[],
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  loopIndex?: string | null,
 ): readonly LoopChildRefBinding[] {
   if (refs.length === 0) return []
   return refs.map(r => ({
     childSlotId: r.childSlotId,
-    callback: wrapLoopParamAsAccessor(r.callback, loopParam, loopParamBindings),
+    callback: wrapLoopParamAsAccessor(r.callback, loopParam, loopParamBindings, loopIndex),
   }))
 }
 
@@ -241,23 +243,27 @@ export function destructureLoopParam(
 /**
  * Resolve `IRLoop.preambleRegions` (#2389) into ready-to-emit
  * `PreambleRegionPlan`s: wrap each source expression with the loop-param
- * accessor and, for a `joinArrayChild` source, apply the same array-join
- * ternary `irToHtmlTemplate` uses for the identical node in the row
- * template — so the region-patch effect's re-render matches what a fresh
- * mount would have produced. Shared by the top-level (`build-loop.ts`) and
- * branch (`build-branch-loop.ts`) plain-loop-plan builders.
+ * accessor and hand it to the same door (`spliceChildValue`) the row
+ * template's `irToHtmlTemplate` uses for the identical node — so the
+ * region-patch effect's re-render (a `'markup'` claim writer, i.e. an
+ * `innerHTML` write) matches what a fresh mount would have produced, and
+ * the escape decision is made in exactly one place. Shared by the
+ * top-level (`build-loop.ts`) and branch (`build-branch-loop.ts`)
+ * plain-loop-plan builders.
  */
 export function buildPreambleRegionPlans(
   regions: readonly PreambleRegionSource[] | undefined,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  loopIndex?: string | null,
 ): readonly PreambleRegionPlan[] {
   if (!regions || regions.length === 0) return []
   return regions.map((r) => {
-    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings)
-    const valueExpr = r.joinArrayChild
-      ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')`
-      : `escapeText(${wrapped})`
+    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings, loopIndex)
+    // The region's row-template twin carries the same `slotId`, so the door
+    // takes the slotted arm; no `markupSlotIds` here — a loop-row slot's
+    // initial render is plain `escapeText`, matching `irToHtmlTemplate`.
+    const valueExpr = spliceChildValue({ expr: r.expr, slotId: r.slotId, joinArrayChild: r.joinArrayChild }, wrapped, {})
     return { slotId: r.slotId, valueExpr }
   })
 }
@@ -270,8 +276,9 @@ export function buildComponentPropsExpr(
   comp: { props: Array<{ name: string; value: import('../../types.ts').AttrValue; isEventHandler: boolean }>, children?: import('../../types.ts').IRNode[] },
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
+  loopIndex?: string | null,
 ): string {
-  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr: string) => expr
+  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex) : (expr: string) => expr
   const entries = comp.props.map((p) => {
     if (p.isEventHandler) {
       const handlerExpr = attrValueToString(p.value) ?? 'undefined'
@@ -347,7 +354,20 @@ export function buildDepthLevels(
   }))
 }
 
-/** Emit a single addEventListener call for a child event on a given element. */
+/**
+ * Emit a single addEventListener call for a child event on a given element.
+ *
+ * This is a DIRECT, one-time listener attach (composite/inner/conditional-arm
+ * loop shapes) — unlike the top-level delegated click dispatcher
+ * (`build-event-delegation.ts`), which re-derives the current index at click
+ * time via `arr.findIndex(...)` and is unaffected by this. A handler wired
+ * here closes over whatever `renderItem` bound its raw index parameter to at
+ * ROW CREATION time, so a reference to it needs the same accessor-call
+ * rewrite as every other loop-index read in this row (#2859) — otherwise a
+ * row that survives a same-key reorder keeps firing the handler with the
+ * stale, as-created index forever, the click-handler analogue of the
+ * render-output bug #2859 itself fixes.
+ */
 function emitEventSetup(
   ls: string[],
   indent: string,
@@ -356,8 +376,9 @@ function emitEventSetup(
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
   bodyIsMultiRoot: boolean = false,
+  loopIndex?: string | null,
 ): void {
-  const handler = loopParam ? wrapLoopParamAsAccessor(ev.handler, loopParam, loopParamBindings) : ev.handler
+  const handler = loopParam ? wrapLoopParamAsAccessor(ev.handler, loopParam, loopParamBindings, loopIndex) : ev.handler
   emitListenerBlock(ls, indent, elVar, ev.childSlotId, '__e', ev.eventName, handler, 'dom', bodyIsMultiRoot)
 }
 
@@ -412,14 +433,15 @@ export function emitComponentAndEventSetup(
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
   bodyIsMultiRoot: boolean = false,
+  loopIndex?: string | null,
 ): void {
-  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr: string) => expr
+  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex) : (expr: string) => expr
   // Multi-root loop bodies (#1212) must search the item's sibling roots
   // and the pre-insertion `__bfExtras` stash; `upsertChildItem` wraps the
   // single-root `upsertChild` semantics in that walk.
   const upsertFn = bodyIsMultiRoot ? 'upsertChildItem' : 'upsertChild'
   for (const comp of comps) {
-    const propsExpr = buildComponentPropsExpr(comp, loopParam, loopParamBindings)
+    const propsExpr = buildComponentPropsExpr(comp, loopParam, loopParamBindings, loopIndex)
     // Check if children are text-equivalent and reference the loop param — if so,
     // emit a createEffect to reactively update textContent when the signal changes.
     // Text-equivalent: expression, text, or conditional with text-only branches.
@@ -429,7 +451,8 @@ export function emitComponentAndEventSetup(
     const rawChildrenExpr = isTextOnly ? irChildrenToJsExpr(comp.children!) : null
     const childrenFreeIds = isTextOnly && comp.children ? irChildrenFreeIds(comp.children) : undefined
     const childrenRefsLoop = loopParam != null && rawChildrenExpr != null && childrenFreeIds != null
-      && exprRefsLoopBinding(childrenFreeIds, { param: loopParam, paramBindings: loopParamBindings })
+      && (exprRefsLoopBinding(childrenFreeIds, { param: loopParam, paramBindings: loopParamBindings })
+        || (!!loopIndex && childrenFreeIds.has(loopIndex)))
 
     const slotIdLit = comp.slotId ? `'${comp.slotId}'` : 'null'
     const keyProp = comp.props.find(p => p.name === 'key')
@@ -449,7 +472,7 @@ export function emitComponentAndEventSetup(
     }
   }
   for (const ev of events) {
-    emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot)
+    emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot, loopIndex)
   }
 }
 

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

@@ -53,6 +53,7 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
     innerLoops,
     loopParam,
     loopParamBindings,
+    loopIndex,
     reactiveEffects,
     childRefs,
     branchClearChildren,
@@ -124,7 +125,7 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
     // variant whose tail needs the row already connected.
     mountRow: true,
   })
-  emitComponentAndEventSetup(lines, bodyIndent, '__el', compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot)
+  emitComponentAndEventSetup(lines, bodyIndent, '__el', compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot, loopIndex)
   if (innerLoops.length > 0) {
     stringifyInnerLoops(lines, innerLoops, bodyIndent, pc)
   }

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

@@ -191,6 +191,11 @@ export function stringifyLazyRowLoop(lines: string[], o: StringifyLazyRowOptions
   // --- createRow ---------------------------------------------------------
   const b1 = `${indent}  `
   const b2 = `${indent}    `
+  // Tells the runtime to also call `applyItem` on a pure reorder (#2859
+  // follow-up) — see `LazyRowPlan.indexDriven`'s docstring. Omitted (not just
+  // `false`) for every loop that never reads the index, byte-stable with
+  // this widening's predecessor.
+  if (lazyRow.readsIndex) lines.push(`${b1}indexDriven: true,`)
   lines.push(`${b1}createRow: (__e, ${o.indexParam}) => {`)
   // Always bound, even with no reactive bindings: the non-hoisted clone
   // interpolates the per-row template, which reads the param for at least
@@ -225,6 +230,9 @@ export function stringifyLazyRowLoop(lines: string[], o: StringifyLazyRowOptions
   } else {
     lines.push(`${b1}applyItem: (__e) => {`)
     lines.push(`${b2}const ${paramHead} = () => __e.item`)
+    // The row's current position (#2859 follow-up) — only when some binding
+    // here actually reads it, so every other loop's applyItem is unchanged.
+    if (lazyRow.readsIndex) lines.push(`${b2}const ${o.indexParam} = __e.index`)
     lines.push(`${b2}const __r = __e.refs ?? (__e.refs = [])`)
     lines.push(`${b2}const __l = __e.last ?? (__e.last = [])`)
     // Re-run the preamble only when a binding in THIS body reads a local it
@@ -255,6 +263,8 @@ export function stringifyLazyRowLoop(lines: string[], o: StringifyLazyRowOptions
     for (const g of lazyRow.outerPrimeGetters) lines.push(`${b2}${g}()`)
     lines.push(`${b2}for (const __e of __es) {`)
     lines.push(`${b3}const ${paramHead} = () => __e.item`)
+    // Same as `applyItem` — the row's current position (#2859 follow-up).
+    if (lazyRow.readsIndex) lines.push(`${b3}const ${o.indexParam} = __e.index`)
     lines.push(`${b3}const __r = __e.refs ?? (__e.refs = [])`)
     lines.push(`${b3}const __l = __e.last ?? (__e.last = [])`)
     // Per ENTRY, not once for the batch: the preamble reads the item, so its

package/src/ir-to-client-js/csr-substitute.ts

@@ -486,6 +486,35 @@ export function resolveGetterAliases(
   return aliases
 }
 
+/**
+ * Which names in `signals`/`memos` are eligible ALIAS-HOP TARGETS for
+ * `resolveGetterAliases`'s `isGetter` predicate — a non-module,
+ * non-env-reader signal getter, or a non-module memo name. Env-signal
+ * getters are excluded because they resolve through their own
+ * request-scoped binding (an adapter's `searchParamsFieldRef`-style
+ * lookup or equivalent), never a seeded/`out`-keyed value an alias could
+ * usefully point at.
+ *
+ * Shared by every `resolveGetterAliases` call site (#2813's `ssr-defaults.ts`
+ * seeding and the Go adapter's `rootFieldRef` field-routing) so the
+ * eligibility rule can't silently drift between them — the "one decision,
+ * two implementations" defect class CLAUDE.md calls out (pullfrog review
+ * on #2854).
+ */
+export function collectAliasableGetterNames(
+  signals: readonly SignalInfo[],
+  memos: readonly MemoInfo[],
+): Set<string> {
+  const getterNames = new Set<string>()
+  for (const sig of signals) {
+    if (sig.getter && !sig.isModule && !sig.envReader) getterNames.add(sig.getter)
+  }
+  for (const memo of memos) {
+    if (!memo.isModule) getterNames.add(memo.name)
+  }
+  return getterNames
+}
+
 /**
  * Build the CSR substitution env from the live `ClientJsContext`.
  *

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

@@ -11,6 +11,7 @@ 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 { DYNAMIC_ELEMENT_WRITER_KIND } from './markup-slots.ts'
 import { datePlugin, DATE_METHODS } from '../date-lowering.ts'
 import { toLocaleDatePlugin, foldedArgToClientJs } from '../to-locale-date-lowering.ts'
 import { tsNodeToParsedExpr } from '../expression-parser.ts'
@@ -393,9 +394,11 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
       // '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).
+      // The kind is a named constant so the initial-render side
+      // (`markup-slots.ts` → `escapeTextOrMarkup`) reads the same decision.
       let writer = ''
       if (normalElems.length > 0) {
-        const slots: ClaimSlotSpec[] = normalElems.map(elem => ({ id: elem.slotId, kind: 'markup', path: [] }))
+        const slots: ClaimSlotSpec[] = normalElems.map(elem => ({ id: elem.slotId, kind: DYNAMIC_ELEMENT_WRITER_KIND, path: [] }))
         writer = claimWriterVarName(slots, varSlotId)
         lines.push(`  const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`)
       }

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

@@ -9,6 +9,7 @@ import type { ClientJsContext } from './types.ts'
 import { PROPS_PARAM } from './utils.ts'
 import { computeInlinability, toLegacyInlinability } from './compute-inlinability.ts'
 import { canGenerateStaticTemplate, irToComponentTemplate, generateCsrTemplate, createStringProtector } from './html-template.ts'
+import { markupSlotIdsOf } from './markup-slots.ts'
 import { nameForRegistryRef } from './component-scope.ts'
 import { resolveRestSpreadNames } from './prop-handling.ts'
 
@@ -219,10 +220,7 @@ export function emitRegistrationAndHydration(
   // Build ComponentDef object for hydrate()
   const defParts: string[] = [`init: init${name}`]
   if (canGenerateStaticTemplate(_ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    // `ctx.dynamicElements` is the claim-plan-'markup' membership
-    // (#2651) — see `generateCsrTemplate`'s identical derivation below
-    // for why this is reused as-is rather than re-derived.
-    const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
+    const markupSlotIds = markupSlotIdsOf(ctx)
     const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds, ctx.restPropsName)
     if (templateHtml) {
       defParts.push(buildTemplateDefPart(ctx, templateHtml))