@barefootjs/jsx 0.5.0 → 0.5.1

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

@@ -120,8 +120,19 @@ export function stringifyPlainLoop(
     reactiveEffects,
     childRefs,
     bodyIsMultiRoot,
+    anchored,
+    anchorKeyExpr,
   } = plan
 
+  // 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
+  // conditional's markers; `insert(__anchor, …)` then owns the content.
+  if (anchored) {
+    stringifyAnchoredLoop(lines, plan, topIndent, anchorKeyExpr)
+    return
+  }
+
   // `childRefs` need `__el` as a handle to invoke the user's callback inside
   // the factory, so non-empty refs force the multi-line layout the same way
   // reactive effects do (#1244).
@@ -155,6 +166,55 @@ export function stringifyPlainLoop(
   lines.push(`${topIndent}}, '${markerId}')`)
 }
 
+/**
+ * Emit a whole-item conditional loop via `mapArrayAnchored` (#1665).
+ *
+ * The renderItem identifies each item by an always-present
+ * `<!--bf-loop-i:KEY-->` anchor instead of a root element (which the item may
+ * not have). On CSR it returns a `DocumentFragment` of
+ * `[anchor, bf-cond-start, bf-cond-end]` so `insert()`'s first run has the
+ * markers to populate; on hydration (`__existing` is the SSR anchor Comment)
+ * it returns that anchor and `insert()` adopts the SSR-rendered content. The
+ * conditional itself is emitted by the shared reactive-effects stringifier
+ * with `elVar: '__anchor'`, so `insert(__anchor, …)` range-scopes the
+ * toggle to this item.
+ */
+function stringifyAnchoredLoop(
+  lines: string[],
+  plan: PlainLoopPlan,
+  topIndent: string,
+  anchorKeyExpr: string,
+): void {
+  const {
+    containerVar, markerId, arrayExpr, keyFn,
+    paramHead, paramUnwrap, indexParam, mapPreambleWrapped, reactiveEffects,
+  } = plan
+
+  // The single whole-item conditional supplies the slot id used to seed the
+  // CSR markers so `insert()`'s first run can find and populate them.
+  const condSlot = reactiveEffects?.conditionals[0]?.slotId ?? null
+
+  lines.push(`${topIndent}mapArrayAnchored(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => {`)
+  const bodyIndent = topIndent + '  '
+  if (paramUnwrap) lines.push(`${bodyIndent}${paramUnwrap}`)
+  if (mapPreambleWrapped) lines.push(`${bodyIndent}${mapPreambleWrapped}`)
+  lines.push(`${bodyIndent}const __anchor = __existing ?? document.createComment(\`bf-loop-i:\${${anchorKeyExpr}}\`)`)
+  lines.push(`${bodyIndent}let __frag = null`)
+  lines.push(`${bodyIndent}if (!__existing) {`)
+  lines.push(`${bodyIndent}  __frag = document.createDocumentFragment()`)
+  lines.push(`${bodyIndent}  __frag.appendChild(__anchor)`)
+  if (condSlot) {
+    lines.push(`${bodyIndent}  __frag.appendChild(document.createComment('bf-cond-start:${condSlot}'))`)
+    lines.push(`${bodyIndent}  __frag.appendChild(document.createComment('bf-cond-end:${condSlot}'))`)
+  }
+  lines.push(`${bodyIndent}}`)
+  if (reactiveEffects !== null) {
+    stringifyReactiveEffects(lines, reactiveEffects, { indent: bodyIndent, elVar: '__anchor', bodyIsMultiRoot: false })
+  }
+  lines.push(`${bodyIndent}return __frag ?? __anchor`)
+  lines.push(`${topIndent}}, '${markerId}')`)
+}
+
 export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void {
   const { containerVar, arrayExpr, param, indexParam, childIndexExpr, attrsBySlot, texts, childRefs, csrMaterialize } = plan
   const hasAttrs = attrsBySlot.length > 0

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

@@ -92,18 +92,27 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
     const normalElems = elems.filter(e => !e.insideConditional)
 
     if (normalElems.length > 0 || conditionalElems.length > 0) {
+      // Persistent slot trackers for non-conditional elements. `__bfText`
+      // returns the node now occupying the slot; a JSX-valued expression
+      // (`{themeLogo(id)}`) replaces the text node with a live element, so
+      // the next reactive run must operate on that element, not the stale
+      // text node (#1663). Primitive values keep the same text node.
+      for (const elem of normalElems) {
+        const v = varSlotId(elem.slotId)
+        lines.push(`  let __anchor_${v} = _${v}`)
+      }
       lines.push(`  createEffect(() => {`)
       if (normalElems.length > 0) {
         // Expression is always evaluated for non-conditional elements
         lines.push(`    const __val = ${expr}`)
         for (const elem of normalElems) {
           const v = varSlotId(elem.slotId)
-          lines.push(`    if (_${v} && !__val?.__isSlot) _${v}.nodeValue = String(__val ?? '')`)
+          lines.push(`    __anchor_${v} = __bfText(__anchor_${v}, __val)`)
         }
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId)
           lines.push(`    const [__el_${v}] = $t(__scope, '${elem.slotId}')`)
-          lines.push(`    if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`)
+          lines.push(`    __bfText(__el_${v}, __val)`)
         }
       } else {
         // Only conditional elements — evaluate expression unconditionally
@@ -118,7 +127,7 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId)
           lines.push(`    const [__el_${v}] = $t(__scope, '${elem.slotId}')`)
