fix(applet): stabilize search results when updating component tree (#539)

Author: alexzhang1030

packages/applet/src/modules/components/index.vue

@@ -129,7 +129,7 @@ const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('component-state')
 createSelectedContext()
 
-function getComponentsInspectorTree(filter = '') {
+async function getComponentsInspectorTree(filter = '') {
   return rpc.value.getInspectorTree({ inspectorId, filter }).then((data) => {
     const res = parse(data)
     tree.value = res
@@ -184,14 +184,32 @@ rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorSta
 
 getComponentsInspectorTree()
 
+function searchComponentTree(v: string) {
+  const value = v.trim().toLowerCase()
+  toggleFiltered()
+  getComponentsInspectorTree(value).then(() => {
+    toggleFiltered()
+  })
+}
+
+watchDebounced(filterComponentName, (v) => {
+  searchComponentTree(v)
+}, { debounce: 300 })
+
 function onInspectorTreeUpdated(_data: string) {
   const data = parse(_data) as {
     inspectorId: string
     rootNodes: CustomInspectorNode[]
   }
   if (data.inspectorId !== inspectorId)
     return
-  tree.value = data.rootNodes
+
+  if (filterComponentName.value) {
+    searchComponentTree(filterComponentName.value)
+  }
+  else {
+    tree.value = data.rootNodes
+  }
 
   if (!flattenedTreeNodesIds.value.includes(activeComponentId.value)) {
     activeComponentId.value = tree.value?.[0]?.id
@@ -206,14 +224,6 @@ onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
 })
 
-watchDebounced(filterComponentName, (v) => {
-  const value = v.trim().toLowerCase()
-  toggleFiltered()
-  getComponentsInspectorTree(value).then(() => {
-    toggleFiltered()
-  })
-}, { debounce: 300 })
-
 function inspectComponentInspector() {
   inspectComponentTipVisible.value = true
   emit('onInspectComponentStart')

packages/playground/basic/src/main.ts

@@ -54,6 +54,11 @@ const routes: RouteRecordRaw[] = [
     component: () => import('./pages/CircularState.vue'),
     name: 'circular-state',
   },
+  {
+    path: '/interval-update',
+    component: () => import('./pages/IntervalUpdate.vue'),
+    name: 'interval-update',
+  },
 ]
 
 const router = createRouter({

packages/playground/basic/src/pages/IntervalUpdate.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Foo from '../components/Foo.vue'
+
+const str = ref<'hello' | 'world'>('hello')
+
+useIntervalFn(() => {
+  str.value = str.value === 'hello' ? 'world' : 'hello'
+}, 1000)
+</script>
+
+<template>
+  <div>
+    This is {{ str }} time!
+    <Foo />
+  </div>
+</template>