@vue/devtools-kit 7.4.6 → 7.5.1

package/dist/index.d.cts

@@ -56,6 +56,10 @@ interface AppRecord {
     version?: string;
     types?: Record<string, string | symbol>;
     instanceMap: Map<string, VueAppInstance>;
+    perfGroupIds: Map<string, {
+        groupId: number;
+        time: number;
+    }>;
     rootInstance: VueAppInstance;
     routerId?: string;
 }
@@ -233,6 +237,8 @@ interface DevToolsState {
     devtoolsClientDetected: {
         [key: string]: boolean;
     };
+    perfUniqueGroupId: number;
+    timelineLayersState: Record<string, boolean>;
 }
 declare const callStateUpdatedHook: (state: DevToolsState) => Promise<void>;
 declare const callConnectedUpdatedHook: (state: DevToolsState, oldState: DevToolsState) => Promise<void>;
@@ -582,6 +588,8 @@ declare const devtoolsRouter: {
     value: Router;
 };
 
+declare function updateTimelineLayersState(state: Record<string, boolean>): void;
+
 interface DevtoolsContext {
     hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>;
     state: DevToolsState & {
@@ -692,11 +700,14 @@ interface DevToolsEvent {
     [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>;
+    [DevToolsHooks.COMPONENT_EMIT]: (app: HookAppInstance, instance: VueAppInstance, event: string, params: unknown) => void | Promise<void>;
     [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
     [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
         target?: string;
     }) => void;
+    [DevToolsHooks.PERFORMANCE_START]: (app: App$1, uid: number, vm: HookAppInstance, type: string, time: number) => void;
+    [DevToolsHooks.PERFORMANCE_END]: (app: App$1, uid: number, vm: HookAppInstance, type: string, time: number) => void;
 }
 interface DevToolsHook {
     id: string;
@@ -717,9 +728,12 @@ interface VueHooks {
         vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void;
         vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void;
         componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void;
+        componentEmit: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]) => () => void;
         componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
         componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
         setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
+        perfStart: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_START]) => void;
+        perfEnd: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_END]) => void;
     };
     setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
 }
@@ -1080,4 +1094,4 @@ declare const devtools: {
     };
 };
 