-          lines.push(`    if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`)
+          lines.push(`    __bfText(__el_${v}, __val)`)
         }
       }
       lines.push(`  })`)

package/src/ir-to-client-js/html-template.ts

@@ -4,7 +4,7 @@
 
 import type { AttrValue, IRAttribute, IRNode } from '../types'
 import { isBooleanAttr } from '../html-constants'
-import { toHtmlAttrName, attrValueToString, quotePropName, PROPS_PARAM, DATA_BF_PH, keyAttrName, loopStartMarker, loopEndMarker, freeIdsFromRefs, setIntersects, wrapExprWithLoopParams } from './utils'
+import { toHtmlAttrName, attrValueToString, quotePropName, PROPS_PARAM, DATA_BF_PH, keyAttrName, loopStartMarker, loopEndMarker, loopItemMarker, freeIdsFromRefs, setIntersects, wrapExprWithLoopParams } from './utils'
 import type { LoopParamSpec } from './utils'
 import { nameForRegistryRef } from './component-scope'
 import { assertNever } from './walker'
@@ -411,6 +411,17 @@ function buildSpreadAttrsMergeCall(args: {
  *    `generateCsrTemplate` (case `'component'`). Set to `true` when generating
  *    the per-iteration `staticItemTemplate` for static loops.
  */
+/**
+ * Build the per-item `<!--bf-loop-i:KEY-->` anchor comment for a whole-item
+ * conditional loop (#1665), where `keyExpr` is the loop's per-item key
+ * expression (e.g. `t.id`). Emits a live `${keyExpr}` interpolation so each
+ * rendered item carries its own key — `loopItemMarker` is reserved for
+ * already-evaluated key strings (runtime / static contexts).
+ */
+function itemAnchorTemplate(keyExpr: string): string {
+  return `<!--${loopItemMarker('${' + keyExpr + '}')}-->`
+}
+
 export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>, branchSlotsVar?: string, insideLoop = false, inHoistedChildren = false): string {
   const recurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, inHoistedChildren)
   const wrapExpr = (expr: string) => wrapExprWithLoopParams(expr, loopParams)
@@ -558,7 +569,16 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
       // Case 1 — childComponent body materialize); propagating it through
       // every nested loop regressed form-builder's inner-loop Select wiring.
       const innerRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop)
