@vue/devtools-kit 7.0.14 → 7.0.16

package/dist/index.d.cts

@@ -1,24 +1,8 @@
-import * as vue from 'vue';
-import { VNode } from 'vue';
-import * as vue_router from 'vue-router';
+import { App, ComponentInternalInstance, ComponentOptions, SuspenseBoundary, VNode } from 'vue';
 import { RouteLocationNormalizedLoaded, RouteRecordNormalized, Router } from 'vue-router';
 export { Router } from 'vue-router';
-import { AppRecord, VueAppInstance, DevToolsState, PluginDescriptor, PluginSetupFunction } from '@vue/devtools-schema';
-import * as _vue_devtools_schema_dist from '@vue/devtools-schema/dist';
-import * as _vue_devtools_schema_src_types_vue from '@vue/devtools-schema/src/types/vue';
 
-declare const RouterKey = "__VUE_DEVTOOLS_ROUTER__";
-
-interface RouterInfo {
-    currentRoute: RouteLocationNormalizedLoaded | null;
-    routes: RouteRecordNormalized[];
-    router: Router | null;
-}
-declare const devtoolsRouterInfo: RouterInfo;
-declare function normalizeRouterInfo(appRecord: AppRecord): void;
-declare function getRouterDevToolsId(id: string): string;
-
-interface VueInspector {
+interface ComponentInspector {
     enabled: boolean;
     position: {
         x: number;
@@ -36,41 +20,33 @@ interface VueInspector {
     onUpdated: () => void;
 }
 declare function toggleComponentInspectorEnabled(enabled: boolean): void;
-declare function getVueInspector(): Promise<VueInspector | null>;
+declare function getComponentInspector(): Promise<ComponentInspector>;
 
-interface InspectorCustomState {
-    _custom?: {
-        type?: string;
-        displayText?: string;
-        tooltipText?: string;
-        value?: string | InspectorCustomState;
-        stateTypeName?: string;
-        fields?: {
-            abstract?: boolean;
-        };
+interface TimelineEvent {
+    event: {
+        groupId: number;
+        time: number;
+        title: string;
+        subtitle: string;
+        data: Record<string, unknown>;
     };
+    layerId: string;
 }
-interface InspectorState {
-    key: string;
-    value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
-    type: string;
-    stateType?: string;
-    stateTypeName?: string;
-    meta?: Record<string, boolean | string>;
-    raw?: string;
-    editable?: boolean;
-    children?: {
-        key: string;
-        value: string | number;
-        type: string;
-    }[];
+interface TimelineLayerItem {
+    id: string;
+    label: string;
+    color: number;
 }
-interface InspectorStateApiPayload {
-    app: VueAppInstance;
-    inspectorId: string;
+declare function addTimelineLayer(payload: TimelineLayerItem): void;
+declare function getTimelineLayer(): TimelineLayerItem[];
+
+interface Inspector {
+    id: string;
     nodeId: string;
+    filter: string;
+    treeFilterPlaceholder: string;
 }
-interface AddInspectorApiPayload {
+interface InspectorApiPayload {
     id: string;
     label: string;
     icon?: string;
@@ -81,87 +57,193 @@ interface AddInspectorApiPayload {
         action: (payload: unknown) => void;
     }[];
 }
+declare function addInspector(payload: Inspector): void;
+declare function getInspector(inspectorId: string): Inspector | undefined;
+declare function updateInspector(inspectorId: string, payload: Partial<Inspector>): void;
 
-interface InspectorNodeTag {
+type PluginApi = DevToolsPluginApi;
+declare type PluginSettingsItem = {
     label: string;
-    textColor: number;
-    backgroundColor: number;
-    tooltip?: string;
-}
-interface ComponentTreeNode {
-    uid: number | 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;
-    name: string;
-    renderKey: string | number;
-    inactive: boolean;
-    isFragment: boolean;
-    children: ComponentTreeNode[];
-    domOrder?: number[];
-    tags: InspectorNodeTag[];
-    autoOpen: boolean;
-    file: string;
-}
-interface InspectorTreeApiPayload {
-    app?: VueAppInstance;
-    inspectorId?: string;
-    filter?: string;
-    instanceId?: string;
-    rootNodes?: ComponentTreeNode[];
+    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 Recordable = Record<PropertyKey, any>;
-
-type PropPath = string | string[];
-interface InspectorStateEditorPayload {
-    app?: AppRecord['app'];
-    inspectorId: string;
-    nodeId: string;
-    type: string;
-    path: PropPath;
-    state: {
-        value: unknown;
-        newKey: string;
-        remove?: boolean;
-        type: string;
+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;
     };
-    set?: (obj: Recordable, path: PropPath, value: unknown, cb?: (object: Recordable, field: string, value: unknown) => void) => unknown;
 }
 
-interface ComponentBoundingRect {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-    width: number;
-    height: number;
+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 ComponentBoundingRectApiPayload {
-    app?: VueAppInstance;
-    inspectorId?: string;
-    instanceId?: string;
-    rect?: ComponentBoundingRect;
+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 TimelineEventData {
-    data: Record<string, InspectorCustomState>;
+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 TimelineEvent {
-    event: {
-        groupId: number;
-        time: number;
-        title: string;
-        subtitle: string;
-        data: TimelineEventData;
+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;
     };
-    layerId: string;
+    setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
 }
 
-interface OpenInEditorOptions {
-    file?: string;
-    line?: number;
-    column?: number;
+interface CustomCommandAction {
+    type: 'url';
+    /**
+     * Url of the action, if set, execute the action will open the url
+     */
+    src: string;
 }
-declare function openInEditor(options?: OpenInEditorOptions): void;
+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;
@@ -215,45 +297,163 @@ interface CustomTab {
     category?: TabCategory;
 }
 
-interface CustomCommandAction {
-    type: 'url';
-    /**
-     * Url of the action, if set, execute the action will open the url
-     */
-    src: string;
+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 CustomCommand {
-    /**
-     * The id of the command, should be unique
-     */
+
+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 InspectorNodeTag {
+    label: string;
+    textColor: number;
+    backgroundColor: number;
+    tooltip?: string;
+}
+interface ComponentTreeNode {
+    uid: number | string;
     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
-     */
+    name: string;
+    renderKey: string | number;
+    inactive: boolean;
+    isFragment: boolean;
+    children: ComponentTreeNode[];
+    domOrder?: number[];
+    tags: InspectorNodeTag[];
+    autoOpen: boolean;
+    file: string;
+}
+interface InspectorTreeApiPayload {
+    app?: VueAppInstance;
+    inspectorId?: string;
+    filter?: string;
+    instanceId?: string;
+    rootNodes?: ComponentTreeNode[];
+}
+
+interface ComponentBoundingRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+interface ComponentBoundingRectApiPayload {
+    app?: VueAppInstance;
+    inspectorId?: string;
+    instanceId?: string;
+    rect?: ComponentBoundingRect;
+}
+
+interface InspectorCustomState {
+    _custom?: {
+        type?: string;
+        displayText?: string;
+        tooltipText?: string;
+        value?: string | InspectorCustomState;
+        stateTypeName?: string;
+        fields?: {
+            abstract?: boolean;
+        };
+    };
+}
+interface InspectorState {
+    key: string;
+    value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
+    type: string;
+    stateType?: string;
+    stateTypeName?: string;
+    meta?: Record<string, boolean | string>;
+    raw?: string;
+    editable?: boolean;
+    children?: {
+        key: string;
+        value: string | number;
+        type: string;
+    }[];
+}
+interface InspectorStateApiPayload {
+    app: VueAppInstance;
+    inspectorId: string;
+    nodeId: string;
+    state: {
+        id: string;
+        name: string;
+        file: string | undefined;
+        state: InspectorState[];
+        instance: VueAppInstance | undefined;
+    };
+}
+interface AddInspectorApiPayload {
+    id: string;
+    label: string;
     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'>[];
+    treeFilterPlaceholder?: string;
+    actions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
 }
-declare function addCustomCommand(action: CustomCommand): void;
-declare function removeCustomCommand(actionId: CustomCommand['id']): void;
 
-declare function clear(): void;
+type Recordable = Record<PropertyKey, any>;
+
+type PropPath = string | string[];
+interface InspectorStateEditorPayload {
+    app?: AppRecord['app'];
+    inspectorId: string;
+    nodeId: string;
+    type: string;
+    path: PropPath;
+    state: {
+        value: unknown;
+        newKey: string;
+        remove?: boolean;
+        type: string;
+    };
+    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';
+
+interface OpenInEditorOptions {
+    file?: string;
+    line?: number;
+    column?: number;
+}
+declare function openInEditor(options?: OpenInEditorOptions): void;
 
-interface ToggleComponentInspectorOptions {
+interface ComponentHighLighterOptions {
     bounds: ComponentBoundingRect;
     name?: string;
     id?: string;
@@ -263,12 +463,19 @@ 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;
+
 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",
-    TOGGLE_COMPONENT_INSPECTOR = "component-inspector:toggle",
+    COMPONENT_UPDATED = "component:updated",
+    TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
     GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
     SCROLL_TO_COMPONENT = "scroll-to-component",
     GET_INSPECTOR_TREE = "inspector-tree:get",
@@ -282,23 +489,18 @@ declare enum DevToolsEvents {
     CUSTOM_COMMANDS_UPDATED = "custom-commands:updated"
 }
 interface DevToolsEvent {
+    [DevToolsEvents.ADD_TIMELINE_EVENT]: (payload: TimelineEvent) => void;
+    [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
+    [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void;
+    [DevToolsEvents.SCROLL_TO_COMPONENT]: (payload: ScrollToComponentOptions) => void;
+    [DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]: (payload: ComponentBoundingRectApiPayload) => void;
     [DevToolsEvents.DEVTOOLS_STATE_UPDATED]: (state: DevToolsState, oldState: DevToolsState) => void;
     [DevToolsEvents.DEVTOOLS_CONNECTED_UPDATED]: (state: DevToolsState, oldState: DevToolsState) => void;
-    [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
     [DevToolsEvents.COMPONENT_STATE_INSPECT]: (payload: {
         componentInstance: VueAppInstance | undefined;
         app: VueAppInstance | undefined;
-        instanceData: {
-            id: string;
-            name: string;
-            file: string | undefined;
-            state: InspectorState[];
-            instance: VueAppInstance | undefined;
-        };
+        instanceData: InspectorStateApiPayload['state'];
     }) => void;
-    [DevToolsEvents.TOGGLE_COMPONENT_INSPECTOR]: (payload: ToggleComponentInspectorOptions) => void;
-    [DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]: (payload: ComponentBoundingRectApiPayload) => void;
-    [DevToolsEvents.SCROLL_TO_COMPONENT]: (payload: ScrollToComponentOptions) => void;
     [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void;
     [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: string) => void;
     [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload) => void;
@@ -310,40 +512,44 @@ interface DevToolsEvent {
         treeNode: ComponentTreeNode;
         filter: string;
     }) => void;
-    [DevToolsEvents.ADD_TIMELINE_EVENT]: (payload: TimelineEvent) => 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> = Parameters<DevToolsEvent[T]>;
+
 declare const on: {
-    devtoolsStateUpdated(fn: DevToolsEvent[DevToolsEvents.DEVTOOLS_STATE_UPDATED]): void;
-    routerInfoUpdated(fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]): void;
-    getComponentBoundingRect(fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]): void;
-    inspectComponent(fn: DevToolsEvent[DevToolsEvents.COMPONENT_STATE_INSPECT]): void;
-    visitComponentTree(fn: DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]): void;
-    getInspectorTree(fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_TREE]): void;
-    getInspectorState(fn: DevToolsEvent[DevToolsEvents.GET_INSPECTOR_STATE]): void;
-    sendInspectorTree(fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_TREE]): void;
-    sendInspectorState(fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]): void;
-    addTimelineEvent(fn: DevToolsEvent[DevToolsEvents.ADD_TIMELINE_EVENT]): void;
-    editInspectorState(fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]): void;
-    editComponentState(): void;
-    customTabsUpdated(fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]): void;
-    customCommandsUpdated(fn: DevToolsEvent[DevToolsEvents.CUSTOM_COMMANDS_UPDATED]): void;
+    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 editComponentState: () => void;
+    readonly componentUpdated: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) => 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;
 };
 
-declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): Promise<any>;
+declare function remove(): void;
+
+declare function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction): void;
 
 declare class DevToolsPluginApi {
     on: typeof on;
-    clear: typeof clear;
+    clear: typeof remove;
     constructor();
-    toggleApp(id: string): Promise<void>;
-    addTimelineEvent(payload: TimelineEvent): void;
-    toggleComponentInspector(payload: Parameters<DevToolsEvent[DevToolsEvents.TOGGLE_COMPONENT_INSPECTOR]>[0]): void;
-    inspectComponentInspector(): Promise<string>;
-    scrollToComponent(payload: Parameters<DevToolsEvent[DevToolsEvents.SCROLL_TO_COMPONENT]>[0]): void;
-    getComponentBoundingRect(payload: Parameters<DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]>[0]): string;
-    getInspectorTree(payload?: Parameters<DevToolsEvent[DevToolsEvents.GET_INSPECTOR_TREE]>[0]): Promise<string>;
+    addTimelineLayer(payload: TimelineLayerItem): void;
+    addTimelineEvent(...params: DevToolsEventParams<DevToolsEvents.ADD_TIMELINE_EVENT>): void;
+    addInspector(payload: InspectorApiPayload): void;
+    highlightElement(instance: VueAppInstance): void;
+    unhighlightElement(): void;
+    getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<string>;
     getInspectorState(payload?: {
         inspectorId?: string;
         nodeId?: string;
@@ -351,276 +557,68 @@ declare class DevToolsPluginApi {
     editInspectorState(payload: InspectorStateEditorPayload): Promise<void>;
     sendInspectorTree(inspectorId: string): Promise<void>;
     sendInspectorState(inspectorId: string): Promise<void>;
-    addCustomTab(tab: CustomTab): void;
-    addCustomCommand(action: CustomCommand): void;
-    removeCustomCommand(actionId: CustomCommand['id']): void;
-    addInspector(payload: AddInspectorApiPayload): void;
-    openInEditor(payload: OpenInEditorOptions): void;
-    highlightElement(instance: any): void;
-    unhighlightElement(): void;
-    getComponentInstances(app: any): Promise<any[]>;
-    getVueInspector(): Promise<VueInspector | null>;
-    visitComponentTree(payload: Parameters<DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]>[0]): void;
-    addTimelineLayer(payload: {
-        id: string;
-        label: string;
-        color: number;
-    }): void;
+    getComponentInstances(app: VueAppInstance): Promise<VueAppInstance[]>;
+    visitComponentTree(...params: DevToolsEventParams<DevToolsEvents.VISIT_COMPONENT_TREE>): void;
     notifyComponentUpdate(): void;
     now(): number;
     getSettings(): {
         logStoreChanges: null;
     };
+    toggleComponentInspector(...params: DevToolsEventParams<DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER>): void;
+    inspectComponentInspector(): Promise<string>;
+    scrollToComponent(...params: DevToolsEventParams<DevToolsEvents.SCROLL_TO_COMPONENT>): void;
+    getComponentBoundingRect(...params: DevToolsEventParams<DevToolsEvents.GET_COMPONENT_BOUNDING_RECT>): string;
+    toggleApp(id: string): Promise<void>;
+    addCustomTab(tab: CustomTab): void;
+    addCustomCommand(action: CustomCommand): void;
+    removeCustomCommand(actionId: CustomCommand['id']): void;
+    openInEditor(payload: OpenInEditorOptions): void;
+    getVueInspector(): Promise<ComponentInspector>;
 }
 
+declare const hook: VueHooks;
+
+declare const devtoolsState: DevToolsState;
+
+declare const devtoolsContext: DevToolsContext;
+
+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 function addCustomTab(tab: CustomTab): void;
-
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
 declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
-declare function getRawValue(value: InspectorState['value']): any;
-declare function toEdit(value: unknown): string;
-declare function toSubmit(value: string): any;
+declare function getRaw(value: InspectorState['value']): {
+    value: object | string | number | boolean | null;
+    inherit: {} | {
+        abstract: true;
+    };
+    customType?: customTypeEnums;
+};
+declare function toEdit(value: unknown, customType?: customTypeEnums): string;
+declare function toSubmit(value: string, customType?: customTypeEnums): any;
 
 declare function stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;
 
-declare function now(): number;
-
-declare const vueBuiltins: Set<string>;
-declare const symbolRE: RegExp;
-declare const rawTypeRE: RegExp;
-declare const specialTypeRE: RegExp;
-declare const fnTypeRE: RegExp;
-declare const MAX_STRING_SIZE = 10000;
-declare const MAX_ARRAY_SIZE = 5000;
 declare const UNDEFINED = "__vue_devtool_undefined__";
-declare const INFINITY = "__vue_devtool_infinity__";
-declare const NEGATIVE_INFINITY = "__vue_devtool_negative_infinity__";
-declare const NAN = "__vue_devtool_nan__";
-declare const ESC: {
-    '<': string;
-    '>': string;
-    '"': string;
-    '&': string;
-};
+
+interface DevToolsType {
+    state: typeof devtoolsState;
+    context: typeof devtoolsContext;
+    hook: typeof hook;
+    init: typeof initDevTools;
+    get api(): typeof devtoolsContext.api;
+}
 
 declare const devtools: {
-    state: _vue_devtools_schema_src_types_vue.DevToolsState;
-    context: {
-        appRecord: _vue_devtools_schema_dist.AppRecord;
-        api: DevToolsPluginApi;
-        inspector: {
-            id: string;
-            nodeId: string;
-            filter: string;
-            treeFilterPlaceholder: string;
-        }[];
-        timelineLayer: {
-            id: string;
-            label: string;
-            color: number;
-        }[];
-        routerInfo: RouterInfo;
-        router: vue_router.Router;
-        activeInspectorTreeId: string;
-        componentPluginHookBuffer: (() => void)[];
-        clear: () => void;
-    };
+    state: DevToolsState;
+    context: DevToolsContext;
+    hook: VueHooks;
     init: typeof initDevTools;
-    hook: {
-        on: {
-            vueAppInit(fn: (app: vue.App<any> & vue.ComponentInternalInstance & {
-                type: {
-                    _componentTag: string | undefined;
-                    components: Record<string, vue.ConcreteComponent<{}, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any>>;
-                    __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
-                    __isKeepAlive: boolean;
-                    devtools: {
-                        hide: boolean;
-                    };
-                    mixins: vue.ComponentOptions[];
-                    extends: vue.ComponentOptions;
-                    vuex: {
-                        getters: Record<string, unknown>;
-                    };
-                    computed: Record<string, unknown>;
-                };
-                __v_cache: Map<string | number | symbol | vue.ConcreteComponent, globalThis.VNode<vue.RendererNode, vue.RendererElement, {
-                    [key: string]: any;
-                }>>;
-                __VUE_DEVTOOLS_UID__: string;
-                _isBeingDestroyed: boolean;
-                _instance: _vue_devtools_schema_dist.VueAppInstance;
-                _container: {
-                    _vnode: {
-                        component: _vue_devtools_schema_dist.VueAppInstance;
-                    };
-                };
-                isUnmounted: boolean;
-                parent: _vue_devtools_schema_dist.VueAppInstance;
-                appContext: {
-                    app: vue.ComponentInternalInstance & any & vue.App<any> & {
-                        __VUE_DEVTOOLS_APP_RECORD_ID__: string;
-                        __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                    };
-                };
-                __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                suspense: vue.SuspenseBoundary & {
-                    suspenseKey: string;
-                };
-                renderContext: Record<string, unknown>;
-                devtoolsRawSetupState: Record<string, unknown>;
-                setupState: Record<string, unknown>;
-                provides: Record<string | symbol, unknown>;
-                ctx: Record<string, unknown>;
-            } & {
-                __VUE_DEVTOOLS_APP_RECORD_ID__: string;
-                __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-            }, version: string) => void): void;
-            vueAppConnected(fn: () => void): void;
-            componentAdded(fn: (app: vue.App<any> & vue.ComponentInternalInstance & {
-                type: {
-                    _componentTag: string | undefined;
-                    components: Record<string, vue.ConcreteComponent<{}, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any>>;
-                    __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
-                    __isKeepAlive: boolean;
-                    devtools: {
-                        hide: boolean;
-                    };
-                    mixins: vue.ComponentOptions[];
-                    extends: vue.ComponentOptions;
-                    vuex: {
-                        getters: Record<string, unknown>;
-                    };
-                    computed: Record<string, unknown>;
-                };
-                __v_cache: Map<string | number | symbol | vue.ConcreteComponent, globalThis.VNode<vue.RendererNode, vue.RendererElement, {
-                    [key: string]: any;
-                }>>;
-                __VUE_DEVTOOLS_UID__: string;
-                _isBeingDestroyed: boolean;
-                _instance: _vue_devtools_schema_dist.VueAppInstance;
-                _container: {
-                    _vnode: {
-                        component: _vue_devtools_schema_dist.VueAppInstance;
-                    };
-                };
-                isUnmounted: boolean;
-                parent: _vue_devtools_schema_dist.VueAppInstance;
-                appContext: {
-                    app: vue.ComponentInternalInstance & any & vue.App<any> & {
-                        __VUE_DEVTOOLS_APP_RECORD_ID__: string;
-                        __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                    };
-                };
-                __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                suspense: vue.SuspenseBoundary & {
-                    suspenseKey: string;
-                };
-                renderContext: Record<string, unknown>;
-                devtoolsRawSetupState: Record<string, unknown>;
-                setupState: Record<string, unknown>;
-                provides: Record<string | symbol, unknown>;
-                ctx: Record<string, unknown>;
-            }, uid: number, parentUid: number, component: _vue_devtools_schema_dist.VueAppInstance) => void): () => void;
-            componentUpdated(fn: (app: vue.App<any> & vue.ComponentInternalInstance & {
-                type: {
-                    _componentTag: string | undefined;
-                    components: Record<string, vue.ConcreteComponent<{}, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any>>;
-                    __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
-                    __isKeepAlive: boolean;
-                    devtools: {
-                        hide: boolean;
-                    };
-                    mixins: vue.ComponentOptions[];
-                    extends: vue.ComponentOptions;
-                    vuex: {
-                        getters: Record<string, unknown>;
-                    };
-                    computed: Record<string, unknown>;
-                };
-                __v_cache: Map<string | number | symbol | vue.ConcreteComponent, globalThis.VNode<vue.RendererNode, vue.RendererElement, {
-                    [key: string]: any;
-                }>>;
-                __VUE_DEVTOOLS_UID__: string;
-                _isBeingDestroyed: boolean;
-                _instance: _vue_devtools_schema_dist.VueAppInstance;
-                _container: {
-                    _vnode: {
-                        component: _vue_devtools_schema_dist.VueAppInstance;
-                    };
-                };
-                isUnmounted: boolean;
-                parent: _vue_devtools_schema_dist.VueAppInstance;
-                appContext: {
-                    app: vue.ComponentInternalInstance & any & vue.App<any> & {
-                        __VUE_DEVTOOLS_APP_RECORD_ID__: string;
-                        __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                    };
-                };
-                __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                suspense: vue.SuspenseBoundary & {
-                    suspenseKey: string;
-                };
-                renderContext: Record<string, unknown>;
-                devtoolsRawSetupState: Record<string, unknown>;
-                setupState: Record<string, unknown>;
-                provides: Record<string | symbol, unknown>;
-                ctx: Record<string, unknown>;
-            }, uid: number, parentUid: number, component: _vue_devtools_schema_dist.VueAppInstance) => void): () => void;
-            componentRemoved(fn: (app: vue.App<any> & vue.ComponentInternalInstance & {
-                type: {
-                    _componentTag: string | undefined;
-                    components: Record<string, vue.ConcreteComponent<{}, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any>>;
-                    __VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__: string;
-                    __isKeepAlive: boolean;
-                    devtools: {
-                        hide: boolean;
-                    };
-                    mixins: vue.ComponentOptions[];
-                    extends: vue.ComponentOptions;
-                    vuex: {
-                        getters: Record<string, unknown>;
-                    };
-                    computed: Record<string, unknown>;
-                };
-                __v_cache: Map<string | number | symbol | vue.ConcreteComponent, globalThis.VNode<vue.RendererNode, vue.RendererElement, {
-                    [key: string]: any;
-                }>>;
-                __VUE_DEVTOOLS_UID__: string;
-                _isBeingDestroyed: boolean;
-                _instance: _vue_devtools_schema_dist.VueAppInstance;
-                _container: {
-                    _vnode: {
-                        component: _vue_devtools_schema_dist.VueAppInstance;
-                    };
-                };
-                isUnmounted: boolean;
-                parent: _vue_devtools_schema_dist.VueAppInstance;
-                appContext: {
-                    app: vue.ComponentInternalInstance & any & vue.App<any> & {
-                        __VUE_DEVTOOLS_APP_RECORD_ID__: string;
-                        __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                    };
-                };
-                __VUE_DEVTOOLS_APP_RECORD__: _vue_devtools_schema_dist.AppRecord;
-                suspense: vue.SuspenseBoundary & {
-                    suspenseKey: string;
-                };
-                renderContext: Record<string, unknown>;
-                devtoolsRawSetupState: Record<string, unknown>;
-                setupState: Record<string, unknown>;
-                provides: Record<string | symbol, unknown>;
-                ctx: Record<string, unknown>;
-            }, uid: number, parentUid: number, component: _vue_devtools_schema_dist.VueAppInstance) => void): () => void;
-            setupDevtoolsPlugin(fn: (pluginDescriptor: _vue_devtools_schema_dist.PluginDescriptor, setupFn: _vue_devtools_schema_dist.PluginSetupFunction) => void): void;
-        };
-    };
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, toggleComponentInspectorEnabled, vueBuiltins };
+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 };