feat: add package comparison feature #383
Draft
+2,884
−45
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Compare 2-4 packages side-by-side at `/compare` with facets including: - Performance: package size, install size, dependencies (later: total deps) - Health: weekly downloads, last updated, deprecation status - Compatibility: TypeScript types, module format, (Node.js) engines - Security & Compliance: license, vulnerabilities User can select which facets to display via checkboxes, with convenient groups and quick all/none buttons per group and globally. URL is source of truth for selected packages and facets, allowing easy sharing. The "total install size" metric is fetched lazily after initial load and rendered initially with a loading fallback, as it is quite slow to compute. For numeric facets, a proportional bar is shown behind the value for easy visual comparison. The greatest value in the row is used as the 100% reference. I tried to limit subjective/opinionated highlights and such, but I did add red for Deprecated, green for no vulns, green for included types and blue for external types (seems neutral enough...), and some basic yellow/red for egregious last updated time. Add a "Compare to..." entry point on package page (keyboard shortcut: `c`) and a "compare" top nav item.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
userquin
reviewed
Jan 30, 2026
serhalp
commented
Jan 31, 2026
Collaborator
Author
There was a problem hiding this comment.
This (and some other components) was intended to be reusable for both package comparison and [email protected] vs. [email protected] comparison, though I ended up not including the latter in this already huge PR 😅.
serhalp
commented
Jan 31, 2026
| <!-- Category header with all/none buttons --> | ||
| <div class="flex items-center gap-2 mb-2"> | ||
| <span class="text-[10px] text-fg-subtle uppercase tracking-wider"> | ||
| {{ $t(`compare.facets.categories.${category}`) }} |
Collaborator
Author
There was a problem hiding this comment.
💭 is interpolation inside a t() bad practice?
serhalp
commented
Jan 31, 2026
Comment on lines
+19
to
+22
| // Check if all values are numeric (for bar visualization) | ||
| const isNumeric = computed(() => { | ||
| return props.values.every(v => v === null || v === undefined || typeof v.raw === 'number') | ||
| }) |
Collaborator
Author
There was a problem hiding this comment.
might be better to just explicitly mark the facets we want with showRelativeBar or something 🤷🏼
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Compare 2-4 packages side-by-side at
/comparewith facets including:User can select which facets to display via checkboxes, with convenient groups and quick all/none buttons per group and globally.
URL is source of truth for selected packages and facets, allowing easy sharing.
The "total install size" metric is fetched lazily after initial load and rendered initially with a loading fallback, as it is quite slow to compute.
For numeric facets, a proportional bar is shown behind the value for easy visual comparison. The greatest value in the row is used as the 100% reference.
I tried to limit subjective/opinionated highlights and such, but I did add red for Deprecated, green for no vulns, green for included types and blue for external types (seems neutral enough...), and some basic yellow/red for egregious last updated time.
Add a "Compare to..." entry point on package page (keyboard shortcut:
c) and a "compare" top nav item.