fix: show correct dependencies count (#787)

Co-authored-by: shamilkotta <shamilkotta99@gmail.com>

Author: gameroman

app/composables/usePackageComparison.ts

@@ -8,16 +8,21 @@ import type {
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
+import { formatBytes } from '~/utils/formatters'
+import { getDependencyCount } from '~/utils/npm/dependency-count'
 
 export interface PackageComparisonData {
   package: ComparisonPackage
   downloads?: number
   /** Package's own unpacked size (from dist.unpackedSize) */
   packageSize?: number
+  /** Number of direct dependencies */
+  directDeps: number | null
   /** Install size data (fetched lazily) */
   installSize?: {
     selfSize: number
     totalSize: number
+    /** Total dependency count */
     dependencyCount: number
   }
   analysis?: PackageAnalysisResponse
@@ -139,6 +144,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
               },
               downloads: downloads?.downloads,
               packageSize,
+              directDeps: versionData ? getDependencyCount(versionData) : null,
               installSize: undefined, // Will be filled in second pass
               analysis: analysis ?? undefined,
               vulnerabilities: {
@@ -230,7 +236,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   function isFacetLoading(facet: ComparisonFacet): boolean {
     if (!installSizeLoading.value) return false
     // These facets depend on install-size API
-    return facet === 'installSize' || facet === 'dependencies'
+    return facet === 'installSize' || facet === 'totalDependencies'
   }
 
   // Check if a specific column (package) is loading
@@ -255,40 +261,40 @@ function computeFacetValue(
   t: (key: string, params?: Record<string, unknown>) => string,
 ): FacetValue | null {
   switch (facet) {
-    case 'downloads':
+    case 'downloads': {
       if (data.downloads === undefined) return null
       return {
         raw: data.downloads,
         display: formatCompactNumber(data.downloads),
         status: 'neutral',
       }
-
-    case 'packageSize':
+    }
+    case 'packageSize': {
       if (!data.packageSize) return null
       return {
         raw: data.packageSize,
         display: formatBytes(data.packageSize),
         status: data.packageSize > 5 * 1024 * 1024 ? 'warning' : 'neutral',
       }
-
-    case 'installSize':
+    }
+    case 'installSize': {
       if (!data.installSize) return null
       return {
         raw: data.installSize.totalSize,
         display: formatBytes(data.installSize.totalSize),
         status: data.installSize.totalSize > 50 * 1024 * 1024 ? 'warning' : 'neutral',
       }
-
-    case 'moduleFormat':
+    }
+    case 'moduleFormat': {
       if (!data.analysis) return null
       const format = data.analysis.moduleFormat
       return {
         raw: format,
         display: format === 'dual' ? 'ESM + CJS' : format.toUpperCase(),
         status: format === 'esm' || format === 'dual' ? 'good' : 'neutral',
       }
-
-    case 'types':
+    }
+    case 'types': {
       if (data.isBinaryOnly) {
         return {
           raw: 'binary',
@@ -309,8 +315,8 @@ function computeFacetValue(
               : t('compare.facets.values.types_none'),
         status: types.kind === 'included' ? 'good' : types.kind === '@types' ? 'info' : 'bad',
       }
-
-    case 'engines':
+    }
+    case 'engines': {
       const engines = data.metadata?.engines
       if (!engines?.node) {
         return { raw: null, display: t('compare.facets.values.any'), status: 'neutral' }
@@ -320,8 +326,8 @@ function computeFacetValue(
         display: `Node ${engines.node}`,
         status: 'neutral',
       }
-
-    case 'vulnerabilities':
+    }
+    case 'vulnerabilities': {
       if (!data.vulnerabilities) return null
       const count = data.vulnerabilities.count
       const sev = data.vulnerabilities.severity
@@ -337,8 +343,8 @@ function computeFacetValue(
               }),
         status: count === 0 ? 'good' : sev.critical > 0 || sev.high > 0 ? 'bad' : 'warning',
       }
-
-    case 'lastUpdated':
+    }
+    case 'lastUpdated': {
       if (!data.metadata?.lastUpdated) return null
       const date = new Date(data.metadata.lastUpdated)
       return {
@@ -347,8 +353,8 @@ function computeFacetValue(
         status: isStale(date) ? 'warning' : 'neutral',
         type: 'date',
       }
-
-    case 'license':
+    }
+    case 'license': {
       const license = data.metadata?.license
       if (!license) {
         return { raw: null, display: t('compare.facets.values.unknown'), status: 'warning' }
@@ -358,17 +364,17 @@ function computeFacetValue(
         display: license,
         status: 'neutral',
       }
-
-    case 'dependencies':
-      if (!data.installSize) return null
-      const depCount = data.installSize.dependencyCount
+    }
+    case 'dependencies': {
+      const depCount = data.directDeps
+      if (depCount === null) return null
       return {
         raw: depCount,
         display: String(depCount),
-        status: depCount > 50 ? 'warning' : 'neutral',
+        status: depCount > 10 ? 'warning' : 'neutral',
       }
-
-    case 'deprecated':
+    }
+    case 'deprecated': {
       const isDeprecated = !!data.metadata?.deprecated
       return {
         raw: isDeprecated,
@@ -377,22 +383,23 @@ function computeFacetValue(
           : t('compare.facets.values.not_deprecated'),
         status: isDeprecated ? 'bad' : 'good',
       }
-
+    }
     // Coming soon facets
-    case 'totalDependencies':
-      return null
-
-    default:
+    case 'totalDependencies': {
+      if (!data.installSize) return null
+      const totalDepCount = data.installSize.dependencyCount
+      return {
+        raw: totalDepCount,
+        display: String(totalDepCount),
+        status: totalDepCount > 50 ? 'warning' : 'neutral',
+      }
+    }
+    default: {
       return null
+    }
   }
 }
 
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
 function isStale(date: Date): boolean {
   const now = new Date()
   const diffMs = now.getTime() - date.getTime()

app/pages/package/[...package].vue

@@ -11,6 +11,7 @@ import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
+import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { NuxtLink } from '#components'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
@@ -300,11 +301,6 @@ function normalizeGitUrl(url: string): string {
     .replace(/^git@github\.com:/, 'https://github.com/')
 }
 
-function getDependencyCount(version: PackumentVersion | null): number {
-  if (!version?.dependencies) return 0
-  return Object.keys(version.dependencies).length
-}
-
 // Check if a version has provenance/attestations
 // The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {

app/utils/npm/dependency-count.ts

@@ -0,0 +1,6 @@
+import type { PackumentVersion } from '#shared/types'
+
+export function getDependencyCount(version: PackumentVersion | null): number {
+  if (!version?.dependencies) return 0
+  return Object.keys(version.dependencies).length
+}

shared/types/comparison.ts

@@ -41,7 +41,6 @@ export const FACET_INFO: Record<ComparisonFacet, Omit<FacetInfo, 'id'>> = {
   },
   totalDependencies: {
     category: 'performance',
-    comingSoon: true,
   },
   // Health
   downloads: {
@@ -111,3 +110,9 @@ export interface ComparisonPackage {
   version: string
   description?: string
 }
+
+// ComingSoon tests run only when FACET_INFO has at least one comingSoon facet
+export const comingSoonFacets = (Object.keys(FACET_INFO) as ComparisonFacet[]).filter(
+  f => FACET_INFO[f].comingSoon,
+)
+export const hasComingSoonFacets = comingSoonFacets.length > 0

test/nuxt/components/compare/FacetSelector.spec.ts

@@ -1,5 +1,11 @@
 import type { ComparisonFacet } from '#shared/types/comparison'
-import { CATEGORY_ORDER, FACET_INFO, FACETS_BY_CATEGORY } from '#shared/types/comparison'
+import {
+  CATEGORY_ORDER,
+  FACET_INFO,
+  FACETS_BY_CATEGORY,
+  comingSoonFacets,
+  hasComingSoonFacets,
+} from '#shared/types/comparison'
 import FacetSelector from '~/components/Compare/FacetSelector.vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
@@ -21,7 +27,7 @@ const facetLabels: Record<ComparisonFacet, { label: string; description: string
   license: { label: 'License', description: 'Package license' },
   dependencies: { label: 'Direct Deps', description: 'Number of direct dependencies' },
   totalDependencies: {
-    label: 'Total Deps',
+    label: 'Total deps',
     description: 'Total number of dependencies including transitive',
   },
   deprecated: { label: 'Deprecated?', description: 'Whether the package is deprecated' },
@@ -34,6 +40,11 @@ const categoryLabels: Record<string, string> = {
   security: 'Security & Compliance',
 }
 
+const comingSoonFacetId = comingSoonFacets[0]
+const comingSoonFacetLabel = hasComingSoonFacets
+  ? (facetLabels[comingSoonFacetId!]?.label ?? comingSoonFacetId)
+  : ''
+
 // Helper to build facet info with labels
 function buildFacetInfo(facet: ComparisonFacet) {
   return {
@@ -174,13 +185,13 @@ describe('FacetSelector', () => {
     })
   })
 
-  describe('comingSoon facets', () => {
+  describe.runIf(hasComingSoonFacets)('comingSoon facets', () => {
     it('disables comingSoon facets', async () => {
       const component = await mountSuspended(FacetSelector)
 
       // totalDependencies is marked as comingSoon
       const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes('Total Deps'))
+      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
 
       expect(comingSoonButton?.attributes('disabled')).toBeDefined()
     })
@@ -196,7 +207,7 @@ describe('FacetSelector', () => {
 
       // Find the comingSoon button
       const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes('Total Deps'))
+      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
 
       // Should not have checkmark or add icon
       expect(comingSoonButton?.find('.i-carbon\\:checkmark').exists()).toBe(false)
@@ -207,11 +218,11 @@ describe('FacetSelector', () => {
       const component = await mountSuspended(FacetSelector)
 
       const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes('Total Deps'))
+      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
       await comingSoonButton?.trigger('click')
 
       // toggleFacet should not have been called with totalDependencies
-      expect(mockToggleFacet).not.toHaveBeenCalledWith('totalDependencies')
+      expect(mockToggleFacet).not.toHaveBeenCalledWith(comingSoonFacetId)
     })
   })
 
@@ -242,13 +253,11 @@ describe('FacetSelector', () => {
 
     it('disables all button when all facets in category are selected', async () => {
       // Select all performance facets
-      const performanceFacets = FACETS_BY_CATEGORY.performance.filter(
+      const performanceFacets: (string | ComparisonFacet)[] = FACETS_BY_CATEGORY.performance.filter(
         f => !FACET_INFO[f].comingSoon,
       )
       mockSelectedFacets.value = performanceFacets
-      mockIsFacetSelected.mockImplementation((f: string) =>
-        performanceFacets.includes(f as ComparisonFacet),
-      )
+      mockIsFacetSelected.mockImplementation((f: string) => performanceFacets.includes(f))
 
       const component = await mountSuspended(FacetSelector)
 
@@ -281,7 +290,7 @@ describe('FacetSelector', () => {
       expect(component.find('.bg-bg-muted').exists()).toBe(true)
     })
 
-    it('applies cursor-not-allowed to comingSoon facets', async () => {
+    it.runIf(hasComingSoonFacets)('applies cursor-not-allowed to comingSoon facets', async () => {
       const component = await mountSuspended(FacetSelector)
 
       expect(component.find('.cursor-not-allowed').exists()).toBe(true)

test/nuxt/composables/use-facet-selection.spec.ts

@@ -2,7 +2,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { ref } from 'vue'
 import type { ComparisonFacet } from '#shared/types/comparison'
-import { DEFAULT_FACETS, FACETS_BY_CATEGORY } from '#shared/types/comparison'
+import {
+  DEFAULT_FACETS,
+  FACET_INFO,
+  FACETS_BY_CATEGORY,
+  hasComingSoonFacets,
+} from '#shared/types/comparison'
 import type { FacetInfoWithLabels } from '~/composables/useFacetSelection'
 
 // Mock useRouteQuery - needs to be outside of the helper to persist across calls
@@ -113,7 +118,7 @@ describe('useFacetSelection', () => {
     expect(isFacetSelected('types')).toBe(true)
   })
 
-  it('filters out comingSoon facets from query', async () => {
+  it.runIf(hasComingSoonFacets)('filters out comingSoon facets from query', async () => {
     mockRouteQuery.value = 'downloads,totalDependencies,types'
 
     const { isFacetSelected } = await useFacetSelectionInComponent()
@@ -225,7 +230,7 @@ describe('useFacetSelection', () => {
       selectCategory('performance')
 
       const performanceFacets = FACETS_BY_CATEGORY.performance.filter(
-        f => f !== 'totalDependencies', // comingSoon facet
+        f => !FACET_INFO[f].comingSoon, // comingSoon facet
       )
       for (const facet of performanceFacets) {
         expect(isFacetSelected(facet)).toBe(true)
@@ -252,7 +257,7 @@ describe('useFacetSelection', () => {
       deselectCategory('performance')
 
       const nonComingSoonPerformanceFacets = FACETS_BY_CATEGORY.performance.filter(
-        f => f !== 'totalDependencies',
+        f => !FACET_INFO[f].comingSoon,
       )
       for (const facet of nonComingSoonPerformanceFacets) {
         expect(isFacetSelected(facet)).toBe(false)
@@ -369,12 +374,6 @@ describe('useFacetSelection', () => {
       expect(Array.isArray(allFacets)).toBe(true)
       expect(allFacets.length).toBeGreaterThan(0)
     })
-
-    it('allFacets includes all facets including comingSoon', async () => {
-      const { allFacets } = await useFacetSelectionInComponent()
-
-      expect(allFacets).toContain('totalDependencies')
-    })
   })
 
   describe('whitespace handling', () => {