feat: basic module graph

Author: antfu

packages/devtools/package.json

@@ -41,7 +41,7 @@
     "get-port-please": "catalog:deps",
     "h3": "catalog:deps",
     "launch-editor": "catalog:deps",
-    "mlly": "catalog:testing",
+    "mlly": "catalog:deps",
     "mrmime": "catalog:deps",
     "ohash": "catalog:deps",
     "open": "catalog:deps",

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownModuleFlowNode, RolldownModuleLoadNoChanges, RolldownModuleTransformInfo, RolldownModuleTransformNoChanges } from '../../../node/rpc/functions/rolldown-get-module-info'
 import type { SessionContext } from '../../types/data'
+import { Menu as VMenu } from 'floating-vue'
 import { computed, ref, shallowRef, toRefs } from 'vue'
 import PluginName from '../display/PluginName.vue'
 
@@ -104,17 +105,72 @@ const codeDisplay = computed(() => {
 </script>
 
 <template>
-  <div of-auto>
-    <FlowmapNode
-      :lines="{ bottom: true }" pt4
-      :active="selected != null"
-    >
-      <template #content>
-        <div p2>
-          <DisplayModuleId :id="info.id" />
-        </div>
+  <div of-auto pt4>
+    <div v-if="info.importers?.length" flex="~ gap-2" pb4 text-sm>
+      <VMenu>
+        <FlowmapNode :lines="{ bottom: true }" :active="selected != null" class-node-outer="border-dashed">
+          <template #inner>
+            <div flex="~ items-center gap-1" text-sm text-blue px3 py1>
+              <div i-ph-arrows-merge-duotone rotate-270 />
+              {{ info.importers?.length }} importers
+            </div>
+          </template>
+        </FlowmapNode>
+        <template #popper="{ hide }">
+          <div p2 flex="~ col gap-1">
+            <DisplayModuleId
+              v-for="importer of info.importers"
+              :id="importer"
+              :key="importer"
+              :session="session"
+              :link="true"
+              class="hover:bg-active"
+              px2 py1 rounded
+              @click="hide"
+            />
+          </div>
+        </template>
+      </VMenu>
+    </div>
+    <div flex="~">
+      <FlowmapNode
+        :lines="{ bottom: true }"
+        :active="selected != null"
+      >
+        <template #content>
+          <div p2>
+            <DisplayModuleId :id="info.id" />
+          </div>
+        </template>
+      </FlowmapNode>
+      <template v-if="info.imports?.length">
+        <div w-10 border="t base dashed" mya />
+        <VMenu mya>
+          <FlowmapNode :active="selected != null" class-node-outer="border-dashed">
+            <template #inner>
+              <div flex="~ items-center gap-1" text-sm text-orange px3 py1>
+                <div i-ph-arrows-split-duotone rotate-270 />
+                {{ info.imports?.length }} imports
+              </div>
+            </template>
+          </FlowmapNode>
+          <template #popper="{ hide }">
+            <div p2 flex="~ col gap-1">
+              <DisplayModuleId
+                v-for="imp of info.imports"
+                :id="imp"
+                :key="imp"
+                :session="session"
+                :link="true"
+                class="hover:bg-active"
+                px2 py1 rounded
+                @click="hide"
+              />
+            </div>
+          </template>
+        </VMenu>
       </template>
-    </FlowmapNode>
+    </div>
     <div w-max flex="~ gap-4">
       <div select-none>
         <FlowmapExpandable

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

@@ -1,18 +1,36 @@
-import type { Event } from '@rolldown/debug'
+import type { Event, Module as ModuleInfo } from '@rolldown/debug'
 
 export type RolldownEvent = Event & {
   event_id: string
 }
 
 export class RolldownEventsManager {
   events: RolldownEvent[] = []
+  modules: Map<string, ModuleInfo> = new Map()
 
   handleEvent(raw: Event) {
     const event = {
       ...raw,
       event_id: `${raw.timestamp}#${this.events.length}`,
     }
     this.events.push(event)
+
+    if ('module_id' in event) {
+      if (this.modules.has(event.module_id))
+        return
+      this.modules.set(event.module_id, {
+        id: event.module_id,
+        is_external: false,
+        imports: [],
+        importers: [],
+      })
+    }
+    if (event.action === 'ModuleGraphReady') {
+      for (const module of event.modules) {
+        this.modules.set(module.id, module)
+      }
+    }
+
     return event
   }
 

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

@@ -9,10 +9,8 @@ export interface ModuleInfo {
   loads: RolldownModuleLoadInfo[]
   transforms: RolldownModuleTransformInfo[]
   resolve_ids: RolldownResolveInfo[]
-
-  // TODO: Awaits https://github.com/rolldown/rolldown/issues/4135
-  deps: string[]
-  importers: string[]
+  imports: string[] | null
+  importers: string[] | null
 }
 
 export interface RolldownResolveInfo {
@@ -94,9 +92,10 @@ export const rolldownGetModuleInfo = defineRpcFunction({
           id: module,
           loads: [],
           transforms: [],
-          deps: [],
+          imports: [],
           importers: [],
           resolve_ids: [],
+          ...reader.manager.modules.get(module) || {},
         }
 
         events.forEach((start, index) => {

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

@@ -10,18 +10,7 @@ export const rolldownGetModuleList = defineRpcFunction({
       handler: async ({ session }: { session: string }) => {
         const reader = RolldownEventsReader.get(join(cwd, '.rolldown', session, 'logs.json'))
         await reader.read()
-        const modules = new Set<string>()
-        for (const event of reader.manager.events) {
-          if ('module_id' in event) {
-            modules.add(event.module_id)
-          }
-        }
-        return Array.from(modules)
-          .map((id) => {
-            return {
-              id,
-            }
-          })
+        return Array.from(reader.manager.modules.values())
           .sort((a, b) => a.id.localeCompare(b.id))
       },
     }

packages/devtools/src/uno.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
       'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
 
       'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
-      'bg-code': 'bg-gray5:5',
+      'bg-code': 'bg-gray-500:5',
 
       'bg-gradient-more': 'bg-gradient-to-t from-white via-white:80 to-white:0 dark:from-#111 dark:via-#111:80 dark:to-#111:0',
 
@@ -59,11 +59,11 @@ export default defineConfig({
       'op-mute': 'op30 dark:op25',
       'color-deprecated': 'text-op85 text-[#b71c1c] dark:text-[#f87171]',
 
-      'color-scale-neutral': 'text-gray-700:75 dark:text-gray-700:75!',
-      'color-scale-low': 'text-lime-700:75 dark:text-lime-700:75! dark:saturate-50',
-      'color-scale-medium': 'text-amber-700:85 dark:text-amber-700:85! dark:saturate-80',
-      'color-scale-high': 'text-orange-700:95 dark:text-orange-700:95!',
-      'color-scale-critical': 'text-red-700:95 dark:text-red-700:95!',
+      'color-scale-neutral': 'text-gray-700:75 dark:text-gray-300:75!',
+      'color-scale-low': 'text-lime-700:75 dark:text-lime-300:75! dark:saturate-50',
+      'color-scale-medium': 'text-amber-700:85 dark:text-amber-300:85! dark:saturate-80',
+      'color-scale-high': 'text-orange-700:95 dark:text-orange-300:95!',
+      'color-scale-critical': 'text-red-700:95 dark:text-red-300:95!',
 
       'page-padding': 'pt-24 pl-112 pr-8 pb-8',
       'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',

pnpm-workspace.yaml

@@ -25,6 +25,7 @@ catalogs:
     get-port-please: ^3.1.2
     h3: ^1.15.3
     launch-editor: ^2.10.0
+    mlly: ^1.7.4
     mrmime: ^2.0.1
     ohash: ^2.0.11
     open: ^10.1.2
@@ -78,7 +79,6 @@ catalogs:
   inlined:
     '@antfu/utils': ^9.2.0
   testing:
-    mlly: ^1.7.4
     vitest: ^3.1.3
   types:
     '@types/codemirror': ^5.60.15