@base44-preview/vite-plugin 0.2.26-pr.42.7e00d38 → 0.2.26-pr.43.554d4c7

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

@@ -11,15 +11,6 @@ export function setupVisualEditAgent() {
   let selectedOverlays: HTMLDivElement[] = [];
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
-  let currentEditingElement: HTMLElement | null = null;
-  let debouncedSendTimeout: ReturnType<typeof setTimeout> | null = null;
-  let isInlineEditExperimentEnabled = false;
-
-  const INLINE_EDIT_DEBOUNCE_MS = 500;
-  const REPOSITION_DELAY_MS = 50;
-
-  // WeakMap to track AbortControllers for each element's input listener
-  const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
 
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
@@ -78,258 +69,6 @@ export function setupVisualEditAgent() {
     }
   };
 
-  // --- Inline editing utilities ---
-
-  const injectFocusOutlineCSS = () => {
-    const existingStyle = document.getElementById("visual-edit-focus-styles");
-    if (existingStyle) return;
-
-    const style = document.createElement("style");
-    style.id = "visual-edit-focus-styles";
-    style.textContent = `
-      [data-selected="true"][contenteditable="true"]:focus {
-        outline: none !important;
-      }
-    `;
-    document.head.appendChild(style);
-  };
-
-  const removeFocusOutlineCSS = () => {
-    const style = document.getElementById("visual-edit-focus-styles");
-    if (style) {
-      style.remove();
-    }
-  };
-
-  const selectText = (element: HTMLElement) => {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-  };
-
-  const isEditableTextElement = (element: Element): boolean => {
-    if (!(element instanceof HTMLElement)) {
-      return false;
-    }
-
-    const allowedTags = [
-      "div", "p", "h1", "h2", "h3", "h4", "h5", "h6",
-      "span", "li", "td", "a", "button", "label",
-    ];
-    if (!allowedTags.includes(element.tagName.toLowerCase())) {
-      return false;
-    }
-
-    const textContent = element.textContent?.trim() || "";
-    if (textContent.length === 0) {
-      return false;
-    }
-
-    if (element.querySelector("img, video, canvas, svg") !== null) {
-      return false;
-    }
-
-    if (element.children.length > 0) {
-      return false;
-    }
-
-    if (element.dataset.dynamicContent === "true") {
-      return false;
-    }
-
-    return true;
-  };
-
-  const shouldEnterInlineEditingMode = (element: Element): boolean => {
-    if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
-      return false;
-    }
-    return isEditableTextElement(element);
-  };
-
-  const handleInputEvent = function (this: HTMLElement) {
-    onTextInputChange(this);
-  };
-
-  const enterInlineEditingMode = (element: HTMLElement) => {
-    injectFocusOutlineCSS();
-
-    element.dataset.originalTextContent = element.textContent || "";
-    element.dataset.originalCursor = element.style.cursor;
-
-    element.contentEditable = "true";
-
-    const abortController = new AbortController();
-    listenerAbortControllers.set(element, abortController);
-    element.addEventListener("input", handleInputEvent, { signal: abortController.signal });
-
-    element.style.cursor = "text";
-    selectText(element);
-
-    setTimeout(() => {
-      element.focus();
-    }, 0);
-  };
-
-  const clearInlineEditingMode = (element: HTMLElement) => {
-    const abortController = listenerAbortControllers.get(element);
-    if (abortController) {
-      abortController.abort();
-      listenerAbortControllers.delete(element);
-    }
-
-    if (!element.isConnected) {
-      return;
-    }
-
-    removeFocusOutlineCSS();
-    element.contentEditable = "false";
-    delete element.dataset.originalTextContent;
-
-    if (element.dataset.originalCursor !== undefined) {
-      element.style.cursor = element.dataset.originalCursor;
-      delete element.dataset.originalCursor;
-    }
-  };
-
-  const repositionSelectedOverlays = () => {
-    if (selectedElementId) {
-      const elements = findElementsById(selectedElementId);
-      selectedOverlays.forEach((overlay, index) => {
-        if (index < elements.length) {
-          positionOverlay(overlay, elements[index]!);
-        }
-      });
-    }
-  };
-
-  const handleEnterInlineEditingMode = (element: HTMLElement) => {
-    currentEditingElement = element;
-
-    selectedOverlays.forEach((overlay) => {
-      overlay.style.display = "none";
-    });
-
-    enterInlineEditingMode(element);
-
-    window.parent.postMessage(
-      {
-        type: "content-editing-started",
-        visualSelectorId: selectedElementId,
-      },
-      "*"
-    );
-  };
-
-  const handleClearInlineEditingMode = () => {
-    if (!currentEditingElement) return;
-
-    if (debouncedSendTimeout) {
-      clearTimeout(debouncedSendTimeout);
-      debouncedSendTimeout = null;
-    }
-
-    const element = currentEditingElement;
-    clearInlineEditingMode(element);
-
-    selectedOverlays.forEach((overlay) => {
-      overlay.style.display = "";
-    });
-
-    repositionSelectedOverlays();
-
-    window.parent.postMessage(
-      {
-        type: "content-editing-ended",
-        visualSelectorId: selectedElementId,
-      },
-      "*"
-    );
-
-    currentEditingElement = null;
-  };
-
-  const reportInlineEdit = (element: HTMLElement) => {
-    const originalContent = element.dataset.originalTextContent;
-    const newContent = element.textContent;
-
-    const svgElement = element as unknown as SVGElement;
-    const elementInfo = {
-      tagName: element.tagName,
-      classes:
-        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-        element.className ||
-        "",
-      visualSelectorId: selectedElementId,
-      content: newContent,
-      dataSourceLocation: element.dataset.sourceLocation,
-      isDynamicContent: element.dataset.dynamicContent === "true",
-      linenumber: element.dataset.linenumber,
-      filename: element.dataset.filename,
-      position: (() => {
-        const rect = element.getBoundingClientRect();
-        return {
-          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,
-        };
-      })(),
-    };
-
-    window.parent.postMessage(
-      {
-        type: "inline-edit",
-        elementInfo,
-        originalContent,
-        newContent,
-      },
-      "*"
-    );
-
-    element.dataset.originalTextContent = newContent || "";
-  };
-
-  const debouncedSendInlineEditMessage = (element: HTMLElement) => {
-    if (debouncedSendTimeout) {
-      clearTimeout(debouncedSendTimeout);
-    }
-
-    debouncedSendTimeout = setTimeout(() => {
-      reportInlineEdit(element);
-    }, INLINE_EDIT_DEBOUNCE_MS);
-  };
-
-  const onTextInputChange = (element: HTMLElement) => {
-    repositionSelectedOverlays();
-    debouncedSendInlineEditMessage(element);
-  };
-
-  const clearSelection = () => {
-    if (selectedElementId) {
-      const elements = findElementsById(selectedElementId);
-      elements.forEach((el) => {
-        if (el instanceof HTMLElement) {
-          delete el.dataset.selected;
-        }
-      });
-    }
-
-    selectedOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    selectedOverlays = [];
-    selectedElementId = null;
-  };
-
   // Clear hover overlays
   const clearHoverOverlays = () => {
     hoverOverlays.forEach((overlay) => {
@@ -415,9 +154,6 @@ export function setupVisualEditAgent() {
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
 
-    // Skip hover effects when inline editing
-    if (currentEditingElement) return;
-
     const target = e.target as Element;
 
     // Prevent hover effects when a dropdown is open
@@ -485,20 +221,6 @@ export function setupVisualEditAgent() {
     // Let layer dropdown clicks pass through without interference
     if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;
 
-    // Allow normal editing when clicking inside a contentEditable element
-    if (isInlineEditExperimentEnabled && target instanceof HTMLElement && target.contentEditable === "true") {
-      return;
-    }
-
-    // If currently editing, clicking outside should exit editing mode
-    if (currentEditingElement) {
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      handleClearInlineEditingMode();
-      return;
-    }
-
     // Close dropdowns when clicking anywhere in iframe if a dropdown is open
     if (isDropdownOpen) {
       e.preventDefault();
@@ -527,45 +249,14 @@ export function setupVisualEditAgent() {
       return;
     }
 
-    const htmlElement = element as HTMLElement;
-    const visualSelectorId = getElementSelectorId(element);
-
-    // Check if this element is already selected (second click scenario)
-    const isAlreadySelected =
-      selectedElementId === visualSelectorId &&
-      htmlElement.dataset.selected === "true";
-
-    if (isAlreadySelected) {
-      if (isInlineEditExperimentEnabled && shouldEnterInlineEditingMode(htmlElement)) {
-        handleEnterInlineEditingMode(htmlElement);
-        return;
-      }
-    }
-
-    // Select the element, mark for inline editing, and attach layer dropdown
-    if (currentEditingElement) {
-      handleClearInlineEditingMode();
-    }
-
-    if (isInlineEditExperimentEnabled) {
-      const elements = findElementsById(visualSelectorId);
-      elements.forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.selected = "true";
-        }
-      });
-    }
-
     const selectedOverlay = selectElement(element);
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Unselect the current element
-  const unselectElement = () => {
-    if (currentEditingElement) {
-      handleClearInlineEditingMode();
-    }
-    clearSelection();
+  // Clear the current selection
+  const clearSelection = () => {
+    clearSelectedOverlays();
+    selectedElementId = null;
   };
 
   const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {
@@ -597,7 +288,7 @@ export function setupVisualEditAgent() {
           });
         }
       }
-    }, REPOSITION_DELAY_MS);
+    }, 50);
   };
 
   // Update element attribute by visual selector ID
