fix: improved component search, closes #1652

Author: Akryum

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

@@ -125,3 +125,8 @@ export function getComponentInstance (appRecord: AppRecord, instanceId: string,
   }
   return instance
 }
+
+export async function refreshComponentTreeSearch (ctx: BackendContext) {
+  if (!ctx.currentAppRecord.componentFilter) return
+  await sendComponentTreeData(ctx.currentAppRecord, '_root', ctx.currentAppRecord.componentFilter, null, ctx)
+}

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

@@ -31,6 +31,7 @@ import {
   getComponentId,
   editComponentState,
   getComponentInstance,
+  refreshComponentTreeSearch,
 } from './component'
 import { addQueuedPlugins, addPlugin, sendPluginList, addPreviouslyRegisteredPlugins } from './plugin'
 import { PluginDescriptor, SetupFunction, TimelineLayerOptions, TimelineEventOptions, CustomInspectorOptions, Hooks } from '@vue/devtools-api'
@@ -167,6 +168,8 @@ async function connect () {
       if (ctx.currentInspectedComponentId === id) {
         sendSelectedComponentData(appRecord, id, ctx)
       }
+
+      await refreshComponentTreeSearch(ctx)
     } catch (e) {
       if (SharedData.debugInfo) {
         console.error(e)
@@ -200,6 +203,8 @@ async function connect () {
         sendEmptyComponentData(id, ctx)
       }
       appRecord.instanceMap.delete(id)
+
+      await refreshComponentTreeSearch(ctx)
     } catch (e) {
       if (SharedData.debugInfo) {
         console.error(e)

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

@@ -50,7 +50,10 @@ export class ComponentWalker {
       return [await this.capture(instance, null, depth)]
     } else if (instance.subTree) {
       // TODO functional components
-      return this.findQualifiedChildrenFromList(this.getInternalInstanceChildren(instance.subTree), depth)
+      const list = this.isKeepAlive(instance)
+        ? this.getKeepAliveCachedInstances(instance)
+        : this.getInternalInstanceChildren(instance.subTree)
+      return this.findQualifiedChildrenFromList(list, depth)
     } else {
       return []
     }
@@ -164,8 +167,8 @@ export class ComponentWalker {
     }
 
     // keep-alive
-    if (instance.type.__isKeepAlive && instance.__v_cache) {
-      const cachedComponents = Array.from(instance.__v_cache.values()).map((vnode: any) => vnode.component).filter(Boolean)
+    if (this.isKeepAlive(instance)) {
+      const cachedComponents = this.getKeepAliveCachedInstances(instance)
       const childrenIds = children.map(child => child.__VUE_DEVTOOLS_UID__)
       for (const cachedChild of cachedComponents) {
         if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_UID__)) {
@@ -218,4 +221,12 @@ export class ComponentWalker {
       instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance)
     }
   }
+
+  private isKeepAlive (instance) {
+    return instance.type.__isKeepAlive && instance.__v_cache
+  }
+
+  private getKeepAliveCachedInstances (instance) {
+    return Array.from(instance.__v_cache.values()).map((vnode: any) => vnode.component).filter(Boolean)
+  }
 }