-      const childTemplate = node.children.map(innerRecurse).join('')
+      let childTemplate = node.children.map(innerRecurse).join('')
+      // Whole-item conditional loops (#1665): prepend an always-present
+      // `<!--bf-loop-i:KEY-->` anchor before each item's (possibly empty)
+      // conditional content. `mapArrayAnchored` tracks items by this anchor,
+      // so an item that renders no element still keeps its identity and slot.
+      // The key is a per-item expression, so the marker carries a live
+      // `${KEY}` interpolation (not the literal key text).
+      if (node.bodyIsItemConditional && node.key) {
+        childTemplate = `${itemAnchorTemplate(node.key)}${childTemplate}`
+      }
       const indexParam = node.index ? `, ${node.index}` : ''
       // Apply chained sort / filter for the SSR-mirror template (#1448
       // Tier B). Pre-Tier-B this just used `node.array` directly,
@@ -1499,7 +1519,13 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
     }
 
     case 'loop': {
-      const childTemplate = node.children.map(recurseInLoop).join('')
+      let childTemplate = node.children.map(recurseInLoop).join('')
+      // Whole-item conditional loops (#1665): prepend the per-item
+      // `<!--bf-loop-i:KEY-->` anchor so `mapArrayAnchored` can track items
+      // that render no element. Mirrors the `irToHtmlTemplate` loop case.
+      if (node.bodyIsItemConditional && node.key) {
+        childTemplate = `${itemAnchorTemplate(node.key)}${childTemplate}`
+      }
       const indexParam = node.index ? `, ${node.index}` : ''
       // An init-scope-only array would `undefined.map(...)` ⇒ TypeError.
       // Substitute an empty array; init's reconcile pass populates the loop

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

@@ -7,12 +7,12 @@ import type { ComponentIR, IRNode } from '../types'
 // All exports from @barefootjs/client/runtime that may be used in generated code
 export const RUNTIME_IMPORT_CANDIDATES = [
   'createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount',
-  'hydrate', 'insert', 'reconcileElements', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'createDisposableEffect',
+  'hydrate', 'insert', 'reconcileElements', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'createDisposableEffect',
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'updateClientMarker',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
   'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss',
-  'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot',
+  'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
 ] as const
 
 /** @deprecated Use RUNTIME_IMPORT_CANDIDATES */

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

@@ -574,7 +574,23 @@ export function collectLoopChildReactiveAttrs(
         // SSR template strips the attribute (html-template) and no
         // hydrate-time binding is emitted, leaving the per-item
         // attribute permanently unset.
-        if (!attr.clientOnly && classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') continue
+        //
+        // `classifyReactivity` only proves reactivity for the loop item
+        // accessor or a *directly* read signal/memo/prop. It does NOT see
+        // through an opaque helper that reads an outer signal by index
+        // (e.g. `widthAt(i)` where `const widthAt = (i) => items()[i].w`).
+        // The top-level attribute path (`decideWrapForAttr`) wraps those
+        // anyway via the Solid-style AST-flag fallback (#940); without the
+        // same fallback here, the identical binding on a per-item element
+        // freezes at its SSR value (#1673). Apply the same `callsReactiveGetters`
+        // / `hasFunctionCalls` fallback so the loop-child path matches the
+        // top-level one — a harmless over-wrap at worst (an effect that
+        // subscribes to nothing runs once).
+        const reactive =
+          classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== 'none'
+          || attr.callsReactiveGetters
+          || attr.hasFunctionCalls
+        if (!attr.clientOnly && !reactive) continue
         attrs.push({
           childSlotId: el.slotId,
           attrName: attr.name,

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

@@ -200,6 +200,13 @@ export interface LoopCore {
    * key tracks all of its DOM nodes (#1212).
    */
   bodyIsMultiRoot?: boolean
+  /**
+   * True when the loop body is a single whole-item conditional whose at
+   * least one branch renders no element (#1665). Routes the loop through
+   * the anchored emission path (`mapArrayAnchored` + per-item
+   * `<!--bf-loop-i:KEY-->` anchors) so 0-or-1-element items reconcile.
+   */
+  bodyIsItemConditional?: boolean
   /**
    * Pre-computed free identifiers referenced by the `array` expression
    * (#1267). Populated during IR build from the originating AST node so

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

@@ -21,10 +21,11 @@ import {
   BF_LOOP_END,
   loopStartMarker,
   loopEndMarker,
+  loopItemMarker,
   toHTMLAttrName as toHtmlAttrName,
 } from '@barefootjs/shared'
 
-export { DATA_KEY, DATA_KEY_PREFIX, DATA_BF_PH, BF_LOOP_START, BF_LOOP_END, loopStartMarker, loopEndMarker, toHtmlAttrName }
+export { DATA_KEY, DATA_KEY_PREFIX, DATA_BF_PH, BF_LOOP_START, BF_LOOP_END, loopStartMarker, loopEndMarker, loopItemMarker, toHtmlAttrName }
 
 /**
  * Parameter name for the props object in generated init/template functions.

package/src/jsx-to-ir.ts

@@ -1703,6 +1703,33 @@ function containsJsxInExpression(node: ts.Node): boolean {
   return ts.forEachChild(node, containsJsxInExpression) ?? false
 }
 
+/**
+ * Check if an expression calls a module/local JSX-returning helper (one
+ * tracked in `jsxFunctions` / `jsxMultiReturnFunctions` for IR-level
+ * inlining). Used alongside `containsJsxInExpression` so a map callback
+ * body like `cond && themeLogo(t.id)` is recognised as renderable JSX
+ * control flow even though it has no inline JSX literal (#1665).
+ */
+function callsJsxHelper(node: ts.Node, ctx: TransformContext): boolean {
+  let found = false
+  const visit = (n: ts.Node): void => {
+    if (found) return
+    if (ts.isCallExpression(n) && ts.isIdentifier(n.expression)) {
+      const name = n.expression.text
+      if (
+        ctx.analyzer.jsxFunctions.has(name) ||
+        ctx.analyzer.jsxMultiReturnFunctions.has(name)
+      ) {
+        found = true
+        return
+      }
+    }
+    ts.forEachChild(n, visit)
+  }
+  visit(node)
+  return found
+}
+
 function containsAwaitExpression(node: ts.Node): boolean {
   if (ts.isAwaitExpression(node)) return true
   if (ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isArrowFunction(node)) return false
@@ -1893,7 +1920,7 @@ function transformJsxExpression(
       if (
         (node.operatorToken.kind === ts.SyntaxKind.QuestionQuestionToken ||
           node.operatorToken.kind === ts.SyntaxKind.BarBarToken) &&
-        containsJsxInExpression(node.right)
+        (containsJsxInExpression(node.right) || callsJsxHelper(node.right, ctx))
       ) {
         return transformNullishCoalescing(node, ctx)
       }
@@ -2642,18 +2669,34 @@ function checkLoopKey(
   }
   while (ts.isParenthesizedExpression(body)) body = body.expression
 
+  // Check a JSX operand (unwrapping parentheses) if it is an element.
+  function checkJsxOperand(node: ts.Node): void {
+    let n = node
+    while (ts.isParenthesizedExpression(n)) n = n.expression
+    if (ts.isJsxElement(n)) checkOpening(n.openingElement)
+    else if (ts.isJsxSelfClosingElement(n)) checkOpening(n)
+  }
+
   if (ts.isConditionalExpression(body)) {
     // Check both branches independently
-    const whenTrue = body.whenTrue
-    const whenFalse = body.whenFalse
-    let wt: ts.Node = whenTrue
-    let wf: ts.Node = whenFalse
-    while (ts.isParenthesizedExpression(wt)) wt = wt.expression
-    while (ts.isParenthesizedExpression(wf)) wf = wf.expression
-    if (ts.isJsxElement(wt)) checkOpening(wt.openingElement)
-    else if (ts.isJsxSelfClosingElement(wt)) checkOpening(wt)
-    if (ts.isJsxElement(wf)) checkOpening(wf.openingElement)
-    else if (ts.isJsxSelfClosingElement(wf)) checkOpening(wf)
+    checkJsxOperand(body.whenTrue)
+    checkJsxOperand(body.whenFalse)
+    return
+  }
+
+  // Logical `cond && <jsx>` / `cond || <jsx>` / `a ?? <jsx>` whole-item
+  // conditionals (#1665). The JSX operand renders 0-or-1 element per
+  // iteration and still needs a key for correct reconciliation, exactly
+  // like a ternary branch. Without this case the binary-expression body
+  // silently skipped key validation.
+  if (
+    ts.isBinaryExpression(body) &&
+    (body.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken ||
+      body.operatorToken.kind === ts.SyntaxKind.BarBarToken ||
+      body.operatorToken.kind === ts.SyntaxKind.QuestionQuestionToken)
+  ) {
+    checkJsxOperand(body.left)
+    checkJsxOperand(body.right)
     return
   }
 
@@ -2679,6 +2722,69 @@ function loopBodyIsMultiRoot(children: IRNode[]): boolean {
   return loopBodyIsMultiRoot(only.children)
 }
 
+/**
+ * True when a conditional branch does NOT render exactly one root element —
+ * the element-less side of a whole-item conditional. Covers the empty branch
+ * of `cond && <li/>` (`null`) and `cond ? <li/> : null`, and the scalar side
+ * of `expr || <li/>` / `expr ?? <li/>` (the left operand renders as text or
+ * nothing, never a tracked element). Any such branch makes the loop item
+ * render 0-or-1 element across states, which the element-tracking `mapArray`
+ * cannot represent — the loop must use anchored emission instead.
+ *
+ * Element / component branches return `false`; a fragment is element-like
+ * only when it flattens to exactly one element child.
+ */
+function branchHasNoElement(node: IRNode): boolean {
+  if (node.type === 'element' || node.type === 'component') return false
+  if (node.type === 'conditional') {
+    return branchHasNoElement(node.whenTrue) || branchHasNoElement(node.whenFalse)
+  }
+  if (node.type === 'fragment') {
+    const real = node.children.filter(
+      (c) => !(c.type === 'text' && typeof c.value === 'string' && !c.value.trim())
+    )
+    return real.length !== 1 || branchHasNoElement(real[0])
+  }
+  // expression, text, and everything else: not a single tracked element.
+  return true
+}
+
+/**
+ * When the loop body is a single whole-item conditional with an element-less
+ * branch (the #1665 shapes: `&&`, `|| <jsx>`, `?? <jsx>`, `? <jsx> : null`),
+ * return that conditional so the caller can route the loop through anchored
+ * emission. Returns `null` for single-element bodies and for both-branch-
+ * element ternaries (which always render exactly one element and stay on the
+ * legacy `mapArray` path).
+ */
+function loopBodyItemConditional(children: IRNode[]): IRConditional | null {
+  const real = children.filter(
+    (c) => !(c.type === 'text' && typeof c.value === 'string' && !c.value.trim())
+  )
+  if (real.length !== 1) return null
+  const only = real[0]
+  if (only.type !== 'conditional') return null
+  if (branchHasNoElement(only.whenTrue) || branchHasNoElement(only.whenFalse)) {
+    return only
+  }
+  return null
+}
+
+/**
+ * Hoist a key expression out of a whole-item conditional for `mapArray`'s
+ * keyFn. Ignores element-less branches (they carry no element and thus no
+ * key) and requires the rendering branch(es) to agree on the key expression.
+ * Returns `null` when no key can be determined.
+ */
+function extractItemConditionalKey(cond: IRConditional): string | null {
+  const a = branchHasNoElement(cond.whenTrue) ? null : extractLoopKey(cond.whenTrue)
+  const b = branchHasNoElement(cond.whenFalse) ? null : extractLoopKey(cond.whenFalse)
+  if (a !== null && b !== null) {
+    return normalizeKeyExpr(a) === normalizeKeyExpr(b) ? a : null
+  }
+  return a ?? b
+}
+
 function transformMapCall(
   node: ts.CallExpression,
   ctx: TransformContext,
@@ -2947,6 +3053,36 @@ function transformMapCall(
     }
     if (index) ctx.loopParams.add(index)
 
+    // Logical control flow (`cond && <X/>`, `a ?? themeLogo()`) as the map
+    // body. This is not a JSX literal, ternary, or block, so without this
+    // the dispatch below leaves `children` empty and the whole `.map(...)`
+    // falls through to the reactive-text path — emitting the callback
+    // verbatim. That left inline JSX uncompiled and module-level JSX
+    // helpers undeclared (ReferenceError at hydration, #1665). Route the
+    // logical body through the shared JSX expression transformer, which
+    // lowers it into an IRConditional and inlines any JSX helper, exactly
+    // like the ternary form.
+    //
+    // Scoped deliberately to logical operators that actually render JSX
+    // (inline literal or a tracked helper call): a bare call body
+    // (`map(t => renderItem(t))`) stays on the existing reactive-text path
+    // that #546 owns, and a scalar logical body (`t.active && t.label`)
+    // keeps rendering its value.
+    const tryTransformRenderableBody = (expr: ts.Expression): void => {
+      if (!ts.isBinaryExpression(expr)) return
+      const op = expr.operatorToken.kind
+      if (
+        op !== ts.SyntaxKind.AmpersandAmpersandToken &&
+        op !== ts.SyntaxKind.BarBarToken &&
+        op !== ts.SyntaxKind.QuestionQuestionToken
+      ) {
+        return
+      }
+      if (!containsJsxInExpression(expr) && !callsJsxHelper(expr, ctx)) return
+      const transformed = transformJsxExpression(expr, ctx, isClientOnly)
+      if (transformed) children = [transformed]
+    }
+
     // Transform callback body
     const body = callback.body
     if (ts.isJsxElement(body) || ts.isJsxSelfClosingElement(body) || ts.isJsxFragment(body)) {
@@ -2973,6 +3109,8 @@ function transformMapCall(
       } else if (method === 'flatMap' && ts.isArrayLiteralExpression(inner)) {
         // flatMap arrow with array literal: items.flatMap(item => ([<A/>, <B/>]))
         children = transformArrayLiteralChildren(inner, ctx)
+      } else {
+        tryTransformRenderableBody(inner)
       }
     } else if (method === 'flatMap' && ts.isArrayLiteralExpression(body)) {
       // flatMap arrow with array literal: items.flatMap(item => [<A/>, <B/>])
@@ -3025,6 +3163,8 @@ function transformMapCall(
       if (method === 'flatMap' && children.length === 0) {
         flatMapCallback = buildFlatMapCallback(callback, body, ctx)
       }
+    } else {
+      tryTransformRenderableBody(body)
     }
 
     // Unregister loop params
@@ -3055,7 +3195,15 @@ function transformMapCall(
   // same `key={EXPR}`, that EXPR is lifted out to mapArray's keyFn so a
   // shape change (e.g. `<polygon>` ↔ `<circle>`) replaces the DOM node
   // instead of mutating attributes on the wrong tag.
-  const key = children.length > 0 ? extractLoopKey(children[0]) : null
+  // Whole-item conditional bodies (#1665): the loop item is a single
+  // conditional whose at-least-one branch renders nothing, so an item shows
+  // 0-or-1 element. The key lives inside the rendering branch, so hoist it
+  // from there; a flag routes the loop through anchored emission downstream.
+  const itemConditional = children.length > 0 ? loopBodyItemConditional(children) : null
+  const bodyIsItemConditional = itemConditional !== null
+  const key = bodyIsItemConditional
+    ? extractItemConditionalKey(itemConditional!)
+    : (children.length > 0 ? extractLoopKey(children[0]) : null)
 
   // Extract childComponent info if the loop body is a single component
   // This enables createComponent-based rendering with proper prop passing
@@ -3137,6 +3285,7 @@ function transformMapCall(
     callsReactiveGetters: callsReactive || undefined,
     hasFunctionCalls: hasCalls || undefined,
     bodyIsMultiRoot: bodyIsMultiRoot || undefined,
+    bodyIsItemConditional: bodyIsItemConditional || undefined,
     childComponent,
     nestedComponents,
     filterPredicate,

package/src/preprocess-inline-jsx-callbacks.ts

@@ -128,22 +128,40 @@ function runSinglePass(
   }
 
   function visit(node: ts.Node): void {
+    // `renderNode={(n) => <div/>}` — arrow in JsxAttribute position.
     if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression) {
-      let expr: ts.Expression = node.initializer.expression
-      while (ts.isParenthesizedExpression(expr)) expr = expr.expression
-      if (ts.isArrowFunction(expr) && arrowBodyContainsJsx(expr)) {
-        const handled = handleInlineArrow(expr)
-        if (handled) {
-          // Don't dive into the arrow's body in this pass — the next
-          // fixpoint iteration will see the synthesized component at
-          // module scope and process any nested inline arrows there.
-          return
-        }
+      if (tryHandleArrowValue(node.initializer.expression)) {
+        // Don't dive into the arrow's body in this pass — the next
+        // fixpoint iteration will see the synthesized component at
+        // module scope and process any nested inline arrows there.
+        return
       }
     }
+    // `{ piconic: () => <BrandLogo/> }` — arrow as an object-literal
+    // property value (e.g. a `Record<K, () => JSX>` lookup map). Without
+    // this the JSX leaks untransformed into both the SSR template and the
+    // client bundle (#1663).
+    if (ts.isPropertyAssignment(node) && node.initializer) {
+      if (tryHandleArrowValue(node.initializer)) return
+    }
     ts.forEachChild(node, visit)
   }
 
+  /**
+   * If `initializer` is (a parenthesized chain wrapping) an arrow function
+   * whose body contains JSX, hoist it into a synthesized component and
+   * record the replacement. Returns true when the arrow was successfully
+   * hoisted, so the caller can skip recursing into the arrow body.
+   */
+  function tryHandleArrowValue(initializer: ts.Expression): boolean {
+    let expr: ts.Expression = initializer
+    while (ts.isParenthesizedExpression(expr)) expr = expr.expression
+    if (ts.isArrowFunction(expr) && arrowBodyContainsJsx(expr)) {
+      return handleInlineArrow(expr)
+    }
+    return false
+  }
+
   function handleInlineArrow(arrow: ts.ArrowFunction): boolean {
     const paramNames = collectArrowParamNames(arrow)
     const free = collectFreeIdentifiers(arrow)

package/src/types.ts

@@ -532,6 +532,18 @@ export interface IRLoop {
    */
   bodyIsMultiRoot?: boolean
 
+  /**
+   * True when the loop body is a single whole-item conditional whose at
+   * least one branch renders no element (`arr.map(t => cond && <li/>)` or
+   * `cond ? <li/> : null`), so an item renders 0-or-1 element per pass
+   * (#1665). Drives anchored emission: per-item `<!--bf-loop-i:KEY-->`
+   * anchors in the template and a `mapArrayAnchored` call whose renderItem
+   * lets `insert()` own the (possibly empty) content. Single-element bodies
+   * and both-branch-element ternaries set this false and keep the legacy
+   * `mapArray` emission.
+   */
+  bodyIsItemConditional?: boolean
+
   /**
    * Raw JS of pre-return statements in block body .map() callback.
    * Example: `items.map(item => { const label = item.name.toUpperCase(); return <li>{label}</li> })`