@vue/devtools-kit 7.4.5 → 7.5.0

package/dist/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target22) => (target22 = mod != null ? __create(
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.0_@types+node@20.16.5__@swc+core@1.5.29_jiti@1.21.6__hrrjfaj2jdrhlrlzgjkczhq5ey/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.11__@swc+core@1.5.29_jiti@2.0.0__khi6fwhekjxtif3xyxfitrs5gq/node_modules/tsup/assets/esm_shims.js
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.0_@types+node@20.16.5__@swc+core@1.5.29_jiti@1.21.6__hrrjfaj2jdrhlrlzgjkczhq5ey/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.11__@swc+core@1.5.29_jiti@2.0.0__khi6fwhekjxtif3xyxfitrs5gq/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1631,7 +1631,12 @@ var Fragment = Symbol.for("v-fgt");
 init_esm_shims();
 import { basename, classify } from "@vue/devtools-shared";
 function getComponentTypeName(options) {
-  return options.name || options._componentTag || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || options.__name;
+  var _a25;
+  const name = options.name || options._componentTag || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || options.__name;
+  if (name === "index" && ((_a25 = options.__file) == null ? void 0 : _a25.endsWith("index.vue"))) {
+    return "";
+  }
+  return name;
 }
 function getComponentFileName(options) {
   const file = options.__file;
@@ -2237,6 +2242,38 @@ init_esm_shims();
 import { target as global, isUrlString } from "@vue/devtools-shared";
 import { debounce as debounce2 } from "perfect-debounce";
 
+// src/core/timeline/storage.ts
+init_esm_shims();
+import { isBrowser } from "@vue/devtools-shared";
+var TIMELINE_LAYERS_STATE_STORAGE_ID = "__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS_STATE__";
+function addTimelineLayersStateToStorage(state) {
+  if (!isBrowser) {
+    return;
+  }
+  localStorage.setItem(TIMELINE_LAYERS_STATE_STORAGE_ID, JSON.stringify(state));
+}
+function getTimelineLayersStateFromStorage() {
+  if (!isBrowser) {
+    return {
+      recordingState: false,
+      mouseEventEnabled: false,
+      keyboardEventEnabled: false,
+      componentEventEnabled: false,
+      performanceEventEnabled: false,
+      selected: ""
+    };
+  }
+  const state = localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID);
+  return state ? JSON.parse(state) : {
+    recordingState: false,
+    mouseEventEnabled: false,
+    keyboardEventEnabled: false,
+    componentEventEnabled: false,
+    performanceEventEnabled: false,
+    selected: ""
+  };
+}
+
 // src/ctx/hook.ts
 init_esm_shims();
 import { createHooks } from "hookable";
@@ -2263,6 +2300,16 @@ function addTimelineLayer(options, descriptor) {
     appRecord: getAppRecord(descriptor.app)
   });
 }
+function updateTimelineLayersState(state) {
+  const updatedState = {
+    ...devtoolsState.timelineLayersState,
+    ...state
+  };
+  addTimelineLayersStateToStorage(updatedState);
+  updateDevToolsState({
+    timelineLayersState: updatedState
+  });
+}
 
 // src/ctx/inspector.ts
 var _a3, _b3;
@@ -2296,7 +2343,8 @@ function getActiveInspectors() {
       logo: descriptor.logo,
       icon: `custom-ic-baseline-${(_a25 = options == null ? void 0 : options.icon) == null ? void 0 : _a25.replace(/_/g, "-")}`,
       packageName: descriptor.packageName,
-      homepage: descriptor.homepage
+      homepage: descriptor.homepage,
+      pluginId: descriptor.id
     };
   });
 }
@@ -2493,7 +2541,9 @@ function initStateFactory() {
     tabs: [],
     commands: [],
     highPerfModeEnabled: true,
-    devtoolsClientDetected: {}
+    devtoolsClientDetected: {},
+    perfUniqueGroupId: 0,
+    timelineLayersState: getTimelineLayersStateFromStorage()
   };
 }
 var _a9, _b9;
