@base44-preview/vite-plugin 1.0.20-pr.83.ee1eb29 → 1.0.20-pr.85.5e3dff7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "1.0.20-pr.83.ee1eb29",
+  "version": "1.0.20-pr.85.5e3dff7",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/navigation-notifier.ts

@@ -32,6 +32,12 @@ 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,21 +82,12 @@ 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,
-  arrIndex?: number | string
-): void {
+export function updateElementAttribute(elements: Element[], attribute: string, value: string): void {
   if (!ALLOWED_ATTRIBUTES.includes(attribute)) {
     return;
   }
 
-  const targetElements = arrIndex != null
-    ? elements.filter((element) => (element as HTMLElement).dataset.arrIndex === String(arrIndex))
-    : elements;
-
-  targetElements.forEach((element) => {
+  elements.forEach((element) => {
     element.setAttribute(attribute, value);
   });
 }

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

@@ -368,13 +368,12 @@ export function setupVisualEditAgent() {
   const updateElementAttributeAndReposition = (
     visualSelectorId: string,
     attribute: string,
-    value: string,
-    arrIndex?: number | string
+    value: string
   ) => {
     const elements = findElementsById(visualSelectorId);
     if (elements.length === 0) return;
 
-    updateElementAttribute(elements, attribute, value, arrIndex);
+    updateElementAttribute(elements, attribute, value);
 
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
     setTimeout(() => {
@@ -506,6 +505,34 @@ 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(
@@ -530,8 +557,7 @@ export function setupVisualEditAgent() {
           updateElementAttributeAndReposition(
             message.data.visualSelectorId,
             message.data.attribute,
-            message.data.value,
-            message.data.arrIndex
+            message.data.value
           );
         } else {
           console.warn(

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

@@ -69,9 +69,6 @@ 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;
 
@@ -83,36 +80,6 @@ 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
@@ -125,17 +92,6 @@ 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
@@ -166,35 +122,6 @@ 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;