@base44-preview/vite-plugin 1.0.20-pr.85.5e3dff7 → 1.0.21-pr.86.3f04404

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "1.0.20-pr.85.5e3dff7",
+  "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,12 +32,6 @@ if (window.self !== window.top) {
   // Handle browser back/forward navigation
   window.addEventListener("popstate", notifyNavigation);
 
-  // NOTE: parent-driven `navigate-to-route` (client-side navigation) is handled
-  // in the visual-edit agent (`visual-edit-agent.ts`), not here, so it can also
-  // clean up stale edit selection/overlays after the route change. The
-  // `pushState` patch above still fires `app_changed_url` when the agent
-  // navigates, so the parent gets its ack.
-
   // 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(() => {
@@ -505,34 +512,6 @@ export function setupVisualEditAgent() {
         }
         break;
 
-      case "navigate-to-route": {
-        // Parent-driven CLIENT-SIDE navigation (no document reload). The canvas
-        // keeps a single pre-booted iframe and switches which page it shows by
-        // posting this instead of swapping `src`. We pushState to the new path
-        // and dispatch popstate so the app's router (React Router et al.)
-        // re-renders the matched route. Handled HERE (in the visual-edit agent)
-        // rather than navigation-notifier so we can also clean up edit state:
-        // the previous route's selection/overlays point at now-detached nodes.
-        // Accept both flat (`message.path`) and nested (`message.data.path`).
-        const navPath = (message.data && message.data.path) || message.path;
-        if (typeof navPath === "string" && navPath.startsWith("/")) {
-          const replace = (message.data && message.data.replace) || message.replace;
-          if (replace) {
-            history.replaceState(history.state, "", navPath);
-          } else {
-            history.pushState(history.state, "", navPath);
-          }
-          window.dispatchEvent(new PopStateEvent("popstate"));
-          // Drop stale selection/hover overlays from the previous page. The
-          // agent's listeners are document-level (persist across client-side
-          // nav) and elements carry build-injected data-source-location, so
-          // selection keeps working on the new route without re-instrumenting.
-          clearSelection();
-          clearHoverOverlays();
-        }
-        break;
-      }
-
       case "update-classes":
         if (message.data && message.data.classes !== undefined) {
           updateElementClassesAndReposition(
@@ -557,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;