chore: improve assets and chunk details display (#96)

Author: liangmiQwQ

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

@@ -1,6 +1,7 @@
 <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'
 import { useAsyncState } from '@vueuse/core'
 import { computed, ref } from 'vue'
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<{
 })
 
 const rpc = useRpc()
+const route = useRoute()
 const showSource = ref(false)
 const { state } = useAsyncState(
   async () => {
@@ -81,6 +83,7 @@ function openInEditor() {
           <div i-ph-file-text />
           View source
         </button>
+        <slot />
       </div>
     </div>
 
@@ -110,14 +113,17 @@ function openInEditor() {
         <div op50>
           Chunks
         </div>
-        <div v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1>
+        <NuxtLink
+          v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1
+          :to="{ path: route.path, query: { chunk: chunk.chunk_id } }"
+        >
           <DataChunkDetails
             :chunk="chunk"
             :session="session"
             :show-modules="false"
             :show-imports="false"
           />
-        </div>
+        </NuxtLink>
       </div>
       <template v-if="_importers?.length || _imports?.length">
         <div flex="~ col gap-2">

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

@@ -52,11 +52,11 @@ const { state } = useAsyncState(
 </script>
 
 <template>
-  <div v-if="state?.asset" p4 relative h-full w-full of-auto pt12 bg-glass z-panel-content>
-    <DisplayCloseButton
-      absolute right-2 top-1.5
-      @click="emit('close')"
-    />
-    <DataAssetDetails :asset="state.asset" :session="session" :chunks="state?.chunks" :importers="state?.importers" :imports="state?.imports" />
+  <div v-if="state?.asset" p4 relative h-full w-full of-auto bg-glass z-panel-content>
+    <DataAssetDetails :asset="state.asset" :session="session" :chunks="state?.chunks" :importers="state?.importers" :imports="state?.imports">
+      <DisplayCloseButton
+        @click="emit('close')"
+      />
+    </DataAssetDetails>
   </div>
 </template>

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

@@ -33,6 +33,7 @@ withDefaults(defineProps<{
         <div i-ph-package-duotone />
         {{ chunk.modules.length }}
       </div>
+      <slot />
     </div>
 
     <template v-if="showImports && chunk.imports.length > 0">

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

@@ -27,11 +27,11 @@ const { state, isLoading } = useAsyncState(
 <template>
   <VisualLoading v-if="isLoading" />
 
-  <div v-if="state" p4 pt-12 relative h-full w-full of-auto z-panel-content>
-    <DisplayCloseButton
-      absolute right-2 top-1.5
-      @click="emit('close')"
-    />
-    <DataChunkDetails :session="session" :chunk="state" />
+  <div v-if="state" p4 relative h-full w-full of-auto z-panel-content>
+    <DataChunkDetails :session="session" :chunk="state">
+      <DisplayCloseButton
+        @click="emit('close')"
+      />
+    </DataChunkDetails>
   </div>
 </template>

packages/devtools-vite/src/app/components/display/ModuleId.vue

@@ -49,7 +49,7 @@ const containerClass = computed(() => {
 <template>
   <component
     :is="link ? NuxtLink : 'div'"
-    :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: id }, hash: location.hash }) : undefined"
+    :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: id, chunk: undefined }, hash: location.hash }) : undefined"
   >
     <Tooltip
       my-auto text-sm font-mono block w-full