@@ -2708,10 +2758,12 @@ function getPluginLocalKey(pluginId) {
   return `__VUE_DEVTOOLS_NEXT_PLUGIN_SETTINGS__${pluginId}__`;
 }
 function getPluginSettingsOptions(pluginId) {
-  var _a25, _b25, _c, _d;
-  const descriptor = (_a25 = getInspector(pluginId)) == null ? void 0 : _a25.descriptor;
-  const item = (_c = (_b25 = devtoolsPluginBuffer.find((item2) => item2[0].id === (descriptor == null ? void 0 : descriptor.id))) == null ? void 0 : _b25[0]) != null ? _c : null;
-  return (_d = item == null ? void 0 : item.settings) != null ? _d : null;
+  var _a25, _b25, _c;
+  const item = (_b25 = (_a25 = devtoolsPluginBuffer.find((item2) => {
+    var _a26;
+    return item2[0].id === pluginId && !!((_a26 = item2[0]) == null ? void 0 : _a26.settings);
+  })) == null ? void 0 : _a25[0]) != null ? _b25 : null;
+  return (_c = item == null ? void 0 : item.settings) != null ? _c : null;
 }
 function getPluginSettings(pluginId, fallbackValue) {
   var _a25, _b25, _c;
@@ -2806,6 +2858,9 @@ var on = {
   componentAdded(fn) {
     return devtoolsHooks.hook("component:added" /* COMPONENT_ADDED */, fn);
   },
+  componentEmit(fn) {
+    return devtoolsHooks.hook("component:emit" /* COMPONENT_EMIT */, fn);
+  },
   componentUpdated(fn) {
     return devtoolsHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
   },
@@ -2814,6 +2869,12 @@ var on = {
   },
   setupDevtoolsPlugin(fn) {
     devtoolsHooks.hook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, fn);
+  },
+  perfStart(fn) {
+    return devtoolsHooks.hook("perf:start" /* PERFORMANCE_START */, fn);
+  },
+  perfEnd(fn) {
+    return devtoolsHooks.hook("perf:end" /* PERFORMANCE_END */, fn);
   }
 };
 function createDevToolsHook() {
@@ -2882,6 +2943,21 @@ function subscribeDevToolsHook() {
       return;
     devtoolsHooks.callHook("component:removed" /* COMPONENT_REMOVED */, app, uid, parentUid, component);
   });
