Skip to content

Commit e3254e4

Browse files
antfuantfu
committed
feat: read metadata
1 parent 5f36772 commit e3254e4

File tree

19 files changed

+190
-96
lines changed

19 files changed

+190
-96
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const props = withDefaults(
1212
id: string
1313
badges?: boolean
1414
icon?: boolean
15-
link?: boolean
15+
link?: boolean | string
1616
minimal?: boolean
1717
kind?: ModuleImport['kind']
1818
session: SessionContext
@@ -29,7 +29,7 @@ const relativePath = computed(() => {
2929
if (!props.id)
3030
return ''
3131
const id = props.id.replace(/%2F/g, '/')
32-
let relate = relative(props.session!.rootDir, id)
32+
let relate = relative(props.session!.meta.cwd, id)
3333
if (!relate.startsWith('.'))
3434
relate = `./${relate}`
3535
if (relate.startsWith('./'))
@@ -47,7 +47,7 @@ const containerClass = computed(() => {
4747
<template>
4848
<component
4949
:is="link ? NuxtLink : 'div'"
50-
:to="link ? { path: route.path, query: { ...route.query, module: id }, hash: location.hash } : undefined"
50+
:to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: id }, hash: location.hash }) : undefined"
5151
>
5252
<Tooltip
5353
my-auto text-sm font-mono block w-full

‎packages/devtools/src/app/modules/rpc/runtime/server/metadata.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import { join } from 'node:path'
12
import process from 'node:process'
2-
import { consola } from 'consola'
33

4+
import { consola } from 'consola'
45
import { defineEventHandler } from 'h3'
6+
import { RolldownLogsManager } from '../../../../../node/rolldown/logs-manager'
57
import { createWsServer } from '../../../../../node/ws'
68

79
consola.restoreAll()
810

911
const ws = createWsServer({
1012
cwd: process.cwd(),
1113
mode: 'dev',
14+
manager: new RolldownLogsManager(join(process.cwd(), '.rolldown')),
1215
}).then((ws) => {
1316
// Warm up the payload
1417
setTimeout(() => {

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ const params = useRoute().params as {
1313
const isLoading = ref(true)
1414
const session = reactive({
1515
id: computed(() => params.session),
16-
rootDir: '',
16+
meta: undefined!,
1717
modulesList: shallowRef<ModuleListItem[]>([]),
1818
}) as SessionContext
1919
const rpc = useRpc()
2020
2121
useSideNav(() => {
22-
if (!session.rootDir)
22+
if (!session.meta)
2323
return []
2424
return [
2525
{
@@ -31,16 +31,19 @@ useSideNav(() => {
3131
title: 'Modules Graph',
3232
to: `/session/${session.id}/graph`,
3333
icon: 'i-ph-graph-duotone',
34+
category: 'session',
35+
},
36+
{
37+
title: 'Plugins',
38+
to: `/session/${session.id}/plugins`,
39+
icon: 'i-ph-plugs-duotone',
40+
category: 'session',
3441
},
3542
{
3643
title: 'Bundle Analysis',
3744
to: `/session/${session.id}/bundle`,
3845
icon: 'i-ph-package-duotone',
39-
},
40-
{
41-
title: 'Raw Data',
42-
to: `/session/${session.id}/raw`,
43-
icon: 'i-ph-file-duotone',
46+
category: 'session',
4447
},
4548
]
4649
})
@@ -49,7 +52,7 @@ onMounted(async () => {
4952
const summary = await rpc.value!['vite:rolldown:get-session-summary']!({
5053
session: params.session,
5154
})
52-
session.rootDir = summary.rootDir
55+
session.meta = summary.meta!
5356
session.modulesList = summary.modules.map(mod => ({
5457
id: mod.id,
5558
fileType: getFileTypeFromName(mod.id).name,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ debouncedWatch(
4545
)
4646
4747
const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
48-
const path = parseReadablePath(mod.id, props.session.rootDir)
48+
const path = parseReadablePath(mod.id, props.session.meta.cwd)
4949
const type = getFileTypeFromModuleId(mod.id)
5050
return {
5151
mod,
@@ -207,7 +207,7 @@ function closeFlowPanel() {
207207
:key="(route.query.module as string)"
208208
v-on-click-outside="closeFlowPanel"
209209
fixed right-0 bottom-0 top-20 z-panel-content
210-
min-w-200 of-scroll bg-glass border="l t base rounded-tl-xl"
210+
min-w-300 of-scroll bg-glass border="l t base rounded-tl-xl"
211211
max-w-85vw
212212
>
213213
<FlowmapModuleFlowLoader

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

Lines changed: 90 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,103 @@
11
<script setup lang="ts">
22
import type { SessionContext } from '~~/shared/types'
3+
import { computed } from 'vue'
4+
import { sideNavItems } from '~~/app/state/nav'
35
4-
defineProps<{
6+
const props = defineProps<{
57
session: SessionContext
68
}>()
9+
10+
interface DataTableItem {
11+
title: string
12+
value: string | number | Date
13+
type?: 'string' | 'badge' | 'number'
14+
icon: string
15+
}
16+
17+
const dataTable = computed<DataTableItem[]>(() => {
18+
return [
19+
{
20+
title: 'Build ID',
21+
value: props.session.id,
22+
icon: 'i-ph-hash-duotone',
23+
},
24+
{
25+
title: 'Created At',
26+
// @ts-expect-error missing type
27+
value: new Date(props.session.meta.timestamp),
28+
icon: 'i-ph-clock-duotone',
29+
},
30+
{
31+
title: 'Directory',
32+
value: props.session.meta.cwd,
33+
icon: 'i-ph-folder-duotone',
34+
},
35+
{
36+
title: 'Total Modules',
37+
value: props.session.modulesList.length,
38+
icon: 'i-ph-files-duotone',
39+
},
40+
{
41+
title: 'Plugins',
42+
value: props.session.meta.plugins.length,
43+
icon: 'i-ph-plugs-duotone',
44+
},
45+
{
46+
title: 'Platform',
47+
value: props.session.meta.platform,
48+
icon: 'i-ph-cpu-duotone',
49+
type: 'badge',
50+
},
51+
{
52+
title: 'Format',
53+
value: props.session.meta.format,
54+
icon: 'i-ph-file-duotone',
55+
type: 'badge',
56+
},
57+
]
58+
})
759
</script>
860

961
<template>
10-
<div flex="~ col gap-2" p4>
11-
<div border="~ base rounded" p4 flex="~ col gap-2">
12-
<div>
13-
{{ session.id }}
14-
</div>
15-
<div>
16-
{{ session.rootDir }}
17-
</div>
18-
<div>
19-
{{ session.modulesList.length }} modules
20-
</div>
62+
<div flex="~ col gap-2" p6>
63+
<div op50>
64+
Meta Info
65+
</div>
66+
<div border="~ base rounded" p4 grid="~ cols-[max-content_160px_2fr] gap-2 items-center">
67+
<template v-for="item of dataTable" :key="item.title">
68+
<div :class="item.icon" />
69+
<div>
70+
{{ item.title }}
71+
</div>
72+
<div font-mono>
73+
<time v-if="(item.value instanceof Date)" :datetime="item.value.toISOString()">{{ item.value.toLocaleString() }}</time>
74+
<DisplayBadge v-else-if="item.type === 'badge'" :text="String(item.value)" py1 />
75+
<DisplayNumberBadge v-else-if="typeof item.value === 'number'" :number="item.value" py1 rounded-full inline-block text-sm />
76+
<span v-else>{{ item.value }}</span>
77+
</div>
78+
</template>
79+
</div>
80+
81+
<div op50 mt-4>
82+
Build Entries
83+
</div>
84+
<div border="~ base rounded" p4 grid="~ cols-[max-content_1fr] gap-2 items-center">
85+
<template v-for="input of props.session.meta.inputs" :key="input">
86+
<DisplayBadge :text="input.name || ''" />
87+
<DisplayModuleId :id="input.import || ''" :session="session" :link="`/session/${session.id}/graph?module=${encodeURIComponent(input.import || '')}`" />
88+
</template>
89+
</div>
90+
91+
<div op50 mt-4>
92+
Views
2193
</div>
2294
<div flex="~ gap-2">
23-
<NuxtLink btn-action :to="{ path: `/session/${session.id}/graph` }">
24-
Modules Graph
25-
</NuxtLink>
26-
<NuxtLink btn-action :to="{ path: `/session/${session.id}/bundle` }">
27-
Bundle Analysis
28-
</NuxtLink>
29-
<NuxtLink btn-action :to="{ path: `/session/${session.id}/raw` }">
30-
Raw Data
31-
</NuxtLink>
95+
<template v-for="item of sideNavItems" :key="item.to">
96+
<NuxtLink v-if="item.category === 'session'" btn-action :to="{ path: item.to }" flex="~ col" min-w-40>
97+
<div :class="item.icon" text-2xl />
98+
{{ item.title }}
99+
</NuxtLink>
100+
</template>
32101
</div>
33102

34103
<div flex="~ gap-2" mt-10>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
modelValue?: boolean
4+
}>()
5+
</script>
6+
7+
<template>
8+
<div>
9+
Plugins
10+
</div>
11+
</template>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { computed, onScopeDispose, reactive, toRef, watch } from 'vue'
44
export interface SideNavItem {
55
icon: string
66
title: string
7+
category?: string
78
to?: string
89
action?: () => void
910
}

‎packages/devtools/src/node/cli.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { ServerFunctionsDump } from './rpc'
22
import { existsSync } from 'node:fs'
33

44
import fs from 'node:fs/promises'
5+
import { join } from 'node:path'
56
import process from 'node:process'
67
import c from 'ansis'
78
import cac from 'cac'
@@ -12,6 +13,7 @@ import { stringify } from 'structured-clone-es'
1213
import { glob } from 'tinyglobby'
1314
import { distDir } from '../dirs'
1415
import { MARK_CHECK, MARK_NODE } from './constants'
16+
import { RolldownLogsManager } from './rolldown/logs-manager'
1517
import { createHostServer } from './server'
1618

1719
const cli = cac('vite-devtools')
@@ -35,6 +37,7 @@ cli
3537
.then(async r => await r.createServerFunctions({
3638
cwd,
3739
mode: 'build',
40+
manager: new RolldownLogsManager(join(cwd, '.rolldown')),
3841
}))
3942
const rpcDump: ServerFunctionsDump = {
4043
'vite:get-payload': await rpc['vite:get-payload'](),
@@ -90,6 +93,7 @@ cli
9093
const { server, rpc } = await createHostServer({
9194
cwd: options.root,
9295
mode: 'dev',
96+
manager: new RolldownLogsManager(join(options.root, '.rolldown')),
9397
})
9498

9599
// Warm up the payload

‎packages/devtools/src/node/functions.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import type { ServerFunctions } from './rpc/index'
2+
import type { RpcContext } from './rpc/types'
23
import { rpcFunctions } from './rpc/index'
34

4-
export interface CreateServerFunctionsOptions {
5-
cwd: string
6-
mode: 'dev' | 'build'
5+
export interface CreateServerFunctionsOptions extends RpcContext {
76
}
87

98
export async function createServerFunctions(options: CreateServerFunctionsOptions): Promise<ServerFunctions> {

‎packages/devtools/src/node/rolldown/events-reader.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Event } from '@rolldown/debug'
1+
import type { Event, SessionMeta } from '@rolldown/debug'
22
import fs from 'node:fs'
33
import { parseJsonStreamWithConcatArrays } from '../utils/json-parse-stream'
44
import { RolldownEventsManager } from './events-manager'
@@ -9,6 +9,7 @@ export class RolldownEventsReader {
99
lastBytes: number = 0
1010
lastTimestamp: number = 0
1111
manager = new RolldownEventsManager()
12+
meta: SessionMeta | undefined
1213

1314
private constructor(
1415
readonly filepath: string,

0 commit comments

Comments
 (0)