feat: flat chunk list

packages/vite/src/app/components/chunks/BaseInfo.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { RolldownChunkImport, RolldownChunkInfo } from '~~/shared/types/data'
+import { useRoute } from '#app/composables/router'
+import { NuxtLink } from '#components'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  chunk: RolldownChunkInfo | RolldownChunkImport
+  link?: boolean
+}>(), {
+  link: false,
+})
+const route = useRoute()
+const normalizedImports = computed(() => Array.isArray(props.chunk.imports) ? props.chunk.imports.length : props.chunk.imports)
+const normalizedModules = computed(() => Array.isArray(props.chunk.modules) ? props.chunk.modules.length : props.chunk.modules)
+</script>
+
+<template>
+  <component
+    :is="link ? NuxtLink : 'div'"
+    :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { chunk: chunk.chunk_id } }) : undefined"
+    flex="~ gap-3 items-center"
+  >
+    <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
+      <slot name="icon">
+        <div i-ph-shapes-duotone />
+      </slot>
+      <div>{{ chunk.name || '[unnamed]' }}</div>
+      <DisplayBadge :text="chunk.reason" />
+      <slot name="left-after" />
+    </div>
+
+    <div flex-auto />
+
+    <div flex="~ items-center gap-2">
+      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
+      <div flex="~ gap-1 items-center" :title="`${normalizedImports} imports`">
+        <div i-ph-file-arrow-up-duotone />
+        {{ normalizedImports }}
+      </div>
+      <div flex="~ gap-1 items-center" :title="`${normalizedModules} modules`">
+        <div i-ph-package-duotone />
+        {{ normalizedModules }}
+      </div>
+    </div>
+    <slot />
+  </component>
+</template>

packages/vite/src/app/components/chunks/FlatList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+
+defineProps<{
+  chunks: RolldownChunkInfo[]
+  session: SessionContext
+}>()
+</script>
+
+<template>
+  <DataVirtualList
+    :items="chunks"
+    key-prop="chunk_id"
+  >
+    <template #default="{ item }">
+      <div flex pb2>
+        <ChunksBaseInfo :chunk="item" link w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
+          <template #left-after>
+            <DisplayBadge v-if="item.is_initial" text="initial" />
+          </template>
+        </ChunksBaseInfo>
+      </div>
+    </template>
+  </DataVirtualList>
+</template>

packages/vite/src/app/components/chunks/Imports.vue

@@ -9,13 +9,17 @@ defineProps<{
 <template>
   <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="imports">
     <template #default="{ items }">
-      <ChunksImportItem
-        v-for="(chunk, index) in items"
-        :key="index"
-        :chunk="chunk"
-        hover="bg-active"
-        border="~ base rounded" px2 py1 w-full
-      />
+      <template v-for="(chunk, index) in items" :key="index">
+        <ChunksBaseInfo v-if="chunk" :chunk="chunk" link hover="bg-active" border="~ base rounded" px2 py1 w-full>
+          <template #icon>
+            <div v-if="chunk.kind === 'import-statement'" i-ph-file-duotone />
+            <div v-if="chunk.kind === 'dynamic-import'" i-ph-lightning-duotone />
+          </template>
+          <template #left-after>
+            <DisplayBadge :text="chunk.kind" />
+          </template>
+        </ChunksBaseInfo>
+      </template>
     </template>
   </DisplayExpandableContainer>
 </template>

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

@@ -47,7 +47,6 @@ const normalizedChunks = computed(() => props.chunks || state.value)
 const imports = computed((): RolldownChunkImport[] => {
   return props.chunk.imports.map((importChunk) => {
     const chunk = normalizedChunks.value?.find(c => c.chunk_id === importChunk.chunk_id)
-
     return {
       ...importChunk,
       name: chunk?.name || '[unnamed]',
@@ -76,28 +75,13 @@ const importers = computed((): RolldownChunkImport[] => {
 
 <template>
   <div flex="~ col gap-3">
-    <div flex="~ gap-3 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" />
+    <ChunksBaseInfo :chunk="chunk">
+      <template #left-after>
         <DisplayBadge v-if="chunk.is_initial" text="initial" />
         <DisplayFileSizeBadge :bytes="chunkSize" text-sm />
-      </div>
-
-      <div flex-auto />
-
-      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
-      <div flex="~ gap-1 items-center">
-        <div i-ph-file-arrow-up-duotone />
-        {{ chunk.imports.length }}
-      </div>
-      <div flex="~ gap-1 items-center">
-        <div i-ph-package-duotone />
-        {{ chunk.modules.length }}
-      </div>
+      </template>
       <slot />
-    </div>
+    </ChunksBaseInfo>
 
     <details v-if="showModules" open="true">
       <summary op50>

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

@@ -16,6 +16,11 @@ const chunkViewTypes = [
     value: 'list',
     icon: 'i-ph-list-bullets-duotone',
   },
+  {
+    label: 'Detailed List',
+    value: 'detailed-list',
+    icon: 'i-ph-list-magnifying-glass-duotone',
+  },
   {
     label: 'Graph',
     value: 'graph',
@@ -61,6 +66,14 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
       </div>
     </div>
     <template v-if="settings.chunkViewType === 'list'">
+      <div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
+        <ChunksFlatList
+          :session="session"
+          :chunks="normalizedChunks"
+        />
+      </div>
+    </template>
+    <template v-if="settings.chunkViewType === 'detailed-list'">
       <div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
         <template v-for="chunk of chunks" :key="chunk.id">
           <DataChunkDetails

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

@@ -21,7 +21,7 @@ export interface ClientSettings {
   pluginDetailsModuleTypes: string[] | null
   pluginDetailsDurationSortType: string
   pluginDetailSelectedHook: string
-  chunkViewType: 'list' | 'graph'
+  chunkViewType: 'list' | 'detailed-list' | 'graph'
   pluginDetailsShowType: 'changed' | 'unchanged' | 'all'
   packageViewType: 'table' | 'treemap' | 'duplicate-packages'
   packageSizeSortType: string