Skip to content

refactor: accept versioned pkg route builder in useCommandPaletteVersionCommands#2635

Open
serhalp wants to merge 2 commits intomainfrom
serhalp/refactor/named-routes-in-cmd-palette-pkg-composable
Open

refactor: accept versioned pkg route builder in useCommandPaletteVersionCommands#2635
serhalp wants to merge 2 commits intomainfrom
serhalp/refactor/named-routes-in-cmd-palette-pkg-composable

Conversation

@serhalp
Copy link
Copy Markdown
Member

@serhalp serhalp commented Apr 26, 2026

🔗 Linked issue

N/A

🧭 Context

The string placeholder shape used by useCommandPaletteVersionCommands made callers that already had named route helpers resolve routes to strings and then patch encoded placeholders back into place. This is brittle, especially for routes where vue-router encodes params differently from the URL shape users see.

We have a documented guideline that internal navigation should use route object syntax with named routes instead of strings. This shape was preventing us from respecting our own guideline.

📚 Description

Pass a versioned package route builder to useCommandPaletteVersionCommands instead of a string with a version placeholder.

The placeholder shape made callers that already had named-route helpers
resolve routes to strings and then patch encoded placeholders back into
place. That was brittle, especially for routes where Vue Router encodes
params differently from the URL shape users see.

We have a documented guideline that internal navigation should use
route object syntax with named routes instead of strings. This commit
allows callers to respect that guideline.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 26, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Apr 29, 2026 3:46pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Apr 29, 2026 3:46pm
npmx-lunaria Ignored Ignored Apr 29, 2026 3:46pm

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 031ef4f9-05ff-4069-a8d3-70017436eb19

📥 Commits

Reviewing files that changed from the base of the PR and between 2de6a60 and 4f54ad4.

📒 Files selected for processing (5)
  • app/components/Package/Header.vue
  • app/composables/useCommandPalettePackageCommands.ts
  • app/pages/package-timeline/[[org]]/[packageName].vue
  • app/utils/router.ts
  • test/nuxt/composables/use-command-palette-commands.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • test/nuxt/composables/use-command-palette-commands.spec.ts

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Added package timeline command and command-palette support for timeline and version navigation across package, docs, code and diff views.
  • Refactor

    • Replaced string URL-patterns with typed route-builder callbacks for version navigation and centralised timeline route creation to improve routing consistency and type-safety.
  • Tests

    • Updated unit tests and helpers to use route-builder callbacks and verify version navigation and timeline targets.

Walkthrough

Replaces URL-pattern string routing for command-palette version navigation with typed route-builder callbacks across the app. Introduces a timeline command and centralized packageTimelineRoute helper; updates pages, a composable, component header, and tests to use route-returning functions (RouteLocationRaw) instead of string patterns.

Changes

