fixdog 0.0.1

package/src/sidebar-initializer.ts

@@ -0,0 +1,171 @@
+/**
+ * Sidebar initializer - mounts the UiDog sidebar in a shadow DOM for style isolation
+ */
+
+import { createRoot, Root } from "react-dom/client";
+import { createElement } from "react";
+import { UiDogSidebarReact } from "./components/UiDogSidebarReact";
+import sidebarStyles from "./styles/sidebarStyles";
+import type { ElementInfo, SidebarConfig } from "./types";
+
+let sidebarRoot: Root | null = null;
+let sidebarContainer: HTMLElement | null = null;
+let shadowRoot: ShadowRoot | null = null;
+let config: SidebarConfig = { apiEndpoint: "https://api.ui.dog" };
+
+// Current sidebar state
+let currentState: {
+  isOpen: boolean;
+  elementInfo: ElementInfo | null;
+  editorUrl: string;
+} = {
+  isOpen: false,
+  elementInfo: null,
+  editorUrl: "",
+};
+
+/**
+ * Initialize the sidebar with configuration
+ */
+export function initializeSidebar(sidebarConfig: SidebarConfig): void {
+  if (typeof window === "undefined") return;
+
+  config = sidebarConfig;
+
+  // Check if already initialized
+  if (document.getElementById("uidog-next-sidebar-root")) {
+    return;
+  }
+
+  // Create container
+  sidebarContainer = document.createElement("div");
+  sidebarContainer.id = "uidog-next-sidebar-root";
+  document.body.appendChild(sidebarContainer);
+
+  // Create shadow DOM for style isolation
+  shadowRoot = sidebarContainer.attachShadow({ mode: "open" });
+
+  // Inject styles
+  const styleElement = document.createElement("style");
+  styleElement.textContent = sidebarStyles;
+  shadowRoot.appendChild(styleElement);
+
+  // Create mount point
+  const mountPoint = document.createElement("div");
+  mountPoint.id = "uidog-sidebar-mount";
+  shadowRoot.appendChild(mountPoint);
+
+  // Create React root
+  sidebarRoot = createRoot(mountPoint);
+
+  // Initial render (empty)
+  render();
+}
+
+/**
+ * Render the sidebar based on current state
+ */
+function render(): void {
+  if (!sidebarRoot) return;
+
+  const { isOpen, elementInfo, editorUrl } = currentState;
+
+  if (!isOpen || !elementInfo) {
+    sidebarRoot.render(null);
+    return;
+  }
+
+  sidebarRoot.render(
+    createElement(UiDogSidebarReact, {
+      elementInfo,
+      editorUrl,
+      onClose: closeSidebar,
+      apiEndpoint: config.apiEndpoint,
+    })
+  );
+}
+
+/**
+ * Open the sidebar with element information
+ */
+export function openSidebar(elementInfo: ElementInfo, editorUrl: string): void {
+  currentState = {
+    isOpen: true,
+    elementInfo,
+    editorUrl,
+  };
+
+  // Update global state for debugging
+  if (typeof window !== "undefined") {
+    window.__UIDOG_SIDEBAR__ = {
+      isOpen: true,
+      elementInfo,
+      editorUrl,
+    };
+  }
+
+  render();
+}
+
+/**
+ * Close the sidebar
+ */
+export function closeSidebar(): void {
+  currentState = {
+    isOpen: false,
+    elementInfo: null,
+    editorUrl: "",
+  };
+
+  // Update global state
+  if (typeof window !== "undefined") {
+    window.__UIDOG_SIDEBAR__ = {
+      isOpen: false,
+      elementInfo: null,
+      editorUrl: null,
+    };
+  }
+
+  render();
+}
+
+/**
+ * Check if the sidebar is currently open
+ */
+export function isSidebarOpen(): boolean {
+  return currentState.isOpen;
+}
+
+/**
+ * Get current sidebar state
+ */
+export function getSidebarState(): typeof currentState {
+  return { ...currentState };
+}
+
+/**
+ * Cleanup sidebar (for testing or unmounting)
+ */
+export function cleanupSidebar(): void {
+  if (sidebarRoot) {
+    sidebarRoot.unmount();
+    sidebarRoot = null;
+  }
+
+  if (sidebarContainer && sidebarContainer.parentNode) {
+    sidebarContainer.parentNode.removeChild(sidebarContainer);
+    sidebarContainer = null;
+  }
+
+  shadowRoot = null;
+
+  currentState = {
+    isOpen: false,
+    elementInfo: null,
+    editorUrl: "",
+  };
+
+  if (typeof window !== "undefined") {
+    delete window.__UIDOG_SIDEBAR__;
+  }
+}

