@barefootjs/jsx 0.5.0 → 0.5.2

package/src/analyzer-context.ts

@@ -20,6 +20,7 @@ import type {
   CompilerError,
   SourceLocation,
   ParamInfo,
+  PropertyInfo,
   ReactiveFactoryInfo,
 } from './types'
 import { type ExcludeRange, collectAllTypeRanges, reconstructWithoutTypes } from './strip-types'
@@ -301,6 +302,46 @@ export function getSourceLocation(
 // Type Helpers
 // =============================================================================
 
+/**
+ * Extract structured {@link PropertyInfo} entries from the members of an object
+ * type literal or interface declaration. Shared so the type-literal branch of
+ * {@link typeNodeToTypeInfo} and interface-definition collection produce
+ * identical field shapes.
+ */
+export function membersToProperties(
+  members: ts.NodeArray<ts.TypeElement>,
+  sourceFile: ts.SourceFile
+): PropertyInfo[] {
+  return members
+    .filter(ts.isPropertySignature)
+    .map((member) => ({
+      name: propertyNameText(member.name, sourceFile),
+      type: typeNodeToTypeInfo(member.type, sourceFile) ?? {
+        kind: 'unknown' as const,
+        raw: 'unknown',
+      },
+      optional: !!member.questionToken,
+      readonly: !!member.modifiers?.some(
+        (m) => m.kind === ts.SyntaxKind.ReadonlyKeyword
+      ),
+    }))
+}
+
+/**
+ * The source-level name of an object/interface member. String- and numeric-
+ * literal keys are returned unquoted (`{ "id": ... }` → `id`), so consumers see
+ * the same name whether the key was written as an identifier or a string —
+ * `getText()` would otherwise keep the quotes.
+ */
+function propertyNameText(
+  name: ts.PropertyName | undefined,
+  sourceFile: ts.SourceFile
+): string {
+  if (!name) return ''
+  if (ts.isStringLiteral(name) || ts.isNumericLiteral(name)) return name.text
+  return name.getText(sourceFile)
+}
+
 export function typeNodeToTypeInfo(
   typeNode: ts.TypeNode | undefined,
   sourceFile: ts.SourceFile
@@ -352,24 +393,29 @@ export function typeNodeToTypeInfo(
     return {
       kind: 'object',
       raw,
-      properties: typeNode.members
-        .filter(ts.isPropertySignature)
-        .map((member) => ({
-          name: member.name?.getText(sourceFile) ?? '',
-          type: typeNodeToTypeInfo(member.type, sourceFile) ?? {
-            kind: 'unknown',
-            raw: 'unknown',
-          },
-          optional: !!member.questionToken,
-          readonly: !!member.modifiers?.some(
-            (m) => m.kind === ts.SyntaxKind.ReadonlyKeyword
-          ),
-        })),
+      properties: membersToProperties(typeNode.members, sourceFile),
     }
   }
 
   // Type reference (named type)
   if (ts.isTypeReferenceNode(typeNode)) {
+    // Normalise the generic array forms `Array<T>` / `ReadonlyArray<T>` to the
+    // same `kind: 'array'` shape as `T[]`, so every consumer sees one array
+    // representation regardless of how the source spelled it.
+    const refName = ts.isIdentifier(typeNode.typeName) ? typeNode.typeName.text : ''
+    if (
+      (refName === 'Array' || refName === 'ReadonlyArray') &&
+      typeNode.typeArguments?.length === 1
+    ) {
+      return {
+        kind: 'array',
+        raw,
+        elementType: typeNodeToTypeInfo(typeNode.typeArguments[0], sourceFile) ?? {
+          kind: 'unknown',
+          raw: 'unknown',
+        },
+      }
+    }
     return {
       kind: 'interface',
       raw,

package/src/analyzer.ts

@@ -16,6 +16,7 @@ import {
   createAnalyzerContext,
   getSourceLocation,
   typeNodeToTypeInfo,
+  membersToProperties,
   isComponentFunction,
   isArrowComponentFunction,
 } from './analyzer-context'
@@ -1782,6 +1783,7 @@ function collectInterfaceDefinition(
     kind: 'interface',
     name: node.name.text,
     definition: node.getText(ctx.sourceFile),
+    properties: membersToProperties(node.members, ctx.sourceFile),
     loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath),
   })
 }
@@ -1790,10 +1792,16 @@ function collectTypeAliasDefinition(
   node: ts.TypeAliasDeclaration,
   ctx: AnalyzerContext
 ): void {
+  // Only object-type aliases carry structured fields; other aliases
+  // (string-literal unions, etc.) have no field set to record.
+  const properties = ts.isTypeLiteralNode(node.type)
+    ? membersToProperties(node.type.members, ctx.sourceFile)
+    : undefined
   ctx.typeDefinitions.push({
     kind: 'type',
     name: node.name.text,
     definition: node.getText(ctx.sourceFile),
+    properties,
     loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath),
   })
 }

