feat: display chunk in flow

Author: antfu

packages/devtools/src/app/components/data/ChunkDetails.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { Chunk as ChunkInfo } from '@rolldown/debug'
+import type { SessionContext } from '~~/shared/types'
+
+defineProps<{
+  chunk: ChunkInfo
+  session: SessionContext
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-3">
+    <div flex="~ gap-4 items-center">
+      <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
+        <div i-ph-shapes-duotone />
+        <div>{{ chunk.name || '[unnamed]' }}</div>
+        <DisplayBadge :text="chunk.reason" />
+      </div>
+      <div flex-auto />
+      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+      <div flex="~ gap-1 items-center">
+        <div i-ph-package-duotone />
+        {{ chunk.modules.length }}
+      </div>
+    </div>
+
+    <div op50>
+      Imports
+    </div>
+    <div flex="~ col gap-1" ws-nowrap>
+      <!-- TODO: -->
+      {{ chunk.imports }}
+    </div>
+
+    <div op50>
+      Modules
+    </div>
+    <div flex="~ col gap-1" ws-nowrap>
+      <DisplayModuleId
+        v-for="module of chunk.modules"
+        :id="module"
+        :key="module"
+        :session
+        :link="true"
+        :minimal="true"
+        hover="bg-active"
+        border="~ base rounded" px2 py1 w-full
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ModuleInfo, RolldownModuleFlowNode, RolldownModuleNoChanges, RolldownModuleNoChangesHide, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
+import type { ModuleInfo, RolldownChunkInfo, RolldownModuleFlowNode, RolldownModuleNoChanges, RolldownModuleNoChangesHide, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { Menu as VMenu } from 'floating-vue'
 import { computed, shallowRef, toRefs, watch } from 'vue'
 import { settingsRefs } from '~/state/settings'
@@ -23,7 +23,7 @@ const {
   flowExpandResolveId,
 } = settingsRefs
 
-const selected = shallowRef<RolldownModuleFlowNode | null>(null)
+const selected = shallowRef<RolldownChunkInfo | RolldownModuleFlowNode | null>(null)
 
 const resolveIds = computed(() => info?.value?.resolve_ids ?? [])
 
@@ -97,9 +97,10 @@ const nodes = computed(() => [
   ...resolveIds.value,
   ...loads.value,
   ...transforms.value,
+  ...info.value.chunks,
 ])
 
-function isSelectedAncestor(node?: RolldownModuleFlowNode) {
+function isSelectedAncestor(node?: RolldownModuleFlowNode | RolldownChunkInfo) {
   if (!selected.value || !node)
     return false
   const indexSelected = nodes.value.indexOf(selected.value)
@@ -109,17 +110,15 @@ function isSelectedAncestor(node?: RolldownModuleFlowNode) {
   return false
 }
 
-function select(node: RolldownModuleFlowNode) {
-  selected.value = node
-}
-
 watch(selected, (v) => {
   emit('select', !!v)
 })
 
 const codeDisplay = computed(() => {
   if (!selected.value)
     return null
+  if (!('type' in selected.value))
+    return null
   if (selected.value.type === 'transform') {
     return {
       type: 'transform',
@@ -239,7 +238,7 @@ const codeDisplay = computed(() => {
                 :session="session"
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
-                @select="select"
+                @select="e => selected = e"
               />
             </div>
           </template>
@@ -265,7 +264,7 @@ const codeDisplay = computed(() => {
                 :session="session"
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
-                @select="select"
+                @select="e => selected = e"
                 @toggle-show-all="flowShowAllLoads = !flowShowAllLoads"
               />
             </div>
@@ -277,7 +276,7 @@ const codeDisplay = computed(() => {
           :expandable="transforms.length > 0"
           :class-root-node="transforms.length === 0 ? 'border-dashed' : ''"
           :active-start="isSelectedAncestor(transforms[0])"
-          :active-end="isSelectedAncestor(transforms.at(-1))"
+          :active-end="isSelectedAncestor(info.chunks[0] || transforms.at(-1))"
         >
           <template #node>
             <div i-ph-magic-wand-duotone /> Transform
@@ -293,18 +292,36 @@ const codeDisplay = computed(() => {
                 :session="session"
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
-                @select="select"
+                @select="e => selected = e"
                 @toggle-show-all="flowShowAllTransforms = !flowShowAllTransforms"
               />
             </div>
           </template>
         </FlowmapExpandable>
 
-        <FlowmapNode :lines="{ top: true, bottom: true }" pl6 pt4>
-          <template #content>
+        <FlowmapExpandable
+          :lines="{ top: true, bottom: true }"
+          :expandable="info.chunks.length > 0"
+          :class-root-node="info.chunks.length === 0 ? 'border-dashed' : ''"
+          :active-start="isSelectedAncestor(info.chunks[0])"
+          :active-end="isSelectedAncestor(info.chunks.at(-1))"
+          pl6 pt4
+        >
+          <template #node>
             <div i-ph-shapes-duotone /> Chunk
+            <span op50 text-xs>({{ info.chunks.length }})</span>
           </template>
-        </FlowmapNode>
+          <template #container>
+            <FlowmapNodeChunkInfo
+              v-for="chunk of info.chunks"
+              :key="chunk.chunk_id"
+              :item="chunk"
+              :active="isSelectedAncestor(chunk)"
+              :session="session"
+              @select="e => selected = e"
+            />
+          </template>
+        </FlowmapExpandable>
 
         <FlowmapNode :lines="{ top: true, bottom: true }" pl6 pt4>
           <template #content>
@@ -324,7 +341,15 @@ const codeDisplay = computed(() => {
         :class="codeDisplay?.from && codeDisplay?.to ? '' : 'border-dashed'"
         border="~ base rounded-lg" of-hidden max-h-120vh m4 flex="~ col"
       >
-        <template v-if="codeDisplay?.from && codeDisplay?.to">
+        <template v-if="selected?.type === 'chunk'">
+          <div p4>
+            <DataChunkDetails
+              :chunk="selected"
+              :session="session"
+            />
+          </div>
+        </template>
+        <template v-else-if="codeDisplay?.from && codeDisplay?.to">
           <div pl4 p2 font-mono border="b base" flex="~ items-center gap-2" h-max-100vh>
             <PluginName :name="codeDisplay?.plugin_name ?? ''" />
             <span v-if="codeDisplay?.type" op50 text-xs>

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

@@ -31,7 +31,7 @@ const props = defineProps<{
           props.classNodeOuter,
           active ? 'border-flow-active' : 'border-flow',
         ]"
-        border="~ rounded-full" bg-base of-hidden
+        border="~ rounded-2xl" bg-base of-hidden
       >
         <slot name="inner">
           <div px3 py1 :class="props.classNodeInner" flex="~ inline gap-2 items-center">

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+
+defineProps<{
+  item: RolldownChunkInfo
+  session: SessionContext
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', item: RolldownChunkInfo): void
+}>()
+</script>
+
+<template>
+  <FlowmapNode
+    :lines="{ top: true }"
+    :active="active"
+    class-node-inline="gap-2 items-center"
+    pl6
+  >
+    <template #inner>
+      <button
+        px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+        @click="emit('select', item)"
+      >
+        <slot name="button">
+          <div flex="~ col gap-1 items-start" p1>
+            <div flex="~ gap-2 items-center">
+              <DisplayBadge :text="item.name || '<unnamed chunk>'" />
+              <div flex-auto />
+              <div :title="`Chunk ID: ${item.chunk_id}`" op50 font-mono text-sm>
+                #{{ item.chunk_id }}
+              </div>
+            </div>
+            <div text-sm>
+              {{ item.modules.length }} modules
+            </div>
+          </div>
+        </slot>
+      </button>
+    </template>
+    <template #inline-after>
+      <DisplayBadge :text="item.reason" />
+    </template>
+  </FlowmapNode>
+</template>

packages/devtools/src/app/pages/session/[session]/chunks.vue

@@ -19,38 +19,15 @@ const { state: chunks } = useAsyncState(
 </script>
 
 <template>
-  <div p5 flex="~ col gap-2">
+  <div p5 flex="~ col gap-4">
     Chunks
-    <!-- <pre>{{ chunks }}</pre> -->
-
     <template v-for="chunk of chunks" :key="chunk.id">
-      <div border="~ base rounded" flex="~ col gap-3" p2>
-        <div flex="~ gap-1 items-center">
-          <div flex="~ gap-1 items-center">
-            <div i-ph-hash-duotone />
-            <span>{{ chunk.name }}</span>
-            <span>{{ chunk.chunk_id }}</span>
-            <DisplayBadge :text="chunk.reason" />
-          </div>
-          <div flex-auto />
-          <div flex="~ gap-1 items-center">
-            <div i-ph-package-duotone />
-            {{ chunk.modules.length }}
-          </div>
-        </div>
-        <div flex="~ col gap-1" ws-nowrap>
-          <DisplayModuleId
-            v-for="module of chunk.modules"
-            :id="module"
-            :key="module"
-            :session
-            :link="true"
-            :minimal="true"
-            hover="bg-active"
-            border="~ base rounded" px2 py1 w-full
-          />
-        </div>
-      </div>
+      <DataChunkDetails
+        border="~ base rounded-lg"
+        p3
+        :chunk="chunk"
+        :session="session"
+      />
     </template>
   </div>
 </template>

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

@@ -1,11 +1,12 @@
-import type { Event, Module as ModuleInfo } from '@rolldown/debug'
+import type { Chunk as ChunkInfo, Event, Module as ModuleInfo } from '@rolldown/debug'
 
 export type RolldownEvent = Event & {
   event_id: string
 }
 
 export class RolldownEventsManager {
   events: RolldownEvent[] = []
+  chunks: Map<number, ChunkInfo> = new Map()
   modules: Map<string, ModuleInfo> = new Map()
   source_refs: Map<string, string> = new Map()
 
@@ -32,6 +33,13 @@ export class RolldownEventsManager {
       return
     }
 
+    if (event.action === 'ChunkGraphReady') {
+      for (const chunk of event.chunks) {
+        this.chunks.set(chunk.chunk_id, chunk)
+      }
+      return
+    }
+
     this.interpretSourceRefs(event, 'source')
     this.interpretSourceRefs(event, 'content')
 

packages/devtools/src/node/rpc/functions/rolldown-get-chunks-graph.ts

@@ -7,8 +7,7 @@ export const rolldownGetChunksGraph = defineRpcFunction({
     return {
       handler: async ({ session }: { session: string }) => {
         const reader = await manager.loadSession(session)
-        const graph = reader.manager.events.find(x => x.action === 'ChunkGraphReady')
-        return graph?.chunks
+        return Array.from(reader.manager.chunks.values())
       },
     }
   },

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

@@ -82,6 +82,12 @@ export const rolldownGetModuleInfo = defineRpcFunction({
           info.resolve_ids.push(data)
         })
 
+        info.chunks = Array.from(reader.manager.chunks.values())
+          .filter(chunk => chunk.modules.includes(module))
+          .map(chunk => ({
+            type: 'chunk',
+            ...chunk,
+          }))
         info.loads.sort((a, b) => a.plugin_id - b.plugin_id)
         info.resolve_ids.sort((a, b) => a.plugin_id - b.plugin_id)
 

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

@@ -1,4 +1,4 @@
-import type { HookResolveIdCallStart, ModuleImport, SessionMeta } from '@rolldown/debug'
+import type { Chunk as ChunkInfo, HookResolveIdCallStart, ModuleImport, SessionMeta } from '@rolldown/debug'
 
 export type { ModuleImport }
 
@@ -20,17 +20,11 @@ export interface ModuleInfo {
   loads: RolldownModuleLoadInfo[]
   transforms: RolldownModuleTransformInfo[]
   resolve_ids: RolldownResolveInfo[]
-  chunks: RolldownModuleChunkInfo[]
+  chunks: RolldownChunkInfo[]
   imports: ModuleImport[] | null
   importers: string[] | null
 }
 
-export interface RolldownModuleChunkInfo {
-  type: 'chunk'
-  id: string
-  plugin_name: string
-}
-
 export interface RolldownResolveInfo {
   type: 'resolve'
   id: string
@@ -84,6 +78,10 @@ export interface RolldownModuleNoChangesHide {
   duration: number
 }
 
+export interface RolldownChunkInfo extends ChunkInfo {
+  type: 'chunk'
+}
+
 export type RolldownModuleFlowNode
   = | RolldownResolveInfo
     | RolldownModuleLoadInfo