feat(vue2): perf timeline, closes #1744

packages/app-backend-vue2/src/components/perf.ts

@@ -0,0 +1,55 @@
+import { DevtoolsApi } from '@vue-devtools/app-backend-api'
+import { HookEvents, SharedData } from '@vue-devtools/shared-utils'
+import { instanceMap } from './tree'
+
+const COMPONENT_HOOKS = {
+ beforeCreate: { start: 'create' },
+ created: { end: 'create' },
+ beforeMount: { start: 'mount' },
+ mounted: { end: 'mount' },
+ beforeUpdate: { start: 'update' },
+ updated: { end: 'update' },
+ beforeDestroyed: { start: 'destroy' },
+ destroyed: { end: 'destroy' },
+}
+
+export function initPerf (api: DevtoolsApi, app, Vue) {
+ // Global mixin
+ Vue.mixin({
+ beforeCreate () {
+ applyPerfHooks(api, this, app)
+ },
+ })
+
+ // Apply to existing components
+ instanceMap?.forEach(vm => applyPerfHooks(api, vm, app))
+}
+
+export function applyPerfHooks (api: DevtoolsApi, vm, app) {
+ if (vm.$options.$_devtoolsPerfHooks) return
+ vm.$options.$_devtoolsPerfHooks = true
+
+ for (const hook in COMPONENT_HOOKS) {
+ const { start, end } = COMPONENT_HOOKS[hook]
+ const handler = function (this: any) {
+ if (SharedData.performanceMonitoringEnabled) {
+ api.ctx.hook.emit(
+ start ? HookEvents.PERFORMANCE_START : HookEvents.PERFORMANCE_END,
+ app,
+ this._uid,
+ this,
+ start ?? end,
+ api.now(),
+ )
+ }
+ }
+ const currentValue = vm.$options[hook]
+ if (Array.isArray(currentValue)) {
+ vm.$options[hook] = [handler, ...currentValue]
+ } else if (typeof currentValue === 'function') {
+ vm.$options[hook] = [handler, currentValue]
+ } else {
+ vm.$options[hook] = [handler]
+ }
+ }
+}

packages/app-backend-vue2/src/components/tree.ts

@@ -2,6 +2,7 @@ import { AppRecord, BackendContext, DevtoolsApi } from '@vue-devtools/app-backen
 import { classify, kebabize } from '@vue-devtools/shared-utils'
 import { ComponentTreeNode, ComponentInstance } from '@vue/devtools-api'
 import { getRootElementsFromComponentInstance } from './el'
+import { applyPerfHooks } from './perf.js'
 import { getInstanceName, getRenderKey, getUniqueId, isBeingDestroyed } from './util'
 
 export let instanceMap: Map<any, any>
@@ -324,6 +325,7 @@ function mark (instance) {
  instance.$on('hook:beforeDestroy', function () {
  instanceMap.delete(refId)
  })
+ applyPerfHooks(api, instance, appRecord.options.app)
  }
 }
 

packages/app-backend-vue2/src/index.ts

@@ -3,6 +3,7 @@ import { backendInjections, getComponentName } from '@vue-devtools/shared-utils'
 import { ComponentInstance } from '@vue/devtools-api'
 import { editState, getCustomInstanceDetails, getInstanceDetails } from './components/data'
 import { getInstanceOrVnodeRect, findRelatedComponent, getRootElementsFromComponentInstance } from './components/el'
+import { initPerf } from './components/perf.js'
 import { getComponentParents, instanceMap, walkTree } from './components/tree'
 import { getInstanceName } from './components/util'
 import { wrapVueForEvents } from './events'
@@ -91,6 +92,9 @@ export const backend = defineBackend({
 
  // Plugin
  setupPlugin(api, app, Vue)
+
+ // Perf
+ initPerf(api, app, Vue)
  },
 })
 

packages/app-backend-vue2/src/plugin.ts

@@ -76,7 +76,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
  api.addTimelineEvent({
  layerId: ROUTER_CHANGES_LAYER_ID,
  event: {
- time: Date.now(),
+ time: api.now(),
  title: to.path,
  data: {
  from,
@@ -169,7 +169,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
  api.addTimelineEvent({
  layerId: VUEX_MUTATIONS_ID,
  event: {
- time: Date.now(),
+ time: api.now(),
  title: mutation.type,
  data,
  },
@@ -187,7 +187,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
  api.addTimelineEvent({
  layerId: VUEX_ACTIONS_ID,
  event: {
- time: Date.now(),
+ time: api.now(),
  title: action.type,
  data,
  },
@@ -203,7 +203,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
  data.payload = action.payload
  }
  action._id = actionId++
- action._time = Date.now()
+ action._time = api.now()
  data.state = state
 
  api.addTimelineEvent({
@@ -219,7 +219,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
  },
  after: (action, state) => {
  const data: any = {}
- const duration = Date.now() - action._time
+ const duration = api.now() - action._time
  data.duration = {
  _custom: {
  type: 'duration',
@@ -236,7 +236,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
  api.addTimelineEvent({
  layerId: VUEX_ACTIONS_ID,
  event: {
- time: Date.now(),
+ time: api.now(),
  title: action.type,
  groupId: action._id,
  subtitle: 'end',