@barefootjs/jsx 0.6.0 → 0.7.0

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)
@@ -847,9 +853,26 @@ function collectFromElement(element: IRElement, ctx: ClientJsContext, insideCond
         const elemRestName = ctx.restPropsName
         const elemPropsObjName = ctx.propsObjectName
         if (spreadVal && (spreadVal === elemRestName || spreadVal === elemPropsObjName)) {
-          const excludeKeys = element.attrs
+          // `applyRestAttrs(_el, _p, exclude)` is handed the FULL props
+          // object (`PROPS_PARAM`), not a computed JS rest binding, and the
+          // runtime filters by SOURCE KEY (`source[key]`). So `exclude` must
+          // list every prop the component already consumed, keyed the way it
+          // arrives on `_p`. For the destructured `...rest` form that set is
+          // exactly the destructured param names (the JS rest-exclusion set):
+          // it covers every statically/reactively bound attr AND the
+          // separately-wired event/ref handlers. Without it, applyRestAttrs
+          // re-binds those events (double-fire) and re-emits consumed-but-
+          // unbound props under their raw key (e.g. `error` → `error="…"`,
+          // `describedBy` → `describedBy="…"`). The element-attr-name list
+          // alone was wrong on both counts — it keys on HTML attr names
+          // (`aria-invalid` ≠ source key `error`) and omits event handlers.
+          // (#1467)
+          const consumedKeys =
+            spreadVal === elemRestName ? ctx.propsParams.map(p => p.name) : []
+          const staticAttrKeys = element.attrs
             .filter(a => a.name !== '...')
             .map(a => a.name)
+          const excludeKeys = [...new Set([...consumedKeys, ...staticAttrKeys])]
           ctx.restAttrElements.push({
             slotId: element.slotId,
             source: PROPS_PARAM,

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

@@ -550,6 +550,13 @@ export interface RestAttrElement {
   slotId: string
   /** The spread source expression (e.g., 'rest', 'props') */
   source: string
-  /** Attribute names already statically set on the element (exclude from applyRestAttrs) */
+  /**
+   * Prop SOURCE KEYS already consumed by the component (exclude from
+   * applyRestAttrs). For the destructured `...rest` form this is the
+   * destructured param names (the JS rest-exclusion set) unioned with any
+   * statically-set attr names; applyRestAttrs filters `source[key]` by these
+   * so it neither re-binds separately-wired events nor re-emits consumed
+   * props under their raw key. See collect-elements.ts for the rationale.
+   */
   excludeKeys: string[]
 }

package/src/jsx-to-ir.ts

@@ -1050,6 +1050,7 @@ function transformComponentElement(
     children,
     template: name.toLowerCase(),
     slotId,
+    ...(isDynamicTagLocal(name, ctx) ? { dynamicTag: true } : {}),
     loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath),
   }
 }
@@ -1079,6 +1080,7 @@ function transformSelfClosingComponent(
     children: [],
     template: name.toLowerCase(),
     slotId,
+    ...(isDynamicTagLocal(name, ctx) ? { dynamicTag: true } : {}),
     loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath),
   }
 }
@@ -3959,6 +3961,73 @@ function findLocalConst(name: string, ctx: TransformContext) {
   return pool[pool.length - 1]
 }
 
+/**
+ * Detect a PascalCase JSX tag that is really a *dynamic tag* local
+ * (`const Tag = children.tag`) rather than a component reference.
+ *
+ * Such a "component" has no registrable template — the tag is chosen at
+ * runtime. The Go template adapter consumes the resulting `dynamicTag`
+ * flag to lower the node to a children passthrough so its dead branch
+ * registers cleanly (Hono/CSR/Mojo ignore the flag).
+ *
+ * A name qualifies only when (a) a `const <name> = <expr>.tag` binding
+ * exists somewhere in the source — at any nesting depth, since the
+ * canonical pattern lives inside an `if (isValidElement(children)) {…}`
+ * block and never reaches the analyzer's `localConstants` (which only
+ * collects component-body-level bindings) — AND (b) the name is NOT a
+ * JSX-producing local (those are tracked in the analyzer's jsx* /
+ * inlineable sets). The `.tag` initializer check already excludes real
+ * imported components (their binding is an import, not a `.tag` const)
+ * and local component factories like `const Foo = () => <div/>` (an
+ * arrow initializer, not a `.tag` access); the jsx* guards are a
+ * belt-and-suspenders second line. Each set is guarded defensively in
+ * case it is absent on a given analyzer context.
+ */
+function isDynamicTagLocal(name: string, ctx: TransformContext): boolean {
+  if (!hasDynamicTagBinding(name, ctx.sourceFile)) return false
+  const a = ctx.analyzer
+  if (a.jsxConstants?.has(name)) return false
+  if (a.jsxFunctions?.has(name)) return false
+  if (a.jsxMultiReturnFunctions?.has(name)) return false
+  if (a.inlineableJsxConsts?.has(name)) return false
+  return true
+}
+
+/**
+ * True when the source contains a `const <name> = <expr>.tag` (the
+ * dynamic-tag pattern), at any nesting depth. The initializer may be
+ * wrapped in an `as`/`satisfies`/parenthesized cast (`children.tag as any`).
+ */
+function hasDynamicTagBinding(name: string, sourceFile: ts.SourceFile): boolean {
+  let found = false
+  const visit = (node: ts.Node): void => {
+    if (found) return
+    if (
+      ts.isVariableDeclaration(node) &&
+      ts.isIdentifier(node.name) &&
+      node.name.text === name &&
+      node.initializer
+    ) {
+      let init: ts.Expression = node.initializer
+      while (
+        ts.isAsExpression(init) ||
+        ts.isSatisfiesExpression(init) ||
+        ts.isParenthesizedExpression(init) ||
+        ts.isNonNullExpression(init)
+      ) {
+        init = init.expression
+      }
+      if (ts.isPropertyAccessExpression(init) && init.name.text === 'tag') {
+        found = true
+        return
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+  return found
+}
+
 /**
  * Resolve a `className={ident}` reference where `ident` is a local
  * const bound to a template literal — typically the cva-style pattern

package/src/types.ts

@@ -674,6 +674,15 @@ export interface IRComponent {
   children: IRNode[]
   template: string // Reference to partial
   slotId: string | null // For components with event handlers
+  /**
+   * True when `name` is a dynamic-tag local (`const Tag = children.tag`)
+   * rather than a real component reference. Such a "component" has no
+   * registrable template — it is a runtime-chosen tag. Consumed ONLY by
+   * the Go template adapter, which lowers it to a children passthrough so
+   * the dead branch registers cleanly (Hono/CSR/Mojo ignore this flag).
+   * Omitted (undefined) for ordinary components to keep IR diffs minimal.
+   */
+  dynamicTag?: boolean
   loc: SourceLocation
 }