@base44/vite-plugin 1.0.30 → 1.0.32

package/dist/visual-edit-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-edit-plugin.d.ts","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAInC,wBAAgB,gBAAgB,IAwEzB,MAAM,CACZ"}
+{"version":3,"file":"visual-edit-plugin.d.ts","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,MAAM,EAAc,MAAM,MAAM,CAAC;AAI1D,wBAAgB,gBAAgB,IA+EzB,MAAM,CACZ"}

package/dist/visual-edit-plugin.js

@@ -7,7 +7,13 @@ import { JSXUtils } from "./jsx-utils.js";
 export function visualEditPlugin() {
     return {
         name: "visual-edit-transform",
-        apply: (config) => config.mode === "development",
+        // Dev SERVER only: the injected data-* markers are consumed by the
+        // visual-edit agent in the live preview, which vite serves — never by
+        // build output. Gating on mode alone also caught `vite build --mode
+        // development` (the platform's validation build), where instrumenting
+        // user code is pure risk: an injection bug there fails the build on
+        // code that doesn't exist on disk.
+        apply: (config, env) => env.command === "serve" && config.mode === "development",
         enforce: "pre",
         order: "pre",
         transformIndexHtml(html) {

package/dist/visual-edit-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"visual-edit-plugin.js","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"visual-edit-plugin.js","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/vite-plugin",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/capabilities/inline-edit/controller.ts

@@ -6,7 +6,7 @@ import {
   shouldEnterInlineEditingMode,
   isStaticArrayTextElement,
 } from "./dom-utils.js";
-import { PLUGIN_ELEMENT_ATTR } from "../../injections/utils.js";
+import { PLUGIN_ELEMENT_ATTR, readElementClasses } from "../../injections/utils.js";
 
 const DEBOUNCE_MS = 500;
 
@@ -36,17 +36,13 @@ export function createInlineEditController(
     const originalContent = element.dataset.originalTextContent;
     const newContent = element.textContent;
 
-    const svgElement = element as unknown as SVGElement;
     const rect = element.getBoundingClientRect();
 
     const message: Record<string, unknown> = {
       type: "inline-edit",
       elementInfo: {
         tagName: element.tagName,
-        classes:
-          (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-          element.className ||
-          "",
+        classes: readElementClasses(element),
         visualSelectorId: host.getSelectedElementId(),
         content: newContent,
         dataSourceLocation: element.dataset.sourceLocation,

package/src/index.ts

@@ -1,3 +1,4 @@
+import path from "node:path";
 import type { Plugin, UserConfig } from "vite";
 import { loadEnv } from "vite";
 import { errorOverlayPlugin } from "./error-overlay-plugin.js";
@@ -8,6 +9,19 @@ import { buildStatusPlugin } from "./build-status-plugin.js";
 
 const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
 
+const ENV_UNSET_GUIDANCE = [
+  "[base44] No Base44 backend configured — VITE_BASE44_APP_BASE_URL is not set, so /api requests have nowhere to go.",
+  "[base44] Run the app through the Base44 CLI instead:",
+  "[base44]   base44 dev           app + local backend (throwaway local data)",
+  "[base44]   base44 dev --remote  app + your app's real backend (production data)",
+].join("\n");
+
+const BUILD_WITHOUT_APP_ID_WARNING = [
+  "[base44] Warning: VITE_BASE44_APP_ID is not set — this build",
+  "[base44] will not know its app id and its API calls will fail.",
+  "[base44] Build with:  base44 build   (or base44 deploy --build)",
+].join("\n");
+
 export default function vitePlugin(
   opts: {
     legacySDKImports?: boolean;
@@ -28,9 +42,14 @@ export default function vitePlugin(
   return [
     {
       name: "base44",
-      config: ({ mode, root = process.cwd() }) => {
+      config: (config, { command }) => {
+        const { mode, root = process.cwd() } = config;
         const env = loadEnv(mode ?? "development", root, "");
 
+        if (!isRunningInSandbox && command === "build" && !env.VITE_BASE44_APP_ID) {
+          console.log(BUILD_WITHOUT_APP_ID_WARNING);
+        }
+
         return {
           resolve: {
             alias: {
@@ -59,6 +78,19 @@ export default function vitePlugin(
                   strictPort: true,
                   // Allow all hosts - essential for Modal tunnel URLs
                   allowedHosts: true,
+                  fs: {
+                    strict: true,
+                    // Vite replaces its default deny list when one is provided, so preserve those defaults here.
+                    deny: [
+                      ".env",
+                      ".env.*",
+                      "*.{crt,pem}",
+                      "**/.git/**",
+                      // base44/ contains backend code and the Base44 manifest — never serve it from the dev server.
+                      // Root-anchored on purpose: some apps have a stray src/base44/ that IS frontend code.
+                      path.resolve(root, "base44").replace(/\\/g, "/") + "/**",
+                    ],
+                  },
                   // Route the HMR WebSocket through the preview proxy instead of
                   // the sandbox origin. When BASE44_HMR_HOST is unset (e.g. before
                   // the proxy is deployed), fall back to Vite's default behavior
@@ -110,7 +142,9 @@ export default function vitePlugin(
                   };
                 }
                 console.log(
-                  "[base44] Proxy not enabled (VITE_BASE44_APP_BASE_URL not set)"
+                  command === "serve"
+                    ? ENV_UNSET_GUIDANCE
+                    : "[base44] Proxy not enabled (VITE_BASE44_APP_BASE_URL not set)"
                 );
                 return {};
               })()),

package/src/injections/unhandled-errors-handlers.ts

@@ -56,7 +56,7 @@ function onAppError({
 }: {
   title: string;
   details: string;
-  componentName: string;
+  componentName: string | undefined;
   originalError: any;
 }) {
   if (originalError?.response?.status === 402) {
@@ -80,35 +80,52 @@ function onAppError({
   );
 }
 
-function handleUnhandledRejection(event: any) {
-  const stack = event.reason.stack;
-  // extract function name from "at X (eval" where x is the function name
-  const functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
-  const msg = functionName
-    ? `Error in ${functionName}: ${event.reason.toString()}`
-    : event.reason.toString();
+// extract function name from "at X (eval" where X is the function name
+function extractFunctionName(stack: unknown): string | undefined {
+  if (typeof stack !== "string") return undefined;
+  return stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+}
+
+// A rejection reason or error can be any value — undefined, a string, a
+// null-prototype object. Throwing here masks the real error entirely.
+function describeErrorValue(value: unknown): string {
+  try {
+    return String(value);
+  } catch {
+    return Object.prototype.toString.call(value);
+  }
+}
+
+export function handleUnhandledRejection(event: any) {
+  const reason = event?.reason;
+  const functionName = extractFunctionName(reason?.stack);
+  const text = describeErrorValue(reason);
+  const msg = functionName ? `Error in ${functionName}: ${text}` : text;
   onAppError({
     title: msg,
-    details: event.reason.toString(),
+    details: text,
     componentName: functionName,
-    originalError: event.reason,
+    originalError: reason,
   });
 }
 
-function handleWindowError(event: any) {
-  const stack = event.error?.stack;
-  let functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+export function handleWindowError(event: any) {
+  const error = event?.error;
+  let functionName = extractFunctionName(error?.stack);
   if (functionName === "eval") {
-    functionName = null;
+    functionName = undefined;
   }
 
-  const msg = functionName
-    ? `in ${functionName}: ${event.error.toString()}`
-    : event.error.toString();
+  // window.onerror fires with a null error for cross-origin script failures
+  const text =
+    error == null && typeof event?.message === "string"
+      ? event.message
+      : describeErrorValue(error);
+  const msg = functionName ? `in ${functionName}: ${text}` : text;
   onAppError({
     title: msg,
-    details: event.error.toString(),
+    details: text,
     componentName: functionName,
-    originalError: event.error,
+    originalError: error,
   });
 }

package/src/injections/utils.ts

@@ -98,6 +98,15 @@ export function updateElementAttribute(elements: Element[], attribute: string, v
   });
 }
 
+/**
+ * Read an element's classes as a plain string, safe to postMessage.
+ * `element.className` is an SVGAnimatedString on SVG elements, which is not
+ * structured-cloneable — posting it throws DataCloneError and the preview hangs.
+ */
+export function readElementClasses(element: Element): string {
+  return element.getAttribute("class") ?? "";
+}
+
 /** Collect attribute values from an element for a given allowlist. */
 export function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {
   const attributes: Record<string, string> = {};

package/src/injections/visual-edit-agent.ts

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, readElementClasses, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
@@ -137,7 +137,6 @@ export function setupVisualEditAgent() {
   const notifyElementSelected = (element: Element) => {
     const htmlElement = element as HTMLElement;
     const rect = element.getBoundingClientRect();
-    const svgElement = element as SVGElement;
     const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
 
     const arrEl = htmlElement.closest("[data-arr-variable-name]") as HTMLElement | null;
@@ -153,10 +152,7 @@ export function setupVisualEditAgent() {
     window.parent.postMessage({
       type: "element-selected",
       tagName: element.tagName,
-      classes:
-        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-        element.className ||
-        "",
+      classes: readElementClasses(element),
       visualSelectorId: getElementSelectorId(element),
       content: isTextElement ? htmlElement.innerText : undefined,
       dataSourceLocation: htmlElement.dataset.sourceLocation,

package/src/processors/collection-item-field-processor.ts

@@ -382,6 +382,18 @@ export class DataItemFieldProcessor {
       }
 
       const fieldToInject = idField ?? "id";
+
+      // Never inject a param whose name is already bound where the JSX
+      // element sits. A function-scope binding (e.g. `const { id } =
+      // useParams()`) makes the output fail to compile — "The symbol 'id'
+      // has already been declared" — an outer-scope binding would be
+      // silently shadowed by an undefined prop, and a block-scope binding
+      // between the element and the function would make the emitted
+      // attribute read the wrong value. Anchoring on the element's scope
+      // chain covers all three; skipping just degrades visual-edit tracing
+      // for this element.
+      if (path.scope.hasBinding(fieldToInject)) return;
+
       const newProp = this.types.objectProperty(
         this.types.identifier(fieldToInject),
         this.types.identifier(fieldToInject),

package/src/visual-edit-plugin.md

@@ -29,7 +29,7 @@ It adds two HTML `data-*` attributes to every JSX element:
 | Condition | Where | Why |
 |-----------|-------|-----|
 | `MODAL_SANDBOX_ID` env var is set | `index.ts:8` | Only runs inside Modal sandbox containers |
-| Vite mode is `"development"` | `apply: (config) => config.mode === "development"` | No overhead in production builds |
+| Dev **server** in `"development"` mode | `apply: (config, env) => env.command === "serve" && config.mode === "development"` | The injected `data-*` markers are only consumed by the visual-edit agent in the live preview, which the dev server serves. Builds never use them — including `vite build --mode development` (the platform's validation build), where instrumenting user code once produced compile errors on code that wasn't on disk |
 | File is `.js`, `.jsx`, `.ts`, or `.tsx` | `id.match(/\.(jsx?\|tsx?)$/)` | Only JSX-capable files |
 | File is NOT in `node_modules` | `id.includes("node_modules")` | Skip third-party code |
 | File is NOT `visual-edit-agent` | `id.includes("visual-edit-agent")` | Don't instrument the agent itself |
@@ -37,7 +37,8 @@ It adds two HTML `data-*` attributes to every JSX element:
 ### Execution Timeline
 
 ```
-1. npm run dev
+1. npm run dev            (dev SERVER only — `vite build` never registers this plugin,
+                           regardless of mode)
 2. Vite starts, loads plugin config
 3. index.ts checks: isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID
 4. If true → registers visualEditPlugin() in the plugin pipeline

package/src/visual-edit-plugin.ts

@@ -2,14 +2,21 @@ import { parse } from "@babel/parser";
 import { default as traverse } from "@babel/traverse";
 import { default as generate } from "@babel/generator";
 import * as t from "@babel/types";
-import type { Plugin } from "vite";
+import type { ConfigEnv, Plugin, UserConfig } from "vite";
 import { JSXProcessor } from "./jsx-processor.js";
 import { JSXUtils } from "./jsx-utils.js";
 
 export function visualEditPlugin() {
   return {
     name: "visual-edit-transform",
-    apply: (config) => config.mode === "development",
+    // Dev SERVER only: the injected data-* markers are consumed by the
+    // visual-edit agent in the live preview, which vite serves — never by
+    // build output. Gating on mode alone also caught `vite build --mode
+    // development` (the platform's validation build), where instrumenting
+    // user code is pure risk: an injection bug there fails the build on
+    // code that doesn't exist on disk.
+    apply: (config: UserConfig, env: ConfigEnv) =>
+      env.command === "serve" && config.mode === "development",
     enforce: "pre",
     order: "pre",
     transformIndexHtml(html: any) {