fixdog 0.0.1 → 0.0.2

package/src/instrument.ts

@@ -1,171 +0,0 @@
-/**
- * Bippy instrumentation setup for React fiber inspection
- *
- * Bippy hooks into React's DevTools API (window.__REACT_DEVTOOLS_GLOBAL_HOOK__)
- * to intercept fiber tree data and extract source location information.
- */
-
-import {
-  instrument,
-  secure,
-  isCompositeFiber,
-  isHostFiber,
-  traverseFiber,
-  getDisplayName,
-  getFiberFromHostInstance,
-} from "bippy";
-import { getSource } from "bippy/source";
-import type { SourceLocation } from "./types";
-
-let isInstrumented = false;
-
-/**
- * Setup Bippy instrumentation to hook into React's internals
- * This must be called BEFORE React loads (via instrumentation-client.ts)
- */
-export function setupBippyInstrumentation(): void {
-  if (isInstrumented) return;
-  if (typeof window === "undefined") return;
-
-  isInstrumented = true;
-
-  instrument(
-    secure({
-      onCommitFiberRoot: (_rendererID, _fiberRoot) => {
-        // Called when React commits a render
-        // We can use this for additional tracking if needed
-      },
-    })
-  );
-}
-
-/**
- * Get source location from a DOM element by traversing its React fiber
- */
-export async function getSourceFromElement(
-  element: Element
-): Promise<SourceLocation | null> {
-  try {
-    // Get the fiber associated with this DOM element
-    const fiber = getFiberFromHostInstance(element);
-
-    if (!fiber) {
-      return null;
-    }
-
-    // Try to get source from the fiber
-    const source = await getSource(fiber);
-
-    if (source && source.fileName) {
-      // Filter out node_modules and internal files
-      if (
-        source.fileName.includes("node_modules") ||
-        source.fileName.includes("react-dom") ||
-        source.fileName.includes("react/")
-      ) {
-        // Try parent fibers to find user code
-        return await findUserSourceFromFiber(fiber);
-      }
-
-      return {
-        fileName: source.fileName,
-        lineNumber: source.lineNumber ?? 1,
-        columnNumber: source.columnNumber ?? 1,
-        functionName: source.functionName ?? undefined,
-      };
-    }
-
-    // Fallback: traverse up the fiber tree to find source
-    return await findUserSourceFromFiber(fiber);
-  } catch (error) {
-    console.warn("[UiDog Next] Error getting source from element:", error);
-    return null;
-  }
-}
-
-/**
- * Traverse up the fiber tree to find the first user-code source
- */
-async function findUserSourceFromFiber(
-  startFiber: any
-): Promise<SourceLocation | null> {
-  let result: SourceLocation | null = null;
-
-  // Traverse upward through the fiber tree
-  traverseFiber(
-    startFiber,
-    async (fiber) => {
-      // Only check composite fibers (components, not host elements)
-      if (isCompositeFiber(fiber)) {
-        try {
-          const source = await getSource(fiber);
-
-          if (source && source.fileName) {
-            // Skip internal/library code
-            if (
-              !source.fileName.includes("node_modules") &&
-              !source.fileName.includes("react-dom") &&
-              !source.fileName.includes("react/")
-            ) {
-              result = {
-                fileName: source.fileName,
-                lineNumber: source.lineNumber ?? 1,
-                columnNumber: source.columnNumber ?? 1,
-                functionName: source.functionName ?? getDisplayName(fiber) ?? undefined,
-              };
-              return true; // Stop traversal
-            }
-          }
-        } catch {
-          // Continue to next fiber
-        }
-      }
-      return false; // Continue traversal
-    },
-    true // Traverse upward (toward root)
-  );
-
-  return result;
-}
-
-/**
- * Get component name from a fiber
- */
-export function getComponentNameFromFiber(fiber: any): string {
-  if (!fiber) return "Unknown";
-
-  // Try to get display name directly
-  const displayName = getDisplayName(fiber);
-  if (displayName && displayName !== "Unknown") {
-    return displayName;
-  }
-
-  // Traverse up to find the nearest named component
-  let componentName = "Unknown";
-
-  traverseFiber(
-    fiber,
-    (f) => {
-      if (isCompositeFiber(f)) {
-        const name = getDisplayName(f);
-        if (name && name !== "Unknown") {
-          componentName = name;
-          return true; // Stop traversal
-        }
-      }
-      return false;
-    },
-    true // Traverse upward
-  );
-
-  return componentName;
-}
-
-// Re-export useful bippy utilities
-export {
-  isCompositeFiber,
-  isHostFiber,
-  traverseFiber,
-  getDisplayName,
-  getFiberFromHostInstance,
-};

package/src/sidebar-initializer.ts

@@ -1,171 +0,0 @@
-/**
- * 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

@@ -1,121 +0,0 @@
-/**
- * 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;
-}