fix: use url from mapping when provided

Author: gameroman

app/components/Package/Replacement.vue

@@ -3,10 +3,13 @@ import type { ModuleReplacement } from 'module-replacements'
 import { resolveReplacementUrl } from '~/utils/resolve-replacement-url'
 
 const props = defineProps<{
+  mapping: ModuleReplacementMapping
   replacement: ModuleReplacement
 }>()
 
-const externalUrl = computed(() => resolveReplacementUrl(props.replacement.url))
+const externalUrl = computed(() =>
+  resolveReplacementUrl(props.mapping.url ?? props.replacement.url),
+)
 
 const nodeVersion = computed(() => {
   const nodeEngine = props.replacement.engines?.find(e => e.engine === 'nodejs')

app/composables/npm/useReplacementDependencies.ts

@@ -8,7 +8,7 @@ async function fetchReplacements(
   const results = await Promise.all(
     names.map(async name => {
       try {
-        const replacement = await $fetch<ModuleReplacement | null>(`/api/replacements/${name}`)
+        const { replacement } = await $fetch<ModuleReplacement | null>(`/api/replacements/${name}`)
         return { name, replacement }
       } catch {
         return { name, replacement: null }

app/composables/useModuleReplacement.ts

@@ -1,5 +1,7 @@
 import type { ModuleReplacement } from 'module-replacements'
 
 export function useModuleReplacement(packageName: MaybeRefOrGetter<string>) {
-  return useLazyFetch<ModuleReplacement | null>(() => `/api/replacements/${toValue(packageName)}`)
+  return useLazyFetch<{ mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null>(
+    () => `/api/replacements/${toValue(packageName)}`,
+  )
 }

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

@@ -876,7 +876,11 @@ const showSkeleton = shallowRef(false)
 
         <div class="space-y-6" :class="$style.areaVulns">
           <!-- Bad package warning -->
-          <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+          <PackageReplacement
+            v-if="moduleReplacement"
+            :mapping="moduleReplacement.mapping"
+            :replacement="moduleReplacement.replacement"
+          />
           <!-- Size / dependency increase notice -->
           <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
           <!-- Vulnerability scan -->

server/api/replacements/[...pkg].get.ts

@@ -1,11 +1,15 @@
 import { all, type ModuleReplacement } from 'module-replacements'
 
-export default defineEventHandler((event): ModuleReplacement | null => {
-  const pkg = getRouterParam(event, 'pkg')
-  if (!pkg) return null
-  const mapping = all.mappings[pkg]
-  if (!mapping) return null
-  const replacementId = mapping.replacements[0]
-  if (!replacementId) return null
-  return all.replacements[replacementId] ?? null
-})
+export default defineEventHandler(
+  (event): { mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null => {
+    const pkg = getRouterParam(event, 'pkg')
+    if (!pkg) return null
+    const mapping = all.mappings[pkg]
+    if (!mapping) return null
+    const replacementId = mapping.replacements[0]
+    if (!replacementId) return null
+    const replacement = all.replacements[replacementId]
+    if (!replacement) return null
+    return { mapping, replacement }
+  },
+)