feat: expand nodes loaded after event

Author: konpeki622

packages/api/src/api/component.ts

@@ -17,6 +17,7 @@ export interface ComponentTreeNode {
   isRouterView?: boolean
   macthedRouteSegment?: string
   tags: InspectorNodeTag[]
+  autoOpen: boolean
   meta?: any
 }
 

packages/api/src/api/hooks.ts

@@ -56,6 +56,7 @@ export type HookPayloads = {
     componentTreeData: ComponentTreeNode[]
     maxDepth: number
     filter: string
+    recursively: boolean
   }
   [Hooks.VISIT_COMPONENT_TREE]: {
     app: App

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

@@ -87,12 +87,13 @@ export class DevtoolsApi {
     })
   }
 
-  async walkComponentTree (instance: ComponentInstance, maxDepth = -1, filter: string = null) {
+  async walkComponentTree (instance: ComponentInstance, maxDepth = -1, filter: string = null, recursively = false) {
     const payload = await this.callHook(Hooks.WALK_COMPONENT_TREE, {
       componentInstance: instance,
       componentTreeData: null,
       maxDepth,
       filter,
+      recursively,
     })
     return payload.componentTreeData
   }

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

@@ -6,7 +6,7 @@ import { App, ComponentInstance, EditStatePayload } from '@vue/devtools-api'
 const MAX_$VM = 10
 const $vmQueue = []
 
-export async function sendComponentTreeData (appRecord: AppRecord, instanceId: string, filter = '', maxDepth: number = null, ctx: BackendContext) {
+export async function sendComponentTreeData (appRecord: AppRecord, instanceId: string, filter = '', maxDepth: number = null, ctx: BackendContext, recursively = false) {
   if (!instanceId || appRecord !== ctx.currentAppRecord) return
 
   // Flush will send all components in the tree
@@ -30,7 +30,7 @@ export async function sendComponentTreeData (appRecord: AppRecord, instanceId: s
     if (maxDepth == null) {
       maxDepth = instance === ctx.currentAppRecord.rootInstance ? 2 : 1
     }
-    const data = await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter)
+    const data = await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter, recursively)
     const payload = {
       instanceId,
       treeData: stringify(data),

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

@@ -359,9 +359,9 @@ function connectBridge () {
 
   // Components
 
-  ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_TREE, ({ instanceId, filter }) => {
+  ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_TREE, ({ instanceId, filter, recursively }) => {
     ctx.currentAppRecord.componentFilter = filter
-    sendComponentTreeData(ctx.currentAppRecord, instanceId, filter, null, ctx)
+    sendComponentTreeData(ctx.currentAppRecord, instanceId, filter, null, ctx, recursively)
     subscribe(BridgeSubscriptions.COMPONENT_TREE, { instanceId })
   })
 

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

@@ -13,15 +13,17 @@ let api: DevtoolsApi
 const consoleBoundInstances = Array(5)
 
 let filter = ''
+let recursively = false
 const functionalIds = new Map()
 
 // Dedupe instances
 // Some instances may be both on a component and on a child abstract/functional component
 const captureIds = new Map()
 
-export async function walkTree (instance, pFilter: string, api: DevtoolsApi, ctx: BackendContext): Promise<ComponentTreeNode[]> {
+export async function walkTree (instance, pFilter: string, pRecursively: boolean, api: DevtoolsApi, ctx: BackendContext): Promise<ComponentTreeNode[]> {
   initCtx(api, ctx)
   filter = pFilter
+  recursively = pRecursively
   functionalIds.clear()
   captureIds.clear()
   const result: ComponentTreeNode[] = flatten(await findQualifiedChildren(instance))
@@ -205,6 +207,7 @@ async function capture (instance, index?: number, list?: any[]): Promise<Compone
       hasChildren: !!children.length,
       inactive: false,
       isFragment: false, // TODO: Check what is it for.
+      autoOpen: recursively,
     }
     return api.visitComponentTree(
       instance,
@@ -241,6 +244,7 @@ async function capture (instance, index?: number, list?: any[]): Promise<Compone
     isFragment: !!instance._isFragment,
     children,
     hasChildren: !!children.length,
+    autoOpen: recursively,
     tags: [],
     meta: {},
   }

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

@@ -27,7 +27,7 @@ export const backend = defineBackend({
     })
 
     api.on.walkComponentTree(async (payload, ctx) => {
-      payload.componentTreeData = await walkTree(payload.componentInstance, payload.filter, api, ctx)
+      payload.componentTreeData = await walkTree(payload.componentInstance, payload.filter, payload.recursively, api, ctx)
     })
 
     api.on.walkComponentParents((payload, ctx) => {

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

@@ -8,15 +8,17 @@ export class ComponentWalker {
   ctx: BackendContext
   api: DevtoolsApi
   maxDepth: number
+  recursively: boolean
   componentFilter: ComponentFilter
   // Dedupe instances
   // Some instances may be both on a component and on a child abstract/functional component
   captureIds: Map<string, undefined>
 
-  constructor (maxDepth: number, filter: string, api: DevtoolsApi, ctx: BackendContext) {
+  constructor (maxDepth: number, filter: string, recursively: boolean, api: DevtoolsApi, ctx: BackendContext) {
     this.ctx = ctx
     this.api = api
     this.maxDepth = maxDepth
+    this.recursively = recursively
     this.componentFilter = new ComponentFilter(filter)
   }
 
@@ -146,6 +148,7 @@ export class ComponentWalker {
       children: [],
       isFragment: isFragment(instance),
       tags: [],
+      autoOpen: this.recursively,
     }
 
     // capture children

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

@@ -26,12 +26,12 @@ export const backend = defineBackend({
     })
 
     api.on.walkComponentTree(async (payload, ctx) => {
-      const walker = new ComponentWalker(payload.maxDepth, payload.filter, api, ctx)
+      const walker = new ComponentWalker(payload.maxDepth, payload.filter, payload.recursively, api, ctx)
       payload.componentTreeData = await walker.getComponentTree(payload.componentInstance)
     })
 
     api.on.walkComponentParents((payload, ctx) => {
-      const walker = new ComponentWalker(0, null, api, ctx)
+      const walker = new ComponentWalker(0, null, false, api, ctx)
       payload.parentInstances = walker.getComponentParents(payload.componentInstance)
     })
 

packages/app-frontend/src/features/components/composable/components.ts

@@ -142,7 +142,10 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
     const isOpen = value === undefined ? !isExpanded.value : value
     setComponentOpen(treeNode.id, isOpen)
     if (isComponentOpen(treeNode.id)) {
-      requestComponentTree(treeNode.id)
+      requestComponentTree(treeNode.id, recursively)
+    } else {
+      // stop expanding all treenode
+      treeNode.autoOpen = false
     }
     if (recursively) {
       treeNode.children.forEach(child => {
@@ -176,6 +179,9 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
   }
 
   onMounted(() => {
+    if (instance.value.autoOpen) {
+      toggleExpand(true, true)
+    }
     if (isExpanded.value) {
       requestComponentTree(instance.value.id)
     }
@@ -270,7 +276,7 @@ export function resetComponents () {
 
 export const requestedComponentTree = new Set()
 
-export async function requestComponentTree (instanceId: ComponentTreeNode['id'] = null) {
+export async function requestComponentTree (instanceId: ComponentTreeNode['id'] = null, recursively = false) {
   if (!instanceId) {
     instanceId = '_root'
   }
@@ -285,6 +291,7 @@ export async function requestComponentTree (instanceId: ComponentTreeNode['id']
   getBridge().send(BridgeEvents.TO_BACK_COMPONENT_TREE, {
     instanceId,
     filter: treeFilter.value,
+    recursively,
   })
 }