Revert "wip"

This reverts commit f89546e.

Author: gameroman

app/components/Compare/ReplacementSuggestion.vue

@@ -10,8 +10,14 @@ const props = defineProps<{
   showAction?: boolean
 }>()
 
-const emit = defineEmits<{ addNoDep: [] }>()
-const { externalUrl, nodeVersion, replacementName } = useReplacements(props.replacement)
+const emit = defineEmits<{
+  addNoDep: []
+}>()
+
+const docUrl = computed(() => {
+  if (props.replacement.type !== 'documented' || !props.replacement.docPath) return null
+  return `https://e18e.dev/docs/replacements/${props.replacement.docPath}.html`
+})
 </script>
 
 <template>
@@ -29,40 +35,45 @@ const { externalUrl, nodeVersion, replacementName } = useReplacements(props.repl
     />
     <div class="min-w-0 flex-1">
       <p class="font-medium">{{ packageName }}: {{ $t('package.replacement.title') }}</p>
-      <div class="text-xs mt-0.5 opacity-80">
+      <p class="text-xs mt-0.5 opacity-80">
         <template v-if="replacement.type === 'native'">
           {{
             $t('package.replacement.native', {
-              replacement: replacementName,
-              nodeVersion: nodeVersion || 'unknown',
+              replacement: replacement.replacement,
+              nodeVersion: replacement.nodeVersion,
             })
           }}
         </template>
         <template v-else-if="replacement.type === 'simple'">
           {{
             $t('package.replacement.simple', {
-              replacement: replacementName,
+              replacement: replacement.replacement,
               community: $t('package.replacement.community'),
             })
           }}
         </template>
         <template v-else-if="replacement.type === 'documented'">
           {{
-            $t('package.replacement.documented', { community: $t('package.replacement.community') })
+            $t('package.replacement.documented', {
+              community: $t('package.replacement.community'),
+            })
           }}
         </template>
-      </div>
+      </p>
     </div>
 
+    <!-- No dependency action button -->
     <ButtonBase
       v-if="variant === 'nodep' && showAction !== false"
       size="small"
+      :aria-label="$t('compare.no_dependency.add_column')"
       @click="emit('addNoDep')"
     >
       {{ $t('package.replacement.consider_no_dep') }}
     </ButtonBase>
 
-    <LinkBase v-else-if="externalUrl" :to="externalUrl" variant="button-secondary" size="small">
+    <!-- Info link -->
+    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
       {{ $t('package.replacement.learn_more') }}
     </LinkBase>
   </div>

app/components/Package/Replacement.vue

@@ -1,11 +1,32 @@
 <script setup lang="ts">
-import type { ModuleReplacement } from 'module-replacements'
+import type { ModuleReplacement, KnownUrl } from 'module-replacements'
 
 const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-const { externalUrl, nodeVersion, replacementName } = useReplacements(props.replacement)
+const resolveUrl = (url?: KnownUrl) => {
+  if (!url) return null
+  if (typeof url === 'string') return url
+
+  switch (url.type) {
+    case 'mdn':
+      return `https://developer.mozilla.org/en-US/docs/${url.id}`
+    case 'node':
+      return `https://nodejs.org/${url.id}`
+    case 'e18e':
+      return `https://e18e.dev/docs/replacements/${url.id}`
+    default:
+      return null
+  }
+}
+
+const externalUrl = computed(() => resolveUrl(props.replacement.url))
+
+const nodeVersion = computed(() => {
+  const nodeEngine = props.replacement.engines?.find(e => e.engine === 'nodejs')
+  return nodeEngine?.minVersion || null
+})
 </script>
 
 <template>
@@ -16,20 +37,24 @@ const { externalUrl, nodeVersion, replacementName } = useReplacements(props.repl
       <span class="i-lucide:lightbulb w-4 h-4" aria-hidden="true" />
       {{ $t('package.replacement.title') }}
     </h2>
-
     <i18n-t
       v-if="replacement.type === 'native'"
       keypath="package.replacement.native"
       scope="global"
     >
       <template #replacement>
-        <code>{{ replacementName }}</code>
+        <code v-if="replacement.nodeFeatureId?.moduleName">
+          {{ replacement.nodeFeatureId.moduleName }}
+        </code>
+        <code v-else-if="replacement.description">
+          {{ replacement.description }}
+        </code>
+        <span v-else>{{ replacement.id }}</span>
       </template>
       <template #nodeVersion>
         {{ nodeVersion || 'unknown' }}
       </template>
     </i18n-t>
-
     <div v-else-if="replacement.type === 'simple'" class="block">
       <div class="mb-2">{{ replacement.description }}</div>
       <div v-if="replacement.example">
@@ -39,7 +64,6 @@ const { externalUrl, nodeVersion, replacementName } = useReplacements(props.repl
         ><code>{{ replacement.example }}</code></pre>
       </div>
     </div>
-
     <i18n-t
       v-else-if="replacement.type === 'documented'"
       keypath="package.replacement.documented"
@@ -60,11 +84,12 @@ const { externalUrl, nodeVersion, replacementName } = useReplacements(props.repl
         </a>
       </template>
     </i18n-t>
-
     <template v-else-if="replacement.type === 'removal'">
       {{ replacement.description }}
     </template>
-
+    <template v-else>
+      {{ $t('package.replacement.none') }}
+    </template>
     <a
       v-if="externalUrl"
       :href="externalUrl"