@barefootjs/jsx 0.5.3 → 0.6.1

package/src/index.ts

@@ -245,7 +245,7 @@ export { ErrorCodes, createError, formatError, generateCodeFrame } from './error
 
 // Expression Parser
 export { parseExpression, isSupported, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, containsHigherOrder } from './expression-parser'
-export type { ParsedExpr, ParsedStatement, SortComparator, SortKey, SupportLevel, SupportResult, TemplatePart } from './expression-parser'
+export type { ParsedExpr, ParsedStatement, SortComparator, SortKey, ReduceOp, FlatDepth, FlatMapOp, FlatMapLeaf, SupportLevel, SupportResult, TemplatePart } from './expression-parser'
 export { buildLoopChainExpr } from './loop-chain'
 export type { LoopChainInputs } from './loop-chain'
 

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

@@ -428,9 +428,15 @@ function decideLoopRendering(
   ctx: ClientJsContext | undefined,
 ): { useElementReconciliation: boolean; innerLoops: NestedLoop[] | undefined } {
   const hasNestedComps = (loop.nestedComponents?.length ?? 0) > 0
-  const innerLoops = !loop.childComponent
-    ? collectInnerLoops(loop.children, siblingOffsets, loop.param, ctx)
-    : undefined
+  // Collect inner loops even when the outer item is a child component
+  // (#1725): a `.map()` of components living inside the child component's
+  // JSX children (e.g. `<SelectGroup>{items.map(...)}</SelectGroup>`) needs
+  // its own `initChild` pass. `loop.children` is the single child-component
+  // node; `collectInnerLoops` descends into its children to find the nested
+  // loop. These only surface for static arrays (gated at the call site via
+  // `isStaticArray && innerLoops.length`) so dynamic child-component loops —
+  // which render through `createComponent` — are unaffected.
+  const innerLoops = collectInnerLoops(loop.children, siblingOffsets, loop.param, ctx)
   const hasInnerLoops = (innerLoops?.length ?? 0) > 0
   const useElementReconciliation =
     !loop.childComponent && !loop.isStaticArray && (hasNestedComps || hasInnerLoops)

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

@@ -168,7 +168,7 @@ export function emitRegistrationAndHydration(
     // transformation runs at this layer (#1277).
     const csrInlinableConstants = csrInlinableConstantsFromCtx(ctx)
     const templateHtml = generateCsrTemplate(
-      _ir.root, csrInlinableConstants, ctx, undefined, restSpreadNames, ctx.propsObjectName, unsafeLocalNames
+      _ir.root, csrInlinableConstants, ctx, undefined, restSpreadNames, ctx.propsObjectName, unsafeLocalNames, ctx.deferredChildSlots
     )
     if (templateHtml) {
       defParts.push(`template: (${PROPS_PARAM}) => \`${templateHtml}\``)

package/src/ir-to-client-js/generate-init.ts

@@ -14,7 +14,8 @@ import { PROPS_PARAM } from './utils'
 import { buildReferencesGraph } from './build-references'
 import { computePropUsage } from './compute-prop-usage'
 import { IMPORT_PLACEHOLDER, MODULE_CONSTANTS_PLACEHOLDER } from './imports'
-import { emitRegistrationAndHydration } from './emit-registration'
+import { emitRegistrationAndHydration, csrInlinableConstantsFromCtx } from './emit-registration'
+import { computeDeferredChildSlots } from './html-template'
 import { emitChildComponentImports } from './child-components'
 import { classifyLocalDeclarations } from './init-declarations'
 import { emitModuleLevelDeclarations, resolveFinalImports } from './emit-module-level'
@@ -55,6 +56,20 @@ export function generateInitFunction(
   // duplicate warnings (#1247).
   const inlinability = buildInlinableConstants(ctx, graph, ir.root)
 
+  // Decide which direct child components must defer their render to init
+  // because a forwarded prop resolves to an init-scope-only / non-inlinable
+  // local (dropped-prop fix). The child-init phase reads this set to emit
+  // `upsertChild` instead of `initChild`; `emitRegistrationAndHydration`
+  // reads it to emit a `data-bf-ph` placeholder instead of
+  // `renderChild(...)`. Computed here, once `unsafeLocalNames` is known.
+  ctx.deferredChildSlots = computeDeferredChildSlots(
+    ir.root,
+    ctx,
+    csrInlinableConstantsFromCtx(ctx),
+    inlinability.unsafeLocalNames,
+    ctx.propsObjectName,
+  )
+
   // --- Emission: declarative phase pipeline. Each entry in `PHASES`
   //     declares its inputs (dependsOn) and emission action (run); the
   //     stable topological execution preserves the legacy by-position

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

@@ -2,7 +2,7 @@
  * IR → HTML template string generation and validation.
  */
 
-import type { AttrValue, IRAttribute, IRNode } from '../types'
+import type { AttrValue, IRAttribute, IRNode, IRProp } from '../types'
 import { isBooleanAttr } from '../html-constants'
 import { toHtmlAttrName, attrValueToString, quotePropName, PROPS_PARAM, DATA_BF_PH, keyAttrName, loopStartMarker, loopEndMarker, loopItemMarker, freeIdsFromRefs, setIntersects, wrapExprWithLoopParams } from './utils'
 import type { LoopParamSpec } from './utils'
@@ -962,6 +962,20 @@ export interface TemplateOptions {
   loopDepth?: number
   /** Emit `bf-s` placeholder on scoped elements inside a jsx-children prop (#1320). */
   inHoistedChildren?: boolean
+  /**
+   * Slot ids of direct child components whose render must be DEFERRED to
+   * init because at least one forwarded (non-`/* @client *\/`) prop value
+   * references an init-scope-only / non-inlinable local — the module-scope
+   * template lambda can't supply it, so eagerly calling `renderChild` with
+   * the prop dropped would make the child template read `undefined`.
+   *
+   * For these slots the CSR `component` case emits a `data-bf-ph`
+   * placeholder instead of `renderChild(...)`; the parent init replaces it
+   * via `upsertChild` (→ `createComponent` with the complete getter props).
+   * Computed up front by `computeDeferredChildSlots` so the init phase and
+   * the template phase agree on which children defer (dropped-prop fix).
+   */
+  deferredChildSlots?: ReadonlySet<string>
 }
 
 /**
@@ -1353,6 +1367,7 @@ export function generateCsrTemplate(
   restSpreadNames?: Set<string>,
   propsObjectName?: string | null,
   unsafeLocalNames?: Set<string>,
+  deferredChildSlots?: ReadonlySet<string>,
 ): string {
   // Build the substitution env once per component. Signals + memos come
   // from `buildSignalMemoEnv`; inlinable constants layer in here so
@@ -1367,7 +1382,134 @@ export function generateCsrTemplate(
       }
     }
   }
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, loopDepth: -1 })
+  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, deferredChildSlots, loopDepth: -1 })
+}
+
+/**
+ * Build the per-component CSR substitution env (signals + memos + inlinable
+ * constants), matching what `generateCsrTemplate` builds. Shared so the
+ * deferred-child analysis and the template emit agree on substitution
+ * results.
+ */
+function buildCsrEnvForCtx(
+  ctx: ClientJsContext,
+  inlinableConstants: Map<string, string> | undefined,
+  propsObjectName?: string | null,
+): CsrEnv {
+  const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null)
+  const csrEnv: CsrEnv = { substitutions: new Map(base.substitutions), propsObjectName: base.propsObjectName }
+  if (inlinableConstants) {
+    for (const [name, value] of inlinableConstants) {
+      if (!csrEnv.substitutions.has(name)) {
+        csrEnv.substitutions.set(name, { kind: 'identifier', replacement: value, freeIdentifiers: new Set() })
+      }
+    }
+  }
+  return csrEnv
+}
+
+/**
+ * Decide whether a single forwarded component prop value would be DROPPED
+ * by the CSR `component` emit — i.e. after `csrSubstitute` its expression
+ * still references a name in `unsafeLocalNames`. Mirrors the
+ * `transformExpr` UNSAFE gate so the deferral analysis matches the actual
+ * template output exactly.
+ */
+function propResolvesUnsafe(
+  prop: IRProp,
+  env: CsrEnv,
+  unsafeLocalNames: ReadonlySet<string>,
+): boolean {
+  if (unsafeLocalNames.size === 0) return false
+  let source: string | undefined
+  switch (prop.value.kind) {
+    case 'expression':
+    case 'spread':
+      source = prop.value.expr
+      break
+    case 'template':
+      source = attrValueToString(prop.value, { useTemplate: true }) ?? undefined
+      break
+    default:
+      // literal / boolean / jsx-children carry no init-scope identifiers.
+      return false
+  }
+  if (!source) return false
+  const { freeIdentifiers } = csrSubstitute(source, env)
+  return setIntersects(freeIdentifiers, unsafeLocalNames)
+}
+
+/**
+ * Walk the component IR and collect the slot ids of DIRECT child
+ * components whose render must be deferred to init because at least one
+ * forwarded (non-`/* @client *\/`, non-event) prop resolves to an
+ * init-scope-only / non-inlinable local. The module-scope CSR template
+ * lambda can't supply such a value, so `renderChild(...)` would drop the
+ * prop and the child template would read `undefined` and throw.
+ *
+ * Only top-level (non-loop, non-clientOnly-conditional) children are
+ * considered — those are the ones rendered via the `renderChild(...)` form
+ * in the registration template and wired through `ctx.childInits`. Loop /
+ * conditional-branch children already go through their own
+ * placeholder + `createComponent` materialize paths.
+ */
+export function computeDeferredChildSlots(
+  node: IRNode,
+  ctx: ClientJsContext,
+  inlinableConstants: Map<string, string> | undefined,
+  unsafeLocalNames: ReadonlySet<string> | undefined,
+  propsObjectName?: string | null,
+): Set<string> {
+  const deferred = new Set<string>()
+  if (!unsafeLocalNames || unsafeLocalNames.size === 0) return deferred
+  const env = buildCsrEnvForCtx(ctx, inlinableConstants, propsObjectName)
+
+  const visit = (n: IRNode): void => {
+    switch (n.type) {
+      case 'component': {
+        if (n.name === 'Portal') {
+          n.children.forEach(visit)
+          return
+        }
+        if (n.slotId) {
+          const dropped = n.props.some(p => {
+            // Spread props (`...`) are forwarded via the rest-spread path
+            // (`restSpreadNames`), not the per-prop inline form, so they are
+            // out of scope for this drop check; `key` and event handlers
+            // (`onX`) likewise never carry init-scope render values. This
+            // filter set MUST mirror the `propsEntries` filter in the CSR
+            // `component` emit below so the deferral decision matches output.
+            if (p.name === '...' || p.name.startsWith('...') || p.name === 'key') return false
+            if (p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()) return false
+            if (p.clientOnly) return false
+            return propResolvesUnsafe(p, env, unsafeLocalNames)
+          })
+          if (dropped) deferred.add(n.slotId)
+        }
+        // Do not descend into a component's JSX-children props here: those
+        // children render in the parent scope only when hoisted, and the
+        // deferral concern is the direct child component's own props.
+        return
+      }
+      case 'element':
+        n.children.forEach(visit)
+        return
+      case 'fragment':
+        n.children.forEach(visit)
+        return
+      case 'conditional':
+        // Conditional branch children are handled by the branch
+        // materialize path, not the top-level renderChild form.
+        return
+      case 'loop':
+        // Loop children go through the loop materialize path.
+        return
+      default:
+        return
+    }
+  }
+  visit(node)
+  return deferred
 }
 
 function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): string {
@@ -1542,6 +1684,18 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
         return node.children.map(recurse).join('')
       }
 
+      // Deferred child (dropped-prop fix): at least one forwarded prop
+      // resolves to an init-scope-only local the module-scope template
+      // lambda can't supply. Emitting `renderChild('Child', { /* prop
+      // dropped */ })` would make the child template read `undefined` and
+      // throw. Emit a `data-bf-ph` placeholder instead — the parent init
+      // resolves it via `upsertChild` → `createComponent` with the full
+      // getter props (mirrors the `irToPlaceholderTemplate` deferral and
+      // the clientOnly-conditional empty-marker precedent).
+      if (node.slotId && opts.deferredChildSlots?.has(node.slotId)) {
+        return `<div ${DATA_BF_PH}="${node.slotId}"></div>`
+      }
+
       const propsEntries = node.props
         .filter(p => p.name !== '...' && !p.name.startsWith('...') && p.name !== 'key')
         .filter(p => !(p.name.startsWith('on') && p.name.length > 2 && p.name[2] === p.name[2].toUpperCase()))

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

@@ -176,6 +176,7 @@ function createContext(
     loopElements: [],
     refElements: [],
     childInits: [],
+    deferredChildSlots: new Set(),
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],

package/src/ir-to-client-js/phases/provider-and-child-inits.ts

@@ -28,8 +28,19 @@ export function emitProviderAndChildInits(lines: string[], ctx: ClientJsContext)
     lines.push('')
     lines.push(`  // Initialize child components with props`)
     for (const child of ctx.childInits) {
+      const registryName = nameForRegistryRef(child.name)
+      // Deferred child (dropped-prop fix): the registration template emits
+      // a `data-bf-ph` placeholder for this slot rather than rendering it.
+      // `upsertChild` resolves both shapes — an existing SSR scope (→
+      // initChild) or the placeholder (→ createComponent with the full
+      // getter props). Use it so the child is created/initialised with
+      // complete props instead of running against a missing prop.
+      if (child.slotId && ctx.deferredChildSlots.has(child.slotId)) {
+        lines.push(`  upsertChild(__scope, '${registryName}', '${child.slotId}', ${child.propsExpr})`)
+        continue
+      }
       const scopeRef = child.slotId ? `_${varSlotId(child.slotId)}` : '__scope'
-      lines.push(`  initChild('${nameForRegistryRef(child.name)}', ${scopeRef}, ${child.propsExpr})`)
+      lines.push(`  initChild('${registryName}', ${scopeRef}, ${child.propsExpr})`)
     }
   }
 }

