@base44/vite-plugin 0.2.28 → 0.2.30

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

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
@@ -191,53 +191,19 @@ export function setupVisualEditAgent() {
     window.parent.postMessage({ type: "unselect-element" }, "*");
   };
 
-  // Handle mouse over event
-  const handleMouseOver = (e: MouseEvent) => {
-    if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing()) return;
-
-
-    const target = e.target as Element;
-
-    // Prevent hover effects when a dropdown is open
-    if (isDropdownOpen) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Prevent hover effects on SVG path elements
-    if (target.tagName.toLowerCase() === "path") {
-      clearHoverOverlays();
-      return;
-    }
+  // Hover detection via mousemove + elementFromPoint (since app elements have pointer-events: none)
+  let lastHoveredSelectorId: string | null = null;
+  let pendingMouseMoveRaf: number | null = null;
 
-    // Support both data-source-location and data-visual-selector-id
-    const element = target.closest(
-      "[data-source-location], [data-visual-selector-id]"
-    );
-    if (!element) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Prefer data-source-location, fallback to data-visual-selector-id
-    const htmlElement = element as HTMLElement;
-    const selectorId =
-      htmlElement.dataset.sourceLocation ||
-      htmlElement.dataset.visualSelectorId;
-
-    // Skip if this element is already selected
-    if (selectedElementId === selectorId) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Find all elements with the same ID
-    const elements = findElementsById(selectorId || null);
+  const clearHoverState = () => {
+    clearHoverOverlays();
+    lastHoveredSelectorId = null;
+  };
 
-    // Clear previous hover overlays
+  const applyHoverOverlays = (selectorId: string) => {
+    const elements = findElementsById(selectorId);
     clearHoverOverlays();
 
-    // Create overlays for all matching elements
     elements.forEach((el) => {
       const overlay = createOverlay(false);
       document.body.appendChild(overlay);
@@ -246,12 +212,33 @@ export function setupVisualEditAgent() {
     });
 
     currentHighlightedElements = elements;
+    lastHoveredSelectorId = selectorId;
   };
 
-  // Handle mouse out event
-  const handleMouseOut = () => {
-    if (isPopoverDragging) return;
-    clearHoverOverlays();
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing()) return;
+
+    if (pendingMouseMoveRaf !== null) return;
+    pendingMouseMoveRaf = requestAnimationFrame(() => {
+      pendingMouseMoveRaf = null;
+
+      if (isDropdownOpen) { clearHoverState(); return; }
+
+      const selectorId = resolveHoverTarget(e.clientX, e.clientY, selectedElementId);
+      if (!selectorId) { clearHoverState(); return; }
+      if (lastHoveredSelectorId === selectorId) return;
+
+      applyHoverOverlays(selectorId);
+    });
+  };
+
+  // Clear hover overlays when mouse leaves the viewport
+  const handleMouseLeave = () => {
+    if (pendingMouseMoveRaf !== null) {
+      cancelAnimationFrame(pendingMouseMoveRaf);
+      pendingMouseMoveRaf = null;
+    }
+    clearHoverState();
   };
 
   // Handle element click
@@ -288,20 +275,12 @@ export function setupVisualEditAgent() {
       return;
     }
 
-    // Prevent clicking on SVG path elements
-    if (target.tagName.toLowerCase() === "path") {
-      return;
-    }
-
     // Prevent default behavior immediately when in visual edit mode
     e.preventDefault();
     e.stopPropagation();
     e.stopImmediatePropagation();
 
-    // Support both data-source-location and data-visual-selector-id
-    const element = target.closest(
-      "[data-source-location], [data-visual-selector-id]"
-    );
+    const element = findInstrumentedElement(e.clientX, e.clientY);
     if (!element) {
       return;
     }
@@ -435,21 +414,21 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      resumeAnimations();
       inlineEdit.stopEditing();
       clearSelection();
       layerController.cleanup();
-      clearHoverOverlays();
-
-      currentHighlightedElements = [];
+      handleMouseLeave();
       document.body.style.cursor = "default";
 
-      document.removeEventListener("mouseover", handleMouseOver);
-      document.removeEventListener("mouseout", handleMouseOut);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
       document.removeEventListener("click", handleElementClick, true);
     } else {
       document.body.style.cursor = "crosshair";
-      document.addEventListener("mouseover", handleMouseOver);
-      document.addEventListener("mouseout", handleMouseOut);
+      stopAnimations();
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseleave", handleMouseLeave);
       document.addEventListener("click", handleElementClick, true);
     }
   };