+  hook2.on("component:emit" /* COMPONENT_EMIT */, async (app, instance, event, params) => {
+    if (!app || !instance || devtoolsState.highPerfModeEnabled)
+      return;
+    devtoolsHooks.callHook("component:emit" /* COMPONENT_EMIT */, app, instance, event, params);
+  });
+  hook2.on("perf:start" /* PERFORMANCE_START */, (app, uid, vm, type, time) => {
+    if (!app || devtoolsState.highPerfModeEnabled)
+      return;
+    devtoolsHooks.callHook("perf:start" /* PERFORMANCE_START */, app, uid, vm, type, time);
+  });
+  hook2.on("perf:end" /* PERFORMANCE_END */, (app, uid, vm, type, time) => {
+    if (!app || devtoolsState.highPerfModeEnabled)
+      return;
+    devtoolsHooks.callHook("perf:end" /* PERFORMANCE_END */, app, uid, vm, type, time);
+  });
   hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn, options) => {
     if ((options == null ? void 0 : options.target) === "legacy")
       return;
@@ -2983,8 +3059,7 @@ var DevToolsV6PluginAPI = class {
   }
   // settings
   getSettings(pluginId) {
-    const inspector = getActiveInspectors().find((i) => i.packageName === this.plugin.descriptor.packageName);
-    return getPluginSettings(pluginId != null ? pluginId : inspector == null ? void 0 : inspector.id, this.plugin.descriptor.settings);
+    return getPluginSettings(pluginId != null ? pluginId : this.plugin.descriptor.id, this.plugin.descriptor.settings);
   }
   // utilities
   getComponentInstances(app) {
@@ -3646,6 +3721,205 @@ var ComponentWalker = class {
   }
 };
 
+// src/core/timeline/index.ts
+init_esm_shims();
+import { isBrowser as isBrowser2 } from "@vue/devtools-shared";
+
+// src/core/timeline/perf.ts
+init_esm_shims();
+var markEndQueue = /* @__PURE__ */ new Map();
+var PERFORMANCE_EVENT_LAYER_ID = "performance";
+async function performanceMarkStart(api, app, uid, vm, type, time) {
+  const appRecord = await getAppRecord(app);
+  if (!appRecord) {
+    return;
+  }
+  const componentName = getInstanceName(vm) || "Unknown Component";
+  const groupId = devtoolsState.perfUniqueGroupId++;
+  const groupKey = `${uid}-${type}`;
+  appRecord.perfGroupIds.set(groupKey, { groupId, time });
+  await api.addTimelineEvent({
+    layerId: PERFORMANCE_EVENT_LAYER_ID,
+    event: {
+      time: Date.now(),
+      data: {
+        component: componentName,
+        type,
+        measure: "start"
+      },
+      title: componentName,
+      subtitle: type,
+      groupId
+    }
+  });
+  if (markEndQueue.has(groupKey)) {
+    const {
+      app: app2,
+      uid: uid2,
+      instance,
+      type: type2,
+      time: time2
+    } = markEndQueue.get(groupKey);
+    markEndQueue.delete(groupKey);
+    await performanceMarkEnd(
+      api,
+      app2,
+      uid2,
+      instance,
+      type2,
+      time2
+    );
+  }
+}
+function performanceMarkEnd(api, app, uid, vm, type, time) {
+  const appRecord = getAppRecord(app);
+  if (!appRecord)
+    return;
+  const componentName = getInstanceName(vm) || "Unknown Component";
+  const groupKey = `${uid}-${type}`;
+  const groupInfo = appRecord.perfGroupIds.get(groupKey);
+  if (groupInfo) {
+    const groupId = groupInfo.groupId;
+    const startTime = groupInfo.time;
+    const duration = time - startTime;
+    api.addTimelineEvent({
+      layerId: PERFORMANCE_EVENT_LAYER_ID,
+      event: {
+        time: Date.now(),
+        data: {
+          component: componentName,
+          type,
+          measure: "end",
+          duration: {
+            _custom: {
+              type: "Duration",
+              value: duration,
+              display: `${duration} ms`
+            }
+          }
+        },
+        title: componentName,
+        subtitle: type,
+        groupId
+      }
+    });
+  } else {
+    markEndQueue.set(groupKey, { app, uid, instance: vm, type, time });
+  }
+}
+
+// src/core/timeline/index.ts
+var COMPONENT_EVENT_LAYER_ID = "component-event";
+function setupBuiltinTimelineLayers(api) {
+  if (!isBrowser2)
+    return;
+  api.addTimelineLayer({
+    id: "mouse",
+    label: "Mouse",
+    color: 10768815
+  });
+  ["mousedown", "mouseup", "click", "dblclick"].forEach((eventType) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.mouseEventEnabled)
+      return;
+    window.addEventListener(eventType, async (event) => {
+      await api.addTimelineEvent({
+        layerId: "mouse",
+        event: {
+          time: Date.now(),
+          data: {
+            type: eventType,
+            x: event.clientX,
+            y: event.clientY
+          },
+          title: eventType
+        }
+      });
+    }, {
+      capture: true,
+      passive: true
+    });
+  });
+  api.addTimelineLayer({
+    id: "keyboard",
+    label: "Keyboard",
+    color: 8475055
+  });
+  ["keyup", "keydown", "keypress"].forEach((eventType) => {
+    window.addEventListener(eventType, async (event) => {
+      if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.keyboardEventEnabled)
+        return;
+      await api.addTimelineEvent({
+        layerId: "keyboard",
+        event: {
+          time: Date.now(),
+          data: {
+            type: eventType,
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey
+          },
+          title: event.key
+        }
+      });
+    }, {
+      capture: true,
+      passive: true
+    });
+  });
+  api.addTimelineLayer({
+    id: COMPONENT_EVENT_LAYER_ID,
+    label: "Component events",
+    color: 5226637
+  });
+  hook.on.componentEmit(async (app, instance, event, params) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.componentEventEnabled)
+      return;
+    const appRecord = await getAppRecord(app);
+    if (!appRecord)
+      return;
+    const componentId = `${appRecord.id}:${instance.uid}`;
+    const componentName = getInstanceName(instance) || "Unknown Component";
+    api.addTimelineEvent({
+      layerId: COMPONENT_EVENT_LAYER_ID,
+      event: {
+        time: Date.now(),
+        data: {
+          component: {
+            _custom: {
+              type: "component-definition",
+              display: componentName
+            }
+          },
+          event,
+          params
+        },
+        title: event,
+        subtitle: `by ${componentName}`,
+        meta: {
+          componentId
+        }
+      }
+    });
+  });
+  api.addTimelineLayer({
+    id: "performance",
+    label: PERFORMANCE_EVENT_LAYER_ID,
+    color: 4307050
+  });
+  hook.on.perfStart((app, uid, vm, type, time) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.performanceEventEnabled)
+      return;
+    performanceMarkStart(api, app, uid, vm, type, time);
+  });
+  hook.on.perfEnd((app, uid, vm, type, time) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.performanceEventEnabled)
+      return;
+    performanceMarkEnd(api, app, uid, vm, type, time);
+  });
+}
+
 // src/core/vm/index.ts
 init_esm_shims();
 var MAX_$VM = 10;
