feat(client): unhighlight component when unmounted for custom inspector

vuejs · Jun 6, 2024 · 25ef3b5 · 25ef3b5
1 parent 2a772a8
commit 25ef3b5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/applet/src/modules/custom-inspector/index.vue b/packages/applet/src/modules/custom-inspector/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { onRpcConnected, rpc } from '@vue/devtools-core'
 
 import Home from './components/Home.vue'
@@ -69,6 +69,10 @@ watch(() => props.id, () => {
 }, {
   immediate: true,
 })
+
+onUnmounted(() => {
+  rpc.value.unhighlight()
+})
 </script>
 
 <template>

diff --git a/packages/core/src/rpc/global.ts b/packages/core/src/rpc/global.ts
@@ -1,4 +1,4 @@
-import { DevToolsMessagingHookKeys, devtools, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected } from '@vue/devtools-kit'
+import { DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtools, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected } from '@vue/devtools-kit'
 import { createHooks } from 'hookable'
 import type { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, OpenInEditorOptions } from '@vue/devtools-kit'
 
@@ -142,6 +142,9 @@ export const functions = {
   getInspectorInfo(id: string) {
     return getInspectorInfo(id)
   },
+  unhighlight() {
+    devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT)
+  },
   // listen to devtools server events
   initDevToolsServerListener() {
     const rpcServer = getRpcServer<RPCFunctions>()