feat(vue2): update tracking

Author: Akryum

packages/app-backend-core/src/component.ts

@@ -131,10 +131,8 @@ export async function refreshComponentTreeSearch (ctx: BackendContext) {
   await sendComponentTreeData(ctx.currentAppRecord, '_root', ctx.currentAppRecord.componentFilter, null, ctx)
 }
 
-export async function sendComponentUpdateTracking (appRecord: AppRecord, instanceId: string, ctx: BackendContext) {
+export async function sendComponentUpdateTracking (instanceId: string, ctx: BackendContext) {
   if (!instanceId) return
-  const instance = getComponentInstance(appRecord, instanceId, ctx)
-  if (!instance) return
   const payload = {
     instanceId,
     time: Date.now(), // Use normal date

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

@@ -134,7 +134,7 @@ async function connect () {
       }
 
       if (SharedData.trackUpdates) {
-        sendComponentUpdateTracking(appRecord, id, ctx)
+        sendComponentUpdateTracking(id, ctx)
       }
     } catch (e) {
       if (SharedData.debugInfo) {
@@ -169,7 +169,7 @@ async function connect () {
             }
 
             if (SharedData.trackUpdates) {
-              sendComponentUpdateTracking(appRecord, parentId, ctx)
+              sendComponentUpdateTracking(parentId, ctx)
             }
           }
         }
@@ -180,7 +180,7 @@ async function connect () {
       }
 
       if (SharedData.trackUpdates) {
-        sendComponentUpdateTracking(appRecord, id, ctx)
+        sendComponentUpdateTracking(id, ctx)
       }
 
       await refreshComponentTreeSearch(ctx)

packages/app-backend-vue2/package.json

@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@vue-devtools/app-backend-api": "^0.0.0",
+    "@vue-devtools/app-backend-core": "^0.0.0",
     "@vue-devtools/shared-utils": "^0.0.0",
     "@vue/devtools-api": "^6.0.0-beta.7",
-    "clone-deep": "^4.0.1"
+    "clone-deep": "^4.0.1",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@types/node": "^13.9.1",

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

@@ -3,6 +3,7 @@ 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 { applyTrackingUpdateHook } from './update-tracking.js'
 import { getInstanceName, getRenderKey, getUniqueId, isBeingDestroyed } from './util'
 
 export let instanceMap: Map<any, any>
@@ -326,6 +327,7 @@ function mark (instance) {
       instanceMap.delete(refId)
     })
     applyPerfHooks(api, instance, appRecord.options.app)
+    applyTrackingUpdateHook(api, instance)
   }
 }
 

packages/app-backend-vue2/src/components/update-tracking.ts

@@ -0,0 +1,45 @@
+import { DevtoolsApi } from '@vue-devtools/app-backend-api'
+import { SharedData } from '@vue-devtools/shared-utils'
+import { sendComponentUpdateTracking } from '@vue-devtools/app-backend-core/lib/component'
+import throttle from 'lodash/throttle'
+import { getUniqueId } from './util.js'
+
+export function initUpdateTracking (api: DevtoolsApi, Vue) {
+  // Global mixin
+  Vue.mixin({
+    beforeCreate () {
+      applyTrackingUpdateHook(api, this)
+    },
+  })
+}
+
+const COMPONENT_HOOKS = [
+  'created',
+  'updated',
+]
+
+export function applyTrackingUpdateHook (api: DevtoolsApi, vm) {
+  if (vm.$options.$_devtoolsUpdateTrackingHooks) return
+  vm.$options.$_devtoolsUpdateTrackingHooks = true
+
+  const handler = throttle(async function (this: any) {
+    if (SharedData.trackUpdates) {
+      sendComponentUpdateTracking(getUniqueId(this), api.ctx)
+
+      const parents = await api.walkComponentParents(this)
+      for (const parent of parents) {
+        sendComponentUpdateTracking(getUniqueId(parent), api.ctx)
+      }
+    }
+  }, 100)
+  for (const hook of COMPONENT_HOOKS) {
+    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/index.ts

@@ -5,6 +5,7 @@ import { editState, getCustomInstanceDetails, getInstanceDetails } from './compo
 import { getInstanceOrVnodeRect, findRelatedComponent, getRootElementsFromComponentInstance } from './components/el'
 import { initPerf } from './components/perf.js'
 import { getComponentParents, instanceMap, walkTree } from './components/tree'
+import { initUpdateTracking } from './components/update-tracking.js'
 import { getInstanceName } from './components/util'
 import { wrapVueForEvents } from './events'
 import { setupPlugin } from './plugin'
@@ -95,6 +96,8 @@ export const backend = defineBackend({
 
     // Perf
     initPerf(api, app, Vue)
+    // Update tracking
+    initUpdateTracking(api, Vue)
   },
 })