@react-devtools-plus/kit 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,466 @@
+import { BirpcGroup, BirpcOptions, BirpcReturn } from "birpc";
+
+//#region src/core/timeline/index.d.ts
+interface TimelineEvent<TData = any> {
+  id: number;
+  time: number;
+  data: TData;
+  title?: string;
+  subtitle?: string;
+  groupId?: number | string;
+  logType?: 'default' | 'warning' | 'error';
+}
+interface TimelineLayer {
+  id: string;
+  label: string;
+  color: string;
+  enabled: boolean;
+}
+interface TimelineLayersState {
+  recordingState: boolean;
+  mouseEventEnabled: boolean;
+  keyboardEventEnabled: boolean;
+  componentEventEnabled: boolean;
+  performanceEventEnabled: boolean;
+  selected: string;
+}
+declare const TIMELINE_LAYERS: TimelineLayer[];
+type TimelineEventCallback = (layerId: string, event: TimelineEvent) => void;
+declare function onTimelineEvent(callback: TimelineEventCallback): () => void;
+declare function getTimelineState(): TimelineLayersState;
+declare function updateTimelineState(state: Partial<TimelineLayersState>): void;
+declare function clearTimeline(): void;
+declare function addComponentEvent(componentName: string, eventName: string, params?: any): void;
+declare function addPerformanceEvent(type: 'render' | 'mount' | 'update' | 'unmount' | 'patch' | 'init', componentName: string, measure: 'start' | 'end', duration?: number, groupKey?: string): void;
+declare function trackFiberPerformanceStart(fiber: FiberNode, type: 'render' | 'mount' | 'update'): void;
+declare function trackFiberPerformanceEnd(fiber: FiberNode, type: 'render' | 'mount' | 'update'): void;
+declare function installTimelineEventListeners(): void;
+//#endregion
+//#region src/types/index.d.ts
+interface FiberNode {
+  key: null | string;
+  elementType: any;
+  type: any;
+  stateNode: any;
+  child: FiberNode | null;
+  sibling: FiberNode | null;
+  return: FiberNode | null;
+  tag: number;
+  pendingProps: any;
+  memoizedProps: any;
+  memoizedState: any;
+  _debugSource?: {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+  };
+  _debugHookTypes?: string[];
+}
+interface FiberRoot {
+  current: FiberNode;
+  containerInfo?: any;
+}
+interface ComponentTreeNode {
+  id: string;
+  name: string;
+  children: ComponentTreeNode[];
+  meta?: {
+    tag: number;
+  };
+}
+/**
+ * Serializable prop value for display
+ */
+interface PropValue {
+  type: 'string' | 'number' | 'boolean' | 'null' | 'undefined' | 'object' | 'array' | 'function' | 'symbol' | 'element' | 'unknown';
+  value: string;
+  preview?: string;
+  /** For objects and arrays, contains the nested properties */
+  children?: Record<string, PropValue>;
+}
+/**
+ * Hook information extracted from fiber
+ */
+interface HookInfo {
+  name: string;
+  value: PropValue;
+  subHooks?: HookInfo[];
+}
+/**
+ * Parent component in the render chain
+ */
+interface RenderedByInfo {
+  id: string;
+  name: string;
+  tag?: number;
+}
+/**
+ * Source location information
+ */
+interface SourceInfo {
+  fileName: string;
+  lineNumber: number;
+  columnNumber: number;
+}
+/**
+ * Detailed component information for the inspector panel
+ */
+interface ComponentDetails {
+  id: string;
+  name: string;
+  tag?: number;
+  props: Record<string, PropValue>;
+  hooks: HookInfo[];
+  renderedBy: RenderedByInfo[];
+  source?: SourceInfo;
+  key?: string | null;
+}
+type TreeListener = (tree: ComponentTreeNode | null) => void;
+interface ReactDevToolsHook {
+  renderers: Map<number, any>;
+  supportsFiber: boolean;
+  inject: (renderer: any) => number;
+  onCommitFiberRoot: (rendererID: number, root: FiberRoot) => void;
+  onCommitFiberUnmount: (rendererID: number, fiber: FiberNode) => void;
+  getFiberRoots?: (rendererID: number) => Set<FiberRoot>;
+  sub?: (event: string, fn: (...args: any[]) => void) => () => void;
+}
+declare const REACT_TAGS: {
+  readonly FunctionComponent: 0;
+  readonly ClassComponent: 1;
+  readonly IndeterminateComponent: 2;
+  readonly HostRoot: 3;
+  readonly HostComponent: 5;
+  readonly HostText: 6;
+  readonly Fragment: 7;
+  readonly Mode: 8;
+  readonly ContextConsumer: 9;
+  readonly ContextProvider: 10;
+  readonly ForwardRef: 11;
+  readonly SuspenseComponent: 13;
+  readonly MemoComponent: 14;
+  readonly SimpleMemoComponent: 15;
+};
+declare global {
+  interface Window {
+    __REACT_DEVTOOLS_GLOBAL_HOOK__?: ReactDevToolsHook;
+  }
+}
+//#endregion
+//#region src/core/context/index.d.ts
+/**
+ * Information about a Context Provider
+ */
+interface ContextProviderInfo {
+  id: string;
+  /** Display name of the context (e.g., "ThemeContext") */
+  name: string;
+  /** Current value of the context */
+  value: PropValue;
+  /** Fiber ID of the provider component */
+  fiberId: string;
+  /** Number of consumers using this context */
+  consumerCount: number;
+  /** List of consumer component names */
+  consumers: ContextConsumerInfo[];
+  /** Nested providers (same context type) */
+  children: ContextProviderInfo[];
+  /** Source location if available */
+  source?: {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+  };
+}
+/**
+ * Information about a Context Consumer
+ */
+interface ContextConsumerInfo {
+  id: string;
+  name: string;
+  fiberId: string;
+}
+/**
+ * Context tree structure for visualization
+ */
+interface ContextTree {
+  providers: ContextProviderInfo[];
+  totalProviders: number;
+  totalConsumers: number;
+}
+/**
+ * Get the context tree from a fiber root
+ */
+declare function getContextTree(root: FiberRoot): ContextTree;
+/**
+ * Get context info for a specific provider by fiber ID
+ */
+declare function getContextProviderInfo(root: FiberRoot, fiberId: string): ContextProviderInfo | null;
+/**
+ * Get all contexts available in the application
+ */
+declare function getAllContexts(root: FiberRoot): ContextTree;
+//#endregion
+//#region src/core/fiber/details.d.ts
+/**
+ * Get detailed information about a component from its fiber
+ */
+declare function getComponentDetails(fiber: FiberNode): ComponentDetails;
+//#endregion
+//#region src/core/fiber/highlight.d.ts
+interface SourceInfo$1 {
+  fileName: string;
+  lineNumber: number;
+  columnNumber: number;
+}
+declare function hideHighlight(): void;
+declare function showHighlight(rect: DOMRect, name: string, source?: SourceInfo$1): void;
+declare function mergeClientRects(rects: DOMRect[]): DOMRect | null;
+declare function highlightNode(fiber: FiberNode | null, source?: SourceInfo$1): void;
+declare function cleanupHighlight(): void;
+/**
+ * Scroll the page to make the component visible
+ */
+declare function scrollToNode(fiber: FiberNode | null): void;
+//#endregion
+//#region src/core/fiber/props.d.ts
+/**
+ * Props and Context manipulation utilities for React components
+ *
+ * This module provides functionality to modify component props and context values
+ * at runtime for debugging purposes. Changes are NOT persisted to code.
+ *
+ * Key features:
+ * - Props editing using React's official overrideProps API
+ * - Context editing via Context Provider's value prop
+ * - Automatic type inference for null/undefined values
+ * - Fallback mechanisms when official APIs are unavailable
+ */
+/**
+ * Parse a string value to the appropriate JavaScript type
+ *
+ * @param value - The string representation of the value
+ * @param expectedType - The expected type of the value
+ * @returns The parsed value in the correct type
+ */
+declare function parseValue(value: string, expectedType: string): any;
+/**
+ * Set a prop value on a component
+ *
+ * Uses React's official overrideProps API when available,
+ * falls back to direct fiber manipulation otherwise.
+ *
+ * @param fiberId - The fiber ID of the component
+ * @param propPath - Dot-separated path to the prop (e.g., "user.name")
+ * @param value - The string representation of the new value
+ * @param valueType - The expected type of the value
+ * @returns Whether the operation succeeded
+ */
+declare function setComponentProp(fiberId: string, propPath: string, value: string, valueType: string): boolean;
+/**
+ * Get an overridden prop value for UI display
+ */
+declare function getOverriddenProp(fiberId: string, propPath: string): any;
+/**
+ * Check if a prop is editable
+ *
+ * Some props cannot be edited (children, key, ref, etc.)
+ * Some types cannot be edited (functions, symbols, elements)
+ */
+declare function isEditableProp(propName: string, valueType: string): boolean;
+/**
+ * Set a Context Provider's value
+ *
+ * @param fiberId - The fiber ID of the Context Provider
+ * @param value - The string representation of the new value
+ * @param valueType - The expected type of the value
+ * @returns Whether the operation succeeded
+ */
+declare function setContextValue(fiberId: string, value: string, valueType: string): boolean;
+/**
+ * Set a Context Provider's value from a JSON string
+ *
+ * Used for complex objects where JSON editing is more convenient.
+ */
+declare function setContextValueFromJson(fiberId: string, jsonValue: string): boolean;
+/**
+ * Set a nested property within a Context Provider's value
+ *
+ * @param fiberId - The fiber ID of the Context Provider
+ * @param path - Dot-separated path to the property (e.g., "theme.mode")
+ * @param value - The string representation of the new value
+ * @param valueType - The expected type of the value
+ * @returns Whether the operation succeeded
+ */
+declare function setContextValueAtPath(fiberId: string, path: string, value: string, valueType: string): boolean;
+/**
+ * Get an overridden context value for UI display
+ */
+declare function getOverriddenContext(fiberId: string): any;
+/**
+ * Clear all overrides
+ *
+ * Should be called when the page refreshes or DevTools disconnects.
+ */
+declare function clearOverrides(): void;
+//#endregion
+//#region src/core/fiber/state.d.ts
+/**
+ * State manipulation utilities for React components
+ * 直接编辑组件的 useState/useReducer 状态（这是最可靠的调试方式）
+ */
+interface HookStateInfo {
+  index: number;
+  name: string;
+  value: any;
+  type: string;
+  canEdit: boolean;
+}
+/**
+ * Get all useState/useReducer hooks from a component
+ */
+declare function getComponentHookStates(fiberId: string): HookStateInfo[];
+/**
+ * Set a hook state value
+ * This directly calls the useState setter, which is the most reliable way to update React state
+ */
+declare function setHookState(fiberId: string, hookIndex: number, value: string, valueType: string): boolean;
+/**
+ * Set a hook state value using JSON (for objects/arrays)
+ */
+declare function setHookStateFromJson(fiberId: string, hookIndex: number, jsonValue: string): boolean;
+//#endregion
+//#region src/core/fiber/tree.d.ts
+declare function getFiberById(id: string): FiberNode | undefined;
+declare function buildTree(root: FiberRoot, showHostComponents: boolean): ComponentTreeNode | null;
+declare function clearFiberRegistry(): void;
+//#endregion
+//#region src/core/fiber/utils.d.ts
+declare function getDisplayName(fiber: FiberNode): string;
+declare function shouldIncludeFiber(fiber: FiberNode, showHostComponents: boolean): boolean;
+declare function getFiberId(fiber: FiberNode): string;
+declare function getFiberFromElement(element: Element): FiberNode | null;
+//#endregion
+//#region src/core/hook/index.d.ts
+type TreeUpdateCallback = (tree: ComponentTreeNode | null) => void;
+declare function onTreeUpdated(callback: TreeUpdateCallback): () => void;
+/**
+ * Get the current app fiber root (exported for context debugging)
+ */
+declare function getAppFiberRoot(): FiberRoot | null;
+declare function rebuildTree(showHostComponents: boolean): void;
+/**
+ * Get the React version from the renderer
+ */
+declare function getReactVersion(): string | null;
+declare function installReactHook(showHostComponents: () => boolean): void;
+//#endregion
+//#region src/core/inspector/index.d.ts
+declare function onInspectorSelect(callback: (fiberId: string) => void): () => boolean;
+declare function onOpenInEditor(callback: (fileName: string, line: number, column: number) => void): () => boolean;
+interface ToggleInspectorOptions {
+  mode?: 'select-component' | 'open-in-editor';
+}
+declare function toggleInspector(enabled: boolean, options?: ToggleInspectorOptions): void;
+//#endregion
+//#region src/core/open-in-editor/index.d.ts
+declare function openInEditor(fileName: string, line: number, column: number): void;
+//#endregion
+//#region src/core/router/index.d.ts
+interface RouteInfo {
+  path: string;
+  name?: string;
+  element?: string;
+  children?: RouteInfo[];
+  /** Whether this is an index route (renders at parent's path) */
+  isIndex?: boolean;
+  /** Whether this is a layout route (has children but may not add URL segment) */
+  isLayout?: boolean;
+  /** Whether this route has a loader function */
+  hasLoader?: boolean;
+  /** Whether this route has an action function */
+  hasAction?: boolean;
+  /** Whether this route uses lazy loading */
+  isLazy?: boolean;
+  /** Whether this route has an error boundary */
+  hasErrorBoundary?: boolean;
+  /** Dynamic segments in the path (e.g., :id, :userId) */
+  params?: string[];
+}
+interface MatchedRoute {
+  path: string;
+  params: Record<string, string>;
+  element?: string;
+}
+interface NavigationEntry {
+  path: string;
+  search: string;
+  hash: string;
+  timestamp: number;
+  duration?: number;
+}
+interface RouterState {
+  currentPath: string;
+  search: string;
+  hash: string;
+  routes: RouteInfo[];
+  routerType: 'react-router' | 'unknown' | null;
+  /** Current matched route chain */
+  matchedRoutes: MatchedRoute[];
+  /** Current route params */
+  params: Record<string, string>;
+  /** Navigation history */
+  history: NavigationEntry[];
+  /** Last navigation duration in ms */
+  lastNavigationDuration?: number;
+}
+/**
+ * Set the fiber root reference (called from hook)
+ */
+declare function setFiberRoot(root: FiberRoot | null): void;
+/**
+ * Get the current fiber root
+ */
+declare function getFiberRoot(): FiberRoot | null;
+/**
+ * Get router information from the current React app
+ */
+declare function getRouterInfo(): RouterState | null;
+/**
+ * Navigate to a path using various methods
+ */
+declare function navigateTo(path: string): boolean;
+/**
+ * Clear navigation history
+ */
+declare function clearNavigationHistory(): void;
+//#endregion
+//#region src/messaging/types/channel.d.ts
+interface MergeableChannelOptions {
+  post: (data: any) => void;
+  on: (handler: (data: any) => void) => void;
+}
+//#endregion
+//#region src/messaging/presets/index.d.ts
+type Presets = 'iframe' | 'broadcast';
+//#endregion
+//#region src/messaging/index.d.ts
+interface CreateRpcClientOptions<RemoteFunctions> {
+  preset?: Presets;
+  channel?: MergeableChannelOptions;
+  options?: BirpcOptions<RemoteFunctions>;
+}
+interface CreateRpcServerOptions<RemoteFunctions> {
+  preset?: Presets;
+  channel?: MergeableChannelOptions;
+}
+declare function setRpcServerToGlobal<R, L>(rpc: BirpcGroup<R, L>): void;
+declare function getRpcClient<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, (arg: any) => void>>(): BirpcReturn<RemoteFunctions, LocalFunctions> | null;
+declare function getRpcServer<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, (arg: any) => void>>(): BirpcGroup<RemoteFunctions, LocalFunctions> | null;
+declare function createRpcClient<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, (arg: any) => void>>(functions: LocalFunctions, options?: CreateRpcClientOptions<RemoteFunctions>): BirpcReturn<RemoteFunctions, LocalFunctions>;
+declare function createRpcServer<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, (arg: any) => void>>(functions: LocalFunctions, options?: CreateRpcServerOptions<RemoteFunctions>): void;
+//#endregion
+//#region src/messaging/presets/iframe/context.d.ts
+declare function setIframeServerContext(iframe: HTMLIFrameElement | null): void;
+//#endregion
+export { ComponentDetails, ComponentTreeNode, ContextConsumerInfo, ContextProviderInfo, ContextTree, CreateRpcClientOptions, CreateRpcServerOptions, FiberNode, FiberRoot, HookInfo, HookStateInfo, MatchedRoute, NavigationEntry, PropValue, REACT_TAGS, ReactDevToolsHook, RenderedByInfo, RouteInfo, RouterState, SourceInfo, TIMELINE_LAYERS, type TimelineEvent, type TimelineLayer, type TimelineLayersState, ToggleInspectorOptions, TreeListener, addComponentEvent, addPerformanceEvent, buildTree, cleanupHighlight, clearFiberRegistry, clearNavigationHistory, clearOverrides, clearTimeline, createRpcClient, createRpcServer, getAllContexts, getAppFiberRoot, getComponentDetails, getComponentHookStates, getContextProviderInfo, getContextTree, getDisplayName, getFiberById, getFiberFromElement, getFiberId, getFiberRoot, getOverriddenContext, getOverriddenProp, getReactVersion, getRouterInfo, getRpcClient, getRpcServer, getTimelineState, hideHighlight, highlightNode, installReactHook, installTimelineEventListeners, isEditableProp, mergeClientRects, navigateTo, onInspectorSelect, onOpenInEditor, onTimelineEvent, onTreeUpdated, openInEditor, parseValue, rebuildTree, scrollToNode, setComponentProp, setContextValue, setContextValueAtPath, setContextValueFromJson, setFiberRoot, setHookState, setHookStateFromJson, setIframeServerContext, setRpcServerToGlobal, shouldIncludeFiber, showHighlight, toggleInspector, trackFiberPerformanceEnd, trackFiberPerformanceStart, updateTimelineState };