@vue/devtools-kit 7.0.16 → 7.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary, VNode } from 'vue';
1
+ import { VNode, App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary } from 'vue';
2
2
  import { RouteLocationNormalizedLoaded, RouteRecordNormalized, Router } from 'vue-router';
3
3
  export { Router } from 'vue-router';
4
4
 
@@ -61,277 +61,7 @@ declare function addInspector(payload: Inspector): void;
61
61
  declare function getInspector(inspectorId: string): Inspector | undefined;
62
62
  declare function updateInspector(inspectorId: string, payload: Partial<Inspector>): void;
63
63
 
64
- type PluginApi = DevToolsPluginApi;
65
- declare type PluginSettingsItem = {
66
- label: string;
67
- description?: string;
68
- } & ({
69
- type: 'boolean';
70
- defaultValue: boolean;
71
- } | {
72
- type: 'choice';
73
- defaultValue: string | number;
74
- options: {
75
- value: string | number;
76
- label: string;
77
- }[];
78
- component?: 'select' | 'button-group';
79
- } | {
80
- type: 'text';
81
- defaultValue: string;
82
- });
83
- interface PluginDescriptor {
84
- id: string;
85
- label: string;
86
- app: App<any>;
87
- packageName?: string;
88
- homepage?: string;
89
- componentStateTypes?: string[];
90
- logo?: string;
91
- disableAppScope?: boolean;
92
- disablePluginScope?: boolean;
93
- /**
94
- * Run the plugin setup and expose the api even if the devtools is not opened yet.
95
- * Useful to record timeline events early.
96
- */
97
- enableEarlyProxy?: boolean;
98
- settings?: Record<string, PluginSettingsItem>;
99
- }
100
- type PluginSetupFunction = (api: PluginApi) => void;
101
- type VueAppInstance = ComponentInternalInstance & {
102
- type: {
103
- _componentTag: string | undefined;
104
- components: Record<string, ComponentInternalInstance['type']>;
105
- __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
106
- __isKeepAlive: boolean;
107
- devtools: {
108
- hide: boolean;
109
- };
110
- mixins: ComponentOptions[];
111
- extends: ComponentOptions;
112
- vuex: {
113
- getters: Record<string, unknown>;
114
- };
115
- computed: Record<string, unknown>;
116
- };
117
- __v_cache: Cache;
118
- __VUE_DEVTOOLS_UID__: string;
119
- _isBeingDestroyed: boolean;
120
- _instance: VueAppInstance;
121
- _container: {
122
- _vnode: {
123
- component: VueAppInstance;
124
- };
125
- };
126
- isUnmounted: boolean;
127
- parent: VueAppInstance;
128
- appContext: {
129
- app: VueAppInstance & App & {
130
- __VUE_DEVTOOLS_APP_RECORD_ID__: string;
131
- __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
132
- };
133
- };
134
- __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
135
- suspense: SuspenseBoundary & {
136
- suspenseKey: string;
137
- };
138
- renderContext: Record<string, unknown>;
139
- devtoolsRawSetupState: Record<string, unknown>;
140
- setupState: Record<string, unknown>;
141
- provides: Record<string | symbol, unknown>;
142
- ctx: Record<string, unknown>;
143
- } & App<any>;
144
- interface AppRecord {
145
- id: string | number;
146
- name: string;
147
- app?: App;
148
- version?: string;
149
- types?: Record<string, string | symbol>;
150
- instanceMap: Map<string, VueAppInstance>;
151
- rootInstance: VueAppInstance;
152
- api?: PluginApi;
153
- routerId?: string;
154
- moduleDetectives?: {
155
- vueRouter: boolean;
156
- pinia: boolean;
157
- vueI18n: boolean;
158
- };
159
- }
160
-
161
- type HookAppInstance = App & VueAppInstance;
162
- declare enum DevToolsHooks {
163
- APP_INIT = "app:init",
164
- APP_UNMOUNT = "app:unmount",
165
- COMPONENT_UPDATED = "component:updated",
166
- COMPONENT_ADDED = "component:added",
167
- COMPONENT_REMOVED = "component:removed",
168
- COMPONENT_EMIT = "component:emit",
169
- PERFORMANCE_START = "perf:start",
170
- PERFORMANCE_END = "perf:end",
171
- ADD_ROUTE = "router:add-route",
172
- REMOVE_ROUTE = "router:remove-route",
173
- RENDER_TRACKED = "render:tracked",
174
- RENDER_TRIGGERED = "render:triggered",
175
- APP_CONNECTED = "app:connected",
176
- SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
177
- }
178
- interface DevToolsEvent$1 {
179
- [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void;
180
- [DevToolsHooks.APP_CONNECTED]: () => void;
181
- [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
182
- [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
183
- [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
184
- [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
185
- }
186
- interface DevToolsHook {
187
- id: string;
188
- enabled?: boolean;
189
- events: Map<DevToolsHooks, Function[]>;
190
- emit: (event: DevToolsHooks, ...payload: any[]) => void;
191
- on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;
192
- once: <T extends Function>(event: DevToolsHooks, handler: T) => void;
193
- off: <T extends Function>(event: DevToolsHooks, handler: T) => void;
194
- appRecords: AppRecord[];
195
- apps: Record<number, {
196
- componentCount: number;
197
- }>;
198
- cleanupBuffer?: (matchArg: unknown) => boolean;
199
- }
200
- interface VueHooks {
201
- on: {
202
- vueAppInit: (fn: DevToolsEvent$1[DevToolsHooks.APP_INIT]) => void;
203
- vueAppConnected: (fn: DevToolsEvent$1[DevToolsHooks.APP_CONNECTED]) => void;
204
- componentAdded: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_ADDED]) => () => void;
205
- componentUpdated: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
206
- componentRemoved: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
207
- setupDevtoolsPlugin: (fn: DevToolsEvent$1[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
208
- };
209
- setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
210
- }
211
-
212
- interface CustomCommandAction {
213
- type: 'url';
214
- /**
215
- * Url of the action, if set, execute the action will open the url
216
- */
217
- src: string;
218
- }
219
- interface CustomCommand {
220
- /**
221
- * The id of the command, should be unique
222
- */
223
- id: string;
224
- title: string;
225
- description?: string;
226
- /**
227
- * Order of the command, bigger number will be shown first
228
- * @default 0
229
- */
230
- order?: number;
231
- /**
232
- * Icon of the tab, support any Iconify icons, or a url to an image
233
- */
234
- icon?: string;
235
- /**
236
- * - action of the command
237
- * - __NOTE__: This will be ignored if `children` is set
238
- */
239
- action?: CustomCommandAction;
240
- /**
241
- * - children of action, if set, execute the action will show the children
242
- */
243
- children?: Omit<CustomCommand, 'children'>[];
244
- }
245
- declare function addCustomCommand(action: CustomCommand): void;
246
- declare function removeCustomCommand(actionId: string): void;
247
-
248
- type TabCategory = 'pinned' | 'app' | 'modules' | 'advanced';
249
- type ModuleView = ModuleIframeView | ModuleVNodeView;
250
- interface ModuleIframeView {
251
- /**
252
- * Iframe view
253
- */
254
- type: 'iframe';
255
- /**
256
- * Url of the iframe
257
- */
258
- src: string;
259
- /**
260
- * Persist the iframe instance even if the tab is not active
261
- *
262
- * @default true
263
- */
264
- persistent?: boolean;
265
- }
266
- interface ModuleVNodeView {
267
- /**
268
- * Vue's VNode view
269
- */
270
- type: 'vnode';
271
- /**
272
- * Send vnode to the client, they must be static and serializable
273
- */
274
- vnode: VNode;
275
- }
276
- interface CustomTab {
277
- /**
278
- * The name of the tab, must be unique
279
- */
280
- name: string;
281
- /**
282
- * Icon of the tab, support any Iconify icons, or a url to an image
283
- */
284
- icon?: string;
285
- /**
286
- * Title of the tab
287
- */
288
- title: string;
289
- /**
290
- * Main view of the tab
291
- */
292
- view: ModuleView;
293
- /**
294
- * Category of the tab
295
- * @default 'app'
296
- */
297
- category?: TabCategory;
298
- }
299
-
300
- declare function addCustomTab(tab: CustomTab): void;
301
-
302
- interface DevToolsState {
303
- connected: boolean;
304
- clientConnected: boolean;
305
- vitePluginDetected: boolean;
306
- appRecords: AppRecord[];
307
- activeAppRecord: AppRecord | null;
308
- selectedComponentId: string | null;
309
- pluginBuffer: [PluginDescriptor, PluginSetupFunction][];
310
- tabs: CustomTab[];
311
- commands: CustomCommand[];
312
- activeAppRecordId: string | null;
313
- }
314
-
315
- interface RouterInfo {
316
- currentRoute: RouteLocationNormalizedLoaded | null | {};
317
- routes: RouteRecordNormalized[];
318
- }
319
-
320
- interface DevToolsContext {
321
- appRecord: AppRecord | null;
322
- api: DevToolsPluginApi;
323
- inspector: Inspector[];
324
- timelineLayer: TimelineLayerItem[];
325
- routerInfo: RouterInfo;
326
- router: Router | null;
327
- activeInspectorTreeId: string;
328
- componentPluginHookBuffer: (() => void)[];
329
- clear: () => void;
330
- }
331
-
332
- interface DevToolsEnv {
333
- vitePluginDetected: boolean;
334
- }
64
+ declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
335
65
 
336
66
  interface InspectorNodeTag {
337
67
  label: string;
@@ -444,30 +174,111 @@ interface InspectorStateEditorPayload {
444
174
  set?: (obj: Recordable, path: PropPath, value: unknown, cb?: (object: Recordable, field: string, value: unknown) => void) => unknown;
445
175
  }
446
176
 
447
- type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition';
177
+ type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition' | 'date';
448
178
 
449
- interface OpenInEditorOptions {
450
- file?: string;
451
- line?: number;
452
- column?: number;
179
+ interface ComponentHighLighterOptions {
180
+ bounds: ComponentBoundingRect;
181
+ name?: string;
182
+ id?: string;
183
+ visible?: boolean;
184
+ }
185
+ interface ScrollToComponentOptions {
186
+ id?: string;
187
+ }
188
+
189
+ declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
190
+ declare function highlight(instance: VueAppInstance): void;
191
+ declare function unhighlight(): void;
192
+ declare function inspectComponentHighLighter(): Promise<string>;
193
+ declare function scrollToComponent(options: ScrollToComponentOptions): void;
194
+
195
+ type TabCategory = 'pinned' | 'app' | 'modules' | 'advanced';
196
+ type ModuleView = ModuleIframeView | ModuleVNodeView;
197
+ interface ModuleIframeView {
198
+ /**
199
+ * Iframe view
200
+ */
201
+ type: 'iframe';
202
+ /**
203
+ * Url of the iframe
204
+ */
205
+ src: string;
206
+ /**
207
+ * Persist the iframe instance even if the tab is not active
208
+ *
209
+ * @default true
210
+ */
211
+ persistent?: boolean;
212
+ }
213
+ interface ModuleVNodeView {
214
+ /**
215
+ * Vue's VNode view
216
+ */
217
+ type: 'vnode';
218
+ /**
219
+ * Send vnode to the client, they must be static and serializable
220
+ */
221
+ vnode: VNode;
222
+ }
223
+ interface CustomTab {
224
+ /**
225
+ * The name of the tab, must be unique
226
+ */
227
+ name: string;
228
+ /**
229
+ * Icon of the tab, support any Iconify icons, or a url to an image
230
+ */
231
+ icon?: string;
232
+ /**
233
+ * Title of the tab
234
+ */
235
+ title: string;
236
+ /**
237
+ * Main view of the tab
238
+ */
239
+ view: ModuleView;
240
+ /**
241
+ * Category of the tab
242
+ * @default 'app'
243
+ */
244
+ category?: TabCategory;
453
245
  }
454
- declare function openInEditor(options?: OpenInEditorOptions): void;
455
246
 
456
- interface ComponentHighLighterOptions {
457
- bounds: ComponentBoundingRect;
458
- name?: string;
459
- id?: string;
460
- visible?: boolean;
247
+ interface CustomCommandAction {
248
+ type: 'url';
249
+ /**
250
+ * Url of the action, if set, execute the action will open the url
251
+ */
252
+ src: string;
461
253
  }
462
- interface ScrollToComponentOptions {
463
- id?: string;
254
+ interface CustomCommand {
255
+ /**
256
+ * The id of the command, should be unique
257
+ */
258
+ id: string;
259
+ title: string;
260
+ description?: string;
261
+ /**
262
+ * Order of the command, bigger number will be shown first
263
+ * @default 0
264
+ */
265
+ order?: number;
266
+ /**
267
+ * Icon of the tab, support any Iconify icons, or a url to an image
268
+ */
269
+ icon?: string;
270
+ /**
271
+ * - action of the command
272
+ * - __NOTE__: This will be ignored if `children` is set
273
+ */
274
+ action?: CustomCommandAction;
275
+ /**
276
+ * - children of action, if set, execute the action will show the children
277
+ */
278
+ children?: Omit<CustomCommand, 'children'>[];
464
279
  }
465
-
466
- declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
467
- declare function highlight(instance: VueAppInstance): void;
468
- declare function unhighlight(): void;
469
- declare function inspectComponentHighLighter(): Promise<string>;
470
- declare function scrollToComponent(options: ScrollToComponentOptions): void;
280
+ declare function addCustomCommand(action: CustomCommand): void;
281
+ declare function removeCustomCommand(actionId: string): void;
471
282
 
472
283
  declare enum DevToolsEvents {
473
284
  DEVTOOLS_STATE_UPDATED = "devtools:state-updated",
@@ -488,7 +299,7 @@ declare enum DevToolsEvents {
488
299
  CUSTOM_TABS_UPDATED = "custom-tabs:updated",
489
300
  CUSTOM_COMMANDS_UPDATED = "custom-commands:updated"
490
301
  }
491
- interface DevToolsEvent {
302
+ interface DevToolsEvent$1 {
492
303
  [DevToolsEvents.ADD_TIMELINE_EVENT]: (payload: TimelineEvent) => void;
493
304
  [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
494
305
  [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void;
@@ -502,7 +313,10 @@ interface DevToolsEvent {
502
313
  instanceData: InspectorStateApiPayload['state'];
503
314
  }) => void;
504
315
  [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void;
505
- [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: string) => void;
316
+ [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: {
317
+ inspectorId: string;
318
+ data: InspectorTreeApiPayload['rootNodes'];
319
+ }) => void;
506
320
  [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload) => void;
507
321
  [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => void;
508
322
  [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void;
@@ -516,30 +330,221 @@ interface DevToolsEvent {
516
330
  [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void;
517
331
  [DevToolsEvents.COMPONENT_UPDATED]: () => void;
518
332
  }
519
- type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>;
333
+ type DevToolsEventParams<T extends keyof DevToolsEvent$1> = Parameters<DevToolsEvent$1[T]>;
334
+
335
+ type PluginApi = DevToolsPluginApi;
336
+ declare type PluginSettingsItem = {
337
+ label: string;
338
+ description?: string;
339
+ } & ({
340
+ type: 'boolean';
341
+ defaultValue: boolean;
342
+ } | {
343
+ type: 'choice';
344
+ defaultValue: string | number;
345
+ options: {
346
+ value: string | number;
347
+ label: string;
348
+ }[];
349
+ component?: 'select' | 'button-group';
350
+ } | {
351
+ type: 'text';
352
+ defaultValue: string;
353
+ });
354
+ interface PluginDescriptor {
355
+ id: string;
356
+ label: string;
357
+ app: App<any>;
358
+ packageName?: string;
359
+ homepage?: string;
360
+ componentStateTypes?: string[];
361
+ logo?: string;
362
+ disableAppScope?: boolean;
363
+ disablePluginScope?: boolean;
364
+ /**
365
+ * Run the plugin setup and expose the api even if the devtools is not opened yet.
366
+ * Useful to record timeline events early.
367
+ */
368
+ enableEarlyProxy?: boolean;
369
+ settings?: Record<string, PluginSettingsItem>;
370
+ }
371
+ type PluginSetupFunction = (api: PluginApi) => void;
372
+ type VueAppInstance = ComponentInternalInstance & {
373
+ type: {
374
+ _componentTag: string | undefined;
375
+ components: Record<string, ComponentInternalInstance['type']>;
376
+ __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
377
+ __isKeepAlive: boolean;
378
+ devtools: {
379
+ hide: boolean;
380
+ };
381
+ mixins: ComponentOptions[];
382
+ extends: ComponentOptions;
383
+ vuex: {
384
+ getters: Record<string, unknown>;
385
+ };
386
+ computed: Record<string, unknown>;
387
+ };
388
+ __v_cache: Cache;
389
+ __VUE_DEVTOOLS_UID__: string;
390
+ _isBeingDestroyed: boolean;
391
+ _instance: VueAppInstance;
392
+ _container: {
393
+ _vnode: {
394
+ component: VueAppInstance;
395
+ };
396
+ };
397
+ isUnmounted: boolean;
398
+ parent: VueAppInstance;
399
+ appContext: {
400
+ app: VueAppInstance & App & {
401
+ __VUE_DEVTOOLS_APP_RECORD_ID__: string;
402
+ __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
403
+ };
404
+ };
405
+ __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
406
+ suspense: SuspenseBoundary & {
407
+ suspenseKey: string;
408
+ };
409
+ renderContext: Record<string, unknown>;
410
+ devtoolsRawSetupState: Record<string, unknown>;
411
+ setupState: Record<string, unknown>;
412
+ provides: Record<string | symbol, unknown>;
413
+ ctx: Record<string, unknown>;
414
+ } & App<any>;
415
+ interface AppRecord {
416
+ id: string | number;
417
+ name: string;
418
+ app?: App;
419
+ version?: string;
420
+ types?: Record<string, string | symbol>;
421
+ instanceMap: Map<string, VueAppInstance>;
422
+ rootInstance: VueAppInstance;
423
+ api?: PluginApi;
424
+ routerId?: string;
425
+ moduleDetectives?: {
426
+ vueRouter: boolean;
427
+ pinia: boolean;
428
+ vueI18n: boolean;
429
+ };
430
+ }
431
+
432
+ type HookAppInstance = App & VueAppInstance;
433
+ declare enum DevToolsHooks {
434
+ APP_INIT = "app:init",
435
+ APP_UNMOUNT = "app:unmount",
436
+ COMPONENT_UPDATED = "component:updated",
437
+ COMPONENT_ADDED = "component:added",
438
+ COMPONENT_REMOVED = "component:removed",
439
+ COMPONENT_EMIT = "component:emit",
440
+ PERFORMANCE_START = "perf:start",
441
+ PERFORMANCE_END = "perf:end",
442
+ ADD_ROUTE = "router:add-route",
443
+ REMOVE_ROUTE = "router:remove-route",
444
+ RENDER_TRACKED = "render:tracked",
445
+ RENDER_TRIGGERED = "render:triggered",
446
+ APP_CONNECTED = "app:connected",
447
+ SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
448
+ }
449
+ interface DevToolsEvent {
450
+ [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void;
451
+ [DevToolsHooks.APP_CONNECTED]: () => void;
452
+ [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
453
+ [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
454
+ [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
455
+ [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
456
+ }
457
+ interface DevToolsHook {
458
+ id: string;
459
+ enabled?: boolean;
460
+ events: Map<DevToolsHooks, Function[]>;
461
+ emit: (event: DevToolsHooks, ...payload: any[]) => void;
462
+ on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;
463
+ once: <T extends Function>(event: DevToolsHooks, handler: T) => void;
464
+ off: <T extends Function>(event: DevToolsHooks, handler: T) => void;
465
+ appRecords: AppRecord[];
466
+ apps: Record<number, {
467
+ componentCount: number;
468
+ }>;
469
+ cleanupBuffer?: (matchArg: unknown) => boolean;
470
+ }
471
+ interface VueHooks {
472
+ on: {
473
+ vueAppInit: (fn: DevToolsEvent[DevToolsHooks.APP_INIT]) => void;
474
+ vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void;
475
+ componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void;
476
+ componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
477
+ componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
478
+ setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
479
+ };
480
+ setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
481
+ }
482
+
483
+ declare function addCustomTab(tab: CustomTab): void;
484
+
485
+ interface DevToolsState {
486
+ connected: boolean;
487
+ clientConnected: boolean;
488
+ vitePluginDetected: boolean;
489
+ appRecords: AppRecord[];
490
+ activeAppRecord: AppRecord | null;
491
+ selectedComponentId: string | null;
492
+ pluginBuffer: [PluginDescriptor, PluginSetupFunction][];
493
+ tabs: CustomTab[];
494
+ commands: CustomCommand[];
495
+ activeAppRecordId: string | null;
496
+ highPerfModeEnabled: boolean;
497
+ }
498
+
499
+ interface RouterInfo {
500
+ currentRoute: RouteLocationNormalizedLoaded | null | {};
501
+ routes: RouteRecordNormalized[];
502
+ }
503
+
504
+ interface DevToolsContext {
505
+ appRecord: AppRecord | null;
506
+ api: DevToolsPluginApi;
507
+ inspector: Inspector[];
508
+ timelineLayer: TimelineLayerItem[];
509
+ routerInfo: RouterInfo;
510
+ router: Router | null;
511
+ activeInspectorTreeId: string;
512
+ componentPluginHookBuffer: (() => void)[];
513
+ clear: () => void;
514
+ }
515
+
516
+ interface DevToolsEnv {
517
+ vitePluginDetected: boolean;
518
+ }
519
+
520
+ interface OpenInEditorOptions {
521
+ baseUrl?: string;
522
+ file?: string;
523
+ line?: number;
524
+ column?: number;
525
+ }
526
+ declare function openInEditor(options?: OpenInEditorOptions): void;
520
527
 
521
528
  declare const on: {
522
- readonly addTimelineEvent: (fn: DevToolsEvent[DevToolsEvents.ADD_TIMELINE_EVENT]) => void;
523
- readonly inspectComponent: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_STATE_INSPECT]) => void;
524
- readonly visitComponentTree: (fn: DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]) => void;
525
- readonly getInspectorTree: (fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_TREE]) => void;
526
- readonly getInspectorState: (fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_STATE]) => void;
527
- readonly sendInspectorTree: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_TREE]) => void;
528
- readonly sendInspectorState: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
529
- readonly editInspectorState: (fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
529
+ readonly addTimelineEvent: (fn: DevToolsEvent$1[DevToolsEvents.ADD_TIMELINE_EVENT]) => void;
530
+ readonly inspectComponent: (fn: DevToolsEvent$1[DevToolsEvents.COMPONENT_STATE_INSPECT]) => void;
531
+ readonly visitComponentTree: (fn: DevToolsEvent$1[DevToolsEvents.VISIT_COMPONENT_TREE]) => void;
532
+ readonly getInspectorTree: (fn: DevToolsEvent$1[DevToolsEvents.GET_INSPECTOR_TREE]) => void;
533
+ readonly getInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.GET_INSPECTOR_STATE]) => void;
534
+ readonly sendInspectorTree: (fn: DevToolsEvent$1[DevToolsEvents.SEND_INSPECTOR_TREE]) => void;
535
+ readonly sendInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
536
+ readonly editInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
530
537
  readonly editComponentState: () => void;
531
- readonly componentUpdated: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) => void;
532
- readonly routerInfoUpdated: (fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
533
- readonly getComponentBoundingRect: (fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
534
- readonly customTabsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
535
- readonly customCommandsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) => void;
536
- readonly devtoolsStateUpdated: (fn: DevToolsEvent[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) => void;
538
+ readonly componentUpdated: (fn: DevToolsEvent$1[DevToolsEvents.COMPONENT_UPDATED]) => void;
539
+ readonly routerInfoUpdated: (fn: DevToolsEvent$1[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
540
+ readonly getComponentBoundingRect: (fn: DevToolsEvent$1[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
541
+ readonly customTabsUpdated: (fn: DevToolsEvent$1[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
542
+ readonly customCommandsUpdated: (fn: DevToolsEvent$1[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) => void;
543
+ readonly devtoolsStateUpdated: (fn: DevToolsEvent$1[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) => void;
537
544
  };
538
545
 
539
546
  declare function remove(): void;
540
547
 
541
- declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
542
-
543
548
  declare class DevToolsPluginApi {
544
549
  on: typeof on;
545
550
  clear: typeof remove;
@@ -549,11 +554,11 @@ declare class DevToolsPluginApi {
549
554
  addInspector(payload: InspectorApiPayload): void;
550
555
  highlightElement(instance: VueAppInstance): void;
551
556
  unhighlightElement(): void;
552
- getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<string>;
557
+ getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
553
558
  getInspectorState(payload?: {
554
559
  inspectorId?: string;
555
560
  nodeId?: string;
556
- }): string;
561
+ }): any;
557
562
  editInspectorState(payload: InspectorStateEditorPayload): Promise<void>;
558
563
  sendInspectorTree(inspectorId: string): Promise<void>;
559
564
  sendInspectorState(inspectorId: string): Promise<void>;
@@ -576,6 +581,10 @@ declare class DevToolsPluginApi {
576
581
  getVueInspector(): Promise<ComponentInspector>;
577
582
  }
578
583
 
584
+ declare function initDevTools(): void;
585
+ declare function onDevToolsConnected(fn: () => void): Promise<void>;
586
+ declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
587
+
579
588
  declare const hook: VueHooks;
580
589
 
581
590
  declare const devtoolsState: DevToolsState;
@@ -584,9 +593,7 @@ declare const devtoolsContext: DevToolsContext;
584
593
 
585
594
  declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
586
595
 
587
- declare function initDevTools(): void;
588
- declare function onDevToolsConnected(fn: () => void): Promise<void>;
589
- declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
596
+ declare function toggleHighPerfMode(state?: boolean): void;
590
597
 
591
598
  declare function getInspectorStateValueType(value: any, raw?: boolean): string;
592
599
  declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
@@ -621,4 +628,4 @@ declare const devtools: {
621
628
  readonly api: DevToolsPluginApi;
622
629
  };
623
630
 
624
- export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, unhighlight, updateInspector };
631
+ export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateInspector };