feat: basic filters

Author: antfu

packages/devtools/src/app/pages/session/[session]/index.vue

@@ -1,28 +1,117 @@
 <script setup lang="ts">
 import type { SessionContext } from '../../../types/data'
-import { computedWithControl } from '@vueuse/core'
+import { useRoute, useRouter } from '#app/composables/router'
+import { clearUndefined } from '@antfu/utils'
+import { computedWithControl, debouncedWatch } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { computed, reactive } from 'vue'
+import { parseReadablePath } from '../../../utils/filepath'
+import { getFileTypeFromModuleId, getFileTypeFromName } from '../../../utils/icon'
 
 const props = defineProps<{
   session: SessionContext
 }>()
 
-const filters = reactive({
-  search: '',
+interface Filters {
+  search: string
+  file_types: string[] | null
+  node_modules: string[] | null
+}
+
+const route = useRoute()
+const router = useRouter()
+
+const filters = reactive<Filters>({
+  search: (route.query.search || '') as string,
+  file_types: (route.query.file_types || null) as string[] | null,
+  node_modules: (route.query.node_modules || null) as string[] | null,
+})
+
+debouncedWatch(
+  filters,
+  (f) => {
+    const query: any = {
+      ...route.query,
+      search: f.search || undefined,
+      file_types: f.file_types || undefined,
+      node_modules: f.node_modules || undefined,
+    }
+    router.replace({
+      query: clearUndefined(query),
+    })
+  },
+  { debounce: 500 },
+)
+
+const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
+  const path = parseReadablePath(mod.id, props.session.rootDir)
+  const type = getFileTypeFromModuleId(mod.id)
+  return {
+    mod,
+    path,
+    type,
+  }
+}))
+
+// const allNodeModules = computed(() => {
+//   const nodeModules = new Set<string>()
+//   for (const mod of parsedPaths.value) {
+//     if (mod.path.moduleName)
+//       nodeModules.add(mod.path.moduleName)
+//   }
+//   return nodeModules
+// })
+
+const allFileTypes = computed(() => {
+  const fileTypes = new Set<string>()
+  for (const mod of parsedPaths.value) {
+    fileTypes.add(mod.type.name)
+  }
+  return fileTypes
 })
 
+const filtered = computed(() => {
+  let modules = parsedPaths.value
+  if (filters.file_types) {
+    modules = modules.filter(mod => filters.file_types!.includes(mod.type.name))
+  }
+  if (filters.node_modules) {
+    modules = modules.filter(mod => mod.path.moduleName && filters.node_modules!.includes(mod.path.moduleName))
+  }
+  return modules.map(mod => mod.mod)
+})
+
+function isFileTypeSelected(type: string) {
+  return filters.file_types == null || filters.file_types.includes(type)
+}
+
+function toggleFileType(type: string) {
+  if (filters.file_types == null) {
+    filters.file_types = Array.from(allFileTypes.value)
+  }
+
+  if (filters.file_types.includes(type)) {
+    filters.file_types = filters.file_types.filter(t => t !== type)
+  }
+  else {
+    filters.file_types.push(type)
+  }
+  if (filters.file_types.length === allFileTypes.value.size) {
+    filters.file_types = null
+  }
+}
+
 const fuse = computedWithControl(
-  () => props.session.modulesList,
-  () => new Fuse(props.session.modulesList, {
+  () => filtered.value,
+  () => new Fuse(filtered.value, {
     includeScore: true,
     keys: ['id'],
   }),
 )
 
-const filtered = computed(() => {
+const searched = computed(() => {
   if (filters.search === '') {
-    return props.session.modulesList
+    return filtered.value
   }
   return fuse.value
     .search(filters.search)
@@ -32,15 +121,38 @@ const filtered = computed(() => {
 
 <template>
   <div flex="~ col gap-2" p4>
-    <div>
-      <input
-        v-model="filters.search"
-        border="~ base rounded-full"
-        p2 px4 w-full outline-none
-        placeholder="Search"
-      >
+    <div flex="col gap-2">
+      <div>
+        <input
+          v-model="filters.search"
+          border="~ base rounded-full"
+          p2 px4 w-full outline-none
+          placeholder="Search"
+        >
+      </div>
+      <div flex="~ gap-2" py2>
+        <label
+          v-for="type of allFileTypes"
+          :key="type"
+          border="~ base rounded" px2 py1
+          flex="~ items-center gap-1"
+          :title="type"
+          :class="isFileTypeSelected(type) ? 'bg-active' : 'grayscale op50'"
+        >
+          <input
+            type="checkbox"
+            :checked="isFileTypeSelected(type)"
+            mr1
+            @change="toggleFileType(type)"
+          >
+          <div :class="getFileTypeFromName(type).icon" />
+          <div text-sm>{{ getFileTypeFromName(type).description }}</div>
+        </label>
+      </div>
+      <!-- TODO: should we add filters for node_modules? -->
+      <!-- {{ allNodeModules }} -->
     </div>
-    <template v-for="mod of filtered" :key="mod">
+    <template v-for="mod of searched" :key="mod">
       <DisplayModuleId
         :id="mod.id"
         :session

packages/devtools/src/app/utils/icon.ts

@@ -1,3 +1,5 @@
+import { makeCachedFunction } from './cache'
+
 export interface ModuleTypeRule {
   match: RegExp
   name: string
@@ -128,7 +130,7 @@ export function getFileTypeFromName(name: string) {
   return ModuleTypeRules.find(rule => rule.name === name) ?? DefaultTypeRule
 }
 
-export function getFileTypeFromModuleId(moduleId: string): ModuleTypeRule {
+export const getFileTypeFromModuleId = makeCachedFunction((moduleId: string): ModuleTypeRule => {
   moduleId = moduleId
     .replace(/(\?|&)v=[^&]*/, '$1')
     .replace(/\?$/, '')
@@ -140,4 +142,4 @@ export function getFileTypeFromModuleId(moduleId: string): ModuleTypeRule {
   }
 
   return DefaultTypeRule
-}
+})