feat: display ts and cjs/esm badges

Author: danielroe

app/components/PackageMetricsBadges.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { ModuleFormat, TypesStatus } from '#shared/utils/package-analysis'
+
+const props = defineProps<{
+  packageName: string
+  version?: string
+}>()
+
+interface PackageAnalysisResponse {
+  package: string
+  version: string
+  moduleFormat: ModuleFormat
+  types: TypesStatus
+  engines?: {
+    node?: string
+    npm?: string
+  }
+}
+
+const { data: analysis, status } = useLazyFetch<PackageAnalysisResponse>(
+  () => {
+    const base = `/api/registry/analysis/${props.packageName}`
+    return props.version ? `${base}/v/${props.version}` : base
+  },
+  {
+    server: false, // Client-side only to avoid blocking initial render
+  },
+)
+
+const moduleFormatLabel = computed(() => {
+  if (!analysis.value) return null
+  switch (analysis.value.moduleFormat) {
+    case 'esm':
+      return 'ESM'
+    case 'cjs':
+      return 'CJS'
+    case 'dual':
+      return 'CJS/ESM'
+    default:
+      return null
+  }
+})
+
+const moduleFormatTooltip = computed(() => {
+  if (!analysis.value) return ''
+  switch (analysis.value.moduleFormat) {
+    case 'esm':
+      return 'ES Modules only'
+    case 'cjs':
+      return 'CommonJS only'
+    case 'dual':
+      return 'Supports both CommonJS and ES Modules'
+    default:
+      return 'Unknown module format'
+  }
+})
+
+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 'TypeScript types included'
+    case '@types':
+      return `Types from ${analysis.value.types.packageName}`
+    default:
+      return ''
+  }
+})
+
+const typesHref = computed(() => {
+  if (!analysis.value) return null
+  if (analysis.value.types.kind === '@types') {
+    return `/${analysis.value.types.packageName}`
+  }
+  return null
+})
+</script>
+
+<template>
+  <!-- Loading skeleton -->
+  <div v-if="status === 'pending'" class="flex items-center gap-1.5">
+    <span class="skeleton w-8 h-5 rounded" />
+    <span class="skeleton w-12 h-5 rounded" />
+  </div>
+
+  <ul v-else-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
+    <!-- TypeScript types -->
+    <li v-if="hasTypes">
+      <component
+        :is="typesHref ? 'NuxtLink' : 'span'"
+        :to="typesHref"
+        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"
+        :class="typesHref ? 'hover:text-fg hover:border-border-hover' : ''"
+        :title="typesTooltip"
+      >
+        TS
+      </component>
+    </li>
+
+    <!-- Module format -->
+    <li v-if="moduleFormatLabel">
+      <span
+        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"
+        :title="moduleFormatTooltip"
+      >
+        {{ moduleFormatLabel }}
+      </span>
+    </li>
+  </ul>
+</template>

app/pages/[...package].vue

@@ -333,6 +333,13 @@ defineOgImageComponent('Package', {
                 aria-label="Verified provenance"
               />
             </a>
+
+            <!-- Package metrics (module format, types) -->
+            <PackageMetricsBadges
+              v-if="displayVersion"
+              :package-name="pkg.name"
+              :version="displayVersion.version"
+            />
           </div>
           <!-- Fixed height description container to prevent CLS -->
           <div ref="descriptionRef" class="relative max-w-2xl min-h-[4.5rem]">

server/api/registry/analysis/[...pkg].get.ts

@@ -0,0 +1,92 @@
+import type { PackageAnalysis, ExtendedPackageJson } from '#shared/utils/package-analysis'
+import {
+  analyzePackage,
+  getTypesPackageName,
+  hasBuiltInTypes,
+} from '#shared/utils/package-analysis'
+
+const NPM_REGISTRY = 'https://registry.npmjs.org'
+
+export default defineCachedEventHandler(
+  async event => {
+    const pkgParam = getRouterParam(event, 'pkg')
+    if (!pkgParam) {
+      throw createError({ statusCode: 400, message: 'Package name is required' })
+    }
+
+    // Parse package name and optional version from path
+    // e.g., "vue" or "vue/v/3.4.0" or "@nuxt/kit" or "@nuxt/kit/v/1.0.0"
+    const segments = pkgParam.split('/')
+    let packageName: string
+    let version: string | undefined
+
+    const vIndex = segments.indexOf('v')
+    if (vIndex !== -1 && vIndex < segments.length - 1) {
+      packageName = segments.slice(0, vIndex).join('/')
+      version = segments.slice(vIndex + 1).join('/')
+    } else {
+      packageName = segments.join('/')
+    }
+
+    try {
+      // Fetch package data
+      const encodedName = encodePackageName(packageName)
+      const versionSuffix = version ? `/${version}` : '/latest'
+      const pkg = await $fetch<ExtendedPackageJson>(
+        `${NPM_REGISTRY}/${encodedName}${versionSuffix}`,
+      )
+
+      // Only check for @types package if the package doesn't ship its own types
+      let typesPackageExists = false
+      if (!hasBuiltInTypes(pkg)) {
+        const typesPackageName = getTypesPackageName(packageName)
+        typesPackageExists = await checkPackageExists(typesPackageName)
+      }
+
+      const analysis = analyzePackage(pkg, { typesPackageExists })
+
+      return {
+        package: packageName,
+        version: pkg.version ?? version ?? 'latest',
+        ...analysis,
+      } satisfies PackageAnalysisResponse
+    } catch (error) {
+      if (error && typeof error === 'object' && 'statusCode' in error) {
+        throw error
+      }
+      throw createError({
+        statusCode: 502,
+        message: 'Failed to analyze package',
+      })
+    }
+  },
+  {
+    maxAge: 60 * 60 * 24, // 24 hours - analysis rarely changes
+    swr: true,
+    getKey: event => getRouterParam(event, 'pkg') ?? '',
+  },
+)
+
+function encodePackageName(name: string): string {
+  if (name.startsWith('@')) {
+    return `@${encodeURIComponent(name.slice(1))}`
+  }
+  return encodeURIComponent(name)
+}
+
+async function checkPackageExists(packageName: string): Promise<boolean> {
+  try {
+    const encodedName = encodePackageName(packageName)
+    const response = await $fetch.raw(`${NPM_REGISTRY}/${encodedName}`, {
+      method: 'HEAD',
+    })
+    return response.status === 200
+  } catch {
+    return false
+  }
+}
+
+export interface PackageAnalysisResponse extends PackageAnalysis {
+  package: string
+  version: string
+}