@base44-preview/vite-plugin 1.0.20-pr.82.75ad211 → 1.0.20-pr.83.ee1eb29

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.ee1eb29",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/utils.ts

@@ -82,12 +82,21 @@ 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);
   });
 }

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

@@ -368,12 +368,13 @@ 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);
+    updateElementAttribute(elements, attribute, value, arrIndex);
 
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
     setTimeout(() => {
@@ -529,7 +530,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 +654,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 +757,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

@@ -69,6 +69,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 +83,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 +125,17 @@ export class StaticArrayProcessor {
     return this.extractFieldPath(expression, callbackParam);
   }
 
+  private extractFieldPathFromExpression(
+    expr: t.MemberExpression | t.OptionalMemberExpression,
+    callbackParam: string
+  ): string | null {
+    const parts = this.collectMemberExpressionPartsFromNode(expr);
+    if (!parts) return null;
+
+    const { rootName, propertyNames } = parts;
+    return rootName === callbackParam ? propertyNames.join(".") : null;
+  }
+
   private extractFieldPath(
     expr: NodePath<t.MemberExpression>,
     callbackParam: string
@@ -122,6 +166,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;