@barefootjs/vite 0.33.3 → 0.33.4

package/dist/index.js

@@ -3233,6 +3233,9 @@ function renderTemplateAttrPart(attr, attrName, wrap, restSpreadNames) {
       return "";
   }
 }
+function resolvedKeyAttrName(node, loopDepth) {
+  return node.keyAttr ? keyAttrName2(loopDepth) : null;
+}
 function isMergeableAttr(a, ctx) {
   if (ctx.honorClientOnly && a.clientOnly)
     return false;
@@ -3409,8 +3412,11 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
         if (useMerge && isMergeableAttr(a, mergeCtx)) {
           return idx === firstMergeableIdx ? mergeCall : "";
         }
-        const attrName = a.name === "..." ? "..." : a.name === "key" ? keyAttrName2(loopDepth) : toHTMLAttrName(a.name);
-        return renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames);
+        if (a.name === "key") {
+          const attrName = resolvedKeyAttrName(node, loopDepth);
+          return attrName ? renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames) : "";
+        }
+        return renderTemplateAttrPart(a, toHTMLAttrName(a.name), wrapExpr, restSpreadNames);
       }).filter(Boolean);
       const hoistedScopeAttr = maybeHoistedScopeAttr(inHoistedChildren, node);
       if (hoistedScopeAttr)
