@vue/devtools-kit 7.5.5 → 7.6.0

package/dist/index.cjs

@@ -1764,9 +1764,13 @@ async function getComponentId(options) {
   }
 }
 function isFragment(instance) {
-  var _a25;
+  var _a25, _b25;
   const subTreeType = (_a25 = instance.subTree) == null ? void 0 : _a25.type;
-  return subTreeType === Fragment;
+  const appRecord = getAppRecord(instance);
+  if (appRecord) {
+    return ((_b25 = appRecord == null ? void 0 : appRecord.types) == null ? void 0 : _b25.Fragment) === subTreeType;
+  }
+  return false;
 }
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
@@ -2583,7 +2587,8 @@ function createDevToolsCtxHooks() {
   });
   hooks2.hook("timelineEventAdded" /* TIMELINE_EVENT_ADDED */, ({ options, plugin }) => {
     var _a25;
-    if (devtoolsState.highPerfModeEnabled || !((_a25 = devtoolsState.timelineLayersState) == null ? void 0 : _a25[plugin.descriptor.id]))
+    const internalLayerIds = ["performance", "component-event", "keyboard", "mouse"];
+    if (devtoolsState.highPerfModeEnabled || !((_a25 = devtoolsState.timelineLayersState) == null ? void 0 : _a25[plugin.descriptor.id]) && !internalLayerIds.includes(options.layerId))
       return;
     hooks2.callHookWith(async (callbacks) => {
       await Promise.all(callbacks.map((cb) => cb(options)));
@@ -3014,11 +3019,11 @@ function createDevToolsHook() {
 }
 function subscribeDevToolsHook() {
   const hook2 = import_devtools_shared10.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-  hook2.on("app:init" /* APP_INIT */, (app, version) => {
+  hook2.on("app:init" /* APP_INIT */, (app, version, types) => {
     var _a25, _b25, _c;
     if ((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide)
       return;
-    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
+    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version, types);
   });
   hook2.on("app:unmount" /* APP_UNMOUNT */, (app) => {
     devtoolsHooks.callHook("app:unmount" /* APP_UNMOUNT */, app);
@@ -3145,6 +3150,9 @@ var DevToolsV6PluginAPI = class {
   selectInspectorNode(inspectorId, nodeId) {
     this.hooks.callHook("customInspectorSelectNode" /* CUSTOM_INSPECTOR_SELECT_NODE */, { inspectorId, nodeId, plugin: this.plugin });
   }
+  visitComponentTree(payload) {
+    return this.hooks.callHook("visitComponentTree" /* VISIT_COMPONENT_TREE */, payload);
+  }
   // timeline
   now() {
     return Date.now();
@@ -3632,10 +3640,11 @@ var ComponentWalker = class {
   constructor(options) {
     // Dedupe instances (Some instances may be both on a component and on a child abstract/functional component)
     this.captureIds = /* @__PURE__ */ new Map();
-    const { filterText = "", maxDepth, recursively } = options;
+    const { filterText = "", maxDepth, recursively, api } = options;
     this.componentFilter = createComponentFilter(filterText);
     this.maxDepth = maxDepth;
     this.recursively = recursively;
+    this.api = api;
   }
   getComponentTree(instance) {
     this.captureIds = /* @__PURE__ */ new Map();
@@ -3734,6 +3743,12 @@ var ComponentWalker = class {
       });
       this.mark(instance, true);
     }
+    this.api.visitComponentTree({
+      treeNode,
+      componentInstance: instance,
+      app: instance.appContext.app,
+      filter: this.componentFilter.filter
+    });
     return treeNode;
   }
   /**
@@ -4063,7 +4078,8 @@ function createComponentsDevToolsPlugin(app) {
             filterText: payload.filter,
             // @TODO: should make this configurable?
             maxDepth: 100,
-            recursively: false
+            recursively: false,
+            api
           });
           payload.rootNodes = await walker2.getComponentTree(instance);
         }
@@ -4497,7 +4513,7 @@ function getAppRecordId(app, defaultId) {
   app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ = id;
   return id;
 }
-function createAppRecord(app) {
+function createAppRecord(app, types) {
   const rootInstance = getAppRootInstance(app);
   if (rootInstance) {
     appRecordInfo.id++;
@@ -4506,6 +4522,7 @@ function createAppRecord(app) {
     const record = {
       id,
       name,
+      types,
       instanceMap: /* @__PURE__ */ new Map(),
       perfGroupIds: /* @__PURE__ */ new Map(),
       rootInstance
@@ -4537,12 +4554,13 @@ function initDevTools() {
     }
   }
   import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.once("init", (Vue) => {
-    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 700; font-size: 20px;");
-    console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 700; font-size: 16px;");
+    import_devtools_shared21.target.__VUE_DEVTOOLS_VUE2_APP_DETECTED__ = true;
+    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
+    console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 500; font-size: 14px;");
     const url = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
-    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 16px;", "text-decoration: underline; cursor: pointer;font-size: 16px;");
-    console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 700; font-size: 16px;");
-    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 700; font-size: 20px;");
+    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
+    console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 500; font-size: 14px;");
+    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
   });
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     var _a26;
@@ -4561,8 +4579,8 @@ function initDevTools() {
       import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
     });
   });
-  hook.on.vueAppInit(async (app, version) => {
-    const appRecord = createAppRecord(app);
+  hook.on.vueAppInit(async (app, version, types) => {
+    const appRecord = createAppRecord(app, types);
     const normalizedAppRecord = {
       ...appRecord,
       app,

package/dist/index.d.cts

@@ -624,6 +624,7 @@ declare class DevToolsV6PluginAPI {
     sendInspectorTree(inspectorId: string): void;
     sendInspectorState(inspectorId: string): void;
     selectInspectorNode(inspectorId: string, nodeId: string): void;
+    visitComponentTree(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]): Promise<any>;
     now(): number;
     addTimelineLayer(options: TimelineLayerOptions): void;
     addTimelineEvent(options: TimelineEventOptions): void;
@@ -696,7 +697,7 @@ declare enum DevToolsHooks {
     SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
 }
 interface DevToolsEvent {
-    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void | Promise<void>;
+    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string, types: Record<string, string | symbol>) => void | Promise<void>;
     [DevToolsHooks.APP_CONNECTED]: () => 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>;

package/dist/index.d.ts

@@ -624,6 +624,7 @@ declare class DevToolsV6PluginAPI {
     sendInspectorTree(inspectorId: string): void;
     sendInspectorState(inspectorId: string): void;
     selectInspectorNode(inspectorId: string, nodeId: string): void;
+    visitComponentTree(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE]): Promise<any>;
     now(): number;
     addTimelineLayer(options: TimelineLayerOptions): void;
     addTimelineEvent(options: TimelineEventOptions): void;
@@ -696,7 +697,7 @@ declare enum DevToolsHooks {
     SETUP_DEVTOOLS_PLUGIN = "devtools-plugin:setup"
 }
 interface DevToolsEvent {
-    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void | Promise<void>;
+    [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string, types: Record<string, string | symbol>) => void | Promise<void>;
     [DevToolsHooks.APP_CONNECTED]: () => 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>;

package/dist/index.js

@@ -1673,9 +1673,13 @@ async function getComponentId(options) {
   }
 }
 function isFragment(instance) {
-  var _a25;
+  var _a25, _b25;
   const subTreeType = (_a25 = instance.subTree) == null ? void 0 : _a25.type;
-  return subTreeType === Fragment;
+  const appRecord = getAppRecord(instance);
+  if (appRecord) {
+    return ((_b25 = appRecord == null ? void 0 : appRecord.types) == null ? void 0 : _b25.Fragment) === subTreeType;
+  }
+  return false;
 }
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
@@ -2492,7 +2496,8 @@ function createDevToolsCtxHooks() {
   });
   hooks2.hook("timelineEventAdded" /* TIMELINE_EVENT_ADDED */, ({ options, plugin }) => {
     var _a25;
-    if (devtoolsState.highPerfModeEnabled || !((_a25 = devtoolsState.timelineLayersState) == null ? void 0 : _a25[plugin.descriptor.id]))
+    const internalLayerIds = ["performance", "component-event", "keyboard", "mouse"];
+    if (devtoolsState.highPerfModeEnabled || !((_a25 = devtoolsState.timelineLayersState) == null ? void 0 : _a25[plugin.descriptor.id]) && !internalLayerIds.includes(options.layerId))
       return;
     hooks2.callHookWith(async (callbacks) => {
       await Promise.all(callbacks.map((cb) => cb(options)));
@@ -2923,11 +2928,11 @@ function createDevToolsHook() {
 }
 function subscribeDevToolsHook() {
   const hook2 = target7.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-  hook2.on("app:init" /* APP_INIT */, (app, version) => {
+  hook2.on("app:init" /* APP_INIT */, (app, version, types) => {
     var _a25, _b25, _c;
     if ((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide)
       return;
-    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
+    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version, types);
   });
   hook2.on("app:unmount" /* APP_UNMOUNT */, (app) => {
     devtoolsHooks.callHook("app:unmount" /* APP_UNMOUNT */, app);
@@ -3054,6 +3059,9 @@ var DevToolsV6PluginAPI = class {
   selectInspectorNode(inspectorId, nodeId) {
     this.hooks.callHook("customInspectorSelectNode" /* CUSTOM_INSPECTOR_SELECT_NODE */, { inspectorId, nodeId, plugin: this.plugin });
   }
+  visitComponentTree(payload) {
+    return this.hooks.callHook("visitComponentTree" /* VISIT_COMPONENT_TREE */, payload);
+  }
   // timeline
   now() {
     return Date.now();
@@ -3541,10 +3549,11 @@ var ComponentWalker = class {
   constructor(options) {
     // Dedupe instances (Some instances may be both on a component and on a child abstract/functional component)
     this.captureIds = /* @__PURE__ */ new Map();
-    const { filterText = "", maxDepth, recursively } = options;
+    const { filterText = "", maxDepth, recursively, api } = options;
     this.componentFilter = createComponentFilter(filterText);
     this.maxDepth = maxDepth;
     this.recursively = recursively;
+    this.api = api;
   }
   getComponentTree(instance) {
     this.captureIds = /* @__PURE__ */ new Map();
@@ -3643,6 +3652,12 @@ var ComponentWalker = class {
       });
       this.mark(instance, true);
     }
+    this.api.visitComponentTree({
+      treeNode,
+      componentInstance: instance,
+      app: instance.appContext.app,
+      filter: this.componentFilter.filter
+    });
     return treeNode;
   }
   /**
@@ -3972,7 +3987,8 @@ function createComponentsDevToolsPlugin(app) {
             filterText: payload.filter,
             // @TODO: should make this configurable?
             maxDepth: 100,
-            recursively: false
+            recursively: false,
+            api
           });
           payload.rootNodes = await walker2.getComponentTree(instance);
         }
@@ -4406,7 +4422,7 @@ function getAppRecordId(app, defaultId) {
   app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ = id;
   return id;
 }
-function createAppRecord(app) {
+function createAppRecord(app, types) {
   const rootInstance = getAppRootInstance(app);
   if (rootInstance) {
     appRecordInfo.id++;
@@ -4415,6 +4431,7 @@ function createAppRecord(app) {
     const record = {
       id,
       name,
+      types,
       instanceMap: /* @__PURE__ */ new Map(),
       perfGroupIds: /* @__PURE__ */ new Map(),
       rootInstance
@@ -4446,12 +4463,13 @@ function initDevTools() {
     }
   }
   target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.once("init", (Vue) => {
-    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 700; font-size: 20px;");
-    console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 700; font-size: 16px;");
+    target13.__VUE_DEVTOOLS_VUE2_APP_DETECTED__ = true;
+    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
+    console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 500; font-size: 14px;");
     const url = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
-    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 16px;", "text-decoration: underline; cursor: pointer;font-size: 16px;");
-    console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 700; font-size: 16px;");
-    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 700; font-size: 20px;");
+    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
+    console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 500; font-size: 14px;");
+    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
   });
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     var _a26;
@@ -4470,8 +4488,8 @@ function initDevTools() {
       target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
     });
   });
-  hook.on.vueAppInit(async (app, version) => {
-    const appRecord = createAppRecord(app);
+  hook.on.vueAppInit(async (app, version, types) => {
+    const appRecord = createAppRecord(app, types);
     const normalizedAppRecord = {
       ...appRecord,
       app,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.5.5",
+  "version": "7.6.0",
   "author": "webfansplz",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
     "superjson": "^2.2.1",
-    "@vue/devtools-shared": "^7.5.5"
+    "@vue/devtools-shared": "^7.6.0"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",