@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.cjs +48 -15
- package/dist/index.d.cts +323 -316
- package/dist/index.d.ts +323 -316
- package/dist/index.js +46 -14
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary
|
|
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
|
-
|
|
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
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
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
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
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
|
|
463
|
-
|
|
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
|
|
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:
|
|
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<
|
|
557
|
+
getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
|
|
553
558
|
getInspectorState(payload?: {
|
|
554
559
|
inspectorId?: string;
|
|
555
560
|
nodeId?: string;
|
|
556
|
-
}):
|
|
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
|
|
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
|
|
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 };
|