@@ -620,7 +311,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, REPOSITION_DELAY_MS);
+    }, 50);
   };
 
   // Update element content by visual selector ID
@@ -643,7 +334,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, REPOSITION_DELAY_MS);
+    }, 50);
   };
 
   // --- Layer dropdown controller ---
@@ -665,15 +356,12 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
-      if (currentEditingElement) {
-        handleClearInlineEditingMode();
-      }
-      clearSelection();
       layerController.cleanup();
       clearHoverOverlays();
       clearSelectedOverlays();
 
       currentHighlightedElements = [];
+      selectedElementId = null;
       document.body.style.cursor = "default";
 
       document.removeEventListener("mouseover", handleMouseOver);
@@ -734,9 +422,6 @@ export function setupVisualEditAgent() {
     switch (message.type) {
       case "toggle-visual-edit-mode":
         toggleVisualEditMode(message.data.enabled);
-        if (message.data.specs?.newInlineEditEnabled !== undefined) {
-          isInlineEditExperimentEnabled = message.data.specs.newInlineEditEnabled;
-        }
         break;
 
       case "update-classes":
@@ -774,7 +459,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        unselectElement();
+        clearSelection();
         break;
 
       case "refresh-page":
@@ -852,50 +537,6 @@ export function setupVisualEditAgent() {
         }
         break;
 
-      case "toggle-inline-edit-mode":
-        if (!isInlineEditExperimentEnabled) break;
-        if (!message.data || !message.data.dataSourceLocation) break;
-
-        {
-          const elements = findElementsById(message.data.dataSourceLocation);
-          if (elements.length === 0 || !(elements[0] instanceof HTMLElement)) break;
-
-          const element = elements[0];
-
-          if (message.data.inlineEditingMode) {
-            if (shouldEnterInlineEditingMode(element)) {
-              // Select the element first if not already selected
-              if (selectedElementId !== message.data.dataSourceLocation) {
-                if (currentEditingElement) {
-                  handleClearInlineEditingMode();
-                }
-                clearSelection();
-
-                elements.forEach((el) => {
-                  if (el instanceof HTMLElement) {
-                    el.dataset.selected = "true";
-                  }
-                });
-
-                elements.forEach((el) => {
-                  const overlay = createOverlay(true);
-                  document.body.appendChild(overlay);
-                  selectedOverlays.push(overlay);
-                  positionOverlay(overlay, el, true);
-                });
-
-                selectedElementId = message.data.dataSourceLocation;
-              }
-              handleEnterInlineEditingMode(element);
-            }
-          } else {
-            if (currentEditingElement === element) {
-              handleClearInlineEditingMode();
-            }
-          }
-        }
-        break;
-
       default:
         break;
     }
@@ -960,7 +601,7 @@ export function setupVisualEditAgent() {
     });
 
     if (needsUpdate) {
-      setTimeout(handleResize, REPOSITION_DELAY_MS);
+      setTimeout(handleResize, 50);
     }
   });
 

