@barefootjs/jsx 0.6.0 → 0.6.1

package/dist/index.js

@@ -5339,7 +5339,6 @@ var UNSUPPORTED_METHODS = new Set([
   "some",
   "forEach",
   "flatMap",
-  "flat",
   "replaceAll",
   "charAt",
   "charCodeAt",
@@ -5351,6 +5350,9 @@ var UNSUPPORTED_METHODS = new Set([
   "matchAll",
   "search"
 ]);
+var UNSUPPORTED_METHOD_REASONS = {
+  forEach: `'.forEach()' returns undefined and has no template-position meaning. ` + `Use it for side effects inside an event handler or createEffect callback ` + `(client JS), or use '.map(...)' if you meant to render each item.`
+};
 var LOWERED_ARRAY_METHODS = new Set([
   "includes",
   "indexOf",
@@ -5438,6 +5440,32 @@ function convertNode(node, raw) {
       if (callee.property === "reverse" || callee.property === "toReversed") {
         return { kind: "array-method", method: callee.property, object: callee.object, args };
       }
+      if (callee.property === "flat") {
+        const depthNode = node.arguments[0];
+        let flatDepth;
+        if (depthNode === undefined) {
+          flatDepth = 1;
+        } else if (ts8.isIdentifier(depthNode) && depthNode.text === "Infinity") {
+          flatDepth = "infinity";
+        } else {
+          let n;
+          if (ts8.isNumericLiteral(depthNode)) {
+            n = Number(depthNode.text);
+          } else if (ts8.isPrefixUnaryExpression(depthNode) && depthNode.operator === ts8.SyntaxKind.MinusToken && ts8.isNumericLiteral(depthNode.operand)) {
+            n = -Number(depthNode.operand.text);
+          }
+          if (n === undefined || Number.isNaN(n)) {
+            return {
+              kind: "unsupported",
+              raw,
+              reason: `\`.flat(depth)\` needs a literal integer or \`Infinity\` depth — a computed depth can't be resolved at template time. Use a literal depth, or pre-compute the value before the template.`
+            };
+          }
+          const truncated = Math.trunc(n);
+          flatDepth = truncated < 0 ? 0 : truncated;
+        }
+        return { kind: "array-method", method: "flat", object: callee.object, args: [], flatDepth };
+      }
       if (callee.property === "toLowerCase") {
         return { kind: "array-method", method: "toLowerCase", object: callee.object, args };
       }
@@ -5521,6 +5549,50 @@ function convertNode(node, raw) {
 ` + `(reverse the operands for descending order). ` + `Wrap the call in /* @client */ to evaluate at hydration.`
         };
       }
+      if ((callee.property === "reduce" || callee.property === "reduceRight") && node.arguments.length === 2) {
+        const reduceOp = extractReduceOpFromTS(node.arguments[0], node.arguments[1]);
+        if (reduceOp) {
+          return {
+            kind: "array-method",
+            method: callee.property,
+            object: callee.object,
+            args: [],
+            reduceOp
+          };
+        }
+        const m = callee.property;
+        return {
+          kind: "unsupported",
+          raw,
+          reason: `Reduce shape not supported. Accepted (arithmetic fold, explicit init):
+` + `  arr.${m}((acc, x) => acc + x, 0)
+` + `  arr.${m}((acc, x) => acc + x.field, 0)
+` + `  arr.${m}((acc, x) => acc * x.field, 1)
+` + `  arr.${m}((acc, x) => acc + x.field, '')   (string concat)
+` + `The accumulator must be the left operand and the initial ` + `value a number / string literal. ` + `Wrap the call in /* @client */ to evaluate at hydration.`
+        };
+      }
+      if (callee.property === "flatMap") {
+        const flatMapOp = node.arguments.length === 1 ? extractFlatMapOpFromTS(node.arguments[0]) : null;
+        if (flatMapOp) {
+          return {
+            kind: "array-method",
+            method: "flatMap",
+            object: callee.object,
+            args: [],
+            flatMapOp
+          };
+        }
+        return {
+          kind: "unsupported",
+          raw,
+          reason: `flatMap shape not supported. Accepted (self / field leaves, no thisArg):
+` + `  arr.flatMap(i => i)          (flatten one level)
+` + `  arr.flatMap(i => i.field)    (flatten a per-item array field)
+` + `  arr.flatMap(i => [i.a, i.b]) (gather per-item fields)
+` + `Richer callbacks (computed / nested access, arithmetic, calls, ` + `literal elements) and the 2-arg \`flatMap(fn, thisArg)\` form ` + `aren't lowered. Wrap the call in /* @client */ to evaluate at hydration.`
+        };
+      }
     }
     return { kind: "call", callee, args };
   }
@@ -5839,6 +5911,119 @@ function classifySortOperand(expr, paramA, paramB) {
   }
   return null;
 }
+function extractReduceOpFromTS(reducerNode, initNode) {
+  const init = classifyReduceInit(initNode);
+  if (!init)
+    return null;
+  if (!ts8.isArrowFunction(reducerNode) && !ts8.isFunctionExpression(reducerNode))
+    return null;
+  if (reducerNode.parameters.length !== 2)
+    return null;
+  const pAcc = reducerNode.parameters[0];
+  const pItem = reducerNode.parameters[1];
+  if (!ts8.isIdentifier(pAcc.name) || !ts8.isIdentifier(pItem.name))
+    return null;
+  const paramAcc = pAcc.name.text;
+  const paramItem = pItem.name.text;
+  let body;
+  if (ts8.isArrowFunction(reducerNode) && !ts8.isBlock(reducerNode.body)) {
+    body = reducerNode.body;
+  } else {
+    const block = reducerNode.body;
+    const stmts = block.statements;
+    if (stmts.length !== 1 || !ts8.isReturnStatement(stmts[0]) || !stmts[0].expression)
+      return null;
+    body = stmts[0].expression;
+  }
+  const raw = body.getText();
+  const expr = unwrapParens(body);
+  if (!ts8.isBinaryExpression(expr))
+    return null;
+  let op;
+  if (expr.operatorToken.kind === ts8.SyntaxKind.PlusToken)
+    op = "+";
+  else if (expr.operatorToken.kind === ts8.SyntaxKind.AsteriskToken)
+    op = "*";
+  else
+    return null;
+  const left = unwrapParens(expr.left);
+  if (!ts8.isIdentifier(left) || left.text !== paramAcc)
+    return null;
+  const key = classifyReduceKey(unwrapParens(expr.right), paramItem);
+  if (!key)
+    return null;
+  const type = init.type;
+  if (type === "string" && op !== "+")
+    return null;
+  return { op, key, type, init: init.value, raw, paramAcc, paramItem };
+}
+function extractFlatMapOpFromTS(cbNode) {
+  if (!ts8.isArrowFunction(cbNode) && !ts8.isFunctionExpression(cbNode))
+    return null;
+  if (cbNode.parameters.length !== 1)
+    return null;
+  const p = cbNode.parameters[0];
+  if (!ts8.isIdentifier(p.name))
+    return null;
+  const param = p.name.text;
+  let body;
+  if (ts8.isArrowFunction(cbNode) && !ts8.isBlock(cbNode.body)) {
+    body = cbNode.body;
+  } else {
+    const block = cbNode.body;
+    const stmts = block.statements;
+    if (stmts.length !== 1 || !ts8.isReturnStatement(stmts[0]) || !stmts[0].expression)
+      return null;
+    body = stmts[0].expression;
+  }
+  const raw = body.getText();
+  const inner = unwrapParens(body);
+  if (ts8.isArrayLiteralExpression(inner)) {
+    if (inner.elements.length === 0)
+      return null;
+    const elements = [];
+    for (const el of inner.elements) {
+      if (ts8.isSpreadElement(el) || ts8.isOmittedExpression(el))
+        return null;
+      const leaf2 = classifyReduceKey(unwrapParens(el), param);
+      if (!leaf2)
+        return null;
+      elements.push(leaf2);
+    }
+    return { projection: { kind: "tuple", elements }, param, raw };
+  }
+  const leaf = classifyReduceKey(inner, param);
+  if (!leaf)
+    return null;
+  return { projection: leaf, param, raw };
+}
+function classifyReduceKey(expr, paramItem) {
+  if (ts8.isIdentifier(expr)) {
+    return expr.text === paramItem ? { kind: "self" } : null;
+  }
+  if (ts8.isPropertyAccessExpression(expr) && ts8.isIdentifier(expr.expression)) {
+    if (expr.expression.text === paramItem)
+      return { kind: "field", field: expr.name.text };
+  }
+  return null;
+}
+function classifyReduceInit(node) {
+  let n = unwrapParens(node);
+  if (ts8.isPrefixUnaryExpression(n) && n.operator === ts8.SyntaxKind.MinusToken) {
+    if (ts8.isNumericLiteral(n.operand))
+      return { type: "numeric", value: "-" + n.operand.text };
+    return null;
+  }
+  if (ts8.isNumericLiteral(n))
+    return { type: "numeric", value: n.text };
+  if (ts8.isStringLiteral(n)) {
+    const raw = n.getText();
+    if (raw.length < 2 || raw.slice(1, -1) !== n.text)
+      return null;
+    return { type: "string", value: n.text };
+  }
+  return null;
+}
 function collectDestructureBindings(pattern, pathPrefix, fieldMap, raw, excludedTopKeys) {
   let restName;
   for (const el of pattern.elements) {
@@ -6147,6 +6332,15 @@ function substituteDestructuredFields(expr, fieldMap, syntheticParam, restName)
         if (e.method === "sort" || e.method === "toSorted") {
           return { kind: "array-method", method: e.method, object: walk(e.object), args: [], comparator: e.comparator };
         }
+        if (e.method === "reduce" || e.method === "reduceRight") {
+          return { kind: "array-method", method: e.method, object: walk(e.object), args: [], reduceOp: e.reduceOp };
+        }
+        if (e.method === "flat") {
+          return { kind: "array-method", method: "flat", object: walk(e.object), args: [], flatDepth: e.flatDepth };
+        }
+        if (e.method === "flatMap") {
+          return { kind: "array-method", method: "flatMap", object: walk(e.object), args: [], flatMapOp: e.flatMapOp };
+        }
         return { kind: "array-method", method: e.method, object: walk(e.object), args: e.args.map(walk) };
       case "literal":
       case "unsupported":
@@ -6267,7 +6461,8 @@ function checkSupport(expr) {
           return {
             supported: false,
             level: "L5_UNSUPPORTED",
-            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.`
+            selfContained: true,
+            reason: UNSUPPORTED_METHOD_REASONS[methodName] ?? `'${methodName}()' can't render on the server. Pre-compute the value, or add /* @client */ for client-only (no SSR).`
           };
         }
       }
@@ -6491,6 +6686,20 @@ function exprToString(expr) {
         const { paramA, paramB, raw } = expr.comparator;
         return `${exprToString(expr.object)}.${expr.method}((${paramA},${paramB}) => ${raw})`;
       }
+      if (expr.method === "reduce" || expr.method === "reduceRight") {
+        const { paramAcc, paramItem, raw, type, init } = expr.reduceOp;
+        const initSrc = type === "string" ? JSON.stringify(init) : init;
+        return `${exprToString(expr.object)}.${expr.method}((${paramAcc},${paramItem}) => ${raw}, ${initSrc})`;
+      }
+      if (expr.method === "flat") {
+        const d = expr.flatDepth;
+        const depthSrc = d === "infinity" ? "Infinity" : String(d);
+        return `${exprToString(expr.object)}.flat(${d === 1 ? "" : depthSrc})`;
+      }
+      if (expr.method === "flatMap") {
+        const { param, raw } = expr.flatMapOp;
+        return `${exprToString(expr.object)}.flatMap(${param} => ${raw})`;
+      }
       return `${exprToString(expr.object)}.${expr.method}(${expr.args.map(exprToString).join(", ")})`;
     case "unsupported":
       return `[UNSUPPORTED: ${expr.raw}]`;
@@ -6536,6 +6745,20 @@ function stringifyParsedExpr(expr) {
         const { paramA, paramB, raw } = expr.comparator;
         return `${stringifyParsedExpr(expr.object)}.${expr.method}((${paramA},${paramB}) => ${raw})`;
       }
+      if (expr.method === "reduce" || expr.method === "reduceRight") {
+        const { paramAcc, paramItem, raw, type, init } = expr.reduceOp;
+        const initSrc = type === "string" ? JSON.stringify(init) : init;
+        return `${stringifyParsedExpr(expr.object)}.${expr.method}((${paramAcc},${paramItem}) => ${raw}, ${initSrc})`;
+      }
+      if (expr.method === "flat") {
+        const d = expr.flatDepth;
+        const depthSrc = d === "infinity" ? "Infinity" : String(d);
+        return `${stringifyParsedExpr(expr.object)}.flat(${d === 1 ? "" : depthSrc})`;
+      }
+      if (expr.method === "flatMap") {
+        const { param, raw } = expr.flatMapOp;
+        return `${stringifyParsedExpr(expr.object)}.flatMap(${param} => ${raw})`;
+      }
       return `${stringifyParsedExpr(expr.object)}.${expr.method}(${expr.args.map(stringifyParsedExpr).join(", ")})`;
     case "unsupported":
       return expr.raw;
@@ -10072,7 +10295,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
 }
 function decideLoopRendering(loop, siblingOffsets, ctx) {
   const hasNestedComps = (loop.nestedComponents?.length ?? 0) > 0;
-  const innerLoops = !loop.childComponent ? collectInnerLoops(loop.children, siblingOffsets, loop.param, ctx) : undefined;
+  const innerLoops = collectInnerLoops(loop.children, siblingOffsets, loop.param, ctx);
   const hasInnerLoops = (innerLoops?.length ?? 0) > 0;
   const useElementReconciliation = !loop.childComponent && !loop.isStaticArray && (hasNestedComps || hasInnerLoops);
   return { useElementReconciliation, innerLoops };
@@ -12888,7 +13111,7 @@ function buildStaticArrayChildInitsPlan(ctx) {
           const innerComps = elem.nestedComponents.filter((c) => (c.loopDepth ?? 0) === innerLoop.depth && c.innerLoopArray === innerLoop.array);
           if (innerComps.length === 0)
             continue;
-          plans.push(buildInnerLoopNestedPlan(elem, innerLoop, innerComps));
+          plans.push(elem.childComponent ? buildComponentRootedInnerLoopPlan(elem, innerLoop, innerComps) : buildInnerLoopNestedPlan(elem, innerLoop, innerComps));
         }
       }
     }
@@ -12949,6 +13172,25 @@ function buildInnerLoopNestedPlan(elem, innerLoop, innerComps) {
     comps
   };
 }
+function buildComponentRootedInnerLoopPlan(elem, innerLoop, innerComps) {
+  const comps = 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
+  };
+}
 function buildStaticPropsExpr(props) {
   const entries = props.map((p) => {
     if (p.isEventHandler) {
@@ -12988,6 +13230,9 @@ function stringifyOne(lines, plan) {
     case "inner-loop-nested":
       emitInnerLoopNested(lines, plan);
       break;
+    case "component-rooted-inner-loop":
+      emitComponentRootedInnerLoop(lines, plan);
+      break;
   }
 }
 function emitSingleComp(lines, plan) {
@@ -13067,6 +13312,44 @@ function emitInnerLoopNested(lines, plan) {
   lines.push(`  }`);
   lines.push("");
 }
+function emitComponentRootedInnerLoop(lines, plan) {
+  const {
+    containerVar,
+    outerArrayExpr,
+    outerParam,
+    outerPreludeStatements,
+    innerArrayExpr,
+    innerParam,
+    innerPreludeStatements,
+    depth,
+    comps
+  } = plan;
+  const scopesVar = (i) => comps.length > 1 ? `__compScopes${i}` : "__compScopes";
+  const cursorVar = (i) => comps.length > 1 ? `__ci${i}` : "__ci";
+  const compElVar = (i) => 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("");
+}
 
 // src/ir-to-client-js/phases/static-array-child-inits.ts
 function emitStaticArrayChildInits(lines, ctx) {
@@ -17345,6 +17628,15 @@ function emitParsedExpr(expr, emitter) {
       if (expr.method === "sort" || expr.method === "toSorted") {
         return emitter.sortMethod(expr.method, expr.object, expr.comparator, emit);
       }
+      if (expr.method === "reduce" || expr.method === "reduceRight") {
+        return emitter.reduceMethod(expr.method, expr.object, expr.reduceOp, emit);
+      }
+      if (expr.method === "flat") {
+        return emitter.flatMethod(expr.object, expr.flatDepth, emit);
+      }
+      if (expr.method === "flatMap") {
+        return emitter.flatMapMethod(expr.object, expr.flatMapOp, emit);
+      }
       return emitter.arrayMethod(expr.method, expr.object, expr.args, emit);
     case "unsupported":
       return emitter.unsupported(expr.raw, expr.reason);

package/dist/ir-to-client-js/collect-elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collect-elements.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/collect-elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,MAAM,EAAoC,KAAK,MAAM,EAAmC,MAAM,UAAU,CAAA;AACtH,OAAO,KAAK,EAAE,eAAe,EAA+H,iBAAiB,EAA0B,oBAAoB,EAAc,UAAU,EAAE,MAAM,SAAS,CAAA;AAwGpQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CA0C7E;AAyBD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,wBAIpC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EAAE,EACf,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,cAAc,CAAC,EAAE,MAAM,EACvB,GAAG,CAAC,EAAE,eAAe,EACrB,OAAO,CAAC,EAAE,wBAAwB,GACjC,UAAU,EAAE,CAyId;AA+JD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,iBAAiB,UAAQ,GACxB,IAAI,CAsON;AA6VD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,SAAS,MAAM,EAAE,EAC3B,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,EAAE,MAAM,EACjB,iBAAiB,EAAE,SAAS,OAAO,UAAU,EAAE,gBAAgB,EAAE,GAAG,SAAS,GAC5E,iBAAiB,CAUnB;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,CAAC,EAAE,MAAM,EAClB,iBAAiB,CAAC,EAAE,SAAS,OAAO,UAAU,EAAE,gBAAgB,EAAE,GACjE,oBAAoB,EAAE,CA4DxB"}
+{"version":3,"file":"collect-elements.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/collect-elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,MAAM,EAAoC,KAAK,MAAM,EAAmC,MAAM,UAAU,CAAA;AACtH,OAAO,KAAK,EAAE,eAAe,EAA+H,iBAAiB,EAA0B,oBAAoB,EAAc,UAAU,EAAE,MAAM,SAAS,CAAA;AAwGpQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CA0C7E;AAyBD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,wBAIpC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EAAE,EACf,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,cAAc,CAAC,EAAE,MAAM,EACvB,GAAG,CAAC,EAAE,eAAe,EACrB,OAAO,CAAC,EAAE,wBAAwB,GACjC,UAAU,EAAE,CAyId;AAqKD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,iBAAiB,UAAQ,GACxB,IAAI,CAsON;AA6VD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,SAAS,MAAM,EAAE,EAC3B,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,EAAE,MAAM,EACjB,iBAAiB,EAAE,SAAS,OAAO,UAAU,EAAE,gBAAgB,EAAE,GAAG,SAAS,GAC5E,iBAAiB,CAUnB;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,CAAC,EAAE,MAAM,EAClB,iBAAiB,CAAC,EAAE,SAAS,OAAO,UAAU,EAAE,gBAAgB,EAAE,GACjE,oBAAoB,EAAE,CA4DxB"}

package/dist/ir-to-client-js/plan/build-static-array-child-init.d.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.

package/dist/ir-to-client-js/plan/build-static-array-child-init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-static-array-child-init.d.ts","sourceRoot":"","sources":["../../../src/ir-to-client-js/plan/build-static-array-child-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAO/C,OAAO,KAAK,EAOV,yBAAyB,EAC1B,MAAM,2BAA2B,CAAA;AAElC,wBAAgB,8BAA8B,CAC5C,GAAG,EAAE,eAAe,GACnB,yBAAyB,CA6B3B"}
+{"version":3,"file":"build-static-array-child-init.d.ts","sourceRoot":"","sources":["../../../src/ir-to-client-js/plan/build-static-array-child-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAO/C,OAAO,KAAK,EAQV,yBAAyB,EAC1B,MAAM,2BAA2B,CAAA;AAElC,wBAAgB,8BAA8B,CAC5C,GAAG,EAAE,eAAe,GACnB,yBAAyB,CAsC3B"}

package/dist/ir-to-client-js/plan/static-array-child-init.d.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.
@@ -122,6 +129,43 @@ export interface InnerLoopNestedInitPlan {
     /** Per-component initialisers emitted inside the inner forEach body. */
     comps: readonly InnerLoopComp[];
 }
-export type StaticArrayChildInitPlan = SingleCompInitPlan | OuterNestedInitPlan | InnerLoopNestedInitPlan;
+/**
+ * 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[];
 //# sourceMappingURL=static-array-child-init.d.ts.map

package/dist/ir-to-client-js/plan/static-array-child-init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"static-array-child-init.d.ts","sourceRoot":"","sources":["../../../src/ir-to-client-js/plan/static-array-child-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAExE,gEAAgE;AAChE,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAE9B,sEAAsE;AACtE,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,6EAA6E;AAC7E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAA;IACnB,+DAA+D;IAC/D,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAA;IACjB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,UAAU,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,sBAAsB,EAAE,iBAAiB,CAAA;IACzC,iEAAiE;IACjE,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,qEAAqE;AACrE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,cAAc,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,+FAA+F;IAC/F,UAAU,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,sBAAsB,EAAE,iBAAiB,CAAA;IACzC,SAAS,EAAE,SAAS,CAAA;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,mBAAmB,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,qCAAqC;IACrC,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,eAAe,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,sBAAsB,EAAE,iBAAiB,CAAA;IACzC;;;;OAIG;IACH,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,iEAAiE;IACjE,eAAe,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,sBAAsB,EAAE,iBAAiB,CAAA;IACzC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;CAChC;AAED,MAAM,MAAM,wBAAwB,GAChC,kBAAkB,GAClB,mBAAmB,GACnB,uBAAuB,CAAA;AAE3B,MAAM,MAAM,yBAAyB,GAAG,SAAS,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"static-array-child-init.d.ts","sourceRoot":"","sources":["../../../src/ir-to-client-js/plan/static-array-child-init.ts"],"names":[],"mappings":"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"}

package/dist/ir-to-client-js/stringify/static-array-child-init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"static-array-child-init.d.ts","sourceRoot":"","sources":["../../../src/ir-to-client-js/stringify/static-array-child-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,OAAO,KAAK,EAKV,yBAAyB,EAC1B,MAAM,iCAAiC,CAAA;AAGxC,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,MAAM,EAAE,EACf,KAAK,EAAE,yBAAyB,GAC/B,IAAI,CAIN"}
+{"version":3,"file":"static-array-child-init.d.ts","sourceRoot":"","sources":["../../../src/ir-to-client-js/stringify/static-array-child-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,OAAO,KAAK,EAMV,yBAAyB,EAC1B,MAAM,iCAAiC,CAAA;AAGxC,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,MAAM,EAAE,EACf,KAAK,EAAE,yBAAyB,GAC/B,IAAI,CAIN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.6.0"
+    "@barefootjs/shared": "0.6.1"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

package/src/__tests__/child-components-in-map.test.ts

@@ -1181,4 +1181,88 @@ describe('child components inside .map() (#344)', () => {
     expect(content).toContain('const __compEl =')
     expect(content).not.toContain('__compEl0')
   })
+
+  describe('nested .map() inside a component-rooted loop item (#1725)', () => {
+    // The outer loop item root is a *component* (a passthrough wrapper like
+    // `SelectGroup`), not an element. Its JSX children contain a nested
+    // `.map()` of components. The parent init emitted `initChild` for the
+    // outer wrapper but never descended into its children to init the inner
+    // loop's components — they rendered from SSR but never hydrated (silent).
+    test('emits initChild for the inner-loop component (component wrapper)', () => {
+      const source = `
+        'use client'
+
+        export function Repro() {
+          const GROUPS = [
+            { id: 'a', items: [{ id: 'a1', label: 'A1' }] },
+            { id: 'b', items: [{ id: 'b1', label: 'B1' }] },
+          ]
+          return (
+            <div>
+              {GROUPS.map(group => (
+                <Group key={group.id}>
+                  {group.items.map(it => (
+                    <Item key={it.id} label={it.label} />
+                  ))}
+                </Group>
+              ))}
+            </div>
+          )
+        }
+      `
+      const result = compileJSX(source, 'Repro.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const content = result.files.find(f => f.type === 'clientJs')!.content
+      // Both the outer wrapper and the inner-loop component must init.
+      expect(content).toContain("initChild('Group'")
+      expect(content).toContain("initChild('Item'")
+      // The inner component's props read the inner loop param.
+      expect(content).toContain('return it.label')
+      // Document-order zip shape — a flat cursor over the queried scopes
+      // pairs each with its data item across the nested forEach. This shape
+      // is fragment-root safe (no per-group wrapper element to index).
+      expect(content).toContain('qsaChildScopes')
+      expect(content).toMatch(/__compScopes\[__ci\+\+\]/)
+      // No element-offset addressing (`__outerEl = ...children[...]`) — that
+      // would break for a fragment-rooted passthrough.
+      expect(content).not.toContain('__outerEl')
+    })
+
+    test('multiple inner components each get their own document-order cursor', () => {
+      const source = `
+        'use client'
+
+        export function Repro() {
+          const GROUPS = [{ id: 'a', items: [{ id: 'a1', label: 'A1' }] }]
+          return (
+            <div>
+              {GROUPS.map(group => (
+                <Group key={group.id}>
+                  {group.items.map(it => (
+                    <>
+                      <Item key={it.id} label={it.label} />
+                      <Badge text={it.label} />
+                    </>
+                  ))}
+                </Group>
+              ))}
+            </div>
+          )
+        }
+      `
+      const result = compileJSX(source, 'Repro.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const content = result.files.find(f => f.type === 'clientJs')!.content
+      expect(content).toContain("initChild('Item'")
+      expect(content).toContain("initChild('Badge'")
+      // Distinct scope arrays + cursors so each comp consumes its own
+      // document-order stream (no `const __compEl` redeclaration, #1664).
+      expect(content).toContain('__compScopes0')
+      expect(content).toContain('__compScopes1')
+      expect(content).toMatch(/__ci0\+\+/)
+      expect(content).toMatch(/__ci1\+\+/)
+    })
+  })
 })