@base44/vite-plugin 0.2.27 → 0.2.29

package/dist/visual-edit-plugin.js

@@ -2,175 +2,27 @@ 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 { StaticArrayProcessor } from "./processors/static-array-processor.js";
+import { JSXProcessor } from "./jsx-processor.js";
 import { JSXUtils } from "./jsx-utils.js";
-// Helper function to check if JSX element contains dynamic content
-export 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 the element's own attributes for dynamic content
-    const attributes = jsxElement.openingElement?.attributes || [];
-    attributes.forEach((attr) => {
-        if (hasDynamicContent)
-            return; // Early exit if already found dynamic content
-        // Spread attributes like {...props} are always dynamic
-        if (t.isJSXSpreadAttribute(attr)) {
-            hasDynamicContent = true;
-            return;
-        }
-        // Check attribute values for dynamic expressions
-        if (t.isJSXAttribute(attr) && attr.value) {
-            traverseNode(attr.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];
-                }
-            }
+            const filename = extractFilename(id);
             try {
-                // Parse the code into an AST
                 const ast = parse(code, {
                     sourceType: "module",
                     plugins: [
@@ -191,41 +43,16 @@ export function visualEditPlugin() {
                         "throwExpressions",
                     ],
                 });
-                // Traverse the AST and add source location and dynamic content attributes to JSX elements
                 JSXUtils.init(t);
-                const staticArrayProcessor = new StaticArrayProcessor(t);
-                let elementsProcessed = 0;
+                const processor = new JSXProcessor(t, filename);
                 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);
-                        staticArrayProcessor.process(path.get("openingElement"));
-                        elementsProcessed++;
+                        processor.processJSXElement(path.get("openingElement"));
                     },
                 });
-                // Generate the code back from the AST
                 const result = generate.default(ast, {
                     compact: false,
                     concise: false,
@@ -239,11 +66,35 @@ export function visualEditPlugin() {
             catch (error) {
                 console.error("Failed to add source location to JSX:", error);
                 return {
-                    code: code, // Return original code on failure
+                    code: code,
                     map: null,
                 };
             }
         },
     };
 }
+function extractFilename(id) {
+    const pathParts = id.split("/");
+    const segmentIndex = findSegmentIndex(pathParts, ["pages", "components"]);
+    if (segmentIndex >= 0 && segmentIndex < pathParts.length - 1) {
+        const relevantParts = pathParts.slice(segmentIndex);
+        const last = relevantParts[relevantParts.length - 1];
+        relevantParts[relevantParts.length - 1] = stripExtension(last ?? "");
+        return relevantParts.join("/");
+    }
+    const lastPart = pathParts[pathParts.length - 1] ?? "";
+    return stripExtension(lastPart);
+}
+function findSegmentIndex(parts, segments) {
+    for (const segment of segments) {
+        const idx = parts.findIndex((part) => part === segment);
+        if (idx >= 0)
+            return idx;
+    }
+    return -1;
+}
+function stripExtension(filename) {
+    const dotIndex = filename.indexOf(".");
+    return dotIndex >= 0 ? filename.substring(0, dotIndex) : filename;
+}
 //# sourceMappingURL=visual-edit-plugin.js.map

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": "0.2.27",
+  "version": "0.2.29",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

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

@@ -4,6 +4,7 @@ import {
   removeFocusOutlineCSS,
   selectText,
   shouldEnterInlineEditingMode,
+  isStaticArrayTextElement,
 } from "./dom-utils.js";
 
 const DEBOUNCE_MS = 500;
