feat: component highlighter (#683)

Author: webfansplz

packages/applet/src/components/tree/TreeViewer.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
   depth: 0,
   withTag: false,
 })
+const emit = defineEmits(['hover', 'leave'])
 const selectedNodeId = defineModel()
 const { expanded, toggleExpanded } = useToggleExpanded()
 const { select: _select } = useSelect()
@@ -43,6 +44,8 @@ function select(id: string) {
       :class="{ 'bg-primary-600! active': selectedNodeId === item.id }"
       @click="select(item.id)"
       @dblclick="toggleExpanded(item.id)"
+      @mouseover="() => emit('hover', item.id)"
+      @mouseleave="() => emit('leave')"
     >
       <ToggleExpanded
         v-if="item?.children?.length"
@@ -86,7 +89,9 @@ function select(id: string) {
     <div
       v-if="item?.children?.length && expanded.includes(item.id)"
     >
-      <ComponentTreeViewer v-model="selectedNodeId" :data="item?.children" :depth="depth + 1" :with-tag="withTag" />
+      <ComponentTreeViewer
+        v-model="selectedNodeId" :data="item?.children" :depth="depth + 1" :with-tag="withTag" @hover="(id) => emit('hover', id)" @leave="emit('leave')"
+      />
     </div>
   </div>
 </template>

packages/applet/src/composables/component-highlight.ts

@@ -0,0 +1,19 @@
+import { rpc } from '@vue/devtools-core'
+import { useDebounceFn } from '@vueuse/core'
+
+const THROTTLE_TIME = 200
+
+export function useComponentHighlight() {
+  const highlight = useDebounceFn((id: string) => {
+    return rpc.value.highlighComponent(id)
+  }, THROTTLE_TIME)
+
+  const unhighlight = useDebounceFn(() => {
+    return rpc.value.unhighlight()
+  }, THROTTLE_TIME)
+
+  return {
+    highlight,
+    unhighlight,
+  }
+}

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

@@ -15,6 +15,7 @@ import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
+import { useComponentHighlight } from '~/composables/component-highlight'
 import { createSelectedContext } from '~/composables/select'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import { filterInspectorState } from '~/utils'
@@ -34,6 +35,7 @@ const componentTreeLoaded = ref(false)
 const inspectComponentTipVisible = ref(false)
 const componentRenderCode = ref('')
 const componentRenderCodeVisible = ref(false)
+const highlighter = useComponentHighlight()
 
 // tree
 function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
@@ -321,7 +323,7 @@ function toggleApp(id: string) {
             </button>
           </div>
           <div ref="componentTreeContainer" class="no-scrollbar flex-1 select-none overflow-scroll">
-            <ComponentTree v-model="activeComponentId" :data="tree" :with-tag="true" />
+            <ComponentTree v-model="activeComponentId" :data="tree" :with-tag="true" @hover="highlighter.highlight" @leave="highlighter.unhighlight" />
           </div>
         </div>
       </Pane>

packages/core/src/rpc/global.ts

@@ -155,8 +155,11 @@ export const functions = {
   getInspectorInfo(id: string) {
     return getInspectorInfo(id)
   },
+  highlighComponent(uid: string) {
+    return devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, { uid })
+  },
   unhighlight() {
-    devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT)
+    return devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT)
   },
   updateDevToolsClientDetected(params: Record<string, boolean>) {
     updateDevToolsClientDetected(params)

packages/devtools-kit/src/core/component-highlighter/index.ts

@@ -145,6 +145,8 @@ export function toggleComponentHighLighter(options: ComponentHighLighterOptions)
 
 export function highlight(instance: VueAppInstance) {
   const bounds = getComponentBoundingRect(instance)
+  if (!bounds.width && !bounds.height)
+    return
   const name = getInstanceName(instance)
   const container = getContainerElement()
   container ? update({ bounds, name }) : create({ bounds, name })