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! |
📝 WalkthroughWalkthroughAdds a 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)
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
| const menuItems = computed(() => [ | ||
| { id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' }, | ||
| { id: 'dependencies', label: t('package.download.dependencies'), icon: 'i-lucide:list-tree' }, | ||
| ]) |
There was a problem hiding this comment.
Hide or disable “Dependencies” when install size data is missing.
Right now the menu always shows the dependencies option, but downloadDependenciesScript() becomes a no-op when installSize is null, which feels like a dead action. Consider filtering it out (or disabling it) when install size data is unavailable.
🔧 Suggested tweak
-const menuItems = computed(() => [
- { id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' },
- { id: 'dependencies', label: t('package.download.dependencies'), icon: 'i-lucide:list-tree' },
-])
+const menuItems = computed(() => {
+ const items = [{ id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' }]
+ if (props.installSize) {
+ items.push({
+ id: 'dependencies',
+ label: t('package.download.dependencies'),
+ icon: 'i-lucide:list-tree',
+ })
+ }
+ return items
+})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const menuItems = computed(() => [ | |
| { id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' }, | |
| { id: 'dependencies', label: t('package.download.dependencies'), icon: 'i-lucide:list-tree' }, | |
| ]) | |
| const menuItems = computed(() => { | |
| const items = [{ id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' }] | |
| if (props.installSize) { | |
| items.push({ | |
| id: 'dependencies', | |
| label: t('package.download.dependencies'), | |
| icon: 'i-lucide:list-tree', | |
| }) | |
| } | |
| return items | |
| }) |
| try { | ||
| const response = await fetch(tarballUrl) | ||
| const blob = await response.blob() | ||
| const url = URL.createObjectURL(blob) |
There was a problem hiding this comment.
Guard against non-OK fetch responses to avoid downloading error HTML.
If the registry returns 4xx/5xx, the blob can still be created and saved as a .tgz, which is misleading. Check response.ok and throw to trigger the fallback path.
🔧 Suggested tweak
try {
const response = await fetch(tarballUrl)
+ if (!response.ok) {
+ throw new Error(`Failed to fetch tarball (${response.status})`)
+ }
const blob = await response.blob()📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| try { | |
| const response = await fetch(tarballUrl) | |
| const blob = await response.blob() | |
| const url = URL.createObjectURL(blob) | |
| try { | |
| const response = await fetch(tarballUrl) | |
| if (!response.ok) { | |
| throw new Error(`Failed to fetch tarball (${response.status})`) | |
| } | |
| const blob = await response.blob() | |
| const url = URL.createObjectURL(blob) |
1 participant
🔗 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