Skip to content

Commit b5da7e7

Browse files
antfuantfu
committed
chore: wip
1 parent 8f246ef commit b5da7e7

14 files changed

Lines changed: 356 additions & 51 deletions

File tree

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup lang="ts">
2+
import { Tooltip } from 'floating-vue'
3+
import { computed } from 'vue'
4+
import { getHashColorFromString } from '../../utils/color'
5+
6+
const props = defineProps<{
7+
cluster: string
8+
}>()
9+
10+
const parsed = computed(() => {
11+
const parts = props.cluster.split(':')
12+
if (parts.length === 1) {
13+
return {
14+
namespace: null,
15+
value: props.cluster,
16+
}
17+
}
18+
return {
19+
namespace: parts[0],
20+
value: parts.slice(1).join(':'),
21+
}
22+
})
23+
24+
const color = computed(() => getHashColorFromString(props.cluster))
25+
26+
const style = computed(() => ({
27+
color: color.value,
28+
borderColor: getHashColorFromString(props.cluster, 0.2),
29+
backgroundColor: getHashColorFromString(props.cluster, 0.1),
30+
}))
31+
</script>
32+
33+
<template>
34+
<Tooltip>
35+
<div flex="~ gap-1 items-center" text-sm pl1 pr2 rounded border-l-3 border :style>
36+
<div v-if="parsed.namespace" text-xs op-fade>
37+
{{ parsed.namespace }}:
38+
</div>
39+
<div rounded-full font-mono>
40+
{{ parsed.value }}
41+
</div>
42+
</div>
43+
<template #popper>
44+
<div>
45+
<div v-if="parsed.namespace === 'catalog'">
46+
Introduced by packages marked as <code :style="{ color }">{{ parsed.value }}</code> catalog in pnpm-workspace.yaml
47+
</div>
48+
<div v-else>
49+
This package is in the <code :style="{ color }">{{ cluster }}</code> cluster
50+
</div>
51+
</div>
52+
</template>
53+
</Tooltip>
54+
</template>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
4+
const props = withDefaults(
5+
defineProps<{
6+
time?: number | Date
7+
colorize?: boolean
8+
}>(),
9+
{
10+
colorize: true,
11+
},
12+
)
13+
14+
const date = computed(() => props.time
15+
? new Date(props.time)
16+
: undefined,
17+
)
18+
19+
const formatter = Intl.DateTimeFormat('en-US', {
20+
year: 'numeric',
21+
month: 'long',
22+
day: 'numeric',
23+
})
24+
const dateTitle = computed(() => date.value ? formatter.format(date.value) : null)
25+
</script>
26+
27+
<template>
28+
<DisplayDurationBadge
29+
v-if="date"
30+
v-tooltip="dateTitle"
31+
:title="dateTitle"
32+
:ms="Date.now() - +date"
33+
:colorize="props.colorize"
34+
mode="day"
35+
/>
36+
</template>

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
4+
const props = withDefaults(
5+
defineProps<{
6+
ms?: number
7+
colorize?: boolean
8+
mode?: 'day' | 'hour'
9+
}>(),
10+
{
11+
colorize: true,
12+
mode: 'hour',
13+
},
14+
)
15+
16+
const colorScale = [
17+
[180, 'color-scale-neutral'],
18+
[365, 'color-scale-low'],
19+
[365 * 3, 'color-scale-medium'],
20+
[365 * 5, 'color-scale-high'],
21+
[730 * 5, 'color-scale-critical'],
22+
] as const
23+
24+
const MS_PER_DAY = 24 * 60 * 60 * 1000
25+
26+
const daysAgo = computed(() => {
27+
if (props.ms == null)
28+
return 0
29+
return Math.floor(props.ms / MS_PER_DAY)
30+
})
31+
32+
const timeAgo = computed(() => {
33+
if (!props.ms)
34+
return ['', '']
35+
if (daysAgo.value < 1) {
36+
if (props.mode === 'day') {
37+
return ['today', '']
38+
}
39+
else {
40+
const hoursAgo = Math.floor(props.ms / (1000 * 60 * 60))
41+
return [hoursAgo, 'hr']
42+
}
43+
}
44+
if (daysAgo.value > 365)
45+
return [+(daysAgo.value / 365).toFixed(1), 'yr']
46+
if (daysAgo.value > 30)
47+
return [Math.round(daysAgo.value / 30), 'mo']
48+
return [daysAgo.value, 'd']
49+
})
50+
51+
const color = computed(() => {
52+
if (!props.colorize)
53+
return colorScale[0][1]
54+
55+
for (const [limit, color] of colorScale) {
56+
if (daysAgo.value < limit)
57+
return color
58+
}
59+
60+
return colorScale[colorScale.length - 1][1]
61+
})
62+
</script>
63+
64+
<template>
65+
<div
66+
v-if="ms"
67+
:class="color"
68+
class="px-0.4em py-0.2em line-height-none bg-gray:5 text-sm"
69+
>
70+
<span font-mono>{{ timeAgo[0] }}</span>
71+
<span op-fade text-xs ml0.5>{{ timeAgo[1] }}</span>
72+
</div>
73+
</template>

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import { bytesToHumanSize } from '../../utils/format'
4+
5+
const props = withDefaults(
6+
defineProps<{
7+
bytes?: number
8+
colorize?: boolean
9+
digits?: number
10+
percent?: boolean
11+
total?: number
12+
icon?: string
13+
percentRatio?: number
14+
}>(),
15+
{
16+
percent: true,
17+
colorize: true,
18+
digits: 2,
19+
percentRatio: 0.5,
20+
},
21+
)
22+
23+
const KB = 1024
24+
const MB = KB ** 2
25+
26+
const colorScale = [
27+
[80 * KB, 'color-scale-neutral'],
28+
[500 * KB, 'color-scale-low'],
29+
[1 * MB, 'color-scale-medium'],
30+
[10 * MB, 'color-scale-high'],
31+
[20 * MB, 'color-scale-critical'],
32+
] as const
33+
34+
const color = computed(() => {
35+
if (!props.colorize)
36+
return colorScale[0]
37+
const bytes = props.bytes || 0
38+
for (const [limit, color] of colorScale) {
39+
if (bytes < limit)
40+
return color
41+
}
42+
return colorScale[colorScale.length - 1][1]
43+
})
44+
45+
const ratio = computed(() => props.total ? (props.bytes || 0) * 100 / props.total : 0)
46+
47+
const formatted = computed(() => bytesToHumanSize(props.bytes || 0, props.digits))
48+
</script>
49+
50+
<template>
51+
<div v-if="bytes" :class="color" class="px-0.4em py-0.2em font-mono line-height-none bg-gray:5 dark:bg-gray:4 flex items-center">
52+
<div v-if="icon" :class="icon" class="mr-1" />
53+
{{ formatted[0] }}<span text-xs op75 ml-0.4>{{ formatted[1] }}</span>
54+
<slot name="after">
55+
<span v-if="percent && ratio > percentRatio" text-xs ml1 op-fade border="l base" pl1>{{ +(ratio.toFixed(1)) }}%</span>
56+
</slot>
57+
</div>
58+
</template>

