fix(assets): proper asset details displaying for .map or other non-module assets (#70)

Author: liangmiQwQ

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

@@ -23,18 +23,32 @@ const { state } = useAsyncState(
   async () => {
     if (!props.lazy)
       return
+
     const res = await rpc.value!['vite:rolldown:get-asset-details']?.({
       session: props.session.id,
       id: props.asset.filename,
     })
-    return {
-      chunks: [{ ...res?.chunk, type: 'chunk' }],
-      importers: res?.importers,
-      imports: res?.imports,
-    } satisfies {
-      chunks: RolldownChunkInfo[]
-      importers: AssetInfo[]
-      imports: AssetInfo[]
+    if ('chunk' in res) {
+      return {
+        chunks: [{ ...res?.chunk, type: 'chunk' }],
+        importers: res?.importers,
+        imports: res?.imports,
+      } as {
+        chunks: RolldownChunkInfo[]
+        importers: AssetInfo[]
+        imports: AssetInfo[]
+      }
+    }
+    else {
+      return {
+        chunks: [],
+        importers: [],
+        imports: [],
+      } as {
+        chunks: RolldownChunkInfo[]
+        importers: AssetInfo[]
+        imports: AssetInfo[]
+      }
     }
   },
   null,
@@ -94,7 +108,7 @@ function openInEditor() {
       </div>
     </template>
 
-    <div flex="~ col gap-4">
+    <div v-if="assetChunks && assetChunks.length > 0" flex="~ col gap-4">
       <div flex="~ col gap-2">
         <div op50>
           Chunks
@@ -119,5 +133,14 @@ function openInEditor() {
         </div>
       </template>
     </div>
+    <div v-else flex="~ col gap-1">
+      <!-- For other situation -->
+      <div op50>
+        [Non-Module Asset]
+      </div>
+      <div v-if="asset.filename.endsWith('.map')" flex="~ items-center gap-2">
+        <span op50>Source Map for</span> <DisplayBadge :text="JSON.parse(asset.content!).file" />
+      </div>
+    </div>
   </div>
 </template>

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

@@ -20,16 +20,31 @@ const { state } = useAsyncState(
       session: props.session.id,
       id: props.asset,
     })
-    return {
-      asset: { ...res?.asset, type: 'asset' },
-      chunks: [{ ...res?.chunk, type: 'chunk' }],
-      importers: res?.importers,
-      imports: res?.imports,
-    } satisfies {
-      asset: RolldownAssetInfo
-      chunks: RolldownChunkInfo[]
-      importers: AssetInfo[]
-      imports: AssetInfo[]
+    if ('chunk' in res) {
+      return {
+        asset: { ...res?.asset, type: 'asset' },
+        chunks: [{ ...res?.chunk, type: 'chunk' }],
+        importers: res?.importers,
+        imports: res?.imports,
+      } as {
+        asset: RolldownAssetInfo
+        chunks: RolldownChunkInfo[]
+        importers: AssetInfo[]
+        imports: AssetInfo[]
+      }
+    }
+    else {
+      return {
+        asset: { ...res?.asset, type: 'asset' },
+        chunks: [],
+        importers: [],
+        imports: [],
+      } satisfies {
+        asset: RolldownAssetInfo
+        chunks: RolldownChunkInfo[]
+        importers: AssetInfo[]
+        imports: AssetInfo[]
+      }
     }
   },
   null,

packages/devtools-vite/src/node/rpc/functions/rolldown-get-asset-details.ts

@@ -9,11 +9,19 @@ export const rolldownGetAssetDetails = defineRpcFunction({
     return {
       handler: async ({ session, id }: { session: string, id: string }) => {
         const reader = await manager.loadSession(session)
-        const assets = await reader.manager.assets
-        const chunks = await reader.manager.chunks
+        const assets = reader.manager.assets
+        const chunks = reader.manager.chunks
         const asset = assets.get(id)!
         const assetList = Array.from(assets.values())
         const chunkList = Array.from(chunks.values())
+
+        if (asset.chunk_id === null) {
+          // sourceMap or other
+          return {
+            asset,
+          }
+        }
+
         const assetChunkId = asset.chunk_id!
         const chunk = chunks.get(assetChunkId)!
         const importers = chunkList.filter(mod => mod.imports.some(i => i.chunk_id === assetChunkId)).map(c => assetList.find(a => a.chunk_id === c.chunk_id)!)