feat: add children route names generic to generated `RouteNamedMap` and adjust docs and tests #602

Anoesj · 2025-03-13T13:22:49Z

Description

Note

This PR is intended to be paired with the following vue-router PR: vuejs/router#2475.
This PR itself contains a temporary pnpm patch file that applies the changes in above-mentioned PR to work on this feature and make sure you can run tests and generate docs properly. Before merging, this patch needs to be removed and vue-router should be updated if the vue-router PR is merged.

This extends generated RouteRecordInfo objects in RouteNamedMap to make sure every route defines the route names of their children routes. Now useRoute('/parent') can return the typings of both the parent route and its children routes, as can be seen in the example in the adjusted docs:

Summary by CodeRabbit

New Features
- Added a preview command for documentation.
- Improved documentation with expanded TypeScript usage examples and clearer comments.
- Enhanced route typing to support nested and dynamic child routes.
Bug Fixes
- Corrected route key and path string formats in documentation for accuracy.
Refactor
- Updated route type generation to include child route names as a generic parameter for better type support.
- Improved internal methods for retrieving and sorting route tree descendants.
Tests
- Added and updated test cases to verify correct handling of nested and dynamic child routes in route maps.

pkg-pr-new · 2025-03-13T13:25:15Z

Open in StackBlitz

npm i https://pkg.pr.new/unplugin-vue-router@602

commit: 3b25ce4

codecov · 2025-03-13T13:25:48Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 62.60%. Comparing base (871b304) to head (3b25ce4).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #602      +/-   ##
==========================================
+ Coverage   62.36%   62.60%   +0.23%     
==========================================
  Files          32       32              
  Lines        3141     3161      +20     
  Branches      586      592       +6     
==========================================
+ Hits         1959     1979      +20     
  Misses       1177     1177              
  Partials        5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Anoesj

Just some extra info 😄

package.json

patches/vue-router.patch

coderabbitai · 2025-04-24T07:40:33Z

Walkthrough

The updates introduce a fifth generic parameter to RouteRecordInfo in the RouteNamedMap interface, representing child route names as a union type where applicable. Type generation logic, TypeScript examples, and related documentation are updated to reflect this. Additional test cases, new routes, and supporting methods for deep child collection are included.

Changes

Files/Groups	Change Summary
docs/.vitepress/twoslash-files.ts docs/.vitepress/twoslash/code/typed-router.ts	Updated `RouteNamedMap` to add a fifth generic parameter to `RouteRecordInfo`, denoting child route names or `never`.
docs/guide/typescript.md playground/src/router.ts	Expanded `RouteNamedMap` for dynamic/nested routes with new child route entries and updated usage examples.
docs/introduction.md	Moved type imports inside module declaration; updated route keys/paths; added fifth generic parameter as `never`.
playground/typed-router.d.ts	Added fifth generic parameter for child routes; added new routes with corresponding `RouteRecordInfo` types.
package.json	Added `docs:preview` script, bumped `vue-router` version, and added `pnpm.onlyBuiltDependencies` config.
src/codegen/generateRouteMap.ts	Refactored to conditionally add a fifth generic parameter for children; logic now collects deep children with names.
src/core/tree.ts	Added `getSortedChildrenDeep()` method; explicitly typed `getSortedChildren()` return value.
src/codegen/generateRouteMap.spec.ts	Added tests for children union in parent route generics; updated snapshots for consistency.
src/utils/index.ts	Removed extraneous comment line; no functional changes.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 16ac1ec and c107ace.

📒 Files selected for processing (2)

playground/typed-router.d.ts (2 hunks)
src/utils/index.ts (1 hunks)

✅ Files skipped from review due to trivial changes (1)

src/utils/index.ts

🚧 Files skipped from review as they are similar to previous changes (1)

playground/typed-router.d.ts

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

…nd adjust docs and tests

posva

It took me a while but we are getting there!

posva · 2025-06-04T12:17:09Z

docs/guide/typescript.md

+    >
+    'custom-dynamic-child-name': RouteRecordInfo<
+      'custom-dynamic-child-name',
+      '/added-during-runtime/[...path]/child',


I think we should improve this example:

keep the original [...path] route

Add a new one that makes more sense in a nested fashion like /users/[id]/edit

Omit /users

/users/[id] should have edit as a child

This was referenced Mar 13, 2025

fix(nuxt): prevent typed pages param duplication in RouteNamedMap nuxt/nuxt#31331

Merged

feat: make typed useRoute(currentRouteName) return children route types as well vuejs/router#2475

Merged

Anoesj commented Mar 13, 2025

View reviewed changes

package.json Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

patches/vue-router.patch Outdated Show resolved Hide resolved

posva added this to unplugin-vue-router Apr 22, 2025

github-project-automation bot moved this to 🆕 New in unplugin-vue-router Apr 22, 2025

posva moved this from 🆕 New to 🏗 In progress in unplugin-vue-router Apr 22, 2025

posva force-pushed the feat/add-child-route-names-in-generated-dts branch from 3696626 to 13706a2 Compare April 25, 2025 13:22

posva moved this from 🏗 In progress to 👀 In review in unplugin-vue-router Jun 4, 2025

Anoesj and others added 9 commits June 4, 2025 13:49

feat: add children route names generic to generated RouteNamedMap a…

1f1bf64

…nd adjust docs and tests

chore: use the vue router version from the PR

0d43c34

refactor: cleaner type param join

014b428

refactor: handle deep children and skips

7e2cd04

test: deeply nested children

ad69391

chore: generate playground d.ts

6b5406b

test: index + adjacent

c771b1b

chore: use latest vue-router

9e8ba0e

test: fix

d56f127

posva force-pushed the feat/add-child-route-names-in-generated-dts branch from 13706a2 to d56f127 Compare June 4, 2025 12:13

posva added 4 commits June 4, 2025 14:22

chore: old param

d14c534

chore: unused import

3b25ce4

chore: unused import [skip ci]

16ac1ec

chore: minor [skip ci]

c107ace

posva approved these changes Jun 4, 2025

View reviewed changes

posva merged commit f2fb721 into posva:main Jun 4, 2025
3 checks passed

github-project-automation bot moved this from 👀 In review to ✅ Done in unplugin-vue-router Jun 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: add children route names generic to generated `RouteNamedMap` and adjust docs and tests #602

feat: add children route names generic to generated `RouteNamedMap` and adjust docs and tests #602

Uh oh!

Anoesj commented Mar 13, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

pkg-pr-new bot commented Mar 13, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 13, 2025 •

edited

Loading

Uh oh!

Anoesj left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot commented Apr 24, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

posva left a comment

Uh oh!

posva Jun 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: add children route names generic to generated RouteNamedMap and adjust docs and tests #602

feat: add children route names generic to generated RouteNamedMap and adjust docs and tests #602

Uh oh!

Conversation

Anoesj commented Mar 13, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Summary by CodeRabbit

Uh oh!

pkg-pr-new bot commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Anoesj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

posva left a comment

Choose a reason for hiding this comment

Uh oh!

posva Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

feat: add children route names generic to generated `RouteNamedMap` and adjust docs and tests #602

feat: add children route names generic to generated `RouteNamedMap` and adjust docs and tests #602

Anoesj commented Mar 13, 2025 •

edited by coderabbitai bot

Loading

pkg-pr-new bot commented Mar 13, 2025 •

edited

Loading

codecov bot commented Mar 13, 2025 •

edited

Loading

coderabbitai bot commented Apr 24, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)