@base44-preview/vite-plugin 1.0.6-pr.63.d7abd73 → 1.0.18-pr.81.3d3652d

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

@@ -3,10 +3,15 @@ import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
 import { THEME_FONT_PREVIEW_ID } from "../consts.js";
+import { createCanvasWheelZoomBridgeController } from "./canvas-wheel-zoom-bridge.js";
+import { createPageHeightBridgeController } from "./page-height-bridge.js";
 
 const REPOSITION_DELAY_MS = 50;
 
 export function setupVisualEditAgent() {
+  const canvasWheelZoomBridge = createCanvasWheelZoomBridgeController();
+  const pageHeightBridge = createPageHeightBridgeController();
+
   // State variables (replacing React useState/useRef)
   let isVisualEditMode = false;
   let isPopoverDragging = false;
@@ -427,6 +432,7 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      canvasWheelZoomBridge.disable();
       resumeAnimations();
       inlineEdit.stopEditing();
       clearSelection();
@@ -638,6 +644,25 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "freeze-vh-units":
+        pageHeightBridge.freezeVhUnits(
+          typeof message.referenceVhBase === "number"
+            ? message.referenceVhBase
+            : undefined
+        );
+        break;
+
+      case "measure-page-height":
+        pageHeightBridge.measurePageHeight(
+          event.origin && event.origin !== "null" ? event.origin : "*",
+          typeof message.settleMs === "number" ? message.settleMs : undefined
+        );
+        break;
+
+      case "toggle-canvas-wheel-zoom-bridge":
+        canvasWheelZoomBridge.enable();
+        break;
+
       default:
         break;
     }
@@ -723,4 +748,4 @@ export function setupVisualEditAgent() {
 
   // Send ready message to parent
   window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
-}
+}

package/src/jsx-processor.ts

@@ -29,6 +29,7 @@ export class JSXProcessor {
 
     this.collectionIdProcessor.process(path);
     this.dataItemIdProcessor.process(path);
+    this.dataItemIdProcessor.processRootElement(path);
     this.dataItemFieldProcessor.process(path);
     this.staticArrayProcessor.process(path);
   }

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

@@ -251,6 +251,11 @@ export class CollectionIdProcessor {
 
         if (!this.callbackProducesJSX(callPath)) return;
 
+        // Skip map calls that are directly embedded as JSX children — those
+        // are already handled by tryDirectMapInChildren on their immediate
+        // parent, so attributing them to the component root would be wrong.
+        if (this.isCallInsideJSXChildren(callPath)) return;
+
         const arrayObj = callee.get("object") as NodePath<t.Expression>;
         info = this.tracingUtils.traceCollectionSource(arrayObj);
       },
@@ -258,4 +263,16 @@ export class CollectionIdProcessor {
 
     return info;
   }
+
+  private isCallInsideJSXChildren(path: NodePath): boolean {
+    let current: NodePath | null = path.parentPath;
+    while (current) {
+      if (current.isFunction()) break;
+      if (current.isJSXExpressionContainer()) {
+        return current.parentPath?.isJSXElement() ?? false;
+      }
+      current = current.parentPath;
+    }
+    return false;
+  }
 }

package/src/processors/collection-item-field-processor.ts