package/src/jsx-processor.ts

@@ -1,14 +1,26 @@
 import type { NodePath } from "@babel/traverse";
 import type * as t from "@babel/types";
+import { CollectionIdProcessor } from "./processors/collection-id-processor.js";
+import { ReferenceFieldProcessor } from "./processors/collection-reference-field-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 referenceFieldProcessor: ReferenceFieldProcessor;
+  private dataItemIdProcessor: DataItemIdProcessor;
+  private dataItemFieldProcessor: DataItemFieldProcessor;
   private staticArrayProcessor: StaticArrayProcessor;
 
   constructor(
     private types: typeof t,
     private filename: string
   ) {
+    this.collectionIdProcessor = new CollectionIdProcessor(types);
+    this.referenceFieldProcessor = new ReferenceFieldProcessor(types);
+    this.dataItemIdProcessor = new DataItemIdProcessor(types);
+    this.dataItemFieldProcessor = new DataItemFieldProcessor(types);
     this.staticArrayProcessor = new StaticArrayProcessor(types);
   }
 
@@ -17,8 +29,13 @@ export class JSXProcessor {
 
     this.addSourceLocationAttribute(path);
     this.addDynamicContentAttribute(path);
-    this.addContentEditableAttribute(path);
+
+    this.collectionIdProcessor.process(path);
+    this.referenceFieldProcessor.process(path);
+    this.dataItemIdProcessor.process(path);
+    this.dataItemFieldProcessor.process(path);
     this.staticArrayProcessor.process(path);
+
   }
 
   private addSourceLocationAttribute(
@@ -27,7 +44,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 +62,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 +152,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>);

