chore: update

Author: webfansplz

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

@@ -3,6 +3,7 @@ export interface CompareSessionSummaryItem {
   label: string
   value: string
   icon: string
+  tone?: 'increase' | 'decrease'
 }
 
 defineProps<{
@@ -37,7 +38,10 @@ defineProps<{
           <div text-xs op50>
             {{ summary.label }}
           </div>
-          <div font-mono font-600>
+          <div
+            font-mono font-600
+            :class="summary.tone === 'increase' ? 'text-red-500' : summary.tone === 'decrease' ? 'text-green-500' : undefined"
+          >
             {{ summary.value }}
           </div>
         </div>

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

@@ -8,23 +8,19 @@ interface SingleSideDiffStat {
 }
 
 withDefaults(defineProps<{
-  status: 'added' | 'removed'
   sessionLabel: string
   title: string
   titleMeta?: string
-  value: number
   delta: number
   format: 'bytes' | 'duration' | 'number'
   subtitle?: string
   badges?: string[]
   stats?: SingleSideDiffStat[]
-  ratioText?: string
 }>(), {
   subtitle: '',
   titleMeta: '',
   badges: () => [],
   stats: () => [],
-  ratioText: '',
 })
 </script>
 
@@ -48,15 +44,7 @@ withDefaults(defineProps<{
 
     <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" />
-      <span v-if="stats.length" flex="~ items-baseline gap-1" op55>
-        <span>(</span>
-        <template v-for="(stat, index) of stats" :key="stat.label">
-          <span v-if="index" op70>|</span>
-          <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
-          <span>{{ stat.label }}</span>
-        </template>
-        <span>)</span>
-      </span>
+      <CompareStatsStrip :stats="stats" />
     </div>
   </div>
 </template>

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SessionCompareChangeStatus } from '~~/shared/types'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
@@ -11,7 +10,6 @@ interface SplitDiffStat {
 }
 
 const props = withDefaults(defineProps<{
-  status: SessionCompareChangeStatus
   previousTitle?: string
   currentTitle?: string
   previousTitleMeta?: string
@@ -71,18 +69,11 @@ const ratioClass = computed(() => {
               {{ previousSubtitle }}
             </div>
           </div>
-          <div flex="~ items-center gap-2 wrap">
-            <DisplayBadge v-for="badge of previousBadges" :key="badge" :text="badge" />
-            <span v-if="previousStats.length" flex="~ items-baseline gap-1" text-xs op55>
-              <span>(</span>
-              <template v-for="(stat, index) of previousStats" :key="stat.label">
-                <span v-if="index" op70>|</span>
-                <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
-                <span>{{ stat.label }}</span>
-              </template>
-              <span>)</span>
-            </span>
-            <span flex-1 />
+          <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>
@@ -108,18 +99,11 @@ const ratioClass = computed(() => {
               {{ currentSubtitle }}
             </div>
           </div>
-          <div flex="~ items-center gap-2 wrap">
-            <DisplayBadge v-for="badge of currentBadges" :key="badge" :text="badge" />
-            <span v-if="currentStats.length" flex="~ items-baseline gap-1" text-xs op55>
-              <span>(</span>
-              <template v-for="(stat, index) of currentStats" :key="stat.label">
-                <span v-if="index" op70>|</span>
-                <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
-                <span>{{ stat.label }}</span>
-              </template>
-              <span>)</span>
-            </span>
-            <span flex-1 />
+          <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>

packages/rolldown/src/app/components/compare/SingleSideRow.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>