feat: search and a batch improvments

package.json

@@ -58,6 +58,7 @@
     "eslint": "^7.32.0",
     "eslint-plugin-jest": "^24.4.0",
     "esno": "^0.8.0",
+    "fuse.js": "^6.4.6",
     "npm-run-all": "^4.1.5",
     "prism-theme-vars": "^0.2.2",
     "tsup": "^4.13.1",

src/client/components.d.ts

@@ -6,6 +6,7 @@ declare module 'vue' {
     Badge: typeof import('./components/Badge.vue')['default']
     'Carbon:compare': typeof import('virtual:vite-icons/carbon/compare')['default']
     'Carbon:list': typeof import('virtual:vite-icons/carbon/list')['default']
+    'Carbon:listBoxes': typeof import('virtual:vite-icons/carbon/list-boxes')['default']
     'Carbon:logoGithub': typeof import('virtual:vite-icons/carbon/logo-github')['default']
     'Carbon:renew': typeof import('virtual:vite-icons/carbon/renew')['default']
     'Carbon:textWrap': typeof import('virtual:vite-icons/carbon/text-wrap')['default']
@@ -15,10 +16,12 @@ declare module 'vue' {
     CarbonMoon: typeof import('virtual:vite-icons/carbon/moon')['default']
     CarbonPedestrian: typeof import('virtual:vite-icons/carbon/pedestrian')['default']
     CarbonSun: typeof import('virtual:vite-icons/carbon/sun')['default']
+    Container: typeof import('./components/Container.vue')['default']
     DiffEditor: typeof import('./components/DiffEditor.vue')['default']
     ModuleId: typeof import('./components/ModuleId.vue')['default']
     ModuleList: typeof import('./components/ModuleList.vue')['default']
     NavBar: typeof import('./components/NavBar.vue')['default']
+    SearchBox: typeof import('./components/SearchBox.vue')['default']
   }
 }
 

src/client/components/Container.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="h-[calc(100vh-55px)]">
+    <slot />
+  </div>
+</template>

src/client/components/DiffEditor.vue

@@ -52,8 +52,8 @@ onMounted(() => {
     // clean up marks
     cm1.getAllMarks().forEach(i => i.clear())
     cm2.getAllMarks().forEach(i => i.clear())
-    new Array(cm1.lineCount).fill(null!).map((_, i) => cm1.removeLineClass(i, 'background', 'diff-removed'))
-    new Array(cm2.lineCount).fill(null!).map((_, i) => cm2.removeLineClass(i, 'background', 'diff-added'))
+    new Array(cm1.lineCount() + 2).fill(null!).map((_, i) => cm1.removeLineClass(i, 'background', 'diff-removed'))
+    new Array(cm2.lineCount() + 2).fill(null!).map((_, i) => cm2.removeLineClass(i, 'background', 'diff-added'))
 
     if (showDiff) {
       const diff = new Diff()

src/client/components/ModuleList.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
-import { list } from '../logic'
+import { showPluginNames } from '../logic'
+
+defineProps<{
+  modules: any[]
+}>()
 </script>
 
 <template>
-  <div v-if="list.data && list.data.modules">
+  <div v-if="modules">
     <RouterLink
-      v-for="m in list.data.modules"
+      v-for="m in modules"
       :key="m.id"
       class="block border-b border-main px-3 py-2 text-left font-mono text-sm"
       :to="`/module?id=${encodeURIComponent(m.id)}`"
     >
       <ModuleId :id="m.id" />
+      <div v-if="showPluginNames" class="text-xs">
+        <template v-for="i, idx in m.plugins.slice(1)" :key="i">
+          <span v-if="idx !== 0">|</span>
+          <span class="mx-0.5 text-gray-400">{{ i }}</span>
+        </template>
+      </div>
     </RouterLink>
   </div>
 </template>

src/client/components/NavBar.vue

@@ -1,40 +1,46 @@
 <script setup lang="ts">
-import { isDark, toggleDark, enableDiff, lineWrapping, refetch } from '../logic'
+import { isDark, toggleDark, enableDiff, lineWrapping, refetch, showPluginNames } from '../logic'
 
 defineProps<{
   id?: string
 }>()
 </script>
 
 <template>
-  <nav class="text-xl font-light px-6 border-b border-main flex gap-4 h-54px">
-    <router-link v-if="$route.path != '/'" class="icon-btn !outline-none my-auto" to="/">
-      <carbon-arrow-left />
-    </router-link>
-    <ModuleId v-if="id" :id="id" />
-    <span v-else class="text-md my-auto">Vite Inspect</span>
-    <div class="flex-auto"></div>
+  <nav class="font-light px-6 border-b border-main flex gap-4 h-54px children:my-auto">
     <template v-if="$route.path != '/'">
-      <button class="icon-btn !outline-none my-auto" @click="lineWrapping = !lineWrapping">
+      <router-link v-if="$route.path != '/'" class="icon-btn !outline-none my-auto" to="/">
+        <carbon-arrow-left />
+      </router-link>
+      <ModuleId v-if="id" :id="id" />
+      <div class="flex-auto"></div>
+      <button class="icon-btn text-lg" title="Line Wrapping" @click="lineWrapping = !lineWrapping">
         <carbon:text-wrap :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
       </button>
-      <button class="icon-btn !outline-none my-auto" @click="enableDiff = !enableDiff">
+      <button class="icon-btn text-lg" title="Toggle Diff" @click="enableDiff = !enableDiff">
         <carbon:compare :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
       </button>
     </template>
     <template v-else>
+      <span class="text-md">Vite Inspect</span>
+      <SearchBox />
+      <div class="flex-auto"></div>
+      <button class="icon-btn text-lg" title="Line Wrapping" @click="showPluginNames = !showPluginNames">
+        <carbon:list-boxes v-if="showPluginNames" />
+        <carbon:list v-else />
+      </button>
       <a
-        class="icon-btn !outline-none my-auto"
+        class="icon-btn text-lg"
         href="https://github.com/antfu/vite-plugin-inspect"
         target="_blank"
       >
         <carbon:logo-github />
       </a>
     </template>
-    <button class="icon-btn !outline-none my-auto" @click="refetch()">
+    <button class="icon-btn text-lg" title="Refetch" @click="refetch()">
       <carbon:renew />
     </button>
-    <button class="icon-btn !outline-none my-auto" @click="toggleDark()">
+    <button class="icon-btn text-lg" title="Toggle Dark Mode" @click="toggleDark()">
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </button>

src/client/components/SearchBox.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { searchText, includeNodeModules, includeVirtual } from '../logic'
+</script>
+
+<template>
+  <input
+    v-model="searchText"
+    type="text"
+    class="border border-main px-3 py-1 rounded bg-transparent !outline-none"
+    placeholder="Search..."
+  />
+  <div class="text-xs flex flex-col h-min">
+    <label class="flex">
+      <input v-model="includeNodeModules" type="checkbox" class="my-auto" />
+      <div class="ml-1">node_modules</div>
+    </label>
+    <label class="flex">
+      <input v-model="includeVirtual" type="checkbox" class="my-auto" />
+      <div class="ml-1">virutal</div>
+    </label>
+  </div>
+</template>

src/client/logic/index.ts

@@ -1,2 +1,4 @@
 export * from './dark'
 export * from './state'
+export * from './search'
+export * from './utils'

src/client/logic/search.ts

@@ -0,0 +1,28 @@
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+import Fuse from 'fuse.js'
+import { list } from './state'
+
+export const searchText = useStorage('vite-inspect-search-text', '')
+export const includeNodeModules = useStorage('vite-inspect-include-node-modules', false)
+export const includeVirtual = useStorage('vite-inspect-include-virtual', false)
+
+export const searchResults = computed(() => {
+  let data = list.data?.modules || []
+
+  if (!includeNodeModules.value)
+    data = data.filter(item => !item.id.includes('/node_modules/'))
+
+  if (!includeVirtual.value)
+    data = data.filter(item => !item.virtual)
+
+  if (!searchText.value)
+    return data
+
+  const fuse = new Fuse(data, {
+    shouldSort: true,
+    keys: ['id', 'plugins'],
+  })
+
+  return fuse.search(searchText.value).map(i => i.item)
+})

src/client/logic/state.ts

@@ -1,9 +1,10 @@
-import { useFetch, createEventHook } from '@vueuse/core'
-import { reactive, computed, ref } from 'vue'
+import { useFetch, createEventHook, useStorage } from '@vueuse/core'
+import { reactive, computed } from 'vue'
 
 export const onRefetch = createEventHook<void>()
-export const enableDiff = ref(true)
-export const lineWrapping = ref(false)
+export const enableDiff = useStorage('vite-inspect-diff', true)
+export const lineWrapping = useStorage('vite-inspect-line-wrapping', false)
+export const showPluginNames = useStorage('vite-inspect-show-plugin-names', false)
 
 export const list = reactive(
   useFetch('/__inspect_api/list')

src/client/pages/index.vue

@@ -1,4 +1,15 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { refetch, searchResults } from '../logic'
+
+onMounted(() => {
+  refetch()
+})
+</script>
+
 <template>
-  <NavBar/>
-  <ModuleList />
+  <NavBar />
+  <Container class="overflow-auto">
+    <ModuleList :modules="searchResults"/>
+  </Container>
 </template>

src/client/pages/module.vue

@@ -35,9 +35,9 @@ const to = computed(() => data.value?.transforms[currentIdx.value]?.result || ''
 
 <template>
   <NavBar :id="id" />
-  <div
+  <Container
     v-if="data && data.transforms"
-    class="grid grid-cols-[300px,3fr] h-[calc(100vh-55px)] overflow-hidden"
+    class="grid grid-cols-[300px,3fr] overflow-hidden"
   >
     <div class="flex flex-col border-r border-main">
       <div
@@ -63,5 +63,5 @@ const to = computed(() => data.value?.transforms[currentIdx.value]?.result || ''
       </template>
     </div>
     <DiffEditor :from="from" :to="to" />
-  </div>
+  </Container>
 </template>

src/client/styles/main.css

@@ -18,7 +18,7 @@ html.dark {
 }
 
 .icon-btn {
-  @apply inline-block cursor-pointer select-none
+  @apply inline-block cursor-pointer select-none !outline-none
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-teal-600;
   font-size: 0.9em;

src/node/index.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'path'
-import fs from 'fs'
 import _debug from 'debug'
-import type { ModuleNode, Plugin, ResolvedConfig } from 'vite'
+import type { HmrContext, ModuleNode, Plugin, ResolvedConfig } from 'vite'
 import sirv from 'sirv'
 import { parseURL } from 'ufo'
 import { parseQuery } from 'vue-router'
@@ -74,10 +73,13 @@ function VitePluginPackageConfig(): Plugin {
       debug('hijack plugin handleHotUpdate', plugin.name)
       const _handleHotUpdate = plugin.handleHotUpdate
       plugin.handleHotUpdate = async function(this: any, ...args: any[]) {
+        const ctx = args[0] as HmrContext
+        ctx.modules.forEach(mod => hijackModule(mod))
         const _result = await _handleHotUpdate.apply(this, args as any)
 
         if (_result) {
           _result.forEach((mod) => {
+            hijackModule(mod)
             if (mod.id)
               delete transformMap[mod.id]
           })
@@ -88,6 +90,29 @@ function VitePluginPackageConfig(): Plugin {
     }
   }
 
+  function hijackModule(mod: ModuleNode) {
+    const key = '__vite_plugin_inspect'
+    // @ts-expect-error
+    if (mod[key])
+      return
+
+    let ts = mod.lastHMRTimestamp
+    Object.defineProperty(mod, 'lastHMRTimestamp', {
+      get() {
+        return ts
+      },
+      set(v) {
+        ts = v
+        if (mod.id)
+          delete transformMap[mod.id]
+      },
+    })
+
+    Object.defineProperty(mod, key, { value: true, enumerable: false })
+
+    return ts
+  }
+
   function resolveId(id: string): string {
     return idMap[id] ? resolveId(idMap[id]) : id
   }
@@ -130,7 +155,15 @@ function VitePluginPackageConfig(): Plugin {
 
         if (pathname === '/list') {
           const modules = Object.keys(transformMap).sort()
-            .map(id => ({ id, virtual: !fs.existsSync(parseURL(id).pathname) }))
+            .map((id) => {
+              const plugins = transformMap[id]?.map(i => i.name)
+
+              return {
+                id,
+                plugins,
+                virtual: plugins[0] !== '__load__',
+              }
+            })
 
           res.write(JSON.stringify({
             root: config.root,