@vue/devtools-kit 7.1.2 → 7.2.0

package/dist/index.cjs

@@ -33,9 +33,9 @@ var __toESM = (mod, isNodeMode, target10) => (target10 = mod != null ? __create(
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.7__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.12__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/cjs_shims.js
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.7__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.12__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
   }
 });
@@ -1873,9 +1873,6 @@ function setupExternalPlugin(plugin, app, api) {
   const [pluginDescriptor, setupFn] = plugin;
   if (pluginDescriptor.app !== app)
     return;
-  if (pluginDescriptor.packageName === "vue-query") {
-    return;
-  }
   if (pluginDescriptor.packageName === "vue-router") {
     const id = getRouterDevToolsId(`${pluginDescriptor.id}`);
     if (pluginDescriptor.app === app) {
@@ -1885,10 +1882,26 @@ function setupExternalPlugin(plugin, app, api) {
       }));
     }
   }
-  setupFn(api);
+  const extendedApi = new Proxy(api, {
+    get(target10, prop, receiver) {
+      if (prop === "getSettings") {
+        return function() {
+          const _settings = {};
+          Object.keys(pluginDescriptor.settings).forEach((key) => {
+            _settings[key] = pluginDescriptor.settings[key].defaultValue;
+          });
+          return _settings;
+        };
+      }
+      return Reflect.get(target10, prop, receiver);
+    },
+    set(target10, prop, value, receiver) {
+      return Reflect.set(target10, prop, value, receiver);
+    }
+  });
+  setupFn(extendedApi);
 }
-function registerPlugin(app, api) {
-  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
+function updatePluginDetectives() {
   devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
     var _a10, _b10;
     const globalProperties = (_b10 = (_a10 = record.app) == null ? void 0 : _a10.config) == null ? void 0 : _b10.globalProperties;
@@ -1897,13 +1910,20 @@ function registerPlugin(app, api) {
     return {
       ...record,
       moduleDetectives: {
+        vueQuery: !!getInspector("vue-query"),
+        veeValidate: !!getInspector("vee-validate-inspector"),
         vueRouter: !!globalProperties.$router,
         pinia: !!globalProperties.$pinia,
-        vueI18n: !!globalProperties.$i18n
+        vueI18n: !!globalProperties.$i18n,
+        vuex: !!globalProperties.$store
       }
     };
   });
 }
+function registerPlugin(app, api) {
+  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
+  updatePluginDetectives();
+}
 
 // src/plugins/index.ts
 init_cjs_shims();
@@ -2542,8 +2562,8 @@ var vueBuiltins = /* @__PURE__ */ new Set([
   "withModifiers"
 ]);
 var symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
-var rawTypeRE = /^\[object (\w+)]$/;
-var specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/;
+var rawTypeRE = /^\[object (\w+)\]$/;
+var specialTypeRE = /^\[native (\w+) (.*?)(<>(([\s\S])*))?\]$/;
 var fnTypeRE = /^(?:function|class) (\w+)/;
 var MAX_STRING_SIZE = 1e4;
 var MAX_ARRAY_SIZE = 5e3;
@@ -3416,7 +3436,7 @@ function getSetDetails(val) {
     }
   };
 }
-function getCatchedGetters(store) {
+function getCaughtGetters(store) {
   const getters = {};
   const origGetters = store.getters || {};
   const keys = Object.keys(origGetters);
@@ -3461,7 +3481,7 @@ function getStoreDetails(store) {
       displayText: "Store",
       value: {
         state: store.state,
-        getters: getCatchedGetters(store)
+        getters: getCaughtGetters(store)
       },
       fields: {
         abstract: true
@@ -4011,6 +4031,8 @@ var on2 = {
   visitComponentTree(fn) {
     registerInstanceHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
   },
+  setPluginSettings() {
+  },
   getInspectorTree(fn) {
     registerInstanceHook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
   },
@@ -4080,8 +4102,41 @@ var DevToolsPluginApi = class {
       id: payload.id,
       nodeId: "",
       filter: "",
-      treeFilterPlaceholder: payload.treeFilterPlaceholder || ""
+      treeFilterPlaceholder: payload.treeFilterPlaceholder || "",
+      actions: payload.actions || [],
+      nodeActions: payload.nodeActions || []
     });
+    updatePluginDetectives();
+  }
+  // get inspector node action
+  getInspectorNodeActions(inspectorId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    return ((_a10 = inspector == null ? void 0 : inspector.nodeActions) == null ? void 0 : _a10.map(({ icon, tooltip }) => ({ icon, tooltip }))) || [];
+  }
+  // call inspector node action
+  callInspectorNodeAction(inspectorId, actionIndex, nodeId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    if (inspector && inspector.nodeActions) {
+      const item = inspector.nodeActions[actionIndex];
+      (_a10 = item.action) == null ? void 0 : _a10.call(item, nodeId);
+    }
+  }
+  // get inspector action
+  getInspectorActions(inspectorId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    return ((_a10 = inspector == null ? void 0 : inspector.actions) == null ? void 0 : _a10.map(({ icon, tooltip }) => ({ icon, tooltip }))) || [];
+  }
+  // call inspector action
+  callInspectorAction(inspectorId, actionIndex, nodeId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    if (inspector && inspector.actions) {
+      const item = inspector.actions[actionIndex];
+      (_a10 = item.action) == null ? void 0 : _a10.call(item, nodeId);
+    }
   }
   highlightElement(instance) {
     highlight(instance);
@@ -4119,14 +4174,17 @@ var DevToolsPluginApi = class {
       inspectorId,
       nodeId
     };
+    const ctx = {
+      currentTab: `custom-inspector:${inspectorId}`
+    };
     updateInspector(inspectorId, {
       nodeId
     });
     apiHooks.callHookWith((callbacks) => {
-      callbacks.forEach((cb) => cb(_payload));
+      callbacks.forEach((cb) => cb(_payload, ctx));
     }, "inspector-state:get" /* GET_INSPECTOR_STATE */);
     const state = _payload.state;
-    delete state.instance;
+    state == null ? true : delete state.instance;
     return state;
   }
   async editInspectorState(payload) {
@@ -4177,11 +4235,6 @@ var DevToolsPluginApi = class {
   now() {
     return now();
   }
-  getSettings() {
-    return {
-      logStoreChanges: null
-    };
-  }
   // #endregion compatible with old devtools
   //  #region highlighter
   toggleComponentInspector(...params) {
@@ -4395,7 +4448,7 @@ var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
   }
 });
 var _a8, _b8;
-var appRecordInfo = (_b8 = (_a8 = import_devtools_shared13.target).__VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__ = {
+var appRecordInfo = (_b8 = (_a8 = import_devtools_shared13.target).__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ = {
   id: 0,
   appIds: /* @__PURE__ */ new Set()
 };
@@ -4420,7 +4473,7 @@ function setDevToolsEnv(env) {
 // src/compat/index.ts
 init_cjs_shims();
 var import_devtools_shared15 = require("@vue/devtools-shared");
-function onLegacyDevToolsPluginApiAvailabled(cb) {
+function onLegacyDevToolsPluginApiAvailable(cb) {
   if (import_devtools_shared15.target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
     cb();
     return;
@@ -4455,7 +4508,7 @@ function initDevTools() {
       return;
     setupExternalPlugin([pluginDescriptor, setupFn], app, api);
   });
-  onLegacyDevToolsPluginApiAvailabled(() => {
+  onLegacyDevToolsPluginApiAvailable(() => {
     const normalizedPluginBuffer = devtoolsState.pluginBuffer.filter(([item]) => item.id !== "components");
     normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
       import_devtools_shared16.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
@@ -4473,7 +4526,7 @@ function initDevTools() {
         api
       }
     ];
-    if (devtoolsAppRecords.value.length === 1) {
+    if (devtoolsAppRecords.value.length >= 1) {
       await setActiveAppRecord(devtoolsAppRecords.value[0]);
       devtoolsState.connected = true;
       devtoolsHooks.callHook("app:connected" /* APP_CONNECTED */);
@@ -4481,6 +4534,10 @@ function initDevTools() {
   });
   hook.on.vueAppUnmount(async (app) => {
     const activeRecords = devtoolsAppRecords.value.filter((appRecord) => appRecord.app !== app);
+    if (activeRecords.length === 0) {
+      devtoolsState.connected = false;
+      return;
+    }
     devtoolsAppRecords.value = activeRecords;
     if (devtoolsAppRecords.active.app === app)
       await setActiveAppRecord(activeRecords[0]);

package/dist/index.d.cts

@@ -45,6 +45,16 @@ interface Inspector {
     nodeId: string;
     filter: string;
     treeFilterPlaceholder: string;
+    actions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
+    nodeActions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
 }
 interface InspectorApiPayload {
     id: string;
@@ -56,6 +66,11 @@ interface InspectorApiPayload {
         tooltip: string;
         action: (payload: unknown) => void;
     }[];
+    nodeActions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
 }
 declare function addInspector(payload: Inspector): void;
 declare function getInspector(inspectorId: string): Inspector | undefined;
@@ -152,8 +167,11 @@ interface AppRecord {
     api?: PluginApi;
     routerId?: string;
     moduleDetectives?: {
+        vueQuery: boolean;
         vueRouter: boolean;
+        veeValidate: boolean;
         pinia: boolean;
+        vuex: boolean;
         vueI18n: boolean;
     };
 }
@@ -176,10 +194,10 @@ declare enum DevToolsHooks {
     SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
 }
 interface DevToolsEvent$1 {
-    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void;
+    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void | Promise<void>;
     [DevToolsHooks.APP_CONNECTED]: () => void;
-    [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void;
-    [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
+    [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>;
+    [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>;
     [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
     [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
@@ -365,6 +383,12 @@ interface InspectorTreeApiPayload {
     instanceId?: string;
     rootNodes?: ComponentTreeNode[];
 }
+interface InspectorTree {
+    id: string;
+    label: string;
+    tags?: InspectorNodeTag[];
+    children?: InspectorTree[];
+}
 
 interface ComponentBoundingRect {
     left: number;
@@ -397,6 +421,7 @@ interface InspectorState {
     key: string;
     value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
     type: string;
+    path?: string[];
     stateType?: string;
     stateTypeName?: string;
     meta?: Record<string, boolean | string>;
@@ -512,13 +537,15 @@ interface DevToolsEvent {
         app: VueAppInstance | undefined;
         instanceData: InspectorStateApiPayload['state'];
     }) => void;
-    [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void;
+    [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => Promise<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.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload, ctx: {
+        currentTab: string;
+    }) => Promise<void>;
+    [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => Promise<void>;
     [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void;
     [DevToolsEvents.VISIT_COMPONENT_TREE]: (payload: {
         componentInstance: VueAppInstance | undefined;
@@ -536,6 +563,7 @@ 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 setPluginSettings: () => 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;
@@ -561,6 +589,16 @@ declare class DevToolsPluginApi {
     addTimelineLayer(payload: TimelineLayerItem): void;
     addTimelineEvent(...params: DevToolsEventParams<DevToolsEvents.ADD_TIMELINE_EVENT>): void;
     addInspector(payload: InspectorApiPayload): void;
+    getInspectorNodeActions(inspectorId: string): {
+        icon: string;
+        tooltip: string;
+    }[];
+    callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string): void;
+    getInspectorActions(inspectorId: string): {
+        icon: string;
+        tooltip: string;
+    }[];
+    callInspectorAction(inspectorId: string, actionIndex: number, nodeId: string): void;
     highlightElement(instance: VueAppInstance): void;
     unhighlightElement(): void;
     getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
@@ -575,9 +613,6 @@ declare class DevToolsPluginApi {
     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>;
     cancelInspectComponentInspector(): void;
@@ -644,4 +679,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 DevToolsType, INFINITY, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, NAN, NEGATIVE_INFINITY, 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, cancelInspectComponentHighLighter, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setOpenInEditorBaseUrl, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, 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$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, INFINITY, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, NAN, NEGATIVE_INFINITY, 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, cancelInspectComponentHighLighter, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setOpenInEditorBaseUrl, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateInspector };

package/dist/index.d.ts

@@ -45,6 +45,16 @@ interface Inspector {
     nodeId: string;
     filter: string;
     treeFilterPlaceholder: string;
+    actions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
+    nodeActions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
 }
 interface InspectorApiPayload {
     id: string;
@@ -56,6 +66,11 @@ interface InspectorApiPayload {
         tooltip: string;
         action: (payload: unknown) => void;
     }[];
+    nodeActions?: {
+        icon: string;
+        tooltip: string;
+        action: (payload: unknown) => void;
+    }[];
 }
 declare function addInspector(payload: Inspector): void;
 declare function getInspector(inspectorId: string): Inspector | undefined;
@@ -152,8 +167,11 @@ interface AppRecord {
     api?: PluginApi;
     routerId?: string;
     moduleDetectives?: {
+        vueQuery: boolean;
         vueRouter: boolean;
+        veeValidate: boolean;
         pinia: boolean;
+        vuex: boolean;
         vueI18n: boolean;
     };
 }
@@ -176,10 +194,10 @@ declare enum DevToolsHooks {
     SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
 }
 interface DevToolsEvent$1 {
-    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void;
+    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void | Promise<void>;
     [DevToolsHooks.APP_CONNECTED]: () => void;
-    [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void;
-    [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
+    [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>;
+    [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>;
     [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
     [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
@@ -365,6 +383,12 @@ interface InspectorTreeApiPayload {
     instanceId?: string;
     rootNodes?: ComponentTreeNode[];
 }
+interface InspectorTree {
+    id: string;
+    label: string;
+    tags?: InspectorNodeTag[];
+    children?: InspectorTree[];
+}
 
 interface ComponentBoundingRect {
     left: number;
@@ -397,6 +421,7 @@ interface InspectorState {
     key: string;
     value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
     type: string;
+    path?: string[];
     stateType?: string;
     stateTypeName?: string;
     meta?: Record<string, boolean | string>;
@@ -512,13 +537,15 @@ interface DevToolsEvent {
         app: VueAppInstance | undefined;
         instanceData: InspectorStateApiPayload['state'];
     }) => void;
-    [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void;
+    [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => Promise<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.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload, ctx: {
+        currentTab: string;
+    }) => Promise<void>;
+    [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => Promise<void>;
     [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void;
     [DevToolsEvents.VISIT_COMPONENT_TREE]: (payload: {
         componentInstance: VueAppInstance | undefined;
@@ -536,6 +563,7 @@ 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 setPluginSettings: () => 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;
@@ -561,6 +589,16 @@ declare class DevToolsPluginApi {
     addTimelineLayer(payload: TimelineLayerItem): void;
     addTimelineEvent(...params: DevToolsEventParams<DevToolsEvents.ADD_TIMELINE_EVENT>): void;
     addInspector(payload: InspectorApiPayload): void;
+    getInspectorNodeActions(inspectorId: string): {
+        icon: string;
+        tooltip: string;
+    }[];
+    callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string): void;
+    getInspectorActions(inspectorId: string): {
+        icon: string;
+        tooltip: string;
+    }[];
+    callInspectorAction(inspectorId: string, actionIndex: number, nodeId: string): void;
     highlightElement(instance: VueAppInstance): void;
     unhighlightElement(): void;
     getInspectorTree(payload?: DevToolsEventParams<DevToolsEvents.GET_INSPECTOR_TREE>[0]): Promise<ComponentTreeNode[]>;
@@ -575,9 +613,6 @@ declare class DevToolsPluginApi {
     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>;
     cancelInspectComponentInspector(): void;
@@ -644,4 +679,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 DevToolsType, INFINITY, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, NAN, NEGATIVE_INFINITY, 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, cancelInspectComponentHighLighter, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setOpenInEditorBaseUrl, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, 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$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, INFINITY, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, NAN, NEGATIVE_INFINITY, 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, cancelInspectComponentHighLighter, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setOpenInEditorBaseUrl, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateInspector };

package/dist/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target10) => (target10 = mod != null ? __create(
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.7__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.12__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/esm_shims.js
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.7__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_@microsoft+api-extractor@7.43.0_@types+node@20.12.12__postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1840,9 +1840,6 @@ function setupExternalPlugin(plugin, app, api) {
   const [pluginDescriptor, setupFn] = plugin;
   if (pluginDescriptor.app !== app)
     return;
-  if (pluginDescriptor.packageName === "vue-query") {
-    return;
-  }
   if (pluginDescriptor.packageName === "vue-router") {
     const id = getRouterDevToolsId(`${pluginDescriptor.id}`);
     if (pluginDescriptor.app === app) {
@@ -1852,10 +1849,26 @@ function setupExternalPlugin(plugin, app, api) {
       }));
     }
   }
-  setupFn(api);
+  const extendedApi = new Proxy(api, {
+    get(target10, prop, receiver) {
+      if (prop === "getSettings") {
+        return function() {
+          const _settings = {};
+          Object.keys(pluginDescriptor.settings).forEach((key) => {
+            _settings[key] = pluginDescriptor.settings[key].defaultValue;
+          });
+          return _settings;
+        };
+      }
+      return Reflect.get(target10, prop, receiver);
+    },
+    set(target10, prop, value, receiver) {
+      return Reflect.set(target10, prop, value, receiver);
+    }
+  });
+  setupFn(extendedApi);
 }
-function registerPlugin(app, api) {
-  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
+function updatePluginDetectives() {
   devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
     var _a10, _b10;
     const globalProperties = (_b10 = (_a10 = record.app) == null ? void 0 : _a10.config) == null ? void 0 : _b10.globalProperties;
@@ -1864,13 +1877,20 @@ function registerPlugin(app, api) {
     return {
       ...record,
       moduleDetectives: {
+        vueQuery: !!getInspector("vue-query"),
+        veeValidate: !!getInspector("vee-validate-inspector"),
         vueRouter: !!globalProperties.$router,
         pinia: !!globalProperties.$pinia,
-        vueI18n: !!globalProperties.$i18n
+        vueI18n: !!globalProperties.$i18n,
+        vuex: !!globalProperties.$store
       }
     };
   });
 }
+function registerPlugin(app, api) {
+  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
+  updatePluginDetectives();
+}
 
 // src/plugins/index.ts
 init_esm_shims();
@@ -2509,8 +2529,8 @@ var vueBuiltins = /* @__PURE__ */ new Set([
   "withModifiers"
 ]);
 var symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
-var rawTypeRE = /^\[object (\w+)]$/;
-var specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/;
+var rawTypeRE = /^\[object (\w+)\]$/;
+var specialTypeRE = /^\[native (\w+) (.*?)(<>(([\s\S])*))?\]$/;
 var fnTypeRE = /^(?:function|class) (\w+)/;
 var MAX_STRING_SIZE = 1e4;
 var MAX_ARRAY_SIZE = 5e3;
@@ -3383,7 +3403,7 @@ function getSetDetails(val) {
     }
   };
 }
-function getCatchedGetters(store) {
+function getCaughtGetters(store) {
   const getters = {};
   const origGetters = store.getters || {};
   const keys = Object.keys(origGetters);
@@ -3428,7 +3448,7 @@ function getStoreDetails(store) {
       displayText: "Store",
       value: {
         state: store.state,
-        getters: getCatchedGetters(store)
+        getters: getCaughtGetters(store)
       },
       fields: {
         abstract: true
@@ -3978,6 +3998,8 @@ var on2 = {
   visitComponentTree(fn) {
     registerInstanceHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
   },
+  setPluginSettings() {
+  },
   getInspectorTree(fn) {
     registerInstanceHook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
   },
@@ -4047,8 +4069,41 @@ var DevToolsPluginApi = class {
       id: payload.id,
       nodeId: "",
       filter: "",
-      treeFilterPlaceholder: payload.treeFilterPlaceholder || ""
+      treeFilterPlaceholder: payload.treeFilterPlaceholder || "",
+      actions: payload.actions || [],
+      nodeActions: payload.nodeActions || []
     });
+    updatePluginDetectives();
+  }
+  // get inspector node action
+  getInspectorNodeActions(inspectorId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    return ((_a10 = inspector == null ? void 0 : inspector.nodeActions) == null ? void 0 : _a10.map(({ icon, tooltip }) => ({ icon, tooltip }))) || [];
+  }
+  // call inspector node action
+  callInspectorNodeAction(inspectorId, actionIndex, nodeId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    if (inspector && inspector.nodeActions) {
+      const item = inspector.nodeActions[actionIndex];
+      (_a10 = item.action) == null ? void 0 : _a10.call(item, nodeId);
+    }
+  }
+  // get inspector action
+  getInspectorActions(inspectorId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    return ((_a10 = inspector == null ? void 0 : inspector.actions) == null ? void 0 : _a10.map(({ icon, tooltip }) => ({ icon, tooltip }))) || [];
+  }
+  // call inspector action
+  callInspectorAction(inspectorId, actionIndex, nodeId) {
+    var _a10;
+    const inspector = getInspector(inspectorId);
+    if (inspector && inspector.actions) {
+      const item = inspector.actions[actionIndex];
+      (_a10 = item.action) == null ? void 0 : _a10.call(item, nodeId);
+    }
   }
   highlightElement(instance) {
     highlight(instance);
@@ -4086,14 +4141,17 @@ var DevToolsPluginApi = class {
       inspectorId,
       nodeId
     };
+    const ctx = {
+      currentTab: `custom-inspector:${inspectorId}`
+    };
     updateInspector(inspectorId, {
       nodeId
     });
     apiHooks.callHookWith((callbacks) => {
-      callbacks.forEach((cb) => cb(_payload));
+      callbacks.forEach((cb) => cb(_payload, ctx));
     }, "inspector-state:get" /* GET_INSPECTOR_STATE */);
     const state = _payload.state;
-    delete state.instance;
+    state == null ? true : delete state.instance;
     return state;
   }
   async editInspectorState(payload) {
@@ -4144,11 +4202,6 @@ var DevToolsPluginApi = class {
   now() {
     return now();
   }
-  getSettings() {
-    return {
-      logStoreChanges: null
-    };
-  }
   // #endregion compatible with old devtools
   //  #region highlighter
   toggleComponentInspector(...params) {
@@ -4362,7 +4415,7 @@ var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
   }
 });
 var _a8, _b8;
-var appRecordInfo = (_b8 = (_a8 = target6).__VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__ = {
+var appRecordInfo = (_b8 = (_a8 = target6).__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ = {
   id: 0,
   appIds: /* @__PURE__ */ new Set()
 };
@@ -4387,7 +4440,7 @@ function setDevToolsEnv(env) {
 // src/compat/index.ts
 init_esm_shims();
 import { target as target8 } from "@vue/devtools-shared";
-function onLegacyDevToolsPluginApiAvailabled(cb) {
+function onLegacyDevToolsPluginApiAvailable(cb) {
   if (target8.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
     cb();
     return;
@@ -4422,7 +4475,7 @@ function initDevTools() {
       return;
     setupExternalPlugin([pluginDescriptor, setupFn], app, api);
   });
-  onLegacyDevToolsPluginApiAvailabled(() => {
+  onLegacyDevToolsPluginApiAvailable(() => {
     const normalizedPluginBuffer = devtoolsState.pluginBuffer.filter(([item]) => item.id !== "components");
     normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
       target9.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
@@ -4440,7 +4493,7 @@ function initDevTools() {
         api
       }
     ];
-    if (devtoolsAppRecords.value.length === 1) {
+    if (devtoolsAppRecords.value.length >= 1) {
       await setActiveAppRecord(devtoolsAppRecords.value[0]);
       devtoolsState.connected = true;
       devtoolsHooks.callHook("app:connected" /* APP_CONNECTED */);
@@ -4448,6 +4501,10 @@ function initDevTools() {
   });
   hook.on.vueAppUnmount(async (app) => {
     const activeRecords = devtoolsAppRecords.value.filter((appRecord) => appRecord.app !== app);
+    if (activeRecords.length === 0) {
+      devtoolsState.connected = false;
+      return;
+    }
     devtoolsAppRecords.value = activeRecords;
     if (devtoolsAppRecords.active.app === app)
       await setActiveAppRecord(activeRecords[0]);

package/global.d.ts

@@ -5,7 +5,7 @@ declare global {
   var __VUE_DEVTOOLS_GLOBAL_HOOK__: DevToolsHook
   var __VUE_DEVTOOLS_GLOBAL_STATE__: DevToolsState
   var __VUE_DEVTOOLS_CONTEXT__: DevToolsContext
-  var __VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__: {
+  var __VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__: {
     id: number
     appIds: Set<string>
   }

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.1.2",
+  "version": "7.2.0",
   "author": "webfansplz",
   "license": "MIT",
+  "repository": {
+    "directory": "packages/devtools-kit",
+    "type": "git",
+    "url": "git+https://github.com/vuejs/devtools-next.git"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -25,11 +30,11 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-shared": "^7.1.2"
+    "@vue/devtools-shared": "^7.2.0"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
-    "vue": "^3.4.23",
+    "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
   "scripts": {