feat: support imports meta

Author: antfu

packages/devtools/package.json

@@ -11,7 +11,10 @@
     "url": "git+https://github.com/vitejs/vite-devtools.git"
   },
   "bugs": "https://github.com/vitejs/vite-devtools/issues",
-  "keywords": [],
+  "keywords": [
+    "vite",
+    "devtools"
+  ],
   "sideEffects": false,
   "exports": {
     ".": "./dist/index.mjs"

packages/devtools/src/app/components/display/ModuleId.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ModuleImport } from '@rolldown/debug'
 import type { SessionContext } from '../../types/data'
 import { NuxtLink } from '#components'
 import { Tooltip } from 'floating-vue'
@@ -12,6 +13,7 @@ const props = withDefaults(
     icon?: boolean
     link?: boolean
     minimal?: boolean
+    kind?: ModuleImport['kind']
     session: SessionContext
   }>(),
   {
@@ -59,6 +61,11 @@ const containerClass = computed(() => {
           <DisplayHighlightedPath :path="relativePath" :minimal="minimal" />
         </span>
         <slot />
+        <DisplayBadge
+          v-if="kind"
+          class="ml1"
+          :text="kind"
+        />
         <!-- <DisplayBadge
           v-if="isVirtual"
           class="ml1"

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -167,8 +167,9 @@ const codeDisplay = computed(() => {
             <div p2 flex="~ col gap-1">
               <DisplayModuleId
                 v-for="imp of info.imports"
-                :id="imp"
-                :key="imp"
+                :id="imp.id"
+                :key="imp.id"
+                :kind="imp.kind"
                 :session="session"
                 :link="true"
                 class="hover:bg-active"

packages/devtools/src/app/components/flowmap/NodeModuleInfo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SessionContext } from '@/types/data'
 import type { RolldownModuleFlowNode } from '../../../node/rpc/functions/rolldown-get-module-info'
+import type { SessionContext } from '@/types/data'
 import { computed } from 'vue'
 import { isFlowmapSwapping } from '../../state/flowmap'
 

packages/devtools/src/app/types/data.ts

@@ -1,7 +1,9 @@
+import type { ModuleImport } from '@rolldown/debug'
+
 export interface ModuleListItem {
   id: string
   fileType: string
-  imports: string[]
+  imports: ModuleImport[]
   importers: string[]
 }
 

packages/devtools/src/node/rolldown/events-manager.ts

@@ -30,7 +30,7 @@ export class RolldownEventsManager {
       for (const module of event.modules) {
         this.modules.set(module.id, module)
         module.importers = Array.from(new Set(module.importers || [])).sort((a, b) => a.localeCompare(b))
-        module.imports = Array.from(new Set(module.imports || [])).sort((a, b) => a.localeCompare(b))
+        module.imports = Array.from(new Set(module.imports || [])).sort((a, b) => a.id.localeCompare(b.id))
       }
     }
 

packages/devtools/src/node/rpc/functions/rolldown-get-module-info.ts

@@ -1,4 +1,4 @@
-import type { HookResolveIdCallStart } from '@rolldown/debug'
+import type { HookResolveIdCallStart, ModuleImport } from '@rolldown/debug'
 import { diffLines } from 'diff'
 import { join } from 'pathe'
 import { RolldownEventsReader } from '../../rolldown/events-reader'
@@ -9,7 +9,7 @@ export interface ModuleInfo {
   loads: RolldownModuleLoadInfo[]
   transforms: RolldownModuleTransformInfo[]
   resolve_ids: RolldownResolveInfo[]
-  imports: string[] | null
+  imports: ModuleImport[] | null
   importers: string[] | null
 }
 

packages/devtools/src/nuxt.config.ts

@@ -5,7 +5,7 @@ const NUXT_DEBUG_BUILD = !!process.env.NUXT_DEBUG_BUILD
 const backend = process.env.NMI_BACKEND ?? 'dev'
 const isWebContainer = backend === 'webcontainer'
 
-const headers = isWebContainer
+const headers: Record<string, string> = isWebContainer
   ? {
       'Cross-Origin-Embedder-Policy': 'require-corp',
       'Cross-Origin-Opener-Policy': 'same-origin',