feat: support filter components in component tree (#173)

* feat: support filter components in component tree

* fix: to lowercase

* chore: hide if not init

Author: alexzhang1030

packages/client/logic/components/filter.ts

@@ -2,7 +2,7 @@ import type { ComponentInternalInstance } from 'vue'
 import { classify, getInstanceName, kebabize } from './util'
 
 export class ComponentFilter {
-  filter: string
+  private filter: string
 
   constructor(filter: string | null) {
     this.filter = filter || ''
@@ -19,4 +19,8 @@ export class ComponentFilter {
     return classify(name).toLowerCase().includes(this.filter)
       || kebabize(name).toLowerCase().includes(this.filter)
   }
+
+  setFilter(filter: string) {
+    this.filter = filter
+  }
 }

packages/client/pages/components.vue

@@ -10,6 +10,17 @@ import { instance, onVueInstanceUpdate } from '~/logic/app'
 import { rootPath } from '~/logic/global'
 
 const componentTree = ref<ComponentTreeNode[]>([])
+const filterName = ref('')
+
+const componentWalker = shallowRef<ComponentWalker | null>(null)
+
+watchDebounced(filterName, (value) => {
+  value = value.trim().toLowerCase()
+  componentWalker.value!.componentFilter.setFilter(value)
+  componentWalker.value!.getComponentTree(instance.value!).then((res) => {
+    componentTree.value = res
+  })
+}, { debounce: 200 })
 
 function normalizeComponentState(value: unknown, type: string) {
   if (type === 'Reactive')
@@ -48,10 +59,10 @@ const normalizedComponentState = computed(() => {
 })
 
 function init() {
-  const walker = new ComponentWalker(500, null, true)
+  componentWalker.value = new ComponentWalker(500, null, true)
   selectedComponent.value = instance.value
   selectedComponentState.value = getInstanceState(instance.value!)
-  walker.getComponentTree(instance.value!).then((res) => {
+  componentWalker.value.getComponentTree(instance.value!).then((res) => {
     componentTree.value = res
     selectedComponentName.value = res?.[0]?.name ?? ''
     selectedComponentNode.value = res?.[0]
@@ -77,6 +88,9 @@ function openInEditor() {
   <div h-screen n-panel-grids>
     <Splitpanes>
       <Pane border="r base">
+        <div v-if="componentWalker" w-full px10px py12px>
+          <VDTextInput v-model="filterName" placeholder="Find components..." />
+        </div>
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <ComponentTreeNode v-for="(item) in componentTree" :key="item.id" :data="item" />
         </div>