feat: add package comparison feature #383
Draft
+1,960
−5
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.
1 Skipped Deployment
|
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
| <span | ||
| v-if="!info.comingSoon" | ||
| class="w-3 h-3" | ||
| :class="isFacetSelected(facet) ? 'i-carbon-checkmark' : 'i-carbon-add'" |
Contributor
There was a problem hiding this comment.
can you use : as separator in the icons (small perf at UnoCSS) => i-carbon:add
userquin
reviewed
Jan 30, 2026
| <!-- Background bar for numeric values --> | ||
| <div | ||
| v-if="showBar && value && getBarWidth(value) > 0" | ||
| class="absolute inset-y-1 left-1 bg-fg/5 rounded-sm transition-all duration-300" |
Contributor
There was a problem hiding this comment.
don't use left/right use inset-is and inset-ie respetivelly: check the contributing guide, RTL support => https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#rtl-support
userquin
reviewed
Jan 30, 2026
| <!-- Add package input --> | ||
| <div v-if="packages.length < maxPackages" class="relative"> | ||
| <div class="relative"> | ||
| <span class="absolute left-3 top-1/2 -translate-y-1/2 text-fg-subtle" aria-hidden="true"> |
userquin
reviewed
Jan 30, 2026
| > | ||
| <div | ||
| v-if="isInputFocused && (filteredResults.length > 0 || isSearching)" | ||
| class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto" |
Contributor
There was a problem hiding this comment.
same here, left and right
userquin
reviewed
Jan 30, 2026
| v-for="result in filteredResults" | ||
| :key="result.name" | ||
| type="button" | ||
| class="w-full text-left px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted" |
Contributor
There was a problem hiding this comment.
use test-is instead text-left
userquin
reviewed
Jan 30, 2026
|
|
||
| <!-- Empty state --> | ||
| <section v-else class="text-center py-16 border border-dashed border-border rounded-lg"> | ||
| <div class="i-carbon-compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" /> |
userquin
reviewed
Jan 30, 2026
| return 'i-carbon-arrow-down' | ||
| case 'changed': | ||
| return 'i-carbon-arrows-horizontal' | ||
| default: |
userquin
reviewed
Jan 30, 2026
| <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span> | ||
| <span | ||
| v-if="description" | ||
| class="i-carbon-information w-3 h-3 text-fg-subtle" |
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.