Skip to content

Commit e86f4c8

Browse files
antfuantfu
committed
feat: improve style
1 parent 2637b3b commit e86f4c8

File tree

7 files changed

+172
-131
lines changed

7 files changed

+172
-131
lines changed

‎packages/devtools/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"@types/stream-json": "catalog:types",
6060
"@unocss/nuxt": "catalog:build",
6161
"@vueuse/nuxt": "catalog:build",
62+
"@vueuse/router": "^13.1.0",
6263
"codemirror": "catalog:frontend",
6364
"codemirror-theme-vars": "catalog:frontend",
6465
"comlink": "catalog:frontend",

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script setup lang="ts" generic="T">
2+
import { ref } from 'vue'
3+
4+
defineProps<{
5+
items: T[]
6+
}>()
7+
8+
const isExpanded = ref(true)
9+
</script>
10+
11+
<template>
12+
<FlowmapNode
13+
:lines="{ top: true, bottom: items.length === 0 || !isExpanded }" pl6 py2
14+
:class-node-outer="items.length === 0 ? 'border-dashed' : ''"
15+
>
16+
<template #content>
17+
<slot name="node" />
18+
<span op50 text-xs>({{ items.length }})</span>
19+
</template>
20+
21+
<template v-if="items.length > 0" #inline-before>
22+
<button
23+
w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center"
24+
@click="isExpanded = !isExpanded"
25+
>
26+
<div i-ph-caret-right text-sm op50 transition duration-300 :class="{ 'rotate-90': isExpanded }" />
27+
</button>
28+
</template>
29+
30+
<template v-if="items.length > 0 && isExpanded" #after>
31+
<div mb--1px>
32+
<div h-8 relative mb--1px translate-x-1px>
33+
<div border="l b base rounded-lb-2xl" h-5 absolute left-4 w-3 top-0 />
34+
<div border="r t base rounded-rt-2xl" h-3 absolute left-7 w-3 top-5 translate-y--1px />
35+
</div>
36+
<div>
37+
<template v-for="(item, idx) of items" :key="item.plugin_name">
38+
<slot name="item" :item="item" :index="idx" />
39+
</template>
40+
</div>
41+
<div h-6 relative mb--2>
42+
<div border="b r base rounded-br-2xl" h-3 absolute left-7 w-3 top-0 translate-x-1px />
43+
<div border="t l base rounded-lt-2xl" h-3 absolute left-4 w="[calc(0.75rem+1px)]" top-3 translate-y--1px />
44+
</div>
45+
</div>
46+
</template>
47+
</FlowmapNode>
48+
</template>

‎packages/devtools/src/app/pages/build/[build]/flow.vue‎