package/src/ir-to-client-js/plan/build-static-array-child-init.ts

@@ -8,6 +8,10 @@
  *   2. `outer-nested` for each depth-0 entry in `elem.nestedComponents`.
  *   3. `inner-loop-nested` for each `elem.innerLoops` entry that has
  *      matching depth-N components.
+ *   4. `component-rooted-inner-loop` instead of (3) when the outer item is
+ *      itself a child component (#1725) — the inner `.map()` lives inside
+ *      the component's JSX children, so it's addressed by a document-order
+ *      zip rather than element offsets.
  *
  * Selector / propsExpr / offset decisions all resolve here. The
  * stringifier never inspects raw IR.
@@ -23,6 +27,7 @@ import { buildCompSelector } from '../control-flow/shared'
 /** The inline prop shape carried on `IRLoopChildComponent.props`. */
 type LoopChildCompProp = IRLoopChildComponent['props'][number]
 import type {
+  ComponentRootedInnerLoopInitPlan,
   InnerLoopComp,
   InnerLoopNestedInitPlan,
   OuterNestedInitPlan,
@@ -56,7 +61,16 @@ export function buildStaticArrayChildInitsPlan(
             (c.loopDepth ?? 0) === innerLoop.depth && c.innerLoopArray === innerLoop.array,
           )
           if (innerComps.length === 0) continue
-          plans.push(buildInnerLoopNestedPlan(elem, innerLoop, innerComps))
+          // Component-rooted outer item (#1725): the inner `.map()` lives
+          // inside the child component's JSX children. The element-offset
+          // addressing of `inner-loop-nested` can't reach a fragment-rooted
+          // passthrough's flattened items, so use the document-order zip
+          // shape instead.
+          plans.push(
+            elem.childComponent
+              ? buildComponentRootedInnerLoopPlan(elem, innerLoop, innerComps)
+              : buildInnerLoopNestedPlan(elem, innerLoop, innerComps),
+          )
         }
       }
     }
