feat: basic assets display

Author: antfu

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

@@ -21,6 +21,8 @@ const {
   flowExpandTransforms,
   flowExpandLoads,
   flowExpandResolveId,
+  flowExpandChunks,
+  flowExpandAssets,
 } = settingsRefs
 
 const selected = shallowRef<RolldownChunkInfo | RolldownModuleFlowNode | null>(null)
@@ -93,14 +95,15 @@ const loads = computed(() => {
   ]
 })
 
-const nodes = computed(() => [
+const nodes = computed<RolldownModuleFlowNode[]>(() => [
   ...resolveIds.value,
   ...loads.value,
   ...transforms.value,
   ...info.value.chunks,
+  ...info.value.assets,
 ])
 
-function isSelectedAncestor(node?: RolldownModuleFlowNode | RolldownChunkInfo) {
+function isSelectedAncestor(node?: RolldownModuleFlowNode) {
   if (!selected.value || !node)
     return false
   const indexSelected = nodes.value.indexOf(selected.value)
@@ -300,7 +303,8 @@ const codeDisplay = computed(() => {
         </FlowmapExpandable>
 
         <FlowmapExpandable
-          :lines="{ top: true, bottom: true }"
+          v-model:expanded="flowExpandChunks"
+          :lines="{ top: true }"
           :expandable="info.chunks.length > 0"
           :class-root-node="info.chunks.length === 0 ? 'border-dashed' : ''"
           :active-start="isSelectedAncestor(info.chunks[0])"
@@ -323,17 +327,36 @@ const codeDisplay = computed(() => {
           </template>
         </FlowmapExpandable>
 
-        <FlowmapNode :lines="{ top: true, bottom: true }" pl6 pt4>
+        <!-- <FlowmapNode :lines="{ top: true, bottom: true }" pl6 pt4>
           <template #content>
             <div i-ph-tree-duotone /> Tree shake
           </template>
-        </FlowmapNode>
+        </FlowmapNode> -->
 
-        <FlowmapNode :lines="{ top: true }" pl6 pt4>
-          <template #content>
-            <div i-ph-package-duotone /> Generate
+        <FlowmapExpandable
+          v-model:expanded="flowExpandAssets"
+          :lines="{ top: true }"
+          :expandable="info.assets.length > 0"
+          :class-root-node="info.assets.length === 0 ? 'border-dashed' : ''"
+          :active-start="isSelectedAncestor(info.assets[0])"
+          :active-end="isSelectedAncestor(info.assets.at(-1))"
+          pl6 pt4
+        >
+          <template #node>
+            <div i-ph-package-duotone /> Assets
+            <span op50 text-xs>({{ info.assets.length }})</span>
+          </template>
+          <template #container>
+            <FlowmapNodeAssetInfo
+              v-for="asset of info.assets"
+              :key="asset.filename"
+              :item="asset"
+              :active="isSelectedAncestor(asset)"
+              :session="session"
+              @select="e => selected = e"
+            />
           </template>
-        </FlowmapNode>
+        </FlowmapExpandable>
       </div>
 
       <div
@@ -349,6 +372,14 @@ const codeDisplay = computed(() => {
             />
           </div>
         </template>
+        <template v-else-if="selected?.type === 'asset'">
+          <div p4>
+            Assets Details (TODO)
+            - Trace back to the chunk
+            - A button to open the asset in the editor
+            - A button to show source in the page
+          </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 ?? ''" />

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
+
+defineProps<{
+  item: RolldownAssetInfo
+  session: SessionContext
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', item: RolldownAssetInfo): 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">
+              <DisplayModuleId :id="item.filename" :session />
+            </div>
+          </div>
+        </slot>
+      </button>
+    </template>
+    <template #inline-after>
+      <DisplayFileSizeBadge :bytes="item.size" text-sm />
+      <DisplayBadge :text="item.type" />
+    </template>
+  </FlowmapNode>
+</template>

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

@@ -110,7 +110,13 @@ const importterModule = computed(() => {
       </button>
     </template>
     <template #inline-after>
-      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
+      <DisplayDuration
+        v-if="'duration' in item"
+        :duration="item.duration"
+        :color="true"
+        :factor="5"
+        text-xs flex-shrink-0
+      />
       <template v-if="item.type === 'transform'">
         <div v-if="item.content_from === item.content_to" text-xs op25>
           no changes

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

@@ -49,6 +49,12 @@ useSideNav(() => {
     {
       title: 'Chunks',
       to: `/session/${session.id}/chunks`,
+      icon: 'i-ph-shapes-duotone ',
+      category: 'session',
+    },
+    {
+      title: 'Assets',
+      to: `/session/${session.id}/assets`,
       icon: 'i-ph-package-duotone',
       category: 'session',
     },

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
+
+const props = defineProps<{
+  session: SessionContext
+}>()
+
+const rpc = useRpc()
+const { state: assets } = useAsyncState(
+  async () => {
+    return await rpc.value!['vite:rolldown:get-assets-list']?.({
+      session: props.session.id,
+    })
+  },
+  null,
+)
+</script>
+
+<template>
+  <div p5 flex="~ col gap-4">
+    Assets
+    <template v-for="asset of assets" :key="asset.filename">
+      <pre>{{
+        {
+          filename: asset.filename,
+          size: asset.size,
+          chunk: asset.chunk_id,
+        }
+      }}</pre>
+    </template>
+  </div>
+</template>

packages/devtools/src/app/state/settings.ts

@@ -9,6 +9,8 @@ export interface ClientSettings {
   flowExpandResolveId: boolean
   flowExpandTransforms: boolean
   flowExpandLoads: boolean
+  flowExpandChunks: boolean
+  flowExpandAssets: boolean
   flowShowAllTransforms: boolean
   flowShowAllLoads: boolean
 }
@@ -22,6 +24,8 @@ export const settings = useLocalStorage<ClientSettings>(
     flowExpandResolveId: true,
     flowExpandTransforms: true,
     flowExpandLoads: true,
+    flowExpandChunks: true,
+    flowExpandAssets: true,
     flowShowAllTransforms: false,
     flowShowAllLoads: false,
   },

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

@@ -1,4 +1,4 @@
-import type { Chunk as ChunkInfo, Event, Module as ModuleInfo } from '@rolldown/debug'
+import type { Asset as AssetInfo, Chunk as ChunkInfo, Event, Module as ModuleInfo } from '@rolldown/debug'
 
 export type RolldownEvent = Event & {
   event_id: string
@@ -7,6 +7,7 @@ export type RolldownEvent = Event & {
 export class RolldownEventsManager {
   events: RolldownEvent[] = []
   chunks: Map<number, ChunkInfo> = new Map()
+  assets: Map<string, AssetInfo> = new Map()
   modules: Map<string, ModuleInfo> = new Map()
   source_refs: Map<string, string> = new Map()
 
@@ -62,6 +63,12 @@ export class RolldownEventsManager {
       }
     }
 
+    if (event.action === 'AssetsReady') {
+      for (const asset of event.assets) {
+        this.assets.set(asset.filename, asset)
+      }
+    }
+
     return event
   }
 

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

@@ -0,0 +1,14 @@
+import { defineRpcFunction } from '../utils'
+
+export const rolldownGetAssetsList = defineRpcFunction({
+  name: 'vite:rolldown:get-assets-list',
+  type: 'query',
+  setup: ({ manager }) => {
+    return {
+      handler: async ({ session }: { session: string }) => {
+        const reader = await manager.loadSession(session)
+        return Array.from(reader.manager.assets.values())
+      },
+    }
+  },
+})

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

@@ -22,6 +22,7 @@ export const rolldownGetModuleInfo = defineRpcFunction({
           importers: [],
           resolve_ids: [],
           chunks: [],
+          assets: [],
           ...reader.manager.modules.get(module) || {},
         }
 
@@ -88,6 +89,13 @@ export const rolldownGetModuleInfo = defineRpcFunction({
             type: 'chunk',
             ...chunk,
           }))
+        info.assets = Array.from(reader.manager.assets.values())
+          .filter(asset => info.chunks.some(chunk => chunk.chunk_id === asset.chunk_id))
+          .map(asset => ({
+            type: 'asset',
+            ...asset,
+          }))
+
         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/node/rpc/index.ts

@@ -2,6 +2,7 @@ import type { DefinitionsToFunctions, FilterDefinitions } from './types'
 import { getPayload } from './functions/get-payload'
 import { openInEditor } from './functions/open-in-editor'
 import { openInFinder } from './functions/open-in-finder'
+import { rolldownGetAssetsList } from './functions/rolldown-get-assets-list'
 import { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
 import { rolldownGetModuleRawEvents } from './functions/rolldown-get-module-raw-events'
@@ -21,6 +22,7 @@ export const rpcFunctions = [
   rolldownGetModuleRawEvents,
   rolldownGetModuleTransforms,
   rolldownGetChunksGraph,
+  rolldownGetAssetsList,
 ] as const
 
 export type ServerFunctions = DefinitionsToFunctions<typeof rpcFunctions>