Skip to content

Commit d6fd9bc

Browse files
antfuantfu
committed
feat: basic resolved id visual
1 parent 861a480 commit d6fd9bc

3 files changed

Lines changed: 109 additions & 81 deletions

File tree

‎packages/devtools/src/app/components/flowmap/Node.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
22
const props = defineProps<{
33
lines?: {
4-
top?: boolean
5-
bottom?: boolean
4+
top?: boolean | number
5+
bottom?: boolean | number
66
}
77
classNodeInline?: string
88
classNodeOuter?: string
@@ -16,10 +16,12 @@ const props = defineProps<{
1616
<div
1717
v-if="props.lines?.top" absolute top-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
1818
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
19+
:style="typeof props.lines?.top === 'number' ? `height: ${props.lines.top}px` : ''"
1920
/>
2021
<div
2122
v-if="props.lines?.bottom" absolute bottom-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
2223
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
24+
:style="typeof props.lines?.bottom === 'number' ? `height: ${props.lines.bottom}px` : ''"
2325
/>
2426
<slot name="before" />
2527
<div flex="~" :class="props.classNodeInline">

‎packages/devtools/src/app/components/flowmap/NodeModuleInfo.vue‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function down() {
5858
</div>
5959
<FlowmapNode
6060
v-else
61-
:lines="{ top: true, bottom: true }"
61+
:lines="{ top: true }"
6262
:class-node-outer="isDashed ? 'border-dashed' : ''"
6363
:active="active"
6464
class-node-inline="gap-2 items-center"
@@ -95,5 +95,22 @@ function down() {
9595
</div>
9696
</template>
9797
</template>
98+
<template
99+
v-if="item.type === 'resolve' && item.resolved_id && item.importer"
100+
#after
101+
>
102+
<div
103+
p2 ml4 border="l" flex="~ col gap-2"
104+
:class="active ? 'border-flow-line-active' : 'border-flow-line'"
105+
>
106+
<DisplayModuleId :id="item.importer" />
107+
<div flex="~ gap-1 items-center" pl1>
108+
<div i-ph-arrow-bend-down-right text-sm op50 />
109+
<DisplayModuleId :id="item.module_request" />
110+
</div>
111+
<div i-ph-arrow-down ml6 text-sm op50 />
112+
<DisplayModuleId :id="item.resolved_id" ml6 />
113+
</div>
114+
</template>
98115
</FlowmapNode>
99116
</template>

‎packages/devtools/src/node/rpc/functions/rolldown-get-module-info.ts‎

Lines changed: 87 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { HookResolveIdCallStart } from '@rolldown/debug'
12
import { diffLines } from 'diff'
23
import { join } from 'pathe'
34
import { RolldownEventsReader } from '../../rolldown/events-reader'
@@ -13,11 +14,15 @@ export interface ModuleInfo {
1314
deps: string[]
1415
importers: string[]
1516
}
17+
1618
export interface RolldownResolveInfo {
1719
type: 'resolve'
1820
id: string
1921
plugin_name: string
2022
plugin_index: number
23+
importer: string | null
24+
module_request: string
25+
import_kind: HookResolveIdCallStart['import_kind']
2126
resolved_id: string | null
2227
timestamp_start: number
2328
timestamp_end: number
@@ -72,7 +77,7 @@ export const rolldownGetModuleInfo = defineRpcFunction({
7277
handler: async ({ session, module }: { session: string, module: string }) => {
7378
const reader = RolldownEventsReader.get(join(cwd, '.rolldown', session, 'logs.json'))
7479
await reader.read()
75-
const events = reader.manager.events.filter(event => 'module_id' in event && event.module_id === module)
80+
const events = reader.manager.events
7681

7782
if (!events.length)
7883
return null
@@ -86,87 +91,91 @@ export const rolldownGetModuleInfo = defineRpcFunction({
8691
resolve_ids: [],
8792
}
8893

89-
for (const event of events) {
90-
if (event.action === 'HookLoadCallEnd') {
91-
// TODO: use ID to pair start and end
92-
const start = events.find(e => e.action === 'HookLoadCallStart' && e.module_id === event.module_id && e.plugin_index === event.plugin_index)
93-
if (!start) {
94-
console.error(`[rolldown] Load call start not found for ${event.event_id}`)
95-
continue
96-
}
97-
const duration = +event.timestamp - +start.timestamp
98-
if (!event.source && duration < DURATION_THRESHOLD)
99-
continue
100-
info.loads.push({
101-
type: 'load',
102-
id: event.event_id,
103-
plugin_name: event.plugin_name,
104-
plugin_index: event.plugin_index,
105-
source: event.source,
106-
timestamp_start: +start.timestamp,
107-
timestamp_end: +event.timestamp,
108-
duration,
109-
})
110-
}
111-
}
94+
events.forEach((start, index) => {
95+
if (start.action !== 'HookLoadCallStart' || start.module_id !== module)
96+
return
11297

113-
for (const event of events) {
114-
if (event.action === 'HookTransformCallEnd') {
115-
// TODO: use ID to pair start and end
116-
const start = events.find(e => e.action === 'HookTransformCallStart' && e.module_id === event.module_id && e.plugin_index === event.plugin_index)
117-
if (!start || start.action !== 'HookTransformCallStart') {
118-
console.error(`[rolldown] Transform call start not found for ${event.event_id}`)
119-
continue
120-
}
121-
const duration = +event.timestamp - +start.timestamp
122-
if (start.source === event.transformed_source && duration < DURATION_THRESHOLD)
123-
continue
124-
125-
let diff_added = 0
126-
let diff_removed = 0
127-
if (event.transformed_source !== start.source && event.transformed_source != null && start.source != null) {
128-
const delta = diffLines(start.source, event.transformed_source)
129-
diff_added = delta.filter(d => d.added).map(d => d.value).join('').split(/\n/g).length
130-
diff_removed = delta.filter(d => d.removed).map(d => d.value).join('').split(/\n/g).length
131-
}
132-
133-
info.transforms.push({
134-
type: 'transform',
135-
id: event.event_id,
136-
plugin_name: event.plugin_name,
137-
plugin_index: event.plugin_index,
138-
source_from: start.source,
139-
source_to: event.transformed_source,
140-
diff_added,
141-
diff_removed,
142-
timestamp_start: +start.timestamp,
143-
timestamp_end: +event.timestamp,
144-
duration,
145-
})
98+
const end = events.find(e => e.action === 'HookLoadCallEnd' && e.call_id === start.call_id, index)
99+
if (!end || end.action !== 'HookLoadCallEnd') {
100+
console.error(`[rolldown] Load call end not found for ${start.call_id}`)
101+
return
102+
}
103+
const duration = +end.timestamp - +start.timestamp
104+
if (!end.source && duration < DURATION_THRESHOLD)
105+
return
106+
107+
info.loads.push({
108+
type: 'load',
109+
id: start.event_id,
110+
plugin_name: start.plugin_name,
111+
plugin_index: start.plugin_index,
112+
source: end.source,
113+
timestamp_start: +start.timestamp,
114+
timestamp_end: +end.timestamp,
115+
duration,
116+
})
117+
})
118+
119+
events.forEach((start, index) => {
120+
if (start.action !== 'HookTransformCallStart' || start.module_id !== module)
121+
return
122+
123+
const end = events.find(e => e.action === 'HookTransformCallEnd' && e.call_id === start.call_id, index)
124+
if (!end || end.action !== 'HookTransformCallEnd') {
125+
console.error(`[rolldown] Transform call end not found for ${start.event_id}`)
126+
return
127+
}
128+
const duration = +end.timestamp - +start.timestamp
129+
if (end.transformed_source === start.source && duration < DURATION_THRESHOLD)
130+
return
131+
132+
let diff_added = 0
133+
let diff_removed = 0
134+
if (start.source !== end.transformed_source && start.source != null && end.transformed_source != null) {
135+
const delta = diffLines(end.transformed_source, start.source)
136+
diff_added = delta.filter(d => d.added).map(d => d.value).join('').split(/\n/g).length
137+
diff_removed = delta.filter(d => d.removed).map(d => d.value).join('').split(/\n/g).length
146138
}
147-
}
148139

149-
for (const event of events) {
150-
if (event.action === 'HookResolveIdCallEnd') {
151-
// TODO: use ID to pair start and end
152-
const start = events.find(e => e.action === 'HookResolveIdCallStart' && e.plugin_index === event.plugin_index)
153-
if (!start || start.action !== 'HookResolveIdCallStart') {
154-
console.error(`[rolldown] resolveId call start not found for ${event.event_id}`)
155-
continue
156-
}
157-
const duration = +event.timestamp - +start.timestamp
158-
info.resolve_ids.push({
159-
type: 'resolve',
160-
id: event.event_id,
161-
plugin_name: event.plugin_name,
162-
plugin_index: event.plugin_index,
163-
resolved_id: event.resolved_id,
164-
timestamp_start: +start.timestamp,
165-
timestamp_end: +event.timestamp,
166-
duration,
167-
})
140+
info.transforms.push({
141+
type: 'transform',
142+
id: start.event_id,
143+
plugin_name: start.plugin_name,
144+
plugin_index: start.plugin_index,
145+
source_from: start.source,
146+
source_to: end.transformed_source,
147+
diff_added,
148+
diff_removed,
149+
timestamp_start: +start.timestamp,
150+
timestamp_end: +end.timestamp,
151+
duration,
152+
})
153+
})
154+
155+
events.forEach((end) => {
156+
if (end.action !== 'HookResolveIdCallEnd' || end.resolved_id !== module)
157+
return
158+
const start = events.find(e => e.action === 'HookResolveIdCallStart' && e.call_id === end.call_id)
159+
if (!start || start.action !== 'HookResolveIdCallStart') {
160+
console.error(`[rolldown] resolveId call start not found for ${end.event_id}`)
161+
return
168162
}
169-
}
163+
164+
const duration = +end.timestamp - +start.timestamp
165+
info.resolve_ids.push({
166+
type: 'resolve',
167+
id: end.event_id,
168+
importer: start.importer,
169+
module_request: start.module_request,
170+
import_kind: start.import_kind,
171+
plugin_name: end.plugin_name,
172+
plugin_index: end.plugin_index,
173+
resolved_id: end.resolved_id,
174+
timestamp_start: +start.timestamp,
175+
timestamp_end: +end.timestamp,
176+
duration,
177+
})
178+
})
170179

171180
info.loads.sort((a, b) => a.plugin_index - b.plugin_index)
172181
info.transforms.sort((a, b) => a.plugin_index - b.plugin_index)

0 commit comments

Comments
 (0)