-export { type AddInspectorApiPayload, type App, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentBounds, type ComponentHighLighterOptions, type ComponentInspector, type ComponentInstance, type ComponentState, type ComponentTreeNode, type CreateRpcClientOptions, type CreateRpcServerOptions, type CustomCommand, type CustomCommandAction, type CustomInspectorNode, type CustomInspectorOptions, type CustomInspectorState, type CustomTab, type DevToolsApiType, type DevToolsAppRecords, DevToolsContextHookKeys, type DevToolsContextHookPayloads, type DevToolsContextHooks, type DevToolsEvent, type DevToolsHook, DevToolsHooks, DevToolsMessagingHookKeys, type DevToolsMessagingHookPayloads, type DevToolsMessagingHooks, type DevToolsPlugin, type DevToolsState, DevToolsV6PluginAPIHookKeys, type DevToolsV6PluginAPIHookPayloads, type DevToolsV6PluginAPIHooks, type DevtoolsContext, type EditStatePayload, INFINITY, type InspectedComponentData, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PluginDescriptor, type PluginSetupFunction, type Presets, type PropPath, ROUTER_INFO_KEY, ROUTER_KEY, type RouterInfo, type ScreenshotData, type ScreenshotOverlayEvent, type ScreenshotOverlayRenderContext, type ScreenshotOverlayRenderResult, type ScrollToComponentOptions, type StateBase, type TimelineEvent, type TimelineEventOptions, type TimelineLayerOptions, UNDEFINED, type VueAppInstance, type VueHooks, activeAppRecord, addCustomCommand, addCustomTab, addDevToolsAppRecord, addDevToolsPluginToBuffer, addInspector, callConnectedUpdatedHook, callDevToolsPluginSetupFn, callInspectorUpdatedHook, callStateUpdatedHook, cancelInspectComponentHighLighter, createComponentsDevToolsPlugin, createDevToolsApi, createDevToolsCtxHooks, createRpcClient, createRpcProxy, createRpcServer, type customTypeEnums, devtools, devtoolsAppRecords, devtoolsContext, devtoolsInspector, devtoolsPluginBuffer, devtoolsRouter, devtoolsRouterInfo, devtoolsState, formatInspectorStateValue, getActiveInspectors, getComponentInspector, getDevToolsEnv, getExtensionClientContext, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getInspectorStateValueType, getRaw, getRpcClient, getRpcServer, getViteRpcClient, getViteRpcServer, highlight, initDevTools, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, registerDevToolsPlugin, removeCustomCommand, removeDevToolsAppRecord, removeRegisteredPluginApp, resetDevToolsState, scrollToComponent, setActiveAppRecord, setActiveAppRecordId, setDevToolsEnv, setElectronClientContext, setElectronProxyContext, setElectronServerContext, setExtensionClientContext, setIframeServerContext, setOpenInEditorBaseUrl, setRpcServerToGlobal, setViteClientContext, setViteRpcClientToGlobal, setViteRpcServerToGlobal, setViteServerContext, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleClientConnected, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateDevToolsClientDetected, updateDevToolsState };
+export { type AddInspectorApiPayload, type App, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentBounds, type ComponentHighLighterOptions, type ComponentInspector, type ComponentInstance, type ComponentState, type ComponentTreeNode, type CreateRpcClientOptions, type CreateRpcServerOptions, type CustomCommand, type CustomCommandAction, type CustomInspectorNode, type CustomInspectorOptions, type CustomInspectorState, type CustomTab, type DevToolsApiType, type DevToolsAppRecords, DevToolsContextHookKeys, type DevToolsContextHookPayloads, type DevToolsContextHooks, type DevToolsEvent, type DevToolsHook, DevToolsHooks, DevToolsMessagingHookKeys, type DevToolsMessagingHookPayloads, type DevToolsMessagingHooks, type DevToolsPlugin, type DevToolsState, DevToolsV6PluginAPIHookKeys, type DevToolsV6PluginAPIHookPayloads, type DevToolsV6PluginAPIHooks, type DevtoolsContext, type EditStatePayload, INFINITY, type InspectedComponentData, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PluginDescriptor, type PluginSetupFunction, type Presets, type PropPath, ROUTER_INFO_KEY, ROUTER_KEY, type RouterInfo, type ScreenshotData, type ScreenshotOverlayEvent, type ScreenshotOverlayRenderContext, type ScreenshotOverlayRenderResult, type ScrollToComponentOptions, type StateBase, type TimelineEvent, type TimelineEventOptions, type TimelineLayerOptions, UNDEFINED, type VueAppInstance, type VueHooks, activeAppRecord, addCustomCommand, addCustomTab, addDevToolsAppRecord, addDevToolsPluginToBuffer, addInspector, callConnectedUpdatedHook, callDevToolsPluginSetupFn, callInspectorUpdatedHook, callStateUpdatedHook, cancelInspectComponentHighLighter, createComponentsDevToolsPlugin, createDevToolsApi, createDevToolsCtxHooks, createRpcClient, createRpcProxy, createRpcServer, type customTypeEnums, devtools, devtoolsAppRecords, devtoolsContext, devtoolsInspector, devtoolsPluginBuffer, devtoolsRouter, devtoolsRouterInfo, devtoolsState, formatInspectorStateValue, getActiveInspectors, getComponentInspector, getDevToolsEnv, getExtensionClientContext, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getInspectorStateValueType, getRaw, getRpcClient, getRpcServer, getViteRpcClient, getViteRpcServer, highlight, initDevTools, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, registerDevToolsPlugin, removeCustomCommand, removeDevToolsAppRecord, removeRegisteredPluginApp, resetDevToolsState, scrollToComponent, setActiveAppRecord, setActiveAppRecordId, setDevToolsEnv, setElectronClientContext, setElectronProxyContext, setElectronServerContext, setExtensionClientContext, setIframeServerContext, setOpenInEditorBaseUrl, setRpcServerToGlobal, setViteClientContext, setViteRpcClientToGlobal, setViteRpcServerToGlobal, setViteServerContext, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleClientConnected, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateDevToolsClientDetected, updateDevToolsState, updateTimelineLayersState };

package/dist/index.d.ts

@@ -56,6 +56,10 @@ interface AppRecord {
     version?: string;
     types?: Record<string, string | symbol>;
     instanceMap: Map<string, VueAppInstance>;
+    perfGroupIds: Map<string, {
+        groupId: number;
+        time: number;
+    }>;
     rootInstance: VueAppInstance;
     routerId?: string;
 }
@@ -233,6 +237,8 @@ interface DevToolsState {
     devtoolsClientDetected: {
         [key: string]: boolean;
     };
+    perfUniqueGroupId: number;
+    timelineLayersState: Record<string, boolean>;
 }
 declare const callStateUpdatedHook: (state: DevToolsState) => Promise<void>;
 declare const callConnectedUpdatedHook: (state: DevToolsState, oldState: DevToolsState) => Promise<void>;
@@ -582,6 +588,8 @@ declare const devtoolsRouter: {
     value: Router;
 };
 
+declare function updateTimelineLayersState(state: Record<string, boolean>): void;
+
 interface DevtoolsContext {
     hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>;
     state: DevToolsState & {
@@ -692,11 +700,14 @@ interface DevToolsEvent {
     [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>;
+    [DevToolsHooks.COMPONENT_EMIT]: (app: HookAppInstance, instance: VueAppInstance, event: string, params: unknown) => void | Promise<void>;
     [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
     [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
         target?: string;
     }) => void;
+    [DevToolsHooks.PERFORMANCE_START]: (app: App$1, uid: number, vm: HookAppInstance, type: string, time: number) => void;
+    [DevToolsHooks.PERFORMANCE_END]: (app: App$1, uid: number, vm: HookAppInstance, type: string, time: number) => void;
 }
 interface DevToolsHook {
     id: string;
@@ -717,9 +728,12 @@ interface VueHooks {
         vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void;
         vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void;
         componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void;
+        componentEmit: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]) => () => void;
         componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void;
         componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void;
         setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void;
+        perfStart: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_START]) => void;
+        perfEnd: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_END]) => void;
     };
     setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
 }
@@ -1080,4 +1094,4 @@ declare const devtools: {
     };
 };
 
-export { type AddInspectorApiPayload, type App, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentBounds, type ComponentHighLighterOptions, type ComponentInspector, type ComponentInstance, type ComponentState, type ComponentTreeNode, type CreateRpcClientOptions, type CreateRpcServerOptions, type CustomCommand, type CustomCommandAction, type CustomInspectorNode, type CustomInspectorOptions, type CustomInspectorState, type CustomTab, type DevToolsApiType, type DevToolsAppRecords, DevToolsContextHookKeys, type DevToolsContextHookPayloads, type DevToolsContextHooks, type DevToolsEvent, type DevToolsHook, DevToolsHooks, DevToolsMessagingHookKeys, type DevToolsMessagingHookPayloads, type DevToolsMessagingHooks, type DevToolsPlugin, type DevToolsState, DevToolsV6PluginAPIHookKeys, type DevToolsV6PluginAPIHookPayloads, type DevToolsV6PluginAPIHooks, type DevtoolsContext, type EditStatePayload, INFINITY, type InspectedComponentData, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PluginDescriptor, type PluginSetupFunction, type Presets, type PropPath, ROUTER_INFO_KEY, ROUTER_KEY, type RouterInfo, type ScreenshotData, type ScreenshotOverlayEvent, type ScreenshotOverlayRenderContext, type ScreenshotOverlayRenderResult, type ScrollToComponentOptions, type StateBase, type TimelineEvent, type TimelineEventOptions, type TimelineLayerOptions, UNDEFINED, type VueAppInstance, type VueHooks, activeAppRecord, addCustomCommand, addCustomTab, addDevToolsAppRecord, addDevToolsPluginToBuffer, addInspector, callConnectedUpdatedHook, callDevToolsPluginSetupFn, callInspectorUpdatedHook, callStateUpdatedHook, cancelInspectComponentHighLighter, createComponentsDevToolsPlugin, createDevToolsApi, createDevToolsCtxHooks, createRpcClient, createRpcProxy, createRpcServer, type customTypeEnums, devtools, devtoolsAppRecords, devtoolsContext, devtoolsInspector, devtoolsPluginBuffer, devtoolsRouter, devtoolsRouterInfo, devtoolsState, formatInspectorStateValue, getActiveInspectors, getComponentInspector, getDevToolsEnv, getExtensionClientContext, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getInspectorStateValueType, getRaw, getRpcClient, getRpcServer, getViteRpcClient, getViteRpcServer, highlight, initDevTools, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, registerDevToolsPlugin, removeCustomCommand, removeDevToolsAppRecord, removeRegisteredPluginApp, resetDevToolsState, scrollToComponent, setActiveAppRecord, setActiveAppRecordId, setDevToolsEnv, setElectronClientContext, setElectronProxyContext, setElectronServerContext, setExtensionClientContext, setIframeServerContext, setOpenInEditorBaseUrl, setRpcServerToGlobal, setViteClientContext, setViteRpcClientToGlobal, setViteRpcServerToGlobal, setViteServerContext, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleClientConnected, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateDevToolsClientDetected, updateDevToolsState };
+export { type AddInspectorApiPayload, type App, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentBounds, type ComponentHighLighterOptions, type ComponentInspector, type ComponentInstance, type ComponentState, type ComponentTreeNode, type CreateRpcClientOptions, type CreateRpcServerOptions, type CustomCommand, type CustomCommandAction, type CustomInspectorNode, type CustomInspectorOptions, type CustomInspectorState, type CustomTab, type DevToolsApiType, type DevToolsAppRecords, DevToolsContextHookKeys, type DevToolsContextHookPayloads, type DevToolsContextHooks, type DevToolsEvent, type DevToolsHook, DevToolsHooks, DevToolsMessagingHookKeys, type DevToolsMessagingHookPayloads, type DevToolsMessagingHooks, type DevToolsPlugin, type DevToolsState, DevToolsV6PluginAPIHookKeys, type DevToolsV6PluginAPIHookPayloads, type DevToolsV6PluginAPIHooks, type DevtoolsContext, type EditStatePayload, INFINITY, type InspectedComponentData, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTree, type InspectorTreeApiPayload, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PluginDescriptor, type PluginSetupFunction, type Presets, type PropPath, ROUTER_INFO_KEY, ROUTER_KEY, type RouterInfo, type ScreenshotData, type ScreenshotOverlayEvent, type ScreenshotOverlayRenderContext, type ScreenshotOverlayRenderResult, type ScrollToComponentOptions, type StateBase, type TimelineEvent, type TimelineEventOptions, type TimelineLayerOptions, UNDEFINED, type VueAppInstance, type VueHooks, activeAppRecord, addCustomCommand, addCustomTab, addDevToolsAppRecord, addDevToolsPluginToBuffer, addInspector, callConnectedUpdatedHook, callDevToolsPluginSetupFn, callInspectorUpdatedHook, callStateUpdatedHook, cancelInspectComponentHighLighter, createComponentsDevToolsPlugin, createDevToolsApi, createDevToolsCtxHooks, createRpcClient, createRpcProxy, createRpcServer, type customTypeEnums, devtools, devtoolsAppRecords, devtoolsContext, devtoolsInspector, devtoolsPluginBuffer, devtoolsRouter, devtoolsRouterInfo, devtoolsState, formatInspectorStateValue, getActiveInspectors, getComponentInspector, getDevToolsEnv, getExtensionClientContext, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getInspectorStateValueType, getRaw, getRpcClient, getRpcServer, getViteRpcClient, getViteRpcServer, highlight, initDevTools, inspectComponentHighLighter, isPlainObject, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, registerDevToolsPlugin, removeCustomCommand, removeDevToolsAppRecord, removeRegisteredPluginApp, resetDevToolsState, scrollToComponent, setActiveAppRecord, setActiveAppRecordId, setDevToolsEnv, setElectronClientContext, setElectronProxyContext, setElectronServerContext, setExtensionClientContext, setIframeServerContext, setOpenInEditorBaseUrl, setRpcServerToGlobal, setViteClientContext, setViteRpcClientToGlobal, setViteRpcServerToGlobal, setViteServerContext, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleClientConnected, toggleComponentHighLighter, toggleComponentInspectorEnabled, toggleHighPerfMode, unhighlight, updateDevToolsClientDetected, updateDevToolsState, updateTimelineLayersState };

