From 86b71153f95ec7e732e053e0b669b2605b60d696 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 14 Aug 2025 23:33:43 +0800
Subject: [PATCH] feat: add virtual list for data list

---
 packages/devtools-vite/package.json           |  1 +
 .../src/app/components/assets/List.vue        | 17 +++--
 .../src/app/components/assets/ListItem.vue    |  2 +-
 .../src/app/components/data/VirtualList.vue   | 36 ++++++++++
 .../app/components/modules/DetailedList.vue   | 69 ++++++++++---------
 .../src/app/components/modules/FlatList.vue   | 25 ++++---
 .../src/app/components/plugins/FlatList.vue   | 25 ++++---
 pnpm-lock.yaml                                | 32 +++++++++
 pnpm-workspace.yaml                           |  1 +
 9 files changed, 150 insertions(+), 58 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/data/VirtualList.vue

diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index d41793dc..c67e0b4f 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -58,6 +58,7 @@
     "tinyglobby": "catalog:deps",
     "unconfig": "catalog:deps",
     "unstorage": "catalog:deps",
+    "vue-virtual-scroller": "catalog:frontend",
     "ws": "catalog:deps"
   },
   "devDependencies": {
diff --git a/packages/devtools-vite/src/app/components/assets/List.vue b/packages/devtools-vite/src/app/components/assets/List.vue
index 1705e935..526abbca 100644
--- a/packages/devtools-vite/src/app/components/assets/List.vue
+++ b/packages/devtools-vite/src/app/components/assets/List.vue
@@ -8,12 +8,15 @@ defineProps<{
 
 <template>
   <div p4>
-    <div flex="~ col gap-2">
-      <AssetsListItem
-        v-for="asset in assets"
-        :key="asset.filename"
-        :asset="asset"
-      />
-    </div>
+    <DataVirtualList
+      :items="assets"
+      key-prop="filename"
+    >
+      <template #default="{ item }">
+        <div flex pb2>
+          <AssetsListItem :asset="item" />
+        </div>
+      </template>
+    </DataVirtualList>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/components/assets/ListItem.vue b/packages/devtools-vite/src/app/components/assets/ListItem.vue
index f4dba43f..e49bd521 100644
--- a/packages/devtools-vite/src/app/components/assets/ListItem.vue
+++ b/packages/devtools-vite/src/app/components/assets/ListItem.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <NuxtLink
     :to="{ query: { asset: asset.filename } }"
-    font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
+    w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
   >
     <div flex="~ gap-1">
       <DisplayFileIcon :filename="asset.filename" />
diff --git a/packages/devtools-vite/src/app/components/data/VirtualList.vue b/packages/devtools-vite/src/app/components/data/VirtualList.vue
new file mode 100644
index 00000000..33c2a4b5
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/data/VirtualList.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts" generic="T">
+// @ts-expect-error missing types
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+defineProps<{
+  items: T[]
+  keyProp: keyof T
+}>()
+
+defineSlots<{
+  default: (props: {
+    item: T
+    index: number
+    active?: boolean
+  }) => void
+}>()
+</script>
+
+<template>
+  <DynamicScroller
+    v-slot="{ item, active, index }"
+    :items="items"
+    :min-item-size="30"
+    :key-field="keyProp"
+    page-mode
+  >
+    <DynamicScrollerItem
+      :item="item"
+      :active="active"
+      :data-index="index"
+    >
+      <slot v-bind="{ key: item[keyProp] }" :item="item" :index="index" :active="active" />
+    </DynamicScrollerItem>
+  </DynamicScroller>
+</template>
diff --git a/packages/devtools-vite/src/app/components/modules/DetailedList.vue b/packages/devtools-vite/src/app/components/modules/DetailedList.vue
index 5cb2e842..77aeb51d 100644
--- a/packages/devtools-vite/src/app/components/modules/DetailedList.vue
+++ b/packages/devtools-vite/src/app/components/modules/DetailedList.vue
@@ -19,39 +19,44 @@ const filteredTransformsMap = computed(() => {
 
 <template>
   <div flex="~ col gap-2" p4>
-    <template v-for="mod of modules" :key="mod">
-      <div>
-        <DisplayModuleId
-          :id="mod.id"
-          :session
-          hover="bg-active" block px2 p1
-          border="~ base rounded"
-          :link="true"
-        >
-          <template #detail>
-            <div flex="~ gap-1 wrap" text-xs>
-              <ul flex="~ auto text-xs wrap">
-                <template v-for="(p, i) of filteredTransformsMap.get(mod.id)" :key="i">
-                  <li v-if="p.source_code_size !== p.transformed_code_size && p.transformed_code_size" flex="~ items-center">
-                    <DisplayPluginName
-                      :name="p.plugin_name"
-                      class="font-mono ws-nowrap op-50"
-                    />
-                    <span v-if="i !== filteredTransformsMap.get(mod.id)!.length - 1" op20>|</span>
-                  </li>
-                </template>
-              </ul>
+    <DataVirtualList
+      :items="modules"
+      key-prop="id"
+    >
+      <template #default="{ item }">
+        <div flex pb2>
+          <DisplayModuleId
+            :id="item.id"
+            :session
+            hover="bg-active" block px2 p1 w-full
+            border="~ base rounded"
+            :link="true"
+          >
+            <template #detail>
+              <div flex="~ gap-1 wrap" text-xs>
+                <ul flex="~ auto text-xs wrap">
+                  <template v-for="(p, i) of filteredTransformsMap.get(item.id)" :key="i">
+                    <li v-if="p.source_code_size !== p.transformed_code_size && p.transformed_code_size" flex="~ items-center">
+                      <DisplayPluginName
+                        :name="p.plugin_name"
+                        class="font-mono ws-nowrap op-50"
+                      />
+                      <span v-if="i !== filteredTransformsMap.get(item.id)!.length - 1" op20>|</span>
+                    </li>
+                  </template>
+                </ul>
 
-              <div flex="~ auto gap-1" of-hidden />
-              <div flex="~ none gap-1 wrap justify-end">
-                <span>
-                  <ModulesBuildMetrics v-if="mod.buildMetrics" :metrics="mod.buildMetrics" />
-                </span>
+                <div flex="~ auto gap-1" of-hidden />
+                <div flex="~ none gap-1 wrap justify-end">
+                  <span>
+                    <ModulesBuildMetrics v-if="item.buildMetrics" :metrics="item.buildMetrics" />
+                  </span>
+                </div>
               </div>
-            </div>
-          </template>
-        </DisplayModuleId>
-      </div>
-    </template>
+            </template>
+          </DisplayModuleId>
+        </div>
+      </template>
+    </DataVirtualList>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/components/modules/FlatList.vue b/packages/devtools-vite/src/app/components/modules/FlatList.vue
index 0d4fc94f..41727331 100644
--- a/packages/devtools-vite/src/app/components/modules/FlatList.vue
+++ b/packages/devtools-vite/src/app/components/modules/FlatList.vue
@@ -9,14 +9,21 @@ defineProps<{
 
 <template>
   <div flex="~ col gap-2" p4>
-    <template v-for="mod of modules" :key="mod">
-      <DisplayModuleId
-        :id="mod.id"
-        :session
-        hover="bg-active" block px2 p1
-        border="~ base rounded"
-        :link="true"
-      />
-    </template>
+    <DataVirtualList
+      :items="modules"
+      key-prop="id"
+    >
+      <template #default="{ item }">
+        <div flex pb2>
+          <DisplayModuleId
+            :id="item.id"
+            :session
+            hover="bg-active" block px2 p1 w-full
+            border="~ base rounded"
+            :link="true"
+          />
+        </div>
+      </template>
+    </DataVirtualList>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/components/plugins/FlatList.vue b/packages/devtools-vite/src/app/components/plugins/FlatList.vue
index d7d793a2..c4fff0ed 100644
--- a/packages/devtools-vite/src/app/components/plugins/FlatList.vue
+++ b/packages/devtools-vite/src/app/components/plugins/FlatList.vue
@@ -11,15 +11,22 @@ const route = useRoute()
 
 <template>
   <div flex="~ col gap-2" p4>
-    <template v-for="plugin of plugins" :key="plugin.id">
-      <NuxtLink :to="{ path: route.path, query: { plugin: plugin.plugin_id } }" font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
-        <div w-8 text-right text-xs op50>
-          #{{ plugin.plugin_id }}
+    <DataVirtualList
+      :items="plugins"
+      key-prop="plugin_id"
+    >
+      <template #default="{ item }">
+        <div flex pb2>
+          <NuxtLink :to="{ path: route.path, query: { plugin: item.plugin_id } }" font-mono border="~ rounded base" w-full px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
+            <div w-8 text-right text-xs op50>
+              #{{ item.plugin_id }}
+            </div>
+            <span overflow-hidden text-ellipsis break-all line-clamp-2>
+              <DisplayPluginName :name="item.name" />
+            </span>
+          </NuxtLink>
         </div>
-        <span overflow-hidden text-ellipsis break-all line-clamp-2>
-          <DisplayPluginName :name="plugin.name" />
-        </span>
-      </NuxtLink>
-    </template>
+      </template>
+    </DataVirtualList>
   </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8e1089f..03ac9ff3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,6 +171,9 @@ catalogs:
     vue:
       specifier: ^3.5.18
       version: 3.5.18
+    vue-virtual-scroller:
+      specifier: ^2.0.0-beta.8
+      version: 2.0.0-beta.8
   icons:
     '@iconify-json/carbon':
       specifier: ^1.2.13
@@ -476,6 +479,9 @@ importers:
       unstorage:
         specifier: catalog:deps
         version: 1.16.1(@netlify/blobs@9.1.2)(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.6.1)
+      vue-virtual-scroller:
+        specifier: catalog:frontend
+        version: 2.0.0-beta.8(vue@3.5.18(typescript@5.9.2))
       ws:
         specifier: catalog:deps
         version: 8.18.3
@@ -4898,6 +4904,9 @@ packages:
     resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
     engines: {node: '>= 18'}
 
+  mitt@2.1.0:
+    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
@@ -6591,6 +6600,11 @@ packages:
   vue-flow-layout@0.2.0:
     resolution: {integrity: sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q==}
 
+  vue-observe-visibility@2.0.0-alpha.1:
+    resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue-resize@2.0.0-alpha.1:
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
     peerDependencies:
@@ -6607,6 +6621,11 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue-virtual-scroller@2.0.0-beta.8:
+    resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue@3.5.18:
     resolution: {integrity: sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==}
     peerDependencies:
@@ -11763,6 +11782,8 @@ snapshots:
     dependencies:
       minipass: 7.1.2
 
+  mitt@2.1.0: {}
+
   mitt@3.0.1: {}
 
   mkdirp@3.0.1: {}
@@ -13900,6 +13921,10 @@ snapshots:
 
   vue-flow-layout@0.2.0: {}
 
+  vue-observe-visibility@2.0.0-alpha.1(vue@3.5.18(typescript@5.9.2)):
+    dependencies:
+      vue: 3.5.18(typescript@5.9.2)
+
   vue-resize@2.0.0-alpha.1(vue@3.5.18(typescript@5.9.2)):
     dependencies:
       vue: 3.5.18(typescript@5.9.2)
@@ -13915,6 +13940,13 @@ snapshots:
       '@vue/language-core': 3.0.5(typescript@5.9.2)
       typescript: 5.9.2
 
+  vue-virtual-scroller@2.0.0-beta.8(vue@3.5.18(typescript@5.9.2)):
+    dependencies:
+      mitt: 2.1.0
+      vue: 3.5.18(typescript@5.9.2)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.18(typescript@5.9.2))
+      vue-resize: 2.0.0-alpha.1(vue@3.5.18(typescript@5.9.2))
+
   vue@3.5.18(typescript@5.9.2):
     dependencies:
       '@vue/compiler-dom': 3.5.18
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index edf58b25..abc1d2f5 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -68,6 +68,7 @@ catalogs:
     theme-vitesse: ^1.0.0
     vite-hot-client: ^2.1.0
     vue: ^3.5.18
+    vue-virtual-scroller: ^2.0.0-beta.8
   icons:
     '@iconify-json/carbon': ^1.2.13
     '@iconify-json/catppuccin': ^1.2.15