@@ -3535,7 +3541,9 @@ function buildLoopSkeletonTemplate(node, safe) {
         if (a.name === "dangerouslySetInnerHTML")
           return null;
         if (a.name === "key") {
-          attrParts.push(`${keyAttrName2(0)}=""`);
+          if (resolvedKeyAttrName(node, 0)) {
+            attrParts.push(`${keyAttrName2(0)}=""`);
+          }
           continue;
         }
         const v = a.value;
@@ -3743,7 +3751,11 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
       const attrParts = node.attrs.map((a) => {
         if (a.clientOnly)
           return "";
-        const attrName = a.name === "..." ? "..." : a.name === "key" ? keyAttrName2(loopDepth) : toHTMLAttrName(a.name);
+        if (a.name === "key") {
+          const attrName2 = resolvedKeyAttrName(node, loopDepth);
+          return attrName2 ? renderTemplateAttrPart(a, attrName2, wrapExpr, restSpreadNames) : "";
+        }
+        const attrName = a.name === "..." ? "..." : toHTMLAttrName(a.name);
         return renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames);
       }).filter(Boolean);
       if (node.slotId) {
@@ -4292,7 +4304,27 @@ function generateCsrTemplateWithOpts(node, opts) {
             return "";
           return `\${spreadAttrs(${transformExpr(v.expr, v.templateExpr)})}`;
         }
-        const attrName = a.name === "key" ? keyAttrName2(loopDepth) : toHTMLAttrName(a.name);
+        if (a.name === "key") {
+          const keyName = resolvedKeyAttrName(node, loopDepth);
+          if (!keyName)
+            return "";
+          switch (v.kind) {
+            case "boolean-attr":
+              return keyName;
+            case "literal":
+              return `${keyName}="${escapeHtml(v.value)}"`;
+            case "expression":
+              return templateAttrExpr(keyName, transformExpr(v.expr, v.templateExpr), v.presenceOrUndefined);
+            case "template": {
+              const valueStr = attrValueToString(v, { useTemplate: true });
+              return valueStr ? templateAttrExpr(keyName, transformExpr(valueStr)) : "";
+            }
+            case "boolean-shorthand":
+            case "jsx-children":
+              return "";
+          }
+        }
+        const attrName = toHTMLAttrName(a.name);
         switch (v.kind) {
           case "boolean-attr":
             return attrName;
@@ -11687,6 +11719,10 @@ function extractLoopKey(node) {
       return null;
     return normalizeKeyExpr(a) === normalizeKeyExpr(b) ? a : null;
   }
+  if (node.type === "fragment") {
+    const first = node.children.find((c) => !(c.type === "text" && typeof c.value === "string" && !c.value.trim()));
+    return first ? extractLoopKey(first) : null;
+  }
   return null;
 }
 function keyAttrValueToExpr(v) {
@@ -11877,7 +11913,7 @@ function leafIsWirelessElement(el) {
         }
         if (ts13.isJsxAttribute(attr)) {
           const name = attr.name.getText();
-          if (/^on[A-Z]/.test(name)) {
+          if (isEventHandlerAttrName(name)) {
             ok = false;
             return;
           }
@@ -11933,6 +11969,12 @@ function applyLoopKeyAttr(node, name, value) {
   if (node.type === "conditional") {
     applyLoopKeyAttr(node.whenTrue, name, value);
     applyLoopKeyAttr(node.whenFalse, name, value);
+    return;
+  }
+  if (node.type === "fragment") {
+    const first = node.children.find((c) => !(c.type === "text" && typeof c.value === "string" && !c.value.trim()));
+    if (first)
+      applyLoopKeyAttr(first, name, value);
   }
 }
 function loopBodyItemConditional(children) {
@@ -12165,7 +12207,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         children = [foldMultiReturnBranches(multiReturn, ctx, loc, ctx.getJS)];
         const pre = multiReturn.preamble ?? [];
         if (pre.length > 0) {
-          preamble = preambleFromValueStatements(pre, ctx);
+          preamble = preambleFromValueStatements(pre, ctx, body.statements);
           if (!preamble.declarations && !isClientOnly && !(ctx.analyzer.acceptsCallbackBody?.("map") ?? false)) {
             ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, loc, {
               message: "A .map() callback body with a preamble before its branches cannot be " + "lowered to a template: the preamble is not a sequence of value " + "declarations, so this backend has no per-row local to carry into the " + "branches.",
@@ -12252,7 +12294,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
             valueStmts.push(stmt);
           }
           if (valueStmts.length > 0) {
-            preamble = preambleFromValueStatements(valueStmts, ctx);
+            preamble = preambleFromValueStatements(valueStmts, ctx, body.statements);
             if (!preamble.declarations && !isClientOnly && !(ctx.analyzer.acceptsCallbackBody?.("map") ?? false)) {
               ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(body, ctx.sourceFile, ctx.filePath), {
                 message: "A .map() callback preamble that is not a sequence of value " + "declarations cannot be lowered to a template: this backend can " + "declare a per-row local, but cannot run arbitrary statements per row.",
@@ -12318,11 +12360,11 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const bodyIsItemConditional = itemConditional !== null;
   const key = bodyIsItemConditional ? extractItemConditionalKey(itemConditional) : children.length > 0 ? extractLoopKey(children[0]) : null;
   if (key !== null) {
-    const resolvedKeyAttrName = keyAttrName(depth);
+    const resolvedKeyAttrName2 = keyAttrName(depth);
     if (bodyIsItemConditional) {
-      applyLoopKeyAttr(itemConditional, resolvedKeyAttrName, key);
+      applyLoopKeyAttr(itemConditional, resolvedKeyAttrName2, key);
     } else if (children.length > 0) {
-      applyLoopKeyAttr(children[0], resolvedKeyAttrName, key);
+      applyLoopKeyAttr(children[0], resolvedKeyAttrName2, key);
     }
   }
   const declaredNameSet = preamble && preamble.declaredNames.length > 0 ? new Set(preamble.declaredNames) : undefined;
@@ -12715,7 +12757,7 @@ function computePreambleReactiveNames(statements, ctx) {
   }
   return reactiveNames;
 }
-function preambleFromValueStatements(statements, ctx) {
+function preambleFromValueStatements(statements, ctx, bodyStatements) {
   const segments = [];
   const typedParts = [];
   const declared = new Set;
@@ -12735,11 +12777,11 @@ function preambleFromValueStatements(statements, ctx) {
     ssrText: tsxSourceText(typedParts.join(" ")),
     declaredNames: [...declared],
     builderNames: [],
-    declarations: neutralPreambleDeclarations(statements, ctx) ?? undefined,
+    declarations: neutralPreambleDeclarations(statements, ctx, bodyStatements) ?? undefined,
     reactiveNames: reactiveNames.size > 0 ? [...reactiveNames] : undefined
   };
 }
-function neutralPreambleDeclarations(statements, ctx) {
+function neutralPreambleDeclarations(statements, ctx, bodyStatements) {
   const out = [];
   for (const stmt of statements) {
     if (!ts13.isVariableStatement(stmt))
@@ -12749,6 +12791,11 @@ function neutralPreambleDeclarations(statements, ctx) {
         return null;
       if (!decl.initializer)
         return null;
+      if (isFunctionLiteral(decl.initializer)) {
+        if (everyReadIsEventHandlerPropValue(decl.name.text, bodyStatements))
+          continue;
+        return null;
+      }
       const valueParsed = tsNodeToParsedExpr(decl.initializer);
       if (!isSupported(valueParsed).supported)
         return null;
@@ -12759,7 +12806,30 @@ function neutralPreambleDeclarations(statements, ctx) {
       });
     }
   }
-  return out.length > 0 ? out : null;
+  return out;
+}
+function isFunctionLiteral(node) {
+  return ts13.isArrowFunction(node) || ts13.isFunctionExpression(node);
+}
+function everyReadIsEventHandlerPropValue(name, bodyStatements) {
+  const findDisallowedRead = (node) => {
+    if (ts13.isIdentifier(node) && node.text === name) {
+      const isBindingName = ts13.isVariableDeclaration(node.parent) && node.parent.name === node;
+      const isPropertyName = ts13.isPropertyAccessExpression(node.parent) && node.parent.name === node;
+      if (!isBindingName && !isPropertyName) {
+        const jsxExpr = node.parent;
+        const attr = jsxExpr.parent;
+        const isEventHandlerAttrValue = ts13.isJsxExpression(jsxExpr) && ts13.isJsxAttribute(attr) && attr.initializer === jsxExpr && ts13.isIdentifier(attr.name) && isEventHandlerAttrName(attr.name.text);
+        if (!isEventHandlerAttrValue)
+          return true;
+      }
+    }
+    return ts13.forEachChild(node, findDisallowedRead);
+  };
+  return !bodyStatements.some(findDisallowedRead);
+}
+function isEventHandlerAttrName(name) {
+  return /^on[A-Z]/.test(name);
 }
 function trimPreambleSegments(segments) {
   const last = segments[segments.length - 1];
@@ -12956,7 +13026,7 @@ function processAttributes(attributes, ctx) {
       }
       continue;
     }
-    if (/^on[A-Z]/.test(rawName)) {
+    if (isEventHandlerAttrName(rawName)) {
       if (attr.initializer && ts13.isJsxExpression(attr.initializer) && attr.initializer.expression) {
         const eventName = rawName.slice(2).toLowerCase();
         reportJsxBranchLocalInCallback(attr.initializer.expression, ctx);
@@ -15611,6 +15681,8 @@ function buildReferencesGraph(ctx, irRoot) {
       }
       for (const ev of el.events)
         addExprEdges(ROOT_SOURCE, ev.handler, "init-body");
+      if (el.ref)
+        addExprEdges(ROOT_SOURCE, el.ref, "init-body");
       descend();
     },
     component: ({ node: c, descend, descendJsxChildren }) => {
@@ -20519,12 +20591,15 @@ function stringifyComponentLoop(lines, plan) {
     keyExpr,
     nestedComps,
     childConditionalEffects,
-    profileLoopId
+    profileLoopId,
+    mapPreambleWrapped
   } = plan;
   const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : "";
   lines.push(`  mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => {`);
   if (paramUnwrap)
     lines.push(`    ${paramUnwrap}`);
+  if (mapPreambleWrapped)
+    lines.push(`    ${mapPreambleWrapped}`);
   const scopedComp = nameForRegistryRef(componentName);
   if (nestedComps.length === 0) {
     lines.push(`    if (__existing) { initChild('${scopedComp}', __existing, ${componentPropsExpr}); return __existing }`);
@@ -21640,6 +21715,12 @@ function buildComponentLoopPlan(elem, profileComponentName) {
   const propsExpr = buildComponentPropsExpr2(elem.childComponent, elem.param);
   const keyExpr = wrapLoopParamAsAccessor(elem.key || "__idx", elem.param, elem.paramBindings);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings);
+  const mapPreambleWrapped = elem.preamble ? renderPreamble(elem.preamble, {
+    transformJs: (text) => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings),
+    renderLeaf: () => {
+      internalInvariant(false, "component-root loop received a JSX-bearing preamble — Phase 1 should have refused it");
+    }
+  }) : "";
   const outerNestedComps = (elem.nestedComponents ?? []).filter((c) => !c.loopDepth);
   const nestedComps = outerNestedComps.map((comp) => {
     const isTextOnly = comp.children?.length ? comp.children.every((c) => c.type === "expression" || c.type === "text" || isTextOnlyConditional(c)) : false;
@@ -21657,6 +21738,7 @@ function buildComponentLoopPlan(elem, profileComponentName) {
   return {
     kind: "component",
     rowConstruction: "dom-ops",
+    mapPreambleWrapped,
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     arrayExpr: buildChainedArrayExpr(elem),
@@ -21839,6 +21921,7 @@ function emitLoopUpdates(lines, ctx, unsafeLocalNames) {
       lazyScope
     });
     internalInvariant(!(elem.preamble && elem.preamble.builderNames.length > 0 && plan.rowConstruction === "dom-ops"), `loop variant '${plan.kind}' declares dom-ops row construction but received a JSX-bearing preamble — add a Phase-1 refusal (or wire renderPreamble support) for this shape`);
+    internalInvariant(!(elem.preamble && elem.preamble.declaredNames.length > 0 && ("mapPreambleWrapped" in plan) && plan.mapPreambleWrapped === ""), `loop variant '${plan.kind}' has a preamble with declared names (${elem.preamble?.declaredNames.join(", ")}) but its plan's mapPreambleWrapped is empty — wire it up or the emitted call site references a name nothing declares`);
     stringifyLoop(lines, plan);
     emitLoopEventDelegation(lines, elem, plan.kind, ctx.profile ? ctx.componentName : undefined);
   }

package/package.json

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