@base44/vite-plugin 0.1.0

package/compat/agents.cjs

@@ -0,0 +1,13 @@
+const { base44 } = require("./base44Client.cjs");
+
+module.exports = new Proxy(
+  {},
+  {
+    get: (_, prop) => {
+      if (prop === "agentSDK" || prop === "default") {
+        return base44.agents;
+      }
+      return base44.agents[prop];
+    },
+  }
+);

package/compat/base44Client.cjs

@@ -0,0 +1,6 @@
+const { createClient } = require('@base44/sdk');
+
+module.exports.base44 = createClient({
+  appId: process.env.VITE_BASE44_APP_ID,
+  serverUrl: process.env.VITE_BASE44_BACKEND_URL
+});

package/compat/entities.cjs

@@ -0,0 +1,25 @@
+const { base44 } = require('./base44Client.cjs');
+
+module.exports = new Proxy({}, {
+  get: (_, entityName) => {
+    return new Proxy({}, {
+      get: (_, prop) => {
+        if (entityName === 'User') {
+          if (prop === 'me') {
+            return base44.auth.me;
+          }
+          if (prop === 'loginWithRedirect' || prop === 'login') {
+            return base44.auth.loginWithRedirect;
+          }
+          if (prop === 'logout') {
+            return base44.auth.logout;
+          }
+          if (prop === 'updateMyUserData') {
+            return base44.auth.updateMe;
+          }
+        }
+        return base44.entities[entityName][prop];
+      }
+    });
+  }
+});

package/compat/functions.cjs

@@ -0,0 +1,9 @@
+const { base44 } = require('./base44Client.cjs');
+
+module.exports = new Proxy({}, {
+  get: (_, prop) => {
+    return (...args) => {
+      return base44.functions.invoke(prop, ...args);
+    }
+  }
+});

package/compat/integrations.cjs

@@ -0,0 +1,9 @@
+const { base44 } = require('./base44Client.cjs');
+
+module.exports = new Proxy({}, {
+  get: (_, prop) => {
+    return (...args) => {
+      return base44.integrations.Core[prop](...args);
+    }
+  }
+});

package/dist/ErrorOverlay.d.ts

@@ -0,0 +1,12 @@
+declare const HTMLElement: {
+    new (): {};
+};
+export declare class ErrorOverlay extends HTMLElement {
+    static getOverlayHTML(): string;
+    close(): void;
+    static sendErrorToParent(error: Error, title: string, details: string | undefined, componentName: string | undefined): void;
+    constructor(error: Error);
+}
+export declare const errorOverlayCode: string;
+export {};
+//# sourceMappingURL=ErrorOverlay.d.ts.map

package/dist/ErrorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorOverlay.d.ts","sourceRoot":"","sources":["../src/ErrorOverlay.ts"],"names":[],"mappings":"AAGA,QAAA,MAAQ,WAAW;;CAA0B,CAAC;AAE9C,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,cAAc;IAMrB,KAAK;IAIL,MAAM,CAAC,iBAAiB,CACtB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,aAAa,EAAE,MAAM,GAAG,SAAS;gBAqBvB,KAAK,EAAE,KAAK;CAuBzB;AAGD,eAAO,MAAM,gBAAgB,QAG5B,CAAC"}

package/dist/ErrorOverlay.js