@@ -134,6 +148,46 @@ function buildInnerLoopNestedPlan(
   }
 }
 
+/**
+ * Build the document-order-zip plan for an inner `.map()` of components living
+ * inside a component-rooted loop item (#1725).
+ *
+ * Known limitation (shared with `inner-loop-nested`): the emitted `forEach`
+ * iterates `innerLoop.array` — the *base* inner array. `NestedLoop` doesn't
+ * carry `filterPredicate` / `sortComparator`, so a `.filter()` / `.sort()` on
+ * the inner `.map()` makes the iteration order diverge from the SSR render
+ * order. `inner-loop-nested` masks this per-group (each group re-indexes
+ * `__ic.children` from 0, so a trailing filtered-out item just reads
+ * `undefined`); the zip's single document-order cursor instead misaligns every
+ * later group. Both are wrong for non-trailing filtered items — filter/sort on
+ * a nested static-array loop is unsupported across this family, not a
+ * regression introduced here.
+ */
+function buildComponentRootedInnerLoopPlan(
+  elem: TopLevelLoop,
+  innerLoop: NestedLoop,
+  innerComps: readonly IRLoopChildComponent[],
+): ComponentRootedInnerLoopInitPlan {
+  const comps: InnerLoopComp[] = innerComps.map(comp => ({
+    componentName: comp.name,
+    selector: buildCompSelector(comp),
+    propsExpr: buildStaticPropsExpr(comp.props),
+  }))
+
+  return {
+    kind: 'component-rooted-inner-loop',
+    containerVar: `_${varSlotId(elem.slotId)}`,
+    outerArrayExpr: elem.array,
+    outerParam: elem.param,
+    outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
+    innerArrayExpr: innerLoop.array,
+    innerParam: innerLoop.param,
+    innerPreludeStatements: innerLoop.mapPreamble ? [innerLoop.mapPreamble] : [],
+    depth: innerLoop.depth,
+    comps,
+  }
+}
+
 /**
  * Build the props object expression used by static-array child inits.
  *

package/src/ir-to-client-js/plan/static-array-child-init.ts

@@ -1,5 +1,5 @@
 /**
- * Plan types for `emitStaticArrayChildInits` — the three shapes that
+ * Plan types for `emitStaticArrayChildInits` — the shapes that
  * `static array` loops emit for child component initialisation:
  *
  *   - `single-comp`        — `loop.childComponent` ケース。一つの child component
@@ -8,6 +8,13 @@
  *                            `__iterEl.querySelector(...)` 経由で initChild。
  *   - `inner-loop-nested`  — depth > 0 の `nestedComponents`。outer + inner
  *                            forEach の二重ループで initChild。
+ *   - `component-rooted-inner-loop`
+ *                          — outer の loop item root が **child component**
+ *                            (`loop.childComponent`) で、その JSX children に
+ *                            component の nested `.map()` を持つケース (#1725)。
+ *                            element offset では fragment-root passthrough の
+ *                            flatten 済み items に届かないため、document order
+ *                            の zip (`qsaChildScopes` + cursor) で initChild。
  *
  * All decisions (selector, propsExpr, offset expressions) are resolved at
  * build time so the stringifier becomes a deterministic walk.
@@ -129,9 +136,48 @@ export interface InnerLoopNestedInitPlan {
   comps: readonly InnerLoopComp[]
 }
 
+/**
+ * Plan for an inner `.map()` of components living inside a **component-rooted**
+ * outer loop item (#1725). The outer loop body is a single child component
+ * (`loop.childComponent`, e.g. a `SelectGroup` passthrough) whose JSX
+ * `children` contain a nested `.map()` of components (e.g. `SelectItem`).
+ *
+ * `inner-loop-nested` can't be reused here: it addresses inner components via
+ * `containerVar.children[outerOffset]`, which assumes the outer loop item is a
+ * DOM **element**. A fragment-rooted passthrough component (`<>{children}</>`)
+ * emits no wrapper element, so its rendered items are flattened directly under
+ * the parent container with no per-group element to index.
+ *
+ * Instead this shape zips the inner component scopes — found in document order
+ * via `qsaChildScopes(container, <selector>)` — against the flattened
+ * `outer.forEach(o => inner.forEach(i => ...))` iteration. Document order is
+ * the SSR render order, so position `__ci++` pairs each scope with its data
+ * item regardless of whether the outer component root is an element or a
+ * fragment.
+ */
+export interface ComponentRootedInnerLoopInitPlan {
+  kind: 'component-rooted-inner-loop'
+  containerVar: string
+  /** Outer loop's array expression. */
+  outerArrayExpr: string
+  outerParam: string
+  /** Outer `.map()` callback preamble locals (#1064). */
+  outerPreludeStatements: PreludeStatements
+  /** Inner loop's array expression (references the outer param). */
+  innerArrayExpr: string
+  innerParam: string
+  /** Inner `.map()` callback preamble locals (#1064). */
+  innerPreludeStatements: PreludeStatements
+  /** Depth used in the leading comment line. */
+  depth: number
+  /** Per-component initialisers emitted inside the inner forEach body. */
+  comps: readonly InnerLoopComp[]
+}
+
 export type StaticArrayChildInitPlan =
   | SingleCompInitPlan
   | OuterNestedInitPlan
   | InnerLoopNestedInitPlan
