feat(components): show fullPath when hovering open-in-editor button (#134)

* feat(components): show fullPath when hovering open-in-editor button

* chore: update

---------

Co-authored-by: webfansplz <[email protected]>

Author: brenner8023

playground/src/components/HelloWorld.vue

@@ -18,9 +18,3 @@ const count = ref(10)
 
   <Child msg="123456" />
 </template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/client/logic/global.ts

@@ -1,6 +1,7 @@
 import type { VueDevtoolsHostClient } from '../../types'
 import { useDevToolsClient } from './client'
 import { initApp } from './app'
+import { rpc } from './rpc'
 
 export interface VueDevtoolsGlobal {
   loaded: boolean
@@ -29,3 +30,6 @@ export function createDevToolsClient() {
     },
   }
 }
+
+export const inspectClientUrl = await rpc.inspectClientUrl()
+export const rootPath = await rpc.root()

src/client/logic/graph.ts

@@ -8,7 +8,6 @@ export const list = ref<ModuleInfo[]>(await rpc.componentGraph())
 export const searchText = useStorage('vite-inspect-search-text', '')
 export const includeNodeModules = useStorage('vite-inspect-include-node-modules', false)
 export const includeVirtual = useStorage('vite-inspect-include-virtual', false)
-export const rootPath = ref(await rpc.root())
 export const userCustomGlobPattern = useStorage('__vue-devtools-graph-glob__', '')
 
 function getDepsByExactId(data: typeof list.value, searchId: string) {

src/client/logic/rpc.ts

@@ -12,5 +12,3 @@ export const rpc
       hookApi.hook.emit('__vue-devtools:terminal:exit__', data)
     },
   })
-
-export const inspectClientUrl = await rpc.inspectClientUrl()

src/client/pages/components.vue

@@ -4,6 +4,8 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { ComponentWalker, getInstanceState } from '../logic/components'
 import { useDevToolsClient } from '../logic/client'
 import { instance, onVueInstanceUpdate } from '../logic/app'
+import { rootPath } from '../logic/global'
+
 import { scrollToComponent, selected, selectedComponentName, selectedComponentNode, selectedComponentNodeFilePath } from '../composables/component'
 
 const componentTree = ref<ComponentTreeNode[]>([])
@@ -98,7 +100,7 @@ function openInEditor() {
                 <i carbon-launch cursor-pointer text-sm op70 hover="op100" @click="openInEditor" />
                 <template #popper>
                   <p text-xs op-50>
-                    Open component in editor
+                    Open {{ selectedComponentNodeFilePath.replace(rootPath, '') }} in editor
                   </p>
                 </template>
               </VTooltip>

src/client/pages/graph.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { Data, Options } from 'vis-network'
 import { Network } from 'vis-network'
-import { searchResults as modules, rootPath } from '../logic/graph'
+import { searchResults as modules } from '../logic/graph'
 import { useDevToolsClient } from '../logic/client'
+import { rootPath } from '../logic/global'
 import { useGraphSettings } from '../composables/graph'
 import type { GraphSettingsType } from '../composables/graph'
 
@@ -47,7 +48,7 @@ const data = computed<Data>(() => {
     return {
       id,
       label: isInMain ? `<b>${pathSegments.at(-1)}</b>` : pathSegments.at(-1),
-      title: getHoverPath(settings.graphSettings.value.hoverPathLevel, path, rootPath.value),
+      title: getHoverPath(settings.graphSettings.value.hoverPathLevel, path, rootPath),
       group: path.match(/\.(\w+)$/)?.[1] || 'unknown',
       size: 15 + Math.min(mod.deps.length / 2, 8),
       font: {

src/client/pages/inspect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inspectClientUrl } from '../logic/rpc'
+import { inspectClientUrl } from '../logic/global'
 </script>
 
 <template>