@@ -0,0 +1,51 @@
+/// <reference lib="dom" />
+// Make HTMLElement available in non-browser environments
+const { HTMLElement = class {
+} } = globalThis;
+export class ErrorOverlay extends HTMLElement {
+    static getOverlayHTML() {
+        return `
+      <div>
+			</div>
+    `;
+    }
+    close() {
+        this.parentNode?.removeChild(this);
+    }
+    static sendErrorToParent(error, title, details, componentName) {
+        // Send error to parent using framewire
+        if (globalThis.window?.parent) {
+            try {
+                globalThis.window.parent?.postMessage({
+                    type: "app_error",
+                    error: { title, details, componentName, originalError: error },
+                }, "*");
+            }
+            catch (error) {
+                console.warn("Failed to send error to iframe parent:", error?.message);
+            }
+        }
+    }
+    constructor(error) {
+        super();
+        const stack = error?.stack;
+        let componentName = stack?.match(/at\s+(\w+)\s+\(eval/)?.[1];
+        if (componentName === "eval") {
+            componentName = undefined;
+        }
+        const title = componentName
+            ? `in ${componentName}: ${error.message?.toString()}`
+            : error.message?.toString();
+        const details = error?.stack;
+        // Call editor frame with the error (via post message)
+        ErrorOverlay.sendErrorToParent(error, title, details, componentName);
+        // Create the overlay element using HTML template
+        const overlay = document.createElement("div");
+        overlay.innerHTML = ErrorOverlay.getOverlayHTML();
+        // Add to DOM
+        document.body.appendChild(overlay);
+    }
+}
+// vite/react-plugin transpiles classes with _SomeClass, so we need to replace all _ErrorOverlay with ErrorOverlay
+export const errorOverlayCode = ErrorOverlay.toString().replaceAll("_ErrorOverlay", "ErrorOverlay");
+//# sourceMappingURL=ErrorOverlay.js.map

package/dist/ErrorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorOverlay.js","sourceRoot":"","sources":["../src/ErrorOverlay.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,yDAAyD;AACzD,MAAM,EAAE,WAAW,GAAG;CAAQ,EAAE,GAAG,UAAU,CAAC;AAE9C,MAAM,OAAO,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,cAAc;QACnB,OAAO;;;KAGN,CAAC;IACJ,CAAC;IACD,KAAK;QACF,IAAY,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,CAAC,iBAAiB,CACtB,KAAY,EACZ,KAAa,EACb,OAA2B,EAC3B,aAAiC;QAEjC,uCAAuC;QACvC,IAAI,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC9B,IAAI,CAAC;gBACH,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CACnC;oBACE,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE;iBAC/D,EACD,GAAG,CACJ,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CACV,wCAAwC,EACvC,KAAe,EAAE,OAAO,CAC1B,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,YAAY,KAAY;QACtB,KAAK,EAAE,CAAC;QAER,MAAM,KAAK,GAAG,KAAK,EAAE,KAAK,CAAC;QAC3B,IAAI,aAAa,GAAG,KAAK,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC7D,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;YAC7B,aAAa,GAAG,SAAS,CAAC;QAC5B,CAAC;QACD,MAAM,KAAK,GAAG,aAAa;YACzB,CAAC,CAAC,MAAM,aAAa,KAAK,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YACrD,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,KAAK,EAAE,KAAK,CAAC;QAE7B,sDAAsD;QACtD,YAAY,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;QAErE,iDAAiD;QACjD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,GAAG,YAAY,CAAC,cAAc,EAAE,CAAC;QAElD,aAAa;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;CACF;AAED,kHAAkH;AAClH,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC,UAAU,CAChE,eAAe,EACf,cAAc,CACf,CAAC"}

package/dist/error-overlay-plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+export declare function errorOverlayPlugin(): Plugin;
+//# sourceMappingURL=error-overlay-plugin.d.ts.map

package/dist/error-overlay-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-overlay-plugin.d.ts","sourceRoot":"","sources":["../src/error-overlay-plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,wBAAgB,kBAAkB,IAc3B,MAAM,CACZ"}

package/dist/error-overlay-plugin.js

@@ -0,0 +1,15 @@
+import { errorOverlayCode } from "./ErrorOverlay.js";
+export function errorOverlayPlugin() {
+    return {
+        name: "error-overlay",
+        apply: (config) => config.mode === "development",
+        transform(code, id, opts = {}) {
+            if (opts?.ssr)
+                return;
+            if (!id.includes("vite/dist/client/client.mjs"))
+                return;
+            return code.replace("class ErrorOverlay", errorOverlayCode + "\nclass OldErrorOverlay");
+        },
+    };
+}
+//# sourceMappingURL=error-overlay-plugin.js.map

package/dist/error-overlay-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-overlay-plugin.js","sourceRoot":"","sources":["../src/error-overlay-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,UAAU,kBAAkB;IAChC,OAAO;QACL,IAAI,EAAE,eAAe;QACrB,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,aAAa;QAChD,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,GAAG,EAAE;YAC3B,IAAI,IAAI,EAAE,GAAG;gBAAE,OAAO;YAEtB,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,6BAA6B,CAAC;gBAAE,OAAO;YAExD,OAAO,IAAI,CAAC,OAAO,CACjB,oBAAoB,EACpB,gBAAgB,GAAG,yBAAyB,CAC7C,CAAC;QACJ,CAAC;KACQ,CAAC;AACd,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from "vite";
+export default function vitePlugin(opts?: {
+    legacySDKImports?: boolean;
+}): Plugin<any>[];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,MAAM,CAAC;AAO/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,IAAI,GAAE;IACJ,gBAAgB,CAAC,EAAE,OAAO,CAAC;CACvB,iBAgIP"}

package/dist/index.js

@@ -0,0 +1,105 @@
+import { loadEnv } from "vite";
+import { errorOverlayPlugin } from "./error-overlay-plugin.js";
+import { visualEditPlugin } from "./visual-edit-plugin.js";
+const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
+export default function vitePlugin(opts = {}) {
+    const { legacySDKImports = false } = opts;
+    return [
+        {
+            name: "base44",
+            config: ({ mode }) => {
+                const env = loadEnv(mode ?? "development", process.cwd(), "");
+                return {
+                    resolve: {
+                        alias: {
+                            "@/": "/src/",
+                        },
+                    },
+                    ...(isRunningInSandbox
+                        ? {
+                            server: {
+                                host: "0.0.0.0", // Bind to all interfaces for container access
+                                port: 5173,
+                                strictPort: true,
+                                // Allow all hosts - essential for Modal tunnel URLs
+                                allowedHosts: true,
+                                watch: {
+                                    // Enable polling for better file change detection in containers
+                                    usePolling: true,
+                                    interval: 100, // Check every 100ms for responsive HMR
+                                },
+                                hmr: {
+                                    protocol: "wss",
+                                    clientPort: 443,
+                                },
+                            },
+                            build: {
+                                rollupOptions: {
+                                    onwarn(warning, warn) {
+                                        // Treat import errors as fatal errors
+                                        if (warning.code === "UNRESOLVED_IMPORT" ||
+                                            warning.code === "MISSING_EXPORT") {
+                                            throw new Error(`Build failed: ${warning.message}`);
+                                        }
+                                        // Use default for other warnings
+                                        warn(warning);
+                                    },
+                                },
+                            },
+                        }
+                        : {}),
+                    optimizeDeps: {
+                        esbuildOptions: {
+                            loader: {
+                                ".js": "jsx",
+                            },
+                            ...(legacySDKImports
+                                ? {
+                                    define: {
+                                        "process.env.VITE_BASE44_APP_ID": JSON.stringify(env.VITE_BASE44_APP_ID),
+                                        "process.env.VITE_BASE44_BACKEND_URL": JSON.stringify(env.VITE_BASE44_BACKEND_URL),
+                                    },
+                                }
+                                : {}),
+                        },
+                    },
+                };
+            },
+            resolveId(source, importer, options) {
+                if (legacySDKImports) {
+                    if (source.includes("/entities")) {
+                        return this.resolve("@base44/vite-plugin/compat/entities.cjs", importer, options);
+                    }
+                    if (source.includes("/functions")) {
+                        return this.resolve("@base44/vite-plugin/compat/functions.cjs", importer, options);
+                    }
+                    if (source.includes("/integrations")) {
+                        return this.resolve("@base44/vite-plugin/compat/integrations.cjs", importer, options);
+                    }
+                    if (source.includes("@/agents")) {
+                        return this.resolve("@base44/vite-plugin/compat/agents.cjs", importer, options);
+                    }
+                }
+                return null;
+            },
+        },
+        ...(isRunningInSandbox
+            ? [
+                {
+                    name: "iframe-hmr",
+                    configureServer(server) {
+                        server.middlewares.use((req, res, next) => {
+                            // Allow iframe embedding
+                            res.setHeader("X-Frame-Options", "ALLOWALL");
+                            res.setHeader("Content-Security-Policy", "frame-ancestors *;");
+                            next();
+                        });
+                    },
+                },
+                errorOverlayPlugin(),
+                visualEditPlugin(),
+            ]
+            : []),
+    ];
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

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

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+export declare function visualEditPlugin(): Plugin;
+//# sourceMappingURL=visual-edit-plugin.d.ts.map

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

@@ -0,0 +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;AA+FnC,wBAAgB,gBAAgB,IAuKzB,MAAM,CACZ"}

package/dist/visual-edit-plugin.js

@@ -0,0 +1,229 @@
+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";
+// Helper function to check if JSX element contains dynamic content
+function checkIfElementHasDynamicContent(jsxElement) {
+    let hasDynamicContent = false;
+    // Helper function to check if any node contains dynamic patterns
+    function checkNodeForDynamicContent(node) {
+        // JSX expressions like {variable}, {func()}, {obj.prop}
+        if (t.isJSXExpressionContainer(node)) {
+            const expression = node.expression;
+            // Skip empty expressions {}
+            if (t.isJSXEmptyExpression(expression)) {
+                return false;
+            }
+            // Any non-literal expression is considered dynamic
+            if (!t.isLiteral(expression)) {
+                return true;
+            }
+        }
+        // Template literals with expressions `Hello ${name}`
+        if (t.isTemplateLiteral(node) && node.expressions.length > 0) {
+            return true;
+        }
+        // Member expressions like props.title, state.value
+        if (t.isMemberExpression(node)) {
+            return true;
+        }
+        // Function calls like getData(), format()
+        if (t.isCallExpression(node)) {
+            return true;
+        }
+        // Conditional expressions like condition ? "yes" : "no"
+        if (t.isConditionalExpression(node)) {
+            return true;
+        }
+        // Identifier references (could be props, state, variables)
+        if (t.isIdentifier(node)) {
+            // Common dynamic identifiers
+            const dynamicNames = [
+                "props",
+                "state",
+                "data",
+                "item",
+                "value",
+                "text",
+                "content",
+            ];
+            if (dynamicNames.some((name) => node.name.includes(name))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // Recursively traverse all child nodes
+    function traverseNode(node) {
+        if (checkNodeForDynamicContent(node)) {
+            hasDynamicContent = true;
+            return;
+        }
+        // Recursively check child nodes
+        Object.keys(node).forEach((key) => {
+            const value = node[key];
+            if (Array.isArray(value)) {
+                value.forEach((child) => {
+                    if (child && typeof child === "object" && child.type) {
+                        traverseNode(child);
+                    }
+                });
+            }
+            else if (value && typeof value === "object" && value.type) {
+                traverseNode(value);
+            }
+        });
+    }
+    // Check all children of the JSX element
+    jsxElement.children.forEach((child) => {
+        if (hasDynamicContent)
+            return; // Early exit if already found dynamic content
+        traverseNode(child);
+    });
+    return hasDynamicContent;
+}
+export function visualEditPlugin() {
+    return {
+        name: "visual-edit-transform",
+        apply: (config) => config.mode === "development",
+        enforce: "pre",
+        order: "pre",
+        // Inject Tailwind CDN for visual editing capabilities
+        transformIndexHtml(html) {
+            // Inject the Tailwind CSS CDN script right before the closing </head> tag
+            const tailwindScript = `    <!-- Tailwind CSS CDN for visual editing -->\n    <script src="https://cdn.tailwindcss.com"></script>\n  `;
+            return html.replace("</head>", tailwindScript + "</head>");
+        },
+        transform(code, id) {
+            // Skip node_modules and visual-edit-agent itself
+            if (id.includes("node_modules") || id.includes("visual-edit-agent")) {
+                return null;
+            }
+            // Process JS/JSX/TS/TSX files
+            if (!id.match(/\.(jsx?|tsx?)$/)) {
+                return null;
+            }
+            // Extract filename from path, preserving pages/ or components/ structure
+            const pathParts = id.split("/");
+            let filename;
+            // Check if this is a pages or components file
+            if (id.includes("/pages/")) {
+                const pagesIndex = pathParts.findIndex((part) => part === "pages");
+                if (pagesIndex >= 0 && pagesIndex < pathParts.length - 1) {
+                    // Get all parts from 'pages' to the file, preserving nested structure
+                    const relevantParts = pathParts.slice(pagesIndex, pathParts.length);
+                    const lastPart = relevantParts[relevantParts.length - 1];
+                    // Remove file extension from the last part
+                    relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+                        ? lastPart.split(".")[0]
+                        : lastPart;
+                    filename = relevantParts.join("/");
+                }
+                else {
+                    filename = pathParts[pathParts.length - 1];
+                    if (filename.includes(".")) {
+                        filename = filename.split(".")[0];
+                    }
+                }
+            }
+            else if (id.includes("/components/")) {
+                const componentsIndex = pathParts.findIndex((part) => part === "components");
+                if (componentsIndex >= 0 && componentsIndex < pathParts.length - 1) {
+                    // Get all parts from 'components' to the file, preserving nested structure
+                    const relevantParts = pathParts.slice(componentsIndex, pathParts.length);
+                    const lastPart = relevantParts[relevantParts.length - 1];
+                    // Remove file extension from the last part
+                    relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+                        ? lastPart.split(".")[0]
+                        : lastPart;
+                    filename = relevantParts.join("/");
+                }
+                else {
+                    filename = pathParts[pathParts.length - 1];
+                    if (filename.includes(".")) {
+                        filename = filename.split(".")[0];
+                    }
+                }
+            }
+            else {
+                // For other files (like layout), just use the filename
+                filename = pathParts[pathParts.length - 1];
+                if (filename.includes(".")) {
+                    filename = filename.split(".")[0];
+                }
+            }
+            try {
+                // Parse the code into an AST
+                const ast = parse(code, {
+                    sourceType: "module",
+                    plugins: [
+                        "jsx",
+                        "typescript",
+                        "decorators-legacy",
+                        "classProperties",
+                        "objectRestSpread",
+                        "functionBind",
+                        "exportDefaultFrom",
+                        "exportNamespaceFrom",
+                        "dynamicImport",
+                        "nullishCoalescingOperator",
+                        "optionalChaining",
+                        "asyncGenerators",
+                        "bigInt",
+                        "optionalCatchBinding",
+                        "throwExpressions",
+                    ],
+                });
+                // Traverse the AST and add source location and dynamic content attributes to JSX elements
+                let elementsProcessed = 0;
+                traverse.default(ast, {
+                    JSXElement(path) {
+                        const jsxElement = path.node;
+                        const openingElement = jsxElement.openingElement;
+                        // Skip fragments
+                        if (t.isJSXFragment(jsxElement))
+                            return;
+                        // Skip if already has source location attribute
+                        const hasSourceLocation = openingElement.attributes.some((attr) => t.isJSXAttribute(attr) &&
+                            t.isJSXIdentifier(attr.name) &&
+                            attr.name.name === "data-source-location");
+                        if (hasSourceLocation)
+                            return;
+                        // Get line and column from AST node location
+                        const { line, column } = openingElement.loc?.start || {
+                            line: 1,
+                            column: 0,
+                        };
+                        // Create the source location attribute
+                        const sourceLocationAttr = t.jsxAttribute(t.jsxIdentifier("data-source-location"), t.stringLiteral(`${filename}:${line}:${column}`));
+                        // Check if element has dynamic content
+                        const isDynamic = checkIfElementHasDynamicContent(jsxElement);
+                        // Create the dynamic content attribute
+                        const dynamicContentAttr = t.jsxAttribute(t.jsxIdentifier("data-dynamic-content"), t.stringLiteral(isDynamic ? "true" : "false"));
+                        // Add both attributes to the beginning of the attributes array
+                        openingElement.attributes.unshift(sourceLocationAttr, dynamicContentAttr);
+                        elementsProcessed++;
+                    },
+                });
+                // Generate the code back from the AST
+                const result = generate.default(ast, {
+                    compact: false,
+                    concise: false,
+                    retainLines: true,
+                });
+                return {
+                    code: result.code,
+                    map: null,
+                };
+            }
+            catch (error) {
+                console.error("Failed to add source location to JSX:", error);
+                return {
+                    code: code, // Return original code on failure
+                    map: null,
+                };
+            }
+        },
+    };
+}
+//# sourceMappingURL=visual-edit-plugin.js.map

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

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

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@base44/vite-plugin",
+  "version": "0.1.0",
+  "description": "The Vite plugin for base44 based applications",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js",
+    "./compat/*": "./compat/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "compat"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
+    "@types/node": "^24.6.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.28.5",
+    "@babel/parser": "^7.28.5",
+    "@babel/traverse": "^7.28.5",
+    "@babel/types": "^7.28.5"
+  }
+}

package/src/ErrorOverlay.ts

@@ -0,0 +1,71 @@
+/// <reference lib="dom" />
+
+// Make HTMLElement available in non-browser environments
+const { HTMLElement = class {} } = globalThis;
+
+export class ErrorOverlay extends HTMLElement {
+  static getOverlayHTML() {
+    return `
+      <div>
+			</div>
+    `;
+  }
+  close() {
+    (this as any).parentNode?.removeChild(this);
+  }
+
+  static sendErrorToParent(
+    error: Error,
+    title: string,
+    details: string | undefined,
+    componentName: string | undefined
+  ) {
+    // Send error to parent using framewire
+    if (globalThis.window?.parent) {
+      try {
+        globalThis.window.parent?.postMessage(
+          {
+            type: "app_error",
+            error: { title, details, componentName, originalError: error },
+          },
+          "*"
+        );
+      } catch (error) {
+        console.warn(
+          "Failed to send error to iframe parent:",
+          (error as Error)?.message
+        );
+      }
+    }
+  }
+
+  constructor(error: Error) {
+    super();
+
+    const stack = error?.stack;
+    let componentName = stack?.match(/at\s+(\w+)\s+\(eval/)?.[1];
+    if (componentName === "eval") {
+      componentName = undefined;
+    }
+    const title = componentName
+      ? `in ${componentName}: ${error.message?.toString()}`
+      : error.message?.toString();
+    const details = error?.stack;
+
+    // Call editor frame with the error (via post message)
+    ErrorOverlay.sendErrorToParent(error, title, details, componentName);
+
+    // Create the overlay element using HTML template
+    const overlay = document.createElement("div");
+    overlay.innerHTML = ErrorOverlay.getOverlayHTML();
+
+    // Add to DOM
+    document.body.appendChild(overlay);
+  }
+}
+
+// vite/react-plugin transpiles classes with _SomeClass, so we need to replace all _ErrorOverlay with ErrorOverlay
+export const errorOverlayCode = ErrorOverlay.toString().replaceAll(
+  "_ErrorOverlay",
+  "ErrorOverlay"
+);

package/src/error-overlay-plugin.ts

@@ -0,0 +1,19 @@
+import { errorOverlayCode } from "./ErrorOverlay.js";
+import type { Plugin } from "vite";
+
+export function errorOverlayPlugin() {
+  return {
+    name: "error-overlay",
+    apply: (config) => config.mode === "development",
+    transform(code, id, opts = {}) {
+      if (opts?.ssr) return;
+
+      if (!id.includes("vite/dist/client/client.mjs")) return;
+
+      return code.replace(
+        "class ErrorOverlay",
+        errorOverlayCode + "\nclass OldErrorOverlay"
+      );
+    },
+  } as Plugin;
+}

package/src/index.ts

@@ -0,0 +1,139 @@
+import type { Plugin, UserConfig } from "vite";
+import { loadEnv } from "vite";
+import { errorOverlayPlugin } from "./error-overlay-plugin.js";
+import { visualEditPlugin } from "./visual-edit-plugin.js";
+
+const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
+
+export default function vitePlugin(
+  opts: {
+    legacySDKImports?: boolean;
+  } = {}
+) {
+  const { legacySDKImports = false } = opts;
+
+  return [
+    {
+      name: "base44",
+      config: ({ mode }) => {
+        const env = loadEnv(mode ?? "development", process.cwd(), "");
+
+        return {
+          resolve: {
+            alias: {
+              "@/": "/src/",
+            },
+          },
+          ...(isRunningInSandbox
+            ? ({
+                server: {
+                  host: "0.0.0.0", // Bind to all interfaces for container access
+                  port: 5173,
+                  strictPort: true,
+                  // Allow all hosts - essential for Modal tunnel URLs
+                  allowedHosts: true,
+                  watch: {
+                    // Enable polling for better file change detection in containers
+                    usePolling: true,
+                    interval: 100, // Check every 100ms for responsive HMR
+                  },
+                  hmr: {
+                    protocol: "wss",
+                    clientPort: 443,
+                  },
+                },
+                build: {
+                  rollupOptions: {
+                    onwarn(warning, warn) {
+                      // Treat import errors as fatal errors
+                      if (
+                        warning.code === "UNRESOLVED_IMPORT" ||
+                        warning.code === "MISSING_EXPORT"
+                      ) {
+                        throw new Error(`Build failed: ${warning.message}`);
+                      }
+                      // Use default for other warnings
+                      warn(warning);
+                    },
+                  },
+                },
+              } as Partial<UserConfig>)
+            : {}),
+          optimizeDeps: {
+            esbuildOptions: {
+              loader: {
+                ".js": "jsx",
+              },
+              ...(legacySDKImports
+                ? {
+                    define: {
+                      "process.env.VITE_BASE44_APP_ID": JSON.stringify(
+                        env.VITE_BASE44_APP_ID
+                      ),
+                      "process.env.VITE_BASE44_BACKEND_URL": JSON.stringify(
+                        env.VITE_BASE44_BACKEND_URL
+                      ),
+                    },
+                  }
+                : {}),
+            },
+          },
+        };
+      },
+      resolveId(source, importer, options) {
+        if (legacySDKImports) {
+          if (source.includes("/entities")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/entities.cjs",
+              importer,
+              options
+            );
+          }
+
+          if (source.includes("/functions")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/functions.cjs",
+              importer,
+              options
+            );
+          }
+
+          if (source.includes("/integrations")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/integrations.cjs",
+              importer,
+              options
+            );
+          }
+
+          if (source.includes("@/agents")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/agents.cjs",
+              importer,
+              options
+            );
+          }
+        }
+
+        return null;
+      },
+    } as Plugin,
+    ...(isRunningInSandbox
+      ? [
+          {
+            name: "iframe-hmr",
+            configureServer(server) {
+              server.middlewares.use((req, res, next) => {
+                // Allow iframe embedding
+                res.setHeader("X-Frame-Options", "ALLOWALL");
+                res.setHeader("Content-Security-Policy", "frame-ancestors *;");
+                next();
+              });
+            },
+          } as Plugin,
+          errorOverlayPlugin(),
+          visualEditPlugin(),
+        ]
+      : []),
+  ];
+}

