feat: add virtual scroller for data list

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": {

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>

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" />

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>

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>

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>

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>

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