@base44/vite-plugin 1.0.35 → 1.0.37

package/package.json

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

package/src/base44-runtime-plugin.ts

@@ -0,0 +1,103 @@
+import type { Plugin } from "vite";
+
+/**
+ * Serves `base44:runtime` to full-stack server routes, so a route reads secrets
+ * and schedules background work with the SAME import a backend function uses:
+ *
+ *   import { secrets, waitUntil } from "base44:runtime";
+ *
+ * WHY A BUILD-TIME VIRTUAL MODULE. The Workers runtime cannot resolve a custom
+ * scheme: the legacy module registry special-cases only `node:` / `cloudflare:` /
+ * `workerd:`, and the new registry (`new_module_registry`) explicitly rejects a
+ * bundle module whose name carries a non-`file:` scheme. Import maps are not
+ * supported either. So `base44:runtime` has to be resolved before upload — there
+ * is no runtime path to it, and no amount of wrapping the deployed entry creates
+ * one.
+ *
+ * WHY NO ASYNCLOCALSTORAGE / NO WRAPPER ENTRY. Cloudflare now ships both
+ * primitives ambiently from `cloudflare:workers` (`env` since 2025-03-17,
+ * `waitUntil` since 2025-08-08), backed by workerd's own AsyncContextFrame and
+ * IoContext. The backend-function bundler predates that and threads a context
+ * through `globalThis.Base44` because it owns the generated entry; here the
+ * framework owns the entry, and borrowing the platform's ambient accessors means
+ * we never have to.
+ */
+
+const SPECIFIER = "base44:runtime";
+// Rollup convention: a resolved virtual id starts with NUL so no other plugin
+// (and no filesystem lookup) tries to claim it.
+const RESOLVED = "\0base44:runtime";
+
+// Reserved so a route importing it fails with an explanation instead of a bare
+// "failed to resolve import". Actors are never imported — they live in the app's
+// actors directory, in server routes exactly as in backend functions.
+const ACTORS_REASON =
+  "Actors are defined in the app's actors directory, not imported into a route.";
+
+function unsupportedReason(id: string): string | null {
+  if (id === "base44:runtime/actors") return ACTORS_REASON;
+  return null;
+}
+
+/**
+ * `cloudflare:workers` stays external — workerd provides it, and Nitro's
+ * cloudflare preset already treats `cloudflare:*` that way.
+ *
+ * There is deliberately no separate dev body. Nitro's `cloudflareDev` preset
+ * (aliased for `cloudflare-module`, which is what these apps build with) sets
+ * `devServer.runner: "miniflare"`, so dev runs in workerd too and the same
+ * import resolves there. A `process.env` fallback would buy nothing and cost a
+ * dev/prod behaviour split — the shape that makes background work silently
+ * vanish locally while working in production. If someone overrides the runner
+ * away from workerd, this fails loudly at resolution rather than quietly
+ * serving a different value.
+ *
+ * `waitUntil` is WRAPPED rather than re-exported: ours returns the promise so it
+ * composes (`infra/base44-userapp-bundler/src/runtime/index.ts` in apper),
+ * Cloudflare's returns void. A bare re-export would make `const p = waitUntil(x)`
+ * work in a backend function and silently yield `undefined` here — one specifier
+ * with two behaviours is the exact failure this module exists to prevent.
+ */
+const RUNTIME_MODULE = `
+import { env, waitUntil as cfWaitUntil } from "cloudflare:workers";
+
+export function waitUntil(promise) {
+  cfWaitUntil(promise);
+  return promise;
+}
+
+export const secrets = {
+  get(name) {
+    const value = env[name];
+    return typeof value === "string" ? value : undefined;
+  },
+};
+`;
+
+export function base44RuntimePlugin(): Plugin {
+  return {
+    name: "base44-runtime",
+    // Ahead of Vite's own resolution so the bare `base44:` specifier is never
+    // mistaken for a URL protocol.
+    enforce: "pre",
+
+    resolveId(id) {
+      const reason = unsupportedReason(id);
+      if (reason) {
+        this.error(`"${id}" is not available in server routes. ${reason}`);
+      }
+      if (id !== SPECIFIER) return null;
+
+      // `cloudflare:workers` has no browser equivalent, so a client-side import
+      // would bundle a module that cannot run. Fail with the reason instead.
+      if (this.environment?.name === "client") {
+        this.error(`"${SPECIFIER}" is server-only. Move this import into a server route.`);
+      }
+      return RESOLVED;
+    },
+
+    load(id) {
+      return id === RESOLVED ? RUNTIME_MODULE : null;
+    },
+  };
+}

