Skip to content

Commit 85beb6f

Browse files
webfansplzwebfansplz
committed
feat: init
feat: module detailed list
1 parent 56f6264 commit 85beb6f

File tree

12 files changed

+256
-76
lines changed

12 files changed

+256
-76
lines changed

‎packages/devtools/src/app/components/data/ModuleDetailsLoader.vue‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
33
import { useRpc } from '#imports'
44
import { computedAsync } from '@vueuse/core'
5-
import { computed, nextTick, ref, watchEffect } from 'vue'
5+
import { nextTick, ref, watchEffect } from 'vue'
66
import { settings } from '~~/app/state/settings'
7-
import { getContentByteSize } from '~~/app/utils/format'
87
98
const props = defineProps<{
109
session: SessionContext
@@ -45,41 +44,6 @@ const info = computedAsync(async () => {
4544
} as ModuleInfo
4645
})
4746
48-
const durations = computed(() => {
49-
const data = info.value
50-
const _resolveIds = data?.resolve_ids.reduce((t, node) => {
51-
t += node.duration
52-
return t
53-
}, 0) ?? 0
54-
const _loads = data?.loads?.reduce((t, node) => {
55-
t += node.duration
56-
return t
57-
}, 0) ?? 0
58-
const _transforms = data?.transforms.reduce((t, node) => {
59-
t += node.duration
60-
return t
61-
}, 0) ?? 0
62-
const total = _resolveIds + _loads + _transforms
63-
return {
64-
resolveIds: _resolveIds,
65-
loads: _loads,
66-
transforms: _transforms,
67-
total,
68-
}
69-
})
70-
71-
const sourceCodeSize = computed(() => {
72-
const data = info.value?.transforms
73-
const source = data?.[0]?.content_from ?? ''
74-
return getContentByteSize(source)
75-
})
76-
77-
const transformedCodeSize = computed(() => {
78-
const data = info.value?.transforms?.filter(t => t.content_to)?.reverse()
79-
const source = data?.[0]?.content_to ?? ''
80-
return getContentByteSize(source)
81-
})
82-
8347
function selectFlowNode(v: boolean) {
8448
flowNodeSelected.value = v
8549
}
@@ -98,39 +62,7 @@ function selectFlowNode(v: boolean) {
9862
>
9963
<DisplayModuleId :id="module" px2 pt1 :session />
10064
<div text-xs font-mono flex="~ items-center gap-3" ml2>
101-
<DisplayDuration
102-
:duration="durations.resolveIds" flex="~ gap-1 items-center"
103-
:title="`resolveId hooks cost: ${durations.resolveIds}ms`"
104-
>
105-
<span i-ph-magnifying-glass-duotone inline-block />
106-
</DisplayDuration>
107-
<DisplayDuration
108-
:duration="durations.loads" flex="~ gap-1 items-center"
109-
:title="`load hooks cost: ${durations.loads}ms`"
110-
>
111-
<span i-ph-upload-simple-duotone inline-block />
112-
</DisplayDuration>
113-
<DisplayDuration
114-
:duration="durations.transforms" flex="~ gap-1 items-center"
115-
:title="`transform hooks cost: ${durations.transforms}ms`"
116-
>
117-
<span i-ph-magic-wand-duotone inline-block />
118-
</DisplayDuration>
119-
<span op40>|</span>
120-
<DisplayDuration
121-
:duration="durations.total" flex="~ gap-1 items-center"
122-
:title="`Total build cost: ${durations.total}ms`"
123-
>
124-
<span i-ph-clock-duotone inline-block />
125-
</DisplayDuration>
126-
<template v-if="sourceCodeSize && transformedCodeSize">
127-
<span op40>|</span>
128-
<div flex="~ gap-1 items-center">
129-
<DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
130-
<span i-carbon-arrow-right op50 />
131-
<DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
132-
</div>
133-
</template>
65+
<ModulesBuildMetrics v-if="info" :metrics="info.build_metrics" />
13466
</div>
13567
<div flex="~ gap-2">
13668
<button

‎packages/devtools/src/app/components/display/ModuleId.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ const containerClass = computed(() => {
7878
text="virtual"
7979
/> -->
8080
</div>
81+
<div>
82+
<slot name="detail" />
83+
</div>
8184
<template #popper>
8285
<span font-mono text-sm>
8386
{{ props.id }}

‎packages/devtools/src/app/components/modules/BuildMetrics.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<script setup lang="ts">
2+
import type { ModuleBuildMetrics } from '~~/shared/types'
3+
import { computed } from 'vue'
4+
5+
const props = defineProps<{
6+
metrics: ModuleBuildMetrics
7+
}>()
8+
9+
const durations = computed(() => {
10+
const data = props.metrics
11+
const _resolveIds = data?.resolve_ids.reduce((t, node) => {
12+
t += node.duration
13+
return t
14+
}, 0) ?? 0
15+
const _loads = data?.loads?.reduce((t, node) => {
16+
t += node.duration
17+
return t
18+
}, 0) ?? 0
19+
const _transforms = data?.transforms.reduce((t, node) => {
20+
t += node.duration
21+
return t
22+
}, 0) ?? 0
23+
const total = _resolveIds + _loads + _transforms
24+
return {
25+
resolveIds: _resolveIds,
26+
loads: _loads,
27+
transforms: _transforms,
28+
total,
29+
}
30+
})
31+
32+
const sourceCodeSize = computed(() => {
33+
const data = props.metrics?.transforms
34+
return data?.[0]?.source_code_size
35+
})
36+
37+
const transformedCodeSize = computed(() => {
38+
const data = props.metrics?.transforms.filter(t => t.transformed_code_size)
39+
return data?.[data.length - 1]?.transformed_code_size
40+
})
41+
</script>
42+
43+
<template>
44+
<div text-xs font-mono flex="~ items-center gap-3" ml2>
45+
<DisplayDuration
46+
:duration="durations.resolveIds" flex="~ gap-1 items-center"
47+
:title="`resolveId hooks cost: ${durations.resolveIds}ms`"
48+
>
49+
<span i-ph-magnifying-glass-duotone inline-block />
50+
</DisplayDuration>
51+
<DisplayDuration
52+
:duration="durations.loads" flex="~ gap-1 items-center"
53+
:title="`load hooks cost: ${durations.loads}ms`"
54+
>
55+
<span i-ph-upload-simple-duotone inline-block />
56+
</DisplayDuration>
57+
<DisplayDuration
58+
:duration="durations.transforms" flex="~ gap-1 items-center"
59+
:title="`transform hooks cost: ${durations.transforms}ms`"
60+
>
61+
<span i-ph-magic-wand-duotone inline-block />
62+
</DisplayDuration>
63+
<span op40>|</span>
64+
<DisplayDuration
65+
:duration="durations.total" flex="~ gap-1 items-center"
66+
:title="`Total build cost: ${durations.total}ms`"
67+
>
68+
<span i-ph-clock-duotone inline-block />
69+
</DisplayDuration>
70+
<template v-if="sourceCodeSize && transformedCodeSize">
71+
<span op40>|</span>
72+
<div flex="~ gap-1 items-center">
73+
<DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
74+
<span i-carbon-arrow-right op50 />
75+
<DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
76+
</div>
77+
</template>
78+
</div>
79+
</template>
80+
81+
<style scoped>
82+
83+
</style>

‎packages/devtools/src/app/components/modules/DetailedList.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script setup lang="ts">
2+
import type { ModuleListItem, SessionContext } from '~~/shared/types'
3+
import { computed } from 'vue'
4+
5+
const props = defineProps<{
6+
session: SessionContext
7+
modules: ModuleListItem[]
8+
}>()
9+
10+
const filteredTransformsMap = computed(() => {
11+
const map = new Map<string, Exclude<ModuleListItem['buildMetrics'], undefined>['transforms']>()
12+
for (const mod of props.modules) {
13+
const t = mod.buildMetrics?.transforms.filter(i => i.source_code_size !== i.transformed_code_size).filter(i => i.transformed_code_size)
14+
map.set(mod.id, t!)
15+
}
16+
return map
17+
})
18+
</script>
19+
20+
<template>
21+
<div flex="~ col gap-2" p4>
22+
<template v-for="mod of modules" :key="mod">
23+
<div>
24+
<DisplayModuleId
25+
:id="mod.id"
26+
:session
27+
hover="bg-active" block px2 p1
28+
border="~ base rounded"
29+
:link="true"
30+
>
31+
<template #detail>
32+
<div flex="~ gap-1 wrap" text-xs>
33+
<ul flex="~ auto text-xs wrap">
34+
<template v-for="(p, i) of filteredTransformsMap.get(mod.id)" :key="i">
35+
<li v-if="p.source_code_size !== p.transformed_code_size && p.transformed_code_size" flex="~ items-center">
36+
<DisplayPluginName
37+
:name="p.plugin_name"
38+
class="font-mono ws-nowrap op-50"
39+
/>
40+
<span v-if="i !== filteredTransformsMap.get(mod.id)!.length - 1" op20>|</span>
41+
</li>
42+
</template>
43+
</ul>
44+
45+
<div flex="~ auto gap-1" of-hidden />
46+
<div flex="~ none gap-1 wrap justify-end">
47+
<span>
48+
<ModulesBuildMetrics v-if="mod.buildMetrics" :metrics="mod.buildMetrics" />
49+
</span>
50+
</div>
51+
</div>
52+
</template>
53+
</DisplayModuleId>
54+
</div>
55+
</template>
56+
</div>
57+
</template>

‎packages/devtools/src/app/components/modules/FlatList.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ defineProps<{
1010
<template>
1111
<div flex="~ col gap-2" p4>
1212
<template v-for="mod of modules" :key="mod">
13-
<!-- WIP: toggle to show detailed list like plugins and time cost -->
1413
<DisplayModuleId
1514
:id="mod.id"
1615
:session

‎packages/devtools/src/app/pages/session/[session].vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ onMounted(async () => {
9292
fileType: getFileTypeFromName(mod.id).name,
9393
imports: mod.imports ?? [],
9494
importers: mod.importers ?? [],
95+
buildMetrics: mod.build_metrics,
9596
}))
9697
isLoading.value = false
9798
})

‎packages/devtools/src/app/pages/session/[session]/graph/index.vue‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,12 @@ const moduleViewTypes = [
3131
{
3232
label: 'List',
3333
value: 'list',
34-
icon: 'i-ph-list-duotone',
34+
icon: 'i-carbon-list',
35+
},
36+
{
37+
label: 'DetailedList',
38+
value: 'detailed-list',
39+
icon: 'i-carbon-list-boxes',
3540
},
3641
{
3742
label: 'Graph',
@@ -161,6 +166,19 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
161166
</div>
162167
</div>
163168
</template>
169+
<template v-else-if="settings.moduleGraphViewType === 'detailed-list'">
170+
<div of-auto max-h-screen pt-45 relative>
171+
<ModulesDetailedList
172+
:session="session"
173+
:modules="searched"
174+
/>
175+
<div
176+
absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
177+
>
178+
<span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
179+
</div>
180+
</div>
181+
</template>
164182
<template v-else-if="settings.moduleGraphViewType === 'graph'">
165183
<ModulesGraph
166184
:session="session"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface ClientSettings {
1212
flowExpandAssets: boolean
1313
flowShowAllTransforms: boolean
1414
flowShowAllLoads: boolean
15-
moduleGraphViewType: 'list' | 'graph' | 'folder'
15+
moduleGraphViewType: 'list' | 'detailed-list' | 'graph' | 'folder'
1616
assetViewType: 'list' | 'folder' | 'treemap'
1717
chartAnimation: boolean
1818
moduleDetailsViewType: 'flow' | 'charts' | 'imports'

0 commit comments

Comments
 (0)