forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: hide types badge for binary-only packages (#597)
Co-authored-by: Yevhen Husak <gusa4grr@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Yevhen Husak
Yevhen Husak
Daniel Roe
and committed by
GitHub
368e2d09
4fe042d4
+51
-48
+49
-45
app/components/PackageMetricsBadges.vue
+49
-45
app/components/PackageMetricsBadges.vue
···
3
3
4
4
const props = defineProps<{
5
5
packageName: string
6
+
isBinary?: boolean
6
7
version?: string
7
8
}>()
8
9
···
43
44
44
45
const typesHref = computed(() => {
45
46
if (!analysis.value) return null
46
-
if (analysis.value.types.kind === '@types') {
47
+
if (analysis.value.types?.kind === '@types') {
47
48
return `/${analysis.value.types.packageName}`
48
49
}
49
50
return null
···
53
54
<template>
54
55
<ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
55
56
<!-- TypeScript types badge -->
56
-
<li>
57
-
<component
58
-
:is="typesHref ? NuxtLink : 'span'"
59
-
:to="typesHref"
60
-
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
61
-
:class="[
62
-
hasTypes
63
-
? 'text-fg-muted bg-bg-muted border border-border'
64
-
: 'text-fg-subtle bg-bg-subtle border border-border-subtle',
65
-
typesHref
66
-
? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
67
-
: '',
68
-
]"
69
-
:title="typesTooltip"
70
-
>
71
-
<span
72
-
class="w-3 h-3"
73
-
:class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
74
-
aria-hidden="true"
75
-
/>
76
-
{{ $t('package.metrics.types_label') }}
77
-
</component>
57
+
<li v-if="!props.isBinary">
58
+
<AppTooltip :text="typesTooltip">
59
+
<component
60
+
:is="typesHref ? NuxtLink : 'span'"
61
+
:to="typesHref"
62
+
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
63
+
:class="[
64
+
hasTypes
65
+
? 'text-fg-muted bg-bg-muted border border-border'
66
+
: 'text-fg-subtle bg-bg-subtle border border-border-subtle',
67
+
typesHref
68
+
? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
69
+
: '',
70
+
]"
71
+
>
72
+
<span
73
+
class="w-3 h-3"
74
+
:class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
75
+
aria-hidden="true"
76
+
/>
77
+
{{ $t('package.metrics.types_label') }}
78
+
</component>
79
+
</AppTooltip>
78
80
</li>
79
81
80
82
<!-- ESM badge (show with X if missing) -->
81
83
<li>
82
-
<span
83
-
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
84
-
:class="
85
-
hasEsm
86
-
? 'text-fg-muted bg-bg-muted border border-border'
87
-
: 'text-fg-subtle bg-bg-subtle border border-border-subtle'
88
-
"
89
-
:title="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
90
-
>
84
+
<AppTooltip :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
91
85
<span
92
-
class="w-3 h-3"
93
-
:class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
94
-
aria-hidden="true"
95
-
/>
96
-
ESM
97
-
</span>
86
+
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
87
+
:class="
88
+
hasEsm
89
+
? 'text-fg-muted bg-bg-muted border border-border'
90
+
: 'text-fg-subtle bg-bg-subtle border border-border-subtle'
91
+
"
92
+
>
93
+
<span
94
+
class="w-3 h-3"
95
+
:class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
96
+
aria-hidden="true"
97
+
/>
98
+
ESM
99
+
</span>
100
+
</AppTooltip>
98
101
</li>
99
102
100
103
<!-- CJS badge (only show if present) -->
101
104
<li v-if="hasCjs">
102
-
<span
103
-
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
104
-
:title="$t('package.metrics.cjs')"
105
-
>
106
-
<span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
107
-
CJS
108
-
</span>
105
+
<AppTooltip :text="$t('package.metrics.cjs')">
106
+
<span
107
+
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
108
+
>
109
+
<span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
110
+
CJS
111
+
</span>
112
+
</AppTooltip>
109
113
</li>
110
114
</ul>
111
115
</template>
+1
app/pages/[...package].vue
+1
app/pages/[...package].vue
+1
-3
app/utils/run-command.ts
+1
-3
app/utils/run-command.ts
···
23
23
* - Has bin field but no main, module, or exports fields
24
24
*/
25
25
export function isBinaryOnlyPackage(pkg: PackageMetadata): boolean {
26
-
const baseName = pkg.name.startsWith('@') ? pkg.name.split('/')[1] : pkg.name
27
-
28
26
// Check create-* patterns
29
-
if (baseName?.startsWith('create-') || pkg.name.includes('/create-')) {
27
+
if (isCreatePackage(pkg.name)) {
30
28
return true
31
29
}
32
30