package/src/expression-parser.ts

@@ -214,6 +214,21 @@ const UNSUPPORTED_METHODS = new Set([
   // `bf_lower` / `bf_upper` (Go) and Perl's native `lc` / `uc` (Mojo).
   // `trim` lowers via the `array-method` IR + `bf_trim` (Go) and a
   // Perl regex strip (Mojo).
+  //
+  // #1448 follow-up — String methods that have NO lowering yet. These
+  // were previously absent from this gate, so `isSupported` reported
+  // them "supported" and the adapters emitted a raw method call
+  // (`{{.Name.StartsWith "a"}}` on Go, `$name->{startsWith}('a')` on
+  // Mojo) with no build diagnostic — a silent footgun that only
+  // surfaced as a crash at template-render time. Listing them here
+  // makes the build fail loudly with BF101 (the same treatment the
+  // unsupported array methods above get), pointing users at the
+  // `/* @client */` escape hatch. Each name drops off as its lowering
+  // lands. See #1448 "Unsupported string methods" Tier B / Tier C.
+  'split', 'startsWith', 'endsWith', 'replace', 'replaceAll',
+  'repeat', 'padStart', 'padEnd',
+  'charAt', 'charCodeAt', 'codePointAt', 'normalize',
+  'substring', 'substr', 'match', 'matchAll', 'search',
 ])
 
 // =============================================================================
@@ -1724,7 +1739,7 @@ function checkSupport(expr: ParsedExpr): SupportResult {
           return {
             supported: false,
             level: 'L5_UNSUPPORTED',
-            reason: `Higher-order method '${methodName}()' requires client-side evaluation. Use @client directive or pre-compute in Go.`,
+            reason: `Method '${methodName}()' has no template lowering and requires client-side evaluation. Wrap the expression in /* @client */ to defer it to hydration, or pre-compute the value before rendering.`,
           }
         }
       }

package/src/index.ts

@@ -40,7 +40,9 @@ export type {
   IRTemplatePart,
   IRProp,
   ParamInfo,
+  PropertyInfo,
   TypeInfo,
+  TypeDefinition,
   SourceLocation,
   CompilerError,
 } from './types'

package/src/ir-to-client-js/collect-elements.ts