Lines changed: 70 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -61,142 +61,89 @@ function select(transform: RolldownModuleTransformInfo | RolldownModuleLoadInfo
6161
</template>
6262
</FlowmapNode>
6363

64-
<FlowmapNode :lines="{ top: true, bottom: true }" pl6 py2>
65-
<template #content>
66-
<div i-ph-magnifying-glass-duotone /> Resolve Id
67-
</template>
68-
</FlowmapNode>
69-
70-
<FlowmapNode
71-
:lines="{ top: true, bottom: info.resolve_ids.length === 0 }" pl6 py2
72-
:class-node-outer="info.resolve_ids.length === 0 ? 'border-dashed' : ''"
73-
>
74-
<template #content>
64+
<FlowmapExpandable :items="info.resolve_ids">
65+
<template #node>
7566
<div i-ph-magnifying-glass-duotone /> Resolve Id
76-
<span op50 text-xs>({{ info.resolve_ids.length }})</span>
7767
</template>
78-
<template v-if="info.resolve_ids.length > 0" #inline-before>
79-
<button w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center">
80-
<div i-ph-caret-down text-sm op50 />
81-
</button>
82-
</template>
83-
<template v-if="info.resolve_ids.length > 0" #inline-after>
84-
<div w-8 relative>
85-
<div absolute top="1/2" left-0 bottom--4 right="1/2" border="t r base rounded-rt-2xl" z-flowmap-line />
86-
</div>
87-
</template>
88-
<template #after>
89-
<div pl-12 pt2>
90-
<template v-for="(resolve_id, idx) of info.resolve_ids" :key="resolve_id.plugin_name">
91-
<FlowmapNode
92-
:lines="{ top: idx > 0, bottom: idx < info.resolve_ids.length - 1 }"
93-
class-node-inline="gap-2 items-center"
94-
pl6 py1
68+
<template #item="{ item, index }">
69+
<FlowmapNode
70+
:lines="{ top: index > 0, bottom: index < info.resolve_ids.length - 1 }"
71+
class-node-inline="gap-2 items-center"
72+
pl6 py1
73+
>
74+
<template #inner>
75+
<button
76+
px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
77+
@click="select(item)"
9578
>
96-
<template #inner>
97-
<button
98-
px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
99-
@click="select(resolve_id)"
100-
>
101-
<DisplayPluginName :name="resolve_id.plugin_name" class="font-mono text-sm" />
102-
</button>
103-
</template>
104-
<template #inline-after>
105-
<DisplayDuration :duration="resolve_id.duration" :color="true" :factor="5" text-xs />
106-
<!-- <div v-if="resolve_id.source_from === resolve_id.source_to" text-xs op50>
107-
no changes
108-
</div> -->
109-
</template>
110-
</FlowmapNode>
79+
<DisplayPluginName :name="item.plugin_name" class="font-mono text-sm" />
80+
</button>
11181
</template>
112-
</div>
82+
<template #inline-after>
83+
<DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
84+
</template>
85+
</FlowmapNode>
11386
</template>
114-
</FlowmapNode>
87+
</FlowmapExpandable>
11588

116-
<FlowmapNode
117-
:lines="{ top: true, bottom: info.loads.length === 0 }" pl6 py2
118-
:class-node-outer="info.loads.length === 0 ? 'border-dashed' : ''"
119-
>
120-
<template #content>
89+
<FlowmapExpandable :items="info.loads">
90+
<template #node>
12191
<div i-ph-upload-simple-duotone /> Load
122-
<span op50 text-xs>({{ info.loads.length }})</span>
12392
</template>
124-
<template v-if="info.loads.length > 0" #inline-before>
125-
<button w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center">
126-
<div i-ph-caret-down text-sm op50 />
127-
</button>
128-
</template>
129-
<template v-if="info.loads.length > 0" #inline-after>
130-
<div w-8 relative>
131-
<div absolute top="1/2" left-0 bottom--4 right="1/2" border="t r base rounded-rt-2xl" z-flowmap-line />
132-
</div>
133-
</template>
134-
<template v-if="info.loads.length > 0" #after>
135-
<div pl-12 pt2>
136-
<template v-for="(load, idx) of info.loads" :key="load.plugin_name">
137-
<FlowmapNode :lines="{ top: idx > 0, bottom: idx < info.loads.length - 1 }" pl6 py1>
138-
<template #inner>
139-
<button
140-
:class="load.source ? '' : 'op75'"
141-
px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
142-
@click="select(load)"
143-
>
144-
<DisplayPluginName :name="load.plugin_name" class="font-mono text-sm" />
145-
</button>
146-
</template>
147-
</FlowmapNode>
93+
<template #item="{ item }">
94+
<FlowmapNode
95+
:lines="{ top: true, bottom: true }"
96+
class-node-inline="gap-2 items-center"
97+
pl6 py1
98+
>
99+
<template #inner>
100+
<button
101+
:class="item.source ? '' : 'op75'"
102+
px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
103+
@click="select(item)"
104+
>
105+
<DisplayPluginName :name="item.plugin_name" class="font-mono text-sm" />
106+
</button>
148107
</template>
149-
</div>
108+
<template #inline-after>
109+
<DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
110+
<div v-if="item.source === null" text-xs op50>
111+
no source
112+
</div>
113+
</template>
114+
</FlowmapNode>
150115
</template>
151-
</FlowmapNode>
116+
</FlowmapExpandable>
152117

153-
<FlowmapNode
154-
:lines="{ top: true, bottom: info.transforms.length === 0 }" pl6 py2
155-
:class-node-outer="info.transforms.length === 0 ? 'border-dashed' : ''"
156-
>
157-
<template #content>
118+
<FlowmapExpandable :items="info.transforms">
119+
<template #node>
158120
<div i-ph-magic-wand-duotone /> Transform
159-
<span op50 text-xs>({{ info.transforms.length }})</span>
160-
</template>
161-
<template v-if="info.transforms.length > 0" #inline-before>
162-
<button w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center">
163-
<div i-ph-caret-down text-sm op50 />
164-
</button>
165-
</template>
166-
<template v-if="info.transforms.length > 0" #inline-after>
167-
<div w-8 relative>
168-
<div absolute top="1/2" left-0 bottom--4 right="1/2" border="t r base rounded-rt-2xl" z-flowmap-line />
169-
</div>
170121
</template>
171-
<template #after>
172-
<div pl-12 pt2>
173-
<template v-for="(transform, idx) of info.transforms" :key="transform.plugin_name">
174-
<FlowmapNode
175-
:lines="{ top: idx > 0, bottom: idx < info.transforms.length - 1 }"
176-
class-node-inline="gap-2 items-center"
177-
:class-node-outer="transform.source_from === transform.source_to ? 'border-dashed' : ''"
178-
pl6 py1
122+
<template #item="{ item }">
123+
<FlowmapNode
124+
:lines="{ top: true, bottom: true }"
125+
class-node-inline="gap-2 items-center"
126+
:class-node-outer="item.source_from === item.source_to ? 'border-dashed' : ''"
127+
pl6 py1
128+
>
129+
<template #inner>
130+
<button
131+
:class="item.source_from === item.source_to ? 'op75' : ''"
132+
px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
133+
@click="select(item)"
179134
>
180-
<template #inner>
181-
<button
182-
:class="transform.source_from === transform.source_to ? 'op75' : ''"
183-
px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
184-
@click="select(transform)"
185-
>
186-
<DisplayPluginName :name="transform.plugin_name" class="font-mono text-sm" />
187-
</button>
188-
</template>
189-
<template #inline-after>
190-
<DisplayDuration :duration="transform.duration" :color="true" :factor="5" text-xs />
191-
<div v-if="transform.source_from === transform.source_to" text-xs op50>
192-
no changes
193-
</div>
194-
</template>
195-
</FlowmapNode>
135+
<DisplayPluginName :name="item.plugin_name" class="font-mono text-sm" />
136+
</button>
196137
</template>
197-
</div>
138+
<template #inline-after>
139+
<DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
140+
<div v-if="item.source_from === item.source_to" text-xs op50>
141+
no changes
142+
</div>
143+
</template>
144+
</FlowmapNode>
198145
</template>
199-
</FlowmapNode>
146+
</FlowmapExpandable>
200147

201148
<FlowmapNode :lines="{ top: true, bottom: true }" pl6 py2>
202149
<template #content>
@@ -218,13 +165,13 @@ function select(transform: RolldownModuleTransformInfo | RolldownModuleLoadInfo
218165

219166
<div
220167
v-if="selected"
221-
absolute right-5 top-5 bottom-5 w-200
168+
absolute right-3 top-3 bottom-3 w-100
222169
border="~ base rounded-lg" bg-glass of-hidden
223170
grid="~ rows-[max-content_1fr]"
224171
>
225-
<div px2 p1 font-mono border="b base" flex="~ items-center gap-2">
172+
<div px4 p2 font-mono border="b base" flex="~ items-center gap-2">
226173
<PluginName :name="selected.plugin_name" />
227-
<span text-xs op50>
174+
<span op50 text-xs>
228175
{{ selected.type === 'load' ? 'Load' : 'Transform' }}
229176
</span>
230177
</div>

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,50 @@
11
<script setup lang="ts">
22
import { useRoute } from '#app/composables/router'
3-
import { onMounted, shallowRef } from 'vue'
3+
import Fuse from 'fuse.js'
4+
import { computed, onMounted, reactive, shallowRef } from 'vue'
45
import { backend } from '../../../state/backend'
56
67
const params = useRoute().params as {
78
build: string
89
}
910
1011
const modules = shallowRef<{ id: string }[]>([])
12+
const filters = reactive({
13+
search: '',
14+
})
15+
16+
const fuse = new Fuse(modules.value, {
17+
includeScore: true,
18+
threshold: 0.2,
19+
keys: ['module_id'],
20+
})
21+
22+
const filtered = computed(() => {
23+
if (filters.search === '') {
24+
return modules.value
25+
}
26+
return fuse.search(filters.search).map(r => r.item)
27+
})
1128
1229
onMounted(async () => {
1330
modules.value = await backend.value!.functions['vite:rolldown:get-module-list']!({
1431
build: params.build,
1532
})
33+
fuse.setCollection(modules.value)
1634
})
1735
</script>
1836

1937
<template>
2038
<div flex="~ col gap-2" p4>
21-
<template v-for="mod of modules" :key="mod">
39+
<div>
40+
<input
41+
v-model="filters.search"
42+
border="~ base rounded-full"
43+
p2 px4 w-full outline-none
44+
placeholder="Search"
45+
>
46+
</div>
47+
<template v-for="mod of filtered" :key="mod">
2248
<NuxtLink
2349
:to="{ path: `/build/${params.build}/flow`, query: { module: mod.id } }"
2450
hover="bg-active" block px2 p1
@@ -27,5 +53,8 @@ onMounted(async () => {
2753
<DisplayModuleId :id="mod.id" />
2854
</NuxtLink>
2955
</template>
56+
<div text-center text-xs op50 m4>
57+
{{ filtered.length }} of {{ modules.length }}
58+
</div>
3059
</div>
3160
</template>

‎packages/devtools/src/app/styles/cm.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
html:not(.dark) {
88
--cm-foreground: #8e8f8b;
9-
--cm-background: #ffffff;
9+
--cm-background: #0000;
1010
--cm-comment: #a0ada0;
1111
--cm-string: #b56959;
1212
--cm-literal: #2f8a89;
@@ -26,12 +26,12 @@ html:not(.dark) {
2626
--cm-regex: #ab5e3f;
2727
--cm-json-property: #698c96;
2828
--cm-selection-background: #44444410;
29-
--cm-line-number-gutter: #fafafa;
29+
--cm-line-number-gutter: #fafafa50;
3030
}
3131

3232
html.dark {
3333
--cm-foreground: #858585;
34-
--cm-background: #161616;
34+
--cm-background: #0000;
3535
--cm-comment: #758575;
3636
--cm-string: #d48372;
3737
--cm-literal: #429988;
@@ -50,10 +50,9 @@ html.dark {
5050
--cm-regex: #ab5e3f;
5151
--cm-json-property: #6b8b9e;
5252
--cm-line-number: #888888;
53-
--cm-line-number-gutter: #eeeeee;
5453
--cm-line-highlight-background: #444444;
5554
--cm-selection-background: #44444450;
56-
--cm-line-number-gutter: #1a1a1a;
55+
--cm-line-number-gutter: #1a1a1a50;
5756
}
5857

5958

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export const rolldownGetModuleList = defineRpcFunction({
1212
await reader.read()
1313
const modules = new Set<string>()
1414
for (const event of reader.manager.events) {
15-
modules.add(event.module_id)
15+
if ('module_id' in event) {
16+
modules.add(event.module_id)
17+
}
1618
}
1719
return Array.from(modules)
1820
.map((id) => {

0 commit comments

Comments
 (0)