feat(rolldown): session compare panel

packages/rolldown/src/app/components/compare/DeltaValue.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { bytesToHumanSize } from '~/utils/format'
+
+const props = withDefaults(defineProps<{
+  value: number
+  format?: 'bytes' | 'duration' | 'number'
+  signed?: boolean
+}>(), {
+  format: 'number',
+  signed: false,
+})
+
+const sign = computed(() => {
+  if (!props.signed || props.value === 0)
+    return ''
+  return props.value > 0 ? '+' : '-'
+})
+
+const colorClass = computed(() => {
+  if (!props.signed || props.value === 0)
+    return 'text-gray-500'
+  return props.value > 0 ? 'text-red-500' : 'text-green-500'
+})
+
+const formatted = computed(() => {
+  const value = props.signed ? Math.abs(props.value) : props.value
+
+  if (props.format === 'bytes') {
+    if (value === 0) {
+      return {
+        amount: 0,
+        unit: 'B',
+      }
+    }
+    const [amount, unit] = bytesToHumanSize(value)
+    return { amount, unit }
+  }
+
+  if (props.format === 'duration') {
+    if (value >= 1000) {
+      return {
+        amount: +(value / 1000).toFixed(2),
+        unit: 's',
+      }
+    }
+    return {
+      amount: Math.round(value),
+      unit: 'ms',
+    }
+  }
+
+  return {
+    amount: value.toLocaleString(),
+    unit: '',
+  }
+})
+</script>
+
+<template>
+  <span font-mono ws-nowrap :class="colorClass">
+    {{ sign }}{{ formatted.amount }}<span v-if="formatted.unit" text-xs op75 ml-0.5>{{ formatted.unit }}</span>
+  </span>
+</template>

packages/rolldown/src/app/components/compare/SessionMeta.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
+export interface CompareSessionSummaryItem {
+  label: string
+  value: string
+  icon: string
+  tone?: 'increase' | 'decrease'
+}
+
 defineProps<{
   sessions: Array<{ id: string, createdAt: Date, title: string }>
+  summaries?: CompareSessionSummaryItem[][]
 }>()
 </script>
 
 <template>
   <div flex="~ gap5" w-full border="b base" pb3>
-    <div v-for="(item) of sessions" :key="item.id" flex-1 border="~ base rounded" p4 grid="~ cols-[max-content_140px_2fr] max-lg:cols-[max-content_80px_2fr] gap-2 items-center">
+    <div v-for="(item, index) of sessions" :key="item.id" flex-1 border="~ base rounded" p4 grid="~ cols-[max-content_140px_2fr] max-lg:cols-[max-content_80px_2fr] gap-2 items-center">
       <!-- session meta -->
       <div class="i-ph-hash-duotone" />
       <div>
