@vue/devtools-kit 7.0.16 → 7.0.17

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.ts 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,219 @@ 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
+ }
497
+
498
+ interface RouterInfo {
499
+ currentRoute: RouteLocationNormalizedLoaded | null | {};
500
+ routes: RouteRecordNormalized[];
501
+ }
502
+
503
+ interface DevToolsContext {
504
+ appRecord: AppRecord | null;
505
+ api: DevToolsPluginApi;
506
+ inspector: Inspector[];
507
+ timelineLayer: TimelineLayerItem[];
508
+ routerInfo: RouterInfo;
509
+ router: Router | null;
510
+ activeInspectorTreeId: string;
511
+ componentPluginHookBuffer: (() => void)[];
512
+ clear: () => void;
513
+ }
514
+
515
+ interface DevToolsEnv {
516
+ vitePluginDetected: boolean;
517
+ }
518
+
519
+ interface OpenInEditorOptions {
520
+ file?: string;
521
+ line?: number;
522
+ column?: number;
523
+ }
524
+ declare function openInEditor(options?: OpenInEditorOptions): void;
520
525
 
521
526
  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;
527
+ readonly addTimelineEvent: (fn: DevToolsEvent$1[DevToolsEvents.ADD_TIMELINE_EVENT]) => void;
528
+ readonly inspectComponent: (fn: DevToolsEvent$1[DevToolsEvents.COMPONENT_STATE_INSPECT]) => void;
529
+ readonly visitComponentTree: (fn: DevToolsEvent$1[DevToolsEvents.VISIT_COMPONENT_TREE]) => void;
530
+ readonly getInspectorTree: (fn: DevToolsEvent$1[DevToolsEvents.GET_INSPECTOR_TREE]) => void;
531
+ readonly getInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.GET_INSPECTOR_STATE]) => void;
532
+ readonly sendInspectorTree: (fn: DevToolsEvent$1[DevToolsEvents.SEND_INSPECTOR_TREE]) => void;
533
+ readonly sendInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
534
+ readonly editInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
530
535
  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;
536
+ readonly componentUpdated: (fn: DevToolsEvent$1[DevToolsEvents.COMPONENT_UPDATED]) => void;
537
+ readonly routerInfoUpdated: (fn: DevToolsEvent$1[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
538
+ readonly getComponentBoundingRect: (fn: DevToolsEvent$1[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
539
+ readonly customTabsUpdated: (fn: DevToolsEvent$1[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
540
+ readonly customCommandsUpdated: (fn: DevToolsEvent$1[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) => void;
541
+ readonly devtoolsStateUpdated: (fn: DevToolsEvent$1[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) => void;
537
542
  };
538
543
 
539
544
  declare function remove(): void;
540
545
 
541
- declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
542
-
543
546
  declare class DevToolsPluginApi {
544
547
  on: typeof on;
545
548
  clear: typeof remove;
@@ -549,11 +552,11 @@ declare class DevToolsPluginApi {
549
552
  addInspector(payload: InspectorApiPayload): void;
550
553
  highlightElement(instance: VueAppInstance): void;
551
554
  unhighlightElement(): void;
552
- getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<string>;
555
+ getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
553
556
  getInspectorState(payload?: {
554
557
  inspectorId?: string;
555
558
  nodeId?: string;
556
- }): string;
559
+ }): any;
557
560
  editInspectorState(payload: InspectorStateEditorPayload): Promise<void>;
558
561
  sendInspectorTree(inspectorId: string): Promise<void>;
559
562
  sendInspectorState(inspectorId: string): Promise<void>;
@@ -576,6 +579,10 @@ declare class DevToolsPluginApi {
576
579
  getVueInspector(): Promise<ComponentInspector>;
577
580
  }
578
581
 
582
+ declare function initDevTools(): void;
583
+ declare function onDevToolsConnected(fn: () => void): Promise<void>;
584
+ declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
585
+
579
586
  declare const hook: VueHooks;
580
587
 
581
588
  declare const devtoolsState: DevToolsState;
@@ -584,10 +591,6 @@ declare const devtoolsContext: DevToolsContext;
584
591
 
585
592
  declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
586
593
 
587
- declare function initDevTools(): void;
588
- declare function onDevToolsConnected(fn: () => void): Promise<void>;
589
- declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
590
-
591
594
  declare function getInspectorStateValueType(value: any, raw?: boolean): string;
592
595
  declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
593
596
  declare function getRaw(value: InspectorState['value']): {
@@ -621,4 +624,4 @@ declare const devtools: {
621
624
  readonly api: DevToolsPluginApi;
622
625
  };
623
626
 
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 };
627
+ 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, unhighlight, updateInspector };