@barefootjs/jsx 0.5.2 → 0.6.0

package/dist/index.js

@@ -273,6 +273,21 @@ function buildChainedArrayExpr(elem) {
     chainOrder: elem.chainOrder
   });
 }
+function loopOffsetTerms(offset) {
+  if (!offset)
+    return [];
+  const terms = [];
+  if (offset.staticCount)
+    terms.push(String(offset.staticCount));
+  terms.push(...offset.dynamicTerms);
+  return terms;
+}
+function buildLoopChildIndexExpr(indexParam, offset) {
+  return [indexParam, ...loopOffsetTerms(offset)].join(" + ");
+}
+function buildLoopChildIndexSubtraction(offset) {
+  return loopOffsetTerms(offset).map((term) => ` - ${term}`).join("");
+}
 var jsxToDomEventMap = {
   doubleclick: "dblclick"
 };
@@ -1036,16 +1051,30 @@ function maybeHoistedScopeAttr(inHoistedChildren, node) {
 }
 var UNSAFE_TEMPLATE_EXPR = "undefined";
 function templateAttrExpr(attrName, valExpr, presenceOrUndefined) {
+  if (attrName === "dangerouslySetInnerHTML")
+    return "";
   if (isBooleanAttr(attrName) || presenceOrUndefined) {
     return `\${${valExpr} ? '${attrName}' : ''}`;
   }
   if (attrName === "style") {
-    return `\${((v) => v != null ? 'style="' + v + '"' : '')(styleToCss(${valExpr}))}`;
+    return `\${((v) => v != null ? 'style="' + ${escapeAttrValueExpr("v")} + '"' : '')(styleToCss(${valExpr}))}`;
   }
   if (attrName === "data-key" || attrName.startsWith("data-key-")) {
     return `${attrName}="\${${valExpr}}"`;
   }
-  return `\${(${valExpr}) != null ? '${attrName}="' + (${valExpr}) + '"' : ''}`;
+  return `\${(${valExpr}) != null ? '${attrName}="' + ${escapeAttrValueExpr(valExpr)} + '"' : ''}`;
+}
+function escapeAttrValueExpr(valExpr) {
+  return `escapeAttr(${valExpr})`;
+}
+function escapeTextSlotExpr(innerExpr) {
+  return `escapeText(${innerExpr})`;
+}
+function dangerouslyHtmlChildren(attrs, toExpr) {
+  const attr = attrs.find((a) => a.name === "dangerouslySetInnerHTML");
+  if (!attr || attr.value.kind !== "expression")
+    return null;
+  return `\${((${toExpr(attr.value)}) ?? {}).__html ?? ''}`;
 }
 function transformKeyValue(value, transformExpr) {
   switch (value.kind) {
@@ -1093,6 +1122,8 @@ function isMergeableAttr(a, ctx) {
     return false;
   if (a.name === "key")
     return false;
+  if (a.name === "dangerouslySetInnerHTML")
+    return false;
   const v = a.value;
   if (v.kind === "jsx-children")
     return false;
@@ -1191,7 +1222,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       }
       const attrs = attrParts.join(" ");
       const childrenRecurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, false);
-      const children = node.children.map(childrenRecurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => wrapExpr(v.expr)) ?? node.children.map(childrenRecurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1203,7 +1234,9 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       if (node.expr === "null" || node.expr === "undefined")
         return "";
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${wrapInterpolation(wrapExpr(node.expr))}}<!--/-->`;
+        const inner = wrapInterpolation(wrapExpr(node.expr));
+        const slotted = branchSlotsVar ? inner : escapeTextSlotExpr(inner);
+        return `<!--bf:${node.slotId}-->\${${slotted}}<!--/-->`;
       }
       return `\${${wrapInterpolation(wrapExpr(node.expr))}}`;
     case "conditional": {
@@ -1301,7 +1334,7 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
         attrParts.push(`bf="${node.slotId}"`);
       }
       const attrs = attrParts.join(" ");
-      const children = node.children.map(recurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => wrapExpr(v.expr)) ?? node.children.map(recurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1313,7 +1346,7 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
       if (node.expr === "null" || node.expr === "undefined")
         return "";
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${wrapExpr(node.expr)}}<!--/-->`;
+        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(wrapExpr(node.expr))}}<!--/-->`;
       }
       return `\${${wrapExpr(node.expr)}}`;
     case "conditional": {
@@ -1529,7 +1562,7 @@ function irToComponentTemplateWithOpts(node, opts) {
         attrParts.push(`bf="${node.slotId}"`);
       }
       const attrs = attrParts.join(" ");
-      const children = node.children.map(childrenRecurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => transformExpr(v.expr, v.templateExpr)) ?? node.children.map(childrenRecurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1541,7 +1574,7 @@ function irToComponentTemplateWithOpts(node, opts) {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${transformExpr(node.expr, node.templateExpr)}}<!--/-->`;
+        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(transformExpr(node.expr, node.templateExpr))}}<!--/-->`;
       }
       return `\${${transformExpr(node.expr, node.templateExpr)}}`;
     case "conditional": {
@@ -1677,7 +1710,19 @@ 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) {
+    for (const [name, value] of inlinableConstants) {
+      if (!csrEnv.substitutions.has(name)) {
+        csrEnv.substitutions.set(name, { kind: "identifier", replacement: value, freeIdentifiers: new Set });
+      }
+    }
+  }
+  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) {
@@ -1687,7 +1732,71 @@ function generateCsrTemplate(node, inlinableConstants, ctx, insideLoop, restSpre
       }
     }
   }
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, insideLoop, unsafeLocalNames, loopDepth: -1 });
+  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;
@@ -1755,7 +1864,7 @@ function generateCsrTemplateWithOpts(node, opts) {
         attrParts.push(`bf="${node.slotId}"`);
       }
       const attrs = attrParts.join(" ");
-      const children = node.children.map(childrenRecurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => transformExpr(v.expr, v.templateExpr)) ?? node.children.map(childrenRecurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1773,7 +1882,7 @@ function generateCsrTemplateWithOpts(node, opts) {
         const transformed = transformExpr(node.expr, node.templateExpr);
         const expr = transformed === UNSAFE_TEMPLATE_EXPR ? "''" : transformed;
         if (node.slotId) {
-          return `<!--bf:${node.slotId}-->\${${expr}}<!--/-->`;
+          return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(expr)}}<!--/-->`;
         }
         return `\${${expr}}`;
       }
@@ -1793,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;
@@ -5228,14 +5340,7 @@ var UNSUPPORTED_METHODS = new Set([
   "forEach",
   "flatMap",
   "flat",
-  "split",
-  "startsWith",
-  "endsWith",
-  "replace",
   "replaceAll",
-  "repeat",
-  "padStart",
-  "padEnd",
   "charAt",
   "charCodeAt",
   "codePointAt",
@@ -5246,6 +5351,12 @@ var UNSUPPORTED_METHODS = new Set([
   "matchAll",
   "search"
 ]);
+var LOWERED_ARRAY_METHODS = new Set([
+  "includes",
+  "indexOf",
+  "lastIndexOf",
+  "concat"
+]);
 function parseExpression(expr) {
   const trimmed = expr.trim();
   if (!trimmed) {
@@ -5306,7 +5417,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) {
@@ -5315,27 +5426,77 @@ 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 === "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) {
@@ -9710,24 +9871,80 @@ function collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings)
 }
 
 // src/ir-to-client-js/collect-elements.ts
-function producesDomChild(node) {
-  return node.type === "element" || node.type === "component" || node.type === "provider" || node.type === "async" || node.type === "text" || node.type === "expression" && !node.reactive || node.type === "conditional";
+var EMPTY_RENDER_EXPRS = new Set(["null", "undefined", "false", "''", '""', "``"]);
+function domElementCount(node) {
+  switch (node.type) {
+    case "element":
+    case "component":
+    case "provider":
+    case "async":
+      return 1;
+    case "text":
+      return 0;
+    case "expression":
+      return EMPTY_RENDER_EXPRS.has(node.expr.trim()) ? 0 : null;
+    case "loop":
+      if (node.bodyIsItemConditional || node.method === "flatMap")
+        return null;
+      return `(${buildLoopChainExpr({
+        base: node.array,
+        sortComparator: node.sortComparator,
+        filterPredicate: node.filterPredicate,
+        chainOrder: node.chainOrder
+      })}).length`;
+    case "conditional": {
+      const t = domElementCount(node.whenTrue);
+      const f = domElementCount(node.whenFalse);
+      if (t === null || f === null)
+        return null;
+      if (typeof t === "number" && typeof f === "number" && t === f)
+        return t;
+      return `(${node.condition} ? ${t} : ${f})`;
+    }
+    case "fragment":
+      return sumElementCounts(node.children);
+    default:
+      return null;
+  }
+}
+function sumElementCounts(nodes) {
+  let staticCount = 0;
+  const dynamic = [];
+  for (const n of nodes) {
+    const c = domElementCount(n);
+    if (c === null)
+      return null;
+    if (typeof c === "number")
+      staticCount += c;
+    else
+      dynamic.push(c);
+  }
+  if (dynamic.length === 0)
+    return staticCount;
+  const parts = staticCount > 0 ? [String(staticCount), ...dynamic] : dynamic;
+  return parts.length === 1 ? parts[0] : `(${parts.join(" + ")})`;
+}
+function legacyElementCount(node) {
+  return node.type === "element" || node.type === "component" || node.type === "provider" || node.type === "async" || node.type === "text" || node.type === "expression" && !node.reactive || node.type === "conditional" ? 1 : 0;
 }
 function computeLoopSiblingOffsets(root) {
   const offsets = new Map;
-  const recordChildren = (children) => {
-    let nonLoopCount = 0;
+  const recordRun = (children, preceding) => {
     for (const child of children) {
       if (child.type === "loop") {
-        if (nonLoopCount > 0)
-          offsets.set(child, nonLoopCount);
-      } else if (producesDomChild(child)) {
-        nonLoopCount++;
+        if (preceding.length > 0 && !offsets.has(child)) {
+          offsets.set(child, [...preceding]);
+        }
+        preceding.push(child);
+      } else if (child.type === "fragment" || child.type === "provider" || child.type === "async") {
+        recordRun(child.children, preceding);
+      } else {
+        preceding.push(child);
       }
     }
   };
   const containerVisit = ({ node, descend }) => {
-    recordChildren(node.children);
+    recordRun(node.children, []);
     descend();
   };
   walkIR(root, null, {
@@ -9739,6 +9956,24 @@ function computeLoopSiblingOffsets(root) {
   });
   return offsets;
 }
+function resolveLoopOffset(preceding) {
+  if (!preceding || preceding.length === 0)
+    return;
+  let staticCount = 0;
+  const dynamicTerms = [];
+  for (const node of preceding) {
+    const c = domElementCount(node);
+    if (c === null)
+      staticCount += legacyElementCount(node);
+    else if (typeof c === "number")
+      staticCount += c;
+    else
+      dynamicTerms.push(c);
+  }
+  if (staticCount === 0 && dynamicTerms.length === 0)
+    return;
+  return { staticCount, dynamicTerms };
+}
 var branchInnerLoopOptions = {
   collectItemBindings: true,
   templateDepth: 1,
@@ -9824,7 +10059,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
           refsOuterParam: refsOuter,
           childComponents,
           insideConditional: !flat && scope.insideCond ? true : undefined,
-          siblingOffset: flat ? undefined : siblingOffsets.get(n) || undefined,
+          offset: flat ? undefined : resolveLoopOffset(siblingOffsets.get(n)),
           bindings
         });
         if (!flat) {
@@ -10042,7 +10277,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
         isStaticArray: l.isStaticArray,
         useElementReconciliation,
         innerLoops: useElementReconciliation || l.isStaticArray && innerLoops?.length ? innerLoops : undefined,
-        siblingOffset: siblingOffsets.get(l) || undefined,
+        offset: resolveLoopOffset(siblingOffsets.get(l)),
         filterPredicate: l.filterPredicate ? {
           param: l.filterPredicate.param,
           raw: l.filterPredicate.raw
@@ -10812,6 +11047,8 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "splitProps",
   "spreadAttrs",
   "styleToCss",
+  "escapeAttr",
+  "escapeText",
   "qsa",
   "qsaItem",
   "qsaChildScope",
@@ -11705,7 +11942,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}\``);
     }
@@ -12396,8 +12633,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})`);
     }
   }
 }
@@ -12678,7 +12920,7 @@ function buildOuterNestedPlan(elem, comp) {
     arrayExpr: elem.array,
     param: elem.param,
     indexParam,
-    offsetExpr: elem.siblingOffset ? `${indexParam} + ${elem.siblingOffset}` : indexParam,
+    offsetExpr: buildLoopChildIndexExpr(indexParam, elem.offset),
     outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
     propsExpr: buildStaticPropsExpr(comp.props)
   };
@@ -12696,12 +12938,12 @@ function buildInnerLoopNestedPlan(elem, innerLoop, innerComps) {
     outerArrayExpr: elem.array,
     outerParam: elem.param,
     outerIndexParam,
-    outerOffsetExpr: elem.siblingOffset ? `${outerIndexParam} + ${elem.siblingOffset}` : outerIndexParam,
+    outerOffsetExpr: buildLoopChildIndexExpr(outerIndexParam, elem.offset),
     outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
     innerContainerSlotId: innerLoop.containerSlotId ?? null,
     innerArrayExpr: innerLoop.array,
     innerParam: innerLoop.param,
-    innerOffsetExpr: innerLoop.siblingOffset ? `__innerIdx + ${innerLoop.siblingOffset}` : "__innerIdx",
+    innerOffsetExpr: buildLoopChildIndexExpr("__innerIdx", innerLoop.offset),
     innerPreludeStatements: innerLoop.mapPreamble ? [innerLoop.mapPreamble] : [],
     depth: innerLoop.depth,
     comps
@@ -13463,7 +13705,7 @@ function buildStaticArrayDelegationPlan(elem) {
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
       mapPreamble: elem.mapPreamble ?? null,
-      siblingOffset: elem.siblingOffset ?? null
+      offset: elem.offset ?? null
     }
   };
 }
@@ -13581,6 +13823,11 @@ function buildArmBody(branch, options) {
 // src/ir-to-client-js/emit-reactive.ts
 function emitAttrUpdate(target, attrName, expression, meta) {
   const htmlName = toHtmlAttrName(attrName);
+  if (attrName === "dangerouslySetInnerHTML" || htmlName === "dangerouslySetInnerHTML") {
+    return [
+      `{ const __v = ${expression}; ${target}.innerHTML = __v != null && __v.__html != null ? String(__v.__html) : '' }`
+    ];
+  }
   if (htmlName === "style") {
     return [
       `{ const __v = styleToCss(${expression}); if (__v != null) ${target}.setAttribute('style', __v); else ${target}.removeAttribute('style') }`
@@ -14592,11 +14839,11 @@ function emitDynamicIndexLookup(ls, ev, handlerCall, lookup) {
   ls.push(`      }`);
 }
 function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
-  const { arrayExpr, param, mapPreamble, siblingOffset } = lookup;
+  const { arrayExpr, param, mapPreamble, offset } = lookup;
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`);
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`);
   ls.push(`      if (__el.parentElement === ${containerVar}) {`);
-  const idxOffset = siblingOffset ? ` - ${siblingOffset}` : "";
+  const idxOffset = buildLoopChildIndexSubtraction(offset ?? undefined);
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`);
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`);
   if (mapPreamble)
@@ -14873,7 +15120,7 @@ function buildStaticLoopPlan(elem, unsafeLocalNames) {
     }
   }
   const indexParam = elem.index || "__idx";
-  const childIndexExpr = elem.siblingOffset ? `${indexParam} + ${elem.siblingOffset}` : indexParam;
+  const childIndexExpr = buildLoopChildIndexExpr(indexParam, elem.offset);
   return {
     kind: "static",
     containerVar: `_${varSlotId(elem.slotId)}`,
@@ -15192,6 +15439,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,
@@ -15460,6 +15708,7 @@ function createContext(ir, scope, adapterCapabilities) {
     loopElements: [],
     refElements: [],
     childInits: [],
+    deferredChildSlots: new Set,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],
@@ -17161,6 +17410,7 @@ function emitAttrValue(value, emitter, name) {
   }
 }
 // src/combine-client-js.ts
+import ts18 from "typescript";
 var CHILD_PLACEHOLDER_RE = /import '\/\* @bf-child:(\w+) \*\/'/g;
 function combineParentChildClientJs(files) {
   const result = new Map;
@@ -17217,33 +17467,43 @@ function combineParentChildClientJs(files) {
   return result;
 }
 function parseAndMerge(content, importsBySource, otherImports, codeSections) {
-  const codeLines = [];
-  for (const line of content.split(`
-`)) {
-    if (line.startsWith("import ")) {
-      if (line.includes("@bf-child:"))
-        continue;
-      const match = line.match(/^import \{ ([^}]+) \} from ['"]([^'"]+)['"]/);
-      if (match) {
-        const names = match[1].split(",").map((n) => n.trim());
-        const source = match[2];
-        if (!importsBySource.has(source)) {
-          importsBySource.set(source, new Set);
-        }
-        for (const name of names) {
-          importsBySource.get(source).add(name);
-        }
-      } else {
-        if (!otherImports.includes(line)) {
-          otherImports.push(line);
-        }
+  const sourceFile = ts18.createSourceFile("combine.js", content, ts18.ScriptTarget.Latest, false, ts18.ScriptKind.JS);
+  const importSpans = [];
+  for (const stmt of sourceFile.statements) {
+    if (!ts18.isImportDeclaration(stmt))
+      continue;
+    const start = stmt.getStart(sourceFile);
+    const end = stmt.getEnd();
+    importSpans.push([start, end]);
+    const stmtText = content.slice(start, end);
+    if (stmtText.includes("@bf-child:"))
+      continue;
+    const clause = stmt.importClause;
+    const bindings = clause?.namedBindings;
+    const specifier = ts18.isStringLiteral(stmt.moduleSpecifier) ? stmt.moduleSpecifier.text : "";
+    if (clause && !clause.name && bindings && ts18.isNamedImports(bindings)) {
+      if (!importsBySource.has(specifier)) {
+        importsBySource.set(specifier, new Set);
+      }
+      const set = importsBySource.get(specifier);
+      for (const el of bindings.elements) {
+        const name = el.propertyName ? `${el.propertyName.text} as ${el.name.text}` : el.name.text;
+        set.add(name);
       }
     } else {
-      codeLines.push(line);
+      if (!otherImports.includes(stmtText)) {
+        otherImports.push(stmtText);
+      }
     }
   }
-  const code = codeLines.join(`
-`).trim();
+  let code = "";
+  let cursor = 0;
+  for (const [start, end] of importSpans) {
+    code += content.slice(cursor, start);
+    cursor = end;
+  }
+  code += content.slice(cursor);
+  code = code.trim();
   if (code) {
     codeSections.push(code);
   }