Cohort / File(s) Summary
Core Composable
app/composables/useCommandPaletteVersionCommands.ts
Function signature changed: accepts `routeForVersion?: MaybeRef<((version: string) => RouteLocationRaw)
Package Commands
app/composables/useCommandPalettePackageCommands.ts
Adds a new package-timeline command entry that computes its to via packageTimelineRoute(...), uses i18n labels/keywords and sets active state when route.name === 'timeline'.
Pages — version route builders
app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue, app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue, app/pages/package-docs/[...path].vue, app/pages/package/[[org]]/[name].vue
Replaces computed URL pattern strings with route-builder functions (e.g., fromVersionRoute, codeVersionRoute, docsVersionRoute, packageRoute) that return RouteLocationRaw using current route params and the supplied version. Passes these functions into useCommandPaletteVersionCommands.
Package Timeline Page Integration
app/pages/package-timeline/[[org]]/[packageName].vue
Integrates command-palette package-version support: derives selected version, versions list and latest info; registers package commands and version commands so version selection navigates to the timeline route and ensures data loading on open.
Component header refactor
app/components/Package/Header.vue
Replaces inline timeline route construction with call to new helper packageTimelineRoute(packageName, resolvedVersion); removes local parsing logic.
Router helpers
app/utils/router.ts
Adds exported packageTimelineRoute(packageName: string, version: string): RouteLocationRaw helper to build timeline route params (org optional, packageName, version).
Tests
test/nuxt/composables/use-command-palette-commands.spec.ts
Updates test harness and specs to provide versionRoute: (version) => RouteLocationRaw instead of a URL-pattern string. Adjusts assertions to use command to targets and verifies package-timeline command to/params for scoped and unscoped packages.
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main refactoring change: converting useCommandPaletteVersionCommands from accepting a string placeholder to accepting a versioned route builder.
Description check ✅ Passed The description provides relevant context and motivation for the changes, explaining why the refactoring was needed and how it addresses brittle string-placeholder routing.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch serhalp/refactor/named-routes-in-cmd-palette-pkg-composable

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
Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.

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

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 26, 2026

Codecov Report

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

Files with missing lines Patch % Lines
[...[org]]/[packageName]/v/[version]/[...filePath].vue](https://app.codecov.io/gh/npmx-dev/npmx.dev/pull/2635?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=npmx-dev#diff-YXBwL3BhZ2VzL3BhY2thZ2UtY29kZS9bW29yZ11dL1twYWNrYWdlTmFtZV0vdi9bdmVyc2lvbl0vWy4uLmZpbGVQYXRoXS52dWU=) 0.00% 3 Missing ⚠️
app/pages/package/[[org]]/[name].vue 0.00% 2 Missing ⚠️

📢 Thoughts on this report? Let us know!

@serhalp serhalp marked this pull request as ready for review April 27, 2026 00:16
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (3)
app/pages/package/[[org]]/[name].vue (1)

490-492: Optional: redundant with the composable's default fallback.

The composable already defaults to packageRoute(context.packageName, version) when no routeForVersion is supplied, so this callback duplicates that behaviour. You could omit the second argument entirely on this page and rely on the default, which would also let you drop the inline arrow.

Proposed simplification
-useCommandPaletteVersionCommands(commandPalettePackageContext, version =>
-  packageRoute(packageName.value, version),
-)
+useCommandPaletteVersionCommands(commandPalettePackageContext)

That said, keeping it explicit is fine if you prefer the call sites to be uniform across pages.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/pages/package/`[[org]]/[name].vue around lines 490 - 492, The call to
useCommandPaletteVersionCommands currently passes an explicit callback
duplicating the composable's default; remove the second argument so the call
becomes useCommandPaletteVersionCommands(commandPalettePackageContext) and let
the composable use its built-in fallback (which constructs
packageRoute(context.packageName, version)), or if you want to keep it explicit
for consistency leave as-is; locate the call to useCommandPaletteVersionCommands
in this file and remove the inline arrow that returns
packageRoute(packageName.value, version) to simplify.
app/pages/package-docs/[...path].vue (1)

127-137: Nit: the destructuring is reconstructing the array it just split.

[firstSegment = name, ...remainingSegments] = name.split('/') followed by [firstSegment, ...remainingSegments, 'v', version] is equivalent to [...name.split('/'), 'v', version]. The destructuring appears to exist solely to satisfy the [string, ...string[]] non-empty-tuple shape without a cast. Consider either spreading directly with a cast (matching the existing pattern at lines 52 and 66 in the same file), or extracting a small helper to share the conversion. Functionally fine as-is.

