feat: highlight outdated dependencies

Author: danielroe

app/components/PackageDependencies.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useOutdatedDependencies, getOutdatedTooltip } from '~/composables/useNpmRegistry'
+import type { OutdatedDependencyInfo } from '~/composables/useNpmRegistry'
+
 const props = defineProps<{
   packageName: string
   dependencies?: Record<string, string>
@@ -7,6 +10,23 @@ const props = defineProps<{
   optionalDependencies?: Record<string, string>
 }>()
 
+// Fetch outdated info for dependencies
+const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
+
+/**
+ * Get CSS class for a dependency version based on outdated status
+ */
+function getVersionClass(info: OutdatedDependencyInfo | undefined): string {
+  if (!info) return 'text-fg-subtle'
+
+  // Red for major versions behind
+  if (info.majorsBehind > 0) return 'text-red-500 cursor-help'
+  // Orange for minor versions behind
+  if (info.minorsBehind > 0) return 'text-orange-500 cursor-help'
+  // Yellow for patch versions behind
+  return 'text-yellow-500 cursor-help'
+}
+
 // Expanded state for each section
 const depsExpanded = ref(false)
 const peerDepsExpanded = ref(false)
@@ -62,8 +82,9 @@ const sortedOptionalDependencies = computed(() => {
             {{ dep }}
           </NuxtLink>
           <span
-            class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
-            :title="version"
+            class="font-mono text-xs text-right truncate"
+            :class="getVersionClass(outdatedDeps[dep])"
+            :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
           >
             {{ version }}
           </span>

app/components/PackageMetricsBadges.vue

@@ -57,12 +57,12 @@ const moduleFormatTooltip = computed(() => {
 
 const hasTypes = computed(() => {
   if (!analysis.value) return false
-  return analysis.value.types.kind === 'included' || analysis.value.types.kind === '@types'
+  return analysis.value.types?.kind === 'included' || analysis.value.types?.kind === '@types'
 })
 
 const typesTooltip = computed(() => {
   if (!analysis.value) return ''
-  switch (analysis.value.types.kind) {
+  switch (analysis.value.types?.kind) {
     case 'included':
       return 'TypeScript types included'
     case '@types':
@@ -82,13 +82,7 @@ const typesHref = computed(() => {
 </script>
 
 <template>
-  <!-- Loading skeleton -->
-  <div v-if="status === 'pending'" class="flex items-center gap-1.5">
-    <span class="skeleton w-8 h-5 rounded" />
-    <span class="skeleton w-12 h-5 rounded" />
-  </div>
-
-  <ul v-else-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
+  <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types -->
     <li v-if="hasTypes">
       <component

app/components/PackageVersions.vue

@@ -8,6 +8,7 @@ import {
   getPrereleaseChannel,
   parseVersion,
 } from '~/utils/versions'
+import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
 
 const props = defineProps<{
   packageName: string
@@ -107,18 +108,12 @@ const otherMajorGroups = ref<
 >([])
 const otherVersionsLoading = ref(false)
 
-// Cached full version list
+// Cached full version list (local to component instance)
 const allVersionsCache = ref<PackageVersionInfo[] | null>(null)
 const loadingVersions = ref(false)
 const hasLoadedAll = ref(false)
 
-// npm registry packument type (simplified)
-interface NpmPackument {
-  versions: Record<string, unknown>
-  time: Record<string, string>
-}
-
-// Load all versions directly from npm registry
+// Load all versions using shared function
 async function loadAllVersions(): Promise<PackageVersionInfo[]> {
   if (allVersionsCache.value) return allVersionsCache.value
 
@@ -136,23 +131,7 @@ async function loadAllVersions(): Promise<PackageVersionInfo[]> {
 
   loadingVersions.value = true
   try {
-    // Fetch directly from npm registry
-    const encodedName = props.packageName.startsWith('@')
-      ? `@${encodeURIComponent(props.packageName.slice(1))}`
-      : encodeURIComponent(props.packageName)
-
-    const data = await $fetch<NpmPackument>(`https://registry.npmjs.org/${encodedName}`)
-
-    // Convert to our format
-    const versions: PackageVersionInfo[] = Object.keys(data.versions)
-      .filter(v => data.time[v])
-      .map(version => ({
-        version,
-        time: data.time[version],
-        hasProvenance: false,
-      }))
-      .sort((a, b) => compareVersions(b.version, a.version))
-
+    const versions = await fetchAllPackageVersions(props.packageName)
     allVersionsCache.value = versions
     hasLoadedAll.value = true
     return versions

app/composables/useNpmRegistry.ts

@@ -6,16 +6,40 @@ import type {
   NpmSearchResult,
   NpmDownloadCount,
   NpmPerson,
+  PackageVersionInfo,
 } from '#shared/types'
+import type { ReleaseType } from 'semver'
+import { maxSatisfying, prerelease, major, minor, diff, gt } from 'semver'
+import { compareVersions } from '~/utils/versions'
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
 const NPM_API = 'https://api.npmjs.org'
 
+// Cache for packument fetches to avoid duplicate requests across components
+const packumentCache = new Map<string, Promise<Packument | null>>()
+
+/**
+ * Fetch a package's full packument data.
+ * Uses caching to avoid duplicate requests.
+ */
 async function fetchNpmPackage(name: string): Promise<Packument> {
   const encodedName = encodePackageName(name)
   return await $fetch<Packument>(`${NPM_REGISTRY}/${encodedName}`)
 }
 
+/**
+ * Fetch a package's packument with caching (returns null on error).
+ * This is useful for batch operations where some packages might not exist.
+ */
+async function fetchCachedPackument(name: string): Promise<Packument | null> {
+  const cached = packumentCache.get(name)
+  if (cached) return cached
+
+  const promise = fetchNpmPackage(name).catch(() => null)
+  packumentCache.set(name, promise)
+  return promise
+}
+
 async function searchNpmPackages(
   query: string,
   options: {
@@ -45,7 +69,11 @@ async function fetchNpmDownloads(
   return await $fetch<NpmDownloadCount>(`${NPM_API}/downloads/point/${period}/${encodedName}`)
 }
 
-function encodePackageName(name: string): string {
+/**
+ * Encode a package name for use in npm registry URLs.
+ * Handles scoped packages (e.g., @scope/name -> @scope%2Fname).
+ */
+export function encodePackageName(name: string): string {
   if (name.startsWith('@')) {
     return `@${encodeURIComponent(name.slice(1))}`
   }
@@ -326,3 +354,198 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
     { default: () => emptySearchResponse },
   )
 }
+
+// ============================================================================
+// Package Versions
+// ============================================================================
+
+// Cache for full version lists
+const allVersionsCache = new Map<string, Promise<PackageVersionInfo[]>>()
+
+/**
+ * Fetch all versions of a package from the npm registry.
+ * Returns version info sorted by version (newest first).
+ * Results are cached to avoid duplicate requests.
+ */
+export async function fetchAllPackageVersions(packageName: string): Promise<PackageVersionInfo[]> {
+  const cached = allVersionsCache.get(packageName)
+  if (cached) return cached
+
+  const promise = (async () => {
+    const encodedName = encodePackageName(packageName)
+    const data = await $fetch<{ versions: Record<string, unknown>; time: Record<string, string> }>(
+      `${NPM_REGISTRY}/${encodedName}`,
+    )
+
+    return Object.keys(data.versions)
+      .filter(v => data.time[v])
+      .map(version => ({
+        version,
+        time: data.time[version],
+        hasProvenance: false, // Would need to check dist.attestations for each version
+      }))
+      .sort((a, b) => compareVersions(b.version, a.version))
+  })()
+
+  allVersionsCache.set(packageName, promise)
+  return promise
+}
+
+// ============================================================================
+// Outdated Dependencies
+// ============================================================================
+
+/** Information about an outdated dependency */
+export interface OutdatedDependencyInfo {
+  /** The resolved version that satisfies the constraint */
+  resolved: string
+  /** The latest available version */
+  latest: string
+  /** How many major versions behind */
+  majorsBehind: number
+  /** How many minor versions behind (when same major) */
+  minorsBehind: number
+  /** The type of version difference */
+  diffType: ReleaseType | null
+}
+
+/**
+ * Check if a version constraint explicitly includes a prerelease tag.
+ * e.g., "^1.0.0-alpha" or ">=2.0.0-beta.1" include prereleases
+ */
+function constraintIncludesPrerelease(constraint: string): boolean {
+  return (
+    /-(alpha|beta|rc|next|canary|dev|preview|pre|experimental)/i.test(constraint) ||
+    /-\d/.test(constraint)
+  )
+}
+
+/**
+ * Check if a constraint is a non-semver value (git URL, file path, etc.)
+ */
+function isNonSemverConstraint(constraint: string): boolean {
+  return (
+    constraint.startsWith('git') ||
+    constraint.startsWith('http') ||
+    constraint.startsWith('file:') ||
+    constraint.startsWith('npm:') ||
+    constraint.startsWith('link:') ||
+    constraint.startsWith('workspace:') ||
+    constraint.includes('/')
+  )
+}
+
+/**
+ * Check if a dependency is outdated.
+ * Returns null if up-to-date or if we can't determine.
+ *
+ * A dependency is only considered "outdated" if the resolved version
+ * is older than the latest version. If the resolved version is newer
+ * (e.g., using ^2.0.0-rc when latest is 1.x), it's not outdated.
+ */
+async function checkDependencyOutdated(
+  packageName: string,
+  constraint: string,
+): Promise<OutdatedDependencyInfo | null> {
+  if (isNonSemverConstraint(constraint)) {
+    return null
+  }
+
+  const packument = await fetchCachedPackument(packageName)
+  if (!packument) return null
+
+  let versions = Object.keys(packument.versions)
+  const includesPrerelease = constraintIncludesPrerelease(constraint)
+
+  if (!includesPrerelease) {
+    versions = versions.filter(v => !prerelease(v))
+  }
+
+  const resolved = maxSatisfying(versions, constraint)
+  if (!resolved) return null
+
+  const latestTag = packument['dist-tags']?.latest
+  if (!latestTag || resolved === latestTag) return null
+
+  // If resolved version is newer than latest, not outdated
+  // (e.g., using ^2.0.0-rc when latest is 1.x)
+  if (gt(resolved, latestTag)) {
+    return null
+  }
+
+  const diffType = diff(resolved, latestTag)
+  const majorsBehind = major(latestTag) - major(resolved)
+  const minorsBehind = majorsBehind === 0 ? minor(latestTag) - minor(resolved) : 0
+
+  return {
+    resolved,
+    latest: latestTag,
+    majorsBehind,
+    minorsBehind,
+    diffType,
+  }
+}
+
+/**
+ * Composable to check for outdated dependencies.
+ * Returns a reactive map of dependency name to outdated info.
+ */
+export function useOutdatedDependencies(
+  dependencies: MaybeRefOrGetter<Record<string, string> | undefined>,
+) {
+  const outdated = ref<Record<string, OutdatedDependencyInfo>>({})
+
+  async function fetchOutdatedInfo(deps: Record<string, string> | undefined) {
+    if (!deps || Object.keys(deps).length === 0) {
+      outdated.value = {}
+      return
+    }
+
+    const results: Record<string, OutdatedDependencyInfo> = {}
+    const entries = Object.entries(deps)
+    const batchSize = 5
+
+    for (let i = 0; i < entries.length; i += batchSize) {
+      const batch = entries.slice(i, i + batchSize)
+      const batchResults = await Promise.all(
+        batch.map(async ([name, constraint]) => {
+          const info = await checkDependencyOutdated(name, constraint)
+          return [name, info] as const
+        }),
+      )
+
+      for (const [name, info] of batchResults) {
+        if (info) {
+          results[name] = info
+        }
+      }
+    }
+
+    outdated.value = results
+  }
+
+  watch(
+    () => toValue(dependencies),
+    deps => {
+      fetchOutdatedInfo(deps)
+    },
+    { immediate: true },
+  )
+
+  return outdated
+}
+
+/**
+ * Get tooltip text for an outdated dependency
+ */
+export function getOutdatedTooltip(info: OutdatedDependencyInfo): string {
+  if (info.majorsBehind > 0) {
+    const s = info.majorsBehind === 1 ? '' : 's'
+    return `${info.majorsBehind} major version${s} behind (latest: ${info.latest})`
+  }
+  if (info.minorsBehind > 0) {
+    const s = info.minorsBehind === 1 ? '' : 's'
+    return `${info.minorsBehind} minor version${s} behind (latest: ${info.latest})`
+  }
+  return `Patch update available (latest: ${info.latest})`
+}