feat: new visitComponentTree hook called for each node in the tree

Author: Akryum

packages/api/src/api/hooks.ts

@@ -8,6 +8,7 @@ export const enum Hooks {
   GET_APP_ROOT_INSTANCE = 'getAppRootInstance',
   REGISTER_APPLICATION = 'registerApplication',
   WALK_COMPONENT_TREE = 'walkComponentTree',
+  VISIT_COMPONENT_TREE = 'visitComponentTree',
   WALK_COMPONENT_PARENTS = 'walkComponentParents',
   INSPECT_COMPONENT = 'inspectComponent',
   GET_COMPONENT_BOUNDS = 'getComponentBounds',
@@ -51,6 +52,11 @@ export type HookPayloads = {
     maxDepth: number
     filter: string
   }
+  [Hooks.VISIT_COMPONENT_TREE]: {
+    componentInstance: ComponentInstance
+    treeNode: ComponentTreeNode
+    filter: string
+  }
   [Hooks.WALK_COMPONENT_PARENTS]: {
     componentInstance: ComponentInstance
     parentInstances: ComponentInstance[]
@@ -126,6 +132,7 @@ export interface Hookable<TContext> {
   getAppRootInstance (handler: HookHandler<HookPayloads[Hooks.GET_APP_ROOT_INSTANCE], TContext>)
   registerApplication (handler: HookHandler<HookPayloads[Hooks.REGISTER_APPLICATION], TContext>)
   walkComponentTree (handler: HookHandler<HookPayloads[Hooks.WALK_COMPONENT_TREE], TContext>)
+  visitComponentTree (handler: HookHandler<HookPayloads[Hooks.VISIT_COMPONENT_TREE], TContext>)
   walkComponentParents (handler: HookHandler<HookPayloads[Hooks.WALK_COMPONENT_PARENTS], TContext>)
   inspectComponent (handler: HookHandler<HookPayloads[Hooks.INSPECT_COMPONENT], TContext>)
   getComponentBounds (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_BOUNDS], TContext>)

packages/app-backend-api/src/api.ts

@@ -9,7 +9,8 @@ import {
   TimelineEventOptions,
   CustomInspectorOptions,
   EditStatePayload,
-  WithId
+  WithId,
+  ComponentTreeNode
 } from '@vue/devtools-api'
 import { DevtoolsHookable } from './hooks'
 import { BackendContext } from './backend-context'
@@ -84,6 +85,15 @@ export class DevtoolsApi {
     return payload.componentTreeData
   }
 
+  async visitComponentTree (instance: ComponentInstance, treeNode: ComponentTreeNode, filter: string = null) {
+    const payload = await this.callHook(Hooks.VISIT_COMPONENT_TREE, {
+      componentInstance: instance,
+      treeNode,
+      filter
+    })
+    return payload.treeNode
+  }
+
   async walkComponentParents (instance: ComponentInstance) {
     const payload = await this.callHook(Hooks.WALK_COMPONENT_PARENTS, {
       componentInstance: instance,

packages/app-backend-api/src/hooks.ts

@@ -61,6 +61,10 @@ export class DevtoolsHookable implements Hookable<BackendContext> {
     this.hook(Hooks.WALK_COMPONENT_TREE, handler)
   }
 
+  visitComponentTree (handler: Handler<HookPayloads[Hooks.VISIT_COMPONENT_TREE]>) {
+    this.hook(Hooks.VISIT_COMPONENT_TREE, handler)
+  }
+
   walkComponentParents (handler: Handler<HookPayloads[Hooks.WALK_COMPONENT_PARENTS]>) {
     this.hook(Hooks.WALK_COMPONENT_PARENTS, handler)
   }

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

@@ -18,7 +18,7 @@ export class ComponentWalker {
     this.componentFilter = new ComponentFilter(filter)
   }
 
-  getComponentTree (instance: any) {
+  getComponentTree (instance: any): Promise<ComponentTreeNode[]> {
     this.captureIds = new Map()
     return this.findQualifiedChildren(instance, 0)
   }
@@ -43,9 +43,9 @@ export class ComponentWalker {
    * @param {Vue|Vnode} instance
    * @return {Vue|Array}
    */
-  private findQualifiedChildren (instance: any, depth: number) {
+  private async findQualifiedChildren (instance: any, depth: number): Promise<ComponentTreeNode[]> {
     if (this.componentFilter.isQualified(instance)) {
-      return [this.capture(instance, null, depth)]
+      return [await this.capture(instance, null, depth)]
     } else if (instance.subTree) {
       // TODO functional components
       return this.findQualifiedChildrenFromList(this.getInternalInstanceChildren(instance.subTree), depth)
@@ -63,12 +63,14 @@ export class ComponentWalker {
    * @param {Array} instances
    * @return {Array}
    */
-  private findQualifiedChildrenFromList (instances, depth: number) {
+  private async findQualifiedChildrenFromList (instances, depth: number): Promise<ComponentTreeNode[]> {
     instances = instances
       .filter(child => !isBeingDestroyed(child))
-    return !this.componentFilter.filter
-      ? instances.map((child, index, list) => this.capture(child, list, depth))
-      : Array.prototype.concat.apply([], instances.map(i => this.findQualifiedChildren(i, depth)))
+    if (!this.componentFilter.filter) {
+      return Promise.all(instances.map((child, index, list) => this.capture(child, list, depth)))
+    } else {
+      return Array.prototype.concat.apply([], await Promise.all(instances.map(i => this.findQualifiedChildren(i, depth))))
+    }
   }
 
   /**
@@ -119,15 +121,15 @@ export class ComponentWalker {
    * @param {Vue} instance
    * @return {Object}
    */
-  private capture (instance: any, list: any[], depth: number): ComponentTreeNode {
+  private async capture (instance: any, list: any[], depth: number): Promise<ComponentTreeNode> {
     const id = this.captureId(instance)
 
     const name = getInstanceName(instance)
 
     const children = this.getInternalInstanceChildren(instance.subTree)
       .filter(child => !isBeingDestroyed(child))
 
-    const ret: ComponentTreeNode = {
+    const treeNode: ComponentTreeNode = {
       uid: instance.uid,
       id,
       name,
@@ -141,26 +143,26 @@ export class ComponentWalker {
 
     // capture children
     if (depth < this.maxDepth) {
-      ret.children = children
+      treeNode.children = await Promise.all(children
         .map((child, index, list) => this.capture(child, list, depth + 1))
-        .filter(Boolean)
+        .filter(Boolean))
     }
 
     // record screen position to ensure correct ordering
     if ((!list || list.length > 1) && !instance._inactive) {
       const rect = getInstanceOrVnodeRect(instance)
-      ret.positionTop = rect ? rect.positionTop : Infinity
+      treeNode.positionTop = rect ? rect.positionTop : Infinity
     }
 
     if (instance.suspense) {
-      ret.tags.push({
+      treeNode.tags.push({
         label: 'suspense',
         backgroundColor: 0xc5c4fc,
         textColor: 0xffffff
       })
     }
 
-    return ret
+    return this.ctx.api.visitComponentTree(instance, treeNode, this.componentFilter.filter)
   }
 
   /**

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

@@ -25,9 +25,9 @@ export const backend: DevtoolsBackend = {
       }
     })
 
-    api.on.walkComponentTree((payload, ctx) => {
+    api.on.walkComponentTree(async (payload, ctx) => {
       const walker = new ComponentWalker(payload.maxDepth, payload.filter, ctx)
-      payload.componentTreeData = walker.getComponentTree(payload.componentInstance)
+      payload.componentTreeData = await walker.getComponentTree(payload.componentInstance)
     })
 
     api.on.walkComponentParents((payload, ctx) => {

packages/shell-dev-vue3/src/devtools-plugin/index.js

@@ -21,15 +21,20 @@ export default {
 
       let time = 0
 
-      api.on.walkComponentTree((payload, ctx) => {
-        for (const node of payload.componentTreeData) {
-          if (node.name === 'MyApp') {
-            node.tags.push({
-              label: 'root',
-              textColor: 0x000000,
-              backgroundColor: 0xFF984F
-            })
-          }
+      api.on.visitComponentTree((payload, ctx) => {
+        const node = payload.treeNode
+        if (node.name === 'MyApp') {
+          node.tags.push({
+            label: 'root',
+            textColor: 0x000000,
+            backgroundColor: 0xFF984F
+          })
+        } else {
+          node.tags.push({
+            label: 'test',
+            textColor: 0x000000,
+            backgroundColor: 0xFF5555
+          })
         }
       })