@base44/vite-plugin 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/vite-plugin",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -57,6 +57,13 @@ export default function vitePlugin(
                   strictPort: true,
                   // Allow all hosts - essential for Modal tunnel URLs
                   allowedHosts: true,
+                  // Route the HMR WebSocket through the preview proxy instead of
+                  // the sandbox origin. When BASE44_HMR_HOST is unset (e.g. before
+                  // the proxy is deployed), fall back to Vite's default behavior
+                  // and connect to window.location.host.
+                  ...(process.env.BASE44_HMR_HOST
+                    ? { hmr: { host: process.env.BASE44_HMR_HOST } }
+                    : {}),
                   watch: {
                     // Enable polling for better file change detection in containers
                     usePolling: true,

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
@@ -156,7 +188,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;