@vue/devtools-kit 7.0.15 → 7.0.17

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary, VNode } from 'vue';
+import { VNode, App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary } from 'vue';
 import { RouteLocationNormalizedLoaded, RouteRecordNormalized, Router } from 'vue-router';
 export { Router } from 'vue-router';
 
@@ -61,277 +61,7 @@ declare function addInspector(payload: Inspector): void;
 declare function getInspector(inspectorId: string): Inspector | undefined;
 declare function updateInspector(inspectorId: string, payload: Partial<Inspector>): void;
 
-type PluginApi = DevToolsPluginApi;
-declare type PluginSettingsItem = {
-    label: string;
-    description?: string;
-} & ({
-    type: 'boolean';
-    defaultValue: boolean;
-} | {
-    type: 'choice';
-    defaultValue: string | number;
-    options: {
-        value: string | number;
-        label: string;
-    }[];
-    component?: 'select' | 'button-group';
-} | {
-    type: 'text';
-    defaultValue: string;
-});
-interface PluginDescriptor {
-    id: string;
-    label: string;
-    app: App<any>;
-    packageName?: string;
-    homepage?: string;
-    componentStateTypes?: string[];
-    logo?: string;
-    disableAppScope?: boolean;
-    disablePluginScope?: boolean;
-    /**
-     * Run the plugin setup and expose the api even if the devtools is not opened yet.
-     * Useful to record timeline events early.
-     */
-    enableEarlyProxy?: boolean;
-    settings?: Record<string, PluginSettingsItem>;
-}
-type PluginSetupFunction = (api: PluginApi) => void;
-type VueAppInstance = ComponentInternalInstance & {
-    type: {
-        _componentTag: string | undefined;
-        components: Record<string, ComponentInternalInstance['type']>;
-        __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
-        __isKeepAlive: boolean;
-        devtools: {
-            hide: boolean;
-        };
-        mixins: ComponentOptions[];
-        extends: ComponentOptions;
-        vuex: {
-            getters: Record<string, unknown>;
-        };
-        computed: Record<string, unknown>;
-    };
-    __v_cache: Cache;
-    __VUE_DEVTOOLS_UID__: string;
-    _isBeingDestroyed: boolean;
-    _instance: VueAppInstance;
-    _container: {
-        _vnode: {
-            component: VueAppInstance;
-        };
-    };
-    isUnmounted: boolean;
-    parent: VueAppInstance;
-    appContext: {
-        app: VueAppInstance & App & {
-            __VUE_DEVTOOLS_APP_RECORD_ID__: string;
-            __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
-        };
-    };
-    __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
-    suspense: SuspenseBoundary & {
-        suspenseKey: string;
-    };
-    renderContext: Record<string, unknown>;
-    devtoolsRawSetupState: Record<string, unknown>;
-    setupState: Record<string, unknown>;
-    provides: Record<string | symbol, unknown>;
-    ctx: Record<string, unknown>;
-} & App<any>;
-interface AppRecord {
-    id: string | number;
-    name: string;
-    app?: App;
-    version?: string;
-    types?: Record<string, string | symbol>;
-    instanceMap: Map<string, VueAppInstance>;
-    rootInstance: VueAppInstance;
-    api?: PluginApi;
-    routerId?: string;
-    moduleDetectives?: {
-        vueRouter: boolean;
-        pinia: boolean;
-        vueI18n: boolean;
-    };
-}
-
-type HookAppInstance = App & VueAppInstance;
-declare enum DevToolsHooks {
-    APP_INIT = "app:init",
-    APP_UNMOUNT = "app:unmount",
-    COMPONENT_UPDATED = "component:updated",
-    COMPONENT_ADDED = "component:added",
-    COMPONENT_REMOVED = "component:removed",
-    COMPONENT_EMIT = "component:emit",
-    PERFORMANCE_START = "perf:start",
-    PERFORMANCE_END = "perf:end",
-    ADD_ROUTE = "router:add-route",
-    REMOVE_ROUTE = "router:remove-route",
-    RENDER_TRACKED = "render:tracked",
-    RENDER_TRIGGERED = "render:triggered",
-    APP_CONNECTED = "app:connected",
-    SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
-}
-interface DevToolsEvent$1 {
-    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void;
-    [DevToolsHooks.APP_CONNECTED]: () => void;
-    [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
-    [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
-    [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
-    [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
-}
-interface DevToolsHook {
-    id: string;
-    enabled?: boolean;
-    events: Map<DevToolsHooks, Function[]>;
-    emit: (event: DevToolsHooks, ...payload: any[]) => void;
-    on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;
-    once: <T extends Function>(event: DevToolsHooks, handler: T) => void;
-    off: <T extends Function>(event: DevToolsHooks, handler: T) => void;
-    appRecords: AppRecord[];
-    apps: Record<number, {
-        componentCount: number;
-    }>;
-    cleanupBuffer?: (matchArg: unknown) => boolean;
-}
-interface VueHooks {
-    on: {
-        vueAppInit: (fn: DevToolsEvent$1[DevToolsHooks.APP_INIT]) => void;
-        vueAppConnected: (fn: DevToolsEvent$1[DevToolsHooks.APP_CONNECTED]) => void;
-        componentAdded: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_ADDED]) => () => void;
-        componentUpdated: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
-        componentRemoved: (fn: DevToolsEvent$1[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
-        setupDevtoolsPlugin: (fn: DevToolsEvent$1[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
-    };
-    setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
-}
-
-interface CustomCommandAction {
-    type: 'url';
-    /**
-     * Url of the action, if set, execute the action will open the url
-     */
-    src: string;
-}
-interface CustomCommand {
-    /**
-     * The id of the command, should be unique
-     */
-    id: string;
-    title: string;
-    description?: string;
-    /**
-     * Order of the command, bigger number will be shown first
-     * @default 0
-     */
-    order?: number;
-    /**
-     * Icon of the tab, support any Iconify icons, or a url to an image
-     */
-    icon?: string;
-    /**
-     * - action of the command
-     * - __NOTE__: This will be ignored if `children` is set
-     */
-    action?: CustomCommandAction;
-    /**
-     * - children of action, if set, execute the action will show the children
-     */
-    children?: Omit<CustomCommand, 'children'>[];
-}
-declare function addCustomCommand(action: CustomCommand): void;
-declare function removeCustomCommand(actionId: string): void;
-
-type TabCategory = 'pinned' | 'app' | 'modules' | 'advanced';
-type ModuleView = ModuleIframeView | ModuleVNodeView;
-interface ModuleIframeView {
-    /**
-     * Iframe view
-     */
-    type: 'iframe';
-    /**
-     * Url of the iframe
-     */
-    src: string;
-    /**
-     * Persist the iframe instance even if the tab is not active
-     *
-     * @default true
-     */
-    persistent?: boolean;
-}
-interface ModuleVNodeView {
-    /**
-     * Vue's VNode view
-     */
-    type: 'vnode';
-    /**
-     * Send vnode to the client, they must be static and serializable
-     */
-    vnode: VNode;
-}
-interface CustomTab {
-    /**
-     * The name of the tab, must be unique
-     */
-    name: string;
-    /**
-     * Icon of the tab, support any Iconify icons, or a url to an image
-     */
-    icon?: string;
-    /**
-     * Title of the tab
-     */
-    title: string;
-    /**
-     * Main view of the tab
-     */
-    view: ModuleView;
-    /**
-     * Category of the tab
-     * @default 'app'
-     */
-    category?: TabCategory;
-}
-
-declare function addCustomTab(tab: CustomTab): void;
-
-interface DevToolsState {
-    connected: boolean;
-    clientConnected: boolean;
-    vitePluginDetected: boolean;
-    appRecords: AppRecord[];
-    activeAppRecord: AppRecord | null;
-    selectedComponentId: string | null;
-    pluginBuffer: [PluginDescriptor, PluginSetupFunction][];
-    tabs: CustomTab[];
-    commands: CustomCommand[];
-    activeAppRecordId: string | null;
-}
-
-interface RouterInfo {
-    currentRoute: RouteLocationNormalizedLoaded | null | {};
-    routes: RouteRecordNormalized[];
-}
-
-interface DevToolsContext {
-    appRecord: AppRecord | null;
-    api: DevToolsPluginApi;
-    inspector: Inspector[];
-    timelineLayer: TimelineLayerItem[];
-    routerInfo: RouterInfo;
-    router: Router | null;
-    activeInspectorTreeId: string;
-    componentPluginHookBuffer: (() => void)[];
-    clear: () => void;
-}
-
-interface DevToolsEnv {
-    vitePluginDetected: boolean;
-}
+declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
 
 interface InspectorNodeTag {
     label: string;
@@ -444,36 +174,118 @@ interface InspectorStateEditorPayload {
     set?: (obj: Recordable, path: PropPath, value: unknown, cb?: (object: Recordable, field: string, value: unknown) => void) => unknown;
 }
 
-type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition';
+type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition' | 'date';
 
-interface OpenInEditorOptions {
-    file?: string;
-    line?: number;
-    column?: number;
+interface ComponentHighLighterOptions {
+    bounds: ComponentBoundingRect;
+    name?: string;
+    id?: string;
+    visible?: boolean;
+}
+interface ScrollToComponentOptions {
+    id?: string;
+}
+
+declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
+declare function highlight(instance: VueAppInstance): void;
+declare function unhighlight(): void;
+declare function inspectComponentHighLighter(): Promise<string>;
+declare function scrollToComponent(options: ScrollToComponentOptions): void;
+
+type TabCategory = 'pinned' | 'app' | 'modules' | 'advanced';
+type ModuleView = ModuleIframeView | ModuleVNodeView;
+interface ModuleIframeView {
+    /**
+     * Iframe view
+     */
+    type: 'iframe';
+    /**
+     * Url of the iframe
+     */
+    src: string;
+    /**
+     * Persist the iframe instance even if the tab is not active
+     *
+     * @default true
+     */
+    persistent?: boolean;
+}
+interface ModuleVNodeView {
+    /**
+     * Vue's VNode view
+     */
+    type: 'vnode';
+    /**
+     * Send vnode to the client, they must be static and serializable
+     */
+    vnode: VNode;
+}
+interface CustomTab {
+    /**
+     * The name of the tab, must be unique
+     */
+    name: string;
+    /**
+     * Icon of the tab, support any Iconify icons, or a url to an image
+     */
+    icon?: string;
+    /**
+     * Title of the tab
+     */
+    title: string;
+    /**
+     * Main view of the tab
+     */
+    view: ModuleView;
+    /**
+     * Category of the tab
+     * @default 'app'
+     */
+    category?: TabCategory;
 }
-declare function openInEditor(options?: OpenInEditorOptions): void;
 
-interface ComponentHighLighterOptions {
-    bounds: ComponentBoundingRect;
-    name?: string;
-    id?: string;
-    visible?: boolean;
+interface CustomCommandAction {
+    type: 'url';
+    /**
+     * Url of the action, if set, execute the action will open the url
+     */
+    src: string;
 }
-interface ScrollToComponentOptions {
-    id?: string;
+interface CustomCommand {
+    /**
+     * The id of the command, should be unique
+     */
+    id: string;
+    title: string;
+    description?: string;
+    /**
+     * Order of the command, bigger number will be shown first
+     * @default 0
+     */
+    order?: number;
+    /**
+     * Icon of the tab, support any Iconify icons, or a url to an image
+     */
+    icon?: string;
+    /**
+     * - action of the command
+     * - __NOTE__: This will be ignored if `children` is set
+     */
+    action?: CustomCommandAction;
+    /**
+     * - children of action, if set, execute the action will show the children
+     */
+    children?: Omit<CustomCommand, 'children'>[];
 }
-
-declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
-declare function highlight(instance: VueAppInstance): void;
-declare function unhighlight(): void;
-declare function inspectComponentHighLighter(): Promise<string>;
-declare function scrollToComponent(options: ScrollToComponentOptions): void;
+declare function addCustomCommand(action: CustomCommand): void;
+declare function removeCustomCommand(actionId: string): void;
 
 declare enum DevToolsEvents {
     DEVTOOLS_STATE_UPDATED = "devtools:state-updated",
     DEVTOOLS_CONNECTED_UPDATED = "devtools:connected-updated",
     ROUTER_INFO_UPDATED = "router-info:updated",
     COMPONENT_STATE_INSPECT = "component-state:inspect",
+    COMPONENT_UPDATED = "component:updated",
     TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
     GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
     SCROLL_TO_COMPONENT = "scroll-to-component",
@@ -487,7 +299,7 @@ declare enum DevToolsEvents {
     CUSTOM_TABS_UPDATED = "custom-tabs:updated",
     CUSTOM_COMMANDS_UPDATED = "custom-commands:updated"
 }
-interface DevToolsEvent {
+interface DevToolsEvent$1 {
     [DevToolsEvents.ADD_TIMELINE_EVENT]: (payload: TimelineEvent) => void;
     [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
     [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void;
@@ -501,7 +313,10 @@ interface DevToolsEvent {
         instanceData: InspectorStateApiPayload['state'];
     }) => void;
     [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void;
-    [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: string) => void;
+    [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: {
+        inspectorId: string;
+        data: InspectorTreeApiPayload['rootNodes'];
+    }) => void;
     [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload) => void;
     [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => void;
     [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void;
@@ -513,30 +328,221 @@ interface DevToolsEvent {
     }) => void;
     [DevToolsEvents.CUSTOM_TABS_UPDATED]: (payload: CustomTab[]) => void;
     [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void;
+    [DevToolsEvents.COMPONENT_UPDATED]: () => void;
+}
+type DevToolsEventParams<T extends keyof DevToolsEvent$1> = Parameters<DevToolsEvent$1[T]>;
+
+type PluginApi = DevToolsPluginApi;
+declare type PluginSettingsItem = {
+    label: string;
+    description?: string;
+} & ({
+    type: 'boolean';
+    defaultValue: boolean;
+} | {
+    type: 'choice';
+    defaultValue: string | number;
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    component?: 'select' | 'button-group';
+} | {
+    type: 'text';
+    defaultValue: string;
+});
+interface PluginDescriptor {
+    id: string;
+    label: string;
+    app: App<any>;
+    packageName?: string;
+    homepage?: string;
+    componentStateTypes?: string[];
+    logo?: string;
+    disableAppScope?: boolean;
+    disablePluginScope?: boolean;
+    /**
+     * Run the plugin setup and expose the api even if the devtools is not opened yet.
+     * Useful to record timeline events early.
+     */
+    enableEarlyProxy?: boolean;
+    settings?: Record<string, PluginSettingsItem>;
+}
+type PluginSetupFunction = (api: PluginApi) => void;
+type VueAppInstance = ComponentInternalInstance & {
+    type: {
+        _componentTag: string | undefined;
+        components: Record<string, ComponentInternalInstance['type']>;
+        __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
+        __isKeepAlive: boolean;
+        devtools: {
+            hide: boolean;
+        };
+        mixins: ComponentOptions[];
+        extends: ComponentOptions;
+        vuex: {
+            getters: Record<string, unknown>;
+        };
+        computed: Record<string, unknown>;
+    };
+    __v_cache: Cache;
+    __VUE_DEVTOOLS_UID__: string;
+    _isBeingDestroyed: boolean;
+    _instance: VueAppInstance;
+    _container: {
+        _vnode: {
+            component: VueAppInstance;
+        };
+    };
+    isUnmounted: boolean;
+    parent: VueAppInstance;
+    appContext: {
+        app: VueAppInstance & App & {
+            __VUE_DEVTOOLS_APP_RECORD_ID__: string;
+            __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
+        };
+    };
+    __VUE_DEVTOOLS_APP_RECORD__: AppRecord;
+    suspense: SuspenseBoundary & {
+        suspenseKey: string;
+    };
+    renderContext: Record<string, unknown>;
+    devtoolsRawSetupState: Record<string, unknown>;
+    setupState: Record<string, unknown>;
+    provides: Record<string | symbol, unknown>;
+    ctx: Record<string, unknown>;
+} & App<any>;
+interface AppRecord {
+    id: string | number;
+    name: string;
+    app?: App;
+    version?: string;
+    types?: Record<string, string | symbol>;
+    instanceMap: Map<string, VueAppInstance>;
+    rootInstance: VueAppInstance;
+    api?: PluginApi;
+    routerId?: string;
+    moduleDetectives?: {
+        vueRouter: boolean;
+        pinia: boolean;
+        vueI18n: boolean;
+    };
+}
+
+type HookAppInstance = App & VueAppInstance;
+declare enum DevToolsHooks {
+    APP_INIT = "app:init",
+    APP_UNMOUNT = "app:unmount",
+    COMPONENT_UPDATED = "component:updated",
+    COMPONENT_ADDED = "component:added",
+    COMPONENT_REMOVED = "component:removed",
+    COMPONENT_EMIT = "component:emit",
+    PERFORMANCE_START = "perf:start",
+    PERFORMANCE_END = "perf:end",
+    ADD_ROUTE = "router:add-route",
+    REMOVE_ROUTE = "router:remove-route",
+    RENDER_TRACKED = "render:tracked",
+    RENDER_TRIGGERED = "render:triggered",
+    APP_CONNECTED = "app:connected",
+    SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
+}
+interface DevToolsEvent {
+    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void;
+    [DevToolsHooks.APP_CONNECTED]: () => void;
+    [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
+    [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
+    [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
+    [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
+}
+interface DevToolsHook {
+    id: string;
+    enabled?: boolean;
+    events: Map<DevToolsHooks, Function[]>;
+    emit: (event: DevToolsHooks, ...payload: any[]) => void;
+    on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;
+    once: <T extends Function>(event: DevToolsHooks, handler: T) => void;
+    off: <T extends Function>(event: DevToolsHooks, handler: T) => void;
+    appRecords: AppRecord[];
+    apps: Record<number, {
+        componentCount: number;
+    }>;
+    cleanupBuffer?: (matchArg: unknown) => boolean;
+}
+interface VueHooks {
+    on: {
+        vueAppInit: (fn: DevToolsEvent[DevToolsHooks.APP_INIT]) => void;
+        vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void;
+        componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void;
+        componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
+        componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
+        setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
+    };
+    setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
+}
+
+declare function addCustomTab(tab: CustomTab): void;
+
+interface DevToolsState {
+    connected: boolean;
+    clientConnected: boolean;
+    vitePluginDetected: boolean;
+    appRecords: AppRecord[];
+    activeAppRecord: AppRecord | null;
+    selectedComponentId: string | null;
+    pluginBuffer: [PluginDescriptor, PluginSetupFunction][];
+    tabs: CustomTab[];
+    commands: CustomCommand[];
+    activeAppRecordId: string | null;
+}
+
+interface RouterInfo {
+    currentRoute: RouteLocationNormalizedLoaded | null | {};
+    routes: RouteRecordNormalized[];
+}
+
+interface DevToolsContext {
+    appRecord: AppRecord | null;
+    api: DevToolsPluginApi;
+    inspector: Inspector[];
+    timelineLayer: TimelineLayerItem[];
+    routerInfo: RouterInfo;
+    router: Router | null;
+    activeInspectorTreeId: string;
+    componentPluginHookBuffer: (() => void)[];
+    clear: () => void;
+}
+
+interface DevToolsEnv {
+    vitePluginDetected: boolean;
+}
+
+interface OpenInEditorOptions {
+    file?: string;
+    line?: number;
+    column?: number;
 }
-type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>;
+declare function openInEditor(options?: OpenInEditorOptions): void;
 
 declare const on: {
-    readonly addTimelineEvent: (fn: DevToolsEvent[DevToolsEvents.ADD_TIMELINE_EVENT]) => void;
-    readonly inspectComponent: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_STATE_INSPECT]) => void;
-    readonly visitComponentTree: (fn: DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]) => void;
-    readonly getInspectorTree: (fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_TREE]) => void;
-    readonly getInspectorState: (fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_STATE]) => void;
-    readonly sendInspectorTree: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_TREE]) => void;
-    readonly sendInspectorState: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
-    readonly editInspectorState: (fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
+    readonly addTimelineEvent: (fn: DevToolsEvent$1[DevToolsEvents.ADD_TIMELINE_EVENT]) => void;
+    readonly inspectComponent: (fn: DevToolsEvent$1[DevToolsEvents.COMPONENT_STATE_INSPECT]) => void;
+    readonly visitComponentTree: (fn: DevToolsEvent$1[DevToolsEvents.VISIT_COMPONENT_TREE]) => void;
+    readonly getInspectorTree: (fn: DevToolsEvent$1[DevToolsEvents.GET_INSPECTOR_TREE]) => void;
+    readonly getInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.GET_INSPECTOR_STATE]) => void;
+    readonly sendInspectorTree: (fn: DevToolsEvent$1[DevToolsEvents.SEND_INSPECTOR_TREE]) => void;
+    readonly sendInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
+    readonly editInspectorState: (fn: DevToolsEvent$1[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
     readonly editComponentState: () => void;
-    readonly routerInfoUpdated: (fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
-    readonly getComponentBoundingRect: (fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
-    readonly customTabsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
-    readonly customCommandsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) => void;
-    readonly devtoolsStateUpdated: (fn: DevToolsEvent[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) => void;
+    readonly componentUpdated: (fn: DevToolsEvent$1[DevToolsEvents.COMPONENT_UPDATED]) => void;
+    readonly routerInfoUpdated: (fn: DevToolsEvent$1[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
+    readonly getComponentBoundingRect: (fn: DevToolsEvent$1[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
+    readonly customTabsUpdated: (fn: DevToolsEvent$1[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
+    readonly customCommandsUpdated: (fn: DevToolsEvent$1[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]) => void;
+    readonly devtoolsStateUpdated: (fn: DevToolsEvent$1[DevToolsEvents.DEVTOOLS_STATE_UPDATED]) => void;
 };
 
 declare function remove(): void;
 
-declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
-
 declare class DevToolsPluginApi {
     on: typeof on;
     clear: typeof remove;
@@ -546,11 +552,11 @@ declare class DevToolsPluginApi {
     addInspector(payload: InspectorApiPayload): void;
     highlightElement(instance: VueAppInstance): void;
     unhighlightElement(): void;
-    getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<string>;
+    getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
     getInspectorState(payload?: {
         inspectorId?: string;
         nodeId?: string;
-    }): string;
+    }): any;
     editInspectorState(payload: InspectorStateEditorPayload): Promise<void>;
     sendInspectorTree(inspectorId: string): Promise<void>;
     sendInspectorState(inspectorId: string): Promise<void>;
@@ -573,12 +579,18 @@ declare class DevToolsPluginApi {
     getVueInspector(): Promise<ComponentInspector>;
 }
 
-declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
-
 declare function initDevTools(): void;
 declare function onDevToolsConnected(fn: () => void): Promise<void>;
 declare function onDevToolsClientConnected(fn: () => void): Promise<void>;
 
+declare const hook: VueHooks;
+
+declare const devtoolsState: DevToolsState;
+
+declare const devtoolsContext: DevToolsContext;
+
+declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
+
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
 declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
 declare function getRaw(value: InspectorState['value']): {
@@ -596,6 +608,14 @@ declare function parse(data: string, revive?: boolean): any;
 
 declare const UNDEFINED = "__vue_devtool_undefined__";
 
+interface DevToolsType {
+    state: typeof devtoolsState;
+    context: typeof devtoolsContext;
+    hook: typeof hook;
+    init: typeof initDevTools;
+    get api(): typeof devtoolsContext.api;
+}
+
 declare const devtools: {
     state: DevToolsState;
     context: DevToolsContext;
@@ -604,4 +624,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-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 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 };
+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 };