refactor: migrate shared components to ui package

alias.ts

@@ -23,6 +23,7 @@ export const alias = {
   '@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),
   '@vitejs/devtools-ui/components': r('ui/src/components'),
   '@vitejs/devtools-ui/composables': r('ui/src/composables'),
+  '@vitejs/devtools-ui/utils': r('ui/src/utils'),
 }
 
 // update tsconfig.base.json

packages/ui/package.json

@@ -35,13 +35,18 @@
     "./composables/*": {
       "types": "./src/composables/*.ts",
       "import": "./src/composables/*.ts"
+    },
+    "./utils/*": {
+      "types": "./src/utils/*.ts",
+      "import": "./src/utils/*.ts"
     }
   },
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "peerDependencies": {
     "@vueuse/core": "*",
     "unocss": "*",
-    "vue": "*"
+    "vue": "*",
+    "vue-virtual-scroller": ">=2.0.0-beta.0"
   }
 }

packages/vite/src/app/components/display/Badge.vue → packages/ui/src/components/DisplayBadge.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import {
   getHashColorFromString,
   getHsla,
-} from '~/utils/color'
+} from '../utils/color'
 
 const props = withDefaults(
   defineProps<{

packages/vite/src/app/components/display/Duration.vue → packages/ui/src/components/DisplayDuration.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { formatDuration } from '~/utils/format'
+import { formatDuration } from '../utils/format'
+import DisplayNumberWithUnit from './DisplayNumberWithUnit.vue'
 
 const props = withDefaults(
   defineProps<{

packages/ui/src/utils/__tests__/color.test.ts

@@ -0,0 +1,36 @@
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { getHashColorFromString, getHsla } from '../color'
+
+describe('getHashColorFromString', () => {
+  it('should get the same color with the same string', () => {
+    expect(getHashColorFromString('Vite')).toBe(getHashColorFromString('Vite'))
+  })
+  it('should get different colors with different strings', () => {
+    expect(getHashColorFromString('Vite')).not.toBe(getHashColorFromString('DevTools'))
+  })
+})
+
+describe('getHsla', () => {
+  beforeEach(() => {
+    isDark.value = false
+  })
+
+  it('light mode with default opacity', () => {
+    expect(getHsla(180)).toBe('hsla(180, 65%, 40%, 1)')
+  })
+
+  it('light mode with custom opacity', () => {
+    expect(getHsla(180, 0.5)).toBe('hsla(180, 65%, 40%, 0.5)')
+  })
+
+  it('dark mode with default opacity', () => {
+    isDark.value = true
+    expect(getHsla(180)).toBe('hsla(180, 50%, 60%, 1)')
+  })
+
+  it('dark mode with custom opacity', () => {
+    isDark.value = true
+    expect(getHsla(180, 0.8)).toBe('hsla(180, 50%, 60%, 0.8)')
+  })
+})

packages/ui/src/utils/color.ts

@@ -0,0 +1,21 @@
+import { isDark } from '../composables/dark'
+
+export function getHashColorFromString(
+  name: string,
+  opacity: number | string = 1,
+) {
+  let hash = 0
+  for (let i = 0; i < name.length; i++)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  const h = hash % 360
+  return getHsla(h, opacity)
+}
+
+export function getHsla(
+  hue: number,
+  opacity: number | string = 1,
+) {
+  const saturation = isDark.value ? 50 : 65
+  const lightness = isDark.value ? 60 : 40
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+}

packages/ui/src/utils/format.ts

@@ -0,0 +1,19 @@
+export function formatDuration(ms: number | null | undefined): string[]
+export function formatDuration(ms: number | null | undefined, stringify: true): string
+export function formatDuration(ms: number | null | undefined, stringify: false): string[]
+export function formatDuration(ms: number | null | undefined, stringify?: boolean): string | string[] {
+  let duration = []
+
+  if (ms == null)
+    duration = ['', '-']
+  else if (ms < 1)
+    duration = ['<1', 'ms']
+  else if (ms < 1000)
+    duration = [ms.toFixed(0), 'ms']
+  else if (ms < 1000 * 60)
+    duration = [(ms / 1000).toFixed(1), 's']
+  else
+    duration = [(ms / 1000 / 60).toFixed(1), 'min']
+
+  return stringify ? duration.join(' ') : duration
+}

packages/vite/src/app/components/assets/BaseInfo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   asset: RolldownAssetInfo

packages/vite/src/app/components/assets/List.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 defineProps<{
   assets: RolldownAssetInfo[]

packages/vite/src/app/components/chart/ModuleFlamegraph.vue

@@ -7,6 +7,7 @@ import type {
   RolldownResolveInfo,
   SessionContext,
 } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { Flamegraph, normalizeTreeNode } from 'nanovis'
 import { computed, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { normalizeTimestamp } from '~/utils/format'

packages/vite/src/app/components/chunks/BaseInfo.vue

@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo } from '~~/shared/types/data'
 import { useRoute } from '#app/composables/router'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{

packages/vite/src/app/components/chunks/FlatList.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 withDefaults(defineProps<{
   chunks: Array<RolldownChunkInfo & { id: string }>

packages/vite/src/app/components/chunks/Graph.vue

@@ -3,6 +3,7 @@ import type { ChunkImport } from '@rolldown/debug'
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
 import { useRoute } from '#app/composables/router'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed, nextTick, unref } from 'vue'
 import { createModuleGraph } from '~/composables/module-graph'
 

packages/vite/src/app/components/chunks/Imports.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { RolldownChunkImport } from '~~/shared/types/data'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   imports: RolldownChunkImport[]

packages/vite/src/app/components/data/AssetDetails.vue

@@ -2,6 +2,9 @@
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { settings } from '~~/app/state/settings'

packages/vite/src/app/components/data/AssetDetailsLoader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'

packages/vite/src/app/components/data/ChunkDetailsLoader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 

packages/vite/src/app/components/data/ModuleDetailsLoader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedAsync } from '@vueuse/core'
 import { nextTick, ref, watchEffect } from 'vue'

packages/vite/src/app/components/data/PackageDetailsLoader.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'

packages/vite/src/app/components/data/PathSelector.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts"  generic="T extends { id:string, imports: Record<string, unknown>[] }">
 import type { SessionContext } from '~~/shared/types'
 import type { GraphPathSelector } from '~/composables/graph-path-selector'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { computed, watch } from 'vue'
 import { useGraphPathSelector } from '~/composables/graph-path-selector'
 

packages/vite/src/app/components/data/PluginDetailsLoader.vue

@@ -4,14 +4,18 @@ import type { PluginBuildInfo, SessionContext } from '~~/shared/types'
 import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { useAsyncState, useMouse } from '@vueuse/core'
 import { normalizeTreeNode, Sunburst } from 'nanovis'
 import { computed, reactive, watch } from 'vue'
 import { settings } from '~~/app/state/settings'
 import { useChartGraph } from '~/composables/chart'
 import { parseReadablePath } from '~/utils/filepath'
-import { formatDuration, normalizeTimestamp } from '~/utils/format'
+import { normalizeTimestamp } from '~/utils/format'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{

packages/vite/src/app/components/data/PluginDetailsTable.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
 import type { FilterMatchRule } from '~/utils/icon'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { useCycleList } from '@vueuse/core'
 import { Menu as VMenu } from 'floating-vue'
 import { computed, ref } from 'vue'

packages/vite/src/app/components/data/RawEventsTable.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { RolldownEvent } from '~~/node/rolldown/events-manager'
 import type { SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
 import { Dropdown as VDropdown } from 'floating-vue'
 
 type FIELDS = 'module_id' | 'action' | 'content' | 'timestamp' | 'event_id' | 'plugin_name' | '*'

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { getHashColorFromString } from '@vitejs/devtools-ui/utils/color'
 import { Tooltip } from 'floating-vue'
 import { computed } from 'vue'
-import { getHashColorFromString } from '~/utils/color'
 
 const props = defineProps<{
   cluster: string

packages/vite/src/app/components/display/ExpandableContainer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T">
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{

packages/vite/src/app/components/display/ModuleId.vue

@@ -3,6 +3,7 @@ import type { ModuleImport } from '@rolldown/debug'
 import type { SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { Tooltip } from 'floating-vue'
 import { relative } from 'pathe'
 import { computed } from 'vue'

packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
 import { computed } from 'vue'
 import { settings } from '~~/app/state/settings'
 import PluginName from '../display/PluginName.vue'

packages/vite/src/app/components/flowmap/NodeAssetInfo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   item: RolldownAssetInfo

packages/vite/src/app/components/flowmap/NodeChunkInfo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   item: RolldownChunkInfo

packages/vite/src/app/components/flowmap/NodeModuleInfo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { computed } from 'vue'
 import { isFlowmapSwapping } from '~/state/flowmap'
 

packages/vite/src/app/components/flowmap/NodePluginInfo.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { formatDuration } from '~/utils/format'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 
 defineProps<{
   modules: number

packages/vite/src/app/components/flowmap/PluginFlow.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ClientSettings } from '~~/app/state/settings'
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { useCycleList, useToggle } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { settings } from '~~/app/state/settings'

packages/vite/src/app/components/modules/BuildMetrics.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { ModuleBuildMetrics } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { computed } from 'vue'
-import { formatDuration } from '~/utils/format'
 
 const props = defineProps<{
   metrics: ModuleBuildMetrics

packages/vite/src/app/components/modules/DetailedList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{

packages/vite/src/app/components/modules/FlatList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 withDefaults(defineProps<{
   session: SessionContext

packages/vite/src/app/components/packages/Importers.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types/data'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{

packages/vite/src/app/components/packages/Table.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import { useCycleList } from '@vueuse/core'
 import { Tooltip, Menu as VMenu } from 'floating-vue'
 import { settings } from '~~/app/state/settings'

packages/vite/src/app/components/panel/SessionSelector.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { BuildInfo } from '~~/node/rolldown/logs-manager'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
 import { computed } from 'vue'
 import { parseReadablePath } from '~/utils/filepath'