@base44-preview/vite-plugin 1.0.20-pr.82.75ad211 → 1.0.20-pr.83.15dfedc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "1.0.20-pr.82.75ad211",
+  "version": "1.0.20-pr.83.15dfedc",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/utils.ts

@@ -82,16 +82,45 @@ export function updateElementClasses(elements: Element[], classes: string): void
 }
 
 /** Set a single attribute on all provided elements. */
-export function updateElementAttribute(elements: Element[], attribute: string, value: string): void {
+export function updateElementAttribute(
+  elements: Element[],
+  attribute: string,
+  value: string,
+  arrIndex?: number | string
+): void {
   if (!ALLOWED_ATTRIBUTES.includes(attribute)) {
     return;
   }
 
-  elements.forEach((element) => {
+  const targetElements = arrIndex != null
+    ? elements.filter((element) => (element as HTMLElement).dataset.arrIndex === String(arrIndex))
+    : elements;
+
+  targetElements.forEach((element) => {
     element.setAttribute(attribute, value);
   });
 }
 
+export function resolveAttributeUpdateArrIndex(
+  explicitArrIndex: number | string | null | undefined,
+  selectedElement: Element | null,
+  selectedElementId: string | null,
+  visualSelectorId: string
+): number | string | undefined {
+  if (explicitArrIndex != null) {
+    return explicitArrIndex;
+  }
+
+  if (!selectedElement || selectedElementId !== visualSelectorId) {
+    return undefined;
+  }
+
+  const staticArrayElement = selectedElement.closest(
+    "[data-arr-index]"
+  ) as HTMLElement | null;
+  return staticArrayElement?.dataset.arrIndex;
+}
+
 /** Collect attribute values from an element for a given allowlist. */
 export function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {
   const attributes: Record<string, string> = {};

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

@@ -1,4 +1,17 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel } from "./utils.js";
+import {
+  findElementsById,
+  updateElementClasses,
+  updateElementAttribute,
+  resolveAttributeUpdateArrIndex,
+  collectAllowedAttributes,
+  ALLOWED_ATTRIBUTES,
+  getElementSelectorId,
+  stopAnimations,
+  resumeAnimations,
+  findInstrumentedElement,
+  resolveHoverTarget,
+  positionLabel,
+} 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";
@@ -368,12 +381,20 @@ export function setupVisualEditAgent() {
   const updateElementAttributeAndReposition = (
     visualSelectorId: string,
     attribute: string,
-    value: string
+    value: string,
+    arrIndex?: number | string
   ) => {
     const elements = findElementsById(visualSelectorId);
     if (elements.length === 0) return;
 
-    updateElementAttribute(elements, attribute, value);
+    const targetArrIndex = resolveAttributeUpdateArrIndex(
+      arrIndex,
+      selectedElement,
+      selectedElementId,
+      visualSelectorId
+    );
+
+    updateElementAttribute(elements, attribute, value, targetArrIndex);
 
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
     setTimeout(() => {
@@ -529,7 +550,8 @@ export function setupVisualEditAgent() {
           updateElementAttributeAndReposition(
             message.data.visualSelectorId,
             message.data.attribute,
-            message.data.value
+            message.data.value,
+            message.data.arrIndex
           );
         } else {
           console.warn(
@@ -652,20 +674,17 @@ export function setupVisualEditAgent() {
             ? message.referenceVhBase
             : undefined
         );
-        postAckIfRequested(event, message);
         break;
 
       case "measure-page-height":
         pageHeightBridge.measurePageHeight(
-          safeAckOrigin(event),
+          event.origin && event.origin !== "null" ? event.origin : "*",
           typeof message.settleMs === "number" ? message.settleMs : undefined
         );
-        postAckIfRequested(event, message);
         break;
 
       case "suppress-auto-popups":
         autoPopupSuppressor.suppress();
-        postAckIfRequested(event, message);
         break;
 
       case "toggle-canvas-wheel-zoom-bridge":
@@ -758,22 +777,3 @@ export function setupVisualEditAgent() {
   // Send ready message to parent
   window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
 }
-
-// "*" fallback covers jsdom (empty origin) and sandboxed iframes (literal "null").
-export function safeAckOrigin(event: MessageEvent): string {
-  return event.origin && event.origin !== "null" ? event.origin : "*";
-}
-
-// Echoes `<type>:ack` to the parent when the incoming message includes a
-// reqId. No-op without reqId — keeps senders that don't expect acks working.
-export function postAckIfRequested(
-  event: MessageEvent,
-  message: { type?: unknown; reqId?: unknown },
-): void {
-  if (typeof message.reqId !== "string") return;
-  if (typeof message.type !== "string") return;
-  window.parent.postMessage(
-    { type: `${message.type}:ack`, reqId: message.reqId },
-    safeAckOrigin(event),
-  );
-}

package/src/processors/static-array-processor.ts

@@ -4,6 +4,7 @@ import {
   DATA_ARR_INDEX,
   DATA_ARR_VARIABLE_NAME,
   DATA_ARR_FIELD,
+  MAX_JSX_DEPTH,
 } from "../consts.js";
 import { JSXAttributeUtils, StaticValueUtils } from "./utils/shared-utils.js";
 
@@ -69,6 +70,9 @@ export class StaticArrayProcessor {
     path: NodePath<t.JSXOpeningElement>,
     callbackParam: string
   ): string | null {
+    const imageSrcFieldPath = this.findImageSrcFieldPath(path, callbackParam);
+    if (imageSrcFieldPath) return imageSrcFieldPath;
+
     const parentElement = path.parentPath;
     if (!parentElement?.isJSXElement()) return null;
 
@@ -80,6 +84,36 @@ export class StaticArrayProcessor {
     return null;
   }
 
+  private findImageSrcFieldPath(
+    path: NodePath<t.JSXOpeningElement>,
+    callbackParam: string
+  ): string | null {
+    const elementName = this.getElementName(path);
+    if (elementName !== "img" && elementName !== "Image") return null;
+
+    for (const attr of path.node.attributes) {
+      if (
+        !this.types.isJSXAttribute(attr) ||
+        !this.types.isJSXIdentifier(attr.name) ||
+        attr.name.name !== "src" ||
+        !attr.value ||
+        !this.types.isJSXExpressionContainer(attr.value)
+      ) {
+        continue;
+      }
+
+      const expression = attr.value.expression;
+      if (
+        this.types.isMemberExpression(expression) ||
+        this.types.isOptionalMemberExpression(expression)
+      ) {
+        return this.extractFieldPathFromExpression(expression, callbackParam);
+      }
+    }
+
+    return null;
+  }
+
   private extractFieldPathFromChild(
     child: NodePath<t.JSXElement["children"][number]>,
     callbackParam: string
@@ -92,6 +126,52 @@ export class StaticArrayProcessor {
     return this.extractFieldPath(expression, callbackParam);
   }
 
+  private extractFieldPathFromExpression(
+    expr: t.MemberExpression | t.OptionalMemberExpression,
+    callbackParam: string
+  ): string | null {
+    const lookupName = this.extractStaticLookupName(expr, callbackParam);
+    if (lookupName) return lookupName;
+
+    const parts = this.collectMemberExpressionPartsFromNode(expr);
+    if (!parts) return null;
+
+    const { rootName, propertyNames } = parts;
+    return rootName === callbackParam ? propertyNames.join(".") : null;
+  }
+
+  private extractStaticLookupName(
+    expr: t.MemberExpression | t.OptionalMemberExpression,
+    callbackParam: string
+  ): string | null {
+    if (!expr.computed) return null;
+    if (
+      !this.types.isIdentifier(expr.object)
+    ) {
+      return null;
+    }
+
+    if (
+      this.types.isIdentifier(expr.property) &&
+      expr.property.name === callbackParam
+    ) {
+      return expr.object.name;
+    }
+
+    if (
+      this.types.isMemberExpression(expr.property) ||
+      this.types.isOptionalMemberExpression(expr.property)
+    ) {
+      const keyFieldPath = this.extractFieldPathFromExpression(
+        expr.property,
+        callbackParam
+      );
+      return keyFieldPath ? `${expr.object.name}[${keyFieldPath}]` : null;
+    }
+
+    return null;
+  }
+
   private extractFieldPath(
     expr: NodePath<t.MemberExpression>,
     callbackParam: string
@@ -122,6 +202,35 @@ export class StaticArrayProcessor {
     return { rootName: current.node.name, propertyNames };
   }
 
+  private collectMemberExpressionPartsFromNode(
+    expr: t.MemberExpression | t.OptionalMemberExpression
+  ): { rootName: string; propertyNames: string[] } | null {
+    const propertyNames: string[] = [];
+    let current: t.Expression = expr;
+
+    while (
+      this.types.isMemberExpression(current) ||
+      this.types.isOptionalMemberExpression(current)
+    ) {
+      const property = current.property;
+      if (!this.types.isIdentifier(property)) return null;
+
+      propertyNames.unshift(property.name);
+      current = current.object as t.Expression;
+    }
+
+    if (!this.types.isIdentifier(current)) return null;
+
+    return { rootName: current.name, propertyNames };
+  }
+
+  private getElementName(path: NodePath<t.JSXOpeningElement>): string | null {
+    const name = path.node.name;
+    if (this.types.isJSXIdentifier(name)) return name.name;
+    if (this.types.isJSXMemberExpression(name)) return name.property.name;
+    return null;
+  }
+
   private ensureIndexParam(arrayInfo: ArrayMapInfo): string {
     if (arrayInfo.indexParam) {
       return arrayInfo.indexParam;
@@ -156,7 +265,7 @@ export class StaticArrayProcessor {
 
   private findParentArrayMap(
     path: NodePath<t.JSXOpeningElement>,
-    maxDepth: number = 5
+    maxDepth: number = MAX_JSX_DEPTH
   ): ArrayMapInfo | null {
     let currentPath: NodePath = path;
     let depth = 0;