wip

Author: gameroman

app/components/Compare/ReplacementSuggestion.vue

@@ -10,14 +10,8 @@ const props = defineProps<{
   showAction?: boolean
 }>()
 
-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`
-})
+const emit = defineEmits<{ addNoDep: [] }>()
+const { externalUrl, nodeVersion, replacementName } = useReplacements(props.replacement)
 </script>
 
 <template>
@@ -35,45 +29,40 @@ const docUrl = computed(() => {
     />
     <div class="min-w-0 flex-1">
       <p class="font-medium">{{ packageName }}: {{ $t('package.replacement.title') }}</p>
-      <p class="text-xs mt-0.5 opacity-80">
+      <div class="text-xs mt-0.5 opacity-80">
         <template v-if="replacement.type === 'native'">
           {{
             $t('package.replacement.native', {
-              replacement: replacement.replacement,
-              nodeVersion: replacement.nodeVersion,
+              replacement: replacementName,
+              nodeVersion: nodeVersion || 'unknown',
             })
           }}
         </template>
         <template v-else-if="replacement.type === 'simple'">
           {{
             $t('package.replacement.simple', {
-              replacement: replacement.replacement,
+              replacement: replacementName,
               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>
-      </p>
+      </div>
     </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>
 
-    <!-- Info link -->
-    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
+    <LinkBase v-else-if="externalUrl" :to="externalUrl" variant="button-secondary" size="small">
       {{ $t('package.replacement.learn_more') }}
     </LinkBase>
   </div>

app/components/Package/Replacement.vue

@@ -1,32 +1,11 @@
 <script setup lang="ts">
-import type { ModuleReplacement, KnownUrl } from 'module-replacements'
+import type { ModuleReplacement } from 'module-replacements'
 
 const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-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
-})
+const { externalUrl, nodeVersion, replacementName } = useReplacements(props.replacement)
 </script>
 
 <template>
@@ -37,24 +16,20 @@ const nodeVersion = computed(() => {
       <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 v-if="replacement.nodeFeatureId?.moduleName">
-          {{ replacement.nodeFeatureId.moduleName }}
-        </code>
-        <code v-else-if="replacement.description">
-          {{ replacement.description }}
-        </code>
-        <span v-else>{{ replacement.id }}</span>
+        <code>{{ replacementName }}</code>
       </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">
@@ -64,6 +39,7 @@ const nodeVersion = computed(() => {
         ><code>{{ replacement.example }}</code></pre>
       </div>
     </div>
+
     <i18n-t
       v-else-if="replacement.type === 'documented'"
       keypath="package.replacement.documented"
@@ -84,12 +60,11 @@ const nodeVersion = computed(() => {
         </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"

app/composables/useReplacements.ts

@@ -0,0 +1,38 @@
+import { computed } from 'vue'
+import type { ModuleReplacement, KnownUrl } from 'module-replacements'
+
+export function useReplacements(replacement: ModuleReplacement | null | undefined) {
+  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(replacement?.url))
+
+  const nodeVersion = computed(() => {
+    const nodeEngine = replacement?.engines?.find(e => e.engine === 'nodejs')
+    return nodeEngine?.minVersion || null
+  })
+
+  const replacementName = computed(() => {
+    if (!replacement) return ''
+    return replacement.nodeFeatureId?.moduleName || replacement.description || replacement.id || ''
+  })
+
+  return {
+    externalUrl,
+    nodeVersion,
+    replacementName,
+  }
+}