refactor: use object-syntax diff route

Author: danielroe

app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CompareResponse, FileChange } from '#shared/types'
-import { packageRoute } from '~/utils/router'
+import { diffRoute, packageRoute } from '~/utils/router'
 
 definePageMeta({
   name: 'diff',
@@ -91,10 +91,10 @@ const groupedDeps = computed(() => {
 })
 
 const fromVersionUrlPattern = computed(() => {
-  return `/diff/${packageName.value}/v/{version}...${toVersion.value}`
+  return router.resolve(diffRoute(packageName.value, '{version}', toVersion.value)).href
 })
 const toVersionUrlPattern = computed(() => {
-  return `/diff/${packageName.value}/v/${fromVersion.value}...{version}`
+  return router.resolve(diffRoute(packageName.value, fromVersion.value, '{version}')).href
 })
 
 useSeoMeta({

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

@@ -883,7 +883,7 @@ const showSkeleton = shallowRef(false)
                 displayVersion && latestVersion && displayVersion.version !== latestVersion.version
               "
               variant="button-secondary"
-              :to="`/diff/${pkg.name}/v/${displayVersion.version}...${latestVersion.version}`"
+              :to="diffRoute(pkg.name, displayVersion.version, latestVersion.version)"
               classicon="i-lucide:diff"
             >
               {{ $t('compare.compare_versions') }}
@@ -1046,7 +1046,7 @@ const showSkeleton = shallowRef(false)
               class="sm:hidden"
             >
               <NuxtLink
-                :to="`/diff/${pkg.name}/v/${displayVersion.version}...${latestVersion.version}`"
+                :to="diffRoute(pkg.name, displayVersion.version, latestVersion.version)"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-lucide:diff w-4 h-4" aria-hidden="true" />

app/utils/router.ts

@@ -22,3 +22,20 @@ export function packageRoute(packageName: string, version?: string | null): Rout
     },
   }
 }
+
+export function diffRoute(
+  packageName: string,
+  fromVersion: string,
+  toVersion: string,
+): RouteLocationRaw {
+  const [org, name = ''] = packageName.startsWith('@') ? packageName.split('/') : ['', packageName]
+
+  return {
+    name: 'diff',
+    params: {
+      org: org || undefined,
+      packageName: name,
+      versionRange: `${fromVersion}...${toVersion}`,
+    },
+  }
+}