forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat(ui): display all engines in Compatibility section and make common ones pretty (#1004)
authored by
Wojciech Maj
and committed by
GitHub
20b17eda
b655456c
+50
-26
+42
-15
app/components/Package/Compatibility.vue
+42
-15
app/components/Package/Compatibility.vue
···
1
1
<script setup lang="ts">
2
2
const props = defineProps<{
3
-
engines?: {
4
-
node?: string
5
-
npm?: string
6
-
}
3
+
engines?: Record<string, string>
7
4
}>()
5
+
6
+
const engineNames: Record<string, string> = {
7
+
bun: 'Bun',
8
+
node: 'Node.js',
9
+
npm: 'npm',
10
+
}
11
+
12
+
// Map engine name to icon class
13
+
const engineIcons: Record<string, string> = {
14
+
bun: 'i-simple-icons:bun',
15
+
node: 'i-simple-icons:nodedotjs',
16
+
npm: 'i-simple-icons:npm',
17
+
}
18
+
19
+
function getName(engine: string): string {
20
+
return engineNames[engine] || engine
21
+
}
22
+
23
+
function getIcon(engine: string): string {
24
+
return engineIcons[engine] || 'i-carbon:code'
25
+
}
26
+
27
+
const sortedEngines = computed(() => {
28
+
const entries = Object.entries(props.engines ?? {})
29
+
return entries.sort(([a], [b]) => a.localeCompare(b))
30
+
})
8
31
</script>
9
32
<template>
10
33
<CollapsibleSection
11
-
v-if="engines && (engines.node || engines.npm)"
34
+
v-if="sortedEngines.length"
12
35
:title="$t('package.compatibility')"
13
36
id="compatibility"
14
37
>
15
38
<dl class="space-y-2">
16
-
<div v-if="engines.node" class="flex justify-between gap-4 py-1">
17
-
<dt class="text-fg-muted text-sm shrink-0">node</dt>
18
-
<dd class="font-mono text-sm text-fg text-end" :title="engines.node">
19
-
{{ engines.node }}
20
-
</dd>
21
-
</div>
22
-
<div v-if="engines.npm" class="flex justify-between gap-4 py-1">
23
-
<dt class="text-fg-muted text-sm shrink-0">npm</dt>
24
-
<dd class="font-mono text-sm text-fg text-end" :title="engines.npm">
25
-
{{ engines.npm }}
39
+
<div
40
+
v-for="[engine, version] in sortedEngines"
41
+
:key="engine"
42
+
class="flex justify-between gap-4 py-1"
43
+
>
44
+
<dt class="flex items-center gap-2 text-fg-muted text-sm shrink-0">
45
+
<span
46
+
:class="[getIcon(engine), 'inline-block w-4 h-4 shrink-0 text-fg-muted']"
47
+
aria-hidden="true"
48
+
/>
49
+
{{ getName(engine) }}
50
+
</dt>
51
+
<dd class="font-mono text-sm text-fg text-end" :title="version">
52
+
{{ version }}
26
53
</dd>
27
54
</div>
28
55
</dl>