feat: add package download button#1586
Conversation
|
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
|
Adebesin-Cell
changed the title
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis pull request introduces a download feature for npm packages. The changes extend the Button component with a 'subtle' variant for secondary actions, create a new DownloadButton component with dropdown functionality for package and dependency downloads, and establish a shared type system for install size data. Supporting changes include server-side dependency resolution enhancements to track tarball URLs, localisation strings for download actions, and accessibility testing for the new component. Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
app/pages/package/[[org]]/[name].vue (1)
1144-1154: Consider showing the download button without waiting for install-size.
Right now the button only appears once install-size resolves; if the fetch is slow or fails, users lose direct tarball download. Consider rendering ondisplayVersionand disabling the dependencies action untilinstallSizearrives.Possible tweak
- <PackageDownloadButton - v-if="displayVersion && installSize" + <PackageDownloadButton + v-if="displayVersion" :package-name="pkg.name" :version="displayVersion" - :install-size="installSize" + :install-size="installSize ?? undefined" size="small" />
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/components/Package/DownloadButton.vue (1)
185-187: Use same-name shorthand for size binding.This can be simplified with Vue’s same-name shorthand.
♻️ Suggested tweak
- :size="size" + :sizeBased on learnings, "In Vue 3.4 and later, you can use same-name shorthand for attribute bindings: use :attributeName instead of :attributeName="attributeName" when binding to a variable with the same name in scope. Apply this shorthand in .vue components."
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/components/Button/Base.vueapp/components/Package/DownloadButton.vuetest/nuxt/a11y.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- app/components/Button/Base.vue
serhalp
added
needs review
|
@Adebesin-Cell 👋🏼 I'd love to get this great feature reviewed and shipped! Would you mind rebasing it first? 🙏🏼 |
- Hide dependencies menu item when install size data is unavailable - Guard against non-OK fetch responses before creating blob - Use Vue 3.4 same-name shorthand for :size binding - Remove console.error in favor of silent fallback - Fix missing test closure in a11y spec
Adebesin-Cell
force-pushed
the
feat/download-button
branch
from
dafc475 to
14912af
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/components/Package/DownloadButton.vue (1)
49-50: PreferButtonBaseexposed methods over direct$elaccess.Lines 49 and 95 use
triggerRef.value?.$el, butButtonBasealready exposesgetBoundingClientRect()andfocus(). Using the exposed API is more robust and type-safe.Suggested refactor
- const rect = triggerRef.value?.$el?.getBoundingClientRect() + const rect = triggerRef.value?.getBoundingClientRect?.() @@ - triggerRef.value?.$el?.focus() + triggerRef.value?.focus?.()As per coding guidelines: “Ensure you write strictly type-safe code”.
Also applies to: 95-95
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 136fb989-fa04-41b0-8ae2-f1cd9e05c286
📒 Files selected for processing (5)
app/components/Button/Base.vueapp/components/Package/DownloadButton.vueapp/pages/package/[[org]]/[name].vuei18n/locales/en.jsoni18n/schema.json
🚧 Files skipped from review as they are similar to previous changes (1)
- i18n/schema.json
The DownloadButton prop expects `InstallSizeResult | null`, not `undefined`. Fixes the vue-tsc type check failure.
useId() generates different IDs on server vs client, and the component uses browser-only APIs (useMediaQuery, document, Teleport). Wrapping in ClientOnly avoids the hydration mismatch entirely.
useId() inside ClientOnly causes server/client ID counter desync, leading to hydration mismatches. Replace with a static ID since there's only one download menu per page. Remove ClientOnly wrapper as the component doesn't do any fetching until user interaction. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 participants
🔗 Linked issue
resolves #1528
🧭 Context
There was previously no way to directly download a package tarball or fetch all dependencies from the package detail page.
This PR introduces a Download button to make that happen.
📚 Description
This change adds a new Download button to the package detail page. The button includes a dropdown menu with two options:
.tgztarball directly..shscript to fetch all dependencies.Screenshot
-> OLD UI
-> NEW UI
