fix: correctly detect type info in badge (#2173)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Willow (GHOST) <git@willow.sh>

Author: 3 people

modules/runtime/server/cache.ts

@@ -28,6 +28,7 @@ const FIXTURE_PATHS = {
   esmTypes: 'esm-sh:types',
   githubContributors: 'github:contributors.json',
   githubContributorsStats: 'github:contributors-stats.json',
+  jsdelivr: 'jsdelivr',
 } as const
 
 type FixtureType = keyof typeof FIXTURE_PATHS
@@ -101,12 +102,8 @@ function parseScopedPackageWithVersion(input: string): { name: string; version?:
 }
 
 function getMockForUrl(url: string): MockResult | null {
-  let urlObj: URL
-  try {
-    urlObj = new URL(url)
-  } catch {
-    return null
-  }
+  const urlObj = URL.parse(url)
+  if (!urlObj) return null
 
   const { host, pathname, searchParams } = urlObj
 
@@ -140,33 +137,6 @@ function getMockForUrl(url: string): MockResult | null {
     }
   }
 
-  // jsdelivr CDN - return 404 for README files, etc.
-  if (host === 'cdn.jsdelivr.net') {
-    // Return null data which will cause a 404 - README files are optional
-    return { data: null }
-  }
-
-  // jsdelivr data API - return mock file listing
-  if (host === 'data.jsdelivr.com') {
-    const packageMatch = decodeURIComponent(pathname).match(/^\/v1\/packages\/npm\/(.+)$/)
-    if (packageMatch?.[1]) {
-      const pkgWithVersion = packageMatch[1]
-      const parsed = parseScopedPackageWithVersion(pkgWithVersion)
-      return {
-        data: {
-          type: 'npm',
-          name: parsed.name,
-          version: parsed.version || 'latest',
-          files: [
-            { name: 'package.json', hash: 'abc123', size: 1000 },
-            { name: 'index.js', hash: 'def456', size: 500 },
-            { name: 'README.md', hash: 'ghi789', size: 2000 },
-          ],
-        },
-      }
-    }
-  }
-
   // Gravatar API - return 404 (avatars not needed in tests)
   if (host === 'www.gravatar.com') {
     return { data: null }
@@ -362,12 +332,8 @@ async function handleFastNpmMeta(
   url: string,
   storage: ReturnType<typeof useStorage>,
 ): Promise<MockResult | null> {
-  let urlObj: URL
-  try {
-    urlObj = new URL(url)
-  } catch {
-    return null
-  }
+  const urlObj = URL.parse(url)
+  if (!urlObj) return null
 
   const { host, pathname, searchParams } = urlObj
 
@@ -407,12 +373,8 @@ async function handleGitHubApi(
   url: string,
   storage: ReturnType<typeof useStorage>,
 ): Promise<MockResult | null> {
-  let urlObj: URL
-  try {
-    urlObj = new URL(url)
-  } catch {
-    return null
-  }
+  const urlObj = URL.parse(url)
+  if (!urlObj) return null
 
   const { host, pathname } = urlObj
 
@@ -463,12 +425,8 @@ interface FixtureMatchWithVersion extends FixtureMatch {
 }
 
 function matchUrlToFixture(url: string): FixtureMatchWithVersion | null {
-  let urlObj: URL
-  try {
-    urlObj = new URL(url)
-  } catch {
-    return null
-  }
+  const urlObj = URL.parse(url)
+  if (!urlObj) return null
 
   const { host, pathname, searchParams } = urlObj
 
@@ -548,6 +506,42 @@ function logUnmockedRequest(type: string, detail: string, url: string): void {
   )
 }
 
+async function handleJsdelivrDataApi(
+  url: string,
+  storage: ReturnType<typeof useStorage>,
+): Promise<MockResult | null> {
+  const urlObj = URL.parse(url)
+  if (!urlObj) return null
+
+  if (urlObj.host !== 'data.jsdelivr.com') return null
+
+  const packageMatch = decodeURIComponent(urlObj.pathname).match(/^\/v1\/packages\/npm\/(.+)$/)
+  if (!packageMatch?.[1]) return null
+
+  const parsed = parseScopedPackageWithVersion(packageMatch[1])
+
+  // Try per-package fixture first
+  const fixturePath = getFixturePath('jsdelivr', parsed.name)
+  const fixture = await storage.getItem<unknown>(fixturePath)
+  if (fixture) {
+    return { data: fixture }
+  }
+
+  // Fall back to generic stub (no declaration files)
+  return {
+    data: {
+      type: 'npm',
+      name: parsed.name,
+      version: parsed.version || 'latest',
+      files: [
+        { name: 'package.json', hash: 'abc123', size: 1000 },
+        { name: 'index.js', hash: 'def456', size: 500 },
+        { name: 'README.md', hash: 'ghi789', size: 2000 },
+      ],
+    },
+  }
+}
+
 /**
  * Shared fixture-backed fetch implementation.
  * This is used by both cachedFetch and the global $fetch override.
@@ -570,6 +564,12 @@ async function fetchFromFixtures<T>(
     return { data: fastNpmMetaResult.data as T, isStale: false, cachedAt: Date.now() }
   }
 
+  const jsdelivrResult = await handleJsdelivrDataApi(url, storage)
+  if (jsdelivrResult) {
+    if (VERBOSE) process.stdout.write(`[test-fixtures] jsDelivr Data API: ${url}\n`)
+    return { data: jsdelivrResult.data as T, isStale: false, cachedAt: Date.now() }
+  }
+
   // Check for GitHub API
   const githubResult = await handleGitHubApi(url, storage)
   if (githubResult) {

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

@@ -3,15 +3,9 @@ import { PackageRouteParamsSchema } from '#shared/schemas/package'
 import type {
   PackageAnalysis,
   ExtendedPackageJson,
-  TypesPackageInfo,
   CreatePackageInfo,
 } from '#shared/utils/package-analysis'
-import {
-  analyzePackage,
-  getTypesPackageName,
-  getCreatePackageName,
-  hasBuiltInTypes,
-} from '#shared/utils/package-analysis'
+import { analyzePackage, getCreatePackageName } from '#shared/utils/package-analysis'
 import {
   getDevDependencySuggestion,
   type DevDependencySuggestion,
@@ -23,13 +17,8 @@ import {
 } from '#shared/utils/constants'
 import { parseRepoUrl } from '#shared/utils/git-providers'
 import { encodePackageName } from '#shared/utils/npm'
-import { flattenFileTree } from '#server/utils/import-resolver'
-import { getPackageFileTree } from '#server/utils/file-tree'
-import { getLatestVersion, getLatestVersionBatch } from 'fast-npm-meta'
-
-interface AnalysisPackageJson extends ExtendedPackageJson {
-  readme?: string
-}
+import { fetchPackageWithTypesAndFiles } from '#server/utils/file-tree'
+import { getLatestVersionBatch } from 'fast-npm-meta'
 
 export default defineCachedEventHandler(
   async event => {
@@ -44,38 +33,7 @@ export default defineCachedEventHandler(
         packageName: decodeURIComponent(rawPackageName),
         version: rawVersion,
       })
-
-      // Fetch package data
-      const encodedName = encodePackageName(packageName)
-      const versionSuffix = version ? `/${version}` : '/latest'
-      const pkg = await $fetch<AnalysisPackageJson>(
-        `${NPM_REGISTRY}/${encodedName}${versionSuffix}`,
-      )
-
-      let typesPackage: TypesPackageInfo | undefined
-      let files: Set<string> | undefined
-
-      // Only check for @types and files when the package doesn't ship its own types
-      if (!hasBuiltInTypes(pkg)) {
-        const typesPkgName = getTypesPackageName(packageName)
-        const resolvedVersion = pkg.version ?? version ?? 'latest'
-
-        // Fetch @types info and file tree in parallel — they are independent
-        const [typesResult, fileTreeResult] = await Promise.allSettled([
-          fetchTypesPackageInfo(typesPkgName),
-          getPackageFileTree(packageName, resolvedVersion),
-        ])
-
-        if (typesResult.status === 'fulfilled') {
-          typesPackage = typesResult.value
-        }
-        if (fileTreeResult.status === 'fulfilled') {
-          files = flattenFileTree(fileTreeResult.value.tree)
-        }
-      }
-
-      // Check for associated create-* package (e.g., vite -> create-vite, next -> create-next-app)
-      // Only show if the packages are actually associated (same maintainers or same org)
+      const { pkg, typesPackage, files } = await fetchPackageWithTypesAndFiles(packageName, version)
       const createPackage = await findAssociatedCreatePackage(packageName, pkg)
       const analysis = analyzePackage(pkg, {
         typesPackage,
@@ -107,21 +65,6 @@ export default defineCachedEventHandler(
   },
 )
 
-/**
- * Fetch @types package info including deprecation status using fast-npm-meta.
- * Returns undefined if the package doesn't exist.
- */
-async function fetchTypesPackageInfo(packageName: string): Promise<TypesPackageInfo | undefined> {
-  const result = await getLatestVersion(packageName, { metadata: true, throw: false })
-  if ('error' in result) {
-    return undefined
-  }
-  return {
-    packageName,
-    deprecated: result.deprecated,
-  }
-}
-
 /** Package metadata needed for association validation */
 interface PackageWithMeta {
   maintainers?: Array<{ name: string }>

server/api/registry/badge/[type]/[...pkg].get.ts

@@ -6,6 +6,7 @@ import { PackageRouteParamsSchema } from '#shared/schemas/package'
 import { CACHE_MAX_AGE_ONE_HOUR, ERROR_NPM_FETCH_FAILED } from '#shared/utils/constants'
 import { fetchNpmPackage } from '#server/utils/npm'
 import { assertValidPackageName } from '#shared/utils/npm'
+import { fetchPackageWithTypesAndFiles } from '#server/utils/file-tree'
 import { handleApiError } from '#server/utils/error-handler'
 
 const NPM_DOWNLOADS_API = 'https://api.npmjs.org/downloads/point'
@@ -438,12 +439,46 @@ const badgeStrategies = {
     return { label: 'node', value: nodeVersion, color: COLORS.yellow }
   },
 
-  'types': async (pkgData: globalThis.Packument) => {
-    const latest = getLatestVersion(pkgData)
-    const versionData = latest ? pkgData.versions?.[latest] : undefined
-    const hasTypes = !!(versionData?.types || versionData?.typings)
-    const value = hasTypes ? 'included' : 'missing'
-    const color = hasTypes ? COLORS.blue : COLORS.slate
+  'types': async (pkgData: globalThis.Packument, requestedVersion?: string) => {
+    const targetVersion = requestedVersion ?? getLatestVersion(pkgData)
+    const versionData = targetVersion ? pkgData.versions?.[targetVersion] : undefined
+
+    if (versionData && hasBuiltInTypes(versionData)) {
+      return { label: 'types', value: 'included', color: COLORS.blue }
+    }
+
+    const { pkg, typesPackage, files } = await fetchPackageWithTypesAndFiles(
+      pkgData.name,
+      targetVersion,
+    )
+
+    const typesStatus = detectTypesStatus(pkg, typesPackage, files)
+
+    let value: string
+    let color: string
+
+    switch (typesStatus.kind) {
+      case 'included':
+        value = 'included'
+        color = COLORS.blue
+        break
+
+      case '@types':
+        value = '@types'
+        color = COLORS.purple
+        if (typesStatus.deprecated) {
+          value += ' (deprecated)'
+          color = COLORS.red
+        }
+        break
+
+      case 'none':
+      default:
+        value = 'missing'
+        color = COLORS.slate
+        break
+    }
+
     return { label: 'types', value, color }
   },
 

server/utils/file-tree.ts

@@ -1,3 +1,7 @@
+import { getLatestVersion } from 'fast-npm-meta'
+import { flattenFileTree } from '#server/utils/import-resolver'
+import type { ExtendedPackageJson, TypesPackageInfo } from '#shared/utils/package-analysis'
+
 /**
  * Fetch the file tree from jsDelivr API.
  * Returns a nested tree structure of all files in the package.
@@ -83,3 +87,62 @@ export async function getPackageFileTree(
     tree,
   }
 }
+
+/**
+ * Fetch @types package info including deprecation status using fast-npm-meta.
+ * Returns undefined if the package doesn't exist.
+ */
+async function fetchTypesPackageInfo(packageName: string): Promise<TypesPackageInfo | undefined> {
+  const result = await getLatestVersion(packageName, { metadata: true, throw: false })
+  if ('error' in result) {
+    return undefined
+  }
+  return {
+    packageName,
+    deprecated: result.deprecated,
+  }
+}
+
+interface AnalysisPackageJson extends ExtendedPackageJson {
+  readme?: string
+}
+
+export async function fetchPackageWithTypesAndFiles(
+  packageName: string,
+  version?: string,
+): Promise<{
+  pkg: AnalysisPackageJson
+  typesPackage?: TypesPackageInfo
+  files?: Set<string>
+}> {
+  // Fetch main package data
+  const encodedName = encodePackageName(packageName)
+  const versionSuffix = version ? `/${version}` : '/latest'
+
+  const pkg = await $fetch<AnalysisPackageJson>(`${NPM_REGISTRY}/${encodedName}${versionSuffix}`)
+
+  let typesPackage: TypesPackageInfo | undefined
+  let files: Set<string> | undefined
+
+  // Only attempt to fetch @types + file tree when the package doesn't ship its own types
+  if (!hasBuiltInTypes(pkg)) {
+    const typesPkgName = getTypesPackageName(packageName)
+    const resolvedVersion = pkg.version ?? version ?? 'latest'
+
+    // Fetch both in parallel — they're independent
+    const [typesResult, fileTreeResult] = await Promise.allSettled([
+      fetchTypesPackageInfo(typesPkgName),
+      getPackageFileTree(packageName, resolvedVersion),
+    ])
+
+    if (typesResult.status === 'fulfilled') {
+      typesPackage = typesResult.value
+    }
+
+    if (fileTreeResult.status === 'fulfilled') {
+      files = flattenFileTree(fileTreeResult.value.tree)
+    }
+  }
+
+  return { pkg, typesPackage, files }
+}