feat: support navigating to virtual file

packages/devtools/client/components/AssetDetails.vue

@@ -6,6 +6,8 @@ const props = defineProps<{
   asset: AssetInfo
 }>()
 
+const openInEditor = useOpenInEditor()
+
 const imageMeta = computedAsync(() => {
   if (props.asset.type !== 'image')
     return undefined

packages/devtools/client/components/ComposableItem.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
 }>()
 
 const copy = useCopy()
+const openInEditor = useOpenInEditor()
 
 const name = computed(() => props.item.as || props.item.name)
 const usageCount = computed(() => props.metadata?.injectionUsage?.[name.value]?.count || 0)

packages/devtools/client/components/FilepathItem.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
   subpath?: boolean
 }>()
 
+const openInEditor = useOpenInEditor()
 const config = useServerConfig()
 const parsed = computed(() => (props.filepath && config.value)
   ? parseReadablePath(props.filepath, config.value.rootDir)

packages/devtools/client/components/ModuleItem.vue

@@ -30,6 +30,8 @@ const iconBase = 'https://api.nuxtjs.org/api/ipx/s_80,f_webp/gh/nuxt/modules/mai
 const avatarBase = 'https://api.nuxtjs.org/api/ipx/s_44,f_webp/gh_avatar/'
 const githubBase = 'https://github.com/'
 const npmBase = 'https://www.npmjs.com/package/'
+
+const openInEditor = useOpenInEditor()
 </script>
 
 <template>
@@ -50,7 +52,7 @@ const npmBase = 'https://www.npmjs.com/package/'
           v-else-if="mod.entryPath"
           role="button"
           hover="underline text-primary"
-          @click="rpc.openInEditor(mod.entryPath!)"
+          @click="openInEditor(mod.entryPath!)"
         >
           {{ data.name }}
         </button>

packages/devtools/client/components/RoutesTable.vue

@@ -13,6 +13,7 @@ defineEmits<{
   (e: 'navigate', path: string): void
 }>()
 
+const openInEditor = useOpenInEditor()
 const sorted = computed(() => {
   return [...props.pages].sort((a, b) => a.path.localeCompare(b.path))
 })

packages/devtools/client/components/ServerRouteDetails.vue

@@ -45,6 +45,8 @@ const fetchTime = ref(0)
 const fetching = ref(false)
 const started = ref(false)
 
+const openInEditor = useOpenInEditor()
+
 const parsedRoute = computed(() => props.route.route?.split(/((?:\*\*)?:[\w_]+)/g))
 const paramNames = computed(() => parsedRoute.value?.filter(i => i.startsWith(':') || i.startsWith('**:')) || [])
 

packages/devtools/client/composables/editor.ts

@@ -1,7 +1,23 @@
 import { useClipboard } from '@vueuse/core'
 
-export async function openInEditor(filepath: string) {
-  await rpc.openInEditor(filepath)
+export function useOpenInEditor() {
+  const config = useServerConfig()
+  const virtualFiles = useVirtualFiles()
+  const router = useRouter()
+
+  return async (filepath: string) => {
+    const buildDir = config.value?.buildDir
+    const path = (buildDir && filepath.startsWith(buildDir))
+      ? `#build${filepath.slice(buildDir.length).replace(/\.\w+$/, '')}`
+      : filepath
+
+    const vfs = virtualFiles.value?.entries.find(i => i.path === path || i.id === path)
+    || virtualFiles.value?.entries.find(i => i.path === filepath || i.id === filepath)
+    if (vfs)
+      router.push(`/modules/virtual-files?id=${encodeURIComponent(vfs.id)}`)
+    else
+      await rpc.openInEditor(filepath)
+  }
 }
 
 export function useCopy() {

packages/devtools/client/composables/state.ts

@@ -176,3 +176,25 @@ interface RestartDialog {
 export function useRestartDialogs() {
   return useState<RestartDialog[]>('devtools:restart-dialogs', () => [])
 }
+
+export interface VfsData {
+  rootDir: string
+  entries: {
+    id: string
+    path: string
+  }[]
+}
+
+export interface VfsFile {
+  id: string
+  content: string
+}
+
+export function useVirtualFiles() {
+  const { data } = useFetch<VfsData>('/_vfs.json', {
+    key: 'vfs-list',
+    baseURL: '/',
+    responseType: 'json',
+  })
+  return data
+}

packages/devtools/client/pages/modules/plugins.vue

@@ -12,7 +12,7 @@ const client = useClient()
 
 const plugins = computed((): PluginInfoWithMetic[] => {
   const plugins = config.value?.plugins || []
-  const metics = client.value.getClientPluginMetrics()
+  const metics = client.value?.getClientPluginMetrics() || []
 
   return plugins.map((plugin) => {
     const p = typeof plugin === 'string' ? { src: plugin } : plugin
@@ -24,7 +24,7 @@ const plugins = computed((): PluginInfoWithMetic[] => {
 })
 
 const totalTime = computed(() => {
-  const metics = client.value.getClientPluginMetrics()
+  const metics = client.value?.getClientPluginMetrics() || []
   const minStart = Math.min(...metics.map(m => m.start))
   const maxEnd = Math.max(...metics.map(m => m.end))
   return maxEnd - minStart

packages/devtools/client/pages/modules/virtual-files.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
+import type { VfsFile } from '~/composables/state'
 
 definePageMeta({
   icon: 'i-carbon-border-none',
@@ -8,26 +9,9 @@ definePageMeta({
   category: 'advanced',
 })
 
-interface VfsData {
-  rootDir: string
-  entries: {
-    id: string
-    path: string
-  }[]
-}
-
-interface VfsFile {
-  id: string
-  content: string
-}
-
 const searchString = ref('')
 
-const { data } = await useFetch<VfsData>('/_vfs.json', {
-  key: 'vfs-list',
-  baseURL: '/',
-  responseType: 'json',
-})
+const data = useVirtualFiles()
 
 const fileId = computed(() => useRoute().query?.id as string | undefined)