@upstart.gg/vite-plugins 0.0.37

package/src/vite-plugin-upstart-editor/plugin.ts

@@ -0,0 +1,73 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createUnplugin } from "unplugin";
+import type { UpstartEditorPluginOptions } from "./runtime/types.js";
+
+const DEFAULT_OPTIONS: Required<UpstartEditorPluginOptions> = {
+  enabled: false,
+  autoInject: true,
+};
+
+/**
+ * Upstart Visual Editor Vite plugin (build-time)
+ *
+ * Injects the editor runtime into the app entry during build.
+ */
+export const upstartEditor = createUnplugin<UpstartEditorPluginOptions>((options = {}) => {
+  const { enabled, autoInject } = { ...DEFAULT_OPTIONS, ...options };
+
+  if (!enabled) {
+    return { name: "upstart-editor-disabled" };
+  }
+
+  const runtimePath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./runtime/index");
+
+  return {
+    name: "upstart-editor",
+    enforce: "pre",
+
+    transform(code, id) {
+      if (!autoInject) {
+        return null;
+      }
+
+      const [cleanId] = id.split("?");
+      if (!cleanId || cleanId.includes("node_modules")) {
+        return null;
+      }
+
+      if (!/\.(t|j)sx?$/.test(cleanId)) {
+        return null;
+      }
+
+      const filename = path.basename(cleanId);
+      if (!filename.startsWith("main.") && !filename.startsWith("index.")) {
+        return null;
+      }
+
+      if (code.includes("initUpstartEditor")) {
+        return null;
+      }
+
+      const injection = [
+        `import { initUpstartEditor } from ${JSON.stringify(runtimePath)};`,
+        "",
+        "if (typeof window !== 'undefined') {",
+        "  if (document.readyState === 'loading') {",
+        "    document.addEventListener('DOMContentLoaded', () => initUpstartEditor());",
+        "  } else {",
+        "    initUpstartEditor();",
+        "  }",
+        "}",
+        "",
+      ].join("\n");
+
+      return {
+        code: `${injection}${code}`,
+        map: null,
+      };
+    },
+  };
+});
+
+export default upstartEditor.vite;

package/src/vite-plugin-upstart-editor/runtime/click-handler.ts

@@ -0,0 +1,80 @@
+import { getCurrentMode } from "./index.js";
+import { sendToParent } from "./utils.js";
+
+let isInitialized = false;
+
+/**
+ * Initialize click handler for className editing.
+ */
+export function initClickHandler(): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  if (isInitialized) {
+    return;
+  }
+
+  console.log("[Upstart Editor] Initializing click handler...");
+  document.addEventListener("click", handleClick, true);
+  isInitialized = true;
+}
+
+/**
+ * Cleanup click handler.
+ */
+export function cleanupClickHandler(): void {
+  document.removeEventListener("click", handleClick, true);
+  isInitialized = false;
+}
+
+function handleClick(event: MouseEvent): void {
+  if (getCurrentMode() !== "edit") {
+    return;
+  }
+
+  const target = event.target as HTMLElement | null;
+  if (!target) {
+    return;
+  }
+
+  if (target.closest("[contenteditable='true']")) {
+    return;
+  }
+
+  const component = target.closest<HTMLElement>("[data-upstart-component]");
+  if (!component) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  const hash = component.dataset.upstartHash;
+  const componentName = component.dataset.upstartComponent;
+  const filePath = component.dataset.upstartFile ?? "";
+
+  if (!hash || !componentName) {
+    return;
+  }
+
+  const rect = component.getBoundingClientRect();
+
+  sendToParent({
+    type: "element-clicked",
+    hash,
+    componentName,
+    filePath,
+    currentClassName: component.className,
+    bounds: {
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      right: rect.right,
+      bottom: rect.bottom,
+    },
+  });
+
+  console.log("[Upstart Editor] Element clicked:", componentName, hash);
+}

package/src/vite-plugin-upstart-editor/runtime/hover-overlay.ts

