don't render 'unknown'

Author: gameroman

app/components/Compare/ReplacementSuggestion.vue

@@ -41,11 +41,14 @@ const nodeVersion = computed(() => {
       <p class="text-xs mt-0.5 opacity-80">
         <template v-if="replacement.type === 'native'">
           {{
-            $t('package.replacement.native', {
-              replacement:
-                replacement.nodeFeatureId?.moduleName || replacement.description || replacement.id,
-              nodeVersion: nodeVersion || 'unknown',
-            })
+            nodeVersion
+              ? $t('package.replacement.native', {
+                  replacement: replacement.description || replacement.id,
+                  nodeVersion,
+                })
+              : $t('package.replacement.native_no_version', {
+                  replacement: replacement.description || replacement.id,
+                })
           }}
         </template>
         <template v-else-if="replacement.type === 'simple'">

app/components/Package/Replacement.vue

@@ -24,7 +24,9 @@ const nodeVersion = computed(() => {
     </h2>
     <i18n-t
       v-if="replacement.type === 'native'"
-      keypath="package.replacement.native"
+      :keypath="
+        nodeVersion ? 'package.replacement.native' : 'package.replacement.native_no_version'
+      "
       scope="global"
     >
       <template #replacement>
@@ -33,8 +35,8 @@ const nodeVersion = computed(() => {
         </code>
         <span v-else>{{ replacement.id }}</span>
       </template>
-      <template #nodeVersion>
-        {{ nodeVersion || 'unknown' }}
+      <template v-if="nodeVersion" `#nodeVersion`>
+        {{ nodeVersion }}
       </template>
     </i18n-t>
     <div v-else-if="replacement.type === 'simple'" class="block">

i18n/locales/en.json

@@ -246,6 +246,7 @@
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
+      "native_no_version": "This can be replaced with {replacement}.",
       "simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
       "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",