feat: add chunk info for assets

packages/vite/src/app/components/assets/Folder.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
-import type { ModuleDest, SessionContext } from '~~/shared/types'
+import type { ModuleDest, RolldownAssetInfo, SessionContext } from '~~/shared/types'
 import { computed } from 'vue'
 import { toTree } from '../../utils/format'
 
 const props = defineProps<{
-  assets: AssetInfo[]
+  assets: RolldownAssetInfo[]
   session: SessionContext
 }>()
 const assetTree = computed(() => {
@@ -18,6 +17,8 @@ const assetTree = computed(() => {
   })
   return toTree(nodes, 'Project')
 })
+
+const assetsMap = computed(() => new Map<string, RolldownAssetInfo>(props.assets.map(a => [a.filename, a])))
 </script>
 
 <template>
@@ -30,7 +31,13 @@ const assetTree = computed(() => {
       icon-open="i-catppuccin:folder-dist-open catppuccin"
       :link="true"
       link-query-key="asset"
-    />
+    >
+      <template #extra="{ node }">
+        <span op50>
+          ({{ assetsMap.get(node.full)?.chunk?.name?.replace(/[\[\]]/g, '') }})
+        </span>
+      </template>
+    </DisplayTreeNode>
   </div>
 </template>
 

packages/vite/src/app/components/assets/List.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
+import type { RolldownAssetInfo } from '~~/shared/types'
 
 defineProps<{
-  assets: AssetInfo[]
+  assets: RolldownAssetInfo[]
 }>()
 </script>
 

packages/vite/src/app/components/assets/ListItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
+import type { RolldownAssetInfo } from '~~/shared/types'
 
 defineProps<{
-  asset: AssetInfo
+  asset: RolldownAssetInfo
 }>()
 </script>
 
@@ -15,6 +15,9 @@ defineProps<{
       <DisplayFileIcon :filename="asset.filename" />
       <span overflow-hidden text-ellipsis break-all line-clamp-2>
         {{ asset.filename }}
+        <span op50>
+          ({{ asset.chunk?.name?.replace(/[\[\]]/g, '') }})
+        </span>
       </span>
     </div>
   </NuxtLink>

packages/vite/src/app/components/data/AssetDetails.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
@@ -11,8 +10,8 @@ const props = withDefaults(defineProps<{
   session: SessionContext
   asset: RolldownAssetInfo
   chunks?: RolldownChunkInfo[]
-  importers?: AssetInfo[]
-  imports?: AssetInfo[]
+  importers?: RolldownAssetInfo[]
+  imports?: RolldownAssetInfo[]
   lazy?: boolean
 }>(), {
   lazy: false,
@@ -40,8 +39,8 @@ const { state } = useAsyncState(
         imports: res?.imports,
       } as {
         chunks: RolldownChunkInfo[]
-        importers: AssetInfo[]
-        imports: AssetInfo[]
+        importers: RolldownAssetInfo[]
+        imports: RolldownAssetInfo[]
       }
     }
     else {
@@ -51,8 +50,8 @@ const { state } = useAsyncState(
         imports: [],
       } as {
         chunks: RolldownChunkInfo[]
-        importers: AssetInfo[]
-        imports: AssetInfo[]
+        importers: RolldownAssetInfo[]
+        imports: RolldownAssetInfo[]
       }
     }
   },

packages/vite/src/app/components/data/AssetDetailsLoader.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
@@ -32,8 +31,8 @@ const { state } = useAsyncState(
       } as {
         asset: RolldownAssetInfo
         chunks: RolldownChunkInfo[]
-        importers: AssetInfo[]
-        imports: AssetInfo[]
+        importers: RolldownAssetInfo[]
+        imports: RolldownAssetInfo[]
       }
     }
     else {
@@ -45,8 +44,8 @@ const { state } = useAsyncState(
       } satisfies {
         asset: RolldownAssetInfo
         chunks: RolldownChunkInfo[]
-        importers: AssetInfo[]
-        imports: AssetInfo[]
+        importers: RolldownAssetInfo[]
+        imports: RolldownAssetInfo[]
       }
     }
   },

packages/vite/src/app/components/data/AssetRelationships.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
 import type { HierarchyNode } from 'd3-hierarchy'
+import type { RolldownAssetInfo } from '~~/shared/types'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
 import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
 import { generateModuleGraphLink, getModuleGraphLinkColor } from '~/composables/moduleGraph'
 
 const props = defineProps<{
-  importers?: AssetInfo[]
-  imports?: AssetInfo[]
+  importers?: RolldownAssetInfo[]
+  imports?: RolldownAssetInfo[]
 }>()
 
 type LinkPoint = 'importer-start' | 'importer-end' | 'import-start' | 'import-end'
@@ -25,7 +25,7 @@ const SPACING = {
 }
 
 const container = useTemplateRef<HTMLDivElement>('container')
-const links = shallowRef<ModuleGraphLink<AssetInfo, AssetInfo>[]>([])
+const links = shallowRef<ModuleGraphLink<RolldownAssetInfo, RolldownAssetInfo>[]>([])
 
 const normalizedMaxLinks = computed(() => {
   return Math.min(Math.max(props.importers?.length || 0, props.imports?.length || 0), MAX_LINKS)
@@ -88,11 +88,11 @@ function generateLinks() {
         source: {
           x: calculateLinkX('importer-start'),
           y: calculateLinkY('importer-start', i),
-        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
+        } as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
         target: {
           x: calculateLinkX('importer-end'),
           y: calculateLinkY('importer-end'),
-        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
+        } as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
       }
     })
     links.value.push(..._importersLinks)
@@ -106,11 +106,11 @@ function generateLinks() {
         source: {
           x: calculateLinkX('import-start'),
           y: calculateLinkY('import-start'),
-        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
+        } as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
         target: {
           x: calculateLinkX('import-end'),
           y: calculateLinkY('import-end', i),
-        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
+        } as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
       }
     })
     links.value.push(..._importsLinks)
