@barefootjs/jsx 0.29.0 → 0.30.2

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

@@ -20,8 +20,11 @@
 import { freeIdentifiers, parseExpression } from '../../../expression-parser.ts'
 import { pickAttrMeta, type AttrMeta } from '../../../types.ts'
 import { extractFreeIdentifiersFromText } from '../../csr-substitute.ts'
+import { addCondAttrToTemplate } from '../../html-template.ts'
 import { wrapLoopParamAsAccessor, PROPS_PARAM } from '../../utils.ts'
 import type { BranchLoop, ClientJsContext, TopLevelLoop } from '../../types.ts'
+import { analyzeLazyConditional, type LazyConditionalFacts } from './lazy-conditional.ts'
+import { analyzeLazyPreamble } from './lazy-preamble.ts'
 import {
   classifyLazyBinding,
   lazyRowEligibility,
@@ -44,6 +47,13 @@ export interface LazyRowAttrBinding {
   ordinal: number
   readsItem: boolean
   readsOuter: boolean
+  /**
+   * Reads a `.map()` preamble local, so every apply body this binding is
+   * emitted into must re-run the preamble first (#2447 follow-up). Per
+   * binding, not per loop, so `applyOuter` does not pay for a preamble only
+   * `applyItem`'s bindings read.
+   */
+  readsPreamble: boolean
 }
 
 /** One reactive text (content slot) of a lazy row. */
@@ -58,6 +68,37 @@ export interface LazyRowTextBinding {
    * (`LazyRowPlanData.textNeedsRead`).
    */
   readsOuter: boolean
+  /**
+   * Reads a `.map()` preamble local, so every apply body this binding is
+   * emitted into must re-run the preamble first (#2447 follow-up).
+   */
+  readsPreamble: boolean
+}
+
+/** One row conditional driven from the loop-level apply bodies (§9.5). */
+export interface LazyRowConditionalBinding {
+  slotId: string
+  /** Already wrapped via `wrapLoopParamAsAccessor` — reads `<param>()`. */
+  wrappedCondition: string
+  whenTrueHtml: string
+  whenFalseHtml: string
+  /**
+   * Index into `entry.refs` holding the `[bf-c]` element. Always claimed ON
+   * DEMAND — `createRow` never seeds it, because the row it just cloned already
+   * rendered the correct arm and has no swap to perform.
+   */
+  refIndex: number
+  /** Index into `entry.last` holding this conditional's dedup boolean. */
+  ordinal: number
+  readsItem: boolean
+  readsOuter: boolean
+  /**
+   * Reads a `.map()` preamble local, so every apply body this binding is
+   * emitted into must re-run the preamble first (#2447 follow-up). Per
+   * binding, not per loop, so `applyOuter` does not pay for a preamble only
+   * `applyItem`'s bindings read.
+   */
+  readsPreamble: boolean
 }
 
 export interface LazyRowPlanData {
@@ -86,8 +127,35 @@ export interface LazyRowPlanData {
    * nothing per row).
    */
   outerPrimeGetters: readonly string[]
-  /** True when at least one binding is outer-involving. */
-  hasOuter: boolean
+  /**
+   * The row's `.map()` callback preamble as already-wrapped JS statements
+   * (`mapPreambleWrapped`), or `''` when the row has none — proven safe to run
+   * by `analyzeLazyPreamble` (§9.5 widening).
+   *
+   * `createRow` always runs it, and specifically before the clone: the
+   * non-hoisted per-row template can interpolate values the preamble declares.
+   *
+   * `applyItem` / `applyOuter` run it only when a binding they own reads a
+   * declared local (`itemNeedsPreamble` / `outerNeedsPreamble`) — which is
+   * possible as of the #2447 follow-up, where an attribute reading one became
+   * a reactive binding instead of frozen template text. Re-running is sound
+   * because `analyzeLazyPreamble` proved the statements are `const`
+   * declarations whose initializers only read the item and zero-arg signal
+   * getters, and the binding's DEPENDENCIES are the preamble's own free
+   * identifiers (substituted in `classifyLazyBinding`), so `applyOuter`
+   * primes what the preamble reads rather than the opaque local name.
+   */
+  preambleStatements: string
+  /** `applyItem` has a binding that reads a preamble local (#2447 follow-up). */
+  itemNeedsPreamble: boolean
+  /** `applyOuter` has one. Separate from the above so neither body pays for the other's. */
+  outerNeedsPreamble: boolean
+  /**
+   * Row conditionals driven from the apply bodies (§9.5, `lazy-conditional.ts`).
+   * Empty for most loops. Each arm is a static element, so the emitter hoists
+   * both parsed once per loop and clones on a flip.
+   */
+  conditionals: readonly LazyRowConditionalBinding[]
 }
 
 export interface BuildLazyRowArgs {
@@ -126,6 +194,28 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
   const rowLocalNames = new Set<string>([loop.param])
   for (const b of loop.paramBindings ?? []) rowLocalNames.add(b.name)
 
+  // §9.5 preamble widening: prove the preamble is safe to re-run in the apply
+  // bodies BEFORE classifying, because a binding that reads a declared local
+  // inherits the preamble's dependencies rather than its own literal names.
+  const primableNames = new Set<string>([...scope.signals.keys(), ...scope.memos])
+  const preambleAnalysis = analyzeLazyPreamble(loop.preamble, args.indexParam, primableNames)
+
+  // §9.5 conditional widening: a row conditional whose arms are wiring-free
+  // static elements is driven from the apply bodies instead of a per-row
+  // `insert()` effect. The FIRST refusal wins, so the gate names one shape.
+  const rawConditionals = loop.bindings.conditionals ?? []
+  const condFacts: LazyConditionalFacts[] = []
+  let conditionalRefusal: string | null = null
+  for (const cond of rawConditionals) {
+    const verdict = analyzeLazyConditional(cond, args.indexParam, {
+      whenTrueHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
+      whenFalseHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
+    })
+    if (!verdict.lazySafe) { conditionalRefusal = verdict.reason; break }
+    condFacts.push(verdict.facts)
+  }
+  const preambleFacts = preambleAnalysis.lazySafe ? preambleAnalysis.facts : undefined
+
   // --- classify every binding -------------------------------------------
   const classified: ClassifiedLazyBinding[] = []
   const attrClass = new Map<number, ClassifiedLazyBinding>()
@@ -137,6 +227,7 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
       rowLocalNames,
       indexParam: args.indexParam,
       scope,
+      preamble: preambleFacts,
     })
     attrClass.set(i, c)
     classified.push(c)
@@ -150,11 +241,30 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
       rowLocalNames,
       indexParam: args.indexParam,
       scope,
+      preamble: preambleFacts,
     })
     textClass.set(i, c)
     classified.push(c)
   })
 
+  const condClass = new Map<number, ClassifiedLazyBinding>()
+  condFacts.forEach((c, i) => {
+    // Classified like any other binding: a condition reading an outer signal
+    // must land in `applyOuter` AND get that signal onto the prime list, or the
+    // loop-level effect would never subscribe to it.
+    const k = classifyLazyBinding({
+      kind: 'attr',
+      slotId: c.slotId,
+      free: rawConditionals[i].conditionFreeIdentifiers ?? null,
+      rowLocalNames,
+      indexParam: args.indexParam,
+      scope,
+      preamble: preambleFacts,
+    })
+    condClass.set(i, k)
+    classified.push(k)
+  })
+
   // --- §9.4 gate ---------------------------------------------------------
   const shape: LazyRowShapeFacts = {
     callSite: args.callSite,
@@ -162,12 +272,12 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
     anchored: args.anchored,
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
     hasExplicitKey: loop.key != null,
-    conditionalCount: loop.bindings.conditionals?.length ?? 0,
+    conditionalRefusal,
     childRefCount: loop.bindings.refs?.length ?? 0,
     nestedComponentCount: loop.nestedComponents?.length ?? 0,
     innerLoopCount: loop.innerLoops?.length ?? 0,
     hasChildComponent: 'childComponent' in loop && loop.childComponent != null,
-    hasMapPreamble: args.mapPreambleWrapped.length > 0,
+    mapPreambleRefusal: preambleAnalysis.lazySafe ? null : preambleAnalysis.reason,
     preambleRegionCount: args.preambleRegionCount,
     hasParamUnwrap: args.paramUnwrap.length > 0,
   }
@@ -198,6 +308,7 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
       ordinal: ordinal++,
       readsItem: c.readsItem,
       readsOuter: c.readsOuter,
+      readsPreamble: c.readsPreamble,
     }
   })
   const texts: LazyRowTextBinding[] = loop.bindings.reactiveTexts.map((text, i) => {
@@ -212,6 +323,7 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
       // a list keeps exactly the classifier's answer.
       readsItem: c.readsItem || !c.readsOuter,
       readsOuter: c.readsOuter,
+      readsPreamble: c.readsPreamble,
     }
   })
 
@@ -222,6 +334,29 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
     }
   }
 
+  // Conditional refs live PAST the door, and are claimed on demand — the row
+  // `createRow` just cloned already rendered the correct arm, so there is
+  // nothing for it to seed or swap (see `LazyRowConditionalBinding.refIndex`).
+  const condRefBase = attrSlotIds.length + (texts.length > 0 ? 1 : 0)
+  const conditionals: LazyRowConditionalBinding[] = condFacts.map((c, i) => {
+    const klass = condClass.get(i)!
+    return {
+      slotId: c.slotId,
+      wrappedCondition: wrap(c.condition),
+      whenTrueHtml: c.whenTrueHtml,
+      whenFalseHtml: c.whenFalseHtml,
+      refIndex: condRefBase + i,
+      ordinal: ordinal++,
+      // A condition reading neither the item nor a reactive outer name still
+      // has to be applied somewhere; `applyItem` is the harmless choice (the
+      // dedup makes a repeat a no-op), matching how a text that classified as
+      // neither is handled above.
+      readsItem: klass.readsItem || !klass.readsOuter,
+      readsOuter: klass.readsOuter,
+      readsPreamble: klass.readsPreamble,
+    }
+  })
+
   return {
     plan: {
       attrSlotIds,
@@ -231,7 +366,14 @@ export function decideLazyRow(args: BuildLazyRowArgs): {
       textNeedsRead: texts.some(t => t.readsOuter),
       lastCount: ordinal,
       outerPrimeGetters,
-      hasOuter: attrs.some(a => a.readsOuter) || texts.some(t => t.readsOuter),
+      preambleStatements: args.mapPreambleWrapped,
+      // Which apply bodies must re-run the preamble — computed from the FINAL
+      // binding lists, not the raw classification, so a text/conditional that
+      // classified as neither item- nor outer-driven (and was therefore forced
+      // into `applyItem` above) is counted in the body it actually lands in.
+      itemNeedsPreamble: [...attrs, ...texts, ...conditionals].some(b => b.readsItem && b.readsPreamble),
+      outerNeedsPreamble: [...attrs, ...texts, ...conditionals].some(b => b.readsOuter && b.readsPreamble),
+      conditionals,
     },
     decision,
   }

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

@@ -144,7 +144,7 @@ export function buildPlainLoopPlan(
   const mapPreambleWrapped = elem.preamble
     ? renderPreamble(elem.preamble, {
         transformJs: wrap,
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true),
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined),
       })
     : ''
   const preambleRegions = buildPreambleRegionPlans(elem.preambleRegions, elem.param, elem.paramBindings)
@@ -269,7 +269,7 @@ function buildStaticLoopMaterialize(
     itemTemplate: elem.staticItemTemplate,
     mapPreamble: elem.preamble
       ? renderPreamble(elem.preamble, {
-          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true),
+          renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined),
         })
       : '',
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,

package/src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts

@@ -82,6 +82,7 @@ export function buildReactiveEffectsPlan(
         attrName: attr.attrName,
         wrappedExpression: wrap(attr.expression),
         meta: pickAttrMeta(attr),
+        ...(attr.readsPreamble && { readsPreamble: true }),
       })),
     })
   }

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

@@ -0,0 +1,151 @@
+/**
+ * Is a row's reactive conditional drivable from the LOOP-level apply bodies? —
+ * `spec/slot-unification.md` §9.5, the "row contains a reactive conditional"
+ * widening.
+ *
+ * ## Why it was refused wholesale
+ *
+ * The eager emission calls `insert(__el, 'sN', () => cond, trueArm, falseArm)`
+ * once per row. `insert` creates **one `createEffect` per call**, plus it probes
+ * both branch templates at runtime to decide element-vs-fragment form, resolves
+ * a search region, and manages per-branch `bindEvents` cleanup. Calling it from
+ * a lazy row would reinstate exactly the per-row reactive resource the lazy row
+ * graph exists to remove — so the gate refused any row with a conditional at
+ * all.
+ *
+ * ## What this accepts, and why that is the whole job
+ *
+ * For the narrow case where **both arms are wiring-free static elements**,
+ * everything `insert` does collapses to one operation: replace the
+ * `[bf-c="sN"]` element with the other arm's markup when the condition flips.
+ * No `bindEvents`, no branch cleanup, no auto-focus, no `__bfSlot` live-node
+ * splicing — those all exist for arms that own something, and these arms own
+ * nothing.
+ *
+ * That case needs no runtime helper. Both arms are compile-time constants, so
+ * each is parsed ONCE per loop into a hoisted `<template>` and cloned per swap,
+ * the same trick the row template already uses. What is left per row is a
+ * boolean, a dedup slot, and a `replaceWith` — which the existing
+ * `applyItem`/`applyOuter` bodies can carry directly.
+ *
+ * ## The four things that must be proven
+ *
+ *  1. **Both arms are wiring-free.** Every `LoopChildBranchSummary` collection
+ *     must be empty. A single reactive text inside an arm means the arm's
+ *     content has to track the item, which needs wiring this shape has no place
+ *     for.
+ *  2. **Both arms are ELEMENT conditionals.** The caller passes each arm through
+ *     `addCondAttrToTemplate` — the same door the eager emission uses — which
+ *     injects `bf-c="<slotId>"` on a single root element and otherwise wraps the
+ *     arm in `<!--bf-cond-start:id-->` markers. So the two forms are told apart
+ *     by reading its output, not by re-deciding here. A FRAGMENT conditional
+ *     spans a sibling range with no single node to replace, which is why
+ *     `insert` carries a second code path for it.
+ *  3. **Both arms' HTML is static.** The arm strings are emitted inside a
+ *     template literal, so an interpolation survives as `${…}`. Anything
+ *     containing one is refused — it would have to be re-evaluated per row,
+ *     defeating the hoist. (A literal `${` in authored TEXT would also refuse
+ *     here; that is the safe direction — a false refusal costs the eager
+ *     fallback, a false accept would ship a frozen arm.)
+ *  4. **The condition does not read the loop INDEX.** `applyItem` and
+ *     `applyOuter` have no index parameter, the same reason
+ *     `ClassifiedLazyBinding.referencesIndex` refuses a binding.
+ *
+ * Everything refused carries a specific reason, which `lazyRowEligibility`
+ * passes through unchanged.
+ */
+
+import type { LoopChildBranchSummary, LoopChildConditional } from '../../types.ts'
+
+/** The prepared arm markup the caller hands in, and this module vets. */
+export interface PreparedArms {
+  /**
+   * Loop-param wrapped and passed through `addCondAttrToTemplate`, i.e. exactly
+   * the strings the eager path would emit. Vetting the PREPARED form is the
+   * point: the raw `IRLoop` arm HTML carries no `bf-c` at all, so an
+   * element-vs-fragment decision made on it would be guesswork.
+   */
+  whenTrueHtml: string
+  whenFalseHtml: string
+}
+
+/** A row conditional the loop-level apply bodies can drive. */
+export interface LazyConditionalFacts {
+  slotId: string
+  /** Condition expression, NOT yet loop-param wrapped (the caller wraps). */
+  condition: string
+  /** Arm markup, static by construction — hoisted and cloned per swap. */
+  whenTrueHtml: string
+  whenFalseHtml: string
+}
+
+export type LazyConditionalAnalysis =
+  | { lazySafe: true; facts: LazyConditionalFacts }
+  | { lazySafe: false; reason: string }
+
+const NO = (reason: string): LazyConditionalAnalysis => ({ lazySafe: false, reason })
+
+/** Names every non-empty collection on a branch summary, for the reason text. */
+function wiringOn(branch: LoopChildBranchSummary): string[] {
+  const found: string[] = []
+  if (branch.childComponents.length > 0) found.push('child components')
+  if (branch.innerLoops && branch.innerLoops.length > 0) found.push('an inner loop')
+  if (branch.conditionals && branch.conditionals.length > 0) found.push('a nested conditional')
+  if (branch.events && branch.events.length > 0) found.push('events')
+  if (branch.reactiveAttrs && branch.reactiveAttrs.length > 0) found.push('reactive attrs')
+  if (branch.reactiveTexts && branch.reactiveTexts.length > 0) found.push('reactive text')
+  return found
+}
+
+/**
+ * Decide whether `cond` can be driven from the loop-level apply bodies.
+ *
+ * `indexParam` is the loop's index parameter name as the emitter uses it
+ * (`elem.index || '__idx'`); a condition reading it is refused.
+ */
+export function analyzeLazyConditional(
+  cond: LoopChildConditional,
+  indexParam: string,
+  arms: PreparedArms,
+): LazyConditionalAnalysis {
+  for (const [label, branch] of [['true', cond.whenTrue], ['false', cond.whenFalse]] as const) {
+    const wiring = wiringOn(branch)
+    if (wiring.length > 0) {
+      return NO(`conditional on slot ${cond.slotId}: its ${label} arm owns ${wiring.join(' + ')}`)
+    }
+  }
+
+  for (const [label, html] of [['true', arms.whenTrueHtml], ['false', arms.whenFalseHtml]] as const) {
+    if (html.includes('bf-cond-start:')) {
+      return NO(`conditional on slot ${cond.slotId}: its ${label} arm is a fragment conditional`)
+    }
+    if (!html.includes(`bf-c="${cond.slotId}"`)) {
+      return NO(`conditional on slot ${cond.slotId}: its ${label} arm has no single bf-c root`)
+    }
+    // The arm is emitted inside a template literal; a surviving `${` means the
+    // markup depends on the item and cannot be hoisted once per loop.
+    if (html.includes('${')) {
+      return NO(`conditional on slot ${cond.slotId}: its ${label} arm interpolates a value`)
+    }
+  }
+
+  // `conditionFreeIdentifiers` is pre-computed by the analyzer (#1267). Absent
+  // means unprovable, which is a refusal rather than an assumption — the same
+  // stance the binding gate takes for a missing identifier set.
+  if (!cond.conditionFreeIdentifiers) {
+    return NO(`conditional on slot ${cond.slotId}: condition has no analyzable identifier set`)
+  }
+  if (cond.conditionFreeIdentifiers.has(indexParam)) {
+    return NO(`conditional on slot ${cond.slotId}: condition reads the loop index parameter '${indexParam}'`)
+  }
+
+  return {
+    lazySafe: true,
+    facts: {
+      slotId: cond.slotId,
+      condition: cond.condition,
+      whenTrueHtml: arms.whenTrueHtml,
+      whenFalseHtml: arms.whenFalseHtml,
+    },
+  }
+}