@vue/devtools-kit 7.0.27 → 7.1.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_postcss@8.4.38_typescript@5.4.4/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_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_postcss@8.4.38_typescript@5.4.4/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
   }
 });
@@ -1581,6 +1581,9 @@ var require_speakingurl2 = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  INFINITY: () => INFINITY,
+  NAN: () => NAN,
+  NEGATIVE_INFINITY: () => NEGATIVE_INFINITY,
   UNDEFINED: () => UNDEFINED,
   addCustomCommand: () => addCustomCommand,
   addCustomTab: () => addCustomTab,
@@ -1588,11 +1591,13 @@ __export(src_exports, {
   formatInspectorStateValue: () => formatInspectorStateValue,
   getInspectorStateValueType: () => getInspectorStateValueType,
   getRaw: () => getRaw,
+  isPlainObject: () => isPlainObject,
   onDevToolsClientConnected: () => onDevToolsClientConnected,
   onDevToolsConnected: () => onDevToolsConnected,
   parse: () => parse,
   removeCustomCommand: () => removeCustomCommand,
   setDevToolsEnv: () => setDevToolsEnv,
+  setOpenInEditorBaseUrl: () => setOpenInEditorBaseUrl,
   setupDevToolsPlugin: () => setupDevToolsPlugin,
   stringify: () => stringify,
   toEdit: () => toEdit,
@@ -1640,6 +1645,9 @@ var on = {
   vueAppInit(fn) {
     devtoolsHooks.hook("app:init" /* APP_INIT */, fn);
   },
+  vueAppUnmount(fn) {
+    devtoolsHooks.hook("app:unmount" /* APP_UNMOUNT */, fn);
+  },
   vueAppConnected(fn) {
     devtoolsHooks.hook("app:connected" /* APP_CONNECTED */, fn);
   },
@@ -1701,6 +1709,9 @@ function subscribeDevToolsHook() {
       return;
     devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
   });
+  hook2.on("app:unmount" /* APP_UNMOUNT */, (app) => {
+    devtoolsHooks.callHook("app:unmount" /* APP_UNMOUNT */, app);
+  });
   hook2.on("component:added" /* COMPONENT_ADDED */, async (app, uid, parentUid, component) => {
     var _a10, _b10, _c;
     if ((_c = (_b10 = (_a10 = app == null ? void 0 : app._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
@@ -1783,6 +1794,11 @@ var import_devtools_shared2 = require("@vue/devtools-shared");
 var import_hookable2 = require("hookable");
 var _a2, _b2;
 var apiHooks = (_b2 = (_a2 = import_devtools_shared2.target).__VUE_DEVTOOLS_API_HOOK) != null ? _b2 : _a2.__VUE_DEVTOOLS_API_HOOK = (0, import_hookable2.createHooks)();
+var instanceHooks = [];
+var registerInstanceHook = (...args) => {
+  const unregister = apiHooks.hook(...args);
+  instanceHooks.push(unregister);
+};
 
 // src/core/router/index.ts
 function getRoutes(router) {
@@ -1817,7 +1833,7 @@ function filterCurrentRoute(route) {
   }
   return route;
 }
-function normalizeRouterInfo(appRecord) {
+function normalizeRouterInfo(appRecord, state) {
   function init() {
     var _a10;
     const router = (_a10 = appRecord.app) == null ? void 0 : _a10.config.globalProperties.$router;
@@ -1835,6 +1851,9 @@ function normalizeRouterInfo(appRecord) {
   }
   init();
   hook.on.componentUpdated((0, import_perfect_debounce.debounce)(() => {
+    var _a10;
+    if (((_a10 = state.activeAppRecord) == null ? void 0 : _a10.app) !== appRecord.app)
+      return;
     init();
     apiHooks.callHook("router-info:updated" /* ROUTER_INFO_UPDATED */, import_devtools_shared3.target[ROUTER_INFO_KEY]);
   }, 200));
@@ -1965,7 +1984,7 @@ function getInstanceName(instance) {
 function getUniqueComponentId(instance) {
   var _a10, _b10, _c;
   const appId = (_c = (_b10 = (_a10 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a10.app) == null ? void 0 : _b10.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__) != null ? _c : 0;
-  const instanceId = instance === instance.root ? "root" : instance.uid;
+  const instanceId = instance === (instance == null ? void 0 : instance.root) ? "root" : instance.uid;
   return `${appId}:${instanceId}`;
 }
 function getRenderKey(value) {
@@ -2714,7 +2733,7 @@ function processSetupState(instance) {
     const value = returnError(() => toRaw2(instance.setupState[key]));
     const rawData = raw[key];
     let result;
-    let isOtherType = typeof value === "function" || typeof (value == null ? void 0 : value.render) === "function" || typeof (value == null ? void 0 : value.__asyncLoader) === "function";
+    let isOtherType = typeof value === "function" || typeof (value == null ? void 0 : value.render) === "function" || typeof (value == null ? void 0 : value.__asyncLoader) === "function" || typeof value === "object" && value && ("setup" in value || "props" in value) || /^v[A-Z]/.test(key);
     if (rawData) {
       const info = getSetupStateType(rawData);
       const { stateType, stateTypeName } = getStateTypeAndName(info);
@@ -3256,6 +3275,12 @@ function selectComponentFn(e, cb) {
     });
   }
 }
+var inspectComponentHighLighterSelectFn = null;
+function cancelInspectComponentHighLighter() {
+  window.removeEventListener("mouseover", inspectFn);
+  window.removeEventListener("click", inspectComponentHighLighterSelectFn, true);
+  inspectComponentHighLighterSelectFn = null;
+}
 function inspectComponentHighLighter() {
   window.addEventListener("mouseover", inspectFn);
   return new Promise((resolve) => {
@@ -3264,6 +3289,7 @@ function inspectComponentHighLighter() {
       e.stopPropagation();
       selectComponentFn(e, (id) => {
         window.removeEventListener("click", onSelect, true);
+        inspectComponentHighLighterSelectFn = null;
         window.removeEventListener("mouseover", inspectFn);
         const el = getContainerElement();
         if (el)
@@ -3271,6 +3297,7 @@ function inspectComponentHighLighter() {
         resolve(JSON.stringify({ id }));
       });
     }
+    inspectComponentHighLighterSelectFn = onSelect;
     window.addEventListener("click", onSelect, true);
   });
 }
@@ -3338,7 +3365,7 @@ function getFunctionDetails(func) {
   return {
     _custom: {
       type: "function",
-      displayText: `<span style="opacity:.5;">function</span> ${escape(name)}${args}`,
+      displayText: `<span style="opacity:.5;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
       tooltipText: string.trim() ? `<pre>${string}</pre>` : null
     }
   };
@@ -3956,11 +3983,16 @@ function getComponentInspector() {
 // src/core/open-in-editor/index.ts
 init_cjs_shims();
 var import_devtools_shared9 = require("@vue/devtools-shared");
+function setOpenInEditorBaseUrl(url) {
+  import_devtools_shared9.target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url;
+}
 function openInEditor(options = {}) {
+  var _a10;
   const { file, baseUrl = window.location.origin, line = 0, column = 0 } = options;
   if (file) {
     if (devtoolsState.vitePluginDetected) {
-      import_devtools_shared9.target.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column);
+      const _baseUrl = (_a10 = import_devtools_shared9.target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__) != null ? _a10 : baseUrl;
+      import_devtools_shared9.target.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column);
     } else {
     }
   }
@@ -3971,50 +4003,50 @@ init_cjs_shims();
 var on2 = {
   // #region compatible with old devtools
   addTimelineEvent(fn) {
-    apiHooks.hook("timeline:add-event" /* ADD_TIMELINE_EVENT */, fn);
+    registerInstanceHook("timeline:add-event" /* ADD_TIMELINE_EVENT */, fn);
   },
   inspectComponent(fn) {
-    apiHooks.hook("component-state:inspect" /* COMPONENT_STATE_INSPECT */, fn);
+    registerInstanceHook("component-state:inspect" /* COMPONENT_STATE_INSPECT */, fn);
   },
   visitComponentTree(fn) {
-    apiHooks.hook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
+    registerInstanceHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
   },
   getInspectorTree(fn) {
-    apiHooks.hook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
+    registerInstanceHook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
   },
   getInspectorState(fn) {
-    apiHooks.hook("inspector-state:get" /* GET_INSPECTOR_STATE */, fn);
+    registerInstanceHook("inspector-state:get" /* GET_INSPECTOR_STATE */, fn);
   },
   sendInspectorTree(fn) {
-    apiHooks.hook("inspector-tree:send" /* SEND_INSPECTOR_TREE */, fn);
+    registerInstanceHook("inspector-tree:send" /* SEND_INSPECTOR_TREE */, fn);
   },
   sendInspectorState(fn) {
-    apiHooks.hook("inspector-state:send" /* SEND_INSPECTOR_STATE */, fn);
+    registerInstanceHook("inspector-state:send" /* SEND_INSPECTOR_STATE */, fn);
   },
   editInspectorState(fn) {
-    apiHooks.hook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, fn);
+    registerInstanceHook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, fn);
   },
   editComponentState() {
   },
   componentUpdated(fn) {
-    apiHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
+    registerInstanceHook("component:updated" /* COMPONENT_UPDATED */, fn);
   },
   // #endregion compatible with old devtools
   // router
   routerInfoUpdated(fn) {
-    apiHooks.hook("router-info:updated" /* ROUTER_INFO_UPDATED */, fn);
+    registerInstanceHook("router-info:updated" /* ROUTER_INFO_UPDATED */, fn);
   },
   // component highlighter
   getComponentBoundingRect(fn) {
-    apiHooks.hook("component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */, fn);
+    registerInstanceHook("component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */, fn);
   },
   // custom tabs
   customTabsUpdated(fn) {
-    apiHooks.hook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, fn);
+    registerInstanceHook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, fn);
   },
   // custom commands
   customCommandsUpdated(fn) {
-    apiHooks.hook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, fn);
+    registerInstanceHook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, fn);
   },
   devtoolsStateUpdated(fn) {
     apiHooks.hook("devtools:state-updated" /* DEVTOOLS_STATE_UPDATED */, fn);
@@ -4024,7 +4056,7 @@ var on2 = {
 // src/api/off.ts
 init_cjs_shims();
 function remove() {
-  apiHooks.removeAllHooks();
+  instanceHooks.forEach((unregister) => unregister());
 }
 
 // src/api/api.ts
@@ -4158,9 +4190,17 @@ var DevToolsPluginApi = class {
   inspectComponentInspector() {
     return inspectComponentHighLighter();
   }
+  cancelInspectComponentInspector() {
+    return cancelInspectComponentHighLighter();
+  }
   scrollToComponent(...params) {
     return scrollToComponent(...params);
   }
+  getComponentRenderCode(id) {
+    const instance = getComponentInstance(devtoolsContext.appRecord, id);
+    if (instance)
+      return !((instance == null ? void 0 : instance.type) instanceof Function) ? instance.render.toString() : instance.type.toString();
+  }
   getComponentBoundingRect(...params) {
     var _a10;
     const { inspectorId, instanceId = "" } = params[0];
@@ -4343,7 +4383,7 @@ var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
       devtoolsContext.appRecord = _value;
       devtoolsContext.api = _value.api;
       devtoolsContext.inspector = (_a10 = _value.inspector) != null ? _a10 : [];
-      normalizeRouterInfo(value);
+      normalizeRouterInfo(value, devtoolsState);
       devtoolsContext.routerInfo = devtoolsRouterInfo;
     } else if (property === "activeId") {
       devtoolsState.activeAppRecordId = value;
@@ -4439,6 +4479,12 @@ function initDevTools() {
       devtoolsHooks.callHook("app:connected" /* APP_CONNECTED */);
     }
   });
+  hook.on.vueAppUnmount(async (app) => {
+    const activeRecords = devtoolsAppRecords.value.filter((appRecord) => appRecord.app !== app);
+    devtoolsAppRecords.value = activeRecords;
+    if (devtoolsAppRecords.active.app === app)
+      await setActiveAppRecord(activeRecords[0]);
+  });
   subscribeDevToolsHook();
 }
 function onDevToolsConnected(fn) {
@@ -4490,6 +4536,9 @@ var devtools = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  INFINITY,
+  NAN,
+  NEGATIVE_INFINITY,
   UNDEFINED,
   addCustomCommand,
   addCustomTab,
@@ -4497,11 +4546,13 @@ var devtools = {
   formatInspectorStateValue,
   getInspectorStateValueType,
   getRaw,
+  isPlainObject,
   onDevToolsClientConnected,
   onDevToolsConnected,
   parse,
   removeCustomCommand,
   setDevToolsEnv,
+  setOpenInEditorBaseUrl,
   setupDevToolsPlugin,
   stringify,
   toEdit,

package/dist/index.d.cts

@@ -178,6 +178,7 @@ declare enum DevToolsHooks {
 interface DevToolsEvent$1 {
     [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => 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.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
@@ -203,6 +204,7 @@ interface DevToolsHook {
 interface VueHooks {
     on: {
         vueAppInit: (fn: DevToolsEvent$1[DevToolsHooks.APP_INIT]) => void;
+        vueAppUnmount: (fn: DevToolsEvent$1[DevToolsHooks.APP_UNMOUNT]) => 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;
@@ -456,6 +458,7 @@ interface OpenInEditorOptions {
     line?: number;
     column?: number;
 }
+declare function setOpenInEditorBaseUrl(url: string): void;
 declare function openInEditor(options?: OpenInEditorOptions): void;
 
 interface ComponentHighLighterOptions {
@@ -471,6 +474,7 @@ interface ScrollToComponentOptions {
 declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
 declare function highlight(instance: VueAppInstance): void;
 declare function unhighlight(): void;
+declare function cancelInspectComponentHighLighter(): void;
 declare function inspectComponentHighLighter(): Promise<string>;
 declare function scrollToComponent(options: ScrollToComponentOptions): void;
 
@@ -483,6 +487,7 @@ declare enum DevToolsEvents {
     TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
     GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
     SCROLL_TO_COMPONENT = "scroll-to-component",
+    GET_COMPONENT_RENDER_CODE = "component-render-code:get",
     GET_INSPECTOR_TREE = "inspector-tree:get",
     SEND_INSPECTOR_TREE = "inspector-tree:send",
     GET_INSPECTOR_STATE = "inspector-state:get",
@@ -498,6 +503,7 @@ interface DevToolsEvent {
     [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
     [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void;
     [DevToolsEvents.SCROLL_TO_COMPONENT]: (payload: ScrollToComponentOptions) => void;
+    [DevToolsEvents.GET_COMPONENT_RENDER_CODE]: (id: string) => 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;
@@ -574,7 +580,9 @@ declare class DevToolsPluginApi {
     };
     toggleComponentInspector(...params: DevToolsEventParams<DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER>): void;
     inspectComponentInspector(): Promise<string>;
+    cancelInspectComponentInspector(): void;
     scrollToComponent(...params: DevToolsEventParams<DevToolsEvents.SCROLL_TO_COMPONENT>): void;
+    getComponentRenderCode(id: string): any;
     getComponentBoundingRect(...params: DevToolsEventParams<DevToolsEvents.GET_COMPONENT_BOUNDING_RECT>): string;
     toggleApp(id: string): Promise<void>;
     addCustomTab(tab: CustomTab): void;
@@ -614,6 +622,11 @@ declare function stringify<T extends object = Record<string, unknown>>(data: T):
 declare function parse(data: string, revive?: boolean): any;
 
 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 function isPlainObject(obj: unknown): boolean;
 
 interface DevToolsType {
     state: typeof devtoolsState;
@@ -631,4 +644,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, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateInspector };
+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 };

package/dist/index.d.ts

@@ -178,6 +178,7 @@ declare enum DevToolsHooks {
 interface DevToolsEvent$1 {
     [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => 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.COMPONENT_UPDATED]: DevToolsEvent$1['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent$1['component:added'];
@@ -203,6 +204,7 @@ interface DevToolsHook {
 interface VueHooks {
     on: {
         vueAppInit: (fn: DevToolsEvent$1[DevToolsHooks.APP_INIT]) => void;
+        vueAppUnmount: (fn: DevToolsEvent$1[DevToolsHooks.APP_UNMOUNT]) => 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;
@@ -456,6 +458,7 @@ interface OpenInEditorOptions {
     line?: number;
     column?: number;
 }
+declare function setOpenInEditorBaseUrl(url: string): void;
 declare function openInEditor(options?: OpenInEditorOptions): void;
 
 interface ComponentHighLighterOptions {
@@ -471,6 +474,7 @@ interface ScrollToComponentOptions {
 declare function toggleComponentHighLighter(options: ComponentHighLighterOptions): void;
 declare function highlight(instance: VueAppInstance): void;
 declare function unhighlight(): void;
+declare function cancelInspectComponentHighLighter(): void;
 declare function inspectComponentHighLighter(): Promise<string>;
 declare function scrollToComponent(options: ScrollToComponentOptions): void;
 
@@ -483,6 +487,7 @@ declare enum DevToolsEvents {
     TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
     GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
     SCROLL_TO_COMPONENT = "scroll-to-component",
+    GET_COMPONENT_RENDER_CODE = "component-render-code:get",
     GET_INSPECTOR_TREE = "inspector-tree:get",
     SEND_INSPECTOR_TREE = "inspector-tree:send",
     GET_INSPECTOR_STATE = "inspector-state:get",
@@ -498,6 +503,7 @@ interface DevToolsEvent {
     [DevToolsEvents.ROUTER_INFO_UPDATED]: (routerInfo: RouterInfo) => void;
     [DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER]: (payload: ComponentHighLighterOptions) => void;
     [DevToolsEvents.SCROLL_TO_COMPONENT]: (payload: ScrollToComponentOptions) => void;
+    [DevToolsEvents.GET_COMPONENT_RENDER_CODE]: (id: string) => 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;
@@ -574,7 +580,9 @@ declare class DevToolsPluginApi {
     };
     toggleComponentInspector(...params: DevToolsEventParams<DevToolsEvents.TOGGLE_COMPONENT_HIGHLIGHTER>): void;
     inspectComponentInspector(): Promise<string>;
+    cancelInspectComponentInspector(): void;
     scrollToComponent(...params: DevToolsEventParams<DevToolsEvents.SCROLL_TO_COMPONENT>): void;
+    getComponentRenderCode(id: string): any;
     getComponentBoundingRect(...params: DevToolsEventParams<DevToolsEvents.GET_COMPONENT_BOUNDING_RECT>): string;
     toggleApp(id: string): Promise<void>;
     addCustomTab(tab: CustomTab): void;
@@ -614,6 +622,11 @@ declare function stringify<T extends object = Record<string, unknown>>(data: T):
 declare function parse(data: string, revive?: boolean): any;
 
 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 function isPlainObject(obj: unknown): boolean;
 
 interface DevToolsType {
     state: typeof devtoolsState;
@@ -631,4 +644,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, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateInspector };
+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 };

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_postcss@8.4.38_typescript@5.4.4/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_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_postcss@8.4.38_typescript@5.4.4/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.4.5/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1612,6 +1612,9 @@ var on = {
   vueAppInit(fn) {
     devtoolsHooks.hook("app:init" /* APP_INIT */, fn);
   },
+  vueAppUnmount(fn) {
+    devtoolsHooks.hook("app:unmount" /* APP_UNMOUNT */, fn);
+  },
   vueAppConnected(fn) {
     devtoolsHooks.hook("app:connected" /* APP_CONNECTED */, fn);
   },
@@ -1673,6 +1676,9 @@ function subscribeDevToolsHook() {
       return;
     devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
   });
+  hook2.on("app:unmount" /* APP_UNMOUNT */, (app) => {
+    devtoolsHooks.callHook("app:unmount" /* APP_UNMOUNT */, app);
+  });
   hook2.on("component:added" /* COMPONENT_ADDED */, async (app, uid, parentUid, component) => {
     var _a10, _b10, _c;
     if ((_c = (_b10 = (_a10 = app == null ? void 0 : app._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
@@ -1755,6 +1761,11 @@ import { target as target2 } from "@vue/devtools-shared";
 import { createHooks as createHooks2 } from "hookable";
 var _a2, _b2;
 var apiHooks = (_b2 = (_a2 = target2).__VUE_DEVTOOLS_API_HOOK) != null ? _b2 : _a2.__VUE_DEVTOOLS_API_HOOK = createHooks2();
+var instanceHooks = [];
+var registerInstanceHook = (...args) => {
+  const unregister = apiHooks.hook(...args);
+  instanceHooks.push(unregister);
+};
 
 // src/core/router/index.ts
 function getRoutes(router) {
@@ -1789,7 +1800,7 @@ function filterCurrentRoute(route) {
   }
   return route;
 }
-function normalizeRouterInfo(appRecord) {
+function normalizeRouterInfo(appRecord, state) {
   function init() {
     var _a10;
     const router = (_a10 = appRecord.app) == null ? void 0 : _a10.config.globalProperties.$router;
@@ -1807,6 +1818,9 @@ function normalizeRouterInfo(appRecord) {
   }
   init();
   hook.on.componentUpdated(debounce(() => {
+    var _a10;
+    if (((_a10 = state.activeAppRecord) == null ? void 0 : _a10.app) !== appRecord.app)
+      return;
     init();
     apiHooks.callHook("router-info:updated" /* ROUTER_INFO_UPDATED */, global[ROUTER_INFO_KEY]);
   }, 200));
@@ -1937,7 +1951,7 @@ function getInstanceName(instance) {
 function getUniqueComponentId(instance) {
   var _a10, _b10, _c;
   const appId = (_c = (_b10 = (_a10 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a10.app) == null ? void 0 : _b10.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__) != null ? _c : 0;
-  const instanceId = instance === instance.root ? "root" : instance.uid;
+  const instanceId = instance === (instance == null ? void 0 : instance.root) ? "root" : instance.uid;
   return `${appId}:${instanceId}`;
 }
 function getRenderKey(value) {
@@ -2686,7 +2700,7 @@ function processSetupState(instance) {
     const value = returnError(() => toRaw2(instance.setupState[key]));
     const rawData = raw[key];
     let result;
-    let isOtherType = typeof value === "function" || typeof (value == null ? void 0 : value.render) === "function" || typeof (value == null ? void 0 : value.__asyncLoader) === "function";
+    let isOtherType = typeof value === "function" || typeof (value == null ? void 0 : value.render) === "function" || typeof (value == null ? void 0 : value.__asyncLoader) === "function" || typeof value === "object" && value && ("setup" in value || "props" in value) || /^v[A-Z]/.test(key);
     if (rawData) {
       const info = getSetupStateType(rawData);
       const { stateType, stateTypeName } = getStateTypeAndName(info);
@@ -3228,6 +3242,12 @@ function selectComponentFn(e, cb) {
     });
   }
 }
+var inspectComponentHighLighterSelectFn = null;
+function cancelInspectComponentHighLighter() {
+  window.removeEventListener("mouseover", inspectFn);
+  window.removeEventListener("click", inspectComponentHighLighterSelectFn, true);
+  inspectComponentHighLighterSelectFn = null;
+}
 function inspectComponentHighLighter() {
   window.addEventListener("mouseover", inspectFn);
   return new Promise((resolve) => {
@@ -3236,6 +3256,7 @@ function inspectComponentHighLighter() {
       e.stopPropagation();
       selectComponentFn(e, (id) => {
         window.removeEventListener("click", onSelect, true);
+        inspectComponentHighLighterSelectFn = null;
         window.removeEventListener("mouseover", inspectFn);
         const el = getContainerElement();
         if (el)
@@ -3243,6 +3264,7 @@ function inspectComponentHighLighter() {
         resolve(JSON.stringify({ id }));
       });
     }
+    inspectComponentHighLighterSelectFn = onSelect;
     window.addEventListener("click", onSelect, true);
   });
 }
@@ -3310,7 +3332,7 @@ function getFunctionDetails(func) {
   return {
     _custom: {
       type: "function",
-      displayText: `<span style="opacity:.5;">function</span> ${escape(name)}${args}`,
+      displayText: `<span style="opacity:.5;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
       tooltipText: string.trim() ? `<pre>${string}</pre>` : null
     }
   };
@@ -3928,11 +3950,16 @@ function getComponentInspector() {
 // src/core/open-in-editor/index.ts
 init_esm_shims();
 import { target as target5 } from "@vue/devtools-shared";
+function setOpenInEditorBaseUrl(url) {
+  target5.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url;
+}
 function openInEditor(options = {}) {
+  var _a10;
   const { file, baseUrl = window.location.origin, line = 0, column = 0 } = options;
   if (file) {
     if (devtoolsState.vitePluginDetected) {
-      target5.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column);
+      const _baseUrl = (_a10 = target5.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__) != null ? _a10 : baseUrl;
+      target5.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column);
     } else {
     }
   }
@@ -3943,50 +3970,50 @@ init_esm_shims();
 var on2 = {
   // #region compatible with old devtools
   addTimelineEvent(fn) {
-    apiHooks.hook("timeline:add-event" /* ADD_TIMELINE_EVENT */, fn);
+    registerInstanceHook("timeline:add-event" /* ADD_TIMELINE_EVENT */, fn);
   },
   inspectComponent(fn) {
-    apiHooks.hook("component-state:inspect" /* COMPONENT_STATE_INSPECT */, fn);
+    registerInstanceHook("component-state:inspect" /* COMPONENT_STATE_INSPECT */, fn);
   },
   visitComponentTree(fn) {
-    apiHooks.hook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
+    registerInstanceHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
   },
   getInspectorTree(fn) {
-    apiHooks.hook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
+    registerInstanceHook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
   },
   getInspectorState(fn) {
-    apiHooks.hook("inspector-state:get" /* GET_INSPECTOR_STATE */, fn);
+    registerInstanceHook("inspector-state:get" /* GET_INSPECTOR_STATE */, fn);
   },
   sendInspectorTree(fn) {
-    apiHooks.hook("inspector-tree:send" /* SEND_INSPECTOR_TREE */, fn);
+    registerInstanceHook("inspector-tree:send" /* SEND_INSPECTOR_TREE */, fn);
   },
   sendInspectorState(fn) {
-    apiHooks.hook("inspector-state:send" /* SEND_INSPECTOR_STATE */, fn);
+    registerInstanceHook("inspector-state:send" /* SEND_INSPECTOR_STATE */, fn);
   },
   editInspectorState(fn) {
-    apiHooks.hook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, fn);
+    registerInstanceHook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, fn);
   },
   editComponentState() {
   },
   componentUpdated(fn) {
-    apiHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
+    registerInstanceHook("component:updated" /* COMPONENT_UPDATED */, fn);
   },
   // #endregion compatible with old devtools
   // router
   routerInfoUpdated(fn) {
-    apiHooks.hook("router-info:updated" /* ROUTER_INFO_UPDATED */, fn);
+    registerInstanceHook("router-info:updated" /* ROUTER_INFO_UPDATED */, fn);
   },
   // component highlighter
   getComponentBoundingRect(fn) {
-    apiHooks.hook("component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */, fn);
+    registerInstanceHook("component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */, fn);
   },
   // custom tabs
   customTabsUpdated(fn) {
-    apiHooks.hook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, fn);
+    registerInstanceHook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, fn);
   },
   // custom commands
   customCommandsUpdated(fn) {
-    apiHooks.hook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, fn);
+    registerInstanceHook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, fn);
   },
   devtoolsStateUpdated(fn) {
     apiHooks.hook("devtools:state-updated" /* DEVTOOLS_STATE_UPDATED */, fn);
@@ -3996,7 +4023,7 @@ var on2 = {
 // src/api/off.ts
 init_esm_shims();
 function remove() {
-  apiHooks.removeAllHooks();
+  instanceHooks.forEach((unregister) => unregister());
 }
 
 // src/api/api.ts
@@ -4130,9 +4157,17 @@ var DevToolsPluginApi = class {
   inspectComponentInspector() {
     return inspectComponentHighLighter();
   }
+  cancelInspectComponentInspector() {
+    return cancelInspectComponentHighLighter();
+  }
   scrollToComponent(...params) {
     return scrollToComponent(...params);
   }
+  getComponentRenderCode(id) {
+    const instance = getComponentInstance(devtoolsContext.appRecord, id);
+    if (instance)
+      return !((instance == null ? void 0 : instance.type) instanceof Function) ? instance.render.toString() : instance.type.toString();
+  }
   getComponentBoundingRect(...params) {
     var _a10;
     const { inspectorId, instanceId = "" } = params[0];
@@ -4315,7 +4350,7 @@ var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
       devtoolsContext.appRecord = _value;
       devtoolsContext.api = _value.api;
       devtoolsContext.inspector = (_a10 = _value.inspector) != null ? _a10 : [];
-      normalizeRouterInfo(value);
+      normalizeRouterInfo(value, devtoolsState);
       devtoolsContext.routerInfo = devtoolsRouterInfo;
     } else if (property === "activeId") {
       devtoolsState.activeAppRecordId = value;
@@ -4411,6 +4446,12 @@ function initDevTools() {
       devtoolsHooks.callHook("app:connected" /* APP_CONNECTED */);
     }
   });
+  hook.on.vueAppUnmount(async (app) => {
+    const activeRecords = devtoolsAppRecords.value.filter((appRecord) => appRecord.app !== app);
+    devtoolsAppRecords.value = activeRecords;
+    if (devtoolsAppRecords.active.app === app)
+      await setActiveAppRecord(activeRecords[0]);
+  });
   subscribeDevToolsHook();
 }
 function onDevToolsConnected(fn) {
@@ -4461,6 +4502,9 @@ var devtools = {
   }
 };
 export {
+  INFINITY,
+  NAN,
+  NEGATIVE_INFINITY,
   UNDEFINED,
   addCustomCommand,
   addCustomTab,
@@ -4468,11 +4512,13 @@ export {
   formatInspectorStateValue,
   getInspectorStateValueType,
   getRaw,
+  isPlainObject,
   onDevToolsClientConnected,
   onDevToolsConnected,
   parse,
   removeCustomCommand,
   setDevToolsEnv,
+  setOpenInEditorBaseUrl,
   setupDevToolsPlugin,
   stringify,
   toEdit,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.27",
+  "version": "7.1.0",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
@@ -25,12 +25,12 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-shared": "^7.0.27"
+    "@vue/devtools-shared": "^7.1.0"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue": "^3.4.23",
+    "vue-router": "^4.3.2"
   },
   "scripts": {
     "build": "tsup --clean",