Skip to content

Commit 6eb480c

Browse files
webfansplzwebfansplz
committed
Merge branch 'main' into feat/plugin-flamegraph
2 parents 0ce9328 + 61d7f4f commit 6eb480c

File tree

11 files changed

+160
-73
lines changed

11 files changed

+160
-73
lines changed

‎packages/devtools-vite/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"tinyglobby": "catalog:deps",
5959
"unconfig": "catalog:deps",
6060
"unstorage": "catalog:deps",
61+
"vue-virtual-scroller": "catalog:frontend",
6162
"ws": "catalog:deps"
6263
},
6364
"devDependencies": {

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ defineProps<{
88

99
<template>
1010
<div p4>
11-
<div flex="~ col gap-2">
12-
<AssetsListItem
13-
v-for="asset in assets"
14-
:key="asset.filename"
15-
:asset="asset"
16-
/>
17-
</div>
11+
<DataVirtualList
12+
:items="assets"
13+
key-prop="filename"
14+
>
15+
<template #default="{ item }">
16+
<div flex pb2>
17+
<AssetsListItem :asset="item" />
18+
</div>
19+
</template>
20+
</DataVirtualList>
1821
</div>
1922
</template>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ defineProps<{
99
<template>
1010
<NuxtLink
1111
:to="{ query: { asset: asset.filename } }"
12-
font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
12+
w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
1313
>
1414
<div flex="~ gap-1">
1515
<DisplayFileIcon :filename="asset.filename" />

‎packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,31 +42,31 @@ const hookLoadDuration = computed(() => {
4242
if (!loadMetrics?.length) {
4343
return
4444
}
45-
return loadMetrics[loadMetrics.length - 1]!.timestamp_end - loadMetrics[0]!.timestamp_start
45+
return loadMetrics.reduce((arc, item) => arc + item.duration, 0)
4646
})
4747
4848
const hookTransformDuration = computed(() => {
4949
const transformMetrics = state.value?.transformMetrics
5050
if (!transformMetrics?.length) {
5151
return
5252
}
53-
return transformMetrics[transformMetrics.length - 1]!.timestamp_end - transformMetrics[0]!.timestamp_start
53+
return transformMetrics.reduce((arc, item) => arc + item.duration, 0)
5454
})
5555
5656
const hookResolveIdDuration = computed(() => {
5757
const resolveIdMetrics = state.value?.resolveIdMetrics
5858
if (!resolveIdMetrics?.length) {
5959
return
6060
}
61-
return resolveIdMetrics[resolveIdMetrics.length - 1]!.timestamp_end - resolveIdMetrics[0]!.timestamp_start
61+
return resolveIdMetrics.reduce((arc, item) => arc + item.duration, 0)
6262
})
6363
6464
const totalDuration = computed(() => {
6565
const calls = state.value?.calls
6666
if (!calls?.length) {
6767
return
6868
}
69-
return calls[calls.length - 1]!.timestamp_end - calls[0]!.timestamp_start
69+
return calls.reduce((arc, item) => arc + item.duration, 0)
7070
})
7171
</script>
7272

@@ -86,26 +86,26 @@ const totalDuration = computed(() => {
8686
<div text-xs font-mono flex="~ items-center gap-3" ml2>
8787
<DisplayDuration
8888
:duration="hookResolveIdDuration" flex="~ gap-1 items-center"
89-
:title="`Resolve Id hooks cost: ${hookResolveIdDuration}ms`"
89+
:title="`Resolve Id hooks cost: ${hookResolveIdDuration ?? 0}ms`"
9090
>
9191
<span i-ph-magnifying-glass-duotone inline-block />
9292
</DisplayDuration>
9393
<DisplayDuration
9494
:duration="hookLoadDuration" flex="~ gap-1 items-center"
95-
:title="`Load hooks cost: ${hookLoadDuration}ms`"
95+
:title="`Load hooks cost: ${hookLoadDuration ?? 0}ms`"
9696
>
9797
<span i-ph-upload-simple-duotone inline-block />
9898
</DisplayDuration>
9999
<DisplayDuration
100100
:duration="hookTransformDuration" flex="~ gap-1 items-center"
101-
:title="`Transform hooks cost: ${hookTransformDuration}ms`"
101+
:title="`Transform hooks cost: ${hookTransformDuration ?? 0}ms`"
102102
>
103103
<span i-ph-magic-wand-duotone inline-block />
104104
</DisplayDuration>
105105
<span op40>|</span>
106106
<DisplayDuration
107107
:duration="totalDuration" flex="~ gap-1 items-center"
108-
:title="`Total build cost: ${totalDuration}ms`"
108+
:title="`Total build cost: ${totalDuration ?? 0}ms`"
109109
>
110110
<span i-ph-clock-duotone inline-block />
111111
</DisplayDuration>

‎packages/devtools-vite/src/app/components/data/VirtualList.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts" generic="T">
2+
// @ts-expect-error missing types
3+
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
4+
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
5+
6+
defineProps<{
7+
items: T[]
8+
keyProp: keyof T
9+
}>()
10+
11+
defineSlots<{
12+
default: (props: {
13+
item: T
14+
index: number
15+
active?: boolean
16+
}) => void
17+
}>()
18+
</script>
19+
20+
<template>
21+
<DynamicScroller
22+
v-slot="{ item, active, index }"
23+
:items="items"
24+
:min-item-size="30"
25+
:key-field="keyProp"
26+
page-mode
27+
>
28+
<DynamicScrollerItem
29+
:item="item"
30+
:active="active"
31+
:data-index="index"
32+
>
33+
<slot v-bind="{ key: item[keyProp] }" :item="item" :index="index" :active="active" />
34+
</DynamicScrollerItem>
35+
</DynamicScroller>
36+
</template>

‎packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,12 @@ function normalizeMetrics(metrics: PluginBuildInfo[]) {
1616
modules: 0,
1717
}
1818
const seen = new Set()
19-
metrics.forEach((metric, index) => {
19+
metrics.forEach((metric) => {
2020
if (!seen.has(metric.module)) {
2121
seen.add(metric.module)
2222
info.modules++
2323
}
24-
if (index === 0) {
25-
info.duration = metric.timestamp_start
26-
}
27-
if (index === metrics.length - 1) {
28-
info.duration = metric.timestamp_end - info.duration
29-
}
24+
info.duration += metric.duration
3025
})
3126
if (info.duration === 0) {
3227
info.duration = null!

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

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,39 +19,44 @@ const filteredTransformsMap = computed(() => {
1919

2020
<template>
2121
<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>
22+
<DataVirtualList
23+
:items="modules"
24+
key-prop="id"
25+
>
26+
<template #default="{ item }">
27+
<div flex pb2>
28+
<DisplayModuleId
29+
:id="item.id"
30+
:session
31+
hover="bg-active" block px2 p1 w-full
32+
border="~ base rounded"
33+
:link="true"
34+
>
35+
<template #detail>
36+
<div flex="~ gap-1 wrap" text-xs>
37+
<ul flex="~ auto text-xs wrap">
38+
<template v-for="(p, i) of filteredTransformsMap.get(item.id)" :key="i">
39+
<li v-if="p.source_code_size !== p.transformed_code_size && p.transformed_code_size" flex="~ items-center">
40+
<DisplayPluginName
41+
:name="p.plugin_name"
42+
class="font-mono ws-nowrap op-50"
43+
/>
44+
<span v-if="i !== filteredTransformsMap.get(item.id)!.length - 1" op20>|</span>
45+
</li>
46+
</template>
47+
</ul>
4448

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>
49+
<div flex="~ auto gap-1" of-hidden />
50+
<div flex="~ none gap-1 wrap justify-end">
51+
<span>
52+
<ModulesBuildMetrics v-if="item.buildMetrics" :metrics="item.buildMetrics" />
53+
</span>
54+
</div>
5055
</div>
51-
</div>
52-
</template>
53-
</DisplayModuleId>
54-
</div>
55-
</template>
56+
</template>
57+
</DisplayModuleId>
58+
</div>
59+
</template>
60+
</DataVirtualList>
5661
</div>
5762
</template>

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,21 @@ defineProps<{
99

1010
<template>
1111
<div flex="~ col gap-2" p4>
12-
<template v-for="mod of modules" :key="mod">
13-
<DisplayModuleId
14-
:id="mod.id"
15-
:session
16-
hover="bg-active" block px2 p1
17-
border="~ base rounded"
18-
:link="true"
19-
/>
20-
</template>
12+
<DataVirtualList
13+
:items="modules"
14+
key-prop="id"
15+
>
16+
<template #default="{ item }">
17+
<div flex pb2>
18+
<DisplayModuleId
19+
:id="item.id"
20+
:session
21+
hover="bg-active" block px2 p1 w-full
22+
border="~ base rounded"
23+
:link="true"
24+
/>
25+
</div>
26+
</template>
27+
</DataVirtualList>
2128
</div>
2229
</template>

‎packages/devtools-vite/src/app/components/plugins/FlatList.vue

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,22 @@ const route = useRoute()
1111

1212
<template>
1313
<div flex="~ col gap-2" p4>
14-
<template v-for="plugin of plugins" :key="plugin.id">
15-
<NuxtLink :to="{ path: route.path, query: { plugin: plugin.plugin_id } }" font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
16-
<div w-8 text-right text-xs op50>
17-
#{{ plugin.plugin_id }}
14+
<DataVirtualList
15+
:items="plugins"
16+
key-prop="plugin_id"
17+
>
18+
<template #default="{ item }">
19+
<div flex pb2>
20+
<NuxtLink :to="{ path: route.path, query: { plugin: item.plugin_id } }" font-mono border="~ rounded base" w-full px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
21+
<div w-8 text-right text-xs op50>
22+
#{{ item.plugin_id }}
23+
</div>
24+
<span overflow-hidden text-ellipsis break-all line-clamp-2>
25+
<DisplayPluginName :name="item.name" />
26+
</span>
27+
</NuxtLink>
1828
</div>
19-
<span overflow-hidden text-ellipsis break-all line-clamp-2>
20-
<DisplayPluginName :name="plugin.name" />
21-
</span>
22-
</NuxtLink>
23-
</template>
29+
</template>
30+
</DataVirtualList>
2431
</div>
2532
</template>

‎pnpm-lock.yaml

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)