feat: apply filter to MultipleVersions (#3)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: OrbisK

packages/node-modules-inspector/src/app/components/panel/PackageDetails.vue

@@ -3,7 +3,8 @@ import type { PackageNode } from 'node-modules-tools'
 import { DisplayNumberBadge } from '#components'
 import { Menu as VMenu } from 'floating-vue'
 import { computed } from 'vue'
-import { getPackageFromSpec, packageVersionsMap } from '~/state/data'
+import { getPackageFromSpec } from '~/state/data'
+import { packageVersionsMap } from '~/state/filters'
 import { query } from '~/state/query'
 import { settings } from '~/state/settings'
 
@@ -12,7 +13,7 @@ const props = defineProps<{
 }>()
 
 const duplicated = computed(() => {
-  const value = packageVersionsMap.get(props.pkg.name)
+  const value = packageVersionsMap.value.get(props.pkg.name)
   if (value && value?.length > 1)
     return value
   return undefined

packages/node-modules-inspector/src/app/components/report/MultipleVersions.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { compareSemver } from '~~/shared/utils'
 import { selectedNode } from '~/state/current'
-import { packageVersionsMap } from '~/state/data'
+import { filteredPackages } from '~/state/filters'
+import { buildVersionToPackagesMap } from '~/utils/maps'
 
-const duplicated = Array.from(packageVersionsMap.values())
+const versionMap = computed(() => buildVersionToPackagesMap(filteredPackages.value))
+const duplicated = computed(() => Array.from(versionMap.value.values())
   .filter(packages => packages.length > 1)
-  .sort((a, b) => b.length - a.length)
+  .sort((a, b) => b.length - a.length))
 
-duplicated.forEach((packages) => {
-  packages.sort((a, b) => compareSemver(a.version, b.version))
-})
+const sorted = computed(() => duplicated.value.map((packages) => {
+  return packages.sort((a, b) => compareSemver(a.version, b.version))
+}))
 </script>
 
 <template>
   <div grid="~ cols-minmax-200px gap-4">
     <div
-      v-for="pkgs of duplicated" :key="pkgs[0].spec"
+      v-for="pkgs of sorted" :key="pkgs[0].spec"
       border="~ base rounded-lg" bg-glass
       flex="~ col"
       :class="selectedNode && pkgs.includes(selectedNode) ? 'border-primary ring-4 ring-primary:20' : ''"

packages/node-modules-inspector/src/app/state/data.ts

@@ -1,10 +1,9 @@
 import type { ListPackageDependenciesResult, PackageNode } from 'node-modules-tools'
 import { useAsyncState } from '@vueuse/core'
-import { shallowReactive, shallowRef } from 'vue'
+import { shallowRef } from 'vue'
 import { rpc } from '../composables/rpc'
 
 export const packageData = shallowRef<ListPackageDependenciesResult | null>(null)
-export const packageVersionsMap = shallowReactive(new Map<string, PackageNode[]>())
 
 export function fetchListDependenciesData() {
   const { state } = useAsyncState(async () => {
@@ -15,12 +14,6 @@ export function fetchListDependenciesData() {
       Object.freeze(pkg)
 
     packageData.value = data
-    packageVersionsMap.clear()
-    for (const pkg of packageData.value?.packages.values() || []) {
-      if (!packageVersionsMap.has(pkg.name))
-        packageVersionsMap.set(pkg.name, [])
-      packageVersionsMap.get(pkg.name)!.push(pkg)
-    }
 
     return packageData.value
   }, null)

packages/node-modules-inspector/src/app/state/filters.ts

@@ -2,6 +2,7 @@ import type { PackageModuleType } from 'node-modules-tools'
 import { useDebounce } from '@vueuse/core'
 import pm from 'picomatch'
 import { computed, reactive } from 'vue'
+import { buildVersionToPackagesMap } from '~/utils/maps'
 import { getModuleType } from '../utils/module-type'
 import { packageData } from './data'
 
@@ -41,16 +42,22 @@ const debouncedSearch = useDebounce(computed(() => filters.search), 200)
 export const avaliablePackages = computed(() => {
   // TODO: exclude packages
   return Array.from(packageData.value?.packages.values() || [])
+    .filter((pkg) => {
+      if (filters.excludes && filters.excludes.some(i => pkg.name.includes(i)))
+        return false
+      return true
+    })
 })
 
 export const workspacePackages = computed(() => avaliablePackages.value.filter(i => i.workspace))
 
 export const filteredPackages = computed(() => Array.from((function *() {
-  for (const pkg of packageData.value?.packages.values() || []) {
+  for (const pkg of avaliablePackages.value) {
     if (filters.modules && !filters.modules.includes(getModuleType(pkg)))
       continue
     if (filters.licenses && !filters.licenses.includes(pkg.resolved.license || ''))
       continue
+
     if (debouncedSearch.value) {
       if (debouncedSearch.value.match(/[*[\]]/)) {
         if (!pm.isMatch(pkg.name, debouncedSearch.value))
@@ -63,8 +70,7 @@ export const filteredPackages = computed(() => Array.from((function *() {
     }
 
     // TODO: better excludes
-    if (filters.excludes && filters.excludes.some(i => pkg.name.includes(i)))
-      continue
+
     if (filters.sourceType) {
       if (filters.sourceType === 'prod' && !pkg.prod && !pkg.workspace)
         continue
@@ -74,3 +80,6 @@ export const filteredPackages = computed(() => Array.from((function *() {
     yield pkg
   }
 })()))
+
+export const packageVersionsMap = computed(() => buildVersionToPackagesMap(avaliablePackages.value))
+export const filteredPackageVersionsMap = computed(() => buildVersionToPackagesMap(filteredPackages.value))

packages/node-modules-inspector/src/app/utils/maps.ts

@@ -0,0 +1,11 @@
+import type { PackageNode } from 'node-modules-tools'
+
+export function buildVersionToPackagesMap(packages: PackageNode[]) {
+  const map = new Map<string, PackageNode[]>()
+  for (const pkg of packages) {
+    if (!map.has(pkg.name))
+      map.set(pkg.name, [])
+    map.get(pkg.name)!.push(pkg)
+  }
+  return map
+}