package/src/visual-edit-plugin.ts

@@ -0,0 +1,268 @@
+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";
+
+// Helper function to check if JSX element contains dynamic content
+function checkIfElementHasDynamicContent(jsxElement: any) {
+  let hasDynamicContent = false;
+
+  // Helper function to check if any node contains dynamic patterns
+  function checkNodeForDynamicContent(node: any) {
+    // JSX expressions like {variable}, {func()}, {obj.prop}
+    if (t.isJSXExpressionContainer(node)) {
+      const expression = node.expression;
+
+      // Skip empty expressions {}
+      if (t.isJSXEmptyExpression(expression)) {
+        return false;
+      }
+
+      // Any non-literal expression is considered dynamic
+      if (!t.isLiteral(expression)) {
+        return true;
+      }
+    }
+
+    // Template literals with expressions `Hello ${name}`
+    if (t.isTemplateLiteral(node) && node.expressions.length > 0) {
+      return true;
+    }
+
+    // Member expressions like props.title, state.value
+    if (t.isMemberExpression(node)) {
+      return true;
+    }
+
+    // Function calls like getData(), format()
+    if (t.isCallExpression(node)) {
+      return true;
+    }
+
+    // Conditional expressions like condition ? "yes" : "no"
+    if (t.isConditionalExpression(node)) {
+      return true;
+    }
+
+    // Identifier references (could be props, state, variables)
+    if (t.isIdentifier(node)) {
+      // Common dynamic identifiers
+      const dynamicNames = [
+        "props",
+        "state",
+        "data",
+        "item",
+        "value",
+        "text",
+        "content",
+      ];
+      if (dynamicNames.some((name) => node.name.includes(name))) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  // Recursively traverse all child nodes
+  function traverseNode(node: any) {
+    if (checkNodeForDynamicContent(node)) {
+      hasDynamicContent = true;
+      return;
+    }
+
+    // Recursively check child nodes
+    Object.keys(node).forEach((key) => {
+      const value = node[key];
+
+      if (Array.isArray(value)) {
+        value.forEach((child) => {
+          if (child && typeof child === "object" && child.type) {
+            traverseNode(child);
+          }
+        });
+      } else if (value && typeof value === "object" && value.type) {
+        traverseNode(value);
+      }
+    });
+  }
+
+  // Check all children of the JSX element
+  jsxElement.children.forEach((child: any) => {
+    if (hasDynamicContent) return; // Early exit if already found dynamic content
+    traverseNode(child);
+  });
+
+  return hasDynamicContent;
+}
+
+export function visualEditPlugin() {
+  return {
+    name: "visual-edit-transform",
+    apply: (config) => config.mode === "development",
+    enforce: "pre",
+    order: "pre",
+    // Inject Tailwind CDN for visual editing capabilities
+    transformIndexHtml(html: any) {
+      // Inject the Tailwind CSS CDN script right before the closing </head> tag
+      const tailwindScript = `    <!-- Tailwind CSS CDN for visual editing -->\n    <script src="https://cdn.tailwindcss.com"></script>\n  `;
+      return html.replace("</head>", tailwindScript + "</head>");
+    },
+    transform(code: any, id: any) {
+      // Skip node_modules and visual-edit-agent itself
+      if (id.includes("node_modules") || id.includes("visual-edit-agent")) {
+        return null;
+      }
+
+      // Process JS/JSX/TS/TSX files
+      if (!id.match(/\.(jsx?|tsx?)$/)) {
+        return null;
+      }
+
+      // Extract filename from path, preserving pages/ or components/ structure
+      const pathParts = id.split("/");
+      let filename;
+
+      // Check if this is a pages or components file
+      if (id.includes("/pages/")) {
+        const pagesIndex = pathParts.findIndex((part: any) => part === "pages");
+        if (pagesIndex >= 0 && pagesIndex < pathParts.length - 1) {
+          // Get all parts from 'pages' to the file, preserving nested structure
+          const relevantParts = pathParts.slice(pagesIndex, pathParts.length);
+          const lastPart = relevantParts[relevantParts.length - 1];
+          // Remove file extension from the last part
+          relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+            ? lastPart.split(".")[0]
+            : lastPart;
+          filename = relevantParts.join("/");
+        } else {
+          filename = pathParts[pathParts.length - 1];
+          if (filename.includes(".")) {
+            filename = filename.split(".")[0];
+          }
+        }
+      } else if (id.includes("/components/")) {
+        const componentsIndex = pathParts.findIndex(
+          (part: any) => part === "components"
+        );
+        if (componentsIndex >= 0 && componentsIndex < pathParts.length - 1) {
+          // Get all parts from 'components' to the file, preserving nested structure
+          const relevantParts = pathParts.slice(
+            componentsIndex,
+            pathParts.length
+          );
+          const lastPart = relevantParts[relevantParts.length - 1];
+          // Remove file extension from the last part
+          relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+            ? lastPart.split(".")[0]
+            : lastPart;
+          filename = relevantParts.join("/");
+        } else {
+          filename = pathParts[pathParts.length - 1];
+          if (filename.includes(".")) {
+            filename = filename.split(".")[0];
+          }
+        }
+      } else {
+        // For other files (like layout), just use the filename
+        filename = pathParts[pathParts.length - 1];
+        if (filename.includes(".")) {
+          filename = filename.split(".")[0];
+        }
+      }
+
+      try {
+        // Parse the code into an AST
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: [
+            "jsx",
+            "typescript",
+            "decorators-legacy",
+            "classProperties",
+            "objectRestSpread",
+            "functionBind",
+            "exportDefaultFrom",
+            "exportNamespaceFrom",
+            "dynamicImport",
+            "nullishCoalescingOperator",
+            "optionalChaining",
+            "asyncGenerators",
+            "bigInt",
+            "optionalCatchBinding",
+            "throwExpressions",
+          ],
+        });
+
+        // Traverse the AST and add source location and dynamic content attributes to JSX elements
+        let elementsProcessed = 0;
+        traverse.default(ast, {
+          JSXElement(path) {
+            const jsxElement = path.node;
+            const openingElement = jsxElement.openingElement;
+
+            // Skip fragments
+            if (t.isJSXFragment(jsxElement)) return;
+
+            // Skip if already has source location attribute
+            const hasSourceLocation = openingElement.attributes.some(
+              (attr) =>
+                t.isJSXAttribute(attr) &&
+                t.isJSXIdentifier(attr.name) &&
+                attr.name.name === "data-source-location"
+            );
+
+            if (hasSourceLocation) return;
+
+            // Get line and column from AST node location
+            const { line, column } = openingElement.loc?.start || {
+              line: 1,
+              column: 0,
+            };
+
+            // Create the source location attribute
+            const sourceLocationAttr = t.jsxAttribute(
+              t.jsxIdentifier("data-source-location"),
+              t.stringLiteral(`${filename}:${line}:${column}`)
+            );
+
+            // Check if element has dynamic content
+            const isDynamic = checkIfElementHasDynamicContent(jsxElement);
+
+            // Create the dynamic content attribute
+            const dynamicContentAttr = t.jsxAttribute(
+              t.jsxIdentifier("data-dynamic-content"),
+              t.stringLiteral(isDynamic ? "true" : "false")
+            );
+
+            // Add both attributes to the beginning of the attributes array
+            openingElement.attributes.unshift(
+              sourceLocationAttr,
+              dynamicContentAttr
+            );
+            elementsProcessed++;
+          },
+        });
+
+        // Generate the code back from the AST
+        const result = generate.default(ast, {
+          compact: false,
+          concise: false,
+          retainLines: true,
+        });
+
+        return {
+          code: result.code,
+          map: null,
+        };
+      } catch (error) {
+        console.error("Failed to add source location to JSX:", error);
+        return {
+          code: code, // Return original code on failure
+          map: null,
+        };
+      }
+    },
+  } as Plugin;
+}