@base44-preview/vite-plugin 1.0.20-pr.84.a80f99c → 1.0.21-pr.86.3f04404

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "1.0.20-pr.84.a80f99c",
+  "version": "1.0.21-pr.86.3f04404",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/navigation-notifier.ts

@@ -32,26 +32,6 @@ if (window.self !== window.top) {
   // Handle browser back/forward navigation
   window.addEventListener("popstate", notifyNavigation);
 
-  // Parent-driven CLIENT-SIDE navigation (no full reload). The canvas keeps a
-  // single pre-booted iframe and switches which page it shows by posting
-  // `navigate-to-route` instead of swapping `src`. We pushState (or replaceState)
-  // to the new path and dispatch a synthetic popstate so client routers
-  // (React Router et al.) re-render the matched route. `pushState`/`replaceState`
-  // are already patched above to fire `notifyNavigation`, so the parent still
-  // receives the resulting `app_changed_url` ack and can confirm the switch.
-  window.addEventListener("message", (event) => {
-    const data = event.data;
-    if (!data || data.type !== "navigate-to-route") return;
-    const path = data.path;
-    if (typeof path !== "string" || !path.startsWith("/")) return;
-    if (data.replace) {
-      history.replaceState(history.state, "", path);
-    } else {
-      history.pushState(history.state, "", path);
-    }
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  });
-
   // Notify initial URL on load
   window.parent?.postMessage(
     {

package/src/injections/utils.ts

@@ -82,13 +82,19 @@ 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;
   }
 
+  const targetArrIndex = arrIndex != null ? String(arrIndex) : null;
   elements.forEach((element) => {
-    element.setAttribute(attribute, value);
+    if (
+      targetArrIndex === null ||
+      (element as HTMLElement).dataset.arrIndex === targetArrIndex
+    ) {
+      element.setAttribute(attribute, value);
+    }
   });
 }
 

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

@@ -368,12 +368,19 @@ 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 =
+      arrIndex ??
+      (selectedElementId === visualSelectorId
+        ? (selectedElement as HTMLElement | null)?.dataset.arrIndex
+        : undefined);
+
+    updateElementAttribute(elements, attribute, value, targetArrIndex);
 
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
     setTimeout(() => {
@@ -529,7 +536,8 @@ export function setupVisualEditAgent() {
           updateElementAttributeAndReposition(
             message.data.visualSelectorId,
             message.data.attribute,
-            message.data.value
+            message.data.value,
+            message.data.arrIndex
           );
         } else {
           console.warn(

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

@@ -4,10 +4,10 @@ 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";
 
-
 const GENERATED_INDEX_PARAM = "__arrIdx__";
 
 interface ArrayMapInfo {
@@ -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,35 @@ export class StaticArrayProcessor {
     return null;
   }
 
+  private findImageSrcFieldPath(
+    path: NodePath<t.JSXOpeningElement>,
+    callbackParam: string
+  ): string | null {
+    const elementName = this.types.isJSXIdentifier(path.node.name)
+      ? path.node.name.name
+      : null;
+    if (elementName !== "img" && elementName !== "Image") return null;
+
+    for (const attr of path.get("attributes")) {
+      if (!attr.isJSXAttribute()) continue;
+
+      const attrName = attr.get("name");
+      if (!attrName.isJSXIdentifier() || attrName.node.name !== "src") {
+        continue;
+      }
+
+      const value = attr.get("value");
+      if (!value.isJSXExpressionContainer()) return null;
+
+      const expression = value.get("expression");
+      if (!expression.isMemberExpression()) return null;
+
+      return this.extractFieldPath(expression, callbackParam);
+    }
+
+    return null;
+  }
+
   private extractFieldPathFromChild(
     child: NodePath<t.JSXElement["children"][number]>,
     callbackParam: string
@@ -96,6 +128,9 @@ export class StaticArrayProcessor {
     expr: NodePath<t.MemberExpression>,
     callbackParam: string
   ): string | null {
+    const keyedLookup = this.extractKeyedLookupFieldPath(expr, callbackParam);
+    if (keyedLookup) return keyedLookup;
+
     const parts = this.collectMemberExpressionParts(expr);
     if (!parts) return null;
 
@@ -103,6 +138,20 @@ export class StaticArrayProcessor {
     return rootName === callbackParam ? propertyNames.join(".") : null;
   }
 
+  private extractKeyedLookupFieldPath(
+    expr: NodePath<t.MemberExpression>,
+    callbackParam: string
+  ): string | null {
+    const object = expr.get("object");
+    if (!expr.node.computed || !object.isIdentifier()) return null;
+
+    const property = expr.get("property");
+    if (!property.isMemberExpression()) return null;
+
+    const keyFieldPath = this.extractFieldPath(property, callbackParam);
+    return keyFieldPath ? `${object.node.name}[${keyFieldPath}]` : null;
+  }
+
   private collectMemberExpressionParts(
     expr: NodePath<t.MemberExpression>
   ): { rootName: string; propertyNames: string[] } | null {
@@ -156,7 +205,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;