@@ -23,6 +31,21 @@ defineProps<{
       <div font-mono>
         <time :datetime="item.createdAt.toISOString()">{{ item.createdAt.toLocaleString() }}</time>
       </div>
+
+      <div v-if="summaries?.[index]?.length" col-span-3 border="t base" mt2 pt3 flex="~ items-center gap-4 wrap">
+        <div v-for="summary of summaries?.[index] || []" :key="summary.label" flex="~ items-center gap-2">
+          <div :class="summary.icon" op50 />
+          <div text-xs op50>
+            {{ summary.label }}
+          </div>
+          <div
+            font-mono font-600
+            :class="summary.tone === 'increase' ? 'text-red-500' : summary.tone === 'decrease' ? 'text-green-500' : undefined"
+          >
+            {{ summary.value }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

packages/rolldown/src/app/components/compare/SingleSideRow.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+
+interface SingleSideDiffStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+}
+
+withDefaults(defineProps<{
+  sessionLabel: string
+  title: string
+  titleMeta?: string
+  delta: number
+  format: 'bytes' | 'duration' | 'number'
+  subtitle?: string
+  badges?: string[]
+  stats?: SingleSideDiffStat[]
+}>(), {
+  subtitle: '',
+  titleMeta: '',
+  badges: () => [],
+  stats: () => [],
+})
+</script>
+
+<template>
+  <div border="~ base rounded" p4 flex="~ col gap-3" hover="bg-active">
+    <div flex="~ items-start gap-3">
+      <div min-w-0 flex-1>
+        <div text-xs op50 mb1>
+          {{ sessionLabel }}
+        </div>
+        <div flex="~ items-baseline gap-2" min-w-0 font-mono :title="titleMeta ? `${title} (${titleMeta})` : title">
+          <span truncate>{{ title }}</span>
+          <span v-if="titleMeta" flex-none op50>({{ titleMeta }})</span>
+        </div>
+        <div v-if="subtitle" truncate text-xs op55 mt1 :title="subtitle">
+          {{ subtitle }}
+        </div>
+      </div>
+      <CompareDeltaValue :value="delta" :format="format" signed />
+    </div>
+
+    <div v-if="badges.length || stats.length" flex="~ items-center gap-2 wrap" text-xs>
+      <DisplayBadge v-for="badge of badges" :key="badge" :text="badge" />
+      <CompareStatsStrip :stats="stats" />
+    </div>
+  </div>
+</template>

packages/rolldown/src/app/components/compare/SplitRow.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import { computed } from 'vue'
+
+interface SplitDiffStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+  hidden?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  previousTitle?: string
+  currentTitle?: string
+  previousTitleMeta?: string
+  currentTitleMeta?: string
+  previousSubtitle?: string
+  currentSubtitle?: string
+  previousStats?: SplitDiffStat[]
+  currentStats?: SplitDiffStat[]
+  previousBadges?: string[]
+  currentBadges?: string[]
+  previous: number
+  current: number
+  delta: number
+  format: 'bytes' | 'duration' | 'number'
+  ratioText?: string
+}>(), {
+  previousStats: () => [],
+  currentStats: () => [],
+  previousBadges: () => [],
+  currentBadges: () => [],
+  ratioText: '',
+})
+
+const ratioClass = computed(() => {
+  if (props.delta > 0)
+    return 'text-red-500'
+  if (props.delta < 0)
+    return 'text-green-500'
+  return 'text-gray-500'
+})
+</script>
+
+<template>
+  <div border="~ base rounded" of-hidden hover="bg-active">
+    <div border="b base" bg-base p3 flex="~ items-center justify-end">
+      <div flex="~ items-center gap-2 wrap justify-end">
+        <CompareDeltaValue :value="delta" :format="format" signed />
+        <span v-if="ratioText" rounded bg-active px2 py0.5 font-mono text-xs :class="ratioClass">
+          {{ ratioText }}
+        </span>
+      </div>
+    </div>
+
+    <div grid="~ cols-2" min-h-30>
+      <div p4 min-w-0 flex="~ col gap-3 justify-between" :class="{ op35: !previousTitle }">
+        <template v-if="previousTitle">
+          <div min-w-0>
+            <div flex="~ items-center gap-2" text-xs op50 mb2>
+              <span i-ph-clock-counter-clockwise-duotone />
+              Session A
+            </div>
+            <div flex="~ items-baseline gap-2" min-w-0 font-mono font-600 :title="previousTitleMeta ? `${previousTitle} (${previousTitleMeta})` : previousTitle">
+              <span truncate>{{ previousTitle }}</span>
+              <span v-if="previousTitleMeta" flex-none font-400 op50>({{ previousTitleMeta }})</span>
+            </div>
+            <div v-if="previousSubtitle" truncate text-xs op50 mt1 :title="previousSubtitle">
+              {{ previousSubtitle }}
+            </div>
+          </div>
+          <div flex="~ items-end gap-3 justify-between">
+            <div min-w-0 flex="~ items-center gap-2 wrap">
+              <DisplayBadge v-for="badge of previousBadges" :key="badge" :text="badge" />
+              <CompareStatsStrip :stats="previousStats" />
+            </div>
+            <span text-lg font-600>
+              <CompareDeltaValue :value="previous" :format="format" />
+            </span>
+          </div>
+        </template>
+        <div v-else h-full min-h-16 flex="~ items-center justify-center" text-sm italic op60>
+          Not present
+        </div>
+      </div>
+
+      <div border="l base" p4 min-w-0 flex="~ col gap-3 justify-between" :class="{ op35: !currentTitle }">
+        <template v-if="currentTitle">
+          <div min-w-0>
+            <div flex="~ items-center gap-2" text-xs op50 mb2>
+              <span i-ph-clock-duotone />
+              Session B
+            </div>
+            <div flex="~ items-baseline gap-2" min-w-0 font-mono font-600 :title="currentTitleMeta ? `${currentTitle} (${currentTitleMeta})` : currentTitle">
+              <span truncate>{{ currentTitle }}</span>
+              <span v-if="currentTitleMeta" flex-none font-400 op50>({{ currentTitleMeta }})</span>
+            </div>
+            <div v-if="currentSubtitle" truncate text-xs op50 mt1 :title="currentSubtitle">
+              {{ currentSubtitle }}
+            </div>
+          </div>
+          <div flex="~ items-end gap-3 justify-between">
+            <div min-w-0 flex="~ items-center gap-2 wrap">
+              <DisplayBadge v-for="badge of currentBadges" :key="badge" :text="badge" />
+              <CompareStatsStrip :stats="currentStats" />
+            </div>
+            <span text-lg font-600>
+              <CompareDeltaValue :value="current" :format="format" />
+            </span>
+          </div>
+        </template>
+        <div v-else h-full min-h-16 flex="~ items-center justify-center" text-sm italic op60>
+          Not present
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/rolldown/src/app/components/compare/StatsStrip.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface CompareStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+  hidden?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  stats?: CompareStat[]
+}>(), {
+  stats: () => [],
+})
+
+const visibleStats = computed(() => props.stats.filter(stat => !stat.hidden))
+</script>
+
+<template>
+  <div v-if="visibleStats.length" flex="~ items-baseline gap-1.5 wrap" min-w-0 text-xs>
+    <template v-for="(stat, index) of visibleStats" :key="stat.label">
+      <span v-if="index" op35>&middot;</span>
+      <span inline-flex items-baseline gap-1>
+        <span
+          font-mono font-600
+          :class="stat.tone === 'increase' ? 'text-red-500' : stat.tone === 'decrease' ? 'text-green-500' : 'op85'"
+        >
+          {{ stat.value }}
+        </span>
+        <span op55>{{ stat.label }}</span>
+      </span>
+    </template>
+  </div>
+</template>