use a simpler approach

Author: gameroman

app/components/Package/Replacement.vue

@@ -2,17 +2,17 @@
 import type { ModuleReplacement } from 'module-replacements'
 
 const props = defineProps<{
-  replacements: ModuleReplacement
+  replacement: ModuleReplacement
 }>()
 
 const mdnUrl = computed(() => {
-  if (props.replacements.type !== 'native' || !props.replacements.mdnPath) return null
-  return `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/${props.replacements.mdnPath}`
+  if (props.replacement.type !== 'native' || !props.replacement.mdnPath) return null
+  return `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/${props.replacement.mdnPath}`
 })
 
 const docPath = computed(() => {
-  if (props.replacements.type !== 'documented' || !props.replacements.docPath) return null
-  return `https://e18e.dev/docs/replacements/${props.replacements.docPath}.html`
+  if (props.replacement.type !== 'documented' || !props.replacement.docPath) return null
+  return `https://e18e.dev/docs/replacements/${props.replacement.docPath}.html`
 })
 </script>
 
@@ -22,24 +22,24 @@ const docPath = computed(() => {
   >
     <h2 class="font-medium mb-1 flex items-center gap-2">
       <span class="i-lucide:lightbulb w-4 h-4" aria-hidden="true" />
-      {{ $t('package.replacements.title') }}
+      {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
       <i18n-t
-        v-if="replacements.type === 'native'"
-        keypath="package.replacements.native"
+        v-if="replacement.type === 'native'"
+        keypath="package.replacement.native"
         scope="global"
       >
         <template #replacements>
-          {{ replacements.replacements }}
+          {{ replacement.replacements }}
         </template>
         <template #nodeVersion>
-          {{ replacements.nodeVersion }}
+          {{ replacement.nodeVersion }}
         </template>
       </i18n-t>
       <i18n-t
-        v-else-if="replacements.type === 'simple'"
-        keypath="package.replacements.simple"
+        v-else-if="replacement.type === 'simple'"
+        keypath="package.replacement.simple"
         scope="global"
       >
         <template #community>
@@ -49,17 +49,17 @@ const docPath = computed(() => {
             rel="noopener noreferrer"
             class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
           >
-            {{ $t('package.replacements.community') }}
+            {{ $t('package.replacement.community') }}
             <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
           </a>
         </template>
         <template #replacements>
-          {{ replacements.replacements }}
+          {{ replacement.replacements }}
         </template>
       </i18n-t>
       <i18n-t
-        v-else-if="replacements.type === 'documented'"
-        keypath="package.replacements.documented"
+        v-else-if="replacement.type === 'documented'"
+        keypath="package.replacement.documented"
         scope="global"
       >
         <template #community>
@@ -69,13 +69,13 @@ const docPath = computed(() => {
             rel="noopener noreferrer"
             class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
           >
-            {{ $t('package.replacements.community') }}
+            {{ $t('package.replacement.community') }}
             <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
           </a>
         </template>
       </i18n-t>
       <template v-else>
-        {{ $t('package.replacements.none') }}
+        {{ $t('package.replacement.none') }}
       </template>
       <a
         v-if="mdnUrl"
@@ -84,7 +84,7 @@ const docPath = computed(() => {
         rel="noopener noreferrer"
         class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
       >
-        {{ $t('package.replacements.mdn') }}
+        {{ $t('package.replacement.mdn') }}
         <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
       </a>
       <a
@@ -94,7 +94,7 @@ const docPath = computed(() => {
         rel="noopener noreferrer"
         class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
       >
-        {{ $t('package.replacements.learn_more') }}
+        {{ $t('package.replacement.learn_more') }}
         <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
       </a>
     </p>

app/composables/useModuleReplacement.ts

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

app/composables/useModuleReplacements.ts

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

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

@@ -1,11 +1,11 @@
 import { all, type ModuleReplacement } from 'module-replacements'
 
-export default defineEventHandler((event): ModuleReplacement[] | null => {
+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 replacements = mapping.replacements.map(r => all.replacements[r]!)
-  if (!replacements.length) return null
-  return replacements
+  const replacement = mapping.replacements[0]
+  if (!replacement) return null
+  return all.replacements[replacement] ?? null
 })