@promakeai/inspector 0.2.1 → 1.0.0

package/src/utils/errorTracker.ts

@@ -0,0 +1,186 @@
+/**
+ * Error Tracker - Captures and reports all types of errors
+ */
+
+export interface ErrorData {
+  type: "javascript" | "promise" | "console" | "vite";
+  message: string;
+  stack?: string;
+  fileName?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+  frame?: string;
+  plugin?: string;
+}
+
+export type ErrorCallback = (error: ErrorData) => void;
+
+export class ErrorTracker {
+  private callback: ErrorCallback;
+  private viteObserver: MutationObserver | null = null;
+
+  constructor(callback: ErrorCallback) {
+    this.callback = callback;
+  }
+
+  /**
+   * Start tracking all error types
+   */
+  start() {
+    this.trackJavaScriptErrors();
+    this.trackPromiseRejections();
+    this.trackConsoleErrors();
+    this.trackViteErrors();
+  }
+
+  /**
+   * Stop tracking all errors
+   */
+  stop() {
+    // Note: Can't remove window.onerror/onunhandledrejection once set
+    // But can stop Vite observer
+    if (this.viteObserver) {
+      this.viteObserver.disconnect();
+      this.viteObserver = null;
+    }
+  }
+
+  /**
+   * Track JavaScript runtime errors
+   */
+  private trackJavaScriptErrors() {
+    window.addEventListener("error", (event) => {
+      // Ignore errors from inspector itself
+      if (
+        event.filename?.includes("inspector") ||
+        event.error?.stack?.includes("inspector")
+      ) {
+        return;
+      }
+
+      this.callback({
+        type: "javascript",
+        message: event.message,
+        stack: event.error?.stack,
+        fileName: event.filename,
+        lineNumber: event.lineno,
+        columnNumber: event.colno,
+      });
+    });
+  }
+
+  /**
+   * Track unhandled promise rejections
+   */
+  private trackPromiseRejections() {
+    window.addEventListener("unhandledrejection", (event) => {
+      const error = event.reason;
+
+      this.callback({
+        type: "promise",
+        message: error?.message || String(event.reason),
+        stack: error?.stack,
+        fileName: error?.fileName,
+        lineNumber: error?.lineNumber,
+        columnNumber: error?.columnNumber,
+      });
+    });
+  }
+
+  /**
+   * Track console.error calls
+   */
+  private trackConsoleErrors() {
+    const originalError = console.error;
+
+    console.error = (...args: any[]) => {
+      // Call original console.error
+      originalError.apply(console, args);
+
+      // Extract error info
+      const message = args
+        .map((arg) =>
+          typeof arg === "object" ? JSON.stringify(arg) : String(arg)
+        )
+        .join(" ");
+
+      // Check if first arg is an Error object
+      const errorObj = args.find((arg) => arg instanceof Error);
+
+      this.callback({
+        type: "console",
+        message,
+        stack: errorObj?.stack,
+        fileName: (errorObj as any)?.fileName,
+        lineNumber: (errorObj as any)?.lineNumber,
+        columnNumber: (errorObj as any)?.columnNumber,
+      });
+    };
+  }
+
+  /**
+   * Track Vite dev server errors
+   */
+  private trackViteErrors() {
+    // Watch for Vite error overlay
+    this.viteObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === 1) {
+            const element = node as Element;
+
+            // Check if it's Vite error overlay
+            if (element.tagName === "VITE-ERROR-OVERLAY") {
+              this.parseViteError(element);
+            }
+          }
+        });
+      });
+    });
+
+    this.viteObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  /**
+   * Parse Vite error overlay content
+   */
+  private parseViteError(overlay: Element) {
+    try {
+      // Access shadow DOM
+      const shadowRoot = overlay.shadowRoot;
+      if (!shadowRoot) return;
+
+      // Extract error message
+      const messageEl = shadowRoot.querySelector(".message-body");
+      const message = messageEl?.textContent?.trim() || "Vite error";
+
+      // Extract file info
+      const fileEl = shadowRoot.querySelector(".file");
+      const fileText = fileEl?.textContent?.trim() || "";
+      const fileMatch = fileText.match(/(.+):(\d+):(\d+)/);
+
+      // Extract code frame
+      const frameEl = shadowRoot.querySelector(".frame");
+      const frame = frameEl?.textContent?.trim();
+
+      // Extract plugin name if available
+      const pluginEl = shadowRoot.querySelector(".plugin");
+      const plugin = pluginEl?.textContent?.trim();
+
+      this.callback({
+        type: "vite",
+        message,
+        fileName: fileMatch?.[1],
+        lineNumber: fileMatch?.[2] ? parseInt(fileMatch[2]) : undefined,
+        columnNumber: fileMatch?.[3] ? parseInt(fileMatch[3]) : undefined,
+        frame,
+        plugin,
+      });
+    } catch (error) {
+      console.error("Failed to parse Vite error:", error);
+    }
+  }
+}

package/src/utils/inputStyles.ts