package/src/source-resolver.ts

@@ -0,0 +1,121 @@
+/**
+ * Source resolver - builds editor URLs from source location information
+ */
+
+import type { SourceLocation, EditorType } from "./types";
+
+const EDITOR_SCHEMES: Record<EditorType, string> = {
+  vscode: "vscode://file/{path}:{line}:{column}",
+  "vscode-insiders": "vscode-insiders://file/{path}:{line}:{column}",
+  cursor: "cursor://file/{path}:{line}:{column}",
+  webstorm: "webstorm://open?file={path}&line={line}&column={column}",
+  atom: "atom://core/open/file?filename={path}&line={line}&column={column}",
+  sublime: "subl://open?url=file://{path}&line={line}&column={column}",
+};
+
+/**
+ * Build an editor URL from source location information
+ */
+export function buildEditorUrl(
+  source: SourceLocation,
+  editor: EditorType = "cursor",
+  projectPath: string = ""
+): string {
+  const template = EDITOR_SCHEMES[editor] || EDITOR_SCHEMES.cursor;
+
+  // Normalize and build full path
+  let fullPath = normalizeFileName(source.fileName);
+
+  // If path is relative and we have a project path, make it absolute
+  if (projectPath && !fullPath.startsWith("/")) {
+    const normalizedProjectPath = projectPath.endsWith("/")
+      ? projectPath.slice(0, -1)
+      : projectPath;
+    fullPath = `${normalizedProjectPath}/${fullPath}`;
+  }
+
+  return template
+    .replace("{path}", fullPath)
+    .replace("{line}", String(source.lineNumber || 1))
+    .replace("{column}", String(source.columnNumber || 1));
+}
+
+/**
+ * Normalize file name by removing bundler prefixes and query strings
+ */
+export function normalizeFileName(fileName: string): string {
+  if (!fileName) return "";
+
+  let normalized = fileName;
+
+  // Remove common bundler prefixes
+  const prefixPatterns = [
+    /^webpack:\/\/[^/]*\//,
+    /^webpack-internal:\/\/\//,
+    /^file:\/\//,
+    /^about:react/,
+    /^\.\//,
+    /^https?:\/\/localhost:\d+\//,
+    /^https?:\/\/[^/]+\/@fs\//,
+    /^https?:\/\/[^/]+\//,
+    /^\/@fs\//,
+    /^@fs\//,
+  ];
+
+  for (const pattern of prefixPatterns) {
+    normalized = normalized.replace(pattern, "");
+  }
+
+  // Remove query strings and hash fragments
+  normalized = normalized.split("?")[0].split("#")[0];
+
+  // Remove leading slashes if duplicated
+  normalized = normalized.replace(/^\/+/, "/");
+
+  return normalized;
+}
+
+/**
+ * Check if a file name represents actual source code (not bundled/internal)
+ */
+export function isSourceFile(fileName: string): boolean {
+  if (!fileName) return false;
+
+  const normalized = normalizeFileName(fileName);
+
+  // Exclude patterns
+  const excludePatterns = [
+    /node_modules/,
+    /react-dom/,
+    /^react\//,
+    /\.next\//,
+    /_next\//,
+    /webpack/,
+    /@vite\//,
+    /vite\/client/,
+    /\[eval\]/,
+    /<anonymous>/,
+  ];
+
+  for (const pattern of excludePatterns) {
+    if (pattern.test(normalized)) {
+      return false;
+    }
+  }
+
+  // Include patterns (common source file extensions)
+  const includeExtensions = [".tsx", ".ts", ".jsx", ".js", ".mjs", ".cjs"];
+
+  return includeExtensions.some((ext) =>
+    normalized.toLowerCase().endsWith(ext)
+  );
+}
+
+/**
+ * Get the file name without path for display
+ */
+export function getShortFileName(filePath: string): string {
+  const normalized = normalizeFileName(filePath);
+  const parts = normalized.split("/");
+  return parts[parts.length - 1] || normalized;
+}