Possible simplification
 function docsVersionRoute(version: string): RouteLocationRaw {
   const name = pkg.value?.name || packageName.value
-  const [firstSegment = name, ...remainingSegments] = name.split('/')
-
   return {
     name: 'docs',
     params: {
-      path: [firstSegment, ...remainingSegments, 'v', version],
+      path: [...name.split('/'), 'v', version] as [string, ...string[]],
     },
   }
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/pages/package-docs/`[...path].vue around lines 127 - 137, The
destructuring in docsVersionRoute (using [firstSegment = name,
...remainingSegments] = name.split('/')) reconstructs the same array and is
unnecessary; replace it by building params.path directly from the split result
using the same non-empty-tuple cast/pattern used elsewhere (see the file's
existing pattern around lines 52/66) or factor a small helper to convert
string.split('/') into a [string, ...string[]] tuple, then set params.path to
[...thatTuple, 'v', version]; update references to pkg and packageName as needed
to compute the base name before the split.
app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)

90-99: Consider returning a named-route object for consistency with the PR objective.

The PR description notes that the motivation for accepting a route builder is to "use route object syntax with named routes". Here, codeVersionRoute still returns a path string via getCodeUrl, while sibling pages (docsVersionRoute, fromVersionRoute/diffRoute, and the package page) all return named-route objects. Aligning this caller would make the intent uniform and avoid relying on Vue Router's path parsing for params that may need encoding (e.g., scoped names, file paths with special characters).

Proposed refactor
 function codeVersionRoute(nextVersion: string): RouteLocationRaw {
-  return getCodeUrl({
-    org: route.params.org,
-    packageName: route.params.packageName,
-    version: nextVersion,
-    filePath: filePath.value,
-  })
+  return {
+    name: 'code',
+    params: {
+      org: route.params.org,
+      packageName: route.params.packageName,
+      version: nextVersion,
+      filePath: filePath.value ?? '',
+    },
+  }
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/pages/package-code/`[[org]]/[packageName]/v/[version]/[...filePath].vue
around lines 90 - 99, codeVersionRoute currently returns a path string from
getCodeUrl but should return a named-route object like the other builders
(docsVersionRoute, fromVersionRoute/diffRoute) to preserve params and encoding;
change codeVersionRoute to return an object of the form { name:
'<code-route-name>', params: { org: route.params.org, packageName:
route.params.packageName, version: nextVersion, filePath: filePath.value } } (or
use the same route name constant used elsewhere) and pass that into
useCommandPaletteVersionCommands so params are preserved and routed via Vue
Router's named-route syntax instead of a path string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/pages/package-code/`[[org]]/[packageName]/v/[version]/[...filePath].vue:
- Around line 90-99: codeVersionRoute currently returns a path string from
getCodeUrl but should return a named-route object like the other builders
(docsVersionRoute, fromVersionRoute/diffRoute) to preserve params and encoding;
change codeVersionRoute to return an object of the form { name:
'<code-route-name>', params: { org: route.params.org, packageName:
route.params.packageName, version: nextVersion, filePath: filePath.value } } (or
use the same route name constant used elsewhere) and pass that into
useCommandPaletteVersionCommands so params are preserved and routed via Vue
Router's named-route syntax instead of a path string.

In `@app/pages/package-docs/`[...path].vue:
- Around line 127-137: The destructuring in docsVersionRoute (using
[firstSegment = name, ...remainingSegments] = name.split('/')) reconstructs the
same array and is unnecessary; replace it by building params.path directly from
the split result using the same non-empty-tuple cast/pattern used elsewhere (see
the file's existing pattern around lines 52/66) or factor a small helper to
convert string.split('/') into a [string, ...string[]] tuple, then set
params.path to [...thatTuple, 'v', version]; update references to pkg and
packageName as needed to compute the base name before the split.

In `@app/pages/package/`[[org]]/[name].vue:
- Around line 490-492: The call to useCommandPaletteVersionCommands currently
passes an explicit callback duplicating the composable's default; remove the
second argument so the call becomes
useCommandPaletteVersionCommands(commandPalettePackageContext) and let the
composable use its built-in fallback (which constructs
packageRoute(context.packageName, version)), or if you want to keep it explicit
for consistency leave as-is; locate the call to useCommandPaletteVersionCommands
in this file and remove the inline arrow that returns
packageRoute(packageName.value, version) to simplify.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 169b561f-bd1c-4767-a514-3083879efdd3

📥 Commits

Reviewing files that changed from the base of the PR and between 69351cf and 2de6a60.

📒 Files selected for processing (6)
  • app/composables/useCommandPaletteVersionCommands.ts
  • app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
  • app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
  • app/pages/package-docs/[...path].vue
  • app/pages/package/[[org]]/[name].vue
  • test/nuxt/composables/use-command-palette-commands.spec.ts

@serhalp serhalp added the needs review This PR is waiting for a review from a maintainer label Apr 27, 2026
@serhalp serhalp requested a review from ghostdevv April 28, 2026 19:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs review This PR is waiting for a review from a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant