@barefootjs/vite 0.33.0 → 0.33.1

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) {
@@ -13222,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) {
@@ -13233,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;
@@ -13251,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") {
@@ -14332,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) {
@@ -14359,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",
@@ -15497,6 +15566,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "mapArrayLazy",
   "patchLeaf",
   "createDisposableEffect",
+  "findCondContainer",
   "createComponent",
   "renderChild",
   "registerComponent",
@@ -17354,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})`);
     }
   }
@@ -18004,6 +18075,7 @@ function buildBranchInnerLoopsPlan(args) {
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter
@@ -18018,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) => {
@@ -18102,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
       })
     });
   }
@@ -18148,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,
@@ -18161,6 +18235,7 @@ function buildLoopChildArmPlan(args) {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18214,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 }
       });
     }
@@ -18227,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,
@@ -18241,6 +18316,7 @@ function buildOuterArm(branch, wrap, loopParam, loopParamBindings, profileCompon
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18342,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) => {
@@ -18403,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),
@@ -18415,6 +18499,7 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs
   };
 }
@@ -19367,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") {
@@ -19385,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})`];
@@ -19636,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(`    }`);
@@ -19682,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}`);
         }
       }
@@ -20249,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) {
@@ -20608,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}`,
@@ -21371,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 = [];
@@ -21856,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: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/vite",
-  "version": "0.33.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.33.0"
+    "@barefootjs/shared": "0.33.1"
   },
   "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.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"
   }