chore: wip

Author: antfu

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+import { computed } from 'vue'
+import { getHashColorFromString } from '../../utils/color'
+
+const props = defineProps<{
+  cluster: string
+}>()
+
+const parsed = computed(() => {
+  const parts = props.cluster.split(':')
+  if (parts.length === 1) {
+    return {
+      namespace: null,
+      value: props.cluster,
+    }
+  }
+  return {
+    namespace: parts[0],
+    value: parts.slice(1).join(':'),
+  }
+})
+
+const color = computed(() => getHashColorFromString(props.cluster))
+
+const style = computed(() => ({
+  color: color.value,
+  borderColor: getHashColorFromString(props.cluster, 0.2),
+  backgroundColor: getHashColorFromString(props.cluster, 0.1),
+}))
+</script>
+
+<template>
+  <Tooltip>
+    <div flex="~ gap-1 items-center" text-sm pl1 pr2 rounded border-l-3 border :style>
+      <div v-if="parsed.namespace" text-xs op-fade>
+        {{ parsed.namespace }}:
+      </div>
+      <div rounded-full font-mono>
+        {{ parsed.value }}
+      </div>
+    </div>
+    <template #popper>
+      <div>
+        <div v-if="parsed.namespace === 'catalog'">
+          Introduced by packages marked as <code :style="{ color }">{{ parsed.value }}</code> catalog in pnpm-workspace.yaml
+        </div>
+        <div v-else>
+          This package is in the <code :style="{ color }">{{ cluster }}</code> cluster
+        </div>
+      </div>
+    </template>
+  </Tooltip>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    time?: number | Date
+    colorize?: boolean
+  }>(),
+  {
+    colorize: true,
+  },
+)
+
+const date = computed(() => props.time
+  ? new Date(props.time)
+  : undefined,
+)
+
+const formatter = Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+})
+const dateTitle = computed(() => date.value ? formatter.format(date.value) : null)
+</script>
+
+<template>
+  <DisplayDurationBadge
+    v-if="date"
+    v-tooltip="dateTitle"
+    :title="dateTitle"
+    :ms="Date.now() - +date"
+    :colorize="props.colorize"
+    mode="day"
+  />
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    ms?: number
+    colorize?: boolean
+    mode?: 'day' | 'hour'
+  }>(),
+  {
+    colorize: true,
+    mode: 'hour',
+  },
+)
+
+const colorScale = [
+  [180, 'color-scale-neutral'],
+  [365, 'color-scale-low'],
+  [365 * 3, 'color-scale-medium'],
+  [365 * 5, 'color-scale-high'],
+  [730 * 5, 'color-scale-critical'],
+] as const
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000
+
+const daysAgo = computed(() => {
+  if (props.ms == null)
+    return 0
+  return Math.floor(props.ms / MS_PER_DAY)
+})
+
+const timeAgo = computed(() => {
+  if (!props.ms)
+    return ['', '']
+  if (daysAgo.value < 1) {
+    if (props.mode === 'day') {
+      return ['today', '']
+    }
+    else {
+      const hoursAgo = Math.floor(props.ms / (1000 * 60 * 60))
+      return [hoursAgo, 'hr']
+    }
+  }
+  if (daysAgo.value > 365)
+    return [+(daysAgo.value / 365).toFixed(1), 'yr']
+  if (daysAgo.value > 30)
+    return [Math.round(daysAgo.value / 30), 'mo']
+  return [daysAgo.value, 'd']
+})
+
+const color = computed(() => {
+  if (!props.colorize)
+    return colorScale[0][1]
+
+  for (const [limit, color] of colorScale) {
+    if (daysAgo.value < limit)
+      return color
+  }
+
+  return colorScale[colorScale.length - 1][1]
+})
+</script>
+
+<template>
+  <div
+    v-if="ms"
+    :class="color"
+    class="px-0.4em py-0.2em line-height-none bg-gray:5 text-sm"
+  >
+    <span font-mono>{{ timeAgo[0] }}</span>
+    <span op-fade text-xs ml0.5>{{ timeAgo[1] }}</span>
+  </div>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { bytesToHumanSize } from '../../utils/format'
+
+const props = withDefaults(
+  defineProps<{
+    bytes?: number
+    colorize?: boolean
+    digits?: number
+    percent?: boolean
+    total?: number
+    icon?: string
+    percentRatio?: number
+  }>(),
+  {
+    percent: true,
+    colorize: true,
+    digits: 2,
+    percentRatio: 0.5,
+  },
+)
+
+const KB = 1024
+const MB = KB ** 2
+
+const colorScale = [
+  [80 * KB, 'color-scale-neutral'],
+  [500 * KB, 'color-scale-low'],
+  [1 * MB, 'color-scale-medium'],
+  [10 * MB, 'color-scale-high'],
+  [20 * MB, 'color-scale-critical'],
+] as const
+
+const color = computed(() => {
+  if (!props.colorize)
+    return colorScale[0]
+  const bytes = props.bytes || 0
+  for (const [limit, color] of colorScale) {
+    if (bytes < limit)
+      return color
+  }
+  return colorScale[colorScale.length - 1][1]
+})
+
+const ratio = computed(() => props.total ? (props.bytes || 0) * 100 / props.total : 0)
+
+const formatted = computed(() => bytesToHumanSize(props.bytes || 0, props.digits))
+</script>
+
+<template>
+  <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">
+    <div v-if="icon" :class="icon" class="mr-1" />
+    {{ formatted[0] }}<span text-xs op75 ml-0.4>{{ formatted[1] }}</span>
+    <slot name="after">
+      <span v-if="percent && ratio > percentRatio" text-xs ml1 op-fade border="l base" pl1>{{ +(ratio.toFixed(1)) }}%</span>
+    </slot>
+  </div>
+</template>

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

