@barefootjs/jsx 0.35.0 → 0.35.2

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

@@ -400,7 +400,19 @@ export interface LoopChildRef {
 export interface BranchLoop extends LoopCore {
   kind: 'branch'
   index: string | null // Index parameter (e.g., 'i')
-  template: string     // HTML template for each item
+  template: string     // HTML template for each item, item-only wrapped (no index — see `templateIndexed`)
+  /**
+   * Same render as `template`, but with `index` also wrapped as an accessor
+   * (`i()`) — rendered structurally at IR time (`irToHtmlTemplate`'s
+   * `loopParams`), never via a post-hoc regex pass over `template` (#2868:
+   * a word-boundary regex over assembled HTML can match a bare tag name
+   * colliding with the index identifier, e.g. `<i>` -> `<i()>`). Present
+   * iff the loop declares an index; `build-plain-row.ts` picks this over
+   * `template` once lazy eligibility rules out the lazy row plan (which
+   * needs the index UNWRAPPED — `mapArrayLazy`'s `createRow` hands it a
+   * plain number, never an accessor).
+   */
+  templateIndexed?: string
   containerSlotId: string // bf slot ID of the container element (e.g., 's1' for <ul bf="s1">)
   preamble?: MapCallbackPreamble
   // Composite loop fields (loops whose body contains child components)
@@ -489,8 +501,6 @@ export interface NestedLoop extends LoopCore {
    * (and any subsequent reads) are in scope (#1052).
    */
   preamble?: MapCallbackPreamble
-  /** Whether the inner array references the outer loop param (needs reactive mapArray) */
-  refsOuterParam?: boolean
   /** Child components inside inner loop items (for initChild/createComponent) */
   childComponents?: import('../types.ts').IRLoopChildComponent[]
   /** True when this loop is inside a conditional branch (handled by insert() bindEvents instead) */
@@ -622,6 +632,12 @@ export interface TopLevelLoop extends LoopCore {
   slotId: string
   index: string | null
   template: string
+  /**
+   * Same render as `template`, but with `index` also wrapped as an accessor
+   * (`i()`) — see `BranchLoop.templateIndexed` for why this exists as a
+   * second structured render rather than a post-hoc regex pass (#2868).
+   */
+  templateIndexed?: string
   /**
    * Per-iteration HTML template for static-array loops that need to
    * self-heal on CSR mount (#1247). Unlike `template`, this variant skips

package/src/jsx-to-ir.ts

@@ -45,7 +45,7 @@ import type { IRLoopSort, FunctionInfo, ConstantInfo } from './types.ts'
 import { formatParamWithType } from './module-exports.ts'
 import { createError, ErrorCodes, internalInvariant } from './errors.ts'
 import { CLIENT_BUILTIN_SOURCE, isClientBuiltinName, type ClientBuiltinTag } from './builtins.ts'
-import { containsReactiveExpression } from './reactivity-checker.ts'
+import { containsReactiveExpression, collectReactiveBrandLeaves } from './reactivity-checker.ts'
 import {
   rewriteBarePropRefs as rewriteBarePropRefsCore,
   collectAstPropRefs,
@@ -2429,7 +2429,13 @@ function transformExpressionInner(
     // A reactive brand-package condition (e.g. `form.field('x').error() &&
     // …`) can't be SSR-evaluated, so defer the whole conditional rather
     // than raising BF061 — same routing as a manual `/* @client */` (#1638).
-    if ((isClientOnly || shouldAutoDeferReactiveBrand(expr, ctx)) && ir.type === 'conditional') {
+    // Check `ir.type` first: `shouldAutoDeferReactiveBrand` only matters for
+    // IRConditional, but walks the checker over `expr` — for every other
+    // shape (in particular IRLoop, whose `expr` is a `.map()` callback body
+    // full of JSX) that walk is both wasted work and, historically, exactly
+    // what tripped the getJS trust-boundary assertion on a JSX-bearing node
+    // (#2867/#2830).
+    if (ir.type === 'conditional' && (isClientOnly || shouldAutoDeferReactiveBrand(expr, ctx))) {
       ir.clientOnly = true
       if (!ir.slotId) {
         ir.slotId = generateSlotId(ctx)
@@ -8210,10 +8216,21 @@ function isReactiveExpression(expr: string, ctx: TransformContext, astNode?: ts.
 function shouldAutoDeferReactiveBrand(expr: ts.Expression, ctx: TransformContext): boolean {
   const checker = ctx.analyzer.checker
   if (!checker) return false
-  if (!containsReactiveExpression(expr, checker)) return false
+  // Read only the brand-carrying leaf(s), never `expr` itself: `expr` can be
+  // a `.map()` callback or a ternary/`&&` with JSX arms, and getJS() refuses
+  // to stringify a JSX-bearing node (the write-side trust boundary — JSX
+  // must travel as structured segments, never raw text). Each leaf is an
+  // identifier / property access / call callee, none of which can contain
+  // JSX, so getJS() is safe on them regardless of what the rest of `expr`
+  // contains (#2867/#2830 — this used to call getJS(expr) directly and
+  // throw whenever the checker was active and expr had JSX in it).
+  const leaves = collectReactiveBrandLeaves(expr, checker)
+  if (leaves.length === 0) return false
   // Native signals/memos (incl. chained-const aliases) are SSR-derivable —
   // leave them to the normal template path so their initial value renders.
-  if (isSignalOrMemoReference(ctx.getJS(expr), ctx)) return false
+  // Preserves the original "any native ref anywhere defers to non-deferred"
+  // semantics by checking every reactive-brand leaf, not just the first.
+  if (leaves.some((leaf) => isSignalOrMemoReference(ctx.getJS(leaf), ctx))) return false
   return true
 }
 

package/src/reactivity-checker.ts

@@ -191,3 +191,63 @@ export function containsReactiveExpression(node: ts.Node, checker: ts.TypeChecke
   incrementCounter('reactivityChecks')
   return brandTypeReactivityAnalyzer.analyze(node, checker).isReactive
 }
+
+/** Subtree JSX check — also used by analyzer-context.ts's getJS() guard. */
+export function nodeContainsJsx(node: ts.Node): boolean {
+  if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)) return true
+  return ts.forEachChild(node, nodeContainsJsx) ?? false
+}
+
+/**
+ * Every node that itself carries the `Reactive<T>` brand within `node`,
+ * without stopping at the first match (unlike `analyze`, which only needs
+ * one hit to answer "is this reactive"). A caller that needs to read the
+ * *text* of the reactive part(s) — e.g. to tell a brand-package wrapper
+ * apart from a plain native signal/memo call (#2867) — must not stringify
+ * `node` itself: for a `.map()` callback or a ternary with JSX arms, `node`
+ * is JSX-bearing, and the write-side trust boundary (`getJS()`,
+ * `analyzer-context.ts`) rejects producing text for a JSX-bearing node.
+ * Each returned node is JSX-free: property access and identifier leaves
+ * cannot contain JSX by construction; a call leaf is the whole call
+ * (preserving the `name(...)` shape native-signal/memo regex patterns
+ * match against) unless its arguments happen to contain JSX, in which case
+ * only the callee is returned instead.
+ */
+export function collectReactiveBrandLeaves(node: ts.Node, checker: ts.TypeChecker): ts.Node[] {
+  const leaves: ts.Node[] = []
+  const visit = (n: ts.Node): void => {
+    if (ts.isPropertyAccessExpression(n)) {
+      try {
+        if (isReactiveType(queryType(checker, n))) {
+          leaves.push(n)
+          return
+        }
+      } catch {
+        // fall through to walking the object part
+      }
+      visit(n.expression)
+      return
+    }
+    if (ts.isIdentifier(n)) {
+      try {
+        if (isReactiveType(queryType(checker, n))) leaves.push(n)
+      } catch {
+        // not reactive
+      }
+      return
+    }
+    if (ts.isCallExpression(n)) {
+      try {
+        if (isReactiveType(queryType(checker, n.expression))) {
+          leaves.push(nodeContainsJsx(n) ? n.expression : n)
+          return
+        }
+      } catch {
+        // fall through to walking children
+      }
+    }
+    ts.forEachChild(n, visit)
+  }
+  visit(node)
+  return leaves
+}