feat: version history page display download count

[btea]

🔗 Linked issue

related to #2025

🧭 Context

The version history page displays the download count for each version over the past 7 days, consistent with the npmjs functionality, which seems very useful.

📚 Description

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 21, 2026 1:38pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 21, 2026 1:38pm
npmx-lunaria	Ignored		Mar 21, 2026 1:38pm

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds per-version download metrics for npm packages. A new cached server API handler (/api/registry/npmjs-versions/...) is implemented, with a utility fetchNpmVersionDownloadsFromApi that normalises npm API responses into { version, downloads }[]. The frontend versions page (pages/package/[[org]]/[name]/versions.vue) loads this data via a lazy fetch, builds a version→downloads map and accessor functions, and conditionally renders per-version and aggregated group download totals in the latest card, tag rows, virtualised history groups/rows and SSR group-header fallback; small layout class adjustments were made to accommodate right-aligned download elements.

Possibly related PRs

• feat: add version history page #2025: Modifies the same versions.vue page and is directly related to adding per-version download display logic and UI changes.

Suggested reviewers

• danielroe
• shuuji3

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is related to the changeset, providing context about adding download counts to the version history page as shown in the screenshot.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 94.44444% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name]/versions.vue	94.44%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

app/pages/package/[[org]]/[name]/versions.vue (1)

295-302: Consider a shared download-count component.

The same lookup/format/label block now exists in five places, and the copies already differ slightly (div vs span, width classes, etc.). Pulling this into a tiny component or shared helper would make later styling or accessibility tweaks much easier to keep consistent.

Also applies to: 352-359, 443-450, 515-522, 563-570

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 15baadc8-c5b4-4bfe-827c-2d8460ab9ee2

📥 Commits

Reviewing files that changed from the base of the PR and between 8cd4074 and 6e6bbcb.

📒 Files selected for processing (3)

• app/pages/package/[[org]]/[name]/versions.vue
• server/api/registry/npmjs-versions/[...pkg].get.ts
• server/utils/npm-website-versions.ts

[MatteoGabriele]

I personally found it hard to glance at these numbers without feeling a bit confused. What do you think about adding a "v" prefix to the version, or maybe in a separate tag? (The tag might be too bold, so I’m not sure; I would need to experiment with it.)

perhaps even keeping the count always before the date, so that it's also visually consistent with the top block?

v1.2.0 230,000 Dec 24, 2023

[alex-key]

I would do something like this as it's a pretty common pattern for other places on npmx when we show version resolution. Also it allows to have right section less busy with numbers.

[btea]

Thank you for your suggestions, they all seem good. 👍

[ghostdevv]

I'll mark this as draft while you work on it, can you mark it as ready when you want a review?

[btea]

@ghostdevv Thank you for your comment.

Actually, the feature should already be complete. It's just that people have different suggestions regarding the information display location, and I'm not sure where would be most suitable. What do you think?