index.d.cts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. import * as vue_router from 'vue-router';
  2. import * as _vue_devtools_kit from '@vue/devtools-kit';
  3. import { DevToolsV6PluginAPIHookPayloads, DevToolsV6PluginAPIHookKeys, OpenInEditorOptions, getRpcClient, getRpcServer, getViteRpcClient, CustomTab, CustomCommand, AppRecord } from '@vue/devtools-kit';
  4. import { ModuleNode } from 'vite';
  5. import { App, Ref } from 'vue';
  6. declare function setDevToolsClientUrl(url: string): void;
  7. declare function getDevToolsClientUrl(): any;
  8. declare enum DevToolsMessagingEvents {
  9. INSPECTOR_TREE_UPDATED = "inspector-tree-updated",
  10. INSPECTOR_STATE_UPDATED = "inspector-state-updated",
  11. DEVTOOLS_STATE_UPDATED = "devtools-state-updated",
  12. ROUTER_INFO_UPDATED = "router-info-updated",
  13. TIMELINE_EVENT_UPDATED = "timeline-event-updated",
  14. INSPECTOR_UPDATED = "inspector-updated",
  15. ACTIVE_APP_UNMOUNTED = "active-app-updated",
  16. DESTROY_DEVTOOLS_CLIENT = "destroy-devtools-client",
  17. RELOAD_DEVTOOLS_CLIENT = "reload-devtools-client"
  18. }
  19. declare const functions: {
  20. on: (event: string, handler: Function) => void;
  21. off: (event: string, handler: Function) => void;
  22. once: (event: string, handler: Function) => void;
  23. emit: (event: string, ...args: any[]) => void;
  24. heartbeat: () => boolean;
  25. devtoolsState: () => {
  26. connected: boolean;
  27. clientConnected: boolean;
  28. vueVersion: string;
  29. tabs: _vue_devtools_kit.CustomTab[];
  30. commands: _vue_devtools_kit.CustomCommand[];
  31. vitePluginDetected: boolean;
  32. appRecords: {
  33. id: string;
  34. name: string;
  35. version: string | undefined;
  36. routerId: string | undefined;
  37. }[];
  38. activeAppRecordId: string;
  39. timelineLayersState: Record<string, boolean>;
  40. };
  41. getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], "inspectorId" | "filter">): Promise<string>;
  42. getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], "inspectorId" | "nodeId">): Promise<string>;
  43. editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]): Promise<void>;
  44. sendInspectorState(id: string): void;
  45. inspectComponentInspector(): Promise<string>;
  46. cancelInspectComponentInspector(): void;
  47. getComponentRenderCode(id: string): any;
  48. scrollToComponent(id: string): void;
  49. inspectDOM(id: string): void;
  50. getInspectorNodeActions(id: string): {
  51. icon: string;
  52. tooltip?: string;
  53. action: (nodeId: string) => void | Promise<void>;
  54. }[] | undefined;
  55. getInspectorActions(id: string): {
  56. icon: string;
  57. tooltip?: string;
  58. action: () => void | Promise<void>;
  59. }[] | undefined;
  60. updateTimelineLayersState(state: Record<string, boolean>): void;
  61. callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string): void;
  62. callInspectorAction(inspectorId: string, actionIndex: number): void;
  63. openInEditor(options: OpenInEditorOptions): void;
  64. checkVueInspectorDetected(): Promise<boolean>;
  65. enableVueInspector(): Promise<void>;
  66. toggleApp(id: string, options?: {
  67. inspectingComponent?: boolean;
  68. }): Promise<void>;
  69. updatePluginSettings(pluginId: string, key: string, value: string): void;
  70. getPluginSettings(pluginId: string): {
  71. options: Record<string, {
  72. label: string;
  73. description?: string;
  74. } & ({
  75. type: "boolean";
  76. defaultValue: boolean;
  77. } | {
  78. type: "choice";
  79. defaultValue: string | number;
  80. options: {
  81. value: string | number;
  82. label: string;
  83. }[];
  84. component?: "select" | "button-group";
  85. } | {
  86. type: "text";
  87. defaultValue: string;
  88. })> | null;
  89. values: any;
  90. };
  91. getRouterInfo(): _vue_devtools_kit.RouterInfo;
  92. navigate(path: string): Promise<void | vue_router.NavigationFailure | {} | undefined>;
  93. getMatchedRoutes(path: string): vue_router.RouteRecordNormalized[];
  94. toggleClientConnected(state: boolean): void;
  95. getCustomInspector(): {
  96. id: string;
  97. label: string;
  98. logo: string;
  99. icon: string;
  100. packageName: string | undefined;
  101. homepage: string | undefined;
  102. pluginId: string;
  103. }[];
  104. getInspectorInfo(id: string): {
  105. id: string;
  106. label: string;
  107. logo: string | undefined;
  108. packageName: string | undefined;
  109. homepage: string | undefined;
  110. timelineLayers: {
  111. id: string;
  112. label: string;
  113. color: number;
  114. }[];
  115. treeFilterPlaceholder: string;
  116. stateFilterPlaceholder: string;
  117. } | undefined;
  118. highlighComponent(uid: string): Promise<any>;
  119. unhighlight(): Promise<any>;
  120. updateDevToolsClientDetected(params: Record<string, boolean>): void;
  121. initDevToolsServerListener(): void;
  122. };
  123. type RPCFunctions = typeof functions;
  124. declare const rpc: {
  125. value: ReturnType<typeof getRpcClient<RPCFunctions>>;
  126. functions: ReturnType<typeof getRpcClient<RPCFunctions>>;
  127. };
  128. declare const rpcServer: {
  129. value: ReturnType<typeof getRpcServer<RPCFunctions>>;
  130. functions: ReturnType<typeof getRpcServer<RPCFunctions>>;
  131. };
  132. declare function onRpcConnected(callback: () => void): void;
  133. declare function onRpcSeverReady(callback: () => void): void;
  134. type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'wasm' | 'other';
  135. interface AssetInfo {
  136. path: string;
  137. type: AssetType;
  138. publicPath: string;
  139. relativePath: string;
  140. filePath: string;
  141. size: number;
  142. mtime: number;
  143. }
  144. interface ImageMeta {
  145. width: number;
  146. height: number;
  147. orientation?: number;
  148. type?: string;
  149. mimeType?: string;
  150. }
  151. type AssetImporter = Pick<ModuleNode, 'url' | 'id'>;
  152. interface AssetEntry {
  153. path: string;
  154. content: string;
  155. encoding?: BufferEncoding;
  156. override?: boolean;
  157. }
  158. interface CodeSnippet {
  159. code: string;
  160. lang: string;
  161. name: string;
  162. docs?: string;
  163. }
  164. interface ModuleInfo {
  165. id: string;
  166. plugins: {
  167. name: string;
  168. transform?: number;
  169. resolveId?: number;
  170. }[];
  171. deps: string[];
  172. virtual: boolean;
  173. }
  174. declare const viteRpcFunctions: {
  175. on: (event: string, handler: Function) => void;
  176. off: (event: string, handler: Function) => void;
  177. once: (event: string, handler: Function) => void;
  178. emit: (event: string, ...args: any[]) => void;
  179. heartbeat: () => boolean;
  180. };
  181. type ViteRPCFunctions = typeof viteRpcFunctions & {
  182. getStaticAssets: () => Promise<AssetInfo[]>;
  183. getAssetImporters: (url: string) => Promise<AssetImporter[]>;
  184. getImageMeta: (filepath: string) => Promise<ImageMeta>;
  185. getTextAssetContent: (filepath: string, limit?: number) => Promise<string>;
  186. getRoot: () => Promise<string>;
  187. getGraphModules: () => Promise<ModuleInfo[]>;
  188. };
  189. declare const viteRpc: {
  190. value: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>;
  191. functions: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>;
  192. };
  193. declare function onViteRpcConnected(callback: () => void): void;
  194. declare function createViteClientRpc(): void;
  195. declare function createViteServerRpc(functions: Record<string, any>): void;
  196. interface DevToolsState {
  197. connected: boolean;
  198. clientConnected: boolean;
  199. vueVersion: string;
  200. tabs: CustomTab[];
  201. commands: CustomCommand[];
  202. vitePluginDetected: boolean;
  203. appRecords: AppRecord[];
  204. activeAppRecordId: string;
  205. timelineLayersState: Record<string, boolean>;
  206. }
  207. type DevToolsRefState = {
  208. [P in keyof DevToolsState]: Ref<DevToolsState[P]>;
  209. };
  210. declare function VueDevToolsVuePlugin(): {
  211. install(app: App): void;
  212. };
  213. declare function createDevToolsStateContext(): {
  214. getDevToolsState: () => void;
  215. connected: Ref<boolean, boolean>;
  216. clientConnected: Ref<boolean, boolean>;
  217. vueVersion: Ref<string, string>;
  218. tabs: Ref<{
  219. name: string;
  220. icon?: string | undefined;
  221. title: string;
  222. view: {
  223. type: "iframe";
  224. src: string;
  225. persistent?: boolean | undefined;
  226. } | {
  227. type: "vnode";
  228. vnode: VNode;
  229. } | {
  230. type: "sfc";
  231. sfc: string;
  232. };
  233. category?: ("app" | "pinned" | "modules" | "advanced") | undefined;
  234. }[], CustomTab[] | {
  235. name: string;
  236. icon?: string | undefined;
  237. title: string;
  238. view: {
  239. type: "iframe";
  240. src: string;
  241. persistent?: boolean | undefined;
  242. } | {
  243. type: "vnode";
  244. vnode: VNode;
  245. } | {
  246. type: "sfc";
  247. sfc: string;
  248. };
  249. category?: ("app" | "pinned" | "modules" | "advanced") | undefined;
  250. }[]>;
  251. commands: Ref<{
  252. id: string;
  253. title: string;
  254. description?: string | undefined;
  255. order?: number | undefined;
  256. icon?: string | undefined;
  257. action?: {
  258. type: "url";
  259. src: string;
  260. } | undefined;
  261. children?: {
  262. title: string;
  263. id: string;
  264. icon?: string | undefined;
  265. description?: string | undefined;
  266. order?: number | undefined;
  267. action?: {
  268. type: "url";
  269. src: string;
  270. } | undefined;
  271. }[] | undefined;
  272. }[], CustomCommand[] | {
  273. id: string;
  274. title: string;
  275. description?: string | undefined;
  276. order?: number | undefined;
  277. icon?: string | undefined;
  278. action?: {
  279. type: "url";
  280. src: string;
  281. } | undefined;
  282. children?: {
  283. title: string;
  284. id: string;
  285. icon?: string | undefined;
  286. description?: string | undefined;
  287. order?: number | undefined;
  288. action?: {
  289. type: "url";
  290. src: string;
  291. } | undefined;
  292. }[] | undefined;
  293. }[]>;
  294. vitePluginDetected: Ref<boolean, boolean>;
  295. appRecords: Ref<{
  296. id: string;
  297. name: string;
  298. app?: _vue_devtools_kit.App;
  299. version?: string | undefined;
  300. types?: Record<string, string | symbol> | undefined;
  301. instanceMap: Map<string, any> & Omit<Map<string, any>, keyof Map<any, any>>;
  302. perfGroupIds: Map<string, {
  303. groupId: number;
  304. time: number;
  305. }> & Omit<Map<string, {
  306. groupId: number;
  307. time: number;
  308. }>, keyof Map<any, any>>;
  309. rootInstance: _vue_devtools_kit.VueAppInstance;
  310. routerId?: string | undefined;
  311. }[], AppRecord[] | {
  312. id: string;
  313. name: string;
  314. app?: _vue_devtools_kit.App;
  315. version?: string | undefined;
  316. types?: Record<string, string | symbol> | undefined;
  317. instanceMap: Map<string, any> & Omit<Map<string, any>, keyof Map<any, any>>;
  318. perfGroupIds: Map<string, {
  319. groupId: number;
  320. time: number;
  321. }> & Omit<Map<string, {
  322. groupId: number;
  323. time: number;
  324. }>, keyof Map<any, any>>;
  325. rootInstance: _vue_devtools_kit.VueAppInstance;
  326. routerId?: string | undefined;
  327. }[]>;
  328. activeAppRecordId: Ref<string, string>;
  329. timelineLayersState: Ref<Record<string, boolean>, Record<string, boolean>>;
  330. };
  331. declare function useDevToolsState(): DevToolsRefState;
  332. declare function onDevToolsConnected(fn: () => void): () => void;
  333. declare function refreshCurrentPageData(): void;
  334. export { type AssetEntry, type AssetImporter, type AssetInfo, type AssetType, type CodeSnippet, DevToolsMessagingEvents, type ImageMeta, type ModuleInfo, type RPCFunctions, type ViteRPCFunctions, VueDevToolsVuePlugin, createDevToolsStateContext, createViteClientRpc, createViteServerRpc, functions, getDevToolsClientUrl, onDevToolsConnected, onRpcConnected, onRpcSeverReady, onViteRpcConnected, refreshCurrentPageData, rpc, rpcServer, setDevToolsClientUrl, useDevToolsState, viteRpc, viteRpcFunctions };