Skip to content

fix: docs tab repeats the package name twice in the header - #3101

Merged
ghostdevv merged 3 commits into
npmx-dev:mainfrom
WilhelmBerggren:fix/package-route-encoded-scope-docs
Jul 31, 2026
Merged

fix: docs tab repeats the package name twice in the header#3101
ghostdevv merged 3 commits into
npmx-dev:mainfrom
WilhelmBerggren:fix/package-route-encoded-scope-docs

Conversation

@WilhelmBerggren

@WilhelmBerggren WilhelmBerggren commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

Resolves #3100

🧭 Context

In #3044, we began showing the version of a package next to its name when viewing package/<name>/v/<version>. When navigating to the docs tab, scoped packages were instead showing @<org>/<package>/@<org>/<package>

📚 Description

Navigating to the docs tabs leads to /package-docs/@vitest%2Fpretty-format/v/4.1.10, not /package-docs/@vitest/pretty-format/v/4.1.10. When the slash is unescaped, the version shows correctly. This PR addresses these two separate issues :

  1. Resolve the package name and version correctly if the path contains encoded /.
  2. Construct /package-docs routes consistently to prevent encoding the / in @org/package

Before:
Screenshot 2026-07-30 at 16 13 56
After:
image

@vercel

vercel Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview Jul 30, 2026 12:46pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Jul 30, 2026 12:46pm
npmx-lunaria Ignored Ignored Jul 30, 2026 12:46pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Summary by CodeRabbit

  • New Features
    • Added a centralized helper for navigating to package documentation pages, with support for scoped packages and optional versions.
  • Bug Fixes
    • Improved parsing and routing for documentation catch-all paths, ensuring correct extraction of package name and version (including edge cases like a package literally named v).
    • Fixed documentation redirects and “missing version” handling to use the standardized docs route.
    • Tightened safeguards to avoid generating incomplete documentation links.
  • Tests
    • Expanded coverage for docs route parsing and docsRoute round-tripping scenarios.

Walkthrough

Docs URL construction is centralised in docsRoute, scoped package path parsing is corrected, and package header, command palette, and docs-page navigation now use the shared helper. Tests cover scoped names, versions, whitespace sanitisation, and versionless routes.

Changes

Docs routing

Layer / File(s) Summary
Route construction and parsing
app/utils/router.ts, app/composables/usePackageRoute.ts, test/unit/app/utils/router.spec.ts, test/nuxt/composables/use-package-route.spec.ts
docsRoute builds catch-all docs paths from package names and optional sanitised versions; usePackageRoute parses scoped names and versions, including package names containing a literal v.
Docs route integrations
app/components/Package/Header.vue, app/composables/useCommandPalettePackageCommands.ts, app/pages/package-docs/[...path].vue
Header links, command palette commands, redirects, watcher replacements, and version routes use docsRoute instead of manually assembling route parameters.

Sequence Diagram(s)

sequenceDiagram
  participant PackageUI
  participant docsRoute
  participant DocsPage
  participant usePackageRoute
  PackageUI->>docsRoute: Build docs location
  docsRoute-->>PackageUI: Return catch-all docs path
  DocsPage->>usePackageRoute: Parse docs path
  usePackageRoute-->>DocsPage: Return package and requested version
  DocsPage->>docsRoute: Build redirect or version location
  docsRoute-->>DocsPage: Return updated docs path
Loading

Possibly related PRs

Suggested reviewers: ghostdevv

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The changes address #3100 by fixing docs route parsing and generation for scoped packages.
Out of Scope Changes check ✅ Passed The added helper, refactors, and tests all support the reported docs tab bug fix.
Title check ✅ Passed The title clearly describes the main fix: the docs tab duplicating the package name in the header.
Description check ✅ Passed The description is directly related to the change and accurately explains the scoped-package docs route fixes.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@WilhelmBerggren WilhelmBerggren changed the title fix: Docs tab repeats the package name twice in the header fix: docs tab repeats the package name twice in the header Jul 30, 2026
@codecov

codecov Bot commented Jul 30, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 58.82353% with 7 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/pages/package-docs/[...path].vue 0.00% 3 Missing and 1 partial ⚠️
app/composables/usePackageRoute.ts 60.00% 0 Missing and 2 partials ⚠️
app/utils/router.ts 75.00% 0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
test/nuxt/composables/use-package-route.spec.ts (1)

83-100: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover the scoped path shape emitted by docsRoute.

Both tests use ['@vitest/pretty-format', ...] as a single segment, so the new two-segment branch is untested. Add a case using ['@vitest', 'pretty-format', 'v', '4.1.10'] to verify the parser consumes the actual route produced by docsRoute.

As per coding guidelines, core functionality should have unit tests using Vitest.

🤖 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 `@test/nuxt/composables/use-package-route.spec.ts` around lines 83 - 100, Add a
Vitest case in the usePackageRoute test suite covering the two-segment scoped
route shape emitted by docsRoute: push params ['`@vitest`', 'pretty-format', 'v',
'4.1.10'] and assert packageName is '`@vitest/pretty-format`', requestedVersion is
'4.1.10', and orgName is 'vitest'.

Source: Coding guidelines

🤖 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/composables/usePackageRoute.ts`:
- Around line 30-34: The docs-page parser must match the package route contract
used by the parser around splitPackageName: treat “v” as a version marker only
immediately after the complete package prefix, not at the first occurrence
anywhere in the path. Update app/pages/package-docs/[...path].vue to reuse a
shared parser or apply the same scoped-package logic, and add regression
coverage for docsRoute('v', '1.0.0') and docsRoute('`@org/v`', '1.0.0') so both
resolve the package name and version correctly.

---

Nitpick comments:
In `@test/nuxt/composables/use-package-route.spec.ts`:
- Around line 83-100: Add a Vitest case in the usePackageRoute test suite
covering the two-segment scoped route shape emitted by docsRoute: push params
['`@vitest`', 'pretty-format', 'v', '4.1.10'] and assert packageName is
'`@vitest/pretty-format`', requestedVersion is '4.1.10', and orgName is 'vitest'.
🪄 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 Plus

Run ID: ea2b9ac4-2cc1-4e24-bbc8-16935692dfac

📥 Commits

Reviewing files that changed from the base of the PR and between d727566 and bdb6067.

📒 Files selected for processing (7)
  • app/components/Package/Header.vue
  • app/composables/useCommandPalettePackageCommands.ts
  • app/composables/usePackageRoute.ts
  • app/pages/package-docs/[...path].vue
  • app/utils/router.ts
  • test/nuxt/composables/use-package-route.spec.ts
  • test/unit/app/utils/router.spec.ts

Comment thread app/composables/usePackageRoute.ts

@ghostdevv ghostdevv left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty!

@ghostdevv
ghostdevv added this pull request to the merge queue Jul 31, 2026
Merged via the queue into npmx-dev:main with commit 32770c0 Jul 31, 2026
25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs tab repeats the package name twice in the header

2 participants