feat(vite): show asset importers (#334)

vuejs · Apr 14, 2024 · 318c8e8 · 318c8e8
1 parent 9c78ef3
commit 318c8e8
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 2 deletions.
diff --git a/packages/client/src/components/assets/AssetDetails.vue b/packages/client/src/components/assets/AssetDetails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
-import type { AssetInfo, CodeSnippet, ImageMeta } from '@vue/devtools-core'
+import type { AssetImporter, AssetInfo, CodeSnippet, ImageMeta } from '@vue/devtools-core'
 import { callViteServerAction, useDevToolsState } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 import { openInEditor } from '../../composables/open-in-editor'
@@ -16,6 +16,9 @@ const getImageMeta = callViteServerAction<ImageMeta>('assets:get-image-meta')
 const getTextAssetContent = callViteServerAction<string>('assets:get-text-asset-content')
 const asset = useVModel(props, 'modelValue', emit, { passive: true })
 
+const getAssetImporters = callViteServerAction<AssetImporter[]>('assets:get-asset-importers')
+const importers = computedAsync(() => getAssetImporters(asset.value.publicPath), [])
+
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const imageMeta = computedAsync(() => {
   if (asset.value.type !== 'image')
@@ -212,6 +215,30 @@ const supportsPreview = computed(() => {
           </td>
           <td>{{ new Date(asset.mtime).toLocaleString() }} <span op70>({{ timeAgo }})</span></td>
         </tr>
+        <tr>
+          <td w-30 ws-nowrap pr5 text-right align-top op50>
+            Importers
+          </td>
+          <td>
+            <template v-if="importers.length > 0">
+              <div v-for="importer in importers" :key="importer.url" flex="~ gap-1" w-full items-center>
+                <FilepathItem :filepath="importer.id || importer.url" text-left />
+                <VueIcon
+                  v-if="state.vitePluginDetected.value && _vueInspectorDetected && importer.id"
+                  v-tooltip="'Open in Editor'"
+                  title="Open in Editor"
+                  icon="i-carbon-launch"
+                  action flex-none
+                  :border="false"
+                  @click="openInEditor(importer.id!)"
+                />
+              </div>
+            </template>
+            <template v-else>
+              None
+            </template>
+          </td>
+        </tr>
       </tbody>
     </table>
 

diff --git a/packages/core/src/vite-bridge/module-types.ts b/packages/core/src/vite-bridge/module-types.ts
@@ -1,3 +1,5 @@
+import type { ModuleNode } from 'vite'
+
 // assets
 export type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'wasm' | 'other'
 export interface AssetInfo {
@@ -16,6 +18,8 @@ export interface ImageMeta {
   mimeType?: string
 }
 
+export type AssetImporter = Pick<ModuleNode, 'url' | 'id'>
+
 export interface AssetEntry {
   path: string
   content: string

diff --git a/packages/playground/basic/src/pages/Hey.vue b/packages/playground/basic/src/pages/Hey.vue
@@ -7,6 +7,7 @@ const counterStore = useCounterStore()
 
 <template>
   <div class="container">
+    <img src="/vite.svg">
     Hey: {{ route.params.id }}
     Counter: {{ counterStore.count }}
   </div>

diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
@@ -8,6 +8,7 @@ const visible = ref(false)
   <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
     Home
     <Foo v-if="visible" />
+    <img src="/vite.svg">
     <button class="w-30 cursor-pointer" @click="visible = !visible">
       Toggle Foo
     </button>

diff --git a/packages/vite/src/modules/assets.ts b/packages/vite/src/modules/assets.ts
@@ -3,7 +3,7 @@ import type { ViteInspectAPI } from 'vite-plugin-inspect'
 import { debounce } from 'perfect-debounce'
 import type { ResolvedConfig, ViteDevServer } from 'vite'
 import { callViteClientListener, defineViteServerAction } from '@vue/devtools-core'
-import type { AssetInfo, AssetType, ImageMeta } from '@vue/devtools-core'
+import type { AssetImporter, AssetInfo, AssetType, ImageMeta } from '@vue/devtools-core'
 import fg from 'fast-glob'
 import { join, resolve } from 'pathe'
 import { imageMeta } from 'image-meta'
@@ -107,10 +107,32 @@ export function setupAssetsModule(options: { rpc: ViteInspectAPI['rpc'], server:
     return cache
   }
 
+  async function getAssetImporters(url: string) {
+    const importers: AssetImporter[] = []
+
+    const moduleGraph = server.moduleGraph
+    const module = await moduleGraph.getModuleByUrl(url)
+
+    if (module) {
+      for (const importer of module.importers) {
+        importers.push({
+          url: importer.url,
+          id: importer.id,
+        })
+      }
+    }
+
+    return importers
+  }
+
   defineViteServerAction('assets:get-static-assets', async () => {
     return await scan()
   })
 
+  defineViteServerAction('assets:get-asset-importers', async (url: string) => {
+    return await getAssetImporters(url)
+  })
+
   defineViteServerAction('assets:get-image-meta', async (filepath: string) => {
     if (_imageMetaCache.has(filepath))
       return _imageMetaCache.get(filepath)