packages/devtools/src/app/components/ui/FilepathItem.vue renamed to packages/devtools/src/app/components/display/FilepathItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const props = defineProps<{
99
override?: string
1010
}>()
1111
12-
const root = '/'
12+
const root = '/Users/antfu/i/vite-devtools/' // TODO: get from cwd
1313
const parsed = computed(() => (props.filepath && root)
1414
? parseReadablePath(props.filepath, root)
1515
: { path: props.filepath || '' })

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
4+
const props = withDefaults(
5+
defineProps<{
6+
number: number | string
7+
color?: string
8+
icon?: string
9+
prefix?: string
10+
suffix?: string
11+
format?: 'locale' | 'percent'
12+
}>(),
13+
{
14+
color: 'badge-color-gray op75',
15+
format: 'locale',
16+
},
17+
)
18+
19+
const formatted = computed(() => {
20+
if (props.format === 'percent') {
21+
return Number(props.number).toLocaleString(undefined, {
22+
style: 'percent',
23+
minimumFractionDigits: 2,
24+
maximumFractionDigits: 2,
25+
})
26+
}
27+
return Number(props.number).toLocaleString()
28+
})
29+
</script>
30+
31+
<template>
32+
<div :class="color" class="px-0.4em py-0.2em font-mono line-height-none flex items-center">
33+
<div v-if="icon" :class="icon" class="mr-1" />
34+
{{ prefix || '' }}{{ formatted }}{{ suffix || '' }}
35+
<slot name="after" />
36+
</div>
37+
</template>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
import { onMounted, ref } from 'vue'
3+
4+
const props = defineProps<{
5+
src: string
6+
}>()
7+
8+
const success = ref(false)
9+
10+
onMounted(() => {
11+
const img = new Image()
12+
img.src = props.src
13+
img.onload = () => {
14+
success.value = true
15+
}
16+
})
17+
</script>
18+
19+
<template>
20+
<img
21+
v-if="success"
22+
:src="props.src"
23+
@error="success = false"
24+
>
25+
</template>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
version?: string
4+
prefix?: string
5+
}>()
6+
</script>
7+
8+
<template>
9+
<span v-if="version" font-mono>{{ prefix || '' }}{{ version?.includes(':') ? version : `${prefix ? '' : 'v'}${version}` }}</span>
10+
</template>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
import { useRoute } from '#app/composables/router'
3+
import { onMounted, shallowRef } from 'vue'
4+
import { backend } from '../../../state/backend'
5+
6+
const params = useRoute().params
7+
8+
const modules = shallowRef<string[]>([])
9+
10+
onMounted(async () => {
11+
modules.value = await backend.value!.functions['vite:rolldown:get-module-list']({
12+
build: params.build,
13+
})
14+
})
15+
</script>
16+
17+
<template>
18+
<table>
19+
<tbody>
20+
<tr v-for="mod of modules" :key="mod">
21+
<td>
22+
<NuxtLink :to="{ path: `/build/${params.build}/transform`, query: { module: mod } }">
23+
<UiFilepathItem :filepath="mod.id" :subpath="true" />
24+
</NuxtLink>
25+
</td>
26+
</tr>
27+
</tbody>
28+
</table>
29+
</template>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
import { useRoute } from '#app/composables/router'
3+
4+
const params = useRoute().params
5+
const query = useRoute().query
6+
</script>
7+
8+
<template>
9+
<div>
10+
{{ params }}
11+
{{ query }}
12+
</div>
13+
</template>

0 commit comments

Comments
 (0)