@@ -0,0 +1,30 @@
+/**
+ * Central input styling utilities
+ */
+
+import type { InspectorTheme } from "@promakeai/inspector-types";
+
+export const getInputContainerStyles = (theme: InspectorTheme) => ({
+  backgroundColor: theme.inputBackgroundColor,
+  borderColor: theme.inputBorderColor,
+});
+
+export const getInputStyles = (theme: InspectorTheme) => ({
+  backgroundColor: "transparent",
+  color: theme.inputTextColor,
+});
+
+export const getLabelStyles = (theme: InspectorTheme) => ({
+  color: theme.secondaryTextColor,
+});
+
+export const getSectionTitleStyles = (theme: InspectorTheme) => ({
+  color: theme.textColor,
+});
+
+// Common class names for consistent sizing
+export const INPUT_CONTAINER_CLASSES = "rounded-lg px-2 py-1 shadow-sm border";
+export const INPUT_CLASSES = "text-xs border-none shadow-none focus-visible:ring-0 focus-visible:outline-none h-7 px-1.5";
+export const LABEL_CLASSES = "block text-xs mb-1";
+export const SECTION_TITLE_CLASSES = "text-sm font-semibold mb-2";
+

package/src/utils/styleUtils.ts

@@ -0,0 +1,226 @@
+/**
+ * Style utility functions for parsing and converting styles
+ */
+
+import type { StyleChanges } from "@promakeai/inspector-types";
+
+/**
+ * Normalize font family to one of our supported values
+ */
+function normalizeFontFamily(fontFamily: string): string {
+  const lower = fontFamily.toLowerCase();
+  if (
+    lower.includes("monospace") ||
+    lower.includes("courier") ||
+    lower.includes("consolas")
+  ) {
+    return "monospace";
+  }
+  if (lower.includes("serif") || lower.includes("times")) {
+    return "serif";
+  }
+  return "sans-serif"; // default
+}
+
+/**
+ * Get element's own styles (inline + className styles) for input prefill
+ * Returns only explicitly defined styles, not inherited/computed defaults
+ */
+export function getElementOwnStyles(element: HTMLElement): StyleChanges {
+  const computed = window.getComputedStyle(element);
+
+  // Get inline styles if present, otherwise use computed from classNames
+  return {
+    // Layout
+    backgroundColor: element.style.backgroundColor || computed.backgroundColor,
+    height:
+      element.style.height ||
+      (computed.height !== "auto" ? computed.height : ""),
+    width:
+      element.style.width || (computed.width !== "auto" ? computed.width : ""),
+    display: element.style.display || computed.display,
+    opacity: element.style.opacity || computed.opacity,
+    flex: element.style.flex || computed.flex,
+    flexDirection: element.style.flexDirection || computed.flexDirection,
+    justifyContent: element.style.justifyContent || computed.justifyContent,
+    alignItems: element.style.alignItems || computed.alignItems,
+
+    // Image
+    objectFit: element.style.objectFit || computed.objectFit,
+
+    // Text
+    color: element.style.color || computed.color,
+    fontSize: element.style.fontSize || computed.fontSize,
+    fontWeight: element.style.fontWeight || computed.fontWeight,
+    fontFamily:
+      element.style.fontFamily || normalizeFontFamily(computed.fontFamily),
+    textAlign: element.style.textAlign || computed.textAlign,
+    textDecoration: element.style.textDecoration || computed.textDecoration,
+
+    // Border
+    borderRadius: element.style.borderRadius || computed.borderRadius,
+    borderWidth: element.style.borderWidth || computed.borderWidth,
+    borderColor: element.style.borderColor || computed.borderColor,
+    borderStyle: element.style.borderStyle || computed.borderStyle,
+
+    // Spacing - Vertical/Horizontal (combined)
+    paddingVertical: element.style.paddingTop || computed.paddingTop,
+    paddingHorizontal: element.style.paddingLeft || computed.paddingLeft,
+    marginVertical: element.style.marginTop || computed.marginTop,
+    marginHorizontal: element.style.marginLeft || computed.marginLeft,
+
+    // Spacing - Individual sides
+    paddingTop: element.style.paddingTop || computed.paddingTop,
+    paddingRight: element.style.paddingRight || computed.paddingRight,
+    paddingBottom: element.style.paddingBottom || computed.paddingBottom,
+    paddingLeft: element.style.paddingLeft || computed.paddingLeft,
+    marginTop: element.style.marginTop || computed.marginTop,
+    marginRight: element.style.marginRight || computed.marginRight,
+    marginBottom: element.style.marginBottom || computed.marginBottom,
+    marginLeft: element.style.marginLeft || computed.marginLeft,
+  };
+}
+
+/**
+ * Convert StyleChanges to inline style object for React
+ * All values include !important flag for maximum specificity
+ */
+export function convertToInlineStyle(
+  styles: StyleChanges
+): Record<string, string> {
+  const inlineStyle: Record<string, string> = {};
+
+  // Helper to add !important to value
+  const withImportant = (value: string) => `${value} !important`;
+
+  // Layout
+  if (styles.backgroundColor)
+    inlineStyle.backgroundColor = withImportant(styles.backgroundColor);
+  if (styles.height && parseFloat(styles.height) > 0)
+    inlineStyle.height = withImportant(styles.height);
+  if (styles.width && parseFloat(styles.width) > 0)
+    inlineStyle.width = withImportant(styles.width);
+  if (styles.display) inlineStyle.display = withImportant(styles.display);
+  if (styles.opacity) inlineStyle.opacity = withImportant(styles.opacity);
+  if (styles.flex) inlineStyle.flex = withImportant(styles.flex);
+  if (styles.flexDirection)
+    inlineStyle.flexDirection = withImportant(styles.flexDirection);
+  if (styles.justifyContent)
+    inlineStyle.justifyContent = withImportant(styles.justifyContent);
+  if (styles.alignItems)
+    inlineStyle.alignItems = withImportant(styles.alignItems);
+
+  // Image
+  if (styles.objectFit) inlineStyle.objectFit = withImportant(styles.objectFit);
+
+  // Text
+  if (styles.color) inlineStyle.color = withImportant(styles.color);
+  if (styles.fontSize) inlineStyle.fontSize = withImportant(styles.fontSize);
+  if (styles.fontWeight)
+    inlineStyle.fontWeight = withImportant(styles.fontWeight);
+  if (styles.fontFamily)
+    inlineStyle.fontFamily = withImportant(styles.fontFamily);
+  if (styles.textAlign) inlineStyle.textAlign = withImportant(styles.textAlign);
+  if (styles.textDecoration)
+    inlineStyle.textDecoration = withImportant(styles.textDecoration);
+
+  // Border
+  if (styles.borderRadius)
+    inlineStyle.borderRadius = withImportant(styles.borderRadius);
+  if (styles.borderWidth && styles.borderColor) {
+    inlineStyle.border = withImportant(
+      `${styles.borderWidth} ${styles.borderStyle || "solid"} ${
+        styles.borderColor
+      }`
+    );
+  }
+
+  // Spacing - handle both combined and individual properties
+  // Check if individual sides are set
+  if (
+    styles.paddingTop ||
+    styles.paddingRight ||
+    styles.paddingBottom ||
+    styles.paddingLeft
+  ) {
+    inlineStyle.paddingTop = withImportant(styles.paddingTop || "0");
+    inlineStyle.paddingRight = withImportant(styles.paddingRight || "0");
+    inlineStyle.paddingBottom = withImportant(styles.paddingBottom || "0");
+    inlineStyle.paddingLeft = withImportant(styles.paddingLeft || "0");
+  } else if (styles.paddingVertical || styles.paddingHorizontal) {
+    const v = styles.paddingVertical || "0";
+    const h = styles.paddingHorizontal || "0";
+    inlineStyle.padding = withImportant(`${v} ${h}`);
+  }
+
+  if (
+    styles.marginTop ||
+    styles.marginRight ||
+    styles.marginBottom ||
+    styles.marginLeft
+  ) {
+    inlineStyle.marginTop = withImportant(styles.marginTop || "0");
+    inlineStyle.marginRight = withImportant(styles.marginRight || "0");
+    inlineStyle.marginBottom = withImportant(styles.marginBottom || "0");
+    inlineStyle.marginLeft = withImportant(styles.marginLeft || "0");
+  } else if (styles.marginVertical || styles.marginHorizontal) {
+    const v = styles.marginVertical || "0";
+    const h = styles.marginHorizontal || "0";
+    inlineStyle.margin = withImportant(`${v} ${h}`);
+  }
+
+  return inlineStyle;
+}
+
+/**
+ * Parse pixel value from string
+ */
+export function parsePixelValue(value: string): number {
+  const match = value.match(/^(\d+(?:\.\d+)?)px$/);
+  return match ? parseFloat(match[1]) : 0;
+}
+
+/**
+ * Format number to pixel string
+ */
+export function toPixelString(value: number): string {
+  return `${value}px`;
+}
+
+/**
+ * Map StyleChanges property names to CSS property names for removeProperty()
+ */
+export const stylePropToCSSProp: Record<keyof StyleChanges, string> = {
+  backgroundColor: "background-color",
+  height: "height",
+  width: "width",
+  display: "display",
+  opacity: "opacity",
+  flex: "flex",
+  flexDirection: "flex-direction",
+  justifyContent: "justify-content",
+  alignItems: "align-items",
+  objectFit: "object-fit",
+  color: "color",
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  fontFamily: "font-family",
+  textAlign: "text-align",
+  textDecoration: "text-decoration",
+  borderRadius: "border-radius",
+  borderWidth: "border-width",
+  borderColor: "border-color",
+  borderStyle: "border-style",
+  paddingVertical: "padding-top",
+  paddingHorizontal: "padding-left",
+  marginVertical: "margin-top",
+  marginHorizontal: "margin-left",
+  paddingTop: "padding-top",
+  paddingRight: "padding-right",
+  paddingBottom: "padding-bottom",
+  paddingLeft: "padding-left",
+  marginTop: "margin-top",
+  marginRight: "margin-right",
+  marginBottom: "margin-bottom",
+  marginLeft: "margin-left",
+};