+  | ComponentRootedInnerLoopInitPlan
 
 export type StaticArrayChildInitsPlan = readonly StaticArrayChildInitPlan[]

package/src/ir-to-client-js/stringify/static-array-child-init.ts

@@ -50,6 +50,7 @@
  */
 
 import type {
+  ComponentRootedInnerLoopInitPlan,
   InnerLoopNestedInitPlan,
   OuterNestedInitPlan,
   SingleCompInitPlan,
@@ -78,6 +79,9 @@ function stringifyOne(lines: string[], plan: StaticArrayChildInitPlan): void {
     case 'inner-loop-nested':
       emitInnerLoopNested(lines, plan)
       break
+    case 'component-rooted-inner-loop':
+      emitComponentRootedInnerLoop(lines, plan)
+      break
   }
 }
 
@@ -174,3 +178,68 @@ function emitInnerLoopNested(lines: string[], plan: InnerLoopNestedInitPlan): vo
   lines.push(`  }`)
   lines.push('')
 }
+
+/**
+ * Emit shape for `component-rooted-inner-loop` (#1725):
+ *
+ *   <i>// Initialize component-rooted inner-loop components (depth N)
+ *   <i>if (<container>) {
+ *   <i>  const <scopes_c> = qsaChildScopes(<container>, <selector_c>)   // per comp
+ *   <i>  let <cursor_c> = 0
+ *   <i>  <outerArr>.forEach((<outerParam>) => {
+ *   <i>    <outerPreludeStatements*>
+ *   <i>    <innerArr>.forEach((<innerParam>) => {
+ *   <i>      <innerPreludeStatements*>
+ *   <i>      const <compEl_c> = <scopes_c>[<cursor_c>++]              // per comp
+ *   <i>      if (<compEl_c>) initChild('<name>', <compEl_c>, <props>)
+ *   <i>    })
+ *   <i>  })
+ *   <i>}
+ *
+ * The scopes are queried once over the whole container and consumed in
+ * document order by a per-component cursor, so the SSR render order
+ * (outer-then-inner, depth-first) pairs each scope with its data item
+ * whether the outer component root is an element or a fragment.
+ */
+function emitComponentRootedInnerLoop(lines: string[], plan: ComponentRootedInnerLoopInitPlan): void {
+  const {
+    containerVar,
+    outerArrayExpr,
+    outerParam,
+    outerPreludeStatements,
+    innerArrayExpr,
+    innerParam,
+    innerPreludeStatements,
+    depth,
+    comps,
+  } = plan
+  // A single comp uses the bare `__compScopes` / `__ci` names; multiple
+  // comps (e.g. `{items.map(it => <><A/><B/></>)}`) get index suffixes so
+  // each keeps its own document-order cursor.
+  const scopesVar = (i: number) => (comps.length > 1 ? `__compScopes${i}` : '__compScopes')
+  const cursorVar = (i: number) => (comps.length > 1 ? `__ci${i}` : '__ci')
+  const compElVar = (i: number) => (comps.length > 1 ? `__compEl${i}` : '__compEl')
+
+  lines.push(`  // Initialize component-rooted inner-loop components (depth ${depth})`)
+  lines.push(`  if (${containerVar}) {`)
+  comps.forEach((comp, i) => {
+    lines.push(`    const ${scopesVar(i)} = qsaChildScopes(${containerVar}, ${comp.selector})`)
+    lines.push(`    let ${cursorVar(i)} = 0`)
+  })
+  lines.push(`    ${outerArrayExpr}.forEach((${outerParam}) => {`)
+  for (const stmt of outerPreludeStatements) {
+    lines.push(`      ${stmt}`)
+  }
+  lines.push(`      ${innerArrayExpr}.forEach((${innerParam}) => {`)
+  for (const stmt of innerPreludeStatements) {
+    lines.push(`        ${stmt}`)
+  }
+  comps.forEach((comp, i) => {
+    lines.push(`        const ${compElVar(i)} = ${scopesVar(i)}[${cursorVar(i)}++]`)
+    lines.push(`        if (${compElVar(i)}) initChild('${nameForRegistryRef(comp.componentName)}', ${compElVar(i)}, ${comp.propsExpr})`)
+  })
+  lines.push(`      })`)
+  lines.push(`    })`)
+  lines.push(`  }`)
+  lines.push('')
+}

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

@@ -59,6 +59,16 @@ export interface ClientJsContext {
   loopElements: TopLevelLoop[]
   refElements: RefElement[]
   childInits: ChildInit[]
+  /**
+   * Slot ids of direct child components whose render is DEFERRED to init
+   * (dropped-prop fix). For these, the CSR registration template emits a
+   * `data-bf-ph` placeholder instead of `renderChild(...)`, and the init
+   * body uses `upsertChild` (→ `createComponent` with full getter props)
+   * instead of `initChild`. Computed in `generateInitFunction` once
+   * `unsafeLocalNames` is known, then read by the child-init phase and the
+   * registration-template emit so both agree on which children defer.
+   */
+  deferredChildSlots: Set<string>
   reactiveProps: ReactiveComponentProp[]
   reactiveChildProps: ReactiveChildProp[]
   reactiveAttrs: ReactiveAttribute[]