@@ -37,37 +38,42 @@ export function createInlineEditController(
     const svgElement = element as unknown as SVGElement;
     const rect = element.getBoundingClientRect();
 
-    window.parent.postMessage(
-      {
-        type: "inline-edit",
-        elementInfo: {
-          tagName: element.tagName,
-          classes:
-            (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-            element.className ||
-            "",
-          visualSelectorId: host.getSelectedElementId(),
-          content: newContent,
-          dataSourceLocation: element.dataset.sourceLocation,
-          isDynamicContent: element.dataset.dynamicContent === "true",
-          linenumber: element.dataset.linenumber,
-          filename: element.dataset.filename,
-          position: {
-            top: rect.top,
-            left: rect.left,
-            right: rect.right,
-            bottom: rect.bottom,
-            width: rect.width,
-            height: rect.height,
-            centerX: rect.left + rect.width / 2,
-            centerY: rect.top + rect.height / 2,
-          },
+    const message: Record<string, unknown> = {
+      type: "inline-edit",
+      elementInfo: {
+        tagName: element.tagName,
+        classes:
+          (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+          element.className ||
+          "",
+        visualSelectorId: host.getSelectedElementId(),
+        content: newContent,
+        dataSourceLocation: element.dataset.sourceLocation,
+        isDynamicContent: element.dataset.dynamicContent === "true",
+        linenumber: element.dataset.linenumber,
+        filename: element.dataset.filename,
+        position: {
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+          centerX: rect.left + rect.width / 2,
+          centerY: rect.top + rect.height / 2,
         },
-        originalContent,
-        newContent,
       },
-      "*"
-    );
+      originalContent,
+      newContent,
+    };
+
+    if (isStaticArrayTextElement(element)) {
+      message.arrIndex = element.dataset.arrIndex;
+      message.arrVariableName = element.dataset.arrVariableName;
+      message.arrField = element.dataset.arrField;
+    }
+
+    window.parent.postMessage(message, "*");
 
     element.dataset.originalTextContent = newContent || "";
   };

package/src/capabilities/inline-edit/dom-utils.ts

@@ -5,6 +5,18 @@ const EDITABLE_TAGS = [
   "span", "li", "td", "a", "button", "label",
 ];
 
+export const isStaticArrayTextElement = (element: HTMLElement): boolean => {
+  return !!element.dataset.arrField;
+};
+
+const passesStructuralChecks = (element: HTMLElement): boolean => {
+  if (!EDITABLE_TAGS.includes(element.tagName.toLowerCase())) return false;
+  if (!element.textContent?.trim()) return false;
+  if (element.querySelector("img, video, canvas, svg")) return false;
+  if (element.children?.length > 0) return false;
+  return true;
+};
+
 export const injectFocusOutlineCSS = () => {
   if (document.getElementById(FOCUS_STYLE_ID)) return;
 
@@ -32,10 +44,8 @@ export const selectText = (element: HTMLElement) => {
 
 export const isEditableTextElement = (element: Element): boolean => {
   if (!(element instanceof HTMLElement)) return false;
-  if (!EDITABLE_TAGS.includes(element.tagName.toLowerCase())) return false;
-  if (!element.textContent?.trim()) return false;
-  if (element.querySelector("img, video, canvas, svg")) return false;
-  if (element.children?.length > 0) return false;
+  if (!passesStructuralChecks(element)) return false;
+  if (isStaticArrayTextElement(element)) return true;
   if (element.dataset.dynamicContent === "true") return false;
   return true;
 };

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

@@ -1,2 +1,2 @@
 export { createInlineEditController } from "./controller.js";
-export type { InlineEditController, InlineEditHost } from "./types.js";
+export type { CollectionInfo, InlineEditController, InlineEditHost } from "./types.js";

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

@@ -1,3 +1,8 @@
+export interface CollectionInfo {
+  id: string;
+  references: string[];
+}
+
 export interface InlineEditHost {
   findElementsById(id: string | null): Element[];
   getSelectedElementId(): string | null;

package/src/consts.ts

@@ -0,0 +1,11 @@
+export const DATA_COLLECTION_ID = "data-collection-id";
+export const DATA_COLLECTION_ITEM_ID = "data-collection-item-id";
+export const DATA_COLLECTION_ITEM_FIELD = "data-collection-item-field";
+export const DATA_COLLECTION_REFERENCE = "data-collection-reference";
+export const DATA_ARR_INDEX = "data-arr-index";
+export const DATA_ARR_VARIABLE_NAME = "data-arr-variable-name";
+export const DATA_ARR_FIELD = "data-arr-field";
+
+export const ALLOWED_CUSTOM_COMPONENTS = ["Image", "Link"];
+export const MAX_JSX_DEPTH = 10;
+export const EXCLUDED_FIELDS = ["children", "length"];

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

@@ -127,6 +127,13 @@ export function setupVisualEditAgent() {
     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;
+    const staticArrayName = arrEl?.dataset?.arrVariableName || null;
+    const rawIdx = arrEl?.dataset?.arrIndex;
+    const staticArrayIndex = rawIdx != null ? parseInt(rawIdx, 10) : null;
+    const staticArrayField = htmlElement.dataset?.arrField || null;
+
     window.parent.postMessage({
       type: "element-selected",
       tagName: element.tagName,
@@ -152,6 +159,9 @@ export function setupVisualEditAgent() {
       },
       attributes: collectAllowedAttributes(element, ALLOWED_ATTRIBUTES),
       isTextElement,
+      staticArrayName,
+      staticArrayIndex,
+      staticArrayField,
     }, "*");
   };
 
@@ -378,14 +388,19 @@ export function setupVisualEditAgent() {
     }, REPOSITION_DELAY_MS);
   };
 
-  // Update element content by visual selector ID
-  const updateElementContent = (visualSelectorId: string, content: string) => {
-    const elements = findElementsById(visualSelectorId);
+  const updateElementContent = (visualSelectorId: string, content: string, arrIndex?: number) => {
+    let elements = findElementsById(visualSelectorId);
 
     if (elements.length === 0) {
       return;
     }
 
+    if (arrIndex != null) {
+      elements = elements.filter(
+        (el) => (el as HTMLElement).dataset.arrIndex === String(arrIndex)
+      );
+    }
+
     elements.forEach((element) => {
       (element as HTMLElement).innerText = content;
     });
@@ -537,7 +552,8 @@ export function setupVisualEditAgent() {
         if (message.data && message.data.content !== undefined) {
           updateElementContent(
             message.data.visualSelectorId,
-            message.data.content
+            message.data.content,
+            message.data.arrIndex
           );
         } else {
           console.warn(
@@ -604,6 +620,19 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "update-theme-variables":
+        if (message.data?.variables) {
+          const target = message.data.mode === 'dark'
+            ? document.querySelector('.dark') as HTMLElement
+            : document.documentElement;
+          if (target) {
+            for (const [name, value] of Object.entries(message.data.variables)) {
+              target.style.setProperty(name, value as string);
+            }
+          }
+        }
+        break;
+
       case "toggle-inline-edit-mode":
         if (message.data) {
           inlineEdit.handleToggleMessage(message.data);

package/src/jsx-processor.ts

@@ -1,14 +1,23 @@
 import type { NodePath } from "@babel/traverse";
 import type * as t from "@babel/types";
+import { CollectionIdProcessor } from "./processors/collection-id-processor.js";
+import { DataItemIdProcessor } from "./processors/collection-item-id-processor.js";
+import { DataItemFieldProcessor } from "./processors/collection-item-field-processor.js";
 import { StaticArrayProcessor } from "./processors/static-array-processor.js";
 
 export class JSXProcessor {
+  private collectionIdProcessor: CollectionIdProcessor;
+  private dataItemIdProcessor: DataItemIdProcessor;
+  private dataItemFieldProcessor: DataItemFieldProcessor;
   private staticArrayProcessor: StaticArrayProcessor;
 
   constructor(
     private types: typeof t,
     private filename: string
   ) {
+    this.collectionIdProcessor = new CollectionIdProcessor(types);
+    this.dataItemIdProcessor = new DataItemIdProcessor(types);
+    this.dataItemFieldProcessor = new DataItemFieldProcessor(types);
     this.staticArrayProcessor = new StaticArrayProcessor(types);
   }
 
@@ -17,7 +26,10 @@ export class JSXProcessor {
 
     this.addSourceLocationAttribute(path);
     this.addDynamicContentAttribute(path);
-    this.addContentEditableAttribute(path);
+
+    this.collectionIdProcessor.process(path);
+    this.dataItemIdProcessor.process(path);
+    this.dataItemFieldProcessor.process(path);
     this.staticArrayProcessor.process(path);
   }
 
@@ -27,7 +39,7 @@ export class JSXProcessor {
     const { line, column } = path.node.loc?.start || { line: 1, column: 0 };
     const value = `${this.filename}:${line}:${column}`;
 
-    path.node.attributes.push(
+    path.node.attributes.unshift(
       this.types.jsxAttribute(
         this.types.jsxIdentifier("data-source-location"),
         this.types.stringLiteral(value)
@@ -45,21 +57,19 @@ export class JSXProcessor {
       parentElement.node as t.JSXElement
     );
 
-    path.node.attributes.push(
-      this.types.jsxAttribute(
-        this.types.jsxIdentifier("data-dynamic-content"),
-        this.types.stringLiteral(isDynamic ? "true" : "false")
-      )
+    const sourceLocIdx = path.node.attributes.findIndex(
+      (attr) =>
+        this.types.isJSXAttribute(attr) &&
+        this.types.isJSXIdentifier(attr.name) &&
+        attr.name.name === "data-source-location"
     );
-  }
 
-  private addContentEditableAttribute(
-    path: NodePath<t.JSXOpeningElement>
-  ): void {
-    path.node.attributes.push(
+    path.node.attributes.splice(
+      sourceLocIdx + 1,
+      0,
       this.types.jsxAttribute(
-        this.types.jsxIdentifier("content-editable"),
-        this.types.stringLiteral("true")
+        this.types.jsxIdentifier("data-dynamic-content"),
+        this.types.stringLiteral(isDynamic ? "true" : "false")
       )
     );
   }
@@ -137,6 +147,18 @@ export class JSXProcessor {
       }
     };
 
+    const attributes = jsxElement.openingElement?.attributes || [];
+    for (const attr of attributes) {
+      if (hasDynamicContent) break;
+      if (this.types.isJSXSpreadAttribute(attr)) {
+        hasDynamicContent = true;
+        break;
+      }
+      if (this.types.isJSXAttribute(attr) && attr.value) {
+        traverseNode(attr.value as unknown as Record<string, unknown>);
+      }
+    }
+
     for (const child of jsxElement.children) {
       if (hasDynamicContent) break;
       traverseNode(child as unknown as Record<string, unknown>);