Development Tools

/**
 * Current Vue version string
 */
const version: string;

import { version } from "vue";

console.log(`Vue version: ${version}`); // "3.5.21"

// Check version programmatically
const [major, minor, patch] = version.split('.').map(Number);
if (major >= 3 && minor >= 5) {
  console.log('Using Vue 3.5+');
}

/**
 * Emit development warning (development builds only)
 * @param msg - Warning message
 * @param instance - Component instance context
 */
function warn(msg: string, instance?: ComponentInternalInstance | null): void;

import { warn, getCurrentInstance } from "vue";

// In a composable or component
function useCustomHook(value: unknown) {
  const instance = getCurrentInstance();
  
  if (__DEV__) {
    if (typeof value !== 'string') {
      warn(
        `Expected string value, got ${typeof value}`,
        instance
      );
    }
  }
  
  return processValue(value);
}

/**
 * DevTools integration object
 */
interface DevtoolsApi {
  /**
   * Whether DevTools is available
   */
  readonly enabled: boolean;
  
  /**
   * Emit custom event to DevTools
   */
  emit(event: string, ...args: any[]): void;
  
  /**
   * Add custom inspector
   */
  addInspector(options: CustomInspectorOptions): void;
  
  /**
   * Send inspector state
   */
  sendInspectorState(inspectorId: string): void;
  
  /**
   * Add timeline event
   */
  addTimelineEvent(options: TimelineEventOptions): void;
}

/**
 * Global DevTools instance (development only)
 */
declare const __VUE_DEVTOOLS_GLOBAL_HOOK__: {
  Vue?: any;
  emit(event: string, ...args: any[]): void;
};

import { getCurrentInstance, nextTick } from "vue";

// Custom DevTools inspector
if (__DEV__ && typeof window !== 'undefined') {
  const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
  
  if (devtools) {
    devtools.emit('vuex:init', store);
    
    // Add custom timeline events
    devtools.addTimelineEvent({
      layerId: 'custom-layer',
      event: {
        time: Date.now(),
        title: 'Custom Event',
        data: { key: 'value' }
      }
    });
  }
}

/**
 * Get component instance from DOM element (development only)
 * @param element - DOM element
 * @returns Component instance or null
 */
function getComponentFromElement(element: Element): ComponentInternalInstance | null;

/**
 * Get all component instances (development only)
 * @returns Array of all active component instances  
 */
function getAllComponents(): ComponentInternalInstance[];

// In browser console (development mode)
if (__DEV__) {
  // Get component from DOM element
  const element = document.querySelector('#my-component');
  const instance = getComponentFromElement(element);
  
  if (instance) {
    console.log('Props:', instance.props);
    console.log('State:', instance.setupState);
    console.log('Refs:', instance.refs);
  }
  
  // List all components
  const allComponents = getAllComponents();
  console.log(`Total components: ${allComponents.length}`);
}

/**
 * Enable/disable reactivity tracking (development only)
 * @param enabled - Whether to enable tracking
 */
function enableTracking(enabled?: boolean): void;

/**
 * Pause reactivity tracking temporarily (development only)
 */
function pauseTracking(): void;

/**
 * Reset tracking state (development only) 
 */
function resetTracking(): void;

/**
 * Track reactive dependencies for debugging (development only)
 * @param fn - Function to track
 * @returns Dependency information
 */
function trackDependencies<T>(fn: () => T): {
  result: T;
  dependencies: Set<any>;
};

import { 
  ref, 
  computed, 
  enableTracking, 
  pauseTracking, 
  resetTracking 
} from "vue";

if (__DEV__) {
  const count = ref(0);
  const doubled = computed(() => {
    console.log('Computing doubled value');
    return count.value * 2;
  });
  
  // Disable tracking temporarily
  pauseTracking();
  count.value = 10; // Won't trigger computed
  resetTracking();
  
  // Re-enable tracking
  enableTracking();
  count.value = 20; // Will trigger computed
}

/**
 * Performance measurement utilities
 */
interface PerformanceInfo {
  /**
   * Component render time
   */
  renderTime: number;
  
  /**
   * Component update time
   */
  updateTime: number;
  
  /**
   * Total component lifecycle time
   */
  totalTime: number;
}

/**
 * Get performance info for component (development only)
 * @param instance - Component instance
 * @returns Performance information
 */