@@ -348,16 +348,34 @@ export class DataItemFieldProcessor {
       if (!param.isObjectPattern()) continue;
 
       for (const prop of param.get("properties")) {
+        if (!prop.isObjectProperty()) continue;
+        const key = (prop.node as t.ObjectProperty).key;
+        const val = (prop.node as t.ObjectProperty).value;
+
+        // Reuse a forwarding param already injected by processRootElement
+        if (
+          this.types.isStringLiteral(key) &&
+          key.value === DATA_COLLECTION_ITEM_ID &&
+          this.types.isIdentifier(val)
+        ) {
+          this.attributeUtils.addExpressionAttribute(
+            path,
+            DATA_COLLECTION_ITEM_ID,
+            this.types.identifier(val.name)
+          );
+          return;
+        }
+
+        // Use an existing id / _id destructured prop
         if (
-          prop.isObjectProperty() &&
-          this.types.isIdentifier(prop.node.key) &&
-          (prop.node.key.name === "id" || prop.node.key.name === "_id") &&
-          this.types.isIdentifier(prop.node.value)
+          this.types.isIdentifier(key) &&
+          (key.name === "id" || key.name === "_id") &&
+          this.types.isIdentifier(val)
         ) {
           this.attributeUtils.addExpressionAttribute(
             path,
             DATA_COLLECTION_ITEM_ID,
-            this.types.identifier(prop.node.value.name)
+            this.types.identifier(val.name)
           );
           return;
         }

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

@@ -1,18 +1,24 @@
 import type { NodePath } from "@babel/traverse";
 import type * as t from "@babel/types";
 import { DATA_COLLECTION_ITEM_ID } from "../consts.js";
+import { JSXUtils } from "../jsx-utils.js";
 import {
   JSXAttributeUtils,
   ExpressionAnalysisUtils,
+  PathNavigationUtils,
 } from "./utils/shared-utils.js";
 
+const FORWARDING_PARAM_NAME = "__dataCollectionItemId";
+
 export class DataItemIdProcessor {
   private attributeUtils: JSXAttributeUtils;
   private expressionUtils: ExpressionAnalysisUtils;
+  private pathUtils: PathNavigationUtils;
 
   constructor(private types: typeof t) {
     this.attributeUtils = new JSXAttributeUtils(types);
     this.expressionUtils = new ExpressionAnalysisUtils(types);
+    this.pathUtils = new PathNavigationUtils(types);
   }
 
   process(path: NodePath<t.JSXOpeningElement>): void {
@@ -39,6 +45,154 @@ export class DataItemIdProcessor {
     );
   }
 
+  /**
+   * Called for every root DOM element of a component. Adds a `data-collection-item-id`
+   * forwarding attribute so that when the component is used as a collection item
+   * (with `data-collection-item-id` passed as a prop from a parent `.map()`), the
+   * attribute flows through to the actual DOM element.
+   *
+   * Skipped when:
+   * - The root element already spreads props (e.g. `{...props}`) — forwarding is automatic
+   * - The enclosing function maps over a collection — it's a container, not an item
+   */
+  processRootElement(path: NodePath<t.JSXOpeningElement>): void {
+    if (this.attributeUtils.hasAttribute(path, DATA_COLLECTION_ITEM_ID)) return;
+
+    // Only DOM or allowed custom elements (e.g. motion.div)
+    const name = JSXUtils.getElementName(path.node);
+    if (!name || !JSXUtils.isDOMOrAllowed(name)) return;
+
+    // Only the root return element of a component function
+    if (!this.pathUtils.isRootReturnElement(path)) return;
+
+    // Skip if root element already spreads all props — forwarding is handled naturally
+    if (this.hasSpreadAttribute(path)) return;
+
+    const fn = this.pathUtils.findEnclosingFunction(path);
+    if (!fn) return;
+
+    // Skip if this function IS a .map()/.flatMap() callback — it's an iteration
+    // function, not a component (e.g. [...Array(3)].map((_, i) => <div />))
+    if (this.isMapCallbackFunction(fn)) return;
+
+    // Skip if this function maps over a collection — it's a container, not an item
+    if (this.functionContainsMapCall(fn)) return;
+
+    const expr = this.buildCollectionItemIdExpression(fn);
+    if (!expr) return;
+
+    this.attributeUtils.addExpressionAttribute(path, DATA_COLLECTION_ITEM_ID, expr);
+  }
+
+  private hasSpreadAttribute(path: NodePath<t.JSXOpeningElement>): boolean {
+    return path.node.attributes.some((attr) =>
+      this.types.isJSXSpreadAttribute(attr)
+    );
+  }
+
+  /**
+   * Returns true when `fn` is a direct callback argument to a `.map()` or
+   * `.flatMap()` call — i.e. the function is an iteration callback, not a
+   * component definition. This prevents injecting prop-forwarding into
+   * patterns like `[...Array(3)].map((_, i) => <div />)` where the first
+   * param may be `undefined`.
+   */
+  private isMapCallbackFunction(fn: NodePath<t.Function>): boolean {
+    const parent = fn.parentPath;
+    if (!parent?.isCallExpression()) return false;
+    const callee = parent.node.callee;
+    return (
+      this.types.isMemberExpression(callee) &&
+      this.types.isIdentifier(callee.property) &&
+      (callee.property.name === "map" || callee.property.name === "flatMap")
+    );
+  }
+
+  private functionContainsMapCall(fn: NodePath<t.Function>): boolean {
+    let found = false;
+    const types = this.types;
+    fn.traverse({
+      // Stop at nested functions — event handlers / callbacks defined inside the
+      // component should not cause it to be treated as a collection container.
+      Function(innerFnPath) {
+        innerFnPath.skip();
+      },
+      CallExpression(callPath) {
+        if (found) {
+          callPath.stop();
+          return;
+        }
+        const callee = callPath.node.callee;
+        if (
+          types.isMemberExpression(callee) &&
+          types.isIdentifier(callee.property) &&
+          (callee.property.name === "map" || callee.property.name === "flatMap")
+        ) {
+          found = true;
+        }
+      },
+    });
+    return found;
+  }
+
+  /**
+   * Returns an expression for reading `data-collection-item-id` from the component's
+   * props, modifying the function's params destructuring if necessary.
+   */
+  private buildCollectionItemIdExpression(
+    fn: NodePath<t.Function>
+  ): t.Expression | null {
+    const params = fn.get("params");
+    const firstParam = Array.isArray(params) ? params[0] : params;
+    if (!firstParam) return null;
+
+    if (firstParam.isObjectPattern()) {
+      // Check if already destructured (key must be a string literal — hyphens in the
+      // attribute name rule out a plain identifier)
+      for (const prop of firstParam.get("properties")) {
+        if (!prop.isObjectProperty()) continue;
+        const key = (prop.node as t.ObjectProperty).key;
+        const val = (prop.node as t.ObjectProperty).value;
+        if (
+          this.types.isStringLiteral(key) &&
+          key.value === DATA_COLLECTION_ITEM_ID &&
+          this.types.isIdentifier(val)
+        ) {
+          return this.types.identifier(val.name);
+        }
+      }
+
+      // Add "data-collection-item-id": __dataCollectionItemId to destructuring
+      const newProp = this.types.objectProperty(
+        this.types.stringLiteral(DATA_COLLECTION_ITEM_ID),
+        this.types.identifier(FORWARDING_PARAM_NAME)
+      );
+
+      const restIdx = firstParam.node.properties.findIndex((p) =>
+        this.types.isRestElement(p)
+      );
+      if (restIdx === -1) {
+        firstParam.node.properties.push(newProp);
+      } else {
+        firstParam.node.properties.splice(restIdx, 0, newProp);
+      }
+
+      return this.types.identifier(FORWARDING_PARAM_NAME);
+    }
+
+    if (firstParam.isIdentifier()) {
+      // props?.["data-collection-item-id"] — optional access in case param is nullish
+      return this.types.optionalMemberExpression(
+        this.types.identifier(firstParam.node.name),
+        this.types.stringLiteral(DATA_COLLECTION_ITEM_ID),
+        true, // computed
+        true  // optional
+      );
+    }
+
+    return null;
+  }
+
   private findKeyAttribute(
     path: NodePath<t.JSXOpeningElement>
   ): t.JSXAttribute | null {

package/src/processors/utils/collection-tracing-utils.ts

@@ -2,20 +2,17 @@ import type { NodePath } from "@babel/traverse";
 import type * as t from "@babel/types";
 import type { CollectionInfo } from "../../capabilities/inline-edit/types.js";
 import {
-  ExpressionAnalysisUtils,
   BindingUtils,
   CallExpressionUtils,
 } from "./shared-utils.js";
 
 export class CollectionTracingUtils {
-  private expressionUtils: ExpressionAnalysisUtils;
   private bindingUtils: BindingUtils;
   private callUtils: CallExpressionUtils;
   private visitedSetters = new Set<string>();
   private visitedGetByIdSetters = new Set<string>();
 
   constructor(private types: typeof t) {
-    this.expressionUtils = new ExpressionAnalysisUtils(types);
     this.bindingUtils = new BindingUtils(types);
     this.callUtils = new CallExpressionUtils(types);
   }
@@ -104,6 +101,14 @@ export class CollectionTracingUtils {
       return this.traceExpression(init);
     }
 
+    if (init.isConditionalExpression()) {
+      const consequent = init.get("consequent") as NodePath<t.Expression>;
+      const alternate = init.get("alternate") as NodePath<t.Expression>;
+      const result = this.traceExpression(consequent);
+      if (result) return result;
+      return this.traceExpression(alternate);
+    }
+
     if (init.isMemberExpression()) {
       return this.traceExpression(init);
     }
@@ -137,18 +142,59 @@ export class CollectionTracingUtils {
     this.visitedSetters.add(setterName);
 
     const functionScope = declaratorPath.getFunctionParent() ?? declaratorPath.scope.path;
+
+    // Pattern 1: setData(result) — direct call
     const setterCall = this.bindingUtils.findSetterCallInScope(
       setterName,
       functionScope
     );
+    if (setterCall) {
+      const args = setterCall.get("arguments");
+      const firstArg = args[0];
+      if (!firstArg || !firstArg.isExpression()) return null;
+      return this.traceExpression(firstArg);
+    }
 
-    if (!setterCall) return null;
+    // Pattern 2: somePromise.then(setData) — setter passed as .then callback
+    const thenCall = this.findThenCallWithSetter(setterName, functionScope);
+    if (thenCall) {
+      const callee = thenCall.get("callee");
+      if (callee.isMemberExpression()) {
+        const promiseExpr = callee.get("object") as NodePath<t.Expression>;
+        return this.traceExpression(promiseExpr);
+      }
+    }
 
-    const args = setterCall.get("arguments");
-    const firstArg = args[0];
-    if (!firstArg || !firstArg.isExpression()) return null;
+    return null;
+  }
 
-    return this.traceExpression(firstArg);
+  private findThenCallWithSetter(
+    setterName: string,
+    scope: NodePath
+  ): NodePath<t.CallExpression> | null {
+    let result: NodePath<t.CallExpression> | null = null;
+
+    scope.traverse({
+      CallExpression: (callPath: NodePath<t.CallExpression>) => {
+        if (result) {
+          callPath.stop();
+          return;
+        }
+        const callee = callPath.node.callee;
+        if (
+          this.types.isMemberExpression(callee) &&
+          this.types.isIdentifier(callee.property) &&
+          callee.property.name === "then" &&
+          callPath.node.arguments.length > 0 &&
+          this.types.isIdentifier(callPath.node.arguments[0]) &&
+          callPath.node.arguments[0].name === setterName
+        ) {
+          result = callPath;
+        }
+      },
+    });
+
+    return result;
   }
 
   private traceMemberExpression(

package/src/processors/utils/shared-utils.ts

@@ -541,7 +541,7 @@ export class CallExpressionUtils {
     const method = callee.property;
     if (
       !this.types.isIdentifier(method) ||
-      (method.name !== "list" && method.name !== "getAll")
+      (method.name !== "list" && method.name !== "getAll" && method.name !== "filter")
     ) {
       return null;
     }