package/dist/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target22) => (target22 = mod != null ? __create(
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.5__@swc+core@1.5.29_jiti@1.21.6__ldnw4a7r4ccknnz6q542psuydy/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.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.5__@swc+core@1.5.29_jiti@1.21.6__ldnw4a7r4ccknnz6q542psuydy/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;
@@ -2494,7 +2541,9 @@ function initStateFactory() {
     tabs: [],
     commands: [],
     highPerfModeEnabled: true,
-    devtoolsClientDetected: {}
+    devtoolsClientDetected: {},
+    perfUniqueGroupId: 0,
+    timelineLayersState: getTimelineLayersStateFromStorage()
   };
 }
 var _a9, _b9;
@@ -2809,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);
   },
@@ -2817,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() {
@@ -2885,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;
@@ -3648,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;
@@ -3684,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);
@@ -4134,6 +4407,7 @@ function createAppRecord(app) {
       id,
       name,
       instanceMap: /* @__PURE__ */ new Map(),
+      perfGroupIds: /* @__PURE__ */ new Map(),
       rootInstance
     };
     app.__VUE_DEVTOOLS_NEXT_APP_RECORD__ = record;
@@ -5497,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();
@@ -5513,7 +5787,7 @@ function setIframeServerContext(context) {
 
 // src/messaging/presets/iframe/client.ts
 function createIframeClientChannel() {
-  if (!isBrowser) {
+  if (!isBrowser3) {
     return {
       post: (data) => {
       },
@@ -5540,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) => {
       },
@@ -6294,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.6",
+  "version": "7.5.1",
   "author": "webfansplz",
   "license": "MIT",
   "repository": {
@@ -23,17 +23,17 @@
     "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.6"
+    "@vue/devtools-shared": "^7.5.1"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
-    "vue": "^3.5.8",
+    "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },
   "scripts": {