diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 3af5415e5f..af2852a582 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -207,6 +207,8 @@ const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg,
// → Preserve the server-rendered DOM, don't flash to skeleton.
const nuxtApp = useNuxtApp()
const route = useRoute()
+// Gates template rendering only — data fetches intentionally still run.
+const isVersionsRoute = computed(() => route.name === 'package-versions')
const hasEmptyPayload =
import.meta.client &&
nuxtApp.payload.serverRendered &&
@@ -516,7 +518,8 @@ const showSkeleton = shallowRef(false)
-
+
+
Skeleton
-
+
+import { WindowVirtualizer } from 'virtua/vue'
+import { getVersions } from 'fast-npm-meta'
+import { compare, validRange } from 'semver'
+import {
+ buildVersionToTagsMap,
+ buildTaggedVersionRows,
+ filterVersions,
+ getVersionGroupKey,
+ getVersionGroupLabel,
+} from '~/utils/versions'
+import { fetchAllPackageVersions } from '~/utils/npm/api'
+
+definePageMeta({
+ name: 'package-versions',
+})
+
+/** Number of flat items (headers + version rows) to render statically during SSR */
+const SSR_COUNT = 20
+
+const route = useRoute('package-versions')
+
+const packageName = computed(() => {
+ const { org, name } = route.params
+ return org ? `${org}/${name}` : name
+})
+const orgName = computed(() => route.params.org?.replace('@', '') ?? null)
+
+// ─── Phase 1: lightweight fetch (page load) ───────────────────────────────────
+// Fetches only version strings, dist-tags, and publish times — no deprecated/provenance metadata.
+// Enough to render the "Current Tags" section and all group headers immediately.
+
+const { data: versionSummary } = useLazyAsyncData(
+ () => `package-version-summary:${packageName.value}`,
+ async () => {
+ const data = await getVersions(packageName.value)
+ return {
+ distTags: data.distTags as Record,
+ versions: data.versions,
+ time: data.time as Record,
+ }
+ },
+ { deep: false },
+)
+
+const distTags = computed(() => versionSummary.value?.distTags ?? {})
+const versionStrings = computed(() => versionSummary.value?.versions ?? [])
+const versionTimes = computed(() => versionSummary.value?.time ?? {})
+
+// ─── Phase 2: full metadata (loaded on first group expand) ────────────────────
+// Fetches deprecated status, provenance, and exact times needed for version rows.
+
+const fullVersionMap = shallowRef | null>(null)
+
+async function ensureFullDataLoaded() {
+ if (fullVersionMap.value) return
+ const versions = await fetchAllPackageVersions(packageName.value)
+ fullVersionMap.value = new Map(versions.map(v => [v.version, v]))
+}
+
+// ─── Derived data ─────────────────────────────────────────────────────────────
+
+const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags.value))
+const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
+
+function getVersionTime(version: string): string | undefined {
+ return versionTimes.value[version]
+}
+
+// ─── Version groups ───────────────────────────────────────────────────────────
+
+const expandedGroups = ref(new Set())
+const loadingGroup = ref(null)
+
+const versionGroups = computed(() => {
+ const byKey = new Map()
+ for (const v of versionStrings.value) {
+ const key = getVersionGroupKey(v)
+ if (!byKey.has(key)) byKey.set(key, [])
+ byKey.get(key)!.push(v)
+ }
+
+ return Array.from(byKey.keys())
+ .sort((a, b) => {
+ const [aMajor, aMinor] = a.split('.').map(Number)
+ const [bMajor, bMinor] = b.split('.').map(Number)
+ if (aMajor !== bMajor) return (bMajor ?? 0) - (aMajor ?? 0)
+ return (bMinor ?? -1) - (aMinor ?? -1)
+ })
+ .map(groupKey => ({
+ groupKey,
+ label: getVersionGroupLabel(groupKey),
+ versions: byKey.get(groupKey)!.sort((a, b) => compare(b, a)),
+ }))
+})
+
+async function toggleGroup(groupKey: string) {
+ if (expandedGroups.value.has(groupKey)) {
+ expandedGroups.value.delete(groupKey)
+ return
+ }
+ expandedGroups.value.add(groupKey)
+ if (!fullVersionMap.value) {
+ loadingGroup.value = groupKey
+ try {
+ await ensureFullDataLoaded()
+ } finally {
+ loadingGroup.value = null
+ }
+ }
+}
+
+// ─── Version filter ───────────────────────────────────────────────────────────
+
+const versionFilterInput = ref('')
+const versionFilter = refDebounced(versionFilterInput, 100)
+const isFilterActive = computed(() => versionFilter.value.trim() !== '')
+
+const filteredVersionSet = computed(() => {
+ const trimmed = versionFilter.value.trim()
+ if (!trimmed) return null
+ // Try semver range first (e.g. "^2.0.0", ">=1 <3")
+ if (validRange(trimmed)) {
+ return filterVersions(versionStrings.value, trimmed)
+ }
+ // Fallback: substring match (e.g. "2.4", "beta")
+ const lower = trimmed.toLowerCase()
+ return new Set(versionStrings.value.filter(v => v.toLowerCase().includes(lower)))
+})
+
+const filteredGroups = computed(() => {
+ if (!isFilterActive.value || !filteredVersionSet.value) return versionGroups.value
+ return versionGroups.value
+ .map(group =>
+ Object.assign({}, group, {
+ versions: group.versions.filter(v => filteredVersionSet.value!.has(v)),
+ }),
+ )
+ .filter(group => group.versions.length > 0)
+})
+
+// ─── Flat list for virtual rendering ──────────────────────────────────────────
+
+type FlatItem =
+ | { type: 'header'; key: string; groupKey: string; label: string; versions: string[] }
+ | { type: 'version'; key: string; version: string; groupKey: string }
+
+const flatItems = computed(() => {
+ const items: FlatItem[] = []
+ for (const group of filteredGroups.value) {
+ items.push({
+ type: 'header',
+ key: `header:${group.groupKey}`,
+ groupKey: group.groupKey,
+ label: group.label,
+ versions: group.versions,
+ })
+ if (expandedGroups.value.has(group.groupKey) || isFilterActive.value) {
+ for (const version of group.versions) {
+ items.push({
+ type: 'version',
+ key: `version:${version}`,
+ version,
+ groupKey: group.groupKey,
+ })
+ }
+ }
+ }
+ return items
+})
+
+// TODO(atriiy): implement changelog side panel
+// Show GitHub release notes or parsed CHANGELOG.md content per version
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('package.versions.current_tags') }}
+
+
+
+
+
+
+
+ latest
+ {{ tag }}
+
+
{{ tagRows[0].version }}
+
+
+
+
+
+
+
+ {{ tag }}
+
+
+
+
+ {{ row.version }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('package.versions.page_title') }}
+
+ ({{ versionStrings.length }})
+
+
+
+
+
+ {{ $t('package.versions.no_match_filter', { filter: versionFilter }) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.version }}
+
+
+
+ {{ tag }}
+
+
+
+ deprecated
+
+
+
+
+
+
+
+
+
+
+
+
+
+