@barefootjs/jsx 0.26.2 → 0.26.4

package/src/ir-to-client-js/control-flow/stringify/event-delegation.ts

@@ -6,7 +6,7 @@
  *     if (<container>) <container>.addEventListener('<eventName>', (__bfEvt) => {
  *       const target = __bfEvt.target
  *       const <slot>El = target.closest('[bf="<slotId>"]')
- *       if (<slot>El) {
+ *       if (<slot>El && <container>.contains(<slot>El)) {
  *         <item-lookup specific>
  *         <handlerCall>
  *         return
@@ -74,6 +74,26 @@ function indexBindingLine(handler: string, indexParam: string | null, indexExpr:
   return `const ${indexParam} = ${indexExpr}`
 }
 
+/**
+ * Splice-only-when-referenced (#3, BUG-3 fix part 2): a preamble is dead
+ * weight for an event whose handler never reads one of the names it
+ * declares — the common case (an unused array builder like `cells` in the
+ * BUG-3 repro). Only emit `mapPreamble` when `handler`'s free identifiers
+ * intersect `declaredNames`; otherwise the delegated handler pays nothing
+ * for a preamble it never uses. `declaredNames` is empty whenever
+ * `mapPreamble` is `null`, so the `!mapPreamble` short-circuit is mostly
+ * redundant but keeps this correct-by-construction if that ever changes.
+ */
+function preambleLineForHandler(
+  mapPreamble: string | null,
+  declaredNames: readonly string[],
+  handler: string,
+): string | null {
+  if (!mapPreamble || declaredNames.length === 0) return null
+  const free = extractFreeIdentifiersFromText(handler)
+  return declaredNames.some((name) => free.has(name)) ? mapPreamble : null
+}
+
 export function stringifyEventDelegation(lines: string[], plan: EventDelegationPlan): void {
   const { containerVar, events, itemLookup, profileComponentName } = plan
   const eventsByName = new Map<string, LoopChildEvent[]>()
@@ -94,8 +114,15 @@ export function stringifyEventDelegation(lines: string[], plan: EventDelegationP
     lines.push(`    const target = __bfEvt.target`)
     for (const ev of evs) {
       const childVar = varSlotId(ev.childSlotId)
+      // Bound the slot match to the delegating container (#2367). `bf` ids are
+      // unique only *within* a component, so an unscoped
+      // `target.closest('[bf="sN"]')` can match a same-id element in an ancestor
+      // component and silently take the wrong branch. The container holds every
+      // slot it delegates on, so a same-id ancestor is never a descendant of it —
+      // the `container.contains(...)` guard rejects the foreign match and the
+      // handler falls through to the correct branch.
       lines.push(`    const ${childVar}El = target.closest('[bf="${ev.childSlotId}"]')`)
-      lines.push(`    if (${childVar}El) {`)
+      lines.push(`    if (${childVar}El && ${containerVar}.contains(${childVar}El)) {`)
       const handlerCall = withTurn(`(${ev.handler.trim()})(__bfEvt)`, profileComponentName, ev.childSlotId, ev.eventName)
       switch (itemLookup.kind) {
         case 'keyed':
@@ -126,7 +153,8 @@ function emitKeyedLookup(
   handlerCall: string,
   lookup: KeyedItemLookup,
 ): void {
-  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings, indexParam } = lookup
+  const { arrayExpr, param, keyWithItem, mapPreamble, mapPreambleDeclaredNames, hasBindings, indexParam } = lookup
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler)
 
   if (ev.nestedLoops.length === 0) {
     // Single-level keyed lookup.
@@ -139,15 +167,28 @@ function emitKeyedLookup(
       ls.push(`        const __bfLoopItem = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`)
       ls.push(`        if (__bfLoopItem) {`)
       ls.push(`          const ${param} = __bfLoopItem`)
-      if (mapPreamble) ls.push(`          ${mapPreamble}`)
+      if (preambleLine) ls.push(`          ${preambleLine}`)
       if (idxLine) ls.push(`          ${idxLine}`)
-      ls.push(`          ${handlerCall}`)
+      // Leading `;` (not just relying on the preceding line's own
+      // semicolon): `handlerCall` always starts with `(` — an ASI hazard
+      // pre-existing in this branch even with neither optional line above
+      // (`const ${param} = __bfLoopItem` has no trailing `;`), which glues
+      // the call onto it as `__bfLoopItem(...)` and throws
+      // `TypeError: __bfLoopItem is not a function`. Defend at the one
+      // emission point rather than chasing every preceding-line shape.
+      ls.push(`          ;${handlerCall}`)
       ls.push(`        }`)
     } else {
+      // The preamble (when referenced) and the handler call both run INSIDE
+      // the item null guard — a `.find()` miss (stale-DOM race, e.g. the
+      // clicked row's key no longer in the current array) must short-circuit
+      // before a preamble that dereferences the item ever runs (BUG-4).
       ls.push(`        const ${param} = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`)
-      if (mapPreamble) ls.push(`        ${mapPreamble}`)
-      if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
-      else ls.push(`        if (${param}) ${handlerCall}`)
+      ls.push(`        if (${param}) {`)
+      if (preambleLine) ls.push(`          ${preambleLine}`)
+      if (idxLine) ls.push(`          ${idxLine}`)
+      ls.push(`          ;${handlerCall}`)
+      ls.push(`        }`)
     }
     ls.push(`      }`)
     return
@@ -180,10 +221,14 @@ function emitKeyedLookup(
   }
   const outerGuard = hasBindings ? '__bfLoopItem' : param
   const allParams = [outerGuard, ...ev.nestedLoops.map(n => n.param)]
-  if (mapPreamble) ls.push(`      ${mapPreamble}`)
+  // Preamble and idx binding run INSIDE the combined item guard (BUG-4) —
+  // a nested `.find()` miss must short-circuit before the preamble runs.
   const idxLine = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === outerKey)`)
-  if (idxLine) ls.push(`      if (${allParams.join(' && ')}) { ${idxLine}; ${handlerCall} }`)
-  else ls.push(`      if (${allParams.join(' && ')}) ${handlerCall}`)
+  ls.push(`      if (${allParams.join(' && ')}) {`)
+  if (preambleLine) ls.push(`        ${preambleLine}`)
+  if (idxLine) ls.push(`        ${idxLine}`)
+  ls.push(`        ;${handlerCall}`)
+  ls.push(`      }`)
 }
 
 function emitDynamicIndexLookup(
@@ -192,7 +237,8 @@ function emitDynamicIndexLookup(
   handlerCall: string,
   lookup: DynamicIndexItemLookup,
 ): void {
-  const { arrayExpr, param, mapPreamble, hasBindings, indexParam } = lookup
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, hasBindings, indexParam } = lookup
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler)
   const idxLine = indexBindingLine(ev.handler, indexParam, 'idx')
   ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('li, [bf-i]')`)
   ls.push(`      if (li && li.parentElement) {`)
@@ -201,15 +247,19 @@ function emitDynamicIndexLookup(
     ls.push(`        const __bfLoopItem = ${arrayExpr}[idx]`)
     ls.push(`        if (__bfLoopItem) {`)
     ls.push(`          const ${param} = __bfLoopItem`)
-    if (mapPreamble) ls.push(`          ${mapPreamble}`)
+    if (preambleLine) ls.push(`          ${preambleLine}`)
     if (idxLine) ls.push(`          ${idxLine}`)
-    ls.push(`          ${handlerCall}`)
+    ls.push(`          ;${handlerCall}`)
     ls.push(`        }`)
   } else {
+    // Preamble and idx binding run INSIDE the item null guard (BUG-4) — an
+    // out-of-range index (stale-DOM race) must short-circuit first.
     ls.push(`        const ${param} = ${arrayExpr}[idx]`)
-    if (mapPreamble) ls.push(`        ${mapPreamble}`)
-    if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
-    else ls.push(`        if (${param}) ${handlerCall}`)
+    ls.push(`        if (${param}) {`)
+    if (preambleLine) ls.push(`          ${preambleLine}`)
+    if (idxLine) ls.push(`          ${idxLine}`)
+    ls.push(`          ;${handlerCall}`)
+    ls.push(`        }`)
   }
   ls.push(`      }`)
 }
@@ -221,7 +271,8 @@ function emitStaticIndexLookup(
   lookup: StaticIndexItemLookup,
   containerVar: string,
 ): void {
-  const { arrayExpr, param, mapPreamble, offset, indexParam } = lookup
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, offset, indexParam } = lookup
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler)
   const idxLine = indexBindingLine(ev.handler, indexParam, '__idx')
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`)
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`)
@@ -229,8 +280,12 @@ function emitStaticIndexLookup(
   const idxOffset = buildLoopChildIndexSubtraction(offset ?? undefined)
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`)
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`)
-  if (mapPreamble) ls.push(`        ${mapPreamble}`)
-  if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`)
-  else ls.push(`        if (${param}) ${handlerCall}`)
+  // Preamble and idx binding run INSIDE the item null guard (BUG-4) — an
+  // out-of-range index (stale-DOM race) must short-circuit first.
+  ls.push(`        if (${param}) {`)
+  if (preambleLine) ls.push(`          ${preambleLine}`)
+  if (idxLine) ls.push(`          ${idxLine}`)
+  ls.push(`          ;${handlerCall}`)
+  ls.push(`        }`)
   ls.push(`      }`)
 }

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

@@ -32,6 +32,7 @@ import { buildSkeletonPathPlan, type SkeletonPathPlan } from './skeleton-paths.t
 import { stringifyComponentLoop } from './component-loop.ts'
 import { stringifyCompositeLoop } from './composite-loop.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
@@ -64,6 +65,40 @@ 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`.
+ */
+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
  * delegates to the per-variant stringifier. Callers should consume this
@@ -128,8 +163,33 @@ export function stringifyPlainLoop(
     bodyIsMultiRoot,
     anchored,
     anchorKeyExpr,
+    preambleRegions,
   } = plan
 
+  // flatMap descriptor mode: the accessor flattens the source through the
+  // callback body (each leaf a `({ k, h })` descriptor), mapArray keys on
+  // `d.k`, and each item element is built from — and patched against — its
+  // rendered HTML. Hydration adopts the SSR leaf in place (`__last` seeds
+  // undefined so the first effect run records without patching — trust SSR,
+  // same contract as plain rows); a later same-key HTML change patches the
+  // element wholesale via `patchLeaf` (flatMap leaves carry no per-slot
+  // wiring by construction — the compiler refuses leaves that would).
+  if (plan.flatMapLeafItem) {
+    const loopBfIdArg = plan.profileLoopId ? `, ${JSON.stringify(plan.profileLoopId)}` : ''
+    lines.push(`${topIndent}mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (__bfD, ${indexParam}, __existing) => {`)
+    lines.push(`${topIndent}  let __el = __existing`)
+    lines.push(`${topIndent}  if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }`)
+    lines.push(`${topIndent}  let __last = __existing ? undefined : __bfD().h`)
+    lines.push(`${topIndent}  createEffect(() => {`)
+    lines.push(`${topIndent}    const __html = __bfD().h`)
+    lines.push(`${topIndent}    if (__last === undefined) { __last = __html; return }`)
+    lines.push(`${topIndent}    if (__html !== __last) { __last = __html; patchLeaf(__el, __html) }`)
+    lines.push(`${topIndent}  })`)
+    lines.push(`${topIndent}  return __el`)
+    lines.push(`${topIndent}}, '${markerId}'${loopBfIdArg})`)
+    return
+  }
+
   // Whole-item conditional loops (#1665) render 0-or-1 element per item, so
   // they route through `mapArrayAnchored`. The renderItem returns a fragment
   // headed by a `<!--bf-loop-i:KEY-->` anchor and seeded with the
@@ -158,7 +218,10 @@ export function stringifyPlainLoop(
   // the factory, so non-empty refs force the multi-line layout the same way
   // reactive effects do (#1244).
   const loopBfId = plan.profileLoopId ? `, ${JSON.stringify(plan.profileLoopId)}` : ''
-  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0) {
+  // Preamble-patched regions (#2389) need `__el` as a query root for their
+  // effect, so non-empty regions force the multi-line layout — same
+  // precedent as `childRefs` above.
+  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0 && preambleRegions.length === 0) {
     // Single-line renderItem (no reactive effects, single root, no refs).
     const unwrapInline = paramUnwrap ? `${paramUnwrap} ` : ''
     const preamble = mapPreambleWrapped ? `${mapPreambleWrapped}; ` : ''
@@ -217,6 +280,7 @@ export function stringifyPlainLoop(
     })
   }
   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})`)
 }

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

@@ -21,6 +21,7 @@
  */
 
 import type { ClientJsContext, TopLevelLoop } from './types.ts'
+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'
@@ -70,6 +71,16 @@ export function emitLoopUpdates(lines: string[], ctx: ClientJsContext, unsafeLoc
       unsafeLocalNames,
       profileComponentName: ctx.profile ? ctx.componentName : undefined,
     })
+    // Stage 3 root cure — a JSX-bearing preamble can only be spliced into a
+    // string-templated row (renderPreamble). Every shape that reaches a
+    // 'dom-ops' variant today is already refused in Phase 1 with a proper
+    // source location; this backstop exists for FUTURE variants, so a new
+    // plan kind that declares 'dom-ops' cannot silently drop the preamble —
+    // it fails the build here instead.
+    internalInvariant(
+      !(elem.preamble && elem.preamble.builderNames.length > 0 && plan.rowConstruction === 'dom-ops'),
+      `loop variant '${plan.kind}' declares dom-ops row construction but received a JSX-bearing preamble — add a Phase-1 refusal (or wire renderPreamble support) for this shape`,
+    )
     stringifyLoop(lines, plan)
     emitLoopEventDelegation(lines, elem, plan.kind, ctx.profile ? ctx.componentName : undefined)
   }