@@ -223,8 +223,8 @@ onMounted(() => {
         <path
           v-for="link of links"
           :key="link.id"
-          :d="generateModuleGraphLink<AssetInfo, AssetInfo>(link)!"
-          :class="getModuleGraphLinkColor<AssetInfo, AssetInfo>(link)"
+          :d="generateModuleGraphLink<RolldownAssetInfo, RolldownAssetInfo>(link)!"
+          :class="getModuleGraphLinkColor<RolldownAssetInfo, RolldownAssetInfo>(link)"
           fill="none"
         />
       </g>

packages/vite/src/app/components/display/TreeNode.vue

@@ -21,6 +21,11 @@
 const emit = defineEmits<{
   (e: 'select', node: ModuleDest): void
 }>()
+
+defineSlots<{
+  extra: (props: { node: ModuleDest }) => any
+}>()
+
 const open = defineModel<boolean>('open', { required: false, default: true })
 const route = useRoute()
 const location = window.location
@@ -57,7 +62,11 @@
         :padding="padding + 1"
         :link-query-key="linkQueryKey"
         @select="select"
-      />
+      >
+        <template #extra="{ node }">
+          <slot name="extra" :node="node" />
+        </template>
+      </DisplayTreeNode>
       <template v-for="i of node.items" :key="i.full">
         <component
           :is="link ? NuxtLink : 'div'"
@@ -73,6 +82,7 @@
           <DisplayFileIcon :filename="i.full" />
           <div font-mono>
             <DisplayHighlightedPath :path="i.path.split('/').pop() || ''" />
+            <slot name="extra" :node="i" />
           </div>
         </component>
       </template>

packages/vite/src/app/pages/session/[session]/assets.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { Asset as AssetInfo } from '@rolldown/debug'
-import type { SessionContext } from '~~/shared/types'
+import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
 import type { ClientSettings } from '~/state/settings'
 import type { AssetChartInfo, AssetChartNode } from '~/types/chart'
 import { useRoute, useRouter } from '#app/composables/router'
@@ -84,7 +83,7 @@ function toggleDisplay(type: ClientSettings['assetViewType']) {
   settings.value.assetViewType = type
 }
 
-const { tree, chartOptions, graph, nodeHover, nodeSelected, selectedNode, selectNode, buildGraph } = useChartGraph<AssetInfo, AssetChartInfo, AssetChartNode>({
+const { tree, chartOptions, graph, nodeHover, nodeSelected, selectedNode, selectNode, buildGraph } = useChartGraph<Omit<RolldownAssetInfo, 'type'>, AssetChartInfo, AssetChartNode>({
   data: searched,
   nameKey: 'filename',
   sizeKey: 'size',

packages/vite/src/app/types/chart.ts

@@ -1,8 +1,7 @@
-import type { Asset as AssetInfo } from '@rolldown/debug'
 import type { TreeNode } from 'nanovis'
-import type { PackageInfo, PluginBuildInfo } from '~~/shared/types'
+import type { PackageInfo, PluginBuildInfo, RolldownAssetInfo } from '~~/shared/types'
 
-export type AssetChartInfo = AssetInfo & {
+export type AssetChartInfo = Omit<RolldownAssetInfo, 'type'> & {
   path: string
   type: 'folder' | 'file'
 }

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

@@ -1,5 +1,6 @@
-import type { Asset as AssetInfo, Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
-import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownChunkInfo } from '../../shared/types'
+import type { Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
+import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownAssetInfo, RolldownChunkInfo } from '../../shared/types'
+import { guessChunkName } from '../../shared/utils/guess-chunk-name'
 import { getInitialChunkIds } from '../utils/chunk'
 import { getContentByteSize } from '../utils/format'
 
@@ -16,8 +17,8 @@ const MODULE_BUILD_END_HOOKS = ['HookResolveIdCallEnd', 'HookLoadCallEnd', 'Hook
 export class RolldownEventsManager {
   events: RolldownEvent[] = []
   chunks: Map<number, RolldownChunkInfo> = new Map()
-  assets: Map<string, AssetInfo> = new Map()
-  chunkAssetMap = new Map<number, AssetInfo>()
+  assets: Map<string, RolldownAssetInfo> = new Map()
+  chunkAssetMap = new Map<number, RolldownAssetInfo>()
   modules: Map<string, ModuleInfo & { build_metrics?: ModuleBuildMetrics }> = new Map()
   source_refs: Map<string, string> = new Map()
   module_build_hook_events: Map<string, ModuleBuildHookEvents> = new Map()
@@ -143,7 +144,7 @@ export class RolldownEventsManager {
     if (event.action === 'ChunkGraphReady') {
       const initialChunkIds = getInitialChunkIds(event.chunks)
       for (const chunk of event.chunks) {
-        this.chunks.set(chunk.chunk_id, { ...chunk, is_initial: initialChunkIds.has(chunk.chunk_id) })
+        this.chunks.set(chunk.chunk_id, { ...chunk, is_initial: initialChunkIds.has(chunk.chunk_id), name: chunk.name || guessChunkName(chunk) })
       }
       return
     }
@@ -181,7 +182,7 @@ export class RolldownEventsManager {
 
     if (event.action === 'AssetsReady') {
       for (const asset of event.assets) {
-        this.assets.set(asset.filename, asset)
+        this.assets.set(asset.filename, { ...asset, chunk: this.chunks.get(asset.chunk_id!) })
       }
       this.chunkAssetMap = new Map(event.assets.map(asset => [asset.chunk_id!, asset]))
     }

packages/vite/src/node/rpc/functions/rolldown-get-chunk-info.ts

@@ -1,5 +1,4 @@
 import { defineRpcFunction } from '@vitejs/devtools-kit'
-import { guessChunkName } from '../../../shared/utils/guess-chunk-name'
 import { getLogsManager } from '../utils'
 
 export const rolldownGetChunkInfo = defineRpcFunction({
@@ -11,9 +10,6 @@ export const rolldownGetChunkInfo = defineRpcFunction({
       handler: async ({ session, id }: { session: string, id: number }) => {
         const reader = await manager.loadSession(session)
         const chunk = reader.manager.chunks.get(id)!
-        if (chunk && !chunk.name)
-          chunk.name = guessChunkName(chunk)
-
         chunk.asset = reader.manager.chunkAssetMap.get(chunk.chunk_id)
         return chunk
       },

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

@@ -1,5 +1,4 @@
 import { defineRpcFunction } from '@vitejs/devtools-kit'
-import { guessChunkName } from '../../../shared/utils/guess-chunk-name'
 import { getLogsManager } from '../utils'
 
 export const rolldownGetChunksGraph = defineRpcFunction({
@@ -13,9 +12,6 @@ export const rolldownGetChunksGraph = defineRpcFunction({
         const chunks = Array.from(reader.manager.chunks.values())
 
         chunks.forEach((chunk) => {
-          if (chunk && !chunk.name)
-            chunk.name = guessChunkName(chunk)
-
           chunk.asset = reader.manager.chunkAssetMap.get(chunk.chunk_id)
         })
         return chunks

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

@@ -166,7 +166,8 @@ export interface RolldownChunkInfo extends ChunkInfo {
 }
 
 export interface RolldownAssetInfo extends AssetInfo {
-  type: 'asset'
+  type?: 'asset'
+  chunk?: RolldownChunkInfo
 }
 
 export type RolldownModuleFlowNode