feat(ui): add easy way to copy package version#3044
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Hello! Thank you for opening your first PR to npmx, @WilhelmBerggren! 🚀 Here’s what will happen next:
|
|
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:
📝 WalkthroughWalkthroughChangesPackage version copying
Sequence Diagram(s)sequenceDiagram
participant PackageHeader
participant CopyToClipboardButton
participant useClipboard
participant ClipboardAPI
CopyToClipboardButton->>useClipboard: Invoke copyPkgVersion
PackageHeader->>useClipboard: Invoke copyPkgVersion from context command
useClipboard->>ClipboardAPI: Copy resolvedVersion
ClipboardAPI-->>useClipboard: Update copiedPkgVersion
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ 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 |
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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/Terminal/Install.vue`:
- Around line 142-152: Conditionally register the `package-copy-version` command
only when an explicitly requested package version exists. Update the command
array construction around the visible command definition, following the existing
pattern for conditional commands, so `copyPkgVersion()` and its clipboard
announcement are unavailable when no version was requested.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b4ea07ff-5ece-4d47-8c49-b0865523a985
📒 Files selected for processing (7)
app/components/Package/Header.vueapp/components/Terminal/Install.vueapp/composables/useInstallCommand.tsi18n/locales/en.jsoni18n/schema.jsontest/nuxt/components/Package/Header.spec.tstest/nuxt/composables/use-install-command.spec.ts
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
fbf13b2 to
ad4dd04
Compare
gameroman
left a comment
gameroman
left a comment
There was a problem hiding this comment.
Hi, thanks for the PR
Could you add a screenshot or a video to the PR description, please, so it's easier to see the change visually
ad4dd04 to
2446ac9
Compare
Of course! Added to the description now. |
graphieros
added
the
needs review
ghostdevv
left a comment
ghostdevv
left a comment
There was a problem hiding this comment.
hey, ty for the PR and coming to the meetup in Berlin!
One weird thing I noticed was that on some of the tabs the version disappears. E.g.
| for example, it's visible | for example, it's gone |
 |
 |
Show version in header on /package/nuxt/v/4.4.8 (new):
Weirdly we had this before, but it was removed in #2030 - but I think it's safe to assume that was a mistake
| <LinkBase :to="packageRoute(packageName, resolvedVersion)" class="text-fg-muted"> | ||
| {{ resolvedVersion }} | ||
| </LinkBase> |
There was a problem hiding this comment.
Just personal preference, but I can't really justify it. Removed!
| if (props.requestedVersion) { | ||
| commands.push({ |
There was a problem hiding this comment.
I wonder if this should go in the header so it's usable on other tabs aside from the main one where this is rendered
There was a problem hiding this comment.
Agreed, that makes more sense!
| // Copy state | ||
| // Copy state — separate clipboard instances so copying the version does not | ||
| // flip the install command's copied indicator (and vice versa). | ||
| const { copied, copy } = useClipboard({ copiedDuring: 2000 }) |
There was a problem hiding this comment.
We should probably rename these variables too, and then we can remove the comment above
There was a problem hiding this comment.
After adding the command via the Header directly no changes were needed in this file, removing the need for this workaround.
2446ac9 to
cdd432b
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/Package/Header.vue`:
- Around line 106-116: Gate the `package-copy-version` command in the command
list using the same condition as the title version control: require both
`requestedVersion` and `resolvedVersion` to be present. Keep the existing
`copyPkgVersion` action unchanged once the condition is satisfied.
In `@app/composables/usePackageRoute.ts`:
- Around line 24-31: Update the route parsing around vIndex, nameSegments, and
version to determine the unscoped or scoped package prefix first, then recognize
v only when it is the segment immediately following that prefix. Treat
/package-docs/v as having no package version marker, and preserve later v
segments as part of the remaining route rather than interpreting them as the
version delimiter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1d9e9c7a-d520-4958-b791-ba55e2f015a1
📒 Files selected for processing (7)
app/components/Package/Header.vueapp/composables/usePackageRoute.tsi18n/locales/en.jsoni18n/schema.jsontest/e2e/interactions.spec.tstest/nuxt/components/Package/Header.spec.tstest/nuxt/composables/use-package-route.spec.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- i18n/locales/en.json
- test/e2e/interactions.spec.ts
- i18n/schema.json
Hey Willow! Thank you, it was great to meet you in Berlin :) The reason the version wasn't showing on other tabs was because the After your suggestions the PR is much more straightforward! |
cdd432b to
b6fe2fe
Compare
There was a problem hiding this comment.
♻️ Duplicate comments (1)
app/composables/usePackageRoute.ts (1)
33-36: 🎯 Functional Correctness | 🟠 MajorStop the docs version at the first segment.
For
/package-docs/nuxt/v/4.2.0/api, this joins the page slug intorequestedVersionas4.2.0/api, causing downstream version lookups to receive an invalid version. Use onlysegments[prefixLength + 1]; subsequent segments belong to the docs route.Suggested fix
const version = segments[prefixLength] === 'v' && segments.length > prefixLength + 1 - ? segments.slice(prefixLength + 1).join('/') + ? segments[prefixLength + 1] : nullAdd a regression test for
/package-docs/nuxt/v/4.2.0/api.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/composables/usePackageRoute.ts` around lines 33 - 36, Update the version extraction in the route parsing logic to use only segments[prefixLength + 1] when the v marker and version segment are present, rather than joining subsequent segments. Keep later path segments available as the docs route, and add a regression test covering /package-docs/nuxt/v/4.2.0/api.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@app/composables/usePackageRoute.ts`:
- Around line 33-36: Update the version extraction in the route parsing logic to
use only segments[prefixLength + 1] when the v marker and version segment are
present, rather than joining subsequent segments. Keep later path segments
available as the docs route, and add a regression test covering
/package-docs/nuxt/v/4.2.0/api.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d685b6a0-5d36-46ec-8b2b-f2cabe801c7f
📒 Files selected for processing (7)
app/components/Package/Header.vueapp/composables/usePackageRoute.tsi18n/locales/en.jsoni18n/schema.jsontest/e2e/interactions.spec.tstest/nuxt/components/Package/Header.spec.tstest/nuxt/composables/use-package-route.spec.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- i18n/schema.json
- test/nuxt/composables/use-package-route.spec.ts
- i18n/locales/en.json
- test/e2e/interactions.spec.ts
- app/components/Package/Header.vue
- test/nuxt/components/Package/Header.spec.ts
af1a221 to
61883d2
Compare
4 participants
🔗 Linked issue
Resolves #2646 (but of course more could be done)
🧭 Context
The linked issue describes the desire to have a quick way to copy the version number. Right now there is a quick way to copy the package name or an install command, but not the version number alone.
📚 Description
This PR adds a version number in the Header with a copy button and an entry in the command palette when viewing the
/package/<name>/v/<version>routeBase
/package/nuxt(no change):Show version in header on
/package/nuxt/v/4.4.8(new):Screen.Recording.2026-07-15.at.15.40.53.mov
Copy package version visible in command palette while on
/package/nuxt/v/4.4.8:Disclosure: I did use Claude Code to help write part of the code in this PR