Skip to content

Commit 04cb1a2

Browse files
webfansplzwebfansplz
authored
feat: add chunk info for assets (#133)
1 parent 4df7281 commit 04cb1a2

File tree

13 files changed

+62
-52
lines changed

13 files changed

+62
-52
lines changed

‎packages/vite/src/app/components/assets/Folder.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
3-
import type { ModuleDest, SessionContext } from '~~/shared/types'
2+
import type { ModuleDest, RolldownAssetInfo, SessionContext } from '~~/shared/types'
43
import { computed } from 'vue'
54
import { toTree } from '../../utils/format'
65
76
const props = defineProps<{
8-
assets: AssetInfo[]
7+
assets: RolldownAssetInfo[]
98
session: SessionContext
109
}>()
1110
const assetTree = computed(() => {
@@ -18,6 +17,8 @@ const assetTree = computed(() => {
1817
})
1918
return toTree(nodes, 'Project')
2019
})
20+
21+
const assetsMap = computed(() => new Map<string, RolldownAssetInfo>(props.assets.map(a => [a.filename, a])))
2122
</script>
2223

2324
<template>
@@ -30,7 +31,13 @@ const assetTree = computed(() => {
3031
icon-open="i-catppuccin:folder-dist-open catppuccin"
3132
:link="true"
3233
link-query-key="asset"
33-
/>
34+
>
35+
<template #extra="{ node }">
36+
<span op50>
37+
({{ assetsMap.get(node.full)?.chunk?.name?.replace(/[\[\]]/g, '') }})
38+
</span>
39+
</template>
40+
</DisplayTreeNode>
3441
</div>
3542
</template>
3643

‎packages/vite/src/app/components/assets/List.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
2+
import type { RolldownAssetInfo } from '~~/shared/types'
33
44
defineProps<{
5-
assets: AssetInfo[]
5+
assets: RolldownAssetInfo[]
66
}>()
77
</script>
88

‎packages/vite/src/app/components/assets/ListItem.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
2+
import type { RolldownAssetInfo } from '~~/shared/types'
33
44
defineProps<{
5-
asset: AssetInfo
5+
asset: RolldownAssetInfo
66
}>()
77
</script>
88

@@ -15,6 +15,9 @@ defineProps<{
1515
<DisplayFileIcon :filename="asset.filename" />
1616
<span overflow-hidden text-ellipsis break-all line-clamp-2>
1717
{{ asset.filename }}
18+
<span op50>
19+
({{ asset.chunk?.name?.replace(/[\[\]]/g, '') }})
20+
</span>
1821
</span>
1922
</div>
2023
</NuxtLink>

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
32
import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
43
import { useRoute } from '#app/composables/router'
54
import { useRpc } from '#imports'
@@ -11,8 +10,8 @@ const props = withDefaults(defineProps<{
1110
session: SessionContext
1211
asset: RolldownAssetInfo
1312
chunks?: RolldownChunkInfo[]
14-
importers?: AssetInfo[]
15-
imports?: AssetInfo[]
13+
importers?: RolldownAssetInfo[]
14+
imports?: RolldownAssetInfo[]
1615
lazy?: boolean
1716
}>(), {
1817
lazy: false,
@@ -40,8 +39,8 @@ const { state } = useAsyncState(
4039
imports: res?.imports,
4140
} as {
4241
chunks: RolldownChunkInfo[]
43-
importers: AssetInfo[]
44-
imports: AssetInfo[]
42+
importers: RolldownAssetInfo[]
43+
imports: RolldownAssetInfo[]
4544
}
4645
}
4746
else {
@@ -51,8 +50,8 @@ const { state } = useAsyncState(
5150
imports: [],
5251
} as {
5352
chunks: RolldownChunkInfo[]
54-
importers: AssetInfo[]
55-
imports: AssetInfo[]
53+
importers: RolldownAssetInfo[]
54+
imports: RolldownAssetInfo[]
5655
}
5756
}
5857
},

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
32
import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
43
import { useRpc } from '#imports'
54
import { useAsyncState } from '@vueuse/core'
@@ -32,8 +31,8 @@ const { state } = useAsyncState(
3231
} as {
3332
asset: RolldownAssetInfo
3433
chunks: RolldownChunkInfo[]
35-
importers: AssetInfo[]
36-
imports: AssetInfo[]
34+
importers: RolldownAssetInfo[]
35+
imports: RolldownAssetInfo[]
3736
}
3837
}
3938
else {
@@ -45,8 +44,8 @@ const { state } = useAsyncState(
4544
} satisfies {
4645
asset: RolldownAssetInfo
4746
chunks: RolldownChunkInfo[]
48-
importers: AssetInfo[]
49-
imports: AssetInfo[]
47+
importers: RolldownAssetInfo[]
48+
imports: RolldownAssetInfo[]
5049
}
5150
}
5251
},

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
32
import type { HierarchyNode } from 'd3-hierarchy'
3+
import type { RolldownAssetInfo } from '~~/shared/types'
44
import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
55
import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
66
import { generateModuleGraphLink, getModuleGraphLinkColor } from '~/composables/moduleGraph'
77
88
const props = defineProps<{
9-
importers?: AssetInfo[]
10-
imports?: AssetInfo[]
9+
importers?: RolldownAssetInfo[]
10+
imports?: RolldownAssetInfo[]
1111
}>()
1212
1313
type LinkPoint = 'importer-start' | 'importer-end' | 'import-start' | 'import-end'
@@ -25,7 +25,7 @@ const SPACING = {
2525
}
2626
2727
const container = useTemplateRef<HTMLDivElement>('container')
28-
const links = shallowRef<ModuleGraphLink<AssetInfo, AssetInfo>[]>([])
28+
const links = shallowRef<ModuleGraphLink<RolldownAssetInfo, RolldownAssetInfo>[]>([])
2929
3030
const normalizedMaxLinks = computed(() => {
3131
return Math.min(Math.max(props.importers?.length || 0, props.imports?.length || 0), MAX_LINKS)
@@ -88,11 +88,11 @@ function generateLinks() {
8888
source: {
8989
x: calculateLinkX('importer-start'),
9090
y: calculateLinkY('importer-start', i),
91-
} as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
91+
} as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
9292
target: {
9393
x: calculateLinkX('importer-end'),
9494
y: calculateLinkY('importer-end'),
95-
} as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
95+
} as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
9696
}
9797
})
9898
links.value.push(..._importersLinks)
@@ -106,11 +106,11 @@ function generateLinks() {
106106
source: {
107107
x: calculateLinkX('import-start'),
108108
y: calculateLinkY('import-start'),
109-
} as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
109+
} as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
110110
target: {
111111
x: calculateLinkX('import-end'),
112112
y: calculateLinkY('import-end', i),
113-
} as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
113+
} as HierarchyNode<ModuleGraphNode<RolldownAssetInfo, RolldownAssetInfo>>,
114114
}
115115
})
116116
links.value.push(..._importsLinks)
@@ -223,8 +223,8 @@ onMounted(() => {
223223
<path
224224
v-for="link of links"
225225
:key="link.id"
226-
:d="generateModuleGraphLink<AssetInfo, AssetInfo>(link)!"
227-
:class="getModuleGraphLinkColor<AssetInfo, AssetInfo>(link)"
226+
:d="generateModuleGraphLink<RolldownAssetInfo, RolldownAssetInfo>(link)!"
227+
:class="getModuleGraphLinkColor<RolldownAssetInfo, RolldownAssetInfo>(link)"
228228
fill="none"
229229
/>
230230
</g>

‎packages/vite/src/app/components/display/TreeNode.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ const props = withDefaults(defineProps<{
2121
const emit = defineEmits<{
2222
(e: 'select', node: ModuleDest): void
2323
}>()
24+
25+
defineSlots<{
26+
extra: (props: { node: ModuleDest }) => any
27+
}>()
28+
2429
const open = defineModel<boolean>('open', { required: false, default: true })
2530
const route = useRoute()
2631
const location = window.location
@@ -57,7 +62,11 @@ function select(node: ModuleDest) {
5762
:padding="padding + 1"
5863
:link-query-key="linkQueryKey"
5964
@select="select"
60-
/>
65+
>
66+
<template #extra="{ node }">
67+
<slot name="extra" :node="node" />
68+
</template>
69+
</DisplayTreeNode>
6170
<template v-for="i of node.items" :key="i.full">
6271
<component
6372
:is="link ? NuxtLink : 'div'"
@@ -73,6 +82,7 @@ function select(node: ModuleDest) {
7382
<DisplayFileIcon :filename="i.full" />
7483
<div font-mono>
7584
<DisplayHighlightedPath :path="i.path.split('/').pop() || ''" />
85+
<slot name="extra" :node="i" />
7686
</div>
7787
</component>
7888
</template>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
import type { Asset as AssetInfo } from '@rolldown/debug'
3-
import type { SessionContext } from '~~/shared/types'
2+
import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
43
import type { ClientSettings } from '~/state/settings'
54
import type { AssetChartInfo, AssetChartNode } from '~/types/chart'
65
import { useRoute, useRouter } from '#app/composables/router'
@@ -84,7 +83,7 @@ function toggleDisplay(type: ClientSettings['assetViewType']) {
8483
settings.value.assetViewType = type
8584
}
8685
87-
const { tree, chartOptions, graph, nodeHover, nodeSelected, selectedNode, selectNode, buildGraph } = useChartGraph<AssetInfo, AssetChartInfo, AssetChartNode>({
86+
const { tree, chartOptions, graph, nodeHover, nodeSelected, selectedNode, selectNode, buildGraph } = useChartGraph<Omit<RolldownAssetInfo, 'type'>, AssetChartInfo, AssetChartNode>({
8887
data: searched,
8988
nameKey: 'filename',
9089
sizeKey: 'size',

‎packages/vite/src/app/types/chart.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import type { Asset as AssetInfo } from '@rolldown/debug'
21
import type { TreeNode } from 'nanovis'
3-
import type { PackageInfo, PluginBuildInfo } from '~~/shared/types'
2+
import type { PackageInfo, PluginBuildInfo, RolldownAssetInfo } from '~~/shared/types'
43

5-
export type AssetChartInfo = AssetInfo & {
4+
export type AssetChartInfo = Omit<RolldownAssetInfo, 'type'> & {
65
path: string
76
type: 'folder' | 'file'
87
}

‎packages/vite/src/node/rolldown/events-manager.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { Asset as AssetInfo, Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
2-
import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownChunkInfo } from '../../shared/types'
1+
import type { Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
2+
import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownAssetInfo, RolldownChunkInfo } from '../../shared/types'
3+
import { guessChunkName } from '../../shared/utils/guess-chunk-name'
34
import { getInitialChunkIds } from '../utils/chunk'
45
import { getContentByteSize } from '../utils/format'
56

@@ -16,8 +17,8 @@ const MODULE_BUILD_END_HOOKS = ['HookResolveIdCallEnd', 'HookLoadCallEnd', 'Hook
1617
export class RolldownEventsManager {
1718
events: RolldownEvent[] = []
1819
chunks: Map<number, RolldownChunkInfo> = new Map()
19-
assets: Map<string, AssetInfo> = new Map()
20-
chunkAssetMap = new Map<number, AssetInfo>()
20+
assets: Map<string, RolldownAssetInfo> = new Map()
21+
chunkAssetMap = new Map<number, RolldownAssetInfo>()
2122
modules: Map<string, ModuleInfo & { build_metrics?: ModuleBuildMetrics }> = new Map()
2223
source_refs: Map<string, string> = new Map()
2324
module_build_hook_events: Map<string, ModuleBuildHookEvents> = new Map()
@@ -143,7 +144,7 @@ export class RolldownEventsManager {
143144
if (event.action === 'ChunkGraphReady') {
144145
const initialChunkIds = getInitialChunkIds(event.chunks)
145146
for (const chunk of event.chunks) {
146-
this.chunks.set(chunk.chunk_id, { ...chunk, is_initial: initialChunkIds.has(chunk.chunk_id) })
147+
this.chunks.set(chunk.chunk_id, { ...chunk, is_initial: initialChunkIds.has(chunk.chunk_id), name: chunk.name || guessChunkName(chunk) })
147148
}
148149
return
149150
}
@@ -181,7 +182,7 @@ export class RolldownEventsManager {
181182

182183
if (event.action === 'AssetsReady') {
183184
for (const asset of event.assets) {
184-
this.assets.set(asset.filename, asset)
185+
this.assets.set(asset.filename, { ...asset, chunk: this.chunks.get(asset.chunk_id!) })
185186
}
186187
this.chunkAssetMap = new Map(event.assets.map(asset => [asset.chunk_id!, asset]))
187188
}

0 commit comments

Comments
 (0)