npmx.dev/app/components/PackageMetricsBadges.vue at 7ce3b8975588bb478e4e1c3c1f2cdbb4454bc7ee · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script setup lang="ts">
import { NuxtLink } from '#components'

const props = defineProps<{
  packageName: string
  version?: string
}>()

const { data: analysis } = usePackageAnalysis(
  () => props.packageName,
  () => props.version,
)

// ESM support
const hasEsm = computed(() => {
  if (!analysis.value) return false
  return analysis.value.moduleFormat === 'esm' || analysis.value.moduleFormat === 'dual'
})

// CJS support (only show badge if present, omit if missing)
const hasCjs = computed(() => {
  if (!analysis.value) return false
  return analysis.value.moduleFormat === 'cjs' || analysis.value.moduleFormat === 'dual'
})

// Types support
const hasTypes = computed(() => {
  if (!analysis.value) return false
  return analysis.value.types?.kind === 'included' || analysis.value.types?.kind === '@types'
})

const typesTooltip = computed(() => {
  if (!analysis.value) return ''
  switch (analysis.value.types?.kind) {
    case 'included':
      return $t('package.metrics.types_included')
    case '@types':
      return $t('package.metrics.types_available', { package: analysis.value.types.packageName })
    default:
      return $t('package.metrics.no_types')
  }
})

const typesHref = computed(() => {
  if (!analysis.value) return null
  if (analysis.value.types.kind === '@types') {
    return `/${analysis.value.types.packageName}`
  }
  return null
})
</script>

<template>
  <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
    <!-- TypeScript types -->
    <li>
      <component
        :is="typesHref ? NuxtLink : 'span'"
        :to="typesHref"
        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
        :class="[
          hasTypes
            ? 'text-fg-muted bg-bg-muted border border-border'
            : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
          typesHref
            ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
            : '',
        ]"
        :title="typesTooltip"
      >
        <span
          class="w-3 h-3"
          :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
          aria-hidden="true"
        />
        Types
      </component>
    </li>

    <!-- ESM badge (show with X if missing) -->
    <li>
      <span
        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
        :class="
          hasEsm
            ? 'text-fg-muted bg-bg-muted border border-border'
            : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
        "
        :title="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
      >
        <span
          class="w-3 h-3"
          :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
          aria-hidden="true"
        />
        ESM
      </span>
    </li>

    <!-- CJS badge (only show if present) -->
    <li v-if="hasCjs">
      <span
        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"
        :title="$t('package.metrics.cjs')"
      >
        <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
        CJS
      </span>
    </li>
  </ul>
</template>