@upstart.gg/vite-plugins 0.0.38 → 0.0.40

package/src/vite-plugin-upstart-branding/runtime.ts

@@ -0,0 +1,128 @@
+const UPSTART_ICON_SVG = `<svg width="18" height="18" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_upstart_branding)">
+<path d="M452 0H60C26.8629 0 0 26.8629 0 60V452C0 485.137 26.8629 512 60 512H452C485.137 512 512 485.137 512 452V60C512 26.8629 485.137 0 452 0Z" fill="#817FCC"/>
+<path d="M346.505 112H410L377.739 307.306C374.122 329.235 365.764 348.423 352.664 364.87C339.564 381.316 322.896 394.141 302.66 403.343C282.424 412.448 259.841 417 234.913 417C209.984 417 188.966 412.448 171.858 403.343C154.75 394.141 142.383 381.316 134.758 364.87C127.133 348.423 125.129 329.235 128.746 307.306L161.006 112H224.501L192.974 301.872C191.214 313.326 192.094 323.508 195.613 332.416C199.23 341.325 205.194 348.325 213.503 353.416C221.813 358.506 232.078 361.052 244.297 361.052C256.615 361.052 267.76 358.506 277.731 353.416C287.801 348.325 296.061 341.325 302.513 332.416C309.063 323.508 313.218 313.326 314.978 301.872L346.505 112Z" fill="white"/>
+<path d="M101 119C101 115.134 104.134 112 108 112H164C167.866 112 171 115.134 171 119V160C171 163.866 167.866 167 164 167H108C104.134 167 101 163.866 101 160V119Z" fill="white"/>
+</g>
+<defs><clipPath id="clip0_upstart_branding"><rect width="512" height="512" fill="white"/></clipPath></defs>
+</svg>`;
+
+const BADGE_ID = "upstart-branding-badge";
+const DISMISS_DELAY_MS = 4000;
+
+let isInitialized = false;
+
+/**
+ * Initialize the Upstart branding badge.
+ * Injects a fixed-position badge at the bottom center of the viewport.
+ * The badge slides up and fades in, then dismisses after ~4 seconds or on scroll.
+ */
+export function initUpstartBranding(): void {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+
+  if (isInitialized) {
+    return;
+  }
+
+  isInitialized = true;
+
+  // Delay initialization to wait for React hydration
+  if ("scheduler" in globalThis) {
+    // @ts-expect-error not yet in TS types
+    globalThis.scheduler.postTask(() => injectBranding(), { delay: 250, priority: "background" });
+  } else {
+    setTimeout(() => injectBranding(), 250);
+  }
+}
+
+function injectBranding(): void {
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes upstart-branding-slide-in {
+      from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+    }
+
+    #${BADGE_ID} {
+      position: fixed;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2147483647;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      background: rgba(30, 30, 30, 0.75);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-radius: 9999px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.1);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-size: 13px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.9);
+      text-decoration: none;
+      cursor: pointer;
+      pointer-events: auto;
+      animation: upstart-branding-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      white-space: nowrap;
+      line-height: 1;
+    }
+
+    #${BADGE_ID}:hover {
+      background: rgba(30, 30, 30, 0.9);
+      color: #fff;
+    }
+
+    #${BADGE_ID}.upstart-branding-hiding {
+      opacity: 0;
+      transform: translateX(-50%) translateY(12px);
+      pointer-events: none;
+    }
+
+    #${BADGE_ID} svg {
+      flex-shrink: 0;
+      border-radius: 3px;
+    }
+  `;
+  document.head.appendChild(style);
+
+  const badge = document.createElement("a");
+  badge.id = BADGE_ID;
+  badge.href = "https://upstart.gg";
+  badge.target = "_blank";
+  badge.rel = "noopener noreferrer";
+  badge.innerHTML = `${UPSTART_ICON_SVG}<span>Made with Upstart</span>`;
+
+  document.body.appendChild(badge);
+
+  let dismissed = false;
+  function dismiss() {
+    if (dismissed) return;
+    dismissed = true;
+    badge.classList.add("upstart-branding-hiding");
+    setTimeout(() => {
+      badge.remove();
+      style.remove();
+    }, 500);
+    window.removeEventListener("scroll", onScroll);
+    clearTimeout(timer);
+  }
+
+  const timer = setTimeout(dismiss, DISMISS_DELAY_MS);
+
+  function onScroll() {
+    dismiss();
+  }
+  window.addEventListener("scroll", onScroll, { passive: true, once: true });
+}

package/src/vite-plugin-upstart-branding/types.ts

@@ -0,0 +1,10 @@
+/**
+ * Build-time plugin options for the Upstart branding badge.
+ */
+export interface UpstartBrandingPluginOptions {
+  /**
+   * Enable or disable the branding badge.
+   * @default false
+   */
+  enabled?: boolean;
+}

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

@@ -36,12 +36,7 @@ export const upstartEditor = createUnplugin<UpstartEditorPluginOptions>((options
         return null;
       }
 
-      if (!/\.(t|j)sx?$/.test(cleanId)) {
-        return null;
-      }
-
-      const filename = path.basename(cleanId);
-      if (!filename.startsWith("main.") && !filename.startsWith("index.")) {
+      if (!cleanId.includes("entry.client.tsx")) {
         return null;
       }
 
@@ -49,21 +44,11 @@ export const upstartEditor = createUnplugin<UpstartEditorPluginOptions>((options
         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");
+      const imports = `import { initUpstartEditor } from ${JSON.stringify(runtimePath)};`;
+      const injection = "requestIdleCallback(initUpstartEditor);";
 
       return {
-        code: `${injection}${code}`,
+        code: `${imports}${code}${injection}`,
         map: null,
       };
     },

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

@@ -33,39 +33,52 @@ function handleClick(event: MouseEvent): void {
     return;
   }
 
+  console.debug("[Upstart Editor] Click event:", event);
+
   const target = event.target as HTMLElement | null;
   if (!target) {
+    console.warn("[Upstart Editor] Click target is not an HTMLElement");
     return;
   }
 
+  const activeLink = target.closest("a[data-upstart-editor-active]");
+  const isFormControlClick = Boolean(
+    (target as HTMLElement | null)?.closest("input, textarea, select, button"),
+  );
+  if (activeLink || !isFormControlClick) {
+    event.preventDefault();
+  }
+
   if (target.closest("[contenteditable='true']")) {
+    console.info("[Upstart Editor] Click ignored: target is inside a contenteditable element");
     return;
   }
 
-  const component = target.closest<HTMLElement>("[data-upstart-component]");
-  if (!component) {
+  const element = target.closest<HTMLElement>("[data-upstart-hash]");
+  // const i18nKey = target.closest<HTMLElement>("[data-upstart-i18n]");
+
+  if (!element) {
+    console.info("[Upstart Editor] Click ignored: no ancestral element with data-upstart-hash found");
     return;
   }
 
-  event.preventDefault();
   event.stopPropagation();
 
-  const hash = component.dataset.upstartHash;
-  const componentName = component.dataset.upstartComponent;
-  const filePath = component.dataset.upstartFile ?? "";
-
-  if (!hash || !componentName) {
-    return;
-  }
+  console.log("Element clicked dataset:", element.dataset);
 
-  const rect = component.getBoundingClientRect();
+  const hash = element.dataset.upstartHash as string;
+  const componentName = element.dataset.upstartComponent;
+  const filePath = element.dataset.upstartFile ?? "";
+  const classNameId = element.dataset.upstartClassnameId ?? "";
+  const rect = element.getBoundingClientRect();
 
   sendToParent({
     type: "element-clicked",
     hash,
     componentName,
     filePath,
-    currentClassName: component.className,
+    classNameId,
+    currentClassName: element.className,
     bounds: {
       top: rect.top,
       left: rect.left,

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

@@ -0,0 +1,12 @@
+import { sendToParent } from "./utils.js";
+
+export function initErrorHandler() {
+  // Global error handler for uncaught errors in the editor
+  window.addEventListener("error", (event) => {
+    console.error("[Upstart Editor] Uncaught error in editor:", event.error);
+    sendToParent({
+      type: "editor-error",
+      error: event.error,
+    });
+  });
+}

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

@@ -49,7 +49,7 @@ function handleMouseOver(event: MouseEvent): void {
   }
 
   const component = target.closest<HTMLElement>("[data-upstart-component]");
-  if (!component) {
+  if (!component || component.dataset.upstartEditorActive) {
     return;
   }
 

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

@@ -1,6 +1,7 @@
 import { initClickHandler } from "./click-handler.js";
 import { initHoverOverlay, hideOverlays } from "./hover-overlay.js";
-import { initTextEditor, destroyAllActiveEditors } from "./text-editor.js";
+import { initErrorHandler } from "./error-handler.js";
+import { initTextEditor, activateAllEditors, destroyAllActiveEditors } from "./text-editor.js";
 import { sendToParent } from "./utils.js";
 import type { EditorMode, UpstartParentMessage } from "./types.js";
 
@@ -19,7 +20,7 @@ export function getCurrentMode(): EditorMode {
  */
 export function setMode(mode: EditorMode): void {
   currentMode = mode;
-
+  console.log(`[Upstart Editor] Setting mode to: ${mode}`);
   if (mode === "edit") {
     enableEditMode();
   } else {
@@ -32,17 +33,18 @@ export function setMode(mode: EditorMode): void {
  */
 export function initUpstartEditor(): void {
   if (typeof window === "undefined") {
+    console.warn("[Upstart Editor] Cannot initialize editor: not running in a browser environment");
     return;
   }
 
   if (isInitialized) {
+    console.log("[Upstart Editor] Editor is already initialized");
     return;
   }
 
   try {
     console.log("[Upstart Editor] Initializing...");
 
-    currentMode = "preview";
     isInitialized = true;
 
     window.addEventListener("message", handleParentMessage);
@@ -50,6 +52,7 @@ export function initUpstartEditor(): void {
     initTextEditor();
     initClickHandler();
     initHoverOverlay();
+    initErrorHandler();
 
     sendToParent({ type: "editor-ready" });
   } catch (error) {
@@ -61,20 +64,50 @@ export function initUpstartEditor(): void {
   }
 }
 
+const ALLOWED_ORIGINS = ["http://localhost:8080", /upstart.gg$/];
+
+const matchAllowedOrigins = (origin: string) => {
+  return ALLOWED_ORIGINS.some((allowedOrigin) => {
+    if (typeof allowedOrigin === "string") {
+      return origin === allowedOrigin;
+    } else if (allowedOrigin instanceof RegExp) {
+      return allowedOrigin.test(origin);
+    }
+    return false;
+  });
+};
+
 function handleParentMessage(event: MessageEvent): void {
   const message = event.data as UpstartParentMessage | undefined;
 
-  if (!message || message.source !== "upstart-editor-parent") {
+  console.log("[Upstart Editor] Received message from parent:", { event, message });
+
+  if (!message || !matchAllowedOrigins(event.origin)) {
+    console.warn("[Upstart Editor] Ignoring message from unknown source:", event.origin);
     return;
   }
 
   if (message.type === "set-mode") {
-    setMode(message.mode);
+    console.log("Setting editor mode to:", message.mode);
+    if ("scheduler" in globalThis) {
+      // @ts-expect-error not yet in TS types
+      globalThis.scheduler.postTask(
+        () => {
+          setMode(message.mode);
+        },
+        { delay: 250, priority: "background" },
+      );
+    } else {
+      setTimeout(() => {
+        setMode(message.mode);
+      }, 250);
+    }
   }
 }
 
 function enableEditMode(): void {
   console.log("[Upstart Editor] Edit mode enabled");
+  activateAllEditors();
 }
 
 function disableEditMode(): void {
@@ -85,6 +118,7 @@ function disableEditMode(): void {
 
 export { initTextEditor } from "./text-editor.js";
 export { initClickHandler } from "./click-handler.js";
+export { initErrorHandler } from "./error-handler.js";
 export { initHoverOverlay } from "./hover-overlay.js";
 export { sendToParent } from "./utils.js";
 export type { EditorMessage, UpstartEditorMessage } from "./types.js";