fix: show and link aliased deps correctly

Author: Flo0806

app/components/Package/Dependencies.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
-import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
+import { getOutdatedTooltip, getVersionClass, parseDepValue } from '~/utils/npm/outdated-dependencies'
 
 const { t } = useI18n()
 
@@ -71,24 +71,34 @@ const sortedOptionalDependencies = computed(() => {
   return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
 
-// Get version tooltip
-function getDepVersionTooltip(dep: string, version: string) {
-  const outdated = outdatedDeps.value[dep]
+// Get version tooltip (key for outdated lookup, realName for vuln/replacement lookup)
+function getDepVersionTooltip(key: string, realName: string, version: string) {
+  const outdated = outdatedDeps.value[key]
   if (outdated) return getOutdatedTooltip(outdated, t)
-  if (getVulnerableDepInfo(dep) || getDeprecatedDepInfo(dep)) return version
-  if (replacementDeps.value[dep]) return t('package.dependencies.has_replacement')
+  if (getVulnerableDepInfo(realName) || getDeprecatedDepInfo(realName)) return version
+  if (replacementDeps.value[realName]) return t('package.dependencies.has_replacement')
   return version
 }
 
-// Get version class
-function getDepVersionClass(dep: string) {
-  const outdated = outdatedDeps.value[dep]
+// Get version class (key for outdated lookup, realName for vuln/replacement lookup)
+function getDepVersionClass(key: string, realName: string) {
+  const outdated = outdatedDeps.value[key]
   if (outdated) return getVersionClass(outdated)
-  if (getVulnerableDepInfo(dep) || getDeprecatedDepInfo(dep)) return getVersionClass(undefined)
-  if (replacementDeps.value[dep]) return 'text-amber-700 dark:text-amber-500'
+  if (getVulnerableDepInfo(realName) || getDeprecatedDepInfo(realName)) return getVersionClass(undefined)
+  if (replacementDeps.value[realName]) return 'text-amber-700 dark:text-amber-500'
   return getVersionClass(undefined)
 }
 
+// Resolve npm: aliases — returns the real package name for links
+function depName(key: string, value: string): string {
+  return parseDepValue(value).name ?? key
+}
+
+// Resolve npm: aliases — returns the version range for display
+function depRange(value: string): string {
+  return parseDepValue(value).range ?? value
+}
+
 const numberFormatter = useNumberFormatter()
 </script>
 
@@ -114,7 +124,7 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(depName(dep, version))" class="block truncate" dir="ltr">
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -133,7 +143,7 @@ const numberFormatter = useNumberFormatter()
               </button>
             </TooltipApp>
             <TooltipApp
-              v-if="replacementDeps[dep]"
+              v-if="replacementDeps[depName(dep, version)]"
               class="shrink-0 text-amber-700 dark:text-amber-500"
               :text="$t('package.dependencies.has_replacement')"
             >
@@ -146,43 +156,43 @@ const numberFormatter = useNumberFormatter()
               </button>
             </TooltipApp>
             <LinkBase
-              v-if="getVulnerableDepInfo(dep)"
-              :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
+              v-if="getVulnerableDepInfo(depName(dep, version))"
+              :to="packageRoute(depName(dep, version), getVulnerableDepInfo(depName(dep, version))!.version)"
               class="shrink-0"
-              :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
+              :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(depName(dep, version))!.counts)]"
               :title="
                 $t('package.dependencies.vulnerabilities_count', {
-                  count: getVulnerableDepInfo(dep)!.counts.total,
+                  count: getVulnerableDepInfo(depName(dep, version))!.counts.total,
                 })
               "
               classicon="i-lucide:shield-check"
             >
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </LinkBase>
             <LinkBase
-              v-if="getDeprecatedDepInfo(dep)"
-              :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
+              v-if="getDeprecatedDepInfo(depName(dep, version))"
+              :to="packageRoute(depName(dep, version), getDeprecatedDepInfo(depName(dep, version))!.version)"
               class="shrink-0 text-purple-700 dark:text-purple-500"
-              :title="getDeprecatedDepInfo(dep)!.message"
+              :title="getDeprecatedDepInfo(depName(dep, version))!.message"
               classicon="i-lucide:octagon-alert"
             >
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
             <LinkBase
-              :to="packageRoute(dep, version)"
+              :to="packageRoute(depName(dep, version), depRange(version))"
               class="block truncate"
-              :class="getDepVersionClass(dep)"
-              :title="getDepVersionTooltip(dep, version)"
+              :class="getDepVersionClass(dep, depName(dep, version))"
+              :title="getDepVersionTooltip(dep, depName(dep, version), depRange(version))"
             >
-              {{ version }}
+              {{ depRange(version) }}
             </LinkBase>
             <span v-if="outdatedDeps[dep]" class="sr-only">
               ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
-            <span v-if="getVulnerableDepInfo(dep)" class="sr-only">
+            <span v-if="getVulnerableDepInfo(depName(dep, version))" class="sr-only">
               ({{
                 $t('package.dependencies.vulnerabilities_count', {
-                  count: getVulnerableDepInfo(dep)!.counts.total,
+                  count: getVulnerableDepInfo(depName(dep, version))!.counts.total,
                 })
               }})
             </span>
@@ -227,20 +237,20 @@ const numberFormatter = useNumberFormatter()
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-2 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%] break-words" dir="ltr">
+            <LinkBase :to="packageRoute(depName(peer.name, peer.version))" class="block max-w-[70%] break-words" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
               {{ $t('package.dependencies.optional') }}
             </TagStatic>
           </div>
           <LinkBase
-            :to="packageRoute(peer.name, peer.version)"
+            :to="packageRoute(depName(peer.name, peer.version), depRange(peer.version))"
             class="block truncate max-w-[30%]"
-            :title="peer.version"
+            :title="depRange(peer.version)"
             dir="ltr"
           >
-            {{ peer.version }}
+            {{ depRange(peer.version) }}
           </LinkBase>
         </li>
       </ul>
@@ -288,16 +298,16 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
+          <LinkBase :to="packageRoute(depName(dep, version))" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase
-            :to="packageRoute(dep, version)"
+            :to="packageRoute(depName(dep, version), depRange(version))"
             class="block truncate"
-            :title="version"
+            :title="depRange(version)"
             dir="ltr"
           >
-            {{ version }}
+            {{ depRange(version) }}
           </LinkBase>
         </li>
       </ul>

app/composables/npm/useOutdatedDependencies.ts

@@ -3,8 +3,8 @@ import { getVersionsBatch } from 'fast-npm-meta'
 import { maxSatisfying, prerelease, major, minor, diff, gt } from 'semver'
 import {
   type OutdatedDependencyInfo,
-  isNonSemverConstraint,
   constraintIncludesPrerelease,
+  parseDepValue,
 } from '~/utils/npm/outdated-dependencies'
 
 const BATCH_SIZE = 50
@@ -67,16 +67,18 @@ export function useOutdatedDependencies(
       return
     }
 
-    const semverEntries = Object.entries(deps).filter(
-      ([, constraint]) => !isNonSemverConstraint(constraint),
-    )
+    // Resolve npm: aliases and filter out non-semver constraints
+    const resolvedEntries = Object.entries(deps).map(([key, value]) => {
+      const parsed = parseDepValue(value)
+      return { key, realName: parsed.name ?? key, range: parsed.range }
+    }).filter((e): e is typeof e & { range: string } => e.range !== null)
 
-    if (semverEntries.length === 0) {
+    if (resolvedEntries.length === 0) {
       outdated.value = {}
       return
     }
 
-    const packageNames = semverEntries.map(([name]) => name)
+    const packageNames = [...new Set(resolvedEntries.map(e => e.realName))]
 
     const chunks: string[][] = []
     for (let i = 0; i < packageNames.length; i += BATCH_SIZE) {
@@ -95,16 +97,16 @@ export function useOutdatedDependencies(
     }
 
     const results: Record<string, OutdatedDependencyInfo> = {}
-    for (const [name, constraint] of semverEntries) {
-      const data = versionMap.get(name)
+    for (const { key, realName, range } of resolvedEntries) {
+      const data = versionMap.get(realName)
       if (!data) continue
 
       const latestTag = data.distTags.latest
       if (!latestTag) continue
 
-      const info = resolveOutdated(data.versions, latestTag, constraint)
+      const info = resolveOutdated(data.versions, latestTag, range)
       if (info) {
-        results[name] = info
+        results[key] = info
       }
     }
 

app/utils/npm/outdated-dependencies.ts

@@ -25,15 +25,57 @@ export function constraintIncludesPrerelease(constraint: string): boolean {
   )
 }
 
+/** Parsed result of an npm dependency value */
+export interface ParsedDepValue {
+  /** The real package name (different from key only for aliases) */
+  name: string | null
+  /** The semver range or version, null for non-resolvable values (file:, git, etc.) */
+  range: string | null
+}
+
+/**
+ * Parse a dependency value which may be a semver range, an npm alias, or a non-semver reference.
+ *
+ * Examples:
+ *   "^4.2.0"                    { name: null, range: "^4.2.0" }
+ *   "npm:string-width@^4.2.0"   { name: "string-width", range: "^4.2.0" }
+ *   "npm:@scope/pkg@^1.0.0"     { name: "@scope/pkg", range: "^1.0.0" }
+ *   "file:../foo"               { name: null, range: null }
+ */
+export function parseDepValue(value: string): ParsedDepValue {
+  if (value.startsWith('npm:')) {
+    const aliasBody = value.slice(4) // strip "npm:"
+    // Scoped: @scope/name@range
+    if (aliasBody.startsWith('@')) {
+      const secondAt = aliasBody.indexOf('@', 1)
+      if (secondAt !== -1) {
+        return { name: aliasBody.slice(0, secondAt), range: aliasBody.slice(secondAt + 1) }
+      }
+      return { name: aliasBody, range: null }
+    }
+    // Unscoped: name@range
+    const atIndex = aliasBody.indexOf('@')
+    if (atIndex !== -1) {
+      return { name: aliasBody.slice(0, atIndex), range: aliasBody.slice(atIndex + 1) }
+    }
+    return { name: aliasBody, range: null }
+  }
+
+  if (isNonSemverConstraint(value)) {
+    return { name: null, range: null }
+  }
+
+  return { name: null, range: value }
+}
+
 /**
  * Check if a constraint is a non-semver value (git URL, file path, etc.)
  */
-export function isNonSemverConstraint(constraint: string): boolean {
+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('/')