@barefootjs/vite 0.31.6 → 0.31.7

package/dist/index.js

@@ -3916,6 +3916,11 @@ function irToComponentTemplateWithOpts(node, opts) {
     case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
+      if (node.clientOnly && node.slotId) {
+        if (node.markerless)
+          return "";
+        return `<!--bf:${node.slotId}--><!--/-->`;
+      }
       const wrapped = transformExpr(node.expr, node.templateExpr);
       const value = node.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : wrapped;
       if (node.slotId) {
@@ -5035,6 +5040,7 @@ var ErrorCodes = {
   COMPONENT_REQUIRED_PROP_MISSING: "BF046",
   JSX_BRANCH_LOCAL_IN_CALLBACK: "BF047",
   SIBLING_COMPONENT_NOT_COMPILED: "BF048",
+  RICH_TYPE_PROP_NOT_HYDRATABLE: "BF049",
   SHARED_PROGRAM_REQUIRED: "BF050",
   WRONG_PACKAGE_IMPORT: "BF051",
   BUILTIN_REQUIRES_IMPORT: "BF054",
@@ -5065,6 +5071,7 @@ var errorMessages = {
   [ErrorCodes.COMPONENT_REQUIRED_PROP_MISSING]: "Built-in component is missing a required prop.",
   [ErrorCodes.JSX_BRANCH_LOCAL_IN_CALLBACK]: "JSX-typed local declared inside an `if`-block cannot be referenced from a callback body (ref / event handler). " + "Render it as a child instead: `<div ref={...}>{local}</div>`.",
   [ErrorCodes.SIBLING_COMPONENT_NOT_COMPILED]: "Referenced component did not compile to a template, so this reference would throw " + "`ReferenceError` at render time. Multi-return JSX dispatch (a `switch` or `if`/`else` " + "chain across multiple JSX-returning branches) cannot compile as a component in a " + `'use client' file. Extract it to a separate non-"use client" file (where it is preserved ` + "verbatim, see #932), or rewrite it as a single-return ternary/conditional chain so the " + "component pipeline can compile it.",
+  [ErrorCodes.RICH_TYPE_PROP_NOT_HYDRATABLE]: "Rich-typed prop cannot cross the bf-p hydration boundary as JSON.",
   [ErrorCodes.SHARED_PROGRAM_REQUIRED]: "Shared ts.Program required for type-based reactivity classification. This source imports a Reactive<T>-branded library (e.g. @barefootjs/form) whose getters cannot be classified by regex alone. Pass `options.program` (built via `createProgramForCorpus`) so the analyzer can resolve the brand through the TypeChecker.",
   [ErrorCodes.WRONG_PACKAGE_IMPORT]: "Import from wrong package.",
   [ErrorCodes.BUILTIN_REQUIRES_IMPORT]: "Built-in <Async> / <Region> must be imported from '@barefootjs/client'. " + "The compiler recognises these tags by their import (not by tag name), " + "so an unimported tag with this name is treated as an undeclared component.",
@@ -5182,6 +5189,8 @@ var HOST_RICH_TYPE_NAMES = new Set([
   "BigInt",
   "Function"
 ]);
+var JSON_REVIVABLE_RICH_TYPE_NAMES = new Set(["Date", "URL"]);
+var JSON_UNSAFE_RICH_TYPE_NAMES = new Set([...HOST_RICH_TYPE_NAMES].filter((n) => !JSON_REVIVABLE_RICH_TYPE_NAMES.has(n)));
 function baseTypeName(raw) {
   const idx = raw.indexOf("<");
   return (idx === -1 ? raw : raw.slice(0, idx)).trim();
@@ -5214,6 +5223,21 @@ function lookupProperty(objType, propName, meta) {
   const prop = deref.properties?.find((p) => p.name === propName);
   return prop ? stripUnion(prop.type) : null;
 }
+function resolvePropDeclaredType(propName, meta) {
+  return lookupProperty(meta.propsType, propName, meta);
+}
+function jsonUnsafeTypeName(type) {
+  if (!type)
+    return null;
+  if (type.kind === "interface") {
+    const name = baseTypeName(type.raw);
+    return JSON_UNSAFE_RICH_TYPE_NAMES.has(name) ? name : null;
+  }
+  if (type.kind === "unknown" && (type.raw === "bigint" || type.raw === "symbol")) {
+    return type.raw;
+  }
+  return null;
+}
 function resolveReceiverType(expr, meta, bindings) {
   if (expr.kind === "identifier") {
     if (bindings.has(expr.name))
@@ -14977,6 +15001,9 @@ function buildReferencesGraph(ctx, irRoot) {
       addExprEdges(ROOT_SOURCE, event.handler, "init-body");
     }
   }
+  for (const elem of ctx.clientOnlyElements) {
+    addExprEdges(ROOT_SOURCE, elem.expression, "init-body");
+  }
   for (const elem of ctx.loopElements) {
     addExprEdges(ROOT_SOURCE, elem.array, "template-closure");
     addTemplateEdges(ROOT_SOURCE, elem.template, "template-closure");
@@ -19393,9 +19420,15 @@ function lowerDateCallsInReactiveExpr(expr, matcher) {
   }
   return restore(result);
 }
-function emitDynamicTextUpdates(lines, ctx) {
-  const dateLoweringMatcher = getReactiveDateLoweringMatcher(ctx);
+function makeCataloguedCallLowerer(ctx) {
+  const dateMatcher = getReactiveDateLoweringMatcher(ctx);
   const toLocaleMatcher = getReactiveToLocaleMatcher(ctx);
+  if (!dateMatcher && !toLocaleMatcher)
+    return (expr) => expr;
+  return (expr) => lowerToLocaleCallsInReactiveExpr(lowerDateCallsInReactiveExpr(expr, dateMatcher), toLocaleMatcher);
+}
+function emitDynamicTextUpdates(lines, ctx) {
+  const lower = makeCataloguedCallLowerer(ctx);
   const byExpression = new Map;
   for (const elem of ctx.dynamicElements) {
     const key = elem.expression;
@@ -19405,7 +19438,7 @@ function emitDynamicTextUpdates(lines, ctx) {
     byExpression.get(key).push(elem);
   }
   for (const [rawExpr, elems] of byExpression) {
-    const expr = lowerToLocaleCallsInReactiveExpr(lowerDateCallsInReactiveExpr(rawExpr, dateLoweringMatcher), toLocaleMatcher);
+    const expr = lower(rawExpr);
     const conditionalElems = elems.filter((e) => e.insideConditional);
     const normalElems = elems.filter((e) => !e.insideConditional);
     if (normalElems.length > 0 || conditionalElems.length > 0) {
@@ -19442,19 +19475,21 @@ function emitDynamicTextUpdates(lines, ctx) {
   }
 }
 function emitClientOnlyExpressions(lines, ctx) {
+  const lower = makeCataloguedCallLowerer(ctx);
   for (const elem of ctx.clientOnlyElements) {
     const slots = elem.elidedPath ? [{ id: elem.slotId, kind: "text", path: elem.elidedPath, markerless: true }] : [{ id: elem.slotId, kind: "text", path: [] }];
     const writer = claimWriterVarName(slots, varSlotId);
     lines.push(`  // @client: ${elem.slotId}`);
     lines.push(`  { const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`);
     lines.push(`  createEffect(() => {`);
-    lines.push(`    ${writer}('${elem.slotId}', ${elem.expression})`);
+    lines.push(`    ${writer}('${elem.slotId}', ${lower(elem.expression)})`);
     lines.push(`  }${bindingIdArg(ctx, elem.slotId)}) }`);
     lines.push("");
   }
 }
 function emitReactiveAttributeUpdates(lines, ctx) {
   if (ctx.reactiveAttrs.length > 0) {
+    const lower = makeCataloguedCallLowerer(ctx);
     const attrsBySlot = new Map;
     for (const attr of ctx.reactiveAttrs) {
       if (!attrsBySlot.has(attr.slotId)) {
@@ -19467,7 +19502,7 @@ function emitReactiveAttributeUpdates(lines, ctx) {
       lines.push(`  createEffect(() => {`);
       lines.push(`    if (_${v}) {`);
       for (const attr of attrs) {
-        const expression = rewriteDestructuredPropsInExpr(attr.expression, ctx);
+        const expression = rewriteDestructuredPropsInExpr(lower(attr.expression), ctx);
         for (const stmt of emitAttrUpdate(`_${v}`, attr.attrName, expression, attr)) {
           lines.push(`      ${stmt}`);
         }
@@ -22893,6 +22928,38 @@ function checkRichTypeMethodCalls(root, metadata, errors) {
   const seen = new Set;
   walkNode2(root, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
 }
+function checkRichTypePropSerialization(root, metadata, errors, declLoc) {
+  if (!metadata.propsType || !metadata.clientAnalysis?.needsInit)
+    return;
+  const usedProps = new Set(metadata.clientAnalysis.usedProps);
+  const loc = declLoc ?? root.loc;
+  for (const param of metadata.propsParams) {
+    if (param.isRest || param.name.startsWith("on") || param.name.startsWith("__"))
+      continue;
+    if (!usedProps.has(param.name))
+      continue;
+    const declared = resolvePropDeclaredType(param.sourceName ?? param.name, metadata);
+    const typeName = jsonUnsafeTypeName(declared);
+    if (!typeName)
+      continue;
+    if (metadata.typeDefinitions.some((d) => d.name === typeName))
+      continue;
+    pushPropSerializationDiagnostic(errors, loc, param.name, typeName, declared.raw);
+  }
+}
+function pushPropSerializationDiagnostic(errors, loc, propName, typeName, declaredRaw) {
+  const consequence = typeName === "bigint" || typeName === "BigInt" ? "JSON.stringify throws at SSR render ('Do not know how to serialize a BigInt'), failing the whole page" : typeName === "symbol" || typeName === "Symbol" || typeName === "Function" ? "JSON.stringify drops the value entirely, so the client reads undefined at hydrate" : "it serializes de-riched (e.g. a Map or Set becomes {} with every entry silently dropped), so the client hydrates against corrupt data";
+  errors.push({
+    code: ErrorCodes.RICH_TYPE_PROP_NOT_HYDRATABLE,
+    severity: "error",
+    message: `Prop '${propName}' is typed '${declaredRaw}' and is read by this component's own client code, so it must cross the bf-p hydration boundary as JSON — and ${typeName} cannot: ${consequence}.`,
+    loc,
+    suggestion: {
+      message: "Pre-compute a JSON-serializable value server-side — a string, number, boolean, array, or plain object " + "(e.g. pass [...map.entries()] and rebuild the Map client-side where needed) — and pass that as the prop " + "instead. /* @client */ is NOT an escape here: the prop still crosses the bf-p boundary as JSON and arrives " + "de-riched (#2636).",
+      escape: [{ kind: "prop-precompute" }]
+    }
+  });
+}
 function isLoweringClaimed(matchers, callee, args) {
   return matchers.some((m) => m(callee, args) !== null);
 }
@@ -22909,21 +22976,39 @@ function receiverRootIsProp(expr, bindings) {
     root = root.object;
   return root.kind === "identifier" && !bindings.has(root.name);
 }
+function buildSuggestion(method, receiverPath, receiver, typeName) {
+  const revivalExpr = receiverPath === "<expression>" ? `wrapping the receiver in new ${typeName}(...) before calling .${method}()` : `{/* @client */ new ${typeName}(${receiverPath}).${method}(...)}`;
+  const revivalReason = `a bare /* @client */ crashes at hydrate because ${receiver} crosses the bf-p boundary as JSON and arrives as a plain string, not a ${typeName} instance (#2636)`;
+  if (method === "toLocaleDateString" && typeName === "Date") {
+    return {
+      message: "Pass a literal locale and an explicit literal timeZone — .toLocaleDateString('ja-JP', { timeZone: 'UTC' }), a fixed '±HH:MM' offset, or a canonical IANA zone ID like 'Asia/Tokyo' (exact case; #2344) — to compile it to the format_date helper; for a runtime locale, resolve the pattern in your i18n layer and use formatDate(date, pattern, tz) from @barefootjs/client. " + `Alternatively pre-compute server-side, or evaluate client-only by ${revivalExpr} — ${revivalReason}.`,
+      escape: [{ kind: "rewrite" }, { kind: "prop-precompute" }, { kind: "client-directive" }]
+    };
+  }
+  if (JSON_REVIVABLE_RICH_TYPE_NAMES.has(typeName)) {
+    return {
+      message: `Pre-compute the value server-side and pass it as a prop. Alternatively, evaluate client-only by ${revivalExpr} — ${revivalReason}.`,
+      escape: [{ kind: "prop-precompute" }, { kind: "client-directive" }]
+    };
+  }
+  return {
+    message: `Pre-compute the value server-side and pass the result — a string, number, array, or plain object — as a prop. ` + `/* @client */ is NOT a safe escape here: ${receiver} cannot cross the bf-p hydration boundary as JSON — it arrives de-riched ` + `(e.g. a Map or Set serializes to {}), so the call throws or silently returns the wrong result at hydrate (#2636).`,
+    escape: [{ kind: "prop-precompute" }]
+  };
+}
 function pushDiagnostic(errors, seen, loc, method, receiverPath, isProp, typeName) {
   const key = `${loc.start.line}:${loc.start.column}:${receiverPath}.${method}`;
   if (seen.has(key))
     return;
   seen.add(key);
   const receiver = isProp ? `prop '${receiverPath}'` : `'${receiverPath}'`;
-  const suggestion = method === "toLocaleDateString" && typeName === "Date" ? "Pass a literal locale and an explicit literal timeZone — .toLocaleDateString('ja-JP', { timeZone: 'UTC' }), a fixed '±HH:MM' offset, or a canonical IANA zone ID like 'Asia/Tokyo' (exact case; #2344) — to compile it to the format_date helper; for a runtime locale, resolve the pattern in your i18n layer and use formatDate(date, pattern, tz) from @barefootjs/client. Alternatively add /* @client */ or pre-compute server-side." : "Add /* @client */ to evaluate this expression on the client only, or pre-compute the value server-side.";
+  const suggestion = buildSuggestion(method, receiverPath, receiver, typeName);
   errors.push({
     code: ErrorCodes.UNSUPPORTED_JSX_PATTERN,
     severity: "error",
     message: `Expression cannot be compiled to marked template: method '.${method}()' on ${receiver} of host type '${typeName}' has no catalogued lowering.`,
     loc,
-    suggestion: {
-      message: suggestion
-    }
+    suggestion
   });
 }
 function checkExpr(expr, loc, meta, bindings, matchers, errors, seen) {
@@ -23168,6 +23253,7 @@ function compileMultipleComponents(source, filePath, componentNames, options) {
     };
     componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
     checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+    checkRichTypePropSerialization(componentIR.root, componentIR.metadata, errors, ctx.propsDestructuring?.loc);
     decideClientOnlyElision(componentIR.root);
     entries.push({ componentIR, ctx });
   }
@@ -23570,6 +23656,7 @@ function compileJSX(source, filePath, options) {
   };
   componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
   checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+  checkRichTypePropSerialization(componentIR.root, componentIR.metadata, errors, ctx.propsDestructuring?.loc);
   decideClientOnlyElision(componentIR.root);
   if (ctx.importedClientSignalNames.size > 0) {
     const sources = new Set;

package/package.json

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