@@ -20,31 +20,50 @@ function producesDomChild(node: IRNode): boolean {
 
 /**
  * Pre-pass: for every loop node in the IR tree, record the number of non-loop
- * DOM siblings that appear before it in its parent element. Read when
+ * DOM siblings that appear before it in its parent container. Read when
  * constructing TopLevelLoop and NestedLoop so the client JS can offset
  * children[idx] access past statically-rendered siblings.
  *
+ * Counting must happen for every container whose children render as a
+ * contiguous run of DOM siblings into the same parent — not just `element`.
+ * A loop nested directly inside a component (`<Wrapper><span/>{xs.map(...)}`
+ * </Wrapper>`), fragment, provider, or async boundary has its preceding
+ * static sibling rendered as a sibling of the loop's items too, so
+ * `children[idx]` access is shifted exactly as it is under an element parent
+ * (#1688). Before this, a static sibling before a `.map()` inside a
+ * (self-portaling) component dropped the first item's nested child component
+ * during hydration because the offset was silently zero.
+ *
  * Computed once up front (instead of during collection) so the offset data
  * lives in an explicit value rather than a module-level WeakMap mutated by
  * two separate traversals.
  */
 export function computeLoopSiblingOffsets(root: IRNode): Map<IRLoop, number> {
   const offsets = new Map<IRLoop, number>()
-  walkIR(root, null, {
-    element: ({ node: el, descend }) => {
-      let nonLoopCount = 0
-      for (const child of el.children) {
-        if (child.type === 'loop') {
-          if (nonLoopCount > 0) offsets.set(child, nonLoopCount)
-        } else if (producesDomChild(child)) {
-          nonLoopCount++
-        }
+  const recordChildren = (children: IRNode[]): void => {
+    let nonLoopCount = 0
+    for (const child of children) {
+      if (child.type === 'loop') {
+        if (nonLoopCount > 0) offsets.set(child, nonLoopCount)
+      } else if (producesDomChild(child)) {
+        nonLoopCount++
       }
-      descend()
-    },
-    // All container kinds (fragment / component / provider / async / loop /
-    // conditional / if-statement) rely on walkIR's default descent with the
-    // same scope. Leaves (text / expression / slot) are no-ops.
+    }
+  }
+  const containerVisit = ({ node, descend }: { node: { children: IRNode[] }; descend: () => void }): void => {
+    recordChildren(node.children)
+    descend()
+  }
+  walkIR(root, null, {
+    element: containerVisit,
+    component: containerVisit,
+    fragment: containerVisit,
+    provider: containerVisit,
+    async: containerVisit,
+    // `loop` / `conditional` / `if-statement` are not flat sibling
+    // containers (their children are item bodies / branches), and leaves
+    // (text / expression / slot) have no children — all rely on walkIR's
+    // default descent with the same scope.
   })
   return offsets
 }
@@ -231,6 +250,7 @@ export function collectInnerLoops(
           key: n.key,
           markerId: n.markerId,
           bodyIsMultiRoot: n.bodyIsMultiRoot,
+          bodyIsItemConditional: n.bodyIsItemConditional,
           iterationShape: n.iterationShape,
           containerSlotId: scope.parentSlotId,
           template,
@@ -564,6 +584,7 @@ export function collectElements(
         key: l.key,
         markerId: l.markerId,
         bodyIsMultiRoot: l.bodyIsMultiRoot,
+        bodyIsItemConditional: l.bodyIsItemConditional,
         iterationShape: l.iterationShape,
         template,
         staticItemTemplate,
@@ -898,6 +919,7 @@ function collectBranchLoops(
         key: n.key,
         markerId: n.markerId,
         bodyIsMultiRoot: n.bodyIsMultiRoot,
+        bodyIsItemConditional: n.bodyIsItemConditional,
         iterationShape: n.iterationShape,
         template: childTemplate,
         containerSlotId: containerSlot,

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

@@ -56,6 +56,15 @@ export interface BuildLoopPlanOptions {
  * described above and returns the discriminated `LoopPlan`.
  */
 export function buildLoopPlan(elem: TopLevelLoop, opts: BuildLoopPlanOptions): LoopPlan {
+  // Whole-item conditional bodies (#1665) render 0-or-1 element per item, so
+  // they need anchored `mapArrayAnchored` emission regardless of whether the
+  // array is static or dynamic. Routing both through the plain (anchored)
+  // path keeps `const arr` and `signal()` behaviour identical — a static
+  // array's per-item conditional still toggles reactively instead of freezing
+  // in the SSR-time `forEach` (which has no conditional handling at all).
+  if (elem.bodyIsItemConditional) {
+    return buildPlainLoopPlan(elem)
+  }
   if (elem.isStaticArray) {
     return buildStaticLoopPlan(elem, opts.unsafeLocalNames)
   }
@@ -92,6 +101,14 @@ export function buildPlainLoopPlan(elem: TopLevelLoop): PlainLoopPlan {
     reactiveEffects: hasReactive ? buildLoopReactiveEffectsPlan(elem) : null,
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
+    anchored: elem.bodyIsItemConditional ?? false,
+    // Fall back to the iteration index when the loop has no key. A whole-item
+    // conditional without a key is a BF023 error, but the emitted client JS
+    // must still parse — an empty `anchorKeyExpr` would produce
+    // `createComment(`bf-loop-i:${}`)` (a SyntaxError that breaks the whole
+    // bundle). `elem.index || '__idx'` matches `indexParam` above, so the
+    // anchor value stays consistent with the renderItem's own index param.
+    anchorKeyExpr: elem.key ? wrap(elem.key) : (elem.index || '__idx'),
   }
 }
 

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

@@ -95,6 +95,20 @@ interface PlainLoopVariant extends DynamicLoopCommon {
    * `<!--bf-loop-i-->` marker emission, and `qsaItem` slot lookups (#1212).
    */
   bodyIsMultiRoot: boolean
+  /**
+   * True when the loop body is a whole-item conditional (#1665). Switches
+   * emission to `mapArrayAnchored`: the renderItem returns a fragment headed
+   * by a `<!--bf-loop-i:KEY-->` anchor and seeded with the conditional's
+   * markers, and `insert(anchor, …)` (not `insert(__el, …)`) owns the
+   * possibly-empty content.
+   */
+  anchored: boolean
+  /**
+   * Key expression wrapped as a loop-param accessor (`t().id`), used to bake
+   * the per-item `bf-loop-i:KEY` anchor value inside the anchored renderItem.
+   * Empty when the loop has no key (only meaningful when `anchored`).
+   */
+  anchorKeyExpr: string
 }
 
 /**

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

@@ -163,10 +163,15 @@ function emitArmBody(
 
   for (const te of body.textEffects) {
     const v = varSlotId(te.slotId)
-    lines.push(`${indent}const [__el_${v}] = $t(__branchScope, '${te.slotId}')`)
+    // Route through `__bfText` so a JSX-valued expression (`{cond && logo(id)}`)
+    // re-splices the live element by identity instead of stringifying it to
+    // "[object HTMLElement]" — the branch template already spliced it via
+    // `__bfSlot`, and this effect re-renders it when its deps change (#1663).
+    // The `let` tracker carries the replaced node across reactive re-runs.
+    lines.push(`${indent}let __anchor_${v} = $t(__branchScope, '${te.slotId}')[0]`)
     lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`)
     lines.push(`${indent}  const __val = ${te.expression}`)
-    lines.push(`${indent}  if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`)
+    lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`)
     lines.push(`${indent}}))`)
   }
 

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.