package/src/jsx-utils.ts

@@ -1,4 +1,5 @@
 import type * as t from "@babel/types";
+import { ALLOWED_CUSTOM_COMPONENTS } from "./consts.js";
 
 export class JSXUtils {
   private static types: typeof t;
@@ -12,4 +13,119 @@ export class JSXUtils {
       ? `${attr.name.namespace.name}:${attr.name.name.name}`
       : attr.name.name;
   }
+
+  static getElementName(node: t.JSXOpeningElement): string | null {
+    const name = node.name;
+
+    if (this.types.isJSXIdentifier(name)) {
+      return name.name;
+    }
+
+    if (this.types.isJSXNamespacedName(name)) {
+      return `${name.namespace.name}:${name.name.name}`;
+    }
+
+    if (this.types.isJSXMemberExpression(name)) {
+      return this.collectJSXMemberName(name);
+    }
+
+    return null;
+  }
+
+  private static collectJSXMemberName(
+    node: t.JSXMemberExpression
+  ): string {
+    const parts: string[] = [node.property.name];
+    let current: t.JSXMemberExpression["object"] = node.object;
+
+    while (this.types.isJSXMemberExpression(current)) {
+      parts.unshift(current.property.name);
+      current = current.object;
+    }
+
+    if (this.types.isJSXIdentifier(current)) {
+      parts.unshift(current.name);
+    }
+
+    return parts.join(".");
+  }
+
+  static isCustomComponent(name: string): boolean {
+    return name.length > 0 && name.charAt(0) === name.charAt(0).toUpperCase();
+  }
+
+  static isAllowedCustomComponent(name: string): boolean {
+    return ALLOWED_CUSTOM_COMPONENTS.includes(name);
+  }
+
+  static isDOMElement(name: string): boolean {
+    return name.length > 0 && name.charAt(0) === name.charAt(0).toLowerCase();
+  }
+
+  static isDOMOrAllowed(name: string): boolean {
+    return this.isDOMElement(name) || this.isAllowedCustomComponent(name);
+  }
+
+  static producesJSX(node: t.Expression | t.Node): boolean {
+    const types = this.types;
+
+    if (types.isJSXElement(node) || types.isJSXFragment(node)) return true;
+
+    if (types.isConditionalExpression(node)) {
+      return (
+        this.producesJSX(node.consequent) || this.producesJSX(node.alternate)
+      );
+    }
+
+    if (types.isLogicalExpression(node)) {
+      return this.producesJSX(node.left) || this.producesJSX(node.right);
+    }
+
+    if (types.isCallExpression(node)) {
+      if (types.isMemberExpression(node.callee)) {
+        const prop = node.callee.property;
+        if (
+          types.isIdentifier(prop) &&
+          (prop.name === "map" || prop.name === "flatMap")
+        ) {
+          const callback = node.arguments[0];
+          if (callback) return this.callbackProducesJSX(callback);
+        }
+      }
+    }
+
+    if (types.isParenthesizedExpression(node)) {
+      return this.producesJSX(node.expression);
+    }
+
+    return false;
+  }
+
+  private static callbackProducesJSX(
+    callback: t.Expression | t.SpreadElement | t.ArgumentPlaceholder
+  ): boolean {
+    const types = this.types;
+
+    if (types.isArrowFunctionExpression(callback)) {
+      if (types.isBlockStatement(callback.body)) {
+        return this.doesBlockReturnJSX(callback.body);
+      }
+      return this.producesJSX(callback.body);
+    }
+
+    if (types.isFunctionExpression(callback)) {
+      return this.doesBlockReturnJSX(callback.body);
+    }
+
+    return false;
+  }
+
+  static doesBlockReturnJSX(block: t.BlockStatement): boolean {
+    for (const stmt of block.body) {
+      if (this.types.isReturnStatement(stmt) && stmt.argument) {
+        if (this.producesJSX(stmt.argument)) return true;
+      }
+    }
+    return false;
+  }
 }