feat(vue2): perf timeline, closes #1744

Author: Akryum

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',