davidwindham.com / npmx.dev
forked from npmx.dev/npmx.dev
[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: improve esm/types/cjs badges (#261)

authored by

Daniel Roe and committed by
GitHub 7b064ebb e20bc15f

+60 -78
+52 -38
app/components/PackageMetricsBadges.vue
··· 11 11 () => props.version, 12 12 ) 13 13 14 - const moduleFormatLabel = computed(() => { 15 - if (!analysis.value) return null 16 - switch (analysis.value.moduleFormat) { 17 - case 'esm': 18 - return 'ESM' 19 - case 'cjs': 20 - return 'CJS' 21 - case 'dual': 22 - return 'CJS/ESM' 23 - default: 24 - return null 25 - } 14 + // ESM support 15 + const hasEsm = computed(() => { 16 + if (!analysis.value) return false 17 + return analysis.value.moduleFormat === 'esm' || analysis.value.moduleFormat === 'dual' 26 18 }) 27 19 28 - const moduleFormatTooltip = computed(() => { 29 - if (!analysis.value) return '' 30 - switch (analysis.value.moduleFormat) { 31 - case 'esm': 32 - return $t('package.metrics.esm') 33 - case 'cjs': 34 - return $t('package.metrics.cjs') 35 - case 'dual': 36 - return $t('package.metrics.dual') 37 - default: 38 - return $t('package.metrics.unknown_format') 39 - } 20 + // CJS support (only show badge if present, omit if missing) 21 + const hasCjs = computed(() => { 22 + if (!analysis.value) return false 23 + return analysis.value.moduleFormat === 'cjs' || analysis.value.moduleFormat === 'dual' 40 24 }) 41 25 26 + // Types support 42 27 const hasTypes = computed(() => { 43 28 if (!analysis.value) return false 44 29 return analysis.value.types?.kind === 'included' || analysis.value.types?.kind === '@types' ··· 48 33 if (!analysis.value) return '' 49 34 switch (analysis.value.types?.kind) { 50 35 case 'included': 51 - return $t('package.metrics.ts_included') 36 + return $t('package.metrics.types_included') 52 37 case '@types': 53 - return $t('package.metrics.types_from', { package: analysis.value.types.packageName }) 38 + return $t('package.metrics.types_available', { package: analysis.value.types.packageName }) 54 39 default: 55 - return '' 40 + return $t('package.metrics.no_types') 56 41 } 57 42 }) 58 43 ··· 68 53 <template> 69 54 <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0"> 70 55 <!-- TypeScript types --> 71 - <li v-if="hasTypes"> 56 + <li> 72 57 <component 73 58 :is="typesHref ? NuxtLink : 'span'" 74 59 :to="typesHref" 75 - class="inline-flex items-center px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200" 76 - :class=" 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', 77 65 typesHref 78 66 ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50' 79 - : '' 80 - " 67 + : '', 68 + ]" 81 69 :title="typesTooltip" 82 70 > 83 - TS 71 + <span 72 + class="w-3 h-3" 73 + :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'" 74 + aria-hidden="true" 75 + /> 76 + Types 84 77 </component> 85 78 </li> 86 79 87 - <!-- Module format --> 88 - <li v-if="moduleFormatLabel"> 80 + <!-- ESM badge (show with X if missing) --> 81 + <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 + > 91 + <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> 98 + </li> 99 + 100 + <!-- CJS badge (only show if present) --> 101 + <li v-if="hasCjs"> 89 102 <span 90 - class="inline-flex items-center px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200" 91 - :title="moduleFormatTooltip" 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')" 92 105 > 93 - {{ moduleFormatLabel }} 106 + <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" /> 107 + CJS 94 108 </span> 95 109 </li> 96 110 </ul>
+2 -2
app/pages/[...package].vue
··· 508 508 v-if="displayVersion" 509 509 :package-name="pkg.name" 510 510 :version="displayVersion.version" 511 - class="self-center ml-1 sm:ml-2" 511 + class="self-baseline ml-1 sm:ml-2" 512 512 /> 513 513 <template #fallback> 514 - <ul class="flex items-center gap-1.5 self-center ml-1 sm:ml-2"> 514 + <ul class="flex items-center gap-1.5 self-baseline ml-1 sm:ml-2"> 515 515 <li class="skeleton w-8 h-5 rounded" /> 516 516 <li class="skeleton w-12 h-5 rounded" /> 517 517 </ul>
-8
i18n/locales/de.json
··· 203 203 "title": "Ausprobieren", 204 204 "choose": "Playground wählen" 205 205 }, 206 - "metrics": { 207 - "esm": "Nur ES-Module", 208 - "cjs": "Nur CommonJS", 209 - "dual": "Unterstützt CommonJS und ES-Module", 210 - "unknown_format": "Unbekanntes Modulformat", 211 - "ts_included": "TypeScript-Typen enthalten", 212 - "types_from": "Typen von {package}" 213 - }, 214 206 "license": { 215 207 "view_spdx": "Lizenztext auf SPDX ansehen" 216 208 },
+6 -6
i18n/locales/en.json
··· 205 205 "choose": "choose playground" 206 206 }, 207 207 "metrics": { 208 - "esm": "ES Modules only", 209 - "cjs": "CommonJS only", 210 - "dual": "Supports both CommonJS and ES Modules", 211 - "unknown_format": "Unknown module format", 212 - "ts_included": "TypeScript types included", 213 - "types_from": "Types from {package}" 208 + "esm": "ES Modules supported", 209 + "cjs": "CommonJS supported", 210 + "no_esm": "No ES Modules support", 211 + "types_included": "Types included", 212 + "types_available": "Types available via {package}", 213 + "no_types": "No TypeScript types" 214 214 }, 215 215 "license": { 216 216 "view_spdx": "View license text on SPDX"
-8
i18n/locales/fr.json
··· 194 194 "title": "Essayer", 195 195 "choose": "choisir un playground" 196 196 }, 197 - "metrics": { 198 - "esm": "ES Modules uniquement", 199 - "cjs": "CommonJS uniquement", 200 - "dual": "Supporte CommonJS et ES Modules", 201 - "unknown_format": "Format de module inconnu", 202 - "ts_included": "Types TypeScript inclus", 203 - "types_from": "Types depuis {package}" 204 - }, 205 197 "license": { 206 198 "view_spdx": "Voir le texte de la licence sur SPDX" 207 199 },
-8
i18n/locales/it.json
··· 204 204 "title": "Provalo", 205 205 "choose": "sciegli il playground" 206 206 }, 207 - "metrics": { 208 - "esm": "solo ES Modules", 209 - "cjs": "solo CommonJS", 210 - "dual": "Supporto per entrambi CommonJS e ES Modules", 211 - "unknown_format": "Formato modulo sconosciuto", 212 - "ts_included": "TypeScript types incluso", 213 - "types_from": "Types da {package}" 214 - }, 215 207 "license": { 216 208 "view_spdx": "Vedi il testo della licenza su SPDX" 217 209 },
-8
i18n/locales/zh-CN.json
··· 204 204 "title": "试一试", 205 205 "choose": "选择 Playground" 206 206 }, 207 - "metrics": { 208 - "esm": "只支持 ES Modules", 209 - "cjs": "只支持 CommonJS", 210 - "dual": "同时支持 CommonJS 和 ES Modules", 211 - "unknown_format": "未知模块格式", 212 - "ts_included": "包含 TypeScript 类型", 213 - "types_from": "类型来自 {package}" 214 - }, 215 207 "license": { 216 208 "view_spdx": "在 SPDX 上查看许可证文本" 217 209 },