@barefootjs/jsx 0.5.3 → 0.6.1

package/dist/index.js

@@ -1710,7 +1710,7 @@ function canGenerateStaticTemplate(node, propNames, inlinableConstants, unsafeLo
       return assertNever(node);
   }
 }
-function generateCsrTemplate(node, inlinableConstants, ctx, insideLoop, restSpreadNames, propsObjectName, unsafeLocalNames) {
+function generateCsrTemplate(node, inlinableConstants, ctx, insideLoop, restSpreadNames, propsObjectName, unsafeLocalNames, deferredChildSlots) {
   const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null);
   const csrEnv = { substitutions: new Map(base.substitutions), propsObjectName: base.propsObjectName };
   if (inlinableConstants) {
@@ -1720,7 +1720,83 @@ function generateCsrTemplate(node, inlinableConstants, ctx, insideLoop, restSpre
       }
     }
   }
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, loopDepth: -1 });
+  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, deferredChildSlots, loopDepth: -1 });
+}
+function buildCsrEnvForCtx(ctx, inlinableConstants, propsObjectName) {
+  const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null);
+  const 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;
+}
+function propResolvesUnsafe(prop, env, unsafeLocalNames) {
+  if (unsafeLocalNames.size === 0)
+    return false;
+  let source;
+  switch (prop.value.kind) {
+    case "expression":
+    case "spread":
+      source = prop.value.expr;
+      break;
+    case "template":
+      source = attrValueToString(prop.value, { useTemplate: true }) ?? undefined;
+      break;
+    default:
+      return false;
+  }
+  if (!source)
+    return false;
+  const { freeIdentifiers } = csrSubstitute(source, env);
+  return setIntersects(freeIdentifiers, unsafeLocalNames);
+}
+function computeDeferredChildSlots(node, ctx, inlinableConstants, unsafeLocalNames, propsObjectName) {
+  const deferred = new Set;
+  if (!unsafeLocalNames || unsafeLocalNames.size === 0)
+    return deferred;
+  const env = buildCsrEnvForCtx(ctx, inlinableConstants, propsObjectName);
+  const visit = (n) => {
+    switch (n.type) {
+      case "component": {
+        if (n.name === "Portal") {
+          n.children.forEach(visit);
+          return;
+        }
+        if (n.slotId) {
+          const dropped = n.props.some((p) => {
+            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);
+        }
+        return;
+      }
+      case "element":
+        n.children.forEach(visit);
+        return;
+      case "fragment":
+        n.children.forEach(visit);
+        return;
+      case "conditional":
+        return;
+      case "loop":
+        return;
+      default:
+        return;
+    }
+  };
+  visit(node);
+  return deferred;
 }
 function generateCsrTemplateWithOpts(node, opts) {
   const { restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, loopDepth = 0 } = opts;
@@ -1826,6 +1902,9 @@ function generateCsrTemplateWithOpts(node, opts) {
       if (node.name === "Portal") {
         return node.children.map(recurse).join("");
       }
+      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())).map((p) => {
         if (p.clientOnly)
           return null;
@@ -5260,15 +5339,7 @@ var UNSUPPORTED_METHODS = new Set([
   "some",
   "forEach",
   "flatMap",
-  "flat",
-  "split",
-  "startsWith",
-  "endsWith",
-  "replace",
   "replaceAll",
-  "repeat",
-  "padStart",
-  "padEnd",
   "charAt",
   "charCodeAt",
   "codePointAt",
@@ -5279,6 +5350,15 @@ 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",
+  "lastIndexOf",
+  "concat"
+]);
 function parseExpression(expr) {
   const trimmed = expr.trim();
   if (!trimmed) {
@@ -5339,7 +5419,7 @@ function convertNode(node, raw) {
       }
     }
     if (callee.kind === "member" && !callee.computed) {
-      if (callee.property === "join" && args.length === 1) {
+      if (callee.property === "join") {
         return { kind: "array-method", method: "join", object: callee.object, args };
       }
       if (callee.property === "includes" && args.length === 1) {
@@ -5348,27 +5428,103 @@ function convertNode(node, raw) {
       if ((callee.property === "indexOf" || callee.property === "lastIndexOf") && args.length === 1) {
         return { kind: "array-method", method: callee.property, object: callee.object, args };
       }
-      if (callee.property === "at" && args.length === 1) {
+      if (callee.property === "at") {
         return { kind: "array-method", method: "at", object: callee.object, args };
       }
-      if (callee.property === "concat" && args.length === 1) {
+      if (callee.property === "concat" && args.length <= 1) {
         return { kind: "array-method", method: "concat", object: callee.object, args };
       }
-      if (callee.property === "slice" && (args.length === 1 || args.length === 2)) {
+      if (callee.property === "slice") {
         return { kind: "array-method", method: "slice", object: callee.object, args };
       }
-      if ((callee.property === "reverse" || callee.property === "toReversed") && args.length === 0) {
+      if (callee.property === "reverse" || callee.property === "toReversed") {
         return { kind: "array-method", method: callee.property, object: callee.object, args };
       }
-      if (callee.property === "toLowerCase" && args.length === 0) {
+      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 };
       }
-      if (callee.property === "toUpperCase" && args.length === 0) {
+      if (callee.property === "toUpperCase") {
         return { kind: "array-method", method: "toUpperCase", object: callee.object, args };
       }
-      if (callee.property === "trim" && args.length === 0) {
+      if (callee.property === "trim") {
         return { kind: "array-method", method: "trim", object: callee.object, args };
       }
+      if (callee.property === "split") {
+        return { kind: "array-method", method: "split", object: callee.object, args };
+      }
+      if (LOWERED_ARRAY_METHODS.has(callee.property)) {
+        const argName = callee.property === "concat" ? "other" : "x";
+        const detail = callee.property === "concat" ? "the variadic `.concat(a, b, …)` form" : `\`.${callee.property}(…)\` with ${args.length} argument(s)`;
+        return {
+          kind: "unsupported",
+          raw,
+          reason: `${detail} is not yet lowered to the Go/Mojo template adapters. Use the single-argument \`.${callee.property}(${argName})\` form, or pre-compute the value before the template.`
+        };
+      }
+      if (callee.property === "startsWith" || callee.property === "endsWith") {
+        if (args.length === 0) {
+          return {
+            kind: "unsupported",
+            raw,
+            reason: `\`.${callee.property}()\` with no search string is not lowered — JS coerces the missing argument to the string "undefined", a degenerate result. Pass an explicit search string, or pre-compute the value before the template.`
+          };
+        }
+        return { kind: "array-method", method: callee.property, object: callee.object, args };
+      }
+      if (callee.property === "replace") {
+        if (args.length < 2) {
+          return {
+            kind: "unsupported",
+            raw,
+            reason: `\`.replace(${args.length === 0 ? "" : "pattern"})\` needs both a pattern and a replacement — JS coerces the missing argument to the string "undefined", a degenerate result. Pass both arguments, or pre-compute the value before the template.`
+          };
+        }
+        const patternNode = node.arguments[0];
+        if (patternNode && ts8.isRegularExpressionLiteral(patternNode)) {
+          return {
+            kind: "unsupported",
+            raw,
+            reason: "String.prototype.replace supports only a string pattern + string replacement (the regex form is deferred); use a string pattern or wrap the expression in /* @client */"
+          };
+        }
+        const badArg = args[0].kind === "unsupported" ? args[0] : args[1].kind === "unsupported" ? args[1] : undefined;
+        if (badArg && badArg.kind === "unsupported") {
+          return { kind: "unsupported", raw, reason: badArg.reason };
+        }
+        return { kind: "array-method", method: "replace", object: callee.object, args };
+      }
+      if (callee.property === "repeat") {
+        return { kind: "array-method", method: "repeat", object: callee.object, args };
+      }
+      if (callee.property === "padStart" || callee.property === "padEnd") {
+        return { kind: "array-method", method: callee.property, object: callee.object, args };
+      }
       if ((callee.property === "sort" || callee.property === "toSorted") && node.arguments.length === 1) {
         const comparator = extractSortComparatorFromTS(node.arguments[0], callee.property);
         if (comparator) {
@@ -5393,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 };
   }
@@ -5711,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) {
@@ -6019,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":
@@ -6139,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).`
           };
         }
       }
@@ -6363,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}]`;
@@ -6408,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;
@@ -9944,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 };
@@ -11814,7 +12165,7 @@ function emitRegistrationAndHydration(lines, ctx, _ir, graph, inlinability) {
     }
   } else {
     const csrInlinableConstants = csrInlinableConstantsFromCtx(ctx);
-    const templateHtml = generateCsrTemplate(_ir.root, csrInlinableConstants, ctx, undefined, restSpreadNames, ctx.propsObjectName, unsafeLocalNames);
+    const templateHtml = generateCsrTemplate(_ir.root, csrInlinableConstants, ctx, undefined, restSpreadNames, ctx.propsObjectName, unsafeLocalNames, ctx.deferredChildSlots);
     if (templateHtml) {
       defParts.push(`template: (${PROPS_PARAM}) => \`${templateHtml}\``);
     }
@@ -12505,8 +12856,13 @@ function emitProviderAndChildInits(lines, ctx) {
     lines.push("");
     lines.push(`  // Initialize child components with props`);
     for (const child of ctx.childInits) {
+      const registryName = nameForRegistryRef(child.name);
+      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})`);
     }
   }
 }
@@ -12755,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));
         }
       }
     }
@@ -12816,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) {
@@ -12855,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) {
@@ -12934,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) {
@@ -15306,6 +15722,7 @@ function generateInitFunction(ir, ctx, siblingComponents, localImportPrefixes) {
   const classification = classifyLocalDeclarations(ctx, graph);
   const propUsage = computePropUsage(ctx, classification.neededConstants);
   const inlinability = buildInlinableConstants(ctx, graph, ir.root);
+  ctx.deferredChildSlots = computeDeferredChildSlots(ir.root, ctx, csrInlinableConstantsFromCtx(ctx), inlinability.unsafeLocalNames, ctx.propsObjectName);
   const phaseCtx = buildPhaseCtx({
     ctx,
     ir,
@@ -15574,6 +15991,7 @@ function createContext(ir, scope, adapterCapabilities) {
     loopElements: [],
     refElements: [],
     childInits: [],
+    deferredChildSlots: new Set,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],
@@ -17210,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/generate-init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-init.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/generate-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAc9C,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,eAAe,EACpB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAC5B,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAC7B,MAAM,CAmER"}
+{"version":3,"file":"generate-init.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/generate-init.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAe9C,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,eAAe,EACpB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAC5B,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAC7B,MAAM,CAiFR"}