perf: reduce payload size

Author: danielroe

app/components/Package/Versions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PackageVersionInfo, PackumentVersion } from '#shared/types'
+import type { PackageVersionInfo, SlimVersion } from '#shared/types'
 import { compare } from 'semver'
 import type { RouteLocationRaw } from 'vue-router'
 import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
@@ -14,7 +14,7 @@ import {
 
 const props = defineProps<{
   packageName: string
-  versions: Record<string, PackumentVersion>
+  versions: Record<string, SlimVersion>
   distTags: Record<string, string>
   time: Record<string, string>
 }>()
@@ -31,13 +31,6 @@ interface VersionDisplay {
   deprecated?: string
 }
 
-// Check if a version has provenance/attestations
-function hasProvenance(version: PackumentVersion | undefined): boolean {
-  if (!version?.dist) return false
-  const dist = version.dist as { attestations?: unknown }
-  return !!dist.attestations
-}
-
 // Build route object for package version link
 function versionRoute(version: string): RouteLocationRaw {
   return {
@@ -53,10 +46,7 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 // Deduplicates so each version appears only once, with all its tags
 const allTagRows = computed(() => {
   // Group tags by version with their metadata
-  const versionMap = new Map<
-    string,
-    { tags: string[]; versionData: PackumentVersion | undefined }
-  >()
+  const versionMap = new Map<string, { tags: string[]; versionData: SlimVersion | undefined }>()
   for (const [tag, version] of Object.entries(props.distTags)) {
     const existing = versionMap.get(version)
     if (existing) {
@@ -88,7 +78,7 @@ const allTagRows = computed(() => {
         version,
         time: props.time[version],
         tags,
-        hasProvenance: hasProvenance(versionData),
+        hasProvenance: versionData?.hasProvenance,
         deprecated: versionData?.deprecated,
       } as VersionDisplay,
     }))

app/composables/useNpmRegistry.ts

@@ -1,6 +1,5 @@
 import type {
   Packument,
-  PackumentVersion,
   SlimPackument,
   NpmSearchResponse,
   NpmSearchResult,
@@ -128,20 +127,28 @@ function transformPackument(pkg: Packument, requestedVersion?: string | null): S
   }
 
   // Build filtered versions object with install scripts info per version
-  const filteredVersions: Record<string, PackumentVersion> = {}
+  const filteredVersions: Record<string, SlimVersion> = {}
+  let versionData: SlimPackumentVersion | null = null
   for (const v of includedVersions) {
     const version = pkg.versions[v]
     if (version) {
-      // Strip readme from each version, extract install scripts info
-      const { readme: _readme, scripts, ...slimVersion } = version
-
-      // Extract install scripts info (which scripts exist + npx deps)
-      const installScripts = scripts ? extractInstallScriptsInfo(scripts) : null
-
+      if (version.version === requestedVersion) {
+        // Strip readme from each version, extract install scripts info
+        const { readme: _readme, scripts, ...slimVersion } = version
+
+        // Extract install scripts info (which scripts exist + npx deps)
+        const installScripts = scripts ? extractInstallScriptsInfo(scripts) : null
+        versionData = {
+          ...slimVersion,
+          installScripts: installScripts ?? undefined,
+        }
+      }
       filteredVersions[v] = {
-        ...slimVersion,
-        installScripts: installScripts ?? undefined,
-      } satisfies PackumentVersion
+        ...((version?.dist as { attestations?: unknown }) ? { hasProvenance: true } : {}),
+        version: version.version,
+        deprecated: version.deprecated,
+        tags: version.tags as string[],
+      }
     }
   }
 
@@ -167,6 +174,7 @@ function transformPackument(pkg: Packument, requestedVersion?: string | null): S
     'keywords': pkg.keywords,
     'repository': pkg.repository,
     'bugs': pkg.bugs,
+    'requestedVersion': versionData,
     'versions': filteredVersions,
   }
 }

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

@@ -105,22 +105,9 @@ const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersi
 const { data: moduleReplacement } = useModuleReplacement(packageName)
 
 const { data: resolvedVersion } = await useResolvedVersion(packageName, requestedVersion)
-const { data: pkg, status, error } = usePackage(packageName, requestedVersion)
-
-// Get the version to display (resolved version or latest)
-const displayVersion = computed(() => {
-  if (!pkg.value) return null
-
-  // Use resolved version if available
-  if (resolvedVersion.value) {
-    return pkg.value.versions[resolvedVersion.value] ?? null
-  }
 
-  // Fallback to latest
-  const latestTag = pkg.value['dist-tags']?.latest
-  if (!latestTag) return null
-  return pkg.value.versions[latestTag] ?? null
-})
+const { data: pkg, status, error } = usePackage(packageName, requestedVersion)
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
 // Process package description
 const pkgDescription = useMarkdown(() => ({

shared/types/npm-registry.ts

@@ -30,6 +30,10 @@ export type SlimPackumentVersion = PackumentVersion & {
   installScripts?: InstallScriptsInfo
 }
 
+export type SlimVersion = Pick<SlimPackumentVersion, 'version' | 'deprecated' | 'tags'> & {
+  hasProvenance?: true
+}
+
 /**
  * Slimmed down Packument for client-side use.
  * Strips unnecessary fields to reduce payload size.
@@ -52,8 +56,10 @@ export interface SlimPackument {
   'keywords'?: string[]
   'repository'?: { type?: string; url?: string; directory?: string }
   'bugs'?: { url?: string; email?: string }
+  /** current version */
+  'requestedVersion': SlimPackumentVersion | null
   /** Only includes dist-tag versions (with installScripts info added per version) */
-  'versions': Record<string, SlimPackumentVersion>
+  'versions': Record<string, SlimVersion>
 }
 
 /**