@@ -0,0 +1,135 @@
+import { getCurrentMode } from "./index.js";
+import { sendToParent } from "./utils.js";
+
+let overlay: HTMLDivElement | null = null;
+let currentTarget: HTMLElement | null = null;
+let isInitialized = false;
+let rafId: number | null = null;
+
+/**
+ * Initialize hover overlay.
+ */
+export function initHoverOverlay(): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  if (isInitialized) {
+    return;
+  }
+
+  console.log("[Upstart Editor] Initializing hover overlay...");
+
+  document.addEventListener("mouseover", handleMouseOver);
+  document.addEventListener("mouseout", handleMouseOut);
+  window.addEventListener("scroll", scheduleOverlayUpdate, { passive: true });
+  window.addEventListener("resize", scheduleOverlayUpdate, { passive: true });
+
+  isInitialized = true;
+}
+
+/**
+ * Hide all overlays.
+ */
+export function hideOverlays(): void {
+  if (overlay) {
+    overlay.style.display = "none";
+    currentTarget = null;
+  }
+}
+
+function handleMouseOver(event: MouseEvent): void {
+  if (getCurrentMode() !== "edit") {
+    return;
+  }
+
+  const target = event.target as HTMLElement | null;
+  if (!target) {
+    return;
+  }
+
+  const component = target.closest<HTMLElement>("[data-upstart-component]");
+  if (!component) {
+    return;
+  }
+
+  if (!overlay) {
+    createOverlay();
+  }
+
+  currentTarget = component;
+  positionOverlay(component);
+
+  const hash = component.dataset.upstartHash;
+  if (hash) {
+    const rect = component.getBoundingClientRect();
+    sendToParent({
+      type: "element-hovered",
+      hash,
+      bounds: {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        right: rect.right,
+        bottom: rect.bottom,
+      },
+    });
+  }
+}
+
+function handleMouseOut(event: MouseEvent): void {
+  const target = event.target as HTMLElement | null;
+  const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+  if (!target) {
+    return;
+  }
+
+  const component = target.closest<HTMLElement>("[data-upstart-component]");
+  if (!component) {
+    return;
+  }
+
+  if (relatedTarget && component.contains(relatedTarget)) {
+    return;
+  }
+
+  hideOverlays();
+}
+
+function createOverlay(): void {
+  overlay = document.createElement("div");
+  overlay.id = "upstart-hover-overlay";
+  overlay.style.cssText =
+    "position: absolute; pointer-events: none; border: 2px solid #3b82f6; " +
+    "background: rgba(59, 130, 246, 0.05); border-radius: 4px; z-index: 9999; " +
+    "transition: all 0.1s ease; display: none;";
+  document.body.appendChild(overlay);
+}
+
+function positionOverlay(element: HTMLElement): void {
+  if (!overlay) {
+    return;
+  }
+
+  const rect = element.getBoundingClientRect();
+  overlay.style.top = `${rect.top + window.scrollY}px`;
+  overlay.style.left = `${rect.left + window.scrollX}px`;
+  overlay.style.width = `${rect.width}px`;
+  overlay.style.height = `${rect.height}px`;
+  overlay.style.display = "block";
+}
+
+function scheduleOverlayUpdate(): void {
+  if (rafId !== null) {
+    return;
+  }
+
+  rafId = requestAnimationFrame(() => {
+    rafId = null;
+    if (currentTarget && overlay && overlay.style.display === "block") {
+      positionOverlay(currentTarget);
+    }
+  });
+}

package/src/vite-plugin-upstart-editor/runtime/index.ts

@@ -0,0 +1,90 @@
+import { initClickHandler } from "./click-handler.js";
+import { initHoverOverlay, hideOverlays } from "./hover-overlay.js";
+import { initTextEditor, destroyAllActiveEditors } from "./text-editor.js";
+import { sendToParent } from "./utils.js";
+import type { EditorMode, UpstartParentMessage } from "./types.js";
+
+let currentMode: EditorMode = "preview";
+let isInitialized = false;
+
+/**
+ * Get the current editor mode.
+ */
+export function getCurrentMode(): EditorMode {
+  return currentMode;
+}
+
+/**
+ * Set the current editor mode.
+ */
+export function setMode(mode: EditorMode): void {
+  currentMode = mode;
+
+  if (mode === "edit") {
+    enableEditMode();
+  } else {
+    disableEditMode();
+  }
+}
+
+/**
+ * Initialize the Upstart editor runtime.
+ */
+export function initUpstartEditor(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (isInitialized) {
+    return;
+  }
+
+  try {
+    console.log("[Upstart Editor] Initializing...");
+
+    currentMode = "preview";
+    isInitialized = true;
+
+    window.addEventListener("message", handleParentMessage);
+
+    initTextEditor();
+    initClickHandler();
+    initHoverOverlay();
+
+    sendToParent({ type: "editor-ready" });
+  } catch (error) {
+    console.error("[Upstart Editor] Initialization failed:", error);
+    sendToParent({
+      type: "editor-error",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}
+
+function handleParentMessage(event: MessageEvent): void {
+  const message = event.data as UpstartParentMessage | undefined;
+
+  if (!message || message.source !== "upstart-editor-parent") {
+    return;
+  }
+
+  if (message.type === "set-mode") {
+    setMode(message.mode);
+  }
+}
+
+function enableEditMode(): void {
+  console.log("[Upstart Editor] Edit mode enabled");
+}
+
+function disableEditMode(): void {
+  console.log("[Upstart Editor] Preview mode enabled");
+  destroyAllActiveEditors();
+  hideOverlays();
+}
+
+export { initTextEditor } from "./text-editor.js";
+export { initClickHandler } from "./click-handler.js";
+export { initHoverOverlay } from "./hover-overlay.js";
+export { sendToParent } from "./utils.js";
+export type { EditorMessage, UpstartEditorMessage } from "./types.js";