@barefootjs/vite 0.33.0 → 0.33.2

package/dist/index.js

@@ -5057,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",
@@ -5088,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.",
@@ -5730,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;
   }
@@ -5765,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)) {
@@ -10106,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) {
@@ -10557,6 +10598,31 @@ function unwrapHoistedFragment(node) {
     return node;
   return { ...only, needsScope: true };
 }
+function markDataKeyCarrier(children) {
+  for (let i = 0;i < children.length; i++) {
+    const marked = markCarrierIn(children[i]);
+    if (!marked)
+      continue;
+    const out = children.slice();
+    out[i] = marked;
+    return out;
+  }
+  return children;
+}
+function markCarrierIn(node) {
+  if (node.type === "element") {
+    return { ...node, carriesDataKey: true };
+  }
+  if (node.type === "conditional") {
+    const cond = node;
+    const whenTrue = markCarrierIn(cond.whenTrue);
+    const whenFalse = markCarrierIn(cond.whenFalse);
+    if (!whenTrue && !whenFalse)
+      return null;
+    return { ...cond, whenTrue: whenTrue ?? cond.whenTrue, whenFalse: whenFalse ?? cond.whenFalse };
+  }
+  return null;
+}
 function transformFragment(node, ctx) {
   const isFragmentRoot = ctx.isRoot;
   const isTransparent = isFragmentRoot && isTransparentFragment(node, ctx);
@@ -10567,7 +10633,7 @@ function transformFragment(node, ctx) {
   const needsScopeComment = isFragmentRoot && !isTransparent || undefined;
   return {
     type: "fragment",
-    children,
+    children: needsScopeComment ? markDataKeyCarrier(children) : children,
     transparent: isTransparent || undefined,
     needsScopeComment,
     loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath)
@@ -13222,6 +13288,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) {
@@ -13233,10 +13328,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;
@@ -13251,6 +13343,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") {
@@ -13634,6 +13730,50 @@ function buildIfStatementChain(analyzer, ctx, opts) {
 }
 
 // ../jsx/src/ir-to-client-js/prop-handling.ts
+function resolveRestSpreadOrigin(ctx, name) {
+  const byName = localConstantValues(ctx);
+  const visited = new Set;
+  let current = name.trim();
+  while (current !== undefined && !visited.has(current)) {
+    if (ctx.restPropsName && current === ctx.restPropsName)
+      return "rest";
+    if (ctx.propsObjectName && current === ctx.propsObjectName)
+      return "props";
+    visited.add(current);
+    current = byName.get(current)?.trim();
+  }
+  return null;
+}
+var _localConstantValuesCache = new WeakMap;
+function localConstantValues(ctx) {
+  const cached = _localConstantValuesCache.get(ctx);
+  if (cached)
+    return cached;
+  const byName = new Map;
+  for (const constant of ctx.localConstants) {
+    if (!byName.has(constant.name))
+      byName.set(constant.name, constant.value);
+  }
+  _localConstantValuesCache.set(ctx, byName);
+  return byName;
+}
+var _restSpreadNamesCache = new WeakMap;
+function resolveRestSpreadNames(ctx) {
+  const cached = _restSpreadNamesCache.get(ctx);
+  if (cached)
+    return cached;
+  const names = new Set;
+  if (ctx.restPropsName)
+    names.add(ctx.restPropsName);
+  if (ctx.propsObjectName)
+    names.add(ctx.propsObjectName);
+  for (const constant of ctx.localConstants) {
+    if (resolveRestSpreadOrigin(ctx, constant.name) !== null)
+      names.add(constant.name);
+  }
+  _restSpreadNamesCache.set(ctx, names);
+  return names;
+}
 function expandDynamicPropValue(value, ctx, scope) {
   const trimmedValue = value.trim();
   if (scope?.isBound(trimmedValue))
@@ -13722,6 +13862,9 @@ function decideWrapForChildProp(expandedValue, ctx, prop) {
   return decideWrapForAttr(expandedValue, ctx, prop);
 }
 function needsEffectWrapper(expr, ctx, freeIdentifiers2) {
+  return needsEffectWrapperCore(expr, ctx, freeIdentifiers2, new Set);
+}
+function needsEffectWrapperCore(expr, ctx, freeIdentifiers2, visitedConstants) {
   for (const signal of ctx.signals) {
     if (identifierCallPattern(signal.getter).test(expr)) {
       return true;
@@ -13744,6 +13887,19 @@ function needsEffectWrapper(expr, ctx, freeIdentifiers2) {
     if (propsAccess.test(expr))
       return true;
   }
+  for (const constant of ctx.localConstants) {
+    if (visitedConstants.has(constant.name))
+      continue;
+    if (constant.value === undefined || constant.containsArrow)
+      continue;
+    const referenced = freeIdentifiers2 ? freeIdentifiers2.has(constant.name) : tokenContainsIdent(expr, constant.name);
+    if (!referenced)
+      continue;
+    visitedConstants.add(constant.name);
+    if (needsEffectWrapperCore(constant.value, ctx, constant.freeIdentifiers, visitedConstants)) {
+      return true;
+    }
+  }
   return false;
 }
 function classifyReactivity(expr, ctx, loopParam, loopParamBindings, freeIdentifiers2) {
@@ -14332,10 +14488,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) {
@@ -14359,9 +14516,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",
@@ -14419,24 +14573,14 @@ function jsxChildrenContainComponent(nodes) {
 function isSingleElementJsxChildren2(nodes) {
   return nodes.length === 1 && nodes[0].type === "element";
 }
-function buildRestSpreadNames(ctx) {
-  const names = new Set;
-  if (ctx.restPropsName)
-    names.add(ctx.restPropsName);
-  if (ctx.propsObjectName)
-    names.add(ctx.propsObjectName);
-  return names;
-}
 function buildComponentPropsExpr(props, ctx) {
-  const restName = ctx.restPropsName;
-  const propsObjName = ctx.propsObjectName;
   const knownSpreadProp = props.find((p) => {
     if (p.name !== "..." && !p.name.startsWith("..."))
       return false;
     if (p.value.kind !== "spread" && p.value.kind !== "expression")
       return false;
     const expr = p.value.kind === "spread" ? p.value.expr : p.value.expr;
-    return expr === restName || expr === propsObjName;
+    return resolveRestSpreadOrigin(ctx, expr) !== null;
   });
   const spreadSource = knownSpreadProp ? PROPS_PARAM : null;
   const propsForInit = [];
@@ -14584,13 +14728,13 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
       if (l.childComponent) {
         template = "";
         if (l.isStaticArray && l.children[0]) {
-          staticItemTemplate = irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, undefined, undefined);
+          staticItemTemplate = irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, undefined, undefined);
         }
       } else if (l.children[0] && !projectionInner) {
         const loopParamSpec = [{ param: l.param, bindings: l.paramBindings }];
-        template = useElementReconciliation ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec) : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec);
+        template = useElementReconciliation ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec) : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec);
         if (l.isStaticArray) {
-          staticItemTemplate = useElementReconciliation ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0) : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0);
+          staticItemTemplate = useElementReconciliation ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0) : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0);
         } else if (!useElementReconciliation && !l.bodyIsMultiRoot && !l.bodyIsItemConditional) {
           const skeletonSafeSlots = {
             reactiveAttrKeys: new Set(bindings.reactiveAttrs.map((a) => `${a.childSlotId}::${a.attrName}`)),
@@ -14642,11 +14786,11 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
         preambleRegions: l.preambleRegions,
         flatMapClient: projectionInner ? {
           params: l.index ? `(${l.param}, ${l.index})` : `(${l.param})`,
-          body: renderFlatMapProjectionClientBody(projectionInner, buildRestSpreadNames(ctx)),
+          body: renderFlatMapProjectionClientBody(projectionInner, resolveRestSpreadNames(ctx)),
           keyed: projectionInner.key !== null
         } : l.flatMapCallback ? {
           params: l.flatMapCallback.params,
-          body: renderFlatMapClientBody(l.flatMapCallback, buildRestSpreadNames(ctx)),
+          body: renderFlatMapClientBody(l.flatMapCallback, resolveRestSpreadNames(ctx)),
           keyed: flatMapCallbackHasKeyedLeaf(l.flatMapCallback)
         } : undefined
       });
@@ -14713,10 +14857,9 @@ function collectFromElement(element, ctx, insideConditional = false) {
     for (const attr of element.attrs) {
       if (attr.name === "..." && attr.value) {
         const spreadVal = attrValueToString(attr.value) ?? "";
-        const elemRestName = ctx.restPropsName;
-        const elemPropsObjName = ctx.propsObjectName;
-        if (spreadVal && (spreadVal === elemRestName || spreadVal === elemPropsObjName)) {
-          const consumedKeys = spreadVal === elemRestName ? ctx.propsParams.map((p) => p.sourceName ?? p.name) : [];
+        const spreadOrigin = spreadVal ? resolveRestSpreadOrigin(ctx, spreadVal) : null;
+        if (spreadOrigin !== null) {
+          const consumedKeys = spreadOrigin === "rest" ? ctx.propsParams.map((p) => p.sourceName ?? p.name) : [];
           const staticAttrKeys = element.attrs.filter((a) => a.name !== "...").map((a) => a.name);
           const excludeKeys = [...new Set([...consumedKeys, ...staticAttrKeys])];
           ctx.restAttrElements.push({
@@ -14795,7 +14938,7 @@ function collectBranchTextEffects(node) {
 }
 function collectBranchLoops(node, ctx, siblingOffsets) {
   const loops = [];
-  const restNames = ctx ? buildRestSpreadNames(ctx) : undefined;
+  const restNames = ctx ? resolveRestSpreadNames(ctx) : undefined;
   walkIR(node, null, {
     ...stopAt("conditional", "ifStatement"),
     element: ({ node: el, scope: parentSlotId, descend }) => {
@@ -14863,7 +15006,7 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
   return loops;
 }
 function buildConditionalMetadata(node, ctx, siblingOffsets) {
-  const restNames = buildRestSpreadNames(ctx);
+  const restNames = resolveRestSpreadNames(ctx);
   return {
     slotId: node.slotId,
     condition: node.condition,
@@ -15497,6 +15640,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "mapArrayLazy",
   "patchLeaf",
   "createDisposableEffect",
+  "findCondContainer",
   "createComponent",
   "renderChild",
   "registerComponent",
@@ -16506,12 +16650,9 @@ function emitRegistrationAndHydration(lines, ctx, _ir, graph, inlinability) {
   lines.push("");
   const propNamesForStaticCheck = new Set(ctx.propsParams.map((p) => p.name));
   const { inlinableConstants, unsafeLocalNames } = inlinability ?? buildInlinableConstants(ctx, graph, _ir.root);
-  const restSpreadNames = new Set;
-  if (ctx.restPropsName)
-    restSpreadNames.add(ctx.restPropsName);
-  if (ctx.propsObjectName)
-    restSpreadNames.add(ctx.propsObjectName);
-  const isCommentScope = _ir.root.type === "fragment" && _ir.root.needsScopeComment || _ir.root.type === "component";
+  const restSpreadNames = resolveRestSpreadNames(ctx);
+  const isFragmentRoot = _ir.root.type === "fragment" && !!_ir.root.needsScopeComment;
+  const isCommentScope = isFragmentRoot || _ir.root.type === "component";
   const defParts = [`init: init${name}`];
   if (canGenerateStaticTemplate(_ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
     const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
@@ -16529,6 +16670,9 @@ function emitRegistrationAndHydration(lines, ctx, _ir, graph, inlinability) {
   if (isCommentScope) {
     defParts.push("comment: true");
   }
+  if (isFragmentRoot) {
+    defParts.push("fragmentRoot: true");
+  }
   const registryKey = nameForRegistryRef(name);
   if (registryKey !== name) {
     defParts.push(`name: '${name}'`);
@@ -17354,7 +17498,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})`);
     }
   }
@@ -18004,6 +18149,7 @@ function buildBranchInnerLoopsPlan(args) {
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter
@@ -18018,7 +18164,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) => {
@@ -18102,13 +18248,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
       })
     });
   }
@@ -18148,7 +18296,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,
@@ -18161,6 +18309,7 @@ function buildLoopChildArmPlan(args) {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18214,8 +18363,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 }
       });
     }
@@ -18227,7 +18376,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,
@@ -18241,6 +18390,7 @@ function buildOuterArm(branch, wrap, loopParam, loopParamBindings, profileCompon
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18342,6 +18492,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) => {
@@ -18403,6 +18554,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),
@@ -18415,6 +18573,7 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs
   };
 }
@@ -19367,6 +19526,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") {
@@ -19385,10 +19555,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})`];
@@ -19636,30 +19803,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(`    }`);
@@ -19682,13 +19849,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}`);
         }
       }
@@ -20249,8 +20420,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) {
@@ -20608,6 +20780,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}`,
@@ -21371,6 +21546,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 = [];
@@ -21522,10 +21700,18 @@ var PHASES = [
 
 // ../jsx/src/ir-to-client-js/rewrite-props-object.ts
 import ts20 from "typescript";
-function rewritePropsObjectRef(code, propsObjectName) {
-  const srcPropsName = propsObjectName ?? "props";
-  if (srcPropsName === PROPS_PARAM)
-    return code;
+function rewritePropsObjectRef(code, propsObjectName, restPropsName = null) {
+  let result = code;
+  const seen = new Set;
+  for (const srcPropsName of [propsObjectName ?? "props", restPropsName]) {
+    if (srcPropsName === null || srcPropsName === PROPS_PARAM || seen.has(srcPropsName))
+      continue;
+    seen.add(srcPropsName);
+    result = rewriteOneName(result, srcPropsName);
+  }
+  return result;
+}
+function rewriteOneName(code, srcPropsName) {
   if (!identifierPattern(srcPropsName).test(code))
     return code;
   const sourceFile = ts20.createSourceFile("init-body.ts", code, ts20.ScriptTarget.Latest, true, ts20.ScriptKind.TS);
@@ -21593,7 +21779,7 @@ function generateInitFunction(ir, ctx, siblingComponents, localImportPrefixes) {
   runPhases(lines, phaseCtx, PHASES);
   const hydrateLine = emitRegistrationAndHydration(lines, ctx, ir, graph, inlinability);
   let generatedCode = rewritePropsObjectRef(lines.join(`
-`), ctx.propsObjectName);
+`), ctx.propsObjectName, ctx.restPropsName);
   generatedCode += `
 ` + hydrateLine;
   const moduleConstantsCode = emitModuleLevelDeclarations(classification.moduleLevelConstants, classification.moduleLevelFunctions, classification.moduleLevelSignals, classification.moduleLevelMemos);
@@ -21856,6 +22042,7 @@ function createContext(ir, scope, adapterCapabilities, profile) {
     refElements: [],
     childInits: [],
     deferredChildSlots: new Set,
+    commentScopeRootSlotId: ir.root.type === "component" ? ir.root.slotId : null,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],
@@ -21892,11 +22079,7 @@ function generateTemplateOnlyMount(ir, ctx) {
   const propNamesForStaticCheck = new Set(ctx.propsParams.map((p) => p.name));
   const graph = buildReferencesGraph(ctx, ir.root);
   const { inlinableConstants, unsafeLocalNames } = buildInlinableConstants(ctx, graph, ir.root);
-  const restSpreadNames = new Set;
-  if (ctx.restPropsName)
-    restSpreadNames.add(ctx.restPropsName);
-  if (ctx.propsObjectName)
-    restSpreadNames.add(ctx.propsObjectName);
+  const restSpreadNames = resolveRestSpreadNames(ctx);
   let templateHtml;
   if (canGenerateStaticTemplate(ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
     const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/vite",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "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.33.0"
+    "@barefootjs/shared": "0.33.2"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0",
     "vite": "^6.0.0"
   },
   "devDependencies": {
-    "@barefootjs/client": "0.33.0",
-    "@barefootjs/go-template": "0.33.0",
-    "@barefootjs/hono": "0.33.0",
-    "@barefootjs/jsx": "0.33.0",
+    "@barefootjs/client": "0.33.2",
+    "@barefootjs/go-template": "0.33.2",
+    "@barefootjs/hono": "0.33.2",
+    "@barefootjs/jsx": "0.33.2",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   }