feat(ui): display all engines in Compatibility section and make common ones pretty (npmx-dev#1004)

Author: wojtekmaj

app/components/Package/Compatibility.vue

@@ -1,28 +1,55 @@
 <script setup lang="ts">
 const props = defineProps<{
-  engines?: {
-    node?: string
-    npm?: string
-  }
+  engines?: Record<string, string>
 }>()
+
+const engineNames: Record<string, string> = {
+  bun: 'Bun',
+  node: 'Node.js',
+  npm: 'npm',
+}
+
+// Map engine name to icon class
+const engineIcons: Record<string, string> = {
+  bun: 'i-simple-icons:bun',
+  node: 'i-simple-icons:nodedotjs',
+  npm: 'i-simple-icons:npm',
+}
+
+function getName(engine: string): string {
+  return engineNames[engine] || engine
+}
+
+function getIcon(engine: string): string {
+  return engineIcons[engine] || 'i-carbon:code'
+}
+
+const sortedEngines = computed(() => {
+  const entries = Object.entries(props.engines ?? {})
+  return entries.sort(([a], [b]) => a.localeCompare(b))
+})
 </script>
 <template>
   <CollapsibleSection
-    v-if="engines && (engines.node || engines.npm)"
+    v-if="sortedEngines.length"
     :title="$t('package.compatibility')"
     id="compatibility"
   >
     <dl class="space-y-2">
-      <div v-if="engines.node" class="flex justify-between gap-4 py-1">
-        <dt class="text-fg-muted text-sm shrink-0">node</dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="engines.node">
-          {{ engines.node }}
-        </dd>
-      </div>
-      <div v-if="engines.npm" class="flex justify-between gap-4 py-1">
-        <dt class="text-fg-muted text-sm shrink-0">npm</dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="engines.npm">
-          {{ engines.npm }}
+      <div
+        v-for="[engine, version] in sortedEngines"
+        :key="engine"
+        class="flex justify-between gap-4 py-1"
+      >
+        <dt class="flex items-center gap-2 text-fg-muted text-sm shrink-0">
+          <span
+            :class="[getIcon(engine), 'inline-block w-4 h-4 shrink-0 text-fg-muted']"
+            aria-hidden="true"
+          />
+          {{ getName(engine) }}
+        </dt>
+        <dd class="font-mono text-sm text-fg text-end" :title="version">
+          {{ version }}
         </dd>
       </div>
     </dl>

shared/utils/package-analysis.ts

@@ -12,10 +12,7 @@ export type TypesStatus =
 export interface PackageAnalysis {
   moduleFormat: ModuleFormat
   types: TypesStatus
-  engines?: {
-    node?: string
-    npm?: string
-  }
+  engines?: Record<string, string>
   /** Associated create-* package if it exists */
   createPackage?: CreatePackageInfo
 }
@@ -306,12 +303,7 @@ export function analyzePackage(
   return {
     moduleFormat,
     types,
-    engines: pkg.engines
-      ? {
-          node: pkg.engines.node,
-          npm: pkg.engines.npm,
-        }
-      : undefined,
+    engines: pkg.engines,
     createPackage: options?.createPackage,
   }
 }

test/unit/shared/utils/package-analysis.spec.ts

@@ -217,12 +217,17 @@ describe('analyzePackage', () => {
       name: 'test',
       main: 'index.js',
       engines: {
+        bun: '>=1.0.0',
         node: '>=18',
         npm: '>=9',
       },
     })
 
-    expect(result.engines).toEqual({ node: '>=18', npm: '>=9' })
+    expect(result.engines).toEqual({
+      bun: '>=1.0.0',
+      node: '>=18',
+      npm: '>=9',
+    })
   })
 
   it('detects @types package when typesPackage info is provided', () => {