Skip to content

Commit 97b7b7d

Browse files
webfansplzwebfansplz
authored
feat: chunk flat list view (#124)
1 parent 1878e0f commit 97b7b7d

File tree

7 files changed

+102
-68
lines changed

7 files changed

+102
-68
lines changed

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

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

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
3+
4+
defineProps<{
5+
chunks: RolldownChunkInfo[]
6+
session: SessionContext
7+
}>()
8+
</script>
9+
10+
<template>
11+
<DataVirtualList
12+
:items="chunks"
13+
key-prop="chunk_id"
14+
>
15+
<template #default="{ item }">
16+
<div flex pb2>
17+
<ChunksBaseInfo :chunk="item" link w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
18+
<template #left-after>
19+
<DisplayBadge v-if="item.is_initial" text="initial" />
20+
</template>
21+
</ChunksBaseInfo>
22+
</div>
23+
</template>
24+
</DataVirtualList>
25+
</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: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ const normalizedChunks = computed(() => props.chunks || state.value)
4747
const imports = computed((): RolldownChunkImport[] => {
4848
return props.chunk.imports.map((importChunk) => {
4949
const chunk = normalizedChunks.value?.find(c => c.chunk_id === importChunk.chunk_id)
50-
5150
return {
5251
...importChunk,
5352
name: chunk?.name || '[unnamed]',
@@ -76,28 +75,13 @@ const importers = computed((): RolldownChunkImport[] => {
7675

7776
<template>
7877
<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" />
78+
<ChunksBaseInfo :chunk="chunk">
79+
<template #left-after>
8480
<DisplayBadge v-if="chunk.is_initial" text="initial" />
8581
<DisplayFileSizeBadge :bytes="chunkSize" text-sm />
86-
</div>
87-
88-
<div flex-auto />
89-
90-
<span op50 font-mono>#{{ chunk.chunk_id }}</span>
91-
<div flex="~ gap-1 items-center">
92-
<div i-ph-file-arrow-up-duotone />
93-
{{ chunk.imports.length }}
94-
</div>
95-
<div flex="~ gap-1 items-center">
96-
<div i-ph-package-duotone />
97-
{{ chunk.modules.length }}
98-
</div>
82+
</template>
9983
<slot />
100-
</div>
84+
</ChunksBaseInfo>
10185

10286
<details v-if="showModules" open="true">
10387
<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)