@base44-preview/vite-plugin 0.2.20-pr.27.3c8770e → 0.2.20-pr.29.d7fd4ea

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "0.2.20-pr.27.3c8770e",
+  "version": "0.2.20-pr.29.d7fd4ea",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js",
-    "./bridge": "./dist/bridge.js",
     "./compat/*": "./compat/*"
   },
   "files": [
@@ -16,20 +15,15 @@
   ],
   "scripts": {
     "build": "tsc",
-    "build:bridge": "tsup",
     "validate-exports": "node scripts/validate-exports.mjs",
-    "prepublishOnly": "rm -rf ./dist && npm run build && npm run build:bridge && npm run validate-exports",
-    "dev": "node dev-server.js",
+    "prepublishOnly": "rm -rf ./dist && npm run build && npm run validate-exports",
     "test:unit": "vitest run"
   },
   "devDependencies": {
     "@types/babel__generator": "^7.27.0",
     "@types/babel__traverse": "^7.28.0",
     "@types/node": "^24.6.2",
-    "cors": "^2.8.5",
-    "express": "^4.21.2",
     "jsdom": "^26.0.0",
-    "tsup": "^8.1.0",
     "typescript": "^5.9.3",
     "vite": "^7.1.9",
     "vitest": "^3.0.0"

package/src/html-injections-plugin.ts

@@ -1,6 +1,15 @@
 import type { Plugin, HtmlTagDescriptor } from "vite";
 import { loadEnv } from "vite";
 
+type Injection = {
+  /** Script src path for dev mode (served from node_modules) */
+  src?: string;
+  injectTo: "head" | "body";
+  mode: "dev" | "production";
+  /** Inline content for production builds (src paths don't work in built output) */
+  inlineContent?: string;
+};
+
 const ANALYTICS_TRACKER_SCRIPT = `
 let lastPath = "";
 function getPageNameFromPath(path) {
@@ -33,19 +42,59 @@ window.addEventListener("popstate", trackPageView);
 trackPageView();
 `;
 
-interface HtmlInjectionOptions {
-  hmrNotifier: boolean;
-  navigationNotifier: boolean;
-  visualEditAgent: boolean;
-  analyticsTracker: boolean;
-}
+const INJECTIONS: Record<string, Injection> = {
+  unhandledErrors: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/unhandled-errors-handlers.js",
+    injectTo: "head",
+    mode: "dev",
+  },
+  sandboxMount: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/sandbox-mount-observer.js",
+    injectTo: "body",
+    mode: "dev",
+  },
+  hmrNotifier: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/sandbox-hmr-notifier.js",
+    injectTo: "head",
+    mode: "dev",
+  },
+  navigationNotifier: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/navigation-notifier.js",
+    injectTo: "head",
+    mode: "dev",
+  },
+  visualEditAgent: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/visual-edit-agent.js",
+    injectTo: "body",
+    mode: "dev",
+  },
+  analyticsTracker: {
+    injectTo: "head",
+    mode: "production",
+    inlineContent: ANALYTICS_TRACKER_SCRIPT,
+  },
+};
 
 export function htmlInjectionsPlugin({
   hmrNotifier,
   navigationNotifier,
   visualEditAgent,
   analyticsTracker,
-}: HtmlInjectionOptions): Plugin {
+}: {
+  hmrNotifier: boolean;
+  navigationNotifier: boolean;
+  visualEditAgent: boolean;
+  analyticsTracker: boolean;
+}) {
+  const enabledInjections: Record<string, boolean> = {
+    unhandledErrors: true,
+    sandboxMount: true,
+    hmrNotifier,
+    navigationNotifier,
+    visualEditAgent,
+    analyticsTracker,
+  };
+
   let resolvedEnv: Record<string, string> = {};
 
   return {
@@ -57,58 +106,44 @@ export function htmlInjectionsPlugin({
     },
     transformIndexHtml: {
       handler(_html, ctx) {
-        const tags: HtmlTagDescriptor[] = [];
         const currentMode = ctx.server ? "dev" : "production";
 
-        if (currentMode === "dev") {
-          // Dev mode: use sandbox-bridge dynamic loader
-          const options = JSON.stringify({
-            hmrNotifier,
-            navigationNotifier,
-            visualEditAgent,
-            unhandledErrors: true,
-            mountObserver: true,
-          });
-          tags.push({
-            tag: "script",
-            attrs: { type: "module" },
-            children: [
-              `if (window.self !== window.top) {`,
-              `  (async () => {`,
-              `    try {`,
-              `      const mode = new URLSearchParams(location.search).get("sandbox-bridge");`,
-              `      const url = mode === "local"`,
-              `        ? "https://localhost:3201/index.mjs"`,
-              `        : "/node_modules/@base44/vite-plugin/dist/statics/index.mjs";`,
-              `      const mod = await import(url);`,
-              `      if (typeof mod.init === "function") mod.init(${options}, import.meta.hot);`,
-              `    } catch (e) {`,
-              `      console.error("[sandbox-bridge] Failed to load:", e);`,
-              `    }`,
-              `  })();`,
-              `}`,
-            ].join("\n"),
-            injectTo: "head",
-          });
-        }
+        const tags = Object.entries(INJECTIONS)
+          .filter(
+            ([key, injection]) =>
+              enabledInjections[key] && injection.mode === currentMode
+          )
+          .map(([, injection]): HtmlTagDescriptor => {
+            // Production injections use inline content (src paths don't work in built output)
+            if (injection.inlineContent) {
+              // Replace import.meta.env references with actual values
+              // Vite doesn't replace these in inline script content
+              let content = injection.inlineContent;
+              content = content.replace(
+                /import\.meta\.env\.(\w+)/g,
+                (_, envKey) => JSON.stringify(resolvedEnv[envKey] ?? "")
+              );
 
-        // Production: inline analytics tracker with env var replacement
-        if (currentMode === "production" && analyticsTracker) {
-          let content = ANALYTICS_TRACKER_SCRIPT;
-          content = content.replace(
-            /import\.meta\.env\.(\w+)/g,
-            (_, envKey) => JSON.stringify(resolvedEnv[envKey] ?? "")
-          );
-          tags.push({
-            tag: "script",
-            attrs: { type: "module" },
-            children: content,
-            injectTo: "head",
+              return {
+                tag: "script",
+                attrs: { type: "module" },
+                children: content,
+                injectTo: injection.injectTo,
+              };
+            }
+            // Dev injections use src path (served from node_modules)
+            return {
+              tag: "script",
+              attrs: {
+                src: injection.src,
+                type: "module",
+              },
+              injectTo: injection.injectTo,
+            };
           });
-        }
 
         return tags;
       },
     },
-  };
+  } as Plugin;
 }

package/src/injections/analytics-tracker.ts

@@ -1,8 +1,6 @@
 // Analytics tracker - tracks page views in production
 // This script is only injected in production builds
 
-/// <reference types="vite/client" />
-
 let lastPath = "";
 
 function getPageNameFromPath(path: string): string | null {

package/src/injections/navigation-notifier.ts

@@ -1,5 +1,4 @@
-/** Intercept pushState / replaceState / popstate and notify the parent of URL changes. */
-export function setupNavigationNotifier() {
+if (window.self !== window.top) {
   let lastUrl = window.location.href;
 
   function notifyNavigation() {

package/src/injections/sandbox-hmr-notifier.ts

@@ -1,9 +1,8 @@
-/** Forward Vite HMR lifecycle events (beforeUpdate / afterUpdate) to the parent window. */
-export function setupHmrNotifier(hmr: { on(event: string, cb: (...args: any[]) => void): void }) {
-  hmr.on("vite:beforeUpdate", () => {
+if (import.meta.hot) {
+  import.meta.hot.on("vite:beforeUpdate", () => {
     window.parent?.postMessage({ type: "sandbox:beforeUpdate" }, "*");
   });
-  hmr.on("vite:afterUpdate", () => {
+  import.meta.hot.on("vite:afterUpdate", () => {
     window.parent?.postMessage({ type: "sandbox:afterUpdate" }, "*");
   });
 }

package/src/injections/sandbox-mount-observer.ts

@@ -1,5 +1,5 @@
-/** Observe DOM mutations and notify the parent when instrumented elements are mounted or unmounted. */
-export function setupMountObserver() {
+
+if (window.self !== window.top) {
   const observer = new MutationObserver((mutations) => {
     const nodesAdded = mutations.some(
       (mutation) => mutation.addedNodes.length > 0

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

@@ -1,97 +1,93 @@
-/** Register global error and unhandled-rejection listeners that report to the parent window. */
+/// <reference types="vite/client" />
 
-const ERROR_SUPPRESSION_TIMEOUT = 10000;
+window.removeEventListener("unhandledrejection", handleUnhandledRejection);
+window.removeEventListener("error", handleWindowError);
 
-export function setupUnhandledErrors(hmr?: { on(event: string, cb: (...args: any[]) => void): void }) {
-  window.removeEventListener("unhandledrejection", handleUnhandledRejection);
-  window.removeEventListener("error", handleWindowError);
+window.addEventListener("unhandledrejection", handleUnhandledRejection);
+window.addEventListener("error", handleWindowError);
 
-  window.addEventListener("unhandledrejection", handleUnhandledRejection);
-  window.addEventListener("error", handleWindowError);
+let shouldPropagateErrors = true;
+let suppressionTimer: ReturnType<typeof setTimeout> | null = null;
 
-  let shouldPropagateErrors = true;
-  let suppressionTimer: ReturnType<typeof setTimeout> | null = null;
+if (import.meta.hot) {
+  import.meta.hot.on("vite:beforeUpdate", () => {
+    shouldPropagateErrors = false;
 
-  if (hmr) {
-    hmr.on("vite:beforeUpdate", () => {
-      shouldPropagateErrors = false;
-
-      if (suppressionTimer) {
-        clearTimeout(suppressionTimer);
-      }
-
-      suppressionTimer = setTimeout(() => {
-        shouldPropagateErrors = true;
-        suppressionTimer = null;
-      }, ERROR_SUPPRESSION_TIMEOUT);
-    });
-    hmr.on("vite:beforeFullReload", () => {
-      shouldPropagateErrors = false;
-      if (suppressionTimer) {
-        clearTimeout(suppressionTimer);
-        suppressionTimer = null;
-      }
-    });
-  }
+    if (suppressionTimer) {
+      clearTimeout(suppressionTimer);
+    }
 
-  function onAppError({
-    title,
-    details,
-    componentName,
-    originalError,
-  }: {
-    title: string;
-    details: string;
-    componentName: string;
-    originalError: any;
-  }) {
-    if (originalError?.response?.status === 402 || !shouldPropagateErrors) {
-      return;
+    suppressionTimer = setTimeout(() => {
+      shouldPropagateErrors = true;
+      suppressionTimer = null;
+    }, import.meta.env.VITE_HMR_ERROR_SUPPRESSION_DELAY ?? 10000);
+  });
+  import.meta.hot.on("vite:beforeFullReload", () => {
+    shouldPropagateErrors = false;
+    if (suppressionTimer) {
+      clearTimeout(suppressionTimer);
+      suppressionTimer = null;
     }
-    window.parent?.postMessage(
-      {
-        type: "app_error",
-        error: {
-          title: title.toString(),
-          details: details?.toString(),
-          componentName: componentName?.toString(),
-          stack: originalError?.stack?.toString(),
-        },
-      },
-      "*"
-    );
-  }
+  });
+}
 
-  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();
-    onAppError({
-      title: msg,
-      details: event.reason.toString(),
-      componentName: functionName,
-      originalError: event.reason,
-    });
+function onAppError({
+  title,
+  details,
+  componentName,
+  originalError,
+}: {
+  title: string;
+  details: string;
+  componentName: string;
+  originalError: any;
+}) {
+  if (originalError?.response?.status === 402 || !shouldPropagateErrors) {
+    return;
   }
+  window.parent?.postMessage(
+    {
+      type: "app_error",
+      error: {
+        title: title.toString(),
+        details: details?.toString(),
+        componentName: componentName?.toString(),
+        stack: originalError?.stack?.toString(),
+      },
+    },
+    "*"
+  );
+}
 
-  function handleWindowError(event: any) {
-    const stack = event.error?.stack;
-    let functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
-    if (functionName === "eval") {
-      functionName = null;
-    }
+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();
+  onAppError({
+    title: msg,
+    details: event.reason.toString(),
+    componentName: functionName,
+    originalError: event.reason,
+  });
+}
 
-    const msg = functionName
-      ? `in ${functionName}: ${event.error.toString()}`
-      : event.error.toString();
-    onAppError({
-      title: msg,
-      details: event.error.toString(),
-      componentName: functionName,
-      originalError: event.error,
-    });
+function handleWindowError(event: any) {
+  const stack = event.error?.stack;
+  let functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+  if (functionName === "eval") {
+    functionName = null;
   }
+
+  const msg = functionName
+    ? `in ${functionName}: ${event.error.toString()}`
+    : event.error.toString();
+  onAppError({
+    title: msg,
+    details: event.error.toString(),
+    componentName: functionName,
+    originalError: event.error,
+  });
 }

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

@@ -1,6 +1,6 @@
 import { findElementsById, updateElementClasses } from "./utils.js";
 
-export function setupVisualEditAgent() {
+if (window.self !== window.top) {
   // State variables (replacing React useState/useRef)
   let isVisualEditMode = false;
   let isPopoverDragging = false;
@@ -216,6 +216,16 @@ export function setupVisualEditAgent() {
       centerY: rect.top + rect.height / 2,
     };
 
+    // Collect allowed element attributes
+    const ALLOWED_ATTRIBUTES: string[] = ["src"];
+    const attributes: Record<string, string> = {};
+    for (const attr of ALLOWED_ATTRIBUTES) {
+      const val = element.getAttribute(attr);
+      if (val !== null) {
+        attributes[attr] = val;
+      }
+    }
+
     // Send message to parent window with element info including position
     const svgElement = element as SVGElement;
     const elementData = {
@@ -232,6 +242,7 @@ export function setupVisualEditAgent() {
       linenumber: htmlElement.dataset.linenumber,
       filename: htmlElement.dataset.filename,
       position: elementPosition,
+      attributes,
     };
     window.parent.postMessage(elementData, "*");
   };
@@ -279,6 +290,31 @@ export function setupVisualEditAgent() {
     }, 50);
   };
 
+  // Update element attribute by visual selector ID
+  const updateElementAttribute = (
+    visualSelectorId: string,
+    attribute: string,
+    value: string
+  ) => {
+    const elements = findElementsById(visualSelectorId);
+    if (elements.length === 0) return;
+
+    elements.forEach((element) => {
+      element.setAttribute(attribute, value);
+    });
+
+    // Reposition overlays after attribute change (e.g. image src swap can affect layout)
+    setTimeout(() => {
+      if (selectedElementId === visualSelectorId) {
+        selectedOverlays.forEach((overlay, index) => {
+          if (index < elements.length) {
+            positionOverlay(overlay, elements[index]!);
+          }
+        });
+      }
+    }, 50);
+  };
+
   // Update element content by visual selector ID
   const updateElementContent = (visualSelectorId: string, content: string) => {
     const elements = findElementsById(visualSelectorId);
@@ -394,6 +430,25 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "update-attribute":
+        if (
+          message.data &&
+          message.data.attribute !== undefined &&
+          message.data.value !== undefined
+        ) {
+          updateElementAttribute(
+            message.data.visualSelectorId,
+            message.data.attribute,
+            message.data.value
+          );
+        } else {
+          console.warn(
+            "[VisualEditAgent] Invalid update-attribute message:",
+            message
+          );
+        }
+        break;
+
       case "unselect-element":
         unselectElement();
         break;
@@ -558,4 +613,4 @@ export function setupVisualEditAgent() {
 
   // Send ready message to parent
   window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
-}
+}

package/README.md

@@ -1,93 +0,0 @@
-# @base44/vite-plugin
-
-Vite plugin for Base44 applications running in sandboxed iframes. Provides error tracking, HMR notifications, visual editing, navigation tracking, and legacy SDK compatibility.
-
-## Installation
-
-```bash
-npm install @base44/vite-plugin
-```
-
-## Usage
-
-```ts
-// vite.config.ts
-import base44 from "@base44/vite-plugin";
-
-export default {
-  plugins: [
-    base44({
-      legacySDKImports: false,
-      hmrNotifier: true,
-      navigationNotifier: true,
-      visualEditAgent: true,
-    }),
-  ],
-};
-```
-
-### Options
-
-| Option               | Type      | Default | Description                                         |
-| -------------------- | --------- | ------- | --------------------------------------------------- |
-| `legacySDKImports`   | `boolean` | `false` | Enable legacy SDK import resolution via compat layer |
-| `hmrNotifier`        | `boolean` | `false` | Notify parent window of HMR update lifecycle         |
-| `navigationNotifier` | `boolean` | `false` | Track URL changes and notify parent window           |
-| `visualEditAgent`    | `boolean` | `false` | Enable interactive visual element editing            |
-
-## Architecture
-
-### Plugin Composition
-
-The plugin registers four sub-plugins when running in a sandbox (`MODAL_SANDBOX_ID` is set):
-
-1. **base44** — Core configuration: path aliases (`@/` → `/src/`), environment variables, dependency optimization, and legacy SDK import resolution.
-2. **iframe-hmr** — Sets CORS and `frame-ancestors` headers to allow iframe embedding.
-3. **error-overlay** — Replaces Vite's default error overlay with a custom one that reports errors to the parent window.
-4. **html-injections** — Injects the sandbox bridge script into the HTML.
-
-Outside a sandbox, only the core plugin runs (with optional API proxy support via `VITE_BASE44_APP_BASE_URL`).
-
-### Sandbox Bridge
-
-The bridge (`src/bridge.ts`) is a single ES module that consolidates all sandbox-side features. Instead of injecting multiple individual `<script>` tags, the HTML injections plugin injects one inline script that dynamically imports the bridge and calls `init()` with the configured options.
-
-The bridge conditionally sets up:
-
-- **Error handlers** — Global `error` and `unhandledrejection` listeners that report to the parent via `postMessage`.
-- **Mount observer** — `MutationObserver` that detects when instrumented elements (`data-source-location`) are rendered.
-- **HMR notifier** — Forwards Vite's `beforeUpdate`/`afterUpdate` events to the parent.
-- **Navigation notifier** — Intercepts `pushState`, `replaceState`, and `popstate` to track URL changes.
-- **Visual edit agent** — Overlay system for selecting and editing elements with source location awareness.
-
-### Local Development
-
-For developing the bridge itself, you can load it from a local dev server instead of the installed package:
-
-1. Generate local HTTPS certificates:
-   ```bash
-   mkcert localhost
-   ```
-
-2. Start the dev server (with optional watch mode):
-   ```bash
-   npm run dev       # serve dist/statics/ on https://localhost:3201
-   npm run dev -- -w # same, with auto-rebuild on changes
-   ```
-
-3. Add `?sandbox-bridge=local` to your app's URL to load the bridge from `localhost:3201` instead of `node_modules`.
-
-### Legacy SDK Compatibility
-
-When `legacySDKImports` is enabled, imports of `/entities`, `/functions`, `/integrations`, and `/agents` are resolved to compatibility modules in `compat/`. These use `Proxy` objects to route calls to the Base44 SDK client.
-
-## Building
-
-```bash
-npm run build          # TypeScript compilation (plugin)
-npm run build:bridge   # tsup bundle (bridge ES module for browsers)
-```
-
-## License
-
-MIT

package/dist/bridge.d.ts

@@ -1,20 +0,0 @@
-/**
- * Sandbox bridge entry point — dynamically imported by the inline script
- * injected via html-injections-plugin. Conditionally initialises each
- * sandbox-side feature based on the supplied options.
- */
-/**
- * Initialise the sandbox bridge. Called once from the injected inline script.
- * @param options  Feature flags — each defaults to enabled unless explicitly disabled.
- * @param hmr      Vite's HMR client (`import.meta.hot`), passed only in dev mode.
- */
-export declare function init(options?: {
-    unhandledErrors?: boolean;
-    mountObserver?: boolean;
-    hmrNotifier?: boolean;
-    navigationNotifier?: boolean;
-    visualEditAgent?: boolean;
-}, hmr?: {
-    on(event: string, cb: (...args: any[]) => void): void;
-}): void;
-//# sourceMappingURL=bridge.d.ts.map

package/dist/bridge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bridge.d.ts","sourceRoot":"","sources":["../src/bridge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH;;;;GAIG;AACH,wBAAgB,IAAI,CAClB,OAAO,GAAE;IACP,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CACtB,EACN,GAAG,CAAC,EAAE;IAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,IAAI,CAAA;CAAE,QAWhE"}