index.d.ts 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170
  1. import * as hookable from "hookable";
  2. import { HookKeys, Hookable } from "hookable";
  3. import { BirpcGroup, BirpcOptions, BirpcReturn, ChannelOptions } from "birpc";
  4. import { App as App$1, ComponentInternalInstance, ComponentOptions, SuspenseBoundary, VNode } from "vue";
  5. import { RouteLocationNormalizedLoaded, RouteRecordNormalized, Router } from "vue-router";
  6. //#region src/types/app.d.ts
  7. type App = any;
  8. type VueAppInstance = ComponentInternalInstance & {
  9. type: {
  10. _componentTag: string | undefined;
  11. components: Record<string, ComponentInternalInstance['type']>;
  12. __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
  13. __isKeepAlive: boolean;
  14. devtools: {
  15. hide: boolean;
  16. };
  17. mixins: ComponentOptions[];
  18. extends: ComponentOptions;
  19. vuex: {
  20. getters: Record<string, unknown>;
  21. };
  22. computed: Record<string, unknown>;
  23. };
  24. __v_cache: Cache;
  25. __VUE_DEVTOOLS_NEXT_UID__: string;
  26. _isBeingDestroyed: boolean;
  27. _instance: VueAppInstance;
  28. _container: {
  29. _vnode: {
  30. component: VueAppInstance;
  31. };
  32. };
  33. isUnmounted: boolean;
  34. parent: VueAppInstance;
  35. appContext: {
  36. app: VueAppInstance & App & {
  37. __VUE_DEVTOOLS_NEXT_APP_RECORD_ID__: string;
  38. __VUE_DEVTOOLS_NEXT_APP_RECORD__: AppRecord;
  39. };
  40. };
  41. __VUE_DEVTOOLS_NEXT_APP_RECORD__: AppRecord;
  42. suspense: SuspenseBoundary & {
  43. suspenseKey: string;
  44. };
  45. renderContext: Record<string, unknown>;
  46. devtoolsRawSetupState: Record<string, unknown>;
  47. setupState: Record<string, unknown>;
  48. provides: Record<string | symbol, unknown>;
  49. ctx: Record<string, unknown>;
  50. } & App;
  51. interface AppRecord {
  52. id: string;
  53. name: string;
  54. app?: App;
  55. version?: string;
  56. types?: Record<string, string | symbol>;
  57. instanceMap: Map<string, VueAppInstance>;
  58. perfGroupIds: Map<string, {
  59. groupId: number;
  60. time: number;
  61. }>;
  62. rootInstance: VueAppInstance;
  63. routerId?: string;
  64. iframe?: string;
  65. }
  66. //#endregion
  67. //#region src/types/command.d.ts
  68. interface CustomCommandAction {
  69. type: 'url';
  70. /**
  71. * Url of the action, if set, execute the action will open the url
  72. */
  73. src: string;
  74. }
  75. interface CustomCommand {
  76. /**
  77. * The id of the command, should be unique
  78. */
  79. id: string;
  80. title: string;
  81. description?: string;
  82. /**
  83. * Order of the command, bigger number will be shown first
  84. * @default 0
  85. */
  86. order?: number;
  87. /**
  88. * Icon of the tab, support any Iconify icons, or a url to an image
  89. */
  90. icon?: string;
  91. /**
  92. * - action of the command
  93. * - __NOTE__: This will be ignored if `children` is set
  94. */
  95. action?: CustomCommandAction;
  96. /**
  97. * - children of action, if set, execute the action will show the children
  98. */
  99. children?: Omit<CustomCommand, 'children'>[];
  100. }
  101. //#endregion
  102. //#region src/types/inspector.d.ts
  103. interface CustomInspectorOptions {
  104. id: string;
  105. label: string;
  106. icon?: string;
  107. treeFilterPlaceholder?: string;
  108. stateFilterPlaceholder?: string;
  109. noSelectionText?: string;
  110. actions?: {
  111. icon: string;
  112. tooltip?: string;
  113. action: () => void | Promise<void>;
  114. }[];
  115. nodeActions?: {
  116. icon: string;
  117. tooltip?: string;
  118. action: (nodeId: string) => void | Promise<void>;
  119. }[];
  120. }
  121. interface InspectorNodeTag {
  122. label: string;
  123. textColor: number;
  124. backgroundColor: number;
  125. tooltip?: string;
  126. }
  127. type EditStatePayload = {
  128. value: any;
  129. newKey?: string | null;
  130. remove?: undefined | false;
  131. } | {
  132. value?: undefined;
  133. newKey?: undefined;
  134. remove: true;
  135. };
  136. interface CustomInspectorNode {
  137. id: string;
  138. label: string;
  139. children?: CustomInspectorNode[];
  140. tags?: InspectorNodeTag[];
  141. name?: string;
  142. file?: string;
  143. }
  144. interface CustomInspectorState {
  145. [key: string]: (StateBase | Omit<ComponentState, 'type'>)[];
  146. }
  147. //#endregion
  148. //#region src/types/component.d.ts
  149. type ComponentInstance = any;
  150. interface ComponentTreeNode {
  151. uid: string | number;
  152. id: string;
  153. name: string;
  154. renderKey: string | number;
  155. inactive: boolean;
  156. isFragment: boolean;
  157. hasChildren: boolean;
  158. children: ComponentTreeNode[];
  159. domOrder?: number[];
  160. consoleId?: string;
  161. isRouterView?: boolean;
  162. macthedRouteSegment?: string;
  163. tags: InspectorNodeTag[];
  164. autoOpen: boolean;
  165. meta?: any;
  166. file?: string;
  167. }
  168. type ComponentBuiltinCustomStateTypes = 'function' | 'map' | 'set' | 'reference' | 'component' | 'component-definition' | 'router' | 'store';
  169. interface ComponentCustomState extends ComponentStateBase {
  170. value: CustomState;
  171. }
  172. interface StateBase {
  173. key: string;
  174. value: any;
  175. editable?: boolean;
  176. objectType?: 'ref' | 'reactive' | 'computed' | 'other';
  177. raw?: string;
  178. }
  179. interface ComponentStateBase extends StateBase {
  180. type: string;
  181. }
  182. interface ComponentPropState extends ComponentStateBase {
  183. meta?: {
  184. type: string;
  185. required: boolean; /** Vue 1 only */
  186. mode?: 'default' | 'sync' | 'once';
  187. };
  188. }
  189. interface CustomState {
  190. _custom: {
  191. type: ComponentBuiltinCustomStateTypes | string;
  192. objectType?: string;
  193. display?: string;
  194. tooltip?: string;
  195. value?: any;
  196. abstract?: boolean;
  197. file?: string;
  198. uid?: number;
  199. readOnly?: boolean; /** Configure immediate child fields */
  200. fields?: {
  201. abstract?: boolean;
  202. };
  203. id?: any;
  204. actions?: {
  205. icon: string;
  206. tooltip?: string;
  207. action: () => void | Promise<void>;
  208. }[]; /** internal */
  209. _reviveId?: number;
  210. };
  211. }
  212. type ComponentState = ComponentStateBase | ComponentPropState | ComponentCustomState;
  213. interface InspectedComponentData {
  214. id: string;
  215. name: string;
  216. file: string;
  217. state: ComponentState[];
  218. functional?: boolean;
  219. }
  220. interface ComponentBounds {
  221. left: number;
  222. top: number;
  223. width: number;
  224. height: number;
  225. }
  226. //#endregion
  227. //#region src/ctx/state.d.ts
  228. interface DevToolsAppRecords extends AppRecord {}
  229. interface DevToolsState {
  230. connected: boolean;
  231. clientConnected: boolean;
  232. vitePluginDetected: boolean;
  233. appRecords: DevToolsAppRecords[];
  234. activeAppRecordId: string;
  235. tabs: CustomTab[];
  236. commands: CustomCommand[];
  237. highPerfModeEnabled: boolean;
  238. devtoolsClientDetected: {
  239. [key: string]: boolean;
  240. };
  241. perfUniqueGroupId: number;
  242. timelineLayersState: Record<string, boolean>;
  243. }
  244. declare const callStateUpdatedHook: ((state: DevToolsState) => Promise<void>) & {
  245. cancel: () => void;
  246. flush: () => Promise<void> | undefined;
  247. isPending: () => boolean;
  248. };
  249. declare const callConnectedUpdatedHook: ((state: DevToolsState, oldState: DevToolsState) => Promise<void>) & {
  250. cancel: () => void;
  251. flush: () => Promise<void> | undefined;
  252. isPending: () => boolean;
  253. };
  254. declare const devtoolsAppRecords: DevToolsAppRecords[] & {
  255. value: DevToolsAppRecords[];
  256. };
  257. declare const addDevToolsAppRecord: (app: AppRecord) => void;
  258. declare const removeDevToolsAppRecord: (app: AppRecord["app"]) => void;
  259. declare const activeAppRecord: AppRecord & {
  260. value: AppRecord;
  261. id: string;
  262. };
  263. declare function setActiveAppRecord(app: AppRecord): void;
  264. declare function setActiveAppRecordId(id: string): void;
  265. declare const devtoolsState: DevToolsState;
  266. declare function resetDevToolsState(): void;
  267. declare function updateDevToolsState(state: Partial<DevToolsState>): void;
  268. declare function onDevToolsConnected(fn: () => void): Promise<void>;
  269. declare function addCustomTab(tab: CustomTab): void;
  270. declare function addCustomCommand(action: CustomCommand): void;
  271. declare function removeCustomCommand(actionId: string): void;
  272. declare function toggleClientConnected(state: boolean): void;
  273. //#endregion
  274. //#region src/ctx/hook.d.ts
  275. declare enum DevToolsV6PluginAPIHookKeys {
  276. VISIT_COMPONENT_TREE = "visitComponentTree",
  277. INSPECT_COMPONENT = "inspectComponent",
  278. EDIT_COMPONENT_STATE = "editComponentState",
  279. GET_INSPECTOR_TREE = "getInspectorTree",
  280. GET_INSPECTOR_STATE = "getInspectorState",
  281. EDIT_INSPECTOR_STATE = "editInspectorState",
  282. INSPECT_TIMELINE_EVENT = "inspectTimelineEvent",
  283. TIMELINE_CLEARED = "timelineCleared",
  284. SET_PLUGIN_SETTINGS = "setPluginSettings"
  285. }
  286. interface DevToolsV6PluginAPIHookPayloads {
  287. [DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]: {
  288. app: App;
  289. componentInstance: ComponentInstance;
  290. treeNode: ComponentTreeNode;
  291. filter: string;
  292. };
  293. [DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]: {
  294. app: App;
  295. componentInstance: ComponentInstance;
  296. instanceData: InspectedComponentData;
  297. };
  298. [DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]: {
  299. app: App;
  300. inspectorId: string;
  301. nodeId: string;
  302. path: string[];
  303. type: string;
  304. state: EditStatePayload;
  305. set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void;
  306. };
  307. [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]: {
  308. app: App;
  309. inspectorId: string;
  310. filter: string;
  311. rootNodes: CustomInspectorNode[];
  312. };
  313. [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]: {
  314. app: App;
  315. inspectorId: string;
  316. nodeId: string;
  317. state: CustomInspectorState;
  318. };
  319. [DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]: {
  320. app: App;
  321. inspectorId: string;
  322. nodeId: string;
  323. path: string[];
  324. type: string;
  325. state: EditStatePayload;
  326. set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void;
  327. };
  328. [DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]: {
  329. app: App;
  330. layerId: string;
  331. event: TimelineEvent;
  332. all?: boolean;
  333. data: any;
  334. };
  335. [DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]: Record<string, never>;
  336. [DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]: {
  337. app: App;
  338. pluginId: string;
  339. key: string;
  340. newValue: any;
  341. oldValue: any;
  342. settings: any;
  343. };
  344. }
  345. interface DevToolsV6PluginAPIHooks {
  346. [DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]) => void;
  347. [DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]) => void;
  348. [DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]) => void;
  349. [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]) => void;
  350. [DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]) => void;
  351. [DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) => void;
  352. [DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]) => void;
  353. [DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]) => void;
  354. [DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]: (payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]) => void;
  355. }
  356. declare enum DevToolsContextHookKeys {
  357. ADD_INSPECTOR = "addInspector",
  358. SEND_INSPECTOR_TREE = "sendInspectorTree",
  359. SEND_INSPECTOR_STATE = "sendInspectorState",
  360. CUSTOM_INSPECTOR_SELECT_NODE = "customInspectorSelectNode",
  361. TIMELINE_LAYER_ADDED = "timelineLayerAdded",
  362. TIMELINE_EVENT_ADDED = "timelineEventAdded",
  363. GET_COMPONENT_INSTANCES = "getComponentInstances",
  364. GET_COMPONENT_BOUNDS = "getComponentBounds",
  365. GET_COMPONENT_NAME = "getComponentName",
  366. COMPONENT_HIGHLIGHT = "componentHighlight",
  367. COMPONENT_UNHIGHLIGHT = "componentUnhighlight"
  368. }
  369. interface DevToolsContextHookPayloads {
  370. [DevToolsContextHookKeys.ADD_INSPECTOR]: {
  371. inspector: CustomInspectorOptions;
  372. plugin: DevToolsPlugin;
  373. };
  374. [DevToolsContextHookKeys.SEND_INSPECTOR_TREE]: {
  375. inspectorId: string;
  376. plugin: DevToolsPlugin;
  377. };
  378. [DevToolsContextHookKeys.SEND_INSPECTOR_STATE]: {
  379. inspectorId: string;
  380. plugin: DevToolsPlugin;
  381. };
  382. [DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]: {
  383. inspectorId: string;
  384. nodeId: string;
  385. plugin: DevToolsPlugin;
  386. };
  387. [DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]: {
  388. options: TimelineLayerOptions;
  389. plugin: DevToolsPlugin;
  390. };
  391. [DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]: {
  392. options: TimelineEventOptions;
  393. plugin: DevToolsPlugin;
  394. };
  395. [DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]: {
  396. app: App;
  397. };
  398. [DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]: {
  399. instance: ComponentInstance;
  400. };
  401. [DevToolsContextHookKeys.GET_COMPONENT_NAME]: {
  402. instance: ComponentInstance;
  403. };
  404. [DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]: {
  405. uid: string;
  406. };
  407. [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: Record<string, never>;
  408. }
  409. declare enum DevToolsMessagingHookKeys {
  410. SEND_INSPECTOR_TREE_TO_CLIENT = "sendInspectorTreeToClient",
  411. SEND_INSPECTOR_STATE_TO_CLIENT = "sendInspectorStateToClient",
  412. SEND_TIMELINE_EVENT_TO_CLIENT = "sendTimelineEventToClient",
  413. SEND_INSPECTOR_TO_CLIENT = "sendInspectorToClient",
  414. SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT = "sendActiveAppUpdatedToClient",
  415. DEVTOOLS_STATE_UPDATED = "devtoolsStateUpdated",
  416. DEVTOOLS_CONNECTED_UPDATED = "devtoolsConnectedUpdated",
  417. ROUTER_INFO_UPDATED = "routerInfoUpdated"
  418. }
  419. interface DevToolsMessagingHookPayloads {
  420. [DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]: {
  421. inspectorId: string;
  422. rootNodes: CustomInspectorNode[];
  423. };
  424. [DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]: {
  425. inspectorId: string;
  426. nodeId: string;
  427. state: CustomInspectorState;
  428. };
  429. [DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]: TimelineEventOptions;
  430. [DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]: {
  431. id: string;
  432. label: string;
  433. logo: string;
  434. icon: string;
  435. packageName: string | undefined;
  436. homepage: string | undefined;
  437. }[];
  438. [DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]: {
  439. state: DevToolsState;
  440. };
  441. [DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]: {
  442. state: DevToolsState;
  443. oldState: DevToolsState;
  444. };
  445. [DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]: {
  446. state: RouterInfo;
  447. };
  448. }
  449. interface DevToolsMessagingHooks {
  450. [DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT]) => void;
  451. [DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT]) => void;
  452. [DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT]) => void;
  453. [DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT]: () => void;
  454. [DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT]) => void;
  455. [DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED]) => void;
  456. [DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED]) => void;
  457. [DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]: (payload: DevToolsMessagingHookPayloads[DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED]) => void;
  458. }
  459. interface DevToolsContextHooks extends DevToolsV6PluginAPIHooks {
  460. [DevToolsContextHookKeys.ADD_INSPECTOR]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.ADD_INSPECTOR]) => void;
  461. [DevToolsContextHookKeys.SEND_INSPECTOR_TREE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.SEND_INSPECTOR_TREE]) => void;
  462. [DevToolsContextHookKeys.SEND_INSPECTOR_STATE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.SEND_INSPECTOR_STATE]) => void;
  463. [DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE]) => void;
  464. [DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.TIMELINE_LAYER_ADDED]) => void;
  465. [DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.TIMELINE_EVENT_ADDED]) => void;
  466. [DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_INSTANCES]) => void;
  467. [DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_BOUNDS]) => void;
  468. [DevToolsContextHookKeys.GET_COMPONENT_NAME]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.GET_COMPONENT_NAME]) => void;
  469. [DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]: (payload: DevToolsContextHookPayloads[DevToolsContextHookKeys.COMPONENT_HIGHLIGHT]) => void;
  470. [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: () => void;
  471. }
  472. declare function createDevToolsCtxHooks(): hookable.Hookable<DevToolsContextHooks & DevToolsMessagingHooks, hookable.HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>;
  473. //#endregion
  474. //#region src/core/component-inspector/index.d.ts
  475. interface ComponentInspector {
  476. enabled: boolean;
  477. position: {
  478. x: number;
  479. y: number;
  480. };
  481. linkParams: {
  482. file: string;
  483. line: number;
  484. column: number;
  485. };
  486. enable: () => void;
  487. disable: () => void;
  488. toggleEnabled: () => void;
  489. openInEditor: (baseUrl: string, file: string, line: number, column: number) => void;
  490. onUpdated: () => void;
  491. }
  492. declare function toggleComponentInspectorEnabled(enabled: boolean): void;
  493. declare function getComponentInspector(): Promise<ComponentInspector>;
  494. //#endregion
  495. //#region src/core/open-in-editor/index.d.ts
  496. interface OpenInEditorOptions {
  497. baseUrl?: string;
  498. file?: string;
  499. line?: number;
  500. column?: number;
  501. host?: string;
  502. }
  503. declare function setOpenInEditorBaseUrl(url: string): void;
  504. declare function openInEditor(options?: OpenInEditorOptions): void;
  505. //#endregion
  506. //#region src/ctx/api.d.ts
  507. declare function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>): {
  508. getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], "inspectorId" | "filter">): Promise<never[]>;
  509. getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], "inspectorId" | "nodeId">): Promise<CustomInspectorState>;
  510. editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]): void;
  511. sendInspectorState(inspectorId: string): void;
  512. inspectComponentInspector(): Promise<string>;
  513. cancelInspectComponentInspector(): void;
  514. getComponentRenderCode(id: string): any;
  515. scrollToComponent(id: string): void;
  516. openInEditor: typeof openInEditor;
  517. getVueInspector: typeof getComponentInspector;
  518. toggleApp(id: string, options?: {
  519. inspectingComponent?: boolean;
  520. }): void;
  521. inspectDOM(instanceId: string): void;
  522. updatePluginSettings(pluginId: string, key: string, value: string): void;
  523. getPluginSettings(pluginId: string): {
  524. options: Record<string, {
  525. label: string;
  526. description?: string;
  527. } & ({
  528. type: "boolean";
  529. defaultValue: boolean;
  530. } | {
  531. type: "choice";
  532. defaultValue: string | number;
  533. options: {
  534. value: string | number;
  535. label: string;
  536. }[];
  537. component?: "select" | "button-group";
  538. } | {
  539. type: "text";
  540. defaultValue: string;
  541. })> | null;
  542. values: any;
  543. };
  544. };
  545. type DevToolsApiType = ReturnType<typeof createDevToolsApi>;
  546. //#endregion
  547. //#region src/ctx/env.d.ts
  548. declare function getDevToolsEnv(): any;
  549. declare function setDevToolsEnv(env: Partial<any>): void;
  550. //#endregion
  551. //#region src/ctx/inspector.d.ts
  552. interface DevToolsKitInspector {
  553. options: CustomInspectorOptions;
  554. descriptor: PluginDescriptor;
  555. treeFilterPlaceholder: string;
  556. stateFilterPlaceholder: string;
  557. treeFilter: string;
  558. selectedNodeId: string;
  559. appRecord: unknown;
  560. }
  561. declare const devtoolsInspector: DevToolsKitInspector[];
  562. declare const callInspectorUpdatedHook: (() => Promise<void>) & {
  563. cancel: () => void;
  564. flush: () => Promise<void> | undefined;
  565. isPending: () => boolean;
  566. };
  567. declare function addInspector(inspector: CustomInspectorOptions, descriptor: PluginDescriptor): void;
  568. declare function getActiveInspectors(): {
  569. id: string;
  570. label: string;
  571. logo: string;
  572. icon: string;
  573. packageName: string | undefined;
  574. homepage: string | undefined;
  575. pluginId: string;
  576. }[];
  577. declare function getInspectorInfo(id: string): {
  578. id: string;
  579. label: string;
  580. logo: string | undefined;
  581. packageName: string | undefined;
  582. homepage: string | undefined;
  583. timelineLayers: {
  584. id: string;
  585. label: string;
  586. color: number;
  587. }[];
  588. treeFilterPlaceholder: string;
  589. stateFilterPlaceholder: string;
  590. } | undefined;
  591. declare function getInspector(id: string, app?: App$1): DevToolsKitInspector | undefined;
  592. declare function getInspectorActions(id: string): {
  593. icon: string;
  594. tooltip?: string;
  595. action: () => void | Promise<void>;
  596. }[] | undefined;
  597. declare function getInspectorNodeActions(id: string): {
  598. icon: string;
  599. tooltip?: string;
  600. action: (nodeId: string) => void | Promise<void>;
  601. }[] | undefined;
  602. //#endregion
  603. //#region src/ctx/plugin.d.ts
  604. type DevToolsKitPluginBuffer = [PluginDescriptor, PluginSetupFunction];
  605. declare const devtoolsPluginBuffer: DevToolsKitPluginBuffer[];
  606. declare function addDevToolsPluginToBuffer(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
  607. //#endregion
  608. //#region src/ctx/router.d.ts
  609. declare const ROUTER_KEY = "__VUE_DEVTOOLS_ROUTER__";
  610. declare const ROUTER_INFO_KEY = "__VUE_DEVTOOLS_ROUTER_INFO__";
  611. declare const devtoolsRouterInfo: RouterInfo;
  612. declare const devtoolsRouter: {
  613. value: Router;
  614. };
  615. //#endregion
  616. //#region src/ctx/timeline.d.ts
  617. declare function updateTimelineLayersState(state: Record<string, boolean>): void;
  618. //#endregion
  619. //#region src/ctx/index.d.ts
  620. interface DevtoolsContext {
  621. hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>;
  622. state: DevToolsState & {
  623. activeAppRecordId: string;
  624. activeAppRecord: DevToolsAppRecords;
  625. appRecords: DevToolsAppRecords[];
  626. };
  627. api: DevToolsApiType;
  628. }
  629. declare const devtoolsContext: DevtoolsContext;
  630. //#endregion
  631. //#region src/api/v6/index.d.ts
  632. declare class DevToolsV6PluginAPI {
  633. private plugin;
  634. private hooks;
  635. constructor({
  636. plugin,
  637. ctx
  638. }: {
  639. plugin: DevToolsPlugin;
  640. ctx: DevtoolsContext;
  641. });
  642. get on(): {
  643. visitComponentTree: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]) => void;
  644. inspectComponent: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT]) => void;
  645. editComponentState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE]) => void;
  646. getInspectorTree: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE]) => void;
  647. getInspectorState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE]) => void;
  648. editInspectorState: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) => void;
  649. inspectTimelineEvent: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT]) => void;
  650. timelineCleared: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED]) => void;
  651. setPluginSettings: (handler: DevToolsV6PluginAPIHooks[DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS]) => void;
  652. };
  653. notifyComponentUpdate(instance?: ComponentInstance): void;
  654. addInspector(options: CustomInspectorOptions): void;
  655. sendInspectorTree(inspectorId: string): void;
  656. sendInspectorState(inspectorId: string): void;
  657. selectInspectorNode(inspectorId: string, nodeId: string): void;
  658. visitComponentTree(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]): Promise<any>;
  659. now(): number;
  660. addTimelineLayer(options: TimelineLayerOptions): void;
  661. addTimelineEvent(options: TimelineEventOptions): void;
  662. getSettings(pluginId?: string): any;
  663. getComponentInstances(app: App): Promise<ComponentInstance[]>;
  664. getComponentBounds(instance: ComponentInstance): Promise<ComponentBounds>;
  665. getComponentName(instance: ComponentInstance): Promise<string>;
  666. highlightElement(instance: ComponentInstance): Promise<any>;
  667. unhighlightElement(): Promise<any>;
  668. }
  669. //#endregion
  670. //#region src/api/index.d.ts
  671. declare const DevToolsPluginAPI: typeof DevToolsV6PluginAPI;
  672. //#endregion
  673. //#region src/types/plugin.d.ts
  674. type PluginSettingsItem = {
  675. label: string;
  676. description?: string;
  677. } & ({
  678. type: 'boolean';
  679. defaultValue: boolean;
  680. } | {
  681. type: 'choice';
  682. defaultValue: string | number;
  683. options: {
  684. value: string | number;
  685. label: string;
  686. }[];
  687. component?: 'select' | 'button-group';
  688. } | {
  689. type: 'text';
  690. defaultValue: string;
  691. });
  692. type PluginSetupFunction = (api: InstanceType<typeof DevToolsPluginAPI>) => void;
  693. interface PluginDescriptor {
  694. id: string;
  695. label: string;
  696. app: App$1<any>;
  697. packageName?: string;
  698. homepage?: string;
  699. componentStateTypes?: string[];
  700. logo?: string;
  701. disableAppScope?: boolean;
  702. disablePluginScope?: boolean;
  703. /**
  704. * Run the plugin setup and expose the api even if the devtools is not opened yet.
  705. * Useful to record timeline events early.
  706. */
  707. enableEarlyProxy?: boolean;
  708. settings?: Record<string, PluginSettingsItem>;
  709. }
  710. interface DevToolsPlugin {
  711. descriptor: PluginDescriptor;
  712. setupFn: PluginSetupFunction;
  713. }
  714. //#endregion
  715. //#region src/types/hook.d.ts
  716. type HookAppInstance = App$1 & VueAppInstance;
  717. declare enum DevToolsHooks {
  718. APP_INIT = "app:init",
  719. APP_UNMOUNT = "app:unmount",
  720. COMPONENT_UPDATED = "component:updated",
  721. COMPONENT_ADDED = "component:added",
  722. COMPONENT_REMOVED = "component:removed",
  723. COMPONENT_EMIT = "component:emit",
  724. PERFORMANCE_START = "perf:start",
  725. PERFORMANCE_END = "perf:end",
  726. ADD_ROUTE = "router:add-route",
  727. REMOVE_ROUTE = "router:remove-route",
  728. RENDER_TRACKED = "render:tracked",
  729. RENDER_TRIGGERED = "render:triggered",
  730. APP_CONNECTED = "app:connected",
  731. SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
  732. }
  733. interface DevToolsEvent {
  734. [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string, types: Record<string, string | symbol>) => void | Promise<void>;
  735. [DevToolsHooks.APP_CONNECTED]: () => void;
  736. [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>;
  737. [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>;
  738. [DevToolsHooks.COMPONENT_EMIT]: (app: HookAppInstance, instance: VueAppInstance, event: string, params: unknown) => void | Promise<void>;
  739. [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
  740. [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
  741. [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
  742. target?: string;
  743. }) => void;
  744. [DevToolsHooks.PERFORMANCE_START]: (app: App$1, uid: number, vm: HookAppInstance, type: string, time: number) => void;
  745. [DevToolsHooks.PERFORMANCE_END]: (app: App$1, uid: number, vm: HookAppInstance, type: string, time: number) => void;
  746. }
  747. interface DevToolsHook {
  748. id: string;
  749. enabled?: boolean;
  750. devtoolsVersion: string;
  751. events: Map<DevToolsHooks, Function[]>;
  752. emit: (event: DevToolsHooks, ...payload: any[]) => void;
  753. on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;
  754. once: <T extends Function>(event: DevToolsHooks, handler: T) => void;
  755. off: <T extends Function>(event: DevToolsHooks, handler: T) => void;
  756. appRecords: AppRecord[];
  757. apps: any;
  758. cleanupBuffer?: (matchArg: unknown) => boolean;
  759. }
  760. interface VueHooks {
  761. on: {
  762. vueAppInit: (fn: DevToolsEvent[DevToolsHooks.APP_INIT]) => void;
  763. vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void;
  764. vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void;
  765. componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void;
  766. componentEmit: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]) => () => void;
  767. componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
  768. componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
  769. setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
  770. perfStart: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_START]) => void;
  771. perfEnd: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_END]) => void;
  772. };
  773. setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
  774. }
  775. //#endregion
  776. //#region src/types/router.d.ts
  777. interface RouterInfo {
  778. currentRoute: RouteLocationNormalizedLoaded | null | Record<string, any>;
  779. routes: RouteRecordNormalized[];
  780. }
  781. //#endregion
  782. //#region src/types/tab.d.ts
  783. type TabCategory = 'pinned' | 'app' | 'modules' | 'advanced';
  784. type ModuleView = ModuleIframeView | ModuleVNodeView | ModuleSFCView;
  785. interface ModuleIframeView {
  786. /**
  787. * Iframe view
  788. */
  789. type: 'iframe';
  790. /**
  791. * Url of the iframe
  792. */
  793. src: string;
  794. /**
  795. * Persist the iframe instance even if the tab is not active
  796. *
  797. * @default true
  798. */
  799. persistent?: boolean;
  800. }
  801. interface ModuleVNodeView {
  802. /**
  803. * Vue's VNode view
  804. */
  805. type: 'vnode';
  806. /**
  807. * Send vnode to the client, they must be static and serializable
  808. */
  809. vnode: VNode;
  810. }
  811. interface ModuleSFCView {
  812. /**
  813. * SFC view
  814. */
  815. type: 'sfc';
  816. /**
  817. * SFC component
  818. */
  819. sfc: string;
  820. }
  821. interface CustomTab {
  822. /**
  823. * The name of the tab, must be unique
  824. */
  825. name: string;
  826. /**
  827. * Icon of the tab, support any Iconify icons, or a url to an image
  828. */
  829. icon?: string;
  830. /**
  831. * Title of the tab
  832. */
  833. title: string;
  834. /**
  835. * Main view of the tab
  836. */
  837. view: ModuleView;
  838. /**
  839. * Category of the tab
  840. * @default 'app'
  841. */
  842. category?: TabCategory;
  843. }
  844. //#endregion
  845. //#region src/types/timeline.d.ts
  846. interface TimelineEvent<TData = any, TMeta = any> {
  847. time: number;
  848. data: TData;
  849. logType?: 'default' | 'warning' | 'error';
  850. meta?: TMeta;
  851. groupId?: number | string;
  852. title?: string;
  853. subtitle?: string;
  854. }
  855. interface ScreenshotOverlayEvent {
  856. layerId: string;
  857. renderMeta: any;
  858. }
  859. interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
  860. screenshot: ScreenshotData;
  861. events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[];
  862. index: number;
  863. }
  864. type ScreenshotOverlayRenderResult = HTMLElement | string | false;
  865. interface ScreenshotData {
  866. time: number;
  867. }
  868. interface TimelineLayerOptions<TData = any, TMeta = any> {
  869. id: string;
  870. label: string;
  871. color: number;
  872. skipScreenshots?: boolean;
  873. groupsOnly?: boolean;
  874. ignoreNoDurationGroups?: boolean;
  875. screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>;
  876. }
  877. interface TimelineEventOptions {
  878. layerId: string;
  879. event: TimelineEvent;
  880. all?: boolean;
  881. }
  882. //#endregion
  883. //#region src/core/index.d.ts
  884. declare function initDevTools(): void;
  885. declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
  886. //#endregion
  887. //#region src/core/high-perf-mode/index.d.ts
  888. declare function toggleHighPerfMode(state?: boolean): void;
  889. //#endregion
  890. //#region src/core/plugin/components.d.ts
  891. declare function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, PluginSetupFunction];
  892. //#endregion
  893. //#region src/core/plugin/index.d.ts
  894. declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
  895. declare function callDevToolsPluginSetupFn(plugin: [PluginDescriptor, PluginSetupFunction], app: App): void;
  896. declare function removeRegisteredPluginApp(app: App): void;
  897. declare function registerDevToolsPlugin(app: App, options?: {
  898. inspectingComponent?: boolean;
  899. }): void;
  900. //#endregion
  901. //#region src/core/component/types/bounding-rect.d.ts
  902. interface ComponentBoundingRect {
  903. left: number;
  904. top: number;
  905. right: number;
  906. bottom: number;
  907. width: number;
  908. height: number;
  909. }
  910. interface ComponentBoundingRectApiPayload {
  911. app?: VueAppInstance;
  912. inspectorId?: string;
  913. instanceId?: string;
  914. rect?: ComponentBoundingRect;
  915. }
  916. //#endregion
  917. //#region src/core/component/types/custom.d.ts
  918. type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition' | 'date';
  919. //#endregion
  920. //#region src/core/component/state/editor.d.ts
  921. type Recordable = Record<PropertyKey, any>;
  922. //#endregion
  923. //#region src/core/component/types/editor.d.ts
  924. type PropPath = string | string[];
  925. interface InspectorStateEditorPayload {
  926. app?: AppRecord['app'];
  927. inspectorId: string;
  928. nodeId: string;
  929. type: string;
  930. path: PropPath;
  931. state: {
  932. value: unknown;
  933. newKey: string;
  934. remove?: boolean;
  935. type: string;
  936. };
  937. set?: (obj: Recordable, path: PropPath, value: unknown, cb?: (object: Recordable, field: string, value: unknown) => void) => unknown;
  938. }
  939. //#endregion
  940. //#region src/core/component/types/state.d.ts
  941. interface InspectorCustomState {
  942. _custom?: {
  943. type?: string;
  944. displayText?: string;
  945. tooltipText?: string;
  946. value?: string | InspectorCustomState;
  947. stateTypeName?: string;
  948. fields?: {
  949. abstract?: boolean;
  950. };
  951. };
  952. }
  953. interface InspectorState {
  954. key: string;
  955. value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
  956. type: string;
  957. path?: string[];
  958. stateType?: string;
  959. stateTypeName?: string;
  960. meta?: Record<string, boolean | string>;
  961. raw?: string;
  962. editable?: boolean;
  963. children?: {
  964. key: string;
  965. value: string | number;
  966. type: string;
  967. }[];
  968. }
  969. interface InspectorStateApiPayload {
  970. app: VueAppInstance;
  971. inspectorId: string;
  972. nodeId: string;
  973. state: {
  974. id: string;
  975. name: string;
  976. file: string | undefined;
  977. state: InspectorState[];
  978. instance: VueAppInstance | undefined;
  979. };
  980. }
  981. interface AddInspectorApiPayload {
  982. id: string;
  983. label: string;
  984. icon?: string;
  985. treeFilterPlaceholder?: string;
  986. actions?: {
  987. icon: string;
  988. tooltip: string;
  989. action: (payload: unknown) => void;
  990. }[];
  991. }
  992. //#endregion
  993. //#region src/core/component/types/tree.d.ts
  994. interface InspectorTreeApiPayload {
  995. app?: VueAppInstance;
  996. inspectorId?: string;
  997. filter?: string;
  998. instanceId?: string;
  999. rootNodes?: ComponentTreeNode[];
  1000. }
  1001. interface InspectorTree {
  1002. id: string;
  1003. label: string;
  1004. tags?: InspectorNodeTag[];
  1005. children?: InspectorTree[];
  1006. }
  1007. //#endregion
  1008. //#region src/core/component-highlighter/types.d.ts
  1009. interface ComponentHighLighterOptions {
  1010. bounds: ComponentBoundingRect;
  1011. name?: string;
  1012. id?: string;
  1013. visible?: boolean;
  1014. }
  1015. interface ScrollToComponentOptions {
  1016. id?: string;
  1017. }
  1018. //#endregion
  1019. //#region src/core/component-highlighter/index.d.ts
  1020. declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
  1021. declare function highlight(instance: VueAppInstance): void;
  1022. declare function unhighlight(): void;
  1023. declare function cancelInspectComponentHighLighter(): void;
  1024. declare function inspectComponentHighLighter(): Promise<string>;
  1025. declare function scrollToComponent(options: ScrollToComponentOptions): void;
  1026. //#endregion
  1027. //#region src/core/component/state/constants.d.ts
  1028. declare const UNDEFINED = "__vue_devtool_undefined__";
  1029. declare const INFINITY = "__vue_devtool_infinity__";
  1030. declare const NEGATIVE_INFINITY = "__vue_devtool_negative_infinity__";
  1031. declare const NAN = "__vue_devtool_nan__";
  1032. //#endregion
  1033. //#region src/core/component/state/format.d.ts
  1034. declare function getInspectorStateValueType(value: any, raw?: boolean): string;
  1035. declare function formatInspectorStateValue(value: any, quotes?: boolean, options?: {
  1036. customClass?: Partial<Record<'string', string>>;
  1037. }): any;
  1038. declare function getRaw(value: InspectorState['value']): {
  1039. value: object | string | number | boolean | null;
  1040. inherit: Record<string, any> | {
  1041. abstract: true;
  1042. };
  1043. customType?: customTypeEnums;
  1044. };
  1045. declare function toEdit(value: unknown, customType?: customTypeEnums): string;
  1046. declare function toSubmit(value: string, customType?: customTypeEnums): any;
  1047. //#endregion
  1048. //#region src/core/component/state/is.d.ts
  1049. declare function isPlainObject(obj: unknown): obj is object;
  1050. //#endregion
  1051. //#region src/core/component/state/util.d.ts
  1052. declare function escape(s: string): string;
  1053. //#endregion
  1054. //#region src/core/devtools-client/detected.d.ts
  1055. declare function updateDevToolsClientDetected(params: Record<string, boolean>): void;
  1056. //#endregion
  1057. //#region src/messaging/presets/electron/context.d.ts
  1058. interface EventEmitter$2 {
  1059. on: (name: string, handler: (data: any) => void) => void;
  1060. send: (name: string, ...args: any[]) => void;
  1061. emit: (name: string, ...args: any[]) => void;
  1062. }
  1063. interface ElectronClientContext extends EventEmitter$2 {}
  1064. interface ElectronProxyContext extends EventEmitter$2 {}
  1065. interface ElectronServerContext extends EventEmitter$2 {}
  1066. declare function setElectronClientContext(context: ElectronClientContext): void;
  1067. declare function setElectronProxyContext(context: ElectronProxyContext): void;
  1068. declare function setElectronServerContext(context: ElectronServerContext): void;
  1069. //#endregion
  1070. //#region src/messaging/presets/extension/context.d.ts
  1071. interface EventEmitter$1 {
  1072. onMessage: {
  1073. addListener: (listener: (name: string, ...args: any[]) => void) => void;
  1074. };
  1075. postMessage: (name: string, ...args: any[]) => void;
  1076. }
  1077. interface ExtensionClientContext extends EventEmitter$1 {}
  1078. declare function getExtensionClientContext(): ExtensionClientContext;
  1079. declare function setExtensionClientContext(context: ExtensionClientContext): void;
  1080. //#endregion
  1081. //#region src/messaging/presets/iframe/context.d.ts
  1082. declare function setIframeServerContext(context: HTMLIFrameElement): void;
  1083. //#endregion
  1084. //#region src/messaging/presets/vite/context.d.ts
  1085. interface EventEmitter {
  1086. on: (name: string, handler: (data: any) => void) => void;
  1087. send: (name: string, ...args: any[]) => void;
  1088. }
  1089. interface ViteClientContext extends EventEmitter {}
  1090. interface ViteDevServer {
  1091. hot?: EventEmitter;
  1092. ws?: EventEmitter;
  1093. }
  1094. declare function setViteClientContext(context: ViteClientContext): void;
  1095. declare function setViteServerContext(context: ViteDevServer): void;
  1096. //#endregion
  1097. //#region src/messaging/index.d.ts
  1098. type Presets = 'iframe' | 'electron' | 'vite' | 'broadcast' | 'extension';
  1099. interface CreateRpcClientOptions<RemoteFunctions> {
  1100. options?: BirpcOptions<RemoteFunctions>;
  1101. preset?: Presets;
  1102. channel?: ChannelOptions;
  1103. }
  1104. interface CreateRpcServerOptions<RemoteFunctions> {
  1105. options?: BirpcOptions<RemoteFunctions>;
  1106. preset?: Presets;
  1107. channel?: ChannelOptions;
  1108. }
  1109. declare function setRpcServerToGlobal<R, L>(rpc: BirpcGroup<R, L>): void;
  1110. declare function getRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L>;
  1111. declare function getRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L>;
  1112. declare function setViteRpcClientToGlobal<R, L>(rpc: BirpcReturn<R, L>): void;
  1113. declare function setViteRpcServerToGlobal<R, L>(rpc: BirpcGroup<R, L>): void;
  1114. declare function getViteRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L>;
  1115. declare function getViteRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L>;
  1116. declare function createRpcClient<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(functions: LocalFunctions, options?: CreateRpcClientOptions<RemoteFunctions>): BirpcReturn<RemoteFunctions, LocalFunctions> | undefined;
  1117. declare function createRpcServer<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(functions: LocalFunctions, options?: CreateRpcServerOptions<RemoteFunctions>): void;
  1118. declare function createRpcProxy<RemoteFunctions = Record<string, never>, LocalFunctions extends object = Record<string, never>>(options?: CreateRpcClientOptions<RemoteFunctions>): BirpcReturn<RemoteFunctions, LocalFunctions>;
  1119. //#endregion
  1120. //#region src/shared/util.d.ts
  1121. declare function stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
  1122. declare function parse(data: string, revive?: boolean): any;
  1123. //#endregion
  1124. //#region src/index.d.ts
  1125. declare const devtools: {
  1126. hook: VueHooks;
  1127. init: () => void;
  1128. readonly ctx: DevtoolsContext;
  1129. readonly api: {
  1130. getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], "inspectorId" | "filter">): Promise<never[]>;
  1131. getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], "inspectorId" | "nodeId">): Promise<CustomInspectorState>;
  1132. editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]): void;
  1133. sendInspectorState(inspectorId: string): void;
  1134. inspectComponentInspector(): Promise<string>;
  1135. cancelInspectComponentInspector(): void;
  1136. getComponentRenderCode(id: string): any;
  1137. scrollToComponent(id: string): void;
  1138. openInEditor: typeof openInEditor;
  1139. getVueInspector: typeof getComponentInspector;
  1140. toggleApp(id: string, options?: {
  1141. inspectingComponent?: boolean;
  1142. }): void;
  1143. inspectDOM(instanceId: string): void;
  1144. updatePluginSettings(pluginId: string, key: string, value: string): void;
  1145. getPluginSettings(pluginId: string): {
  1146. options: Record<string, {
  1147. label: string;
  1148. description?: string;
  1149. } & ({
  1150. type: "boolean";
  1151. defaultValue: boolean;
  1152. } | {
  1153. type: "choice";
  1154. defaultValue: string | number;
  1155. options: {
  1156. value: string | number;
  1157. label: string;
  1158. }[];
  1159. component?: "select" | "button-group";
  1160. } | {
  1161. type: "text";
  1162. defaultValue: string;
  1163. })> | null;
  1164. values: any;
  1165. };
  1166. };
  1167. };
  1168. //#endregion
  1169. export { AddInspectorApiPayload, App, AppRecord, ComponentBoundingRect, ComponentBoundingRectApiPayload, ComponentBounds, ComponentHighLighterOptions, ComponentInspector, ComponentInstance, ComponentState, ComponentTreeNode, CreateRpcClientOptions, CreateRpcServerOptions, CustomCommand, CustomCommandAction, CustomInspectorNode, CustomInspectorOptions, CustomInspectorState, CustomTab, DevToolsApiType, DevToolsAppRecords, DevToolsContextHookKeys, DevToolsContextHookPayloads, DevToolsContextHooks, DevToolsEvent, DevToolsHook, DevToolsHooks, DevToolsMessagingHookKeys, DevToolsMessagingHookPayloads, DevToolsMessagingHooks, DevToolsPlugin, DevToolsState, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, DevToolsV6PluginAPIHooks, DevtoolsContext, EditStatePayload, INFINITY, InspectedComponentData, InspectorCustomState, InspectorNodeTag, InspectorState, InspectorStateApiPayload, InspectorStateEditorPayload, InspectorTree, InspectorTreeApiPayload, ModuleIframeView, ModuleSFCView, ModuleVNodeView, ModuleView, NAN, NEGATIVE_INFINITY, OpenInEditorOptions, PluginDescriptor, PluginSetupFunction, Presets, PropPath, ROUTER_INFO_KEY, ROUTER_KEY, type Router, RouterInfo, ScreenshotData, ScreenshotOverlayEvent, ScreenshotOverlayRenderContext, ScreenshotOverlayRenderResult, ScrollToComponentOptions, StateBase, TimelineEvent, TimelineEventOptions, TimelineLayerOptions, UNDEFINED, VueAppInstance, type VueHooks, activeAppRecord, addCustomCommand, addCustomTab, addDevToolsAppRecord, addDevToolsPluginToBuffer, addInspector, callConnectedUpdatedHook, callDevToolsPluginSetupFn, callInspectorUpdatedHook, callStateUpdatedHook, cancelInspectComponentHighLighter, createComponentsDevToolsPlugin, createDevToolsApi, createDevToolsCtxHooks, createRpcClient, createRpcProxy, createRpcServer, customTypeEnums, devtools, devtoolsAppRecords, devtoolsContext, devtoolsInspector, devtoolsPluginBuffer, devtoolsRouter, devtoolsRouterInfo, devtoolsState, escape, formatInspectorStateValue, getActiveInspectors, getComponentInspector, getDevToolsEnv, getExtensionClientContext, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getInspectorStateValueType, getRaw, getRpcClient, getRpcServer, getViteRpcClient, getViteRpcServer, highlight, initDevTools, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, registerDevToolsPlugin, removeCustomCommand, removeDevToolsAppRecord, removeRegisteredPluginApp, resetDevToolsState, scrollToComponent, setActiveAppRecord, setActiveAppRecordId, setDevToolsEnv, setElectronClientContext, setElectronProxyContext, setElectronServerContext, setExtensionClientContext, setIframeServerContext, setOpenInEditorBaseUrl, setRpcServerToGlobal, setViteClientContext, setViteRpcClientToGlobal, setViteRpcServerToGlobal, setViteServerContext, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleClientConnected, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateDevToolsClientDetected, updateDevToolsState, updateTimelineLayersState };