@@ -620,6 +599,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>);

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;
+  }
 }

package/src/processors/collection-id-processor.ts

@@ -0,0 +1,261 @@
+import type { NodePath } from "@babel/traverse";
+import type * as t from "@babel/types";
+import type { CollectionInfo } from "../capabilities/inline-edit/types.js";
+import {
+  DATA_COLLECTION_ID,
+  DATA_COLLECTION_REFERENCE,
+  MAX_JSX_DEPTH,
+} from "../consts.js";
+import { JSXUtils } from "../jsx-utils.js";
+import {
+  JSXAttributeUtils,
+  PathNavigationUtils,
+  ExpressionAnalysisUtils,
+} from "./utils/shared-utils.js";
+import { CollectionTracingUtils } from "./utils/collection-tracing-utils.js";
+
+export class CollectionIdProcessor {
+  private attributeUtils: JSXAttributeUtils;
+  private pathUtils: PathNavigationUtils;
+  private expressionUtils: ExpressionAnalysisUtils;
+  private tracingUtils: CollectionTracingUtils;
+
+  constructor(private types: typeof t) {
+    this.attributeUtils = new JSXAttributeUtils(types);
+    this.pathUtils = new PathNavigationUtils(types);
+    this.expressionUtils = new ExpressionAnalysisUtils(types);
+    this.tracingUtils = new CollectionTracingUtils(types);
+  }
+
+  process(path: NodePath<t.JSXOpeningElement>): void {
+    if (this.attributeUtils.hasAttribute(path, DATA_COLLECTION_ID)) return;
+
+    const info =
+      this.tryDirectMapInChildren(path) ??
+      this.tryGetByIdInChildren(path) ??
+      this.tryComponentRootWithCollectionProp(path);
+
+    if (!info) return;
+
+    const target = this.pathUtils.findDOMElementTarget(path) ?? path;
+
+    this.attributeUtils.addStringAttribute(target, DATA_COLLECTION_ID, info.id);
+
+    if (info.references.length > 0) {
+      this.attributeUtils.addStringAttribute(
+        target,
+        DATA_COLLECTION_REFERENCE,
+        info.references.join(",")
+      );
+    }
+  }
+
+  private tryDirectMapInChildren(
+    path: NodePath<t.JSXOpeningElement>
+  ): CollectionInfo | null {
+    const jsxElement = path.parentPath;
+    if (!jsxElement?.isJSXElement()) return null;
+
+    const children = jsxElement.get("children");
+    for (const child of children) {
+      if (!child.isJSXExpressionContainer()) continue;
+
+      const expression = child.get("expression");
+      if (expression.isJSXEmptyExpression()) continue;
+
+      const mapSource = this.extractMapSource(
+        expression as NodePath<t.Expression>
+      );
+      if (mapSource) return mapSource;
+    }
+
+    return null;
+  }
+
+  private extractMapSource(
+    expr: NodePath<t.Expression>
+  ): CollectionInfo | null {
+    if (expr.isCallExpression()) {
+      return this.traceMapCall(expr);
+    }
+
+    if (expr.isLogicalExpression()) {
+      if (expr.node.operator === "&&") {
+        const right = expr.get("right") as NodePath<t.Expression>;
+        return this.extractMapSource(right);
+      }
+    }
+
+    if (expr.isConditionalExpression()) {
+      const consequent = expr.get("consequent") as NodePath<t.Expression>;
+      const alternate = expr.get("alternate") as NodePath<t.Expression>;
+      return (
+        this.extractMapSource(consequent) ?? this.extractMapSource(alternate)
+      );
+    }
+
+    if (expr.isOptionalCallExpression()) {
+      return this.traceOptionalMapCall(expr);
+    }
+
+    return null;
+  }
+
+  private traceMapCall(
+    callPath: NodePath<t.CallExpression>
+  ): CollectionInfo | null {
+    const callee = callPath.get("callee");
+    if (!callee.isMemberExpression()) return null;
+
+    const property = callee.get("property") as NodePath;
+    if (
+      !property.isIdentifier() ||
+      (property.node.name !== "map" && property.node.name !== "flatMap")
+    ) {
+      return null;
+    }
+
+    if (!this.callbackProducesJSX(callPath)) return null;
+
+    const arrayObj = callee.get("object") as NodePath<t.Expression>;
+    return this.tracingUtils.traceCollectionSource(arrayObj);
+  }
+
+  private traceOptionalMapCall(
+    callPath: NodePath<t.OptionalCallExpression>
+  ): CollectionInfo | null {
+    const callee = callPath.get("callee");
+    if (
+      !callee.isMemberExpression() &&
+      !callee.isOptionalMemberExpression()
+    ) {
+      return null;
+    }
+
+    const property = (callee as NodePath<t.MemberExpression>).get(
+      "property"
+    ) as NodePath;
+    if (
+      !property.isIdentifier() ||
+      (property.node.name !== "map" && property.node.name !== "flatMap")
+    ) {
+      return null;
+    }
+
+    const arrayObj = (callee as NodePath<t.MemberExpression>).get(
+      "object"
+    ) as NodePath<t.Expression>;
+    return this.tracingUtils.traceCollectionSource(arrayObj);
+  }
+
+  private callbackProducesJSX(
+    callPath: NodePath<t.CallExpression>
+  ): boolean {
+    const args = callPath.get("arguments");
+    const callback = args[0];
+    if (!callback) return false;
+
+    if (callback.isArrowFunctionExpression()) {
+      const body = callback.get("body");
+      if (body.isBlockStatement()) {
+        return JSXUtils.doesBlockReturnJSX(body.node);
+      }
+      return JSXUtils.producesJSX(body.node);
+    }
+
+    if (callback.isFunctionExpression()) {
+      return JSXUtils.doesBlockReturnJSX(callback.node.body);
+    }
+
+    return false;
+  }
+
+  private tryGetByIdInChildren(
+    path: NodePath<t.JSXOpeningElement>,
+    depth: number = 0
+  ): CollectionInfo | null {
+    if (depth > MAX_JSX_DEPTH) return null;
+
+    const jsxElement = path.parentPath;
+    if (!jsxElement?.isJSXElement()) return null;
+
+    const children = jsxElement.get("children");
+    for (const child of children) {
+      const info = this.checkChildForGetById(child, depth);
+      if (info) return info;
+    }
+
+    for (const attr of path.node.attributes) {
+      if (
+        this.types.isJSXAttribute(attr) &&
+        attr.value &&
+        this.types.isJSXExpressionContainer(attr.value)
+      ) {
+        const expr = attr.value.expression;
+        if (this.types.isMemberExpression(expr)) {
+          const info = this.tracingUtils.traceGetByIdSource(path);
+          if (info) return info;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private checkChildForGetById(
+    child: NodePath,
+    depth: number
+  ): CollectionInfo | null {
+    if (child.isJSXExpressionContainer()) {
+      const expr = child.get("expression");
+      if (
+        expr.isMemberExpression() ||
+        expr.isOptionalMemberExpression()
+      ) {
+        return this.tracingUtils.traceGetByIdSource(child);
+      }
+    }
+
+    if (child.isJSXElement()) {
+      const childOpening = child.get("openingElement");
+      return this.tryGetByIdInChildren(childOpening, depth + 1);
+    }
+
+    return null;
+  }
+
+  private tryComponentRootWithCollectionProp(
+    path: NodePath<t.JSXOpeningElement>
+  ): CollectionInfo | null {
+    if (!this.pathUtils.isRootReturnElement(path)) return null;
+
+    const fn = this.pathUtils.findEnclosingFunction(path);
+    if (!fn) return null;
+
+    let info: CollectionInfo | null = null;
+
+    fn.traverse({
+      CallExpression: (callPath: NodePath<t.CallExpression>) => {
+        if (info) return;
+
+        const callee = callPath.get("callee");
+        if (!callee.isMemberExpression()) return;
+
+        const prop = callee.get("property") as NodePath;
+        if (
+          !prop.isIdentifier() ||
+          (prop.node.name !== "map" && prop.node.name !== "flatMap")
+        ) {
+          return;
+        }
+
+        if (!this.callbackProducesJSX(callPath)) return;
+
+        const arrayObj = callee.get("object") as NodePath<t.Expression>;
+        info = this.tracingUtils.traceCollectionSource(arrayObj);
+      },
+    });
+
+    return info;
+  }
+}