@base44-preview/vite-plugin 0.1.0 → 0.1.1-dev.c4331fa

package/src/index.ts

@@ -1,82 +1,139 @@
-import type { Plugin } from "vite";
+import type { Plugin, UserConfig } from "vite";
 import { loadEnv } from "vite";
+import { errorOverlayPlugin } from "./error-overlay-plugin.js";
+import { visualEditPlugin } from "./visual-edit-plugin.js";
 
-export default function vitePlugin() {
-  return {
-    name: "base44",
-    config: ({ mode }) => {
-      const env = loadEnv(mode ?? "development", process.cwd(), "");
+const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
 
-      return {
-        resolve: {
-          alias: {
-            "@/": "/src/",
-          },
-        },
-        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,
+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/",
+            },
           },
-        },
-        optimizeDeps: {
-          esbuildOptions: {
-            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_SERVER_URL
-              ),
+          ...(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
+                      ),
+                    },
+                  }
+                : {}),
             },
           },
-        },
-      };
-    },
-    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();
-      });
-    },
-    resolveId(source, importer, options) {
-      if (source.includes("/entities")) {
-        return this.resolve(
-          "@base44/vite-plugin/compat/entities.cjs",
-          importer,
-          options
-        );
-      }
+        };
+      },
+      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("/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("/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;
+        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;
+}

package/.github/workflows/claude-code-review.yml

@@ -1,78 +0,0 @@
-name: Claude Code Review
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-    # Optional: Only run on specific file changes
-    # paths:
-    #   - "src/**/*.ts"
-    #   - "src/**/*.tsx"
-    #   - "src/**/*.js"
-    #   - "src/**/*.jsx"
-
-jobs:
-  claude-review:
-    if: |
-      github.actor != 'github-actions[bot]' && 
-      github.actor != 'claude-code[bot]' &&
-      github.actor != 'claude[bot]' &&
-      github.actor != 'claude' &&
-      github.event.pull_request.head.commit.parents[1] == null
-
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: read
-      issues: read
-      id-token: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: Run Claude Code Review
-        id: claude-review
-        uses: anthropics/claude-code-action@beta
-        with:
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-
-          # Optional: Specify model (defaults to Claude Sonnet 4, uncomment for Claude Opus 4)
-          model: "claude-opus-4-20250514"
-
-          # Direct prompt for automated review (no @claude mention needed)
-          direct_prompt: |
-            Please review this pull request and provide feedback on:
-            - Code quality and best practices
-            - Potential bugs or issues
-            - Performance considerations
-            - Security concerns
-            - Test coverage
-
-            Be constructive and helpful in your feedback.
-
-          # Optional: Use sticky comments to make Claude reuse the same comment on subsequent pushes to the same PR
-          # use_sticky_comment: true
-
-          # Optional: Customize review based on file types
-          # direct_prompt: |
-          #   Review this PR focusing on:
-          #   - For TypeScript files: Type safety and proper interface usage
-          #   - For API endpoints: Security, input validation, and error handling
-          #   - For React components: Performance, accessibility, and best practices
-          #   - For tests: Coverage, edge cases, and test quality
-
-          # Optional: Different prompts for different authors
-          # direct_prompt: |
-          #   ${{ github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR' &&
-          #   'Welcome! Please review this PR from a first-time contributor. Be encouraging and provide detailed explanations for any suggestions.' ||
-          #   'Please provide a thorough code review focusing on our coding standards and best practices.' }}
-
-          # Optional: Add specific tools for running tests or linting
-          # allowed_tools: "Bash(npm run test),Bash(npm run lint),Bash(npm run typecheck)"
-
-          # Optional: Skip review for certain conditions
-          # if: |
-          #   !contains(github.event.pull_request.title, '[skip-review]') &&
-          #   !contains(github.event.pull_request.title, '[WIP]')

package/.github/workflows/claude.yml

@@ -1,63 +0,0 @@
-name: Claude Code
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_review_comment:
-    types: [created]
-  issues:
-    types: [opened, assigned]
-  pull_request_review:
-    types: [submitted]
-
-jobs:
-  claude:
-    if: |
-      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: read
-      issues: read
-      id-token: write
-      actions: read # Required for Claude to read CI results on PRs
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: Run Claude Code
-        id: claude
-        uses: anthropics/claude-code-action@beta
-        with:
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-
-          # This is an optional setting that allows Claude to read CI results on PRs
-          additional_permissions: |
-            actions: read
-
-          # Optional: Specify model (defaults to Claude Sonnet 4, uncomment for Claude Opus 4)
-          model: "claude-opus-4-20250514"
-
-          # Optional: Customize the trigger phrase (default: @claude)
-          # trigger_phrase: "/claude"
-
-          # Optional: Trigger when specific user is assigned to an issue
-          # assignee_trigger: "claude-bot"
-
-          # Optional: Allow Claude to run specific commands
-          allowed_tools: "Bash(npm install),Bash(npm run build),Bash(npm run test:*),Bash(npm run lint:*)"
-
-          # Optional: Add custom instructions for Claude to customize its behavior for your project
-          # custom_instructions: |
-          #   Follow our coding standards
-          #   Ensure all new code has tests
-          #   Use TypeScript for new files
-
-          # Optional: Custom environment variables for Claude
-          # claude_env: |
-          #   NODE_ENV: test