fix: route dependency version ranges to pkg page with semver filter instead of 404

Dependency links with version ranges (e.g. "^18.0.0 || ^19.0.0", ">15 <=16.0.2") previously
navigated to a non-existent version page and 404'd.

Now `packageRoute()` distinguishes exact versions from ranges: exact versions link to the version
page, while ranges link to the package page with `?semver=<range>#versions`, pre-populating the
existing "Filter by semver" input.

Closes #1120

Author: serhalp

app/components/Package/Versions.vue

@@ -105,8 +105,8 @@ const effectiveCurrentVersion = computed(
   () => props.selectedVersion ?? props.distTags.latest ?? undefined,
 )
 
-// Semver range filter
-const semverFilter = ref('')
+// Semver range filter (initialized from ?semver= query param if present)
+const semverFilter = ref((typeof route.query.semver === 'string' ? route.query.semver : '') || '')
 
 // Load all versions when a valid semver filter is entered
 watch(semverFilter, async newFilter => {

app/utils/router.ts

@@ -1,4 +1,5 @@
 import type { RouteLocationRaw } from 'vue-router'
+import { valid as isValidSingleVersion } from 'semver'
 import { splitPackageName } from '~/utils/package-name'
 
 export function packageRoute(
@@ -9,15 +10,28 @@ export function packageRoute(
   const { org, name } = splitPackageName(packageName)
 
   if (version) {
+    if (isValidSingleVersion(version)) {
+      return {
+        name: 'package-version',
+        params: {
+          org,
+          name,
+          version,
+        },
+      }
+    }
+
+    // If we have a version param but it isn't a *specific, single version* (e.g. 1.2.3), treat it
+    // as a semver specifier (e.g. ^1.2.3 or * or 3||4 or >3<=5) and route to the package page with
+    // the semver query param, which will pre-populate the version selector and show matching versions.
     return {
-      name: 'package-version',
+      name: 'package',
       params: {
         org,
         name,
-        // remove spaces to be correctly resolved by router
-        version: version.replace(/\s+/g, ''),
       },
-      hash,
+      query: { semver: version },
+      hash: hash ?? '#versions',
     }
   }
 

test/unit/app/utils/router.spec.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest'
+import { diffRoute, packageRoute } from '../../../../app/utils/router'
+
+describe('packageRoute', () => {
+  describe('without version', () => {
+    it('returns package route for unscoped package', () => {
+      expect(packageRoute('react')).toEqual({
+        name: 'package',
+        params: { org: '', name: 'react' },
+      })
+    })
+
+    it('returns package route for scoped package', () => {
+      expect(packageRoute('@angular/core')).toEqual({
+        name: 'package',
+        params: { org: '@angular', name: 'core' },
+      })
+    })
+  })
+
+  describe('with exact version', () => {
+    it('returns version route for unscoped package', () => {
+      expect(packageRoute('react', '18.0.0')).toEqual({
+        name: 'package-version',
+        params: { org: '', name: 'react', version: '18.0.0' },
+      })
+    })
+
+    it('returns version route for scoped package', () => {
+      expect(packageRoute('@angular/core', '18.0.0')).toEqual({
+        name: 'package-version',
+        params: { org: '@angular', name: 'core', version: '18.0.0' },
+      })
+    })
+
+    it('returns version route for prerelease version', () => {
+      expect(packageRoute('vue', '3.5.0-beta.1')).toEqual({
+        name: 'package-version',
+        params: { org: '', name: 'vue', version: '3.5.0-beta.1' },
+      })
+    })
+  })
+
+  describe('with version range', () => {
+    it('returns package route with semver query for caret range', () => {
+      expect(packageRoute('react', '^18.0.0')).toEqual({
+        name: 'package',
+        params: { org: '', name: 'react' },
+        query: { semver: '^18.0.0' },
+        hash: '#versions',
+      })
+    })
+
+    it('returns package route with semver query for tilde range', () => {
+      expect(packageRoute('react', '~18.2.0')).toEqual({
+        name: 'package',
+        params: { org: '', name: 'react' },
+        query: { semver: '~18.2.0' },
+        hash: '#versions',
+      })
+    })
+
+    it('returns package route with semver query for union range', () => {
+      expect(packageRoute('@angular/core', '^18.0.0 || ^19.0.0 || ^20.0.0')).toEqual({
+        name: 'package',
+        params: { org: '@angular', name: 'core' },
+        query: { semver: '^18.0.0 || ^19.0.0 || ^20.0.0' },
+        hash: '#versions',
+      })
+    })
+
+    it('returns package route with semver query for comparator range', () => {
+      expect(packageRoute('typescript', '>15 <=16.0.2')).toEqual({
+        name: 'package',
+        params: { org: '', name: 'typescript' },
+        query: { semver: '>15 <=16.0.2' },
+        hash: '#versions',
+      })
+    })
+
+    it('returns package route with semver query for wildcard', () => {
+      expect(packageRoute('lodash', '*')).toEqual({
+        name: 'package',
+        params: { org: '', name: 'lodash' },
+        query: { semver: '*' },
+        hash: '#versions',
+      })
+    })
+
+    it('returns package route with semver query for dist-tag', () => {
+      expect(packageRoute('nuxt', 'latest')).toEqual({
+        name: 'package',
+        params: { org: '', name: 'nuxt' },
+        query: { semver: 'latest' },
+        hash: '#versions',
+      })
+    })
+  })
+
+  describe('with null/undefined version', () => {
+    it('returns package route for null version', () => {
+      expect(packageRoute('react', null)).toEqual({
+        name: 'package',
+        params: { org: '', name: 'react' },
+      })
+    })
+  })
+})
+
+describe('diffRoute', () => {
+  it('returns diff route for unscoped package', () => {
+    expect(diffRoute('react', '17.0.0', '18.0.0')).toEqual({
+      name: 'diff',
+      params: { org: undefined, packageName: 'react', versionRange: '17.0.0...18.0.0' },
+    })
+  })
+
+  it('returns diff route for scoped package', () => {
+    expect(diffRoute('@angular/core', '17.0.0', '18.0.0')).toEqual({
+      name: 'diff',
+      params: { org: '@angular', packageName: 'core', versionRange: '17.0.0...18.0.0' },
+    })
+  })
+})