@@ -9,7 +9,7 @@ const props = defineProps<{
   override?: string
 }>()
 
-const root = '/'
+const root = '/Users/antfu/i/vite-devtools/' // TODO: get from cwd
 const parsed = computed(() => (props.filepath && root)
   ? parseReadablePath(props.filepath, root)
   : { path: props.filepath || '' })

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    number: number | string
+    color?: string
+    icon?: string
+    prefix?: string
+    suffix?: string
+    format?: 'locale' | 'percent'
+  }>(),
+  {
+    color: 'badge-color-gray op75',
+    format: 'locale',
+  },
+)
+
+const formatted = computed(() => {
+  if (props.format === 'percent') {
+    return Number(props.number).toLocaleString(undefined, {
+      style: 'percent',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })
+  }
+  return Number(props.number).toLocaleString()
+})
+</script>
+
+<template>
+  <div :class="color" class="px-0.4em py-0.2em font-mono line-height-none flex items-center">
+    <div v-if="icon" :class="icon" class="mr-1" />
+    {{ prefix || '' }}{{ formatted }}{{ suffix || '' }}
+    <slot name="after" />
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  src: string
+}>()
+
+const success = ref(false)
+
+onMounted(() => {
+  const img = new Image()
+  img.src = props.src
+  img.onload = () => {
+    success.value = true
+  }
+})
+</script>
+
+<template>
+  <img
+    v-if="success"
+    :src="props.src"
+    @error="success = false"
+  >
+</template>

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

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{
+  version?: string
+  prefix?: string
+}>()
+</script>
+
+<template>
+  <span v-if="version" font-mono>{{ prefix || '' }}{{ version?.includes(':') ? version : `${prefix ? '' : 'v'}${version}` }}</span>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useRoute } from '#app/composables/router'
+import { onMounted, shallowRef } from 'vue'
+import { backend } from '../../../state/backend'
+
+const params = useRoute().params
+
+const modules = shallowRef<string[]>([])
+
+onMounted(async () => {
+  modules.value = await backend.value!.functions['vite:rolldown:get-module-list']({
+    build: params.build,
+  })
+})
+</script>
+
+<template>
+  <table>
+    <tbody>
+      <tr v-for="mod of modules" :key="mod">
+        <td>
+          <NuxtLink :to="{ path: `/build/${params.build}/transform`, query: { module: mod } }">
+            <UiFilepathItem :filepath="mod.id" :subpath="true" />
+          </NuxtLink>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useRoute } from '#app/composables/router'
+
+const params = useRoute().params
+const query = useRoute().query
+</script>
+
+<template>
+  <div>
+    {{ params }}
+    {{ query }}
+  </div>
+</template>