@barefootjs/jsx 0.4.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/stringify/static-array-child-init.ts

@@ -161,10 +161,14 @@ function emitInnerLoopNested(lines: string[], plan: InnerLoopNestedInitPlan): vo
   for (const stmt of innerPreludeStatements) {
     lines.push(`        ${stmt}`)
   }
-  for (const comp of comps) {
-    lines.push(`        const __compEl = qsaChildScope(__innerEl, ${comp.selector})`)
-    lines.push(`        if (__compEl) initChild('${nameForRegistryRef(comp.componentName)}', __compEl, ${comp.propsExpr})`)
-  }
+  // Each inner-loop component gets a uniquely-suffixed `__compEl` binding.
+  // Multiple comps share one inner `forEach` body, so a fixed name would
+  // re-declare `const __compEl` in the same scope (#1664).
+  comps.forEach((comp, i) => {
+    const compElVar = comps.length > 1 ? `__compEl${i}` : '__compEl'
+    lines.push(`        const ${compElVar} = qsaChildScope(__innerEl, ${comp.selector})`)
+    lines.push(`        if (${compElVar}) initChild('${nameForRegistryRef(comp.componentName)}', ${compElVar}, ${comp.propsExpr})`)
+  })
   lines.push(`      })`)
   lines.push(`    })`)
   lines.push(`  }`)

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

@@ -7,7 +7,12 @@ import ts from 'typescript'
 import type { AttrValue, IRTemplatePart, LoopParamBinding, FreeReference, IRNode } from '../types'
 import type { TopLevelLoop, BranchLoop } from './types'
 import { buildLoopChainExpr } from '../loop-chain'
