@barefootjs/jsx 0.4.0 → 0.5.1

package/dist/index.js

@@ -62,6 +62,9 @@ function canRegexStartHere(prev) {
       return true;
   }
 }
+function isIdentifierLikeToken(kind) {
+  return kind === ts.SyntaxKind.Identifier || kind >= ts.SyntaxKind.FirstKeyword && kind <= ts.SyntaxKind.LastKeyword;
+}
 function isOpaqueContentKind(kind) {
   return kind === ts.SyntaxKind.StringLiteral || kind === ts.SyntaxKind.NoSubstitutionTemplateLiteral || kind === ts.SyntaxKind.RegularExpressionLiteral || kind === ts.SyntaxKind.SingleLineCommentTrivia || kind === ts.SyntaxKind.MultiLineCommentTrivia;
 }
@@ -173,6 +176,22 @@ function findTopLevelTemplateLiterals(code) {
   return out;
 }
 
+// src/import-map.ts
+function escapeHtmlAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function renderImportMapHtml(manifest) {
+  const imports = manifest.importmap?.imports ?? {};
+  const json = JSON.stringify({ imports }).replace(/</g, "\\u003c");
+  const lines = [`<script type="importmap">${json}</script>`];
+  for (const href of manifest.preloads ?? []) {
+    lines.push(`<link rel="modulepreload" href="${escapeHtmlAttr(href)}" crossorigin>`);
+  }
+  return lines.join(`
+`) + `
+`;
+}
+
 // src/analyzer.ts
 import ts7 from "typescript";
 
@@ -203,6 +222,7 @@ import {
   BF_LOOP_END,
   loopStartMarker,
   loopEndMarker,
+  loopItemMarker,
   toHTMLAttrName as toHtmlAttrName
 } from "@barefootjs/shared";
 var PROPS_PARAM = "_p";
@@ -398,150 +418,17 @@ function setIntersects(a, b) {
 function tokenContainsIdent(expr, ident) {
   return scanForIdentifiers(expr, (token) => token === ident);
 }
-var IDENT_START_RE = /[A-Za-z_$]/;
-var IDENT_PART_RE = /[A-Za-z0-9_$]/;
 function scanForIdentifiers(expr, predicate) {
-  const n = expr.length;
-  let i = 0;
-  let state = 0;
-  const tmplExprStack = [];
-  let braceDepth = 0;
-  while (i < n) {
-    const ch = expr[i];
-    switch (state) {
-      case 0:
-      case 4: {
-        if (ch === "'") {
-          state = 1;
-          i++;
-          continue;
-        }
-        if (ch === '"') {
-          state = 2;
-          i++;
-          continue;
-        }
-        if (ch === "`") {
-          state = 3;
-          i++;
-          continue;
-        }
-        if (ch === "/" && i + 1 < n) {
-          const next = expr[i + 1];
-          if (next === "/") {
-            state = 5;
-            i += 2;
-            continue;
-          }
-          if (next === "*") {
-            state = 6;
-            i += 2;
-            continue;
-          }
-        }
-        if (state === 4) {
-          if (ch === "{") {
-            braceDepth++;
-            i++;
-            continue;
-          }
-          if (ch === "}") {
-            if (braceDepth === 0) {
-              const restored = tmplExprStack.pop();
-              braceDepth = restored ?? 0;
-              state = 3;
-              i++;
-              continue;
-            }
-            braceDepth--;
-            i++;
-            continue;
-          }
-        }
-        if (IDENT_START_RE.test(ch)) {
-          let j = i + 1;
-          while (j < n && IDENT_PART_RE.test(expr[j]))
-            j++;
-          const token = expr.slice(i, j);
-          let prev = i - 1;
-          while (prev >= 0 && (expr[prev] === " " || expr[prev] === "\t" || expr[prev] === `
-` || expr[prev] === "\r"))
-            prev--;
-          const isMemberTail = prev >= 0 && expr[prev] === "." && (prev === 0 || expr[prev - 1] !== ".");
-          if (!isMemberTail && predicate(token))
-            return true;
-          i = j;
-          continue;
-        }
-        i++;
-        continue;
-      }
-      case 1: {
-        if (ch === "\\" && i + 1 < n) {
-          i += 2;
-          continue;
-        }
-        if (ch === "'") {
-          state = 0;
-          i++;
-          continue;
-        }
-        i++;
-        continue;
-      }
-      case 2: {
-        if (ch === "\\" && i + 1 < n) {
-          i += 2;
-          continue;
-        }
-        if (ch === '"') {
-          state = 0;
-          i++;
-          continue;
-        }
-        i++;
-        continue;
-      }
-      case 3: {
-        if (ch === "\\" && i + 1 < n) {
-          i += 2;
-          continue;
-        }
-        if (ch === "`") {
-          state = tmplExprStack.length > 0 ? 4 : 0;
-          i++;
-          continue;
-        }
-        if (ch === "$" && i + 1 < n && expr[i + 1] === "{") {
-          tmplExprStack.push(braceDepth);
-          braceDepth = 0;
-          state = 4;
-          i += 2;
-          continue;
-        }
-        i++;
-        continue;
-      }
-      case 5: {
-        if (ch === `
-` || ch === "\r") {
-          state = 0;
-          i++;
-          continue;
-        }
-        i++;
-        continue;
-      }
-      case 6: {
-        if (ch === "*" && i + 1 < n && expr[i + 1] === "/") {
-          state = 0;
-          i += 2;
-          continue;
-        }
-        i++;
-        continue;
-      }
+  let prevSignificant;
+  for (const tok of iterateJsTokens(expr)) {
+    if (isTriviaKind(tok.kind))
+      continue;
+    if (isIdentifierLikeToken(tok.kind)) {
+      const isMemberTail = prevSignificant === ts2.SyntaxKind.DotToken || prevSignificant === ts2.SyntaxKind.QuestionDotToken;
+      if (!isMemberTail && predicate(expr.slice(tok.pos, tok.end)))
+        return true;
     }
+    prevSignificant = tok.kind;
   }
   return false;
 }
@@ -1268,6 +1155,9 @@ function buildSpreadAttrsMergeCall(args) {
   }
   return `\${spreadAttrs({${objMembers.join(", ")}})}`;
 }
+function itemAnchorTemplate(keyExpr) {
+  return `<!--${loopItemMarker("${" + keyExpr + "}")}-->`;
+}
 function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, branchSlotsVar, insideLoop = false, inHoistedChildren = false) {
   const recurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, inHoistedChildren);
   const wrapExpr = (expr) => wrapExprWithLoopParams(expr, loopParams);
@@ -1363,7 +1253,10 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
     }
     case "loop": {
       const innerRecurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop);
-      const childTemplate = node.children.map(innerRecurse).join("");
+      let childTemplate = node.children.map(innerRecurse).join("");
+      if (node.bodyIsItemConditional && node.key) {
+        childTemplate = `${itemAnchorTemplate(node.key)}${childTemplate}`;
+      }
       const indexParam = node.index ? `, ${node.index}` : "";
       const rawChainedArray = applyLoopChain(node);
       const { array: iterArray, callbackParam } = applyIterationShape(node, rawChainedArray, indexParam);
@@ -1942,7 +1835,10 @@ function generateCsrTemplateWithOpts(node, opts) {
       return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg || (slotArg ? ", undefined" : "")}${slotArg})}`;
     }
     case "loop": {
-      const childTemplate = node.children.map(recurseInLoop).join("");
+      let childTemplate = node.children.map(recurseInLoop).join("");
+      if (node.bodyIsItemConditional && node.key) {
+        childTemplate = `${itemAnchorTemplate(node.key)}${childTemplate}`;
+      }
       const indexParam = node.index ? `, ${node.index}` : "";
       const chainedTemplateArray = node.sortComparator || node.filterPredicate ? applyLoopChain(node, node.templateArray) : node.templateArray;
       const rawArrayExpr = transformExpr(node.array, chainedTemplateArray);
@@ -5418,6 +5314,8 @@ function convertNode(node, raw) {
 ` + `  (a, b) => a.field - b.field
 ` + `  (a, b) => a.localeCompare(b)
 ` + `  (a, b) => a.field.localeCompare(b.field)
+` + `  (a, b) => a.field > b.field ? 1 : -1   (relational ternary)
+` + `  any of the above ||-chained for multi-key tie-breaks
 ` + `(reverse the operands for descending order). ` + `Wrap the call in /* @client */ to evaluate at hydration.`
         };
       }
@@ -5577,26 +5475,54 @@ function extractSortComparatorFromTS(node, method) {
   const paramA = pA.name.text;
   const paramB = pB.name.text;
   let body;
-  if (ts8.isArrowFunction(node)) {
-    if (ts8.isBlock(node.body))
-      return null;
+  if (ts8.isArrowFunction(node) && !ts8.isBlock(node.body)) {
     body = node.body;
   } else {
-    const stmts = node.body.statements;
+    const block = node.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 keys = [];
+  for (const operand of flattenLogicalOr(body)) {
+    const key = classifyLeafComparator(operand, paramA, paramB);
+    if (!key)
+      return null;
+    keys.push(key);
+  }
+  if (keys.length === 0)
+    return null;
+  return { keys, raw, paramA, paramB, method };
+}
+function unwrapParens(expr) {
+  let e = expr;
+  while (ts8.isParenthesizedExpression(e))
+    e = e.expression;
+  return e;
+}
+function flattenLogicalOr(expr) {
+  const inner = unwrapParens(expr);
+  if (ts8.isBinaryExpression(inner) && inner.operatorToken.kind === ts8.SyntaxKind.BarBarToken) {
+    return [...flattenLogicalOr(inner.left), ...flattenLogicalOr(inner.right)];
+  }
+  return [inner];
+}
+function classifyLeafComparator(expr, paramA, paramB) {
+  const body = unwrapParens(expr);
   if (ts8.isBinaryExpression(body) && body.operatorToken.kind === ts8.SyntaxKind.MinusToken) {
-    return classifyComparatorOperands(body.left, body.right, paramA, paramB, "numeric", method, raw);
+    return classifyComparatorOperands(body.left, body.right, paramA, paramB, "numeric");
   }
   if (ts8.isCallExpression(body) && ts8.isPropertyAccessExpression(body.expression) && body.expression.name.text === "localeCompare" && body.arguments.length === 1) {
-    return classifyComparatorOperands(body.expression.expression, body.arguments[0], paramA, paramB, "string", method, raw);
+    return classifyComparatorOperands(body.expression.expression, body.arguments[0], paramA, paramB, "string");
+  }
+  if (ts8.isConditionalExpression(body)) {
+    return classifyTernaryComparator(body, paramA, paramB);
   }
   return null;
 }
-function classifyComparatorOperands(left, right, paramA, paramB, type, method, raw) {
+function classifyComparatorOperands(left, right, paramA, paramB, type) {
   const leftRef = classifySortOperand(left, paramA, paramB);
   const rightRef = classifySortOperand(right, paramA, paramB);
   if (!leftRef || !rightRef)
@@ -5609,15 +5535,89 @@ function classifyComparatorOperands(left, right, paramA, paramB, type, method, r
     return null;
   }
   const direction = leftRef.param === "A" ? "asc" : "desc";
-  return {
-    key: leftRef.key,
-    type,
-    direction,
-    raw,
-    paramA,
-    paramB,
-    method
-  };
+  return { key: leftRef.key, type, direction };
+}
+function classifyTernaryComparator(node, paramA, paramB) {
+  const cond = unwrapParens(node.condition);
+  if (ts8.isBinaryExpression(cond) && (cond.operatorToken.kind === ts8.SyntaxKind.EqualsEqualsEqualsToken || cond.operatorToken.kind === ts8.SyntaxKind.EqualsEqualsToken) && sameKeyOperands(cond.left, cond.right, paramA, paramB) && numericSign(node.whenTrue) === 0) {
+    const elseBranch = unwrapParens(node.whenFalse);
+    if (ts8.isConditionalExpression(elseBranch)) {
+      return classifyTernaryComparator(elseBranch, paramA, paramB);
+    }
+    return null;
+  }
+  if (!ts8.isBinaryExpression(cond))
+    return null;
+  const op = cond.operatorToken.kind;
+  const isGreater = op === ts8.SyntaxKind.GreaterThanToken || op === ts8.SyntaxKind.GreaterThanEqualsToken;
+  const isLess = op === ts8.SyntaxKind.LessThanToken || op === ts8.SyntaxKind.LessThanEqualsToken;
+  if (!isGreater && !isLess)
+    return null;
+  const leftRef = classifySortOperand(cond.left, paramA, paramB);
+  const rightRef = classifySortOperand(cond.right, paramA, paramB);
+  if (!leftRef || !rightRef)
+    return null;
+  if (leftRef.param === rightRef.param)
+    return null;
+  if (leftRef.key.kind !== rightRef.key.kind)
+    return null;
+  if (leftRef.key.kind === "field" && rightRef.key.kind === "field" && leftRef.key.field !== rightRef.key.field) {
+    return null;
+  }
+  const trueSign = numericSign(node.whenTrue);
+  if (trueSign === null || trueSign === 0)
+    return null;
+  if (!isBoundedTernaryElse(node.whenFalse, leftRef.key, paramA, paramB))
+    return null;
+  const greaterForA = leftRef.param === "A" ? isGreater : !isGreater;
+  const asc = greaterForA ? trueSign > 0 : trueSign < 0;
+  return { key: leftRef.key, type: "auto", direction: asc ? "asc" : "desc" };
+}
+function sameKeyOperands(left, right, paramA, paramB) {
+  const l = classifySortOperand(left, paramA, paramB);
+  const r = classifySortOperand(right, paramA, paramB);
+  if (!l || !r)
+    return false;
+  if (l.param === r.param)
+    return false;
+  if (l.key.kind !== r.key.kind)
+    return false;
+  if (l.key.kind === "field" && r.key.kind === "field" && l.key.field !== r.key.field)
+    return false;
+  return true;
+}
+function numericSign(expr) {
+  const e = unwrapParens(expr);
+  if (ts8.isPrefixUnaryExpression(e) && e.operator === ts8.SyntaxKind.MinusToken) {
+    const inner = numericSign(e.operand);
+    return inner === null ? null : -inner;
+  }
+  if (ts8.isNumericLiteral(e)) {
+    const n = Number(e.text);
+    if (Number.isNaN(n))
+      return null;
+    if (n === 0)
+      return 0;
+    return n > 0 ? 1 : -1;
+  }
+  return null;
+}
+function isBoundedTernaryElse(expr, key, paramA, paramB) {
+  const e = unwrapParens(expr);
+  if (numericSign(e) !== null)
+    return true;
+  if (ts8.isConditionalExpression(e)) {
+    const nested = classifyTernaryComparator(e, paramA, paramB);
+    return nested !== null && sortKeyEquals(nested.key, key);
+  }
+  return false;
+}
+function sortKeyEquals(a, b) {
+  if (a.kind !== b.kind)
+    return false;
+  if (a.kind === "field" && b.kind === "field")
+    return a.field === b.field;
+  return true;
 }
 function classifySortOperand(expr, paramA, paramB) {
   if (ts8.isIdentifier(expr)) {
@@ -7543,6 +7543,23 @@ function containsJsxInExpression(node) {
   }
   return ts11.forEachChild(node, containsJsxInExpression) ?? false;
 }
+function callsJsxHelper(node, ctx) {
+  let found = false;
+  const visit2 = (n) => {
+    if (found)
+      return;
+    if (ts11.isCallExpression(n) && ts11.isIdentifier(n.expression)) {
+      const name = n.expression.text;
+      if (ctx.analyzer.jsxFunctions.has(name) || ctx.analyzer.jsxMultiReturnFunctions.has(name)) {
+        found = true;
+        return;
+      }
+    }
+    ts11.forEachChild(n, visit2);
+  };
+  visit2(node);
+  return found;
+}
 function containsAwaitExpression(node) {
   if (ts11.isAwaitExpression(node))
     return true;
@@ -7622,7 +7639,7 @@ function transformJsxExpression(expr, ctx, isClientOnly = false) {
       if (node.operatorToken.kind === ts11.SyntaxKind.AmpersandAmpersandToken) {
         return transformLogicalAnd(node, ctx);
       }
-      if ((node.operatorToken.kind === ts11.SyntaxKind.QuestionQuestionToken || node.operatorToken.kind === ts11.SyntaxKind.BarBarToken) && containsJsxInExpression(node.right)) {
+      if ((node.operatorToken.kind === ts11.SyntaxKind.QuestionQuestionToken || node.operatorToken.kind === ts11.SyntaxKind.BarBarToken) && (containsJsxInExpression(node.right) || callsJsxHelper(node.right, ctx))) {
         return transformNullishCoalescing(node, ctx);
       }
       return null;
@@ -8079,23 +8096,23 @@ function checkLoopKey(callback, ctx, isNested) {
   }
   while (ts11.isParenthesizedExpression(body))
     body = body.expression;
+  function checkJsxOperand(node) {
+    let n = node;
+    while (ts11.isParenthesizedExpression(n))
+      n = n.expression;
+    if (ts11.isJsxElement(n))
+      checkOpening(n.openingElement);
+    else if (ts11.isJsxSelfClosingElement(n))
+      checkOpening(n);
+  }
   if (ts11.isConditionalExpression(body)) {
-    const whenTrue = body.whenTrue;
-    const whenFalse = body.whenFalse;
-    let wt = whenTrue;
-    let wf = whenFalse;
-    while (ts11.isParenthesizedExpression(wt))
-      wt = wt.expression;
-    while (ts11.isParenthesizedExpression(wf))
-      wf = wf.expression;
-    if (ts11.isJsxElement(wt))
-      checkOpening(wt.openingElement);
-    else if (ts11.isJsxSelfClosingElement(wt))
-      checkOpening(wt);
-    if (ts11.isJsxElement(wf))
-      checkOpening(wf.openingElement);
-    else if (ts11.isJsxSelfClosingElement(wf))
-      checkOpening(wf);
+    checkJsxOperand(body.whenTrue);
+    checkJsxOperand(body.whenFalse);
+    return;
+  }
+  if (ts11.isBinaryExpression(body) && (body.operatorToken.kind === ts11.SyntaxKind.AmpersandAmpersandToken || body.operatorToken.kind === ts11.SyntaxKind.BarBarToken || body.operatorToken.kind === ts11.SyntaxKind.QuestionQuestionToken)) {
+    checkJsxOperand(body.left);
+    checkJsxOperand(body.right);
     return;
   }
   if (ts11.isJsxElement(body)) {
@@ -8118,6 +8135,38 @@ function loopBodyIsMultiRoot(children) {
     return false;
   return loopBodyIsMultiRoot(only.children);
 }
+function branchHasNoElement(node) {
+  if (node.type === "element" || node.type === "component")
+    return false;
+  if (node.type === "conditional") {
+    return branchHasNoElement(node.whenTrue) || branchHasNoElement(node.whenFalse);
+  }
+  if (node.type === "fragment") {
+    const real = node.children.filter((c) => !(c.type === "text" && typeof c.value === "string" && !c.value.trim()));
+    return real.length !== 1 || branchHasNoElement(real[0]);
+  }
+  return true;
+}
+function loopBodyItemConditional(children) {
+  const real = children.filter((c) => !(c.type === "text" && typeof c.value === "string" && !c.value.trim()));
+  if (real.length !== 1)
+    return null;
+  const only = real[0];
+  if (only.type !== "conditional")
+    return null;
+  if (branchHasNoElement(only.whenTrue) || branchHasNoElement(only.whenFalse)) {
+    return only;
+  }
+  return null;
+}
+function extractItemConditionalKey(cond) {
+  const a = branchHasNoElement(cond.whenTrue) ? null : extractLoopKey(cond.whenTrue);
+  const b = branchHasNoElement(cond.whenFalse) ? null : extractLoopKey(cond.whenFalse);
+  if (a !== null && b !== null) {
+    return normalizeKeyExpr(a) === normalizeKeyExpr(b) ? a : null;
+  }
+  return a ?? b;
+}
 function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const isNested = ctx.loopParams.size > 0;
   const propAccess = node.expression;
@@ -8280,6 +8329,19 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     }
     if (index)
       ctx.loopParams.add(index);
+    const tryTransformRenderableBody = (expr) => {
+      if (!ts11.isBinaryExpression(expr))
+        return;
+      const op = expr.operatorToken.kind;
+      if (op !== ts11.SyntaxKind.AmpersandAmpersandToken && op !== ts11.SyntaxKind.BarBarToken && op !== ts11.SyntaxKind.QuestionQuestionToken) {
+        return;
+      }
+      if (!containsJsxInExpression(expr) && !callsJsxHelper(expr, ctx))
+        return;
+      const transformed = transformJsxExpression(expr, ctx, isClientOnly);
+      if (transformed)
+        children = [transformed];
+    };
     const body = callback.body;
     if (ts11.isJsxElement(body) || ts11.isJsxSelfClosingElement(body) || ts11.isJsxFragment(body)) {
       const transformed = transformNode(body, ctx);
@@ -8302,6 +8364,8 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         children = [transformConditional(inner, ctx)];
       } else if (method === "flatMap" && ts11.isArrayLiteralExpression(inner)) {
         children = transformArrayLiteralChildren(inner, ctx);
+      } else {
+        tryTransformRenderableBody(inner);
       }
     } else if (method === "flatMap" && ts11.isArrayLiteralExpression(body)) {
       children = transformArrayLiteralChildren(body, ctx);
@@ -8350,6 +8414,8 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
       if (method === "flatMap" && children.length === 0) {
         flatMapCallback = buildFlatMapCallback(callback, body, ctx);
       }
+    } else {
+      tryTransformRenderableBody(body);
     }
     if (paramBindings) {
       for (const b of paramBindings)
@@ -8366,7 +8432,9 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   if (ts11.isArrowFunction(node.arguments[0]) && children.length > 0) {
     checkLoopKey(node.arguments[0], ctx, isNested);
   }
-  const key = children.length > 0 ? extractLoopKey(children[0]) : null;
+  const itemConditional = children.length > 0 ? loopBodyItemConditional(children) : null;
+  const bodyIsItemConditional = itemConditional !== null;
+  const key = bodyIsItemConditional ? extractItemConditionalKey(itemConditional) : children.length > 0 ? extractLoopKey(children[0]) : null;
   let childComponent;
   if (children.length === 1 && children[0].type === "component") {
     const comp = children[0];
@@ -8405,6 +8473,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     callsReactiveGetters: callsReactive || undefined,
     hasFunctionCalls: hasCalls || undefined,
     bodyIsMultiRoot: bodyIsMultiRoot || undefined,
+    bodyIsItemConditional: bodyIsItemConditional || undefined,
     childComponent,
     nestedComponents,
     filterPredicate,
@@ -9583,7 +9652,8 @@ function collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings)
         if (!valueStr)
           continue;
         const expanded = expandConstantForReactivity(valueStr, ctx, attr.freeIdentifiers);
-        if (!attr.clientOnly && classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === "none")
+        const reactive = classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== "none" || attr.callsReactiveGetters || attr.hasFunctionCalls;
+        if (!attr.clientOnly && !reactive)
           continue;
         attrs.push({
           childSlotId: el.slotId,
@@ -9697,6 +9767,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
           key: n.key,
           markerId: n.markerId,
           bodyIsMultiRoot: n.bodyIsMultiRoot,
+          bodyIsItemConditional: n.bodyIsItemConditional,
           iterationShape: n.iterationShape,
           containerSlotId: scope.parentSlotId,
           template,
@@ -9911,6 +9982,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
         key: l.key,
         markerId: l.markerId,
         bodyIsMultiRoot: l.bodyIsMultiRoot,
+        bodyIsItemConditional: l.bodyIsItemConditional,
         iterationShape: l.iterationShape,
         template,
         staticItemTemplate,
@@ -10106,6 +10178,7 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
         key: n.key,
         markerId: n.markerId,
         bodyIsMultiRoot: n.bodyIsMultiRoot,
+        bodyIsItemConditional: n.bodyIsItemConditional,
         iterationShape: n.iterationShape,
         template: childTemplate,
         containerSlotId: containerSlot,
@@ -10672,6 +10745,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "getLoopChildren",
   "getLoopNodes",
   "mapArray",
+  "mapArrayAnchored",
   "createDisposableEffect",
   "createComponent",
   "renderChild",
@@ -10695,7 +10769,8 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "qsaChildScopes",
   "upsertChildItem",
   "__slot",
-  "__bfSlot"
+  "__bfSlot",
+  "__bfText"
 ];
 var RUNTIME_MODULE = "@barefootjs/client/runtime";
 var IMPORT_PLACEHOLDER = "/* __BAREFOOTJS_DOM_IMPORTS__ */";
@@ -12691,10 +12766,11 @@ function emitInnerLoopNested(lines, plan) {
   for (const stmt of innerPreludeStatements) {
     lines.push(`        ${stmt}`);
   }
-  for (const comp of comps) {
-    lines.push(`        const __compEl = qsaChildScope(__innerEl, ${comp.selector})`);
-    lines.push(`        if (__compEl) initChild('${nameForRegistryRef(comp.componentName)}', __compEl, ${comp.propsExpr})`);
-  }
+  comps.forEach((comp, i) => {
+    const compElVar = comps.length > 1 ? `__compEl${i}` : "__compEl";
+    lines.push(`        const ${compElVar} = qsaChildScope(__innerEl, ${comp.selector})`);
+    lines.push(`        if (${compElVar}) initChild('${nameForRegistryRef(comp.componentName)}', ${compElVar}, ${comp.propsExpr})`);
+  });
   lines.push(`      })`);
   lines.push(`    })`);
   lines.push(`  }`);
@@ -13516,17 +13592,21 @@ function emitDynamicTextUpdates(lines, ctx) {
     const conditionalElems = elems.filter((e) => e.insideConditional);
     const normalElems = elems.filter((e) => !e.insideConditional);
     if (normalElems.length > 0 || conditionalElems.length > 0) {
+      for (const elem of normalElems) {
+        const v = varSlotId(elem.slotId);
+        lines.push(`  let __anchor_${v} = _${v}`);
+      }
       lines.push(`  createEffect(() => {`);
       if (normalElems.length > 0) {
         lines.push(`    const __val = ${expr}`);
         for (const elem of normalElems) {
           const v = varSlotId(elem.slotId);
-          lines.push(`    if (_${v} && !__val?.__isSlot) _${v}.nodeValue = String(__val ?? '')`);
+          lines.push(`    __anchor_${v} = __bfText(__anchor_${v}, __val)`);
         }
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId);
           lines.push(`    const [__el_${v}] = $t(__scope, '${elem.slotId}')`);
-          lines.push(`    if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`);
+          lines.push(`    __bfText(__el_${v}, __val)`);
         }
       } else {
         lines.push(`    let __val`);
@@ -13534,7 +13614,7 @@ function emitDynamicTextUpdates(lines, ctx) {
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId);
           lines.push(`    const [__el_${v}] = $t(__scope, '${elem.slotId}')`);
-          lines.push(`    if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`);
+          lines.push(`    __bfText(__el_${v}, __val)`);
         }
       }
       lines.push(`  })`);
@@ -14030,8 +14110,14 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
     template,
     reactiveEffects,
     childRefs,
-    bodyIsMultiRoot
+    bodyIsMultiRoot,
+    anchored,
+    anchorKeyExpr
   } = plan;
+  if (anchored) {
+    stringifyAnchoredLoop(lines, plan, topIndent, anchorKeyExpr);
+    return;
+  }
   if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0) {
     const unwrapInline = paramUnwrap ? `${paramUnwrap} ` : "";
     const preamble = mapPreambleWrapped ? `${mapPreambleWrapped}; ` : "";
@@ -14058,6 +14144,41 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
   lines.push(`${bodyIndent}return __el`);
   lines.push(`${topIndent}}, '${markerId}')`);
 }
+function stringifyAnchoredLoop(lines, plan, topIndent, anchorKeyExpr) {
+  const {
+    containerVar,
+    markerId,
+    arrayExpr,
+    keyFn,
+    paramHead,
+    paramUnwrap,
+    indexParam,
+    mapPreambleWrapped,
+    reactiveEffects
+  } = plan;
+  const condSlot = reactiveEffects?.conditionals[0]?.slotId ?? null;
+  lines.push(`${topIndent}mapArrayAnchored(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => {`);
+  const bodyIndent = topIndent + "  ";
+  if (paramUnwrap)
+    lines.push(`${bodyIndent}${paramUnwrap}`);
+  if (mapPreambleWrapped)
+    lines.push(`${bodyIndent}${mapPreambleWrapped}`);
+  lines.push(`${bodyIndent}const __anchor = __existing ?? document.createComment(\`bf-loop-i:\${${anchorKeyExpr}}\`)`);
+  lines.push(`${bodyIndent}let __frag = null`);
+  lines.push(`${bodyIndent}if (!__existing) {`);
+  lines.push(`${bodyIndent}  __frag = document.createDocumentFragment()`);
+  lines.push(`${bodyIndent}  __frag.appendChild(__anchor)`);
+  if (condSlot) {
+    lines.push(`${bodyIndent}  __frag.appendChild(document.createComment('bf-cond-start:${condSlot}'))`);
+    lines.push(`${bodyIndent}  __frag.appendChild(document.createComment('bf-cond-end:${condSlot}'))`);
+  }
+  lines.push(`${bodyIndent}}`);
+  if (reactiveEffects !== null) {
+    stringifyReactiveEffects(lines, reactiveEffects, { indent: bodyIndent, elVar: "__anchor", bodyIsMultiRoot: false });
+  }
+  lines.push(`${bodyIndent}return __frag ?? __anchor`);
+  lines.push(`${topIndent}}, '${markerId}')`);
+}
 function stringifyStaticLoop(lines, plan) {
   const { containerVar, arrayExpr, param, indexParam, childIndexExpr, attrsBySlot, texts, childRefs, csrMaterialize } = plan;
   const hasAttrs = attrsBySlot.length > 0;
@@ -14577,10 +14698,10 @@ function emitArmBody2(lines, body, mode, indent) {
   }
   for (const te of body.textEffects) {
     const v = varSlotId(te.slotId);
-    lines.push(`${indent}const [__el_${v}] = $t(__branchScope, '${te.slotId}')`);
+    lines.push(`${indent}let __anchor_${v} = $t(__branchScope, '${te.slotId}')[0]`);
     lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`);
     lines.push(`${indent}  const __val = ${te.expression}`);
-    lines.push(`${indent}  if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`);
+    lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`);
     lines.push(`${indent}}))`);
   }
   if (body.loops.length > 0) {
@@ -14653,6 +14774,9 @@ function buildComponentLoopPlan(elem) {
 
 // src/ir-to-client-js/control-flow/plan/build-loop.ts
 function buildLoopPlan(elem, opts) {
+  if (elem.bodyIsItemConditional) {
+    return buildPlainLoopPlan(elem);
+  }
   if (elem.isStaticArray) {
     return buildStaticLoopPlan(elem, opts.unsafeLocalNames);
   }
@@ -14682,7 +14806,9 @@ function buildPlainLoopPlan(elem) {
     template: elem.template,
     reactiveEffects: hasReactive2 ? buildLoopReactiveEffectsPlan(elem) : null,
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
-    bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false
+    bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
+    anchored: elem.bodyIsItemConditional ?? false,
+    anchorKeyExpr: elem.key ? wrap(elem.key) : elem.index || "__idx"
   };
 }
 function buildStaticLoopPlan(elem, unsafeLocalNames) {
@@ -15672,18 +15798,25 @@ function runSinglePass(source, filePath, startingCounter) {
   }
   function visit3(node) {
     if (ts15.isJsxAttribute(node) && node.initializer && ts15.isJsxExpression(node.initializer) && node.initializer.expression) {
-      let expr = node.initializer.expression;
-      while (ts15.isParenthesizedExpression(expr))
-        expr = expr.expression;
-      if (ts15.isArrowFunction(expr) && arrowBodyContainsJsx(expr)) {
-        const handled = handleInlineArrow(expr);
-        if (handled) {
-          return;
-        }
+      if (tryHandleArrowValue(node.initializer.expression)) {
+        return;
       }
     }
+    if (ts15.isPropertyAssignment(node) && node.initializer) {
+      if (tryHandleArrowValue(node.initializer))
+        return;
+    }
     ts15.forEachChild(node, visit3);
   }
+  function tryHandleArrowValue(initializer) {
+    let expr = initializer;
+    while (ts15.isParenthesizedExpression(expr))
+      expr = expr.expression;
+    if (ts15.isArrowFunction(expr) && arrowBodyContainsJsx(expr)) {
+      return handleInlineArrow(expr);
+    }
+    return false;
+  }
   function handleInlineArrow(arrow) {
     const paramNames = collectArrowParamNames(arrow);
     const free = collectFreeIdentifiers(arrow);
@@ -18365,6 +18498,7 @@ export {
   rewriteImportsForTemplate,
   resolveSetters,
   resetCompilerCounters,
+  renderImportMapHtml,
   parseExpression,
   parseBlockBody,
   needsTypeBasedDetection,