package/src/index.ts

@@ -6,6 +6,7 @@ import { visualEditPlugin } from "./visual-edit-plugin.js";
 import { filterPackagesInProject } from "./utils.js";
 import { htmlInjectionsPlugin } from "./html-injections-plugin.js";
 import { buildStatusPlugin } from "./build-status-plugin.js";
+import { base44RuntimePlugin } from "./base44-runtime-plugin.js";
 
 const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
 
@@ -288,5 +289,10 @@ export default function vitePlugin(
     ...(process.env.BASE44_BUILD_STATUS_ENABLED === "1"
       ? [buildStatusPlugin()]
       : []),
+    // Serves `base44:runtime` to full-stack server routes. Unconditional: it
+    // only claims the `base44:` specifiers, so an app with no server dir never
+    // notices it. Ordering comes from its own `enforce: "pre"`, not from its
+    // position here — several tests index this array from the front.
+    base44RuntimePlugin(),
   ];
 }

package/src/injections/layer-dropdown/controller.ts

@@ -1,6 +1,6 @@
 /** Controller that encapsulates layer-dropdown integration logic */
 
-import { getElementSelectorId } from "../utils.js";
+import { readVisualEditTagName, getElementSelectorId } from "../utils.js";
 import { buildLayerChain } from "./utils.js";
 import {
   enhanceLabelWithChevron,
@@ -62,7 +62,7 @@ export function createLayerController(config: LayerControllerConfig): LayerContr
     } else {
       dropdownSourceLayer = {
         element,
-        tagName: element.tagName.toLowerCase(),
+        tagName: readVisualEditTagName(element).toLowerCase(),
         selectorId: currentId,
       };
       config.onDeselect();

package/src/injections/layer-dropdown/utils.ts

@@ -1,6 +1,6 @@
 /** DOM utilities for the layer-dropdown module */
 
-import { isInstrumentedElement, getElementSelectorId } from "../utils.js";
+import { readVisualEditTagName, isInstrumentedElement, getElementSelectorId } from "../utils.js";
 import { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from "./consts.js";
 
 import type { LayerInfo } from "./types.js";
@@ -23,7 +23,7 @@ export function getLayerDisplayName(layer: LayerInfo): string {
 function toLayerInfo(element: Element, depth?: number): LayerInfo {
   const info: LayerInfo = {
     element,
-    tagName: element.tagName.toLowerCase(),
+    tagName: readVisualEditTagName(element).toLowerCase(),
     selectorId: getElementSelectorId(element),
   };
   if (depth !== undefined) info.depth = depth;
@@ -50,7 +50,7 @@ export function getInstrumentedDescendants(
       if (isInstrumentedElement(child)) {
         const info: LayerInfo = {
           element: child,
-          tagName: child.tagName.toLowerCase(),
+          tagName: readVisualEditTagName(child).toLowerCase(),
           selectorId: getElementSelectorId(child),
         };
         if (startDepth !== undefined) {

package/src/injections/utils.ts

@@ -53,6 +53,14 @@ export function getElementSelectorId(element: Element): string | null {
   );
 }
 
+export function isImageComponent(element: Element): boolean {
+  return element.hasAttribute("data-base44-image");
+}
+
+export function readVisualEditTagName(element: Element): string {
+  return isImageComponent(element) ? "IMG" : element.tagName;
+}
+
 export const ALLOWED_ATTRIBUTES: string[] = ["src"];
 
 export const PLUGIN_ELEMENT_ATTR = "data-vite-plugin-element";
@@ -93,7 +101,11 @@ export function updateElementAttribute(elements: Element[], attribute: string, v
       targetArrIndex === null ||
       (element as HTMLElement).dataset.arrIndex === targetArrIndex
     ) {
-      element.setAttribute(attribute, value);
+      if (attribute === "src" && isImageComponent(element)) {
+        element.dispatchEvent(new CustomEvent("base44:image-replace", { detail: { src: value } }));
+      } else {
+        element.setAttribute(attribute, value);
+      }
     }
   });
 }
@@ -111,7 +123,9 @@ export function readElementClasses(element: Element): string {
 export function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {
   const attributes: Record<string, string> = {};
   for (const attr of allowedAttributes) {
-    const val = element.getAttribute(attr);
+    const val = attr === "src" && isImageComponent(element)
+      ? element.getAttribute("data-base44-image-src")
+      : element.getAttribute(attr);
     if (val !== null) {
       attributes[attr] = val;
     }

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

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, readElementClasses, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
+import { readVisualEditTagName, findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, readElementClasses, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
@@ -65,7 +65,7 @@ export function setupVisualEditAgent() {
 
     if (!label) {
       label = document.createElement("div");
-      label.textContent = element.tagName.toLowerCase();
+      label.textContent = readVisualEditTagName(element).toLowerCase();
       label.style.position = "absolute";
       label.style.left = "-2px";
       label.style.padding = "2px 8px";
@@ -137,7 +137,7 @@ export function setupVisualEditAgent() {
   const notifyElementSelected = (element: Element) => {
     const htmlElement = element as HTMLElement;
     const rect = element.getBoundingClientRect();
-    const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
+    const isTextElement = TEXT_TAGS.includes(readVisualEditTagName(element).toLowerCase());
 
     const arrEl = htmlElement.closest("[data-arr-variable-name]") as HTMLElement | null;
     const staticArrayName = arrEl?.dataset?.arrVariableName || null;
@@ -151,7 +151,7 @@ export function setupVisualEditAgent() {
 
     window.parent.postMessage({
       type: "element-selected",
-      tagName: element.tagName,
+      tagName: readVisualEditTagName(element),
       classes: readElementClasses(element),
       visualSelectorId: getElementSelectorId(element),
       content: isTextElement ? htmlElement.innerText : undefined,
@@ -181,7 +181,7 @@ export function setupVisualEditAgent() {
   };
 
   // Select an element: create overlays, update state, notify parent
-  const selectElement = (element: Element): HTMLDivElement | undefined => {
+  const selectElement = (element: Element, notifyParent = true): HTMLDivElement | undefined => {
     const visualSelectorId = getElementSelectorId(element);
 
     clearSelectedOverlays();
@@ -197,7 +197,7 @@ export function setupVisualEditAgent() {
     selectedElementId = visualSelectorId || null;
     selectedElement = element;
     clearHoverOverlays();
-    notifyElementSelected(element);
+    if (notifyParent) notifyElementSelected(element);
 
     return selectedOverlays[0];
   };
@@ -381,9 +381,20 @@ export function setupVisualEditAgent() {
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
     setTimeout(() => {
       if (selectedElementId === visualSelectorId) {
+        const currentElements = findElementsById(visualSelectorId);
+        if (selectedElement && !selectedElement.isConnected) {
+          const selectedIndex = (selectedElement as HTMLElement).dataset.arrIndex;
+          const replacement = currentElements.find(
+            (element) => (element as HTMLElement).dataset.arrIndex === selectedIndex
+          );
+          if (replacement) {
+            const overlay = selectElement(replacement, false);
+            layerController.attachToOverlay(overlay, replacement);
+          }
+        }
         selectedOverlays.forEach((overlay, index) => {
-          if (index < elements.length) {
-            positionOverlay(overlay, elements[index]!);
+          if (index < currentElements.length) {
+            positionOverlay(overlay, currentElements[index]!);
           }
         });
       }

package/src/visual-edit-plugin.md

@@ -356,3 +356,18 @@ The `transformIndexHtml` hook injects the Tailwind CSS CDN, enabling visual edit
 | `src/injections/sandbox-mount-observer.ts` | Detects when instrumented elements mount in DOM |
 | `src/injections/utils.ts` | `findElementsById()`, `updateElementClasses()` utilities |
 | `tests/visual-edit-agent.test.ts` | Unit tests for element finding and class updates |
+
+### Seeded Image components
+
+A `data-base44-image` wrapper is one logical image edit target. Its classes and
+source location refer to the app's `<Image>` call site; report its tag as `IMG`
+for the image toolbar and layer labels. Read `src` from `data-base44-image-src`,
+which preserves the original prop rather than the inner image's transformed CDN
+URL. The template keeps all instrumentation on the wrapper and suppresses source
+locations on the placeholder and main image.
+
+For `src` edits, dispatch `base44:image-replace` with `detail: { src }` on the
+wrapper, retaining the selected-array-index filter. The template updates React
+state so the replacement survives responsive resizes. Native images continue to
+use direct attribute updates. Publish this support before seeding a template
+that uses the wrapper contract.