function getComponentPerformance(
  instance: ComponentInternalInstance
): PerformanceInfo | null;

import { getCurrentInstance, onMounted } from "vue";

export default defineComponent({
  setup() {
    const instance = getCurrentInstance();
    
    onMounted(() => {
      if (__DEV__ && instance) {
        const perfInfo = getComponentPerformance(instance);
        if (perfInfo) {
          console.log(`Render time: ${perfInfo.renderTime}ms`);
          console.log(`Update time: ${perfInfo.updateTime}ms`);
        }
      }
    });
    
    return {};
  }
});

/**
 * Development error with enhanced information
 */
interface VueDevError extends Error {
  /**
   * Component instance where error occurred
   */
  instance?: ComponentInternalInstance;
  
  /**
   * Component hierarchy path
   */
  componentStack?: string;
  
  /**
   * Error source information
   */
  source?: {
    file: string;
    line: number;
    column: number;
  };
}

/**
 * Enhanced error handler for development
 * @param error - Error object
 * @param instance - Component instance
 * @param info - Error context info
 */
type DevErrorHandler = (
  error: VueDevError,
  instance: ComponentInternalInstance | null,
  info: string
) => void;

import { createApp } from "vue";

const app = createApp(App);

if (__DEV__) {
  app.config.errorHandler = (error: VueDevError, instance, info) => {
    console.error('Vue Error:', error.message);
    console.error('Component:', instance?.type.name);
    console.error('Stack:', error.componentStack);
    console.error('Context:', info);
    
    // Send to error tracking service
    errorTracker.report({
      error: error.message,
      component: instance?.type.name,
      stack: error.stack,
      componentStack: error.componentStack,
      context: info
    });
  };
}

/**
 * Whether Vue is running in development mode
 */
const __DEV__: boolean;

/**
 * Configure development-specific behavior
 */
interface DevConfig {
  /**
   * Enable/disable warnings
   */
  silent: boolean;
  
  /**
   * Enable/disable DevTools
   */
  devtools: boolean;
  
  /**
   * Enable/disable performance tracking
   */
  performance: boolean;
  
  /**
   * Custom warning handler
   */
  warnHandler?: (msg: string, instance: ComponentInternalInstance | null, trace: string) => void;
  
  /**
   * Custom error handler
   */
  errorHandler?: DevErrorHandler;
}

import { createApp } from "vue";

const app = createApp(App);

// Development configuration
if (__DEV__) {
  app.config.devtools = true;
  app.config.performance = true;
  
  // Custom warning handler
  app.config.warnHandler = (msg, instance, trace) => {
    console.warn(`[Vue warn]: ${msg}`);
    if (instance) {
      console.warn(`Component: ${instance.type.name}`);
    }
    console.warn(trace);
  };
}

/**
 * Get component tree information (development only)
 * @param instance - Root component instance
 * @returns Component tree structure
 */
function getComponentTree(instance: ComponentInternalInstance): ComponentTreeNode;

interface ComponentTreeNode {
  name: string;
  type: string;
  props: Record<string, any>;
  children: ComponentTreeNode[];
  instance: ComponentInternalInstance;
}

/**
 * Find components by name (development only)
 * @param name - Component name to search for
 * @returns Array of matching component instances
 */
function findComponentsByName(name: string): ComponentInternalInstance[];

// In browser console (development mode)
if (__DEV__) {
  // Get component tree
  const rootInstance = app._instance;
  const tree = getComponentTree(rootInstance);
  console.log('Component tree:', tree);
  
  // Find specific components
  const buttons = findComponentsByName('Button');
  console.log(`Found ${buttons.length} Button components`);
}

/**
 * Development build flag
 */
declare const __DEV__: boolean;

/**
 * Component instance for debugging
 */
interface ComponentInternalInstance {
  uid: number;
  type: Component;
  parent: ComponentInternalInstance | null;
  root: ComponentInternalInstance;
  appContext: AppContext;
  props: Data;
  attrs: Data;
  slots: InternalSlots;
  refs: Data;
  setupState: Data;
  ctx: ComponentPublicInstance;
  emit: EmitFn;
  exposed: Record<string, any> | null;
}

/**
 * DevTools hook interface
 */
interface DevtoolsHook {
  Vue?: any;
  emit(event: string, ...args: any[]): void;
  on(event: string, handler: Function): void;
  off(event: string, handler: Function): void;
  apps: Map<number, any>;
}