-import { replaceInExprContexts } from '../scanner/js-scanner'
+import {
+  iterateJsTokens,
+  isIdentifierLikeToken,
+  isTriviaKind,
+  replaceInExprContexts,
+} from '../scanner/js-scanner'
 import {
   BF_KEY as DATA_KEY,
   BF_KEY_PREFIX as DATA_KEY_PREFIX,
@@ -16,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.
@@ -376,124 +382,33 @@ export function tokenContainsIdent(expr: string, ident: string): boolean {
   return scanForIdentifiers(expr, (token) => token === ident)
 }
 
-const IDENT_START_RE = /[A-Za-z_$]/
-const IDENT_PART_RE = /[A-Za-z0-9_$]/
-
 /**
- * Single-pass scanner over a JS-like expression string. Walks character by
- * character through a small state machine and invokes `predicate` on every
- * identifier-like token it finds in a position where bare identifiers are
- * semantically possible (i.e. not inside a string/comment, not the property
- * name in a member-access expression). Returns true on the first hit.
+ * Walk a JS-like expression string via the shared `ts.createScanner`-based
+ * lexer and invoke `predicate` on every identifier-like token found in a
+ * position where bare identifiers are semantically possible — i.e. not
+ * inside a string / template-string body / comment / regex literal, and
+ * not the property name of a member-access expression. Returns true on the
+ * first hit.
+ *
+ * Delegating to `iterateJsTokens` (rather than a hand-rolled char-by-char
+ * state machine) means regex literals are recognised: `/it's/.test(foo)`
+ * no longer reads the apostrophe as a string opener, and an identifier
+ * inside a regex body (`/className/`) is correctly treated as opaque (#1370).
  */
 function scanForIdentifiers(expr: string, predicate: (token: string) => boolean): boolean {
-  const n = expr.length
-  let i = 0
-  // 0 = code, 1 = single-quote string, 2 = double-quote string,
-  // 3 = template literal text, 4 = template literal expression,
-  // 5 = line comment, 6 = block comment.
-  type State = 0 | 1 | 2 | 3 | 4 | 5 | 6
-  let state: State = 0
-  // For nested template expressions: stack of brace depths at each `${` push.
-  const tmplExprStack: number[] = []
-  // Brace depth tracked only inside template-expression state to detect when
-  // we close back to the surrounding template-literal text.
-  let braceDepth = 0
-
-  while (i < n) {
-    const ch = expr[i]
-
-    switch (state) {
-      case 0: // code
-      case 4: { // template expression — same lexing rules as code
-        // String / template literal openers
-        if (ch === "'") { state = 1; i++; continue }
-        if (ch === '"') { state = 2; i++; continue }
-        if (ch === '`') { state = 3; i++; continue }
-        // Comment openers
-        if (ch === '/' && i + 1 < n) {
-          const next = expr[i + 1]
-          if (next === '/') { state = 5; i += 2; continue }
-          if (next === '*') { state = 6; i += 2; continue }
-        }
-        // Track braces only inside template-expression state, so we know when
-        // we leave `${ ... }` back to the surrounding template text.
-        if (state === 4) {
-          if (ch === '{') { braceDepth++; i++; continue }
-          if (ch === '}') {
-            if (braceDepth === 0) {
-              // Closing `}` of `${ ... }` — pop back to enclosing tmpl state.
-              const restored = tmplExprStack.pop()
-              braceDepth = restored ?? 0
-              state = 3
-              i++
-              continue
-            }
-            braceDepth--
-            i++
-            continue
-          }
-        }
-        // Identifier start
-        if (IDENT_START_RE.test(ch)) {
-          let j = i + 1
-          while (j < n && IDENT_PART_RE.test(expr[j])) j++
-          const token = expr.slice(i, j)
-          // Skip member-access tail: identifier preceded by `.` (ignoring
-          // whitespace).
-          let prev = i - 1
-          while (prev >= 0 && (expr[prev] === ' ' || expr[prev] === '\t' || expr[prev] === '\n' || expr[prev] === '\r')) prev--
-          const isMemberTail = prev >= 0 && expr[prev] === '.' && (prev === 0 || expr[prev - 1] !== '.') // not `..` (spread)
-          if (!isMemberTail && predicate(token)) return true
-          i = j
-          continue
-        }
-        i++
-        continue
-      }
-      case 1: { // single-quote string
-        if (ch === '\\' && i + 1 < n) { i += 2; continue }
-        if (ch === "'") { state = 0; i++; continue }
-        i++
-        continue
-      }
-      case 2: { // double-quote string
-        if (ch === '\\' && i + 1 < n) { i += 2; continue }
-        if (ch === '"') { state = 0; i++; continue }
-        i++
-        continue
-      }
-      case 3: { // template literal text
-        if (ch === '\\' && i + 1 < n) { i += 2; continue }
-        if (ch === '`') {
-          // Closing the template literal; return to whatever code state we
-          // came from (either top-level code or an outer template expression).
-          state = tmplExprStack.length > 0 ? 4 : 0
-          i++
-          continue
-        }
-        if (ch === '$' && i + 1 < n && expr[i + 1] === '{') {
-          // Entering `${ ... }`: save current outer brace depth, reset for new.
-          tmplExprStack.push(braceDepth)
-          braceDepth = 0
-          state = 4
-          i += 2
-          continue
-        }
-        i++
-        continue
-      }
-      case 5: { // line comment
-        if (ch === '\n' || ch === '\r') { state = 0; i++; continue }
-        i++
-        continue
-      }
-      case 6: { // block comment
-        if (ch === '*' && i + 1 < n && expr[i + 1] === '/') { state = 0; i += 2; continue }
-        i++
-        continue
-      }
+  // Previous *significant* (non-trivia) token kind, used to skip the tail
+  // of a member access (`a.foo`, `a?.foo`) while still treating the head
+  // (`foo.bar`) and spread targets (`...foo`) as real references.
+  let prevSignificant: ts.SyntaxKind | undefined
+  for (const tok of iterateJsTokens(expr)) {
+    if (isTriviaKind(tok.kind)) continue
+    if (isIdentifierLikeToken(tok.kind)) {
+      const isMemberTail =
+        prevSignificant === ts.SyntaxKind.DotToken
+        || prevSignificant === ts.SyntaxKind.QuestionDotToken
+      if (!isMemberTail && predicate(expr.slice(tok.pos, tok.end))) return true
     }
+    prevSignificant = tok.kind
   }
   return false
 }