Skip to content

Commit 624bba6

Browse files
webfansplzwebfansplz
committed
chore: update
2 parents 2821c1b + 6247e50 commit 624bba6

35 files changed

Lines changed: 2035 additions & 1430 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"lint": "pnpm -C packages/devtools run dev:prepare && eslint .",
1414
"test": "vitest",
1515
"release": "bumpp -r && pnpm publish -r",
16-
"typecheck": "vue-tsc -b --noEmit"
16+
"typecheck": "pnpm -C packages/devtools run typecheck"
1717
},
1818
"devDependencies": {
1919
"@antfu/eslint-config": "catalog:devtools",

‎packages/devtools/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@
3232
"build:debug": "NUXT_DEBUG_BUILD=true pnpm run build",
3333
"start": "node ./bin.mjs",
3434
"prepack": "pnpm build",
35-
"dev:prepare": "nuxi prepare src"
35+
"dev:prepare": "nuxi prepare src",
36+
"typecheck": "vue-tsc -b --noEmit"
3637
},
3738
"dependencies": {
3839
"@rolldown/debug": "catalog:deps",

‎packages/devtools/src/app/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ $connectToServer()
2727
v-else-if="!connectionInfo.connected"
2828
text="Connecting..."
2929
/>
30-
<div v-else>
30+
<div v-else h-vh>
3131
<NuxtPage />
3232
</div>
3333
</template>

packages/devtools/src/app/components/chart/AssetTreemap.vue renamed to packages/devtools/src/app/components/assets/Flamegraph.vue

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
<script setup lang="ts">
22
import type { GraphBase, GraphBaseOptions } from 'nanovis'
3-
import type { AssetChartInfo, AssetChartNode } from '~/types/assets'
3+
import type { AssetChartInfo } from '~/types/assets'
44
import { useTemplateRef, watchEffect } from 'vue'
55
66
const props = defineProps<{
77
graph: GraphBase<AssetChartInfo | undefined, GraphBaseOptions<AssetChartInfo | undefined>>
8-
selected?: AssetChartNode | undefined
9-
}>()
10-
11-
const emit = defineEmits<{
12-
(e: 'select', node: AssetChartNode | null): void
138
}>()
149
1510
const el = useTemplateRef<HTMLDivElement>('el')
11+
1612
watchEffect(() => el.value?.append(props.graph.el))
1713
</script>
1814

1915
<template>
20-
<ChartAssetNavBreadcrumb
21-
border="b base" py2 min-h-10
22-
:selected="selected"
23-
:options="graph.options"
24-
@select="emit('select', $event)"
25-
/>
2616
<div ref="el" />
2717
</template>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const assetTree = computed(() => {
2121
</script>
2222

2323
<template>
24-
<div flex="~ gap-2">
24+
<div flex="~ gap-2" p4>
2525
<DisplayTreeNode
2626
v-if="assets?.length"
2727
flex-1

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

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

99
<template>
1010
<div p4>
11-
<div flex="~ col gap-1">
12-
<template v-for="asset in assets" :key="asset.id">
13-
<NuxtLink
14-
:to="{ query: { asset: asset.filename } }"
15-
font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
16-
>
17-
<div flex="~ gap-1">
18-
<DisplayFileIcon :filename="asset.filename" />
19-
{{ asset.filename }}
20-
</div>
21-
</NuxtLink>
22-
</template>
11+
<div flex="~ col gap-2">
12+
<AssetsListItem
13+
v-for="asset in assets"
14+
:key="asset.filename"
15+
:asset="asset"
16+
/>
2317
</div>
2418
</div>
2519
</template>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import type { Asset as AssetInfo } from '@rolldown/debug'
3+
4+
defineProps<{
5+
asset: AssetInfo
6+
}>()
7+
</script>
8+
9+
<template>
10+
<NuxtLink
11+
:to="{ query: { asset: asset.filename } }"
12+
font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
13+
>
14+
<div flex="~ gap-1">
15+
<DisplayFileIcon :filename="asset.filename" />
16+
<span overflow-hidden text-ellipsis break-all line-clamp-2>
17+
{{ asset.filename }}
18+
</span>
19+
</div>
20+
</NuxtLink>
21+
</template>

‎packages/devtools/src/app/components/assets/Sunburst.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script setup lang="ts">
2+
import type { GraphBase, GraphBaseOptions } from 'nanovis'
3+
import type { AssetChartInfo, AssetChartNode } from '~/types/assets'
4+
import { colorToCssBackground } from 'nanovis'
5+
import { useTemplateRef, watchEffect } from 'vue'
6+
7+
const props = defineProps<{
8+
graph: GraphBase<AssetChartInfo | undefined, GraphBaseOptions<AssetChartInfo | undefined>>
9+
selected?: AssetChartNode | undefined
10+
}>()
11+
12+
const emit = defineEmits<{
13+
(e: 'select', node: AssetChartNode | null): void
14+
}>()
15+
16+
const el = useTemplateRef<HTMLDivElement>('el')
17+
watchEffect(() => el.value?.append(props.graph.el))
18+
</script>
19+
20+
<template>
21+
<div grid="~ cols-[max-content_1fr] gap-2" p4>
22+
<div ref="el" w-500px />
23+
<div flex="~ col gap-4">
24+
<ChartAssetNavBreadcrumb
25+
border="b base" py2
26+
:selected="selected"
27+
:options="graph.options"
28+
@select="emit('select', $event)"
29+
/>
30+
<div v-if="selected" grid="~ cols-[250px_1fr] gap-1">
31+
<template v-for="child of selected.children" :key="child.id">
32+
<button
33+
ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm
34+
hover="bg-active" rounded px2
35+
@click="emit('select', child)"
36+
>
37+
<span v-if="child.meta && child.meta === selected?.meta" text-primary>(self)</span>
38+
<span v-else>{{ child.id }}</span>
39+
</button>
40+
41+
<button
42+
relative flex="~ gap-1 items-center"
43+
hover="bg-active" rounded
44+
@click="emit('select', child)"
45+
>
46+
<div
47+
h-5 rounded shadow border="~ base"
48+
:style="{
49+
background: colorToCssBackground(graph.options.getColor?.(child) || '#000'),
50+
width: `${child.size / selected.size * 100}%`,
51+
}"
52+
/>
53+
<DisplayFileSizeBadge text-xs :bytes="child.size" :total="selected.size" :percent-ratio="3" />
54+
<div
55+
v-if="child.children.length > 0"
56+
v-tooltip="`${child.children.length} dependencies`"
57+
:title="`${child.children.length} dependencies`"
58+
text-xs op-fade
59+
>
60+
({{ child.children.length }})
61+
</div>
62+
</button>
63+
</template>
64+
</div>
65+
</div>
66+
</div>
67+
</template>

0 commit comments

Comments
 (0)