Skip to content

Commit c97ecf2

Browse files
webfansplzwebfansplz
committed
feat: chunk flat list view
1 parent 958c233 commit c97ecf2

File tree

7 files changed

+101
-68
lines changed

7 files changed

+101
-68
lines changed

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script setup lang="ts">
2+
import type { Chunk as ChunkInfo } from '@rolldown/debug'
3+
import type { RolldownChunkImport } from '~~/shared/types/data'
4+
import { useRoute } from '#app/composables/router'
5+
import { NuxtLink } from '#components'
6+
import { computed } from 'vue'
7+
8+
const props = withDefaults(defineProps<{
9+
chunk: ChunkInfo | RolldownChunkImport
10+
link?: boolean
11+
}>(), {
12+
link: false,
13+
})
14+
const route = useRoute()
15+
const normalizedImports = computed(() => Array.isArray(props.chunk.imports) ? props.chunk.imports.length : props.chunk.imports)
16+
const normalizedModules = computed(() => Array.isArray(props.chunk.modules) ? props.chunk.modules.length : props.chunk.modules)
17+
</script>
18+
19+
<template>
20+
<component
21+
:is="link ? NuxtLink : 'div'"
22+
:to="link ? (typeof link === 'string' ? link : { path: route.path, query: { chunk: chunk.chunk_id } }) : undefined"
23+
flex="~ gap-3 items-center"
24+
>
25+
<div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
26+
<slot name="icon">
27+
<div i-ph-shapes-duotone />
28+
</slot>
29+
<div>{{ chunk.name || '[unnamed]' }}</div>
30+
<DisplayBadge :text="chunk.reason" />
31+
<slot name="left-after" />
32+
</div>
33+
34+
<div flex-auto />
35+
36+
<div flex="~ items-center gap-2">
37+
<span op50 font-mono>#{{ chunk.chunk_id }}</span>
38+
<div flex="~ gap-1 items-center" :title="`${normalizedImports} imports`">
39+
<div i-ph-file-arrow-up-duotone />
40+
{{ normalizedImports }}
41+
</div>
42+
<div flex="~ gap-1 items-center" :title="`${normalizedModules} modules`">
43+
<div i-ph-package-duotone />
44+
{{ normalizedModules }}
45+
</div>
46+
</div>
47+
<slot />
48+
</component>
49+
</template>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import type { Chunk as ChunkInfo } from '@rolldown/debug'
3+
import type { SessionContext } from '~~/shared/types'
4+
5+
defineProps<{
6+
chunks: ChunkInfo[]
7+
session: SessionContext
8+
}>()
9+
</script>
10+
11+
<template>
12+
<DataVirtualList
13+
:items="chunks"
14+
key-prop="chunk_id"
15+
>
16+
<template #default="{ item }">
17+
<div flex pb2>
18+
<ChunksBaseInfo :chunk="item" link w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center" />
19+
</div>
20+
</template>
21+
</DataVirtualList>
22+
</template>

‎packages/vite/src/app/components/chunks/ImportItem.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,17 @@ defineProps<{
99
<template>
1010
<DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="imports">
1111
<template #default="{ items }">
12-
<ChunksImportItem
13-
v-for="(chunk, index) in items"
14-
:key="index"
15-
:chunk="chunk"
16-
hover="bg-active"
17-
border="~ base rounded" px2 py1 w-full
18-
/>
12+
<template v-for="(chunk, index) in items" :key="index">
13+
<ChunksBaseInfo v-if="chunk" :chunk="chunk" link hover="bg-active" border="~ base rounded" px2 py1 w-full>
14+
<template #icon>
15+
<div v-if="chunk.kind === 'import-statement'" i-ph-file-duotone />
16+
<div v-if="chunk.kind === 'dynamic-import'" i-ph-lightning-duotone />
17+
</template>
18+
<template #left-after>
19+
<DisplayBadge :text="chunk.kind" />
20+
</template>
21+
</ChunksBaseInfo>
22+
</template>
1923
</template>
2024
</DisplayExpandableContainer>
2125
</template>

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

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ const normalizedChunks = computed(() => props.chunks || state.value)
4848
const imports = computed((): RolldownChunkImport[] => {
4949
return props.chunk.imports.map((importChunk) => {
5050
const chunk = normalizedChunks.value?.find(c => c.chunk_id === importChunk.chunk_id)
51-
5251
return {
5352
...importChunk,
5453
name: chunk?.name || '[unnamed]',
@@ -65,6 +64,7 @@ const importers = computed((): RolldownChunkImport[] => {
6564
6665
return {
6766
...importChunk,
67+
chunk_id: chunk.chunk_id,
6868
name: chunk.name || '[unnamed]',
6969
reason: chunk.reason || 'common',
7070
imports: chunk.imports.length || 0,
@@ -76,27 +76,12 @@ const importers = computed((): RolldownChunkImport[] => {
7676

7777
<template>
7878
<div flex="~ col gap-3">
79-
<div flex="~ gap-3 items-center">
80-
<div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
81-
<div i-ph-shapes-duotone />
82-
<div>{{ chunk.name || '[unnamed]' }}</div>
83-
<DisplayBadge :text="chunk.reason" />
79+
<ChunksBaseInfo :chunk="chunk">
80+
<template #left-after>
8481
<DisplayFileSizeBadge :bytes="chunkSize" text-sm />
85-
</div>
86-
87-
<div flex-auto />
88-
89-
<span op50 font-mono>#{{ chunk.chunk_id }}</span>
90-
<div flex="~ gap-1 items-center">
91-
<div i-ph-file-arrow-up-duotone />
92-
{{ chunk.imports.length }}
93-
</div>
94-
<div flex="~ gap-1 items-center">
95-
<div i-ph-package-duotone />
96-
{{ chunk.modules.length }}
97-
</div>
82+
</template>
9883
<slot />
99-
</div>
84+
</ChunksBaseInfo>
10085

10186
<details v-if="showModules" open="true">
10287
<summary op50>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ const chunkViewTypes = [
1616
value: 'list',
1717
icon: 'i-ph-list-bullets-duotone',
1818
},
19+
{
20+
label: 'Detailed List',
21+
value: 'detailed-list',
22+
icon: 'i-ph-list-magnifying-glass-duotone',
23+
},
1924
{
2025
label: 'Graph',
2126
value: 'graph',
@@ -61,6 +66,14 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
6166
</div>
6267
</div>
6368
<template v-if="settings.chunkViewType === 'list'">
69+
<div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
70+
<ChunksFlatList
71+
:session="session"
72+
:chunks="normalizedChunks"
73+
/>
74+
</div>
75+
</template>
76+
<template v-if="settings.chunkViewType === 'detailed-list'">
6477
<div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
6578
<template v-for="chunk of chunks" :key="chunk.id">
6679
<DataChunkDetails

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface ClientSettings {
2121
pluginDetailsModuleTypes: string[] | null
2222
pluginDetailsDurationSortType: string
2323
pluginDetailSelectedHook: string
24-
chunkViewType: 'list' | 'graph'
24+
chunkViewType: 'list' | 'detailed-list' | 'graph'
2525
pluginDetailsShowType: 'changed' | 'unchanged' | 'all'
2626
packageViewType: 'table' | 'treemap' | 'duplicate-packages'
2727
packageSizeSortType: string

0 commit comments

Comments
 (0)