@depup/base44__vite-plugin 1.0.4-depup.0

package/src/capabilities/inline-edit/controller.ts

@@ -0,0 +1,254 @@
+import type { InlineEditHost, InlineEditController } from "./types.js";
+import {
+  injectFocusOutlineCSS,
+  removeFocusOutlineCSS,
+  selectText,
+  shouldEnterInlineEditingMode,
+  isStaticArrayTextElement,
+} from "./dom-utils.js";
+import { PLUGIN_ELEMENT_ATTR } from "../../injections/utils.js";
+
+const DEBOUNCE_MS = 500;
+
+export function createInlineEditController(
+  host: InlineEditHost
+): InlineEditController {
+  let currentEditingElement: HTMLElement | null = null;
+  let debouncedSendTimeout: ReturnType<typeof setTimeout> | null = null;
+  let enabled = false;
+  const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
+
+  // --- Private helpers ---
+
+  const repositionOverlays = () => {
+    const selectedId = host.getSelectedElementId();
+    if (!selectedId) return;
+    const elements = host.findElementsById(selectedId);
+    const overlays = host.getSelectedOverlays();
+    overlays.forEach((overlay, i) => {
+      if (i < elements.length && elements[i]) {
+        host.positionOverlay(overlay, elements[i]);
+      }
+    });
+  };
+
+  const reportEdit = (element: HTMLElement) => {
+    const originalContent = element.dataset.originalTextContent;
+    const newContent = element.textContent;
+
+    const svgElement = element as unknown as SVGElement;
+    const rect = element.getBoundingClientRect();
+
+    const message: Record<string, unknown> = {
+      type: "inline-edit",
+      elementInfo: {
+        tagName: element.tagName,
+        classes:
+          (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+          element.className ||
+          "",
+        visualSelectorId: host.getSelectedElementId(),
+        content: newContent,
+        dataSourceLocation: element.dataset.sourceLocation,
+        isDynamicContent: element.dataset.dynamicContent === "true",
+        linenumber: element.dataset.linenumber,
+        filename: element.dataset.filename,
+        position: {
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+          centerX: rect.left + rect.width / 2,
+          centerY: rect.top + rect.height / 2,
+        },
+      },
+      originalContent,
+      newContent,
+    };
+
+    if (isStaticArrayTextElement(element)) {
+      message.arrIndex = element.dataset.arrIndex;
+      message.arrVariableName = element.dataset.arrVariableName;
+      message.arrField = element.dataset.arrField;
+    }
+
+    window.parent.postMessage(message, "*");
+
+    element.dataset.originalTextContent = newContent || "";
+  };
+
+  const debouncedReport = (element: HTMLElement) => {
+    if (debouncedSendTimeout) clearTimeout(debouncedSendTimeout);
+    debouncedSendTimeout = setTimeout(() => reportEdit(element), DEBOUNCE_MS);
+  };
+
+  const onTextInput = (element: HTMLElement) => {
+    repositionOverlays();
+    debouncedReport(element);
+  };
+
+  const handleInputEvent = function (this: HTMLElement) {
+    onTextInput(this);
+  };
+
+  const makeEditable = (element: HTMLElement) => {
+    injectFocusOutlineCSS();
+
+    element.dataset.originalTextContent = element.textContent || "";
+    element.dataset.originalCursor = element.style.cursor;
+    element.contentEditable = "true";
+    element.setAttribute(PLUGIN_ELEMENT_ATTR, "true");
+
+    const abortController = new AbortController();
+    listenerAbortControllers.set(element, abortController);
+    element.addEventListener("input", handleInputEvent, {
+      signal: abortController.signal,
+    });
+
+    element.style.cursor = "text";
+    selectText(element);
+    setTimeout(() => {
+      if (element.isConnected) {
+        element.focus();
+      }
+    }, 0);
+  };
+
+  const makeNonEditable = (element: HTMLElement) => {
+    const abortController = listenerAbortControllers.get(element);
+    if (abortController) {
+      abortController.abort();
+      listenerAbortControllers.delete(element);
+    }
+
+    if (!element.isConnected) return;
+
+    removeFocusOutlineCSS();
+    element.contentEditable = "false";
+    element.removeAttribute(PLUGIN_ELEMENT_ATTR);
+    delete element.dataset.originalTextContent;
+
+    if (element.dataset.originalCursor !== undefined) {
+      element.style.cursor = element.dataset.originalCursor;
+      delete element.dataset.originalCursor;
+    }
+  };
+
+  // --- Public API ---
+
+  return {
+    get enabled() {
+      return enabled;
+    },
+    set enabled(value: boolean) {
+      enabled = value;
+    },
+
+    isEditing() {
+      return currentEditingElement !== null;
+    },
+
+    getCurrentElement() {
+      return currentEditingElement;
+    },
+
+    canEdit(element: Element) {
+      return shouldEnterInlineEditingMode(element);
+    },
+
+    startEditing(element: HTMLElement) {
+      currentEditingElement = element;
+
+      host.getSelectedOverlays().forEach((o) => {
+        o.style.display = "none";
+      });
+
+      makeEditable(element);
+
+      window.parent.postMessage(
+        {
+          type: "content-editing-started",
+          visualSelectorId: host.getSelectedElementId(),
+        },
+        "*"
+      );
+    },
+
+    stopEditing() {
+      if (!currentEditingElement) return;
+
+      if (debouncedSendTimeout) {
+        clearTimeout(debouncedSendTimeout);
+        debouncedSendTimeout = null;
+      }
+
+      const element = currentEditingElement;
+      makeNonEditable(element);
+
+      host.getSelectedOverlays().forEach((o) => {
+        o.style.display = "";
+      });
+
+      repositionOverlays();
+
+      window.parent.postMessage(
+        {
+          type: "content-editing-ended",
+          visualSelectorId: host.getSelectedElementId(),
+        },
+        "*"
+      );
+
+      currentEditingElement = null;
+    },
+
+    markElementsSelected(elements: Element[]) {
+      elements.forEach((el) => {
+        if (el instanceof HTMLElement) {
+          el.dataset.selected = "true";
+        }
+      });
+    },
+
+    clearSelectedMarks(elementId: string | null) {
+      if (!elementId) return;
+      host.findElementsById(elementId).forEach((el) => {
+        if (el instanceof HTMLElement) {
+          delete el.dataset.selected;
+        }
+      });
+    },
+
+    handleToggleMessage(data: { dataSourceLocation: string; inlineEditingMode: boolean }) {
+      if (!enabled) return;
+
+      const elements = host.findElementsById(data.dataSourceLocation);
+      if (elements.length === 0 || !(elements[0] instanceof HTMLElement)) return;
+
+      const element = elements[0];
+
+      if (data.inlineEditingMode) {
+        if (!shouldEnterInlineEditingMode(element)) return;
+
+        // Select the element first if not already selected
+        if (host.getSelectedElementId() !== data.dataSourceLocation) {
+          this.stopEditing();
+          host.clearSelection();
+          this.markElementsSelected(elements);
+          host.createSelectionOverlays(elements, data.dataSourceLocation);
+        }
+        this.startEditing(element);
+      } else {
+        if (currentEditingElement === element) {
+          this.stopEditing();
+        }
+      }
+    },
+
+    cleanup() {
+      this.stopEditing();
+    },
+  };
+}

package/src/capabilities/inline-edit/dom-utils.ts

@@ -0,0 +1,58 @@
+const FOCUS_STYLE_ID = "visual-edit-focus-styles";
+
+const EDITABLE_TAGS = [
+  "div", "p", "h1", "h2", "h3", "h4", "h5", "h6",
+  "span", "li", "td", "a", "button", "label",
+];
+
+export const isStaticArrayTextElement = (element: HTMLElement): boolean => {
+  return !!element.dataset.arrField;
+};
+
+const passesStructuralChecks = (element: HTMLElement): boolean => {
+  if (!EDITABLE_TAGS.includes(element.tagName.toLowerCase())) return false;
+  if (!element.textContent?.trim()) return false;
+  if (element.querySelector("img, video, canvas, svg")) return false;
+  if (element.children?.length > 0) return false;
+  return true;
+};
+
+export const injectFocusOutlineCSS = () => {
+  if (document.getElementById(FOCUS_STYLE_ID)) return;
+
+  const style = document.createElement("style");
+  style.id = FOCUS_STYLE_ID;
+  style.textContent = `
+    [data-selected="true"][contenteditable="true"]:focus {
+      outline: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+export const removeFocusOutlineCSS = () => {
+  document.getElementById(FOCUS_STYLE_ID)?.remove();
+};
+
+export const selectText = (element: HTMLElement) => {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+};
+
+export const isEditableTextElement = (element: Element): boolean => {
+  if (!(element instanceof HTMLElement)) return false;
+  if (!passesStructuralChecks(element)) return false;
+  if (isStaticArrayTextElement(element)) return true;
+  if (element.dataset.dynamicContent === "true") return false;
+  return true;
+};
+
+export const shouldEnterInlineEditingMode = (element: Element): boolean => {
+  if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
+    return false;
+  }
+  return isEditableTextElement(element);
+};

package/src/capabilities/inline-edit/index.ts

@@ -0,0 +1,2 @@
+export { createInlineEditController } from "./controller.js";
+export type { CollectionInfo, InlineEditController, InlineEditHost } from "./types.js";

package/src/capabilities/inline-edit/types.ts

@@ -0,0 +1,35 @@
+export interface CollectionInfo {
+  id: string;
+  references: string[];
+}
+
+export interface InlineEditHost {
+  findElementsById(id: string | null): Element[];
+  getSelectedElementId(): string | null;
+  getSelectedOverlays(): HTMLDivElement[];
+  positionOverlay(
+    overlay: HTMLDivElement,
+    element: Element,
+    isSelected?: boolean
+  ): void;
+  clearSelection(): void;
+  createSelectionOverlays(elements: Element[], elementId: string): void;
+}
+
+export interface ToggleInlineEditData {
+  dataSourceLocation: string;
+  inlineEditingMode: boolean;
+}
+
+export interface InlineEditController {
+  enabled: boolean;
+  isEditing(): boolean;
+  getCurrentElement(): HTMLElement | null;
+  canEdit(element: Element): boolean;
+  startEditing(element: HTMLElement): void;
+  stopEditing(): void;
+  markElementsSelected(elements: Element[]): void;
+  clearSelectedMarks(elementId: string | null): void;
+  handleToggleMessage(data: ToggleInlineEditData): void;
+  cleanup(): void;
+}

package/src/consts.ts

@@ -0,0 +1,11 @@
+export const DATA_COLLECTION_ID = "data-collection-id";
+export const DATA_COLLECTION_ITEM_ID = "data-collection-item-id";
+export const DATA_COLLECTION_ITEM_FIELD = "data-collection-item-field";
+export const DATA_COLLECTION_REFERENCE = "data-collection-reference";
+export const DATA_ARR_INDEX = "data-arr-index";
+export const DATA_ARR_VARIABLE_NAME = "data-arr-variable-name";
+export const DATA_ARR_FIELD = "data-arr-field";
+
+export const ALLOWED_CUSTOM_COMPONENTS = ["Image", "Link"];
+export const MAX_JSX_DEPTH = 10;
+export const EXCLUDED_FIELDS = ["children", "length"];

package/src/error-overlay-plugin.ts

@@ -0,0 +1,19 @@
+import { errorOverlayCode } from "./ErrorOverlay.js";
+import type { Plugin } from "vite";
+
+export function errorOverlayPlugin() {
+  return {
+    name: "error-overlay",
+    apply: (config) => config.mode === "development",
+    transform(code, id, opts = {}) {
+      if (opts?.ssr) return;
+
+      if (!id.includes("vite/dist/client/client.mjs")) return;
+
+      return code.replace(
+        "class ErrorOverlay",
+        errorOverlayCode + "\nclass OldErrorOverlay"
+      );
+    },
+  } as Plugin;
+}

package/src/html-injections-plugin.ts

@@ -0,0 +1,166 @@
+import type { Plugin, HtmlTagDescriptor } from "vite";
+import { loadEnv } from "vite";
+
+type Injection = {
+  /** Script src path for dev mode (served from node_modules) */
+  src?: string;
+  injectTo: "head" | "body";
+  mode: "dev" | "production";
+  /** Inline content for production builds (src paths don't work in built output) */
+  inlineContent?: string;
+};
+
+const ANALYTICS_TRACKER_SCRIPT = `
+if (window.self === window.top) {
+  let lastPath = "";
+  function getPageNameFromPath(path) {
+    const segments = path.split("/").filter(Boolean);
+    return segments[0] || null;
+  }
+  function trackPageView() {
+    const path = window.location.pathname;
+    if (path === lastPath) return;
+    lastPath = path;
+    const pageName = getPageNameFromPath(path) || "home";
+    const appId = import.meta.env.VITE_BASE44_APP_ID;
+    if (!appId) return;
+    fetch(\`/app-logs/\${appId}/log-user-in-app/\${pageName}\`, {
+      method: "POST",
+    }).catch(() => {});
+  }
+  const originalPushState = history.pushState.bind(history);
+  history.pushState = function (...args) {
+    originalPushState(...args);
+    trackPageView();
+  };
+  const originalReplaceState = history.replaceState.bind(history);
+  history.replaceState = function (...args) {
+    originalReplaceState(...args);
+    trackPageView();
+  };
+  window.addEventListener("popstate", trackPageView);
+  trackPageView();
+}
+`;
+
+const INJECTIONS: Record<string, Injection> = {
+  unhandledErrors: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/unhandled-errors-handlers.js",
+    injectTo: "head",
+    mode: "dev",
+  },
+  sandboxMount: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/sandbox-mount-observer.js",
+    injectTo: "body",
+    mode: "dev",
+  },
+  hmrNotifier: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/sandbox-hmr-notifier.js",
+    injectTo: "head",
+    mode: "dev",
+  },
+  navigationNotifier: {
+    src: "/node_modules/@base44/vite-plugin/dist/injections/navigation-notifier.js",
+    injectTo: "head",
+    mode: "dev",
+  },
+  analyticsTracker: {
+    injectTo: "head",
+    mode: "production",
+    inlineContent: ANALYTICS_TRACKER_SCRIPT,
+  },
+};
+
+export function htmlInjectionsPlugin({
+  hmrNotifier,
+  navigationNotifier,
+  visualEditAgent,
+  analyticsTracker,
+}: {
+  hmrNotifier: boolean;
+  navigationNotifier: boolean;
+  visualEditAgent: boolean;
+  analyticsTracker: boolean;
+}) {
+  const enabledInjections: Record<string, boolean> = {
+    unhandledErrors: true,
+    sandboxMount: true,
+    hmrNotifier,
+    navigationNotifier,
+    analyticsTracker,
+  };
+
+  let resolvedEnv: Record<string, string> = {};
+
+  return {
+    name: "html-injections",
+    configResolved(config) {
+      // Capture env vars for use in transformIndexHtml
+      // loadEnv gets all env vars including VITE_ prefixed ones
+      resolvedEnv = loadEnv(config.mode, config.root, "");
+    },
+    transformIndexHtml: {
+      handler(_html, ctx) {
+        const currentMode = ctx.server ? "dev" : "production";
+
+        const tags = Object.entries(INJECTIONS)
+          .filter(
+            ([key, injection]) =>
+              enabledInjections[key] && injection.mode === currentMode
+          )
+          .map(([, injection]): HtmlTagDescriptor => {
+            // Production injections use inline content (src paths don't work in built output)
+            if (injection.inlineContent) {
+              // Replace import.meta.env references with actual values
+              // Vite doesn't replace these in inline script content
+              let content = injection.inlineContent;
+              content = content.replace(
+                /import\.meta\.env\.(\w+)/g,
+                (_, envKey) => JSON.stringify(resolvedEnv[envKey] ?? "")
+              );
+
+              return {
+                tag: "script",
+                attrs: { type: "module" },
+                children: content,
+                injectTo: injection.injectTo,
+              };
+            }
+            // Dev injections use src path (served from node_modules)
+            return {
+              tag: "script",
+              attrs: {
+                src: injection.src,
+                type: "module",
+              },
+              injectTo: injection.injectTo,
+            };
+          });
+
+        // Visual edit agent — loaded via dynamic import to support
+        // local dev iteration with ?sandbox-bridge=local
+        if (currentMode === "dev" && visualEditAgent) {
+          const dist = "/node_modules/@base44/vite-plugin/dist";
+          tags.push({
+            tag: "script",
+            attrs: { type: "module" },
+            children: [
+              `if (window.self !== window.top) {`,
+              `  const mode = new URLSearchParams(location.search).get("sandbox-bridge");`,
+              `  const url = mode === "local"`,
+              `    ? "https://localhost:3201/index.mjs"`,
+              `    : "${dist}/statics/index.mjs";`,
+              `  import(url)`,
+              `    .then(mod => { if (typeof mod.setupVisualEditAgent === "function") mod.setupVisualEditAgent(); })`,
+              `    .catch(e => console.error("[visual-edit-agent] Failed to load:", e));`,
+              `}`,
+            ].join("\n"),
+            injectTo: "body",
+          });
+        }
+
+        return tags;
+      },
+    },
+  } as Plugin;
+}