@barefootjs/jsx 0.6.0 → 0.6.1

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/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('')
+}