fix: add implementation

Author: danielroe

app/composables/useNpmRegistry.ts

@@ -92,17 +92,6 @@ async function fetchBulkDownloads(
   return downloads
 }
 
-/**
- * Encode a package name for use in npm registry URLs.
- * Handles scoped packages (e.g., @scope/name -> @scope%2Fname).
- */
-export function encodePackageName(name: string): string {
-  if (name.startsWith('@')) {
-    return `@${encodeURIComponent(name.slice(1))}`
-  }
-  return encodeURIComponent(name)
-}
-
 /** Number of recent versions to include in initial payload */
 const RECENT_VERSIONS_COUNT = 5
 

app/composables/usePackageComparison.ts

@@ -1,4 +1,5 @@
 import type { FacetValue, ComparisonFacet, ComparisonPackage } from '#shared/types'
+import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 
 export interface PackageComparisonData {
@@ -222,13 +223,6 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   }
 }
 
-function encodePackageName(name: string): string {
-  if (name.startsWith('@')) {
-    return `@${encodeURIComponent(name.slice(1))}`
-  }
-  return encodeURIComponent(name)
-}
-
 function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData): FacetValue | null {
   switch (facet) {
     case 'downloads':

app/pages/docs/[...path].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { setResponseHeader } from 'h3'
 import type { DocsResponse } from '#shared/types'
-import { assertValidPackageName } from '#shared/utils/npm'
+import { assertValidPackageName, fetchLatestVersion } from '#shared/utils/npm'
 
 definePageMeta({
   name: 'docs',
@@ -39,7 +39,7 @@ const { data: pkg } = usePackage(packageName)
 
 const latestVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
 
-if (import.meta.server && !requestedVersion.value) {
+if (import.meta.server && !requestedVersion.value && packageName.value) {
   const app = useNuxtApp()
   const version = await fetchLatestVersion(packageName.value)
   if (version) {

server/utils/npm.ts

@@ -1,15 +1,8 @@
-import type { FastNpmMetaResponse, Packument } from '#shared/types'
+import type { Packument } from '#shared/types'
+import { encodePackageName, fetchLatestVersion as _fetchLatestVersion } from '#shared/utils/npm'
 import { maxSatisfying, prerelease } from 'semver'
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
-const FAST_NPM_META_API = 'https://npm.antfu.dev'
-
-function encodePackageName(name: string): string {
-  if (name.startsWith('@')) {
-    return `@${encodeURIComponent(name.slice(1))}`
-  }
-  return encodeURIComponent(name)
-}
 
 export const fetchNpmPackage = defineCachedFunction(
   async (name: string): Promise<Packument> => {
@@ -24,31 +17,6 @@ export const fetchNpmPackage = defineCachedFunction(
   },
 )
 
-/**
- * Fetch lightweight package metadata from fast-npm-meta API.
- * Much smaller payload than full packument - ideal for just getting latest version.
- *
- * @param name Package name
- * @param specifier Optional version specifier (tag like "alpha", or range like "^2.1.0")
- * @returns Resolved version info
- * @see https://github.com/antfu/fast-npm-meta
- */
-export const fetchFastNpmMeta = defineCachedFunction(
-  async (name: string, specifier?: string): Promise<FastNpmMetaResponse> => {
-    const encodedName = encodePackageName(name)
-    const url = specifier
-      ? `${FAST_NPM_META_API}/${encodedName}@${encodeURIComponent(specifier)}`
-      : `${FAST_NPM_META_API}/${encodedName}`
-    return await $fetch<FastNpmMetaResponse>(url)
-  },
-  {
-    maxAge: 60 * 5,
-    swr: true,
-    name: 'fast-npm-meta',
-    getKey: (name: string, specifier?: string) => (specifier ? `${name}@${specifier}` : name),
-  },
-)
-
 /**
  * Get the latest version of a package using fast-npm-meta API.
  * Falls back to full packument if fast-npm-meta fails.
@@ -57,17 +25,15 @@ export const fetchFastNpmMeta = defineCachedFunction(
  * @returns Latest version string or null if not found
  */
 export async function fetchLatestVersion(name: string): Promise<string | null> {
+  const version = await _fetchLatestVersion(name)
+  if (version) return version
+
+  // Fallback to full packument (also cached)
   try {
-    const meta = await fetchFastNpmMeta(name)
-    return meta.version
+    const packument = await fetchNpmPackage(name)
+    return packument['dist-tags']?.latest ?? null
   } catch {
-    // Fallback to full packument
-    try {
-      const packument = await fetchNpmPackage(name)
-      return packument['dist-tags']?.latest ?? null
-    } catch {
-      return null
-    }
+    return null
   }
 }
 

shared/utils/npm.ts

@@ -1,6 +1,38 @@
+import type { FastNpmMetaResponse } from '#shared/types'
 import { createError } from 'h3'
 import validatePackageName from 'validate-npm-package-name'
 
+export const FAST_NPM_META_API = 'https://npm.antfu.dev'
+
+/**
+ * Encode package name for URL usage.
+ * Scoped packages need special handling (@scope/name → @scope%2Fname)
+ */
+export function encodePackageName(name: string): string {
+  if (name.startsWith('@')) {
+    return `@${encodeURIComponent(name.slice(1))}`
+  }
+  return encodeURIComponent(name)
+}
+
+/**
+ * Fetch the latest version of a package using fast-npm-meta API.
+ * This is a lightweight alternative to fetching the full packument.
+ *
+ * @param name Package name
+ * @returns Latest version string or null if not found
+ * @see https://github.com/antfu/fast-npm-meta
+ */
+export async function fetchLatestVersion(name: string): Promise<string | null> {
+  try {
+    const encodedName = encodePackageName(name)
+    const meta = await $fetch<FastNpmMetaResponse>(`${FAST_NPM_META_API}/${encodedName}`)
+    return meta.version
+  } catch {
+    return null
+  }
+}
+
 /**
  * Validate an npm package name and throw an HTTP error if invalid.
  * Uses validate-npm-package-name to check against npm naming rules.