@barefootjs/jsx 0.31.4 → 0.31.5

package/src/jsx-to-ir.ts

@@ -845,7 +845,7 @@ function makeBindingEnv(ctx: TransformContext): BindingEnvironment {
     // mutated (cached on the immutable `BindingScope`) — a stable
     // snapshot even if `ctx.scope` is later reassigned by an enclosing
     // visitor frame, which swaps the instance rather than mutating it.
-    loopParams: boundNames,
+    loopValueBoundNames: boundNames,
     checker: a.checker,
   }
   ctx._bindingEnv = env
@@ -5021,6 +5021,13 @@ function transformMapCall(
   // the row effect re-runs the preamble ahead of the write.
   if (preamble && !isStaticArray) {
     markPreambleAttrSlots(children, new Set(preamble.declaredNames), ctx)
+    // #2596 follow-up to the two passes above — the CONDITION-position twin.
+    // See `markPreambleConditionalReactivity`'s docstring for why this one is
+    // gated on `reactiveNames` (genuinely signal-derived) rather than the
+    // blanket `declaredNames` the region/attr passes use.
+    if (preamble.reactiveNames && preamble.reactiveNames.length > 0) {
+      markPreambleConditionalReactivity(children, new Set(preamble.reactiveNames), ctx)
+    }
   }
 
   // Collect nested components for both static and dynamic arrays.
@@ -5457,6 +5464,67 @@ function markPreambleAttrSlots(
   visit(nodes)
 }
 
+/**
+ * Grant the IR `reactive` flag (and a slot id) to a loop-body CONDITIONAL
+ * whose condition bare-references a preamble local that is itself reactive
+ * (#2596) — `reactiveNames`, computed by `computePreambleReactiveNames`.
+ *
+ * Root cause this closes: a plain (non-preamble) condition's `reactive` flag
+ * comes from `isReactiveExpression`/`isReactiveOrigin` run against the
+ * condition's OWN text at `transformConditional`/`transformLogicalAnd`/the
+ * if-else-chain builder — none of which know about an enclosing loop's
+ * `.map()` callback preamble (that's assembled and only becomes available
+ * on `IRLoop` after `children` is already built, same ordering constraint
+ * `collectPreambleRegions`/`markPreambleAttrSlots` work around). A condition
+ * that's just a bare reference to a preamble local (`label ? <A/> : <B/>`)
+ * therefore falls through every one of those classifiers with `reactive:
+ * false` even when `label`'s initializer reads a signal — the classifiers
+ * only ever see the token `label`, never its declaration.
+ *
+ * Deliberately narrower than `collectPreambleRegions`/`markPreambleAttrSlots`:
+ * those two mark ANY reference to `declaredNames` because their region-patch
+ * effect re-runs the WHOLE preamble unconditionally on row update, so a
+ * merely item-derived local (`const label = item.title`) still ends up
+ * correctly tracked by ordinary signal auto-tracking inside that effect —
+ * marking it reactive there costs nothing extra. A conditional is different:
+ * `reactive: true` here means Phase 2 wraps it in an `insert()` that swaps
+ * whole DOM subtrees, which is real cost and, for an item-only local, pure
+ * waste — the row already renders fresh whenever it's (re)constructed. So
+ * this only fires for `reactiveNames`, the subset PROVEN to depend on an
+ * actual external signal/memo/prop.
+ *
+ * Mirrors the sibling passes' traversal shape (conditional arms included).
+ */
+function markPreambleConditionalReactivity(
+  nodes: IRNode[],
+  reactiveNames: ReadonlySet<string>,
+  ctx: TransformContext,
+): void {
+  if (reactiveNames.size === 0) return
+  const visit = (list: IRNode[]): void => {
+    for (const node of list) {
+      switch (node.type) {
+        case 'element':
+        case 'fragment':
+          visit(node.children)
+          break
+        case 'conditional': {
+          if (!node.reactive) {
+            const refs = extractFreeIdentifiersFromText(node.condition)
+            if ([...refs].some((r) => reactiveNames.has(r))) {
+              node.reactive = true
+              if (!node.slotId) node.slotId = generateSlotId(ctx)
+            }
+          }
+          visit([node.whenTrue, ...(node.whenFalse ? [node.whenFalse] : [])])
+          break
+        }
+      }
+    }
+  }
+  visit(nodes)
+}
+
 /**
  * Expression-bearing source text of an attribute value, for the
  * free-identifier scan. Only used as a FALLBACK — an attribute normally
@@ -5503,6 +5571,52 @@ function collectPreambleDeclaredNames(stmt: ts.Statement, out: Set<string>): voi
   }
 }
 
+/**
+ * Which {@link MapCallbackPreamble.declaredNames} are themselves reactive —
+ * their OWN initializer reads a signal / memo / reactive prop, directly or
+ * transitively through an earlier declaration in the same preamble (#2596).
+ *
+ * Reuses the same Phase-1 classifier (`isReactiveExpression`) already applied
+ * to every non-preamble condition/attribute — this doesn't invent a second
+ * reactivity heuristic, it runs the existing one over one more declaration
+ * list. `ctx.patterns.constants` (the component-level constant chain
+ * `isSignalOrMemoReference`/`isPropsReference` already walk) doesn't reach
+ * these names — they're scoped to the `.map()` callback body, never added to
+ * `ctx.patterns` — so without this pass a preamble local reading a signal is
+ * invisible to the classifier.
+ *
+ * Value-declaration statements only (`const`/`let x = expr`, including
+ * destructuring targets, which mark every bound name reactive together since
+ * they share one initializer). A non-declaration preamble statement
+ * (assignment, loop, side-effecting call) contributes no reactive names —
+ * consistent with `neutralPreambleDeclarations`'s all-or-nothing DSL gate
+ * treating anything past that as un-lowerable, though this walk (client/JS-
+ * runtime SSR only) doesn't require the same all-or-nothing: it simply skips
+ * what it can't classify.
+ */
+function computePreambleReactiveNames(
+  statements: readonly ts.Statement[],
+  ctx: TransformContext,
+): Set<string> {
+  const reactiveNames = new Set<string>()
+  for (const stmt of statements) {
+    if (!ts.isVariableStatement(stmt)) continue
+    for (const decl of stmt.declarationList.declarations) {
+      if (!decl.initializer) continue
+      const boundNames = new Set<string>()
+      collectBindingNames(decl.name, boundNames)
+      const initText = ctx.getJS(decl.initializer)
+      const initFreeRefs = extractFreeIdentifiersFromNode(decl.initializer)
+      const readsEarlierReactive = [...initFreeRefs].some((r) => reactiveNames.has(r))
+      const isReactive = readsEarlierReactive || isReactiveExpression(initText, ctx, decl.initializer)
+      if (isReactive) {
+        for (const n of boundNames) reactiveNames.add(n)
+      }
+    }
+  }
+  return reactiveNames
+}
+
 /**
  * Build a {@link MapCallbackPreamble} from value-only (JSX-free) pre-return
  * statements — the Stage-2 fold preamble and the plain block-body preamble.
@@ -5526,6 +5640,7 @@ function preambleFromValueStatements(
     typedParts.push(raw0.endsWith(';') ? raw0 : raw0 + ';')
     segments.push(tjs !== js ? { kind: 'js', text: js, templateText: tjs } : { kind: 'js', text: js })
   }
+  const reactiveNames = computePreambleReactiveNames(statements, ctx)
   return {
     segments: trimPreambleSegments(segments),
     ssrText: tsxSourceText(typedParts.join(' ')),
@@ -5533,6 +5648,7 @@ function preambleFromValueStatements(
     // Value-only preambles accumulate no JSX, so no child needs the array join.
     builderNames: [],
     declarations: neutralPreambleDeclarations(statements, ctx) ?? undefined,
+    reactiveNames: reactiveNames.size > 0 ? [...reactiveNames] : undefined,
   }
 }
 

package/src/module-exports.ts

@@ -5,6 +5,7 @@
  * This is a compiler-layer concern, not adapter-specific.
  */
 
+import ts from 'typescript'
 import type { ComponentIR, ParamInfo } from './types.ts'
 import { identifierPattern } from './identifier-pattern.ts'
 
@@ -161,6 +162,142 @@ export function findReachableNames(
   return reachable
 }
 
+/**
+ * Which of `candidates` does `bodyText` ASSIGN to?
+ *
+ * Reachability above answers "is this declaration referenced?", which is
+ * the right question for pruning SSR-irrelevant code. It is the wrong
+ * question for a MUTABLE binding: a surviving `let` whose only writer got
+ * pruned is left declared-and-read but never assigned, and TypeScript's
+ * control-flow analysis then narrows it to `never` at every guarded use
+ * (#2598). `closeOverWritersOfMutableBindings` uses this to restore the
+ * missing half of that pair.
+ *
+ * Recognizes the forms that actually write a local binding:
+ *   `x = …`, `x += …` (and every other compound operator), `x++`, `--x`
+ * Destructuring assignment (`[x] = …`, `({ x } = …)`) is deliberately NOT
+ * recognized: it never appears in the ref/handler shapes this exists for,
+ * and a wrong guess here over-retains rather than fails loudly, so leaving
+ * it out keeps the retained set honest. If one shows up, it will present
+ * as this same `never` narrowing and can be added with a fixture.
+ *
+ * Parsed with the TS AST, not matched as text: `identifierPattern` (used
+ * for reference detection above) cannot tell a write from a read, and a
+ * regex for `name\s*=` would match `name == x`, a `name=` inside a string
+ * or JSX attribute, and a property write `obj.name = x` that assigns
+ * nothing of the sort.
+ */
+export function findAssignedNames(
+  bodyText: string,
+  candidates: ReadonlySet<string>,
+): Set<string> {
+  const assigned = new Set<string>()
+  if (candidates.size === 0) return assigned
+
+  const sf = ts.createSourceFile(
+    'bf-assignment-scan.tsx',
+    bodyText,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ false,
+    ts.ScriptKind.TSX,
+  )
+
+  // A bare Identifier on the left of an assignment — `obj.x = …` is a
+  // PropertyAccessExpression and writes through the binding rather than to
+  // it, so it does not count.
+  const record = (target: ts.Node): void => {
+    if (ts.isIdentifier(target) && candidates.has(target.text)) {
+      assigned.add(target.text)
+    }
+  }
+
+  const visit = (node: ts.Node): void => {
+    if (ts.isBinaryExpression(node) && isAssignmentOperator(node.operatorToken.kind)) {
+      record(node.left)
+    } else if (
+      (ts.isPrefixUnaryExpression(node) || ts.isPostfixUnaryExpression(node)) &&
+      (node.operator === ts.SyntaxKind.PlusPlusToken || node.operator === ts.SyntaxKind.MinusMinusToken)
+    ) {
+      record(node.operand)
+    }
+    ts.forEachChild(node, visit)
+  }
+
+  ts.forEachChild(sf, visit)
+  return assigned
+}
+
+/**
+ * `findReachableNames`, plus the invariant it cannot express on its own:
+ * **a mutable binding that survives keeps the declarations that write it.**
+ *
+ * Reachability is seeded from the RENDERED JSX, which has already had the
+ * client-only attributes stripped — `ref={setRef}` leaves no `setRef`
+ * behind, and `onClick={handleClick}` is rendered as `onClick={() => {}}`.
+ * That is deliberate: code reachable only from a handler is client-only
+ * and should not be emitted into an SSR template.
+ *
+ * It goes wrong when a `let` outlives its writer. The binding survives
+ * because some OTHER surviving declaration reads it, while its only
+ * assignment lived in a pruned handler — so the emitted template declares
+ * it, reads it, and never assigns it. TypeScript's control-flow analysis
+ * concludes it is permanently `null`, narrows every guarded use to `never`,
+ * and each member access on it fails:
+ *
+ *     let highlightEl: HTMLElement | null = null      // writer was pruned
+ *     const syncScroll = () => {
+ *       if (highlightEl && textareaEl) {
+ *         highlightEl.scrollTop = textareaEl.scrollTop   // TS2339 on `never`
+ *       }
+ *     }
+ *
+ * Pulling the writers back in restores the source's shape for exactly the
+ * bindings that survived — nothing else. The retained writer is dead code
+ * at SSR (it only ever runs from a hydrated event), which is the same
+ * harmless-unused-declaration trade `generateModuleScopeDeclarations`
+ * already makes deliberately.
+ *
+ * Iterates to a fixpoint because a newly retained writer can read further
+ * declarations, and can itself write another mutable binding. Bounded by
+ * the declaration count: each round either adds a name or stops.
+ */
+export function closeOverWritersOfMutableBindings(
+  primaryRefs: string,
+  declarations: { name: string; body: string }[],
+  mutableNames: ReadonlySet<string>,
+): Set<string> {
+  let reachable = findReachableNames(primaryRefs, declarations)
+  if (mutableNames.size === 0) return reachable
+
+  let seedText = primaryRefs
+  for (let round = 0; round <= declarations.length; round++) {
+    const survivingMutables = new Set(
+      [...reachable].filter(name => mutableNames.has(name)),
+    )
+    if (survivingMutables.size === 0) return reachable
+
+    const added = declarations
+      .filter(d => !reachable.has(d.name))
+      .filter(d => findAssignedNames(d.body, survivingMutables).size > 0)
+      .map(d => d.name)
+    if (added.length === 0) return reachable
+
+    // Re-seed by NAME rather than merging sets directly, so each retained
+    // writer's own transitive dependencies come along through the same
+    // traversal instead of a second, divergent one.
+    seedText += '\n' + added.join('\n')
+    reachable = findReachableNames(seedText, declarations)
+  }
+  return reachable
+}
+
+function isAssignmentOperator(kind: ts.SyntaxKind): boolean {
+  return (
+    kind >= ts.SyntaxKind.FirstAssignment &&
+    kind <= ts.SyntaxKind.LastAssignment
+  )
+}
+
 /**
  * Extract parameter names from a function expression string.
  * Handles: arrow functions, single-param arrows, function expressions.

package/src/scope/binding-scope.ts

@@ -201,7 +201,7 @@ export class BindingScope {
    *     qualifies, including a preamble local shadowing a module const.
    *     These call `isBound` / `boundNames()`.
    *   - REACTIVITY / SLOT-ID CLASSIFIERS (`referencesLoopParam`,
-   *     `hasReactiveAttributes`, and the `BindingEnvironment.loopParams`
+   *     `hasReactiveAttributes`, and the `BindingEnvironment.loopValueBoundNames`
    *     feed built from `makeBindingEnv`, all in `jsx-to-ir.ts`) ask
    *     "does this expression read a value that changes per row and so
    *     needs its own patchable slot" — a preamble local already gets

package/src/types.ts

@@ -901,6 +901,28 @@ export interface MapCallbackPreamble {
    * keeps the plain interpolation it always had.
    */
   builderNames: string[]
+  /**
+   * The subset of {@link declaredNames} whose OWN initializer is itself
+   * reactive — reads a signal / memo / reactive prop, directly or
+   * transitively through an earlier preamble declaration (#2596). `undefined`
+   * (never an empty array) when the preamble contributes no such name, or
+   * when it isn't a value-only declaration sequence this analysis covers
+   * (see `preambleFromValueStatements`'s caller — a JSX-building preamble
+   * doesn't compute this and leaves it unset).
+   *
+   * Used to decide whether a loop-body CONDITIONAL whose condition
+   * bare-references a preamble local should carry the IR `reactive` flag
+   * (`markPreambleConditionalReactivity`, jsx-to-ir.ts). Deliberately NOT the
+   * same test `collectPreambleRegions`/`markPreambleAttrSlots` use for
+   * text/attr positions — those mark ANY reference to `declaredNames`
+   * reactive because their region-patch effect re-runs the whole preamble
+   * unconditionally on row update, and ordinary signal auto-tracking inside
+   * that effect picks up genuine dependencies regardless of the IR flag. A
+   * conditional instead swaps whole DOM subtrees via `insert()`, so it stays
+   * unwrapped unless the local it reads is proven to depend on an actual
+   * external signal — a bare `item.title`-derived local needs no such wrap.
+   */
+  reactiveNames?: string[]
 }
 
 /**
@@ -1940,6 +1962,25 @@ export interface IRMetadata {
   isClientComponent: boolean
   typeDefinitions: TypeDefinition[]
   propsType: TypeInfo | null
+  /**
+   * The component function's own generic type parameter list, verbatim
+   * from source (each `node.getText()`, joined and wrapped in `<...>`),
+   * e.g. `<NodeType extends NodeBase = NodeBase, EdgeType extends
+   * EdgeBase = EdgeBase>`. `null` when the component isn't generic.
+   *
+   * A generic function component's props type (and often its body) keeps
+   * referencing these names verbatim in emitted output (e.g. `props:
+   * FlowComponentProps<NodeType, EdgeType>`, `createFlowStore<NodeType,
+   * EdgeType>(props)`) — without the function's own declaration also
+   * carrying the type parameters, those references are unresolved names
+   * in the emitted `.tsx` (TS2304). Emitters that print a `function
+   * <name>(...)` signature for the component must splice this verbatim
+   * between the name and the parameter list. Optional (rather than
+   * required) so the many hand-built `IRMetadata` test fixtures across
+   * the suite don't need updating for a field that is `null` for the
+   * overwhelming majority of (non-generic) components.
+   */
+  typeParameters?: string | null
   propsParams: ParamInfo[]
   /** Name of the props object parameter (e.g., 'props' in `function Component(props: Props)`) */
   propsObjectName: string | null