@@ -3682,6 +3956,7 @@ function createComponentsDevToolsPlugin(app) {
       label: "Components",
       treeFilterPlaceholder: "Search components"
     });
+    setupBuiltinTimelineLayers(api);
     api.on.getInspectorTree(async (payload) => {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         const instance = getComponentInstance(activeAppRecord.value, payload.instanceId);
@@ -3831,13 +4106,6 @@ function callDevToolsPluginSetupFn(plugin, app) {
     });
   }
   setupFn(api);
-  if (pluginDescriptor.settings) {
-    const inspector = devtoolsInspector.find((inspector2) => inspector2.descriptor.id === pluginDescriptor.id);
-    if (inspector) {
-      inspector.descriptor.settings = pluginDescriptor.settings;
-      initPluginSettings(inspector.options.id, pluginDescriptor.settings);
-    }
-  }
 }
 function removeRegisteredPluginApp(app) {
   target8.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.delete(app);
@@ -4139,6 +4407,7 @@ function createAppRecord(app) {
       id,
       name,
       instanceMap: /* @__PURE__ */ new Map(),
+      perfGroupIds: /* @__PURE__ */ new Map(),
       rootInstance
     };
     app.__VUE_DEVTOOLS_NEXT_APP_RECORD__ = record;
@@ -4179,6 +4448,9 @@ function initDevTools() {
     var _a26;
     addDevToolsPluginToBuffer(pluginDescriptor, setupFn);
     const { app } = (_a26 = activeAppRecord) != null ? _a26 : {};
+    if (pluginDescriptor.settings) {
+      initPluginSettings(pluginDescriptor.id, pluginDescriptor.settings);
+    }
     if (!app)
       return;
     callDevToolsPluginSetupFn([pluginDescriptor, setupFn], app);
@@ -5499,7 +5771,7 @@ init_esm_shims();
 
 // src/messaging/presets/iframe/client.ts
 init_esm_shims();
-import { isBrowser } from "@vue/devtools-shared";
+import { isBrowser as isBrowser3 } from "@vue/devtools-shared";
 
 // src/messaging/presets/iframe/context.ts
 init_esm_shims();
@@ -5515,7 +5787,7 @@ function setIframeServerContext(context) {
 
 // src/messaging/presets/iframe/client.ts
 function createIframeClientChannel() {
-  if (!isBrowser) {
+  if (!isBrowser3) {
     return {
       post: (data) => {
       },
@@ -5542,9 +5814,9 @@ function createIframeClientChannel() {
 
 // src/messaging/presets/iframe/server.ts
 init_esm_shims();
-import { isBrowser as isBrowser2 } from "@vue/devtools-shared";
+import { isBrowser as isBrowser4 } from "@vue/devtools-shared";
 function createIframeServerChannel() {
-  if (!isBrowser2) {
+  if (!isBrowser4) {
     return {
       post: (data) => {
       },
@@ -6296,5 +6568,6 @@ export {
   toggleComponentInspectorEnabled,
   toggleHighPerfMode,
   updateDevToolsClientDetected,
-  updateDevToolsState
+  updateDevToolsState,
+  updateTimelineLayersState
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.4.5",
+  "version": "7.5.0",
   "author": "webfansplz",
   "license": "MIT",
   "repository": {
@@ -23,18 +23,18 @@
     "dist"
   ],
   "dependencies": {
-    "birpc": "^0.2.17",
+    "birpc": "^0.2.19",
     "hookable": "^5.5.3",
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
     "superjson": "^2.2.1",
-    "@vue/devtools-shared": "^7.4.5"
+    "@vue/devtools-shared": "^7.5.0"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
-    "vue": "^3.5.3",
-    "vue-router": "^4.4.3"
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
   },
   "scripts": {
     "build": "tsup --clean",