@barefootjs/vite 0.32.0 → 0.33.1

package/dist/index.js

@@ -183,7 +183,7 @@ function convertNode(node, raw) {
           }
           if (n === undefined || Number.isNaN(n)) {
             const parsedDepth = convertNode(depthNode, raw);
-            if (checkSupport(parsedDepth).supported) {
+            if (checkSupport(parsedDepth, "rendered").supported) {
               depthExpr = parsedDepth;
               flatDepth = 1;
             } else {
@@ -277,10 +277,12 @@ function convertNode(node, raw) {
         const k = objectLiteralKeyName(prop.name);
         if (k === null)
           return { kind: "unsupported", raw, reason: `Unsupported syntax: ${ts.SyntaxKind[node.kind]}` };
-        properties.push({ key: k.key, keyKind: k.keyKind, shorthand: false, value: convertNode(prop.initializer, raw) });
+        properties.push({ kind: "prop", key: k.key, keyKind: k.keyKind, shorthand: false, value: convertNode(prop.initializer, raw) });
       } else if (ts.isShorthandPropertyAssignment(prop)) {
         const key = prop.name.text;
-        properties.push({ key, keyKind: "identifier", shorthand: true, value: { kind: "identifier", name: key } });
+        properties.push({ kind: "prop", key, keyKind: "identifier", shorthand: true, value: { kind: "identifier", name: key } });
+      } else if (ts.isSpreadAssignment(prop)) {
+        properties.push({ kind: "spread", expr: convertNode(prop.expression, raw) });
       } else {
         return { kind: "unsupported", raw, reason: `Unsupported syntax: ${ts.SyntaxKind[node.kind]}` };
       }
@@ -960,14 +962,26 @@ function getUnaryOperatorString(op) {
   }
 }
 function isSupported(expr) {
-  return checkSupport(expr);
+  return checkSupport(expr, "rendered");
 }
-function checkSupport(expr) {
+function isSupportedValue(expr) {
+  return checkSupport(expr, "value");
+}
+function checkSupport(expr, pos) {
   switch (expr.kind) {
     case "unsupported":
       return { supported: false, reason: expr.reason };
-    case "object-literal":
-      return { supported: false, reason: "Unsupported syntax: ObjectLiteralExpression" };
+    case "object-literal": {
+      if (pos !== "value") {
+        return { supported: false, reason: "Unsupported syntax: ObjectLiteralExpression" };
+      }
+      for (const prop of expr.properties) {
+        const propSupport = checkSupport(prop.kind === "spread" ? prop.expr : prop.value, pos);
+        if (!propSupport.supported)
+          return propSupport;
+      }
+      return { supported: true, level: "L2" };
+    }
     case "identifier":
       return { supported: true, level: "L1" };
     case "literal":
@@ -977,7 +991,7 @@ function checkSupport(expr) {
       return { supported: false, reason: "Standalone arrow functions / regex literals are not supported" };
     case "array-literal": {
       for (const el of expr.elements) {
-        const elSupport = checkSupport(el);
+        const elSupport = checkSupport(el, pos);
         if (!elSupport.supported)
           return elSupport;
       }
@@ -990,16 +1004,16 @@ function checkSupport(expr) {
           reason: `String.prototype.${expr.method} supports only a string pattern + string replacement (the regex form is deferred); use a string pattern or wrap the expression in /* @client */`
         };
       }
-      const objSupport = checkSupport(expr.object);
+      const objSupport = checkSupport(expr.object, pos);
       if (!objSupport.supported)
         return objSupport;
       for (const arg of expr.args) {
-        const argSupport = checkSupport(arg);
+        const argSupport = checkSupport(arg, pos);
         if (!argSupport.supported)
           return argSupport;
       }
       if (expr.method === "flat" && expr.depthExpr) {
-        const depthSupport = checkSupport(expr.depthExpr);
+        const depthSupport = checkSupport(expr.depthExpr, pos);
         if (!depthSupport.supported)
           return depthSupport;
       }
@@ -1008,10 +1022,10 @@ function checkSupport(expr) {
     case "call": {
       const cb = asCallbackMethodCall(expr);
       if (cb) {
-        const objSupport = checkSupport(cb.object);
+        const objSupport = checkSupport(cb.object, pos);
         if (!objSupport.supported)
           return objSupport;
-        const bodySupport = checkSupport(cb.arrow.body);
+        const bodySupport = checkSupport(cb.arrow.body, pos);
         if (!bodySupport.supported) {
           return {
             supported: false,
@@ -1020,13 +1034,13 @@ function checkSupport(expr) {
           };
         }
         for (const rest of cb.args) {
-          const restSupport = checkSupport(rest);
+          const restSupport = checkSupport(rest, pos);
           if (!restSupport.supported)
             return restSupport;
         }
         return { supported: true, level: "L5" };
       }
-      const calleeSupport = checkSupport(expr.callee);
+      const calleeSupport = checkSupport(expr.callee, pos);
       if (!calleeSupport.supported) {
         return calleeSupport;
       }
@@ -1045,7 +1059,7 @@ function checkSupport(expr) {
         return { supported: true, level: "L1" };
       }
       for (const arg of expr.args) {
-        const argSupport = checkSupport(arg);
+        const argSupport = checkSupport(arg, pos);
         if (!argSupport.supported) {
           return argSupport;
         }
@@ -1053,7 +1067,7 @@ function checkSupport(expr) {
       return { supported: true, level: "L2" };
     }
     case "member": {
-      const objSupport = checkSupport(expr.object);
+      const objSupport = checkSupport(expr.object, pos);
       if (!objSupport.supported) {
         return objSupport;
       }
@@ -1063,19 +1077,19 @@ function checkSupport(expr) {
       return { supported: true, level: "L2" };
     }
     case "index-access": {
-      const objSupport = checkSupport(expr.object);
+      const objSupport = checkSupport(expr.object, pos);
       if (!objSupport.supported)
         return objSupport;
-      const indexSupport = checkSupport(expr.index);
+      const indexSupport = checkSupport(expr.index, pos);
       if (!indexSupport.supported)
         return indexSupport;
       return { supported: true, level: "L2" };
     }
     case "binary": {
-      const leftSupport = checkSupport(expr.left);
+      const leftSupport = checkSupport(expr.left, pos);
       if (!leftSupport.supported)
         return leftSupport;
-      const rightSupport = checkSupport(expr.right);
+      const rightSupport = checkSupport(expr.right, pos);
       if (!rightSupport.supported)
         return rightSupport;
       if (["===", "==", "!==", "!=", ">", "<", ">=", "<="].includes(expr.op)) {
@@ -1087,7 +1101,7 @@ function checkSupport(expr) {
       return { supported: false, reason: `Unknown operator: ${expr.op}` };
     }
     case "unary": {
-      const argSupport = checkSupport(expr.argument);
+      const argSupport = checkSupport(expr.argument, pos);
       if (!argSupport.supported)
         return argSupport;
       if (expr.op === "!") {
@@ -1099,25 +1113,25 @@ function checkSupport(expr) {
       return { supported: false, reason: `Unsupported unary operator: ${expr.op}` };
     }
     case "logical": {
-      const leftSupport = checkSupport(expr.left);
+      const leftSupport = checkSupport(expr.left, pos);
       if (!leftSupport.supported)
         return leftSupport;
       if (expr.op === "??" && expr.right.kind === "object-literal" && expr.right.properties.length === 0) {
         return { supported: true, level: "L4" };
       }
-      const rightSupport = checkSupport(expr.right);
+      const rightSupport = checkSupport(expr.right, pos);
       if (!rightSupport.supported)
         return rightSupport;
       return { supported: true, level: "L4" };
     }
     case "conditional": {
-      const testSupport = checkSupport(expr.test);
+      const testSupport = checkSupport(expr.test, pos);
       if (!testSupport.supported)
         return testSupport;
-      const consSupport = checkSupport(expr.consequent);
+      const consSupport = checkSupport(expr.consequent, pos);
       if (!consSupport.supported)
         return consSupport;
-      const altSupport = checkSupport(expr.alternate);
+      const altSupport = checkSupport(expr.alternate, pos);
       if (!altSupport.supported)
         return altSupport;
       return { supported: true, level: "L4" };
@@ -1125,7 +1139,7 @@ function checkSupport(expr) {
     case "template-literal": {
       for (const part of expr.parts) {
         if (part.type === "expression") {
-          const partSupport = checkSupport(part.expr);
+          const partSupport = checkSupport(part.expr, pos);
           if (!partSupport.supported)
             return partSupport;
         }
@@ -1250,7 +1264,7 @@ function isPureInit(e, pureCallNames) {
     case "array-literal":
       return e.elements.every(pure);
     case "object-literal":
-      return e.properties.every((p) => pure(p.value));
+      return e.properties.every((p) => pure(p.kind === "spread" ? p.expr : p.value));
     case "call":
       return e.callee.kind === "identifier" && e.args.length === 0 && pureCallNames !== undefined && pureCallNames.has(e.callee.name);
     case "array-method":
@@ -1304,7 +1318,7 @@ function usesPerPath(name, expr) {
         }
         return add(walk(e.object), sum(e.args));
       case "object-literal":
-        return sum(e.properties.map((p) => p.value));
+        return sum(e.properties.map((p) => p.kind === "spread" ? p.expr : p.value));
       case "arrow":
         return walk(e.body).max > 0 ? { min: 0, max: Number.POSITIVE_INFINITY } : { min: 0, max: 0 };
     }
@@ -1370,7 +1384,7 @@ function inlineBinding(expr, name, value) {
       case "object-literal":
         return {
           kind: "object-literal",
-          properties: e.properties.map((p) => ({ ...p, value: walk(p.value, enclosing) })),
+          properties: e.properties.map((p) => p.kind === "spread" ? { ...p, expr: walk(p.expr, enclosing) } : { ...p, value: walk(p.value, enclosing) }),
           raw: e.raw
         };
       case "literal":
@@ -1566,7 +1580,7 @@ function freeIdentifiers(expr) {
         return true;
       case "object-literal":
         for (const p of e.properties)
-          if (!visit(p.value, bound))
+          if (!visit(p.kind === "spread" ? p.expr : p.value, bound))
             return false;
         return true;
       case "arrow": {
@@ -5043,6 +5057,7 @@ var ErrorCodes = {
   MISSING_KEY_IN_LIST: "BF023",
   MISSING_KEY_IN_NESTED_LIST: "BF024",
   UNSUPPORTED_DESTRUCTURE_REST: "BF025",
+  RETURN_VALUE_NOT_JSX: "BF027",
   PROPS_DESTRUCTURING: "BF043",
   SIGNAL_GETTER_NOT_CALLED: "BF044",
   JSX_IN_LOCAL_FUNCTION: "BF045",
@@ -5074,6 +5089,7 @@ var errorMessages = {
   [ErrorCodes.MISSING_KEY_IN_LIST]: "Missing key attribute in list rendering. Add a key prop for efficient updates",
   [ErrorCodes.MISSING_KEY_IN_NESTED_LIST]: "Nested .map() loop requires key attribute for event delegation. Add a key prop to elements in the inner loop",
   [ErrorCodes.UNSUPPORTED_DESTRUCTURE_REST]: "Computed property key in .map() callback destructure is not supported. Rewrite the callback to destructure explicit bindings (e.g., `({ a, b }) => ...`) so the compiler can rewrite references to per-item signal accessors.",
+  [ErrorCodes.RETURN_VALUE_NOT_JSX]: "Component's return value is not recognized as JSX — return the JSX expression directly instead of binding it to a local variable first.",
   [ErrorCodes.PROPS_DESTRUCTURING]: "Props destructuring in function parameters breaks reactivity. Use props object directly.",
   [ErrorCodes.SIGNAL_GETTER_NOT_CALLED]: "Signal/memo getter passed without calling it. Use getter() to read the value.",
   [ErrorCodes.JSX_IN_LOCAL_FUNCTION]: "Local function returns JSX but cannot be inlined. Extract it as a top-level PascalCase component or use a single return statement.",
@@ -5716,6 +5732,14 @@ function visitComponentBody(node, ctx) {
     }
   }
   if (isTopLevel && (ts9.isTryStatement(node) || ts9.isSwitchStatement(node) || ts9.isForStatement(node) || ts9.isForInStatement(node) || ts9.isForOfStatement(node) || ts9.isWhileStatement(node) || ts9.isDoStatement(node) || ts9.isThrowStatement(node) || ts9.isBlock(node) && node.parent === ctx.componentBodyBlock)) {
+    if (ts9.isBlock(node)) {
+      const returnedLocal = findBlockBodyReturnedJsxLocalName(node);
+      if (returnedLocal) {
+        ctx.errors.push(createError(ErrorCodes.RETURN_VALUE_NOT_JSX, getSourceLocation(node, ctx.sourceFile, ctx.filePath), {
+          message: `Component '${ctx.componentName ?? "(unknown)"}' return value is not recognized ` + `as JSX — return the JSX expression directly instead of binding it to a local ` + `variable first (\`return ${returnedLocal}\` after \`const ${returnedLocal} = ` + `<jsx/>\` is not resolved at return position).`
+        }));
+      }
+    }
     collectInitStatement(node, ctx);
     return;
   }
@@ -5751,6 +5775,31 @@ function unwrapJsxTransparent(expr) {
   }
   return current;
 }
+function findBlockBodyReturnedJsxLocalName(block) {
+  const stmts = block.statements;
+  const last = stmts[stmts.length - 1];
+  if (!last || !ts9.isReturnStatement(last) || !last.expression)
+    return null;
+  const returned = unwrapJsxTransparent(last.expression);
+  if (!ts9.isIdentifier(returned))
+    return null;
+  const name = returned.text;
+  for (const stmt of stmts) {
+    if (!ts9.isVariableStatement(stmt))
+      continue;
+    for (const decl of stmt.declarationList.declarations) {
+      if (!ts9.isIdentifier(decl.name) || decl.name.text !== name || !decl.initializer)
+        continue;
+      let init = decl.initializer;
+      while (ts9.isParenthesizedExpression(init))
+        init = init.expression;
+      if (ts9.isJsxElement(init) || ts9.isJsxSelfClosingElement(init) || ts9.isJsxFragment(init) || initializerShapeContainsJsx(init) || isMapLikeCallWithJsx(init)) {
+        return name;
+      }
+    }
+  }
+  return null;
+}
 function extractJsxFromExpression(expr) {
   const inner = unwrapJsxTransparent(expr);
   if (ts9.isJsxElement(inner) || ts9.isJsxFragment(inner) || ts9.isJsxSelfClosingElement(inner)) {
@@ -9518,6 +9567,8 @@ function matchToLocaleDateStringCall(callee, args, metadata) {
   let tz = null;
   const probeOptions = {};
   for (const prop of options.properties) {
+    if (prop.kind === "spread")
+      return null;
     if (prop.value.kind !== "literal" || prop.value.literalType !== "string")
       return null;
     const value = String(prop.value.value);
@@ -10090,8 +10141,14 @@ function buildIRRoot(analyzer) {
   }
   ctx.isRoot = false;
   const ir = transformJsxExpression(jsxReturn, ctx);
-  if (ir === null)
+  if (ir === null) {
+    if (ts13.isIdentifier(jsxReturn) && (analyzer.jsxConstants.has(jsxReturn.text) || analyzer.inlineableJsxConsts.has(jsxReturn.text))) {
+      analyzer.errors.push(createError(ErrorCodes.RETURN_VALUE_NOT_JSX, getSourceLocation(jsxReturn, analyzer.sourceFile, analyzer.filePath), {
+        message: `Component '${analyzer.componentName ?? "(unknown)"}' return value is not recognized ` + `as JSX — return the JSX expression directly instead of binding it to a local variable ` + `first (\`return ${jsxReturn.text}\` after \`const ${jsxReturn.text} = <jsx/>\` is not ` + `resolved at return position).`
+      }));
+    }
     return null;
+  }
   return wrapInScopeElement(ir);
 }
 function needsScopeWrapper(ir) {
@@ -11282,7 +11339,10 @@ function resolveCallbackMethodFunctionReferences(expr, analyzer, bound = EMPTY_B
           ...e.method === "flat" && e.depthExpr ? { depthExpr: visit2(e.depthExpr, bound2) } : {}
         };
       case "object-literal":
-        return { ...e, properties: e.properties.map((p) => ({ ...p, value: visit2(p.value, bound2) })) };
+        return {
+          ...e,
+          properties: e.properties.map((p) => p.kind === "spread" ? { ...p, expr: visit2(p.expr, bound2) } : { ...p, value: visit2(p.value, bound2) })
+        };
       case "arrow": {
         const inner = e.params.length === 0 ? bound2 : new Set([...bound2, ...e.params]);
         return { ...e, body: visit2(e.body, inner) };
@@ -13203,6 +13263,35 @@ function getStringValue(node) {
   }
   return null;
 }
+function unwrapTransparentTsWrappers(node) {
+  let n = node;
+  while (ts13.isParenthesizedExpression(n) || ts13.isAsExpression(n) || ts13.isSatisfiesExpression(n) || ts13.isNonNullExpression(n)) {
+    n = n.expression;
+  }
+  return n;
+}
+function expressionWrapsJsx(node) {
+  const n = unwrapTransparentTsWrappers(node);
+  if (ts13.isJsxElement(n) || ts13.isJsxSelfClosingElement(n) || ts13.isJsxFragment(n))
+    return true;
+  if (ts13.isConditionalExpression(n)) {
+    return expressionWrapsJsx(n.whenTrue) || expressionWrapsJsx(n.whenFalse);
+  }
+  if (ts13.isArrayLiteralExpression(n)) {
+    return n.elements.some((el) => expressionWrapsJsx(ts13.isSpreadElement(el) ? el.expression : el));
+  }
+  return false;
+}
+function reportNakedJsxWrapperProp(ctx, attr, propName, jsxExpr) {
+  const shape = ts13.isConditionalExpression(jsxExpr) ? "a ternary" : "an array literal";
+  ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(attr, ctx.sourceFile, ctx.filePath), {
+    message: `Prop '${propName}' is ${shape} wrapping JSX (${jsxExpr.getText(ctx.sourceFile)}). ` + `This shape is not compiled — only a JSX element/fragment given DIRECTLY as the prop value is.`,
+    suggestion: {
+      message: `Move the conditional/array out of the prop position: compute it in a local ` + `const and pass it as the component's children instead of a named prop ` + `(e.g. const ${propName} = ${jsxExpr.getText(ctx.sourceFile)}; <Comp>{${propName}}</Comp>). ` + `Wrapping the ternary/array in a fragment at the prop position ` + `(${propName}={<>{${jsxExpr.getText(ctx.sourceFile)}}</>}) is NOT a safe escape here: it compiles, ` + `but the child's own reactive prop getter receives the branch's HTML unbranded and re-escapes it as ` + `text on the child's very next reactive run, corrupting the DOM (a narrower gap #2651's door ` + `inventory left open — tracked separately).`,
+      escape: [{ kind: "rewrite" }]
+    }
+  }));
+}
 function processComponentProps(attributes, ctx) {
   const props = [];
   for (const attr of attributes.properties) {
@@ -13214,10 +13303,7 @@ function processComponentProps(attributes, ctx) {
       continue;
     const name = attr.name.getText(ctx.sourceFile);
     if (attr.initializer && ts13.isJsxExpression(attr.initializer) && attr.initializer.expression) {
-      let jsxExpr = attr.initializer.expression;
-      while (ts13.isParenthesizedExpression(jsxExpr)) {
-        jsxExpr = jsxExpr.expression;
-      }
+      const jsxExpr = unwrapTransparentTsWrappers(attr.initializer.expression);
       if (ts13.isJsxElement(jsxExpr) || ts13.isJsxSelfClosingElement(jsxExpr) || ts13.isJsxFragment(jsxExpr)) {
         const prevInsideComponentChildren = ctx.insideComponentChildren;
         ctx.insideComponentChildren = true;
@@ -13232,6 +13318,10 @@ function processComponentProps(attributes, ctx) {
           continue;
         }
       }
+      if ((ts13.isConditionalExpression(jsxExpr) || ts13.isArrayLiteralExpression(jsxExpr)) && expressionWrapsJsx(jsxExpr)) {
+        reportNakedJsxWrapperProp(ctx, attr, name, jsxExpr);
+        continue;
+      }
     }
     let value = getAttributeValue(attr, ctx);
     if (value.kind === "template") {
@@ -14313,10 +14403,11 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
         const innerPreambleNames = preambleNamesOf(n);
         if (ctx) {
           for (const child of n.children) {
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index));
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index));
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index));
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index));
             bindings.refs.push(...collectLoopChildRefs(child));
           }
+          bindings.conditionals.push(...collectLoopChildConditionals({ type: "fragment", children: n.children, loc: n.loc }, ctx, siblingOffsets, n.param, n.paramBindings, innerPreambleNames, n.index));
         }
         let childComponents;
         if (collectBindings) {
@@ -14340,9 +14431,6 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
           for (const child of n.children) {
             bindings.events.push(...collectLoopChildEventsWithNesting(child));
           }
-          if (ctx) {
-            bindings.conditionals.push(...collectLoopChildConditionals({ type: "fragment", children: n.children, loc: n.loc }, ctx, siblingOffsets, n.param, n.paramBindings, innerPreambleNames, n.index));
-          }
         }
         result.push({
           kind: "nested",
@@ -15478,6 +15566,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "mapArrayLazy",
   "patchLeaf",
   "createDisposableEffect",
+  "findCondContainer",
   "createComponent",
   "renderChild",
   "registerComponent",
@@ -17335,7 +17424,8 @@ function emitProviderAndChildInits(lines, ctx) {
         lines.push(`  upsertChild(__scope, '${registryName}', '${child.slotId}', ${child.propsExpr})`);
         continue;
       }
-      const scopeRef = child.slotId ? `_${varSlotId(child.slotId)}` : "__scope";
+      const isCommentRoot = child.slotId !== null && child.slotId === ctx.commentScopeRootSlotId;
+      const scopeRef = !child.slotId || isCommentRoot ? "__scope" : `_${varSlotId(child.slotId)}`;
       lines.push(`  initChild('${registryName}', ${scopeRef}, ${child.propsExpr})`);
     }
   }
@@ -17985,6 +18075,7 @@ function buildBranchInnerLoopsPlan(args) {
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter
@@ -17999,7 +18090,7 @@ function buildBranchInnerLoopsPlan(args) {
     const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
     const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings);
     const csl = inner.containerSlotId;
-    const containerExpr = csl ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST}="\${__scopeId}"][${BF_AT}="${csl}"]\`) ?? ${scopeVar})` : scopeVar;
+    const containerExpr = csl ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST}="\${__scopeId}"][${BF_AT}="${csl}"]\`) ?? ${scopeVar})` : `findCondContainer(${scopeVar}, '${condSlotId}')`;
     const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
     const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
     const wrapIRNode = (node) => {
@@ -18083,13 +18174,15 @@ function buildLoopChildConditionalsPlan(args) {
         branch: cond.whenTrue,
         wrap,
         loopParam,
-        loopParamBindings
+        loopParamBindings,
+        condId: cond.slotId
       }),
       whenFalseArm: buildLoopChildArmPlan({
         branch: cond.whenFalse,
         wrap,
         loopParam,
-        loopParamBindings
+        loopParamBindings,
+        condId: cond.slotId
       })
     });
   }
@@ -18129,7 +18222,7 @@ function buildArmTextsPlan(texts, wrap) {
   }));
 }
 function buildLoopChildArmPlan(args) {
-  const { branch, wrap, loopParam, loopParamBindings } = args;
+  const { branch, wrap, loopParam, loopParamBindings, condId } = args;
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -18142,6 +18235,7 @@ function buildLoopChildArmPlan(args) {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18195,8 +18289,8 @@ function buildReactiveEffectsPlan(args) {
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
         ...cond.readsPreamble && { readsPreamble: true }
       });
     }
@@ -18208,7 +18302,7 @@ function buildReactiveEffectsPlan(args) {
     profileComponentName
   };
 }
-function buildOuterArm(branch, wrap, loopParam, loopParamBindings, profileComponentName) {
+function buildOuterArm(branch, wrap, loopParam, loopParamBindings, condSlotId, profileComponentName) {
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -18222,6 +18316,7 @@ function buildOuterArm(branch, wrap, loopParam, loopParamBindings, profileCompon
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18323,6 +18418,7 @@ function buildInnerLoopsPlan(args) {
 }
 function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings) {
   const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
+  const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
   const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
   const wrapIRNode = (node) => {
@@ -18384,6 +18480,13 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
     }));
   }
   const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings);
+  const conditionals = buildLoopChildConditionalsPlan({
+    conditionals: inner.bindings.conditionals,
+    scopeVar: `__innerEl${uidSuffix}`,
+    wrap: wrapBoth,
+    loopParam: inner.param,
+    loopParamBindings: inner.paramBindings
+  });
   return {
     mode: "reactive",
     keyFn: loopKeyFn(inner),
@@ -18396,6 +18499,7 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs
   };
 }
@@ -19348,6 +19452,17 @@ function bindingIdArg(ctx, slotId) {
     return "";
   return `, ${JSON.stringify(`${ctx.componentName}#binding:${slotId}`)}`;
 }
+function emitValueUpdateStatements(target, expression) {
+  return [
+    `const __val = String(${expression})`,
+    `if ('value' in ${target}) { if (${target}.value !== __val) ${target}.value = __val } else { ${target}.setAttribute('value', __val) }`
+  ];
+}
+function emitChildValueMirrorStatements(target, expression) {
+  return [
+    `if ('value' in ${target}) { const __val = String(${expression}); if (${target}.value !== __val) ${target}.value = __val }`
+  ];
+}
 function emitAttrUpdate(target, attrName, expression, meta) {
   const htmlName = toHTMLAttrName(attrName);
   if (attrName === "dangerouslySetInnerHTML" || htmlName === "dangerouslySetInnerHTML") {
@@ -19366,10 +19481,7 @@ function emitAttrUpdate(target, attrName, expression, meta) {
     ];
   }
   if (htmlName === "value") {
-    return [
-      `const __val = String(${expression})`,
-      `if (${target}.value !== __val) ${target}.value = __val`
-    ];
+    return emitValueUpdateStatements(target, expression);
   }
   if (isBooleanAttr(htmlName)) {
     return [`${target}.${htmlName} = !!(${expression})`];
@@ -19617,30 +19729,30 @@ function emitReactivePropBindings(lines, ctx) {
       propsBySlot.get(prop.slotId).push(prop);
     }
     for (const [slotId, props] of propsBySlot) {
-      const v = varSlotId(slotId);
-      lines.push(`    if (_${v}) {`);
+      const ref = slotId === ctx.commentScopeRootSlotId ? "__scope" : `_${varSlotId(slotId)}`;
+      lines.push(`    if (${ref}) {`);
       for (const prop of props) {
         const value = `${prop.expression}()`;
         if (prop.propName === "selected") {
           if (prop.componentName === "TabsContent") {
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
             lines.push(`      if (${value}) {`);
-            lines.push(`        _${v}.classList.remove('hidden')`);
+            lines.push(`        ${ref}.classList.remove('hidden')`);
             lines.push(`      } else {`);
-            lines.push(`        _${v}.classList.add('hidden')`);
+            lines.push(`        ${ref}.classList.add('hidden')`);
             lines.push(`      }`);
           } else {
-            lines.push(`      _${v}.setAttribute('aria-selected', String(${value}))`);
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
-            lines.push(`      _${v}.setAttribute('tabindex', ${value} ? '0' : '-1')`);
+            lines.push(`      ${ref}.setAttribute('aria-selected', String(${value}))`);
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
+            lines.push(`      ${ref}.setAttribute('tabindex', ${value} ? '0' : '-1')`);
           }
         } else if (prop.propName === "value") {
-          lines.push(`      const __val = String(${value})`);
-          lines.push(`      if (_${v}.value !== __val) _${v}.value = __val`);
+          for (const stmt of emitChildValueMirrorStatements(ref, value))
+            lines.push(`      ${stmt}`);
         } else if (isBooleanAttr(prop.propName)) {
-          lines.push(`      _${v}.${prop.propName} = !!(${value})`);
+          lines.push(`      ${ref}.${prop.propName} = !!(${value})`);
         } else {
-          lines.push(`      _${v}.setAttribute('${prop.propName}', String(${value}))`);
+          lines.push(`      ${ref}.setAttribute('${prop.propName}', String(${value}))`);
         }
       }
       lines.push(`    }`);
@@ -19663,13 +19775,17 @@ function emitReactiveChildProps(lines, ctx) {
     }
     for (const [, props] of propsByComponent) {
       const first = props[0];
+      const isCommentRoot = first.slotId !== null && first.slotId === ctx.commentScopeRootSlotId;
       const varSuffix = first.slotId ? varSlotId(first.slotId).replace(/-/g, "_") : first.componentName;
-      const varName = `__${first.componentName}_${varSuffix}El`;
-      const selectorArg = first.slotId ? first.slotId : first.componentName;
-      lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`);
+      const varName = isCommentRoot ? "__scope" : `__${first.componentName}_${varSuffix}El`;
+      if (!isCommentRoot) {
+        const selectorArg = first.slotId ? first.slotId : first.componentName;
+        lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`);
+      }
       lines.push(`    if (${varName}) {`);
       for (const prop of props) {
-        for (const stmt of emitAttrUpdate(varName, prop.attrName, prop.expression, prop)) {
+        const stmts = toHTMLAttrName(prop.attrName) === "value" ? emitChildValueMirrorStatements(varName, prop.expression) : emitAttrUpdate(varName, prop.attrName, prop.expression, prop);
+        for (const stmt of stmts) {
           lines.push(`      ${stmt}`);
         }
       }
@@ -20230,8 +20346,9 @@ function seedDiffersExpr(target, a) {
     return `${target}.getAttribute('style') !== styleToCss(__x)`;
   if (html === "class")
     return `${target}.getAttribute('class') !== (__x != null ? String(__x) : null)`;
-  if (html === "value")
-    return `${target}.value !== String(__x)`;
+  if (html === "value") {
+    return `('value' in ${target} ? ${target}.value !== String(__x) : ${target}.getAttribute('value') !== String(__x))`;
+  }
   if (isBooleanAttr(html))
     return `${target}.${html} !== !!(__x)`;
   if (a.meta.presenceOrUndefined) {
@@ -20589,6 +20706,9 @@ function emitReactive(lines, inner, indent, pc) {
     }
     lines.push(`${indent}  }${profileBindingId(pc, attr.slotId)}) }`);
   }
+  if (emit.conditionals.length > 0) {
+    stringifyLoopChildConditionals(lines, emit.conditionals, `${indent}  `, pc);
+  }
   emitLoopChildRefs(lines, emit.childRefs, {
     indent: `${indent}  `,
     elVar: `__innerEl${uid}`,
@@ -21352,6 +21472,9 @@ function generateElementRefs(ctx) {
   for (const slotId of componentSlots) {
     regularSlots.delete(slotId);
   }
+  if (ctx.commentScopeRootSlotId) {
+    componentSlots.delete(ctx.commentScopeRootSlotId);
+  }
   if (regularSlots.size === 0 && componentSlots.size === 0)
     return "";
   const refLines = [];
@@ -21837,6 +21960,7 @@ function createContext(ir, scope, adapterCapabilities, profile) {
     refElements: [],
     childInits: [],
     deferredChildSlots: new Set,
+    commentScopeRootSlotId: ir.root.type === "component" ? ir.root.slotId : null,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],
@@ -22819,12 +22943,38 @@ function evalNode(node, ctx) {
     const baseResult = evalNode(node.expression, ctx);
     if (baseResult === undefined)
       return;
-    return UNRESOLVED;
+    if (baseResult === UNRESOLVED || baseResult === null || typeof baseResult !== "object") {
+      return UNRESOLVED;
+    }
+    const proto = Object.getPrototypeOf(baseResult);
+    if (proto !== Object.prototype && proto !== null)
+      return UNRESOLVED;
+    const key = node.name.text;
+    return Object.prototype.hasOwnProperty.call(baseResult, key) ? baseResult[key] : undefined;
   }
   if (ts22.isCallExpression(node)) {
     if (node.arguments.length === 0 && ts22.isIdentifier(node.expression) && node.expression.text in ctx.bindings) {
       return ctx.bindings[node.expression.text];
     }
+    if (ts22.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map" && node.arguments.length === 1) {
+      const arrow = node.arguments[0];
+      if (ts22.isArrowFunction(arrow) && arrow.parameters.length === 1 && ts22.isIdentifier(arrow.parameters[0].name) && !ts22.isBlock(arrow.body)) {
+        const recv = evalNode(node.expression.expression, ctx);
+        if (Array.isArray(recv)) {
+          const paramName = arrow.parameters[0].name.text;
+          const mapped = [];
+          for (const item of recv) {
+            const localBindings = { ...ctx.bindings, [paramName]: item };
+            const v = evalNode(arrow.body, { ...ctx, bindings: localBindings });
+            if (v === UNRESOLVED)
+              return UNRESOLVED;
+            mapped.push(v === undefined ? null : v);
+          }
+          return mapped;
+        }
+      }
+      return UNRESOLVED;
+    }
     if (ts22.isPropertyAccessExpression(node.expression) && node.expression.name.text === "join") {
       const recv = evalNode(node.expression.expression, ctx);
       if (Array.isArray(recv)) {
@@ -23011,7 +23161,7 @@ function evalStringArrayJoin(source) {
 
 // ../jsx/src/ssr-seed-plan.ts
 function classify2(name, origin, expr, parsed, available) {
-  if (!isSupported(parsed).supported)
+  if (!isSupportedValue(parsed).supported)
     return { kind: "opaque", name, origin };
   const frees = freeIdentifiers(parsed);
   if (frees === null)
@@ -23074,7 +23224,7 @@ function computeSsrSeedPlan(metadata) {
       }
     }
     const expr = signal.initialValue.trim();
-    steps.push(expr === "" ? { kind: "opaque", name: signal.getter, origin: "signal" } : classify2(signal.getter, "signal", expr, resolveThroughLocalConsts(parseExpression(expr), localConsts), available));
+    steps.push(expr === "" ? { kind: "opaque", name: signal.getter, origin: "signal" } : classify2(signal.getter, "signal", expr, resolveThroughLocalConsts(signal.parsed ?? parseExpression(`(${expr})`), localConsts), available));
     available.add(signal.getter);
   }
   for (const memo of metadata.memos) {
@@ -23238,7 +23388,7 @@ function checkExpr(expr, loc, meta, bindings, matchers, errors, seen) {
       break;
     case "object-literal":
       for (const prop of expr.properties)
-        recurse(prop.value);
+        recurse(prop.kind === "spread" ? prop.expr : prop.value);
       break;
     case "array-method":
       recurse(expr.object);
@@ -24569,6 +24719,8 @@ function matchQueryHrefCall(callee, args, localNames) {
     return null;
   const triples = [];
   for (const p of obj.properties) {
+    if (p.kind === "spread")
+      return null;
     const v = p.value;
     if (v.kind === "conditional" && isOmitBranch(v.alternate)) {
       triples.push({ guard: v.test, key: p.key, value: v.consequent });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/vite",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "description": "Vite plugin for BarefootJS: Vite/Rollup owns bundling, hashing, chunking, tree-shaking and minification of client assets, BarefootJS keeps only the JSX to (template, client JS) compile",
   "type": "module",
   "main": "./dist/index.js",
@@ -38,17 +38,17 @@
     "directory": "packages/vite"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.32.0"
+    "@barefootjs/shared": "0.33.1"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0",
     "vite": "^6.0.0"
   },
   "devDependencies": {
-    "@barefootjs/client": "0.32.0",
-    "@barefootjs/go-template": "0.32.0",
-    "@barefootjs/hono": "0.32.0",
-    "@barefootjs/jsx": "0.32.0",
+    "@barefootjs/client": "0.33.1",
+    "@barefootjs/go-template": "0.33.1",
+    "@barefootjs/hono": "0.33.1",
+    "@barefootjs/jsx": "0.33.1",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   }