[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 462 462 v-if="displayVersion" 463 463 :package-name="pkg.name" 464 464 :version="displayVersion.version" 465 + :is-binary="isBinaryOnly" 465 466 class="self-baseline ms-1 sm:ms-2" 466 467 /> 467 468 <template #fallback>
+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