feat: allow `filePath` to be `null` on a route added in an editable tree #607

Anoesj · 2025-03-18T10:12:54Z

It seems that, when we only allow filePath to be null on a route added in an editable tree, that shouldn't cause any problems.

In Nuxt, we don't use file scanning and add routes by modifying the EditableTreeNode of the root page in the beforeWriteFiles callback. A NuxtPage can theoretically not have a corresponding file, although I'm not sure what the use case here is exactly. So currently, where we run parent.insert(path, page.file), page.file can be undefined and we currently use a @ts-expect-error before that line to suppress TS errors.

If this PR is safe to merge, we can remove that @ts-expect-error.

Summary by CodeRabbit

New Features
- Improved support for handling routes with a null file path.
Tests
- Added a test to verify correct behavior when inserting a route with a null file path.

pkg-pr-new · 2025-03-18T10:13:33Z

Open in StackBlitz

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

commit: 733034c

codecov · 2025-03-18T10:14:10Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.90%. Comparing base (cd4a3f8) to head (733034c).
⚠️ Report is 82 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #607      +/-   ##
==========================================
- Coverage   61.72%   60.90%   -0.82%     
==========================================
  Files          32       36       +4     
  Lines        3135     3379     +244     
  Branches      580      619      +39     
==========================================
+ Hits         1935     2058     +123     
- Misses       1194     1314     +120     
- Partials        6        7       +1

☔ 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.

posva

I know the comment is a bit weird. I didn't find any practical case where this was useful when inserting an already parsed node. I couldn't find any usage of this in Nuxt code. Where is it?

Anoesj · 2025-04-22T14:10:09Z

Hmm, it's been a while since I last looked at this. I think it's these two lines, where page.file can be undefined when the page is added programmatically:

Here you can see that file is optional in NuxtPage: https://github.com/nuxt/nuxt/blob/b0497b5b188fa1223db64982acb20e061846faa4/packages/schema/src/types/hooks.ts#L32

I am not entirely sure, but maybe Nuxt supports virtual pages that don't really correspond to files? If that's true and this PR is to be merged, then we need to adjust the lines mentioned above to fall back to null when page.file is nullish.

Anoesj · 2025-04-22T14:17:12Z

Here is an example in a test file, where no file has been specified: https://github.com/nuxt/nuxt/blob/b0497b5b188fa1223db64982acb20e061846faa4/test/fixtures/basic-types/nuxt.config.ts#L36

Not sure if this test case is actually realistic, but Nuxt does seem to support some form of file-less pages.

posva

Thanks for this. I will come back to it after merging other things like relative paths insertions. I'm not 100% sure about it yet but I think it makes sense in the context of the editable tree where a node can be created to have children afterwards

src/core/tree.ts

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

coderabbitai · 2025-08-07T13:13:12Z

Walkthrough

The changes update method signatures in EditableTreeNode and TreeNode to allow filePath to be string | null, adjust logic for handling null filePath in component determination, and add a test for inserting a route with a null filePath.

Changes

Cohort / File(s)	Change Summary
EditableTreeNode insert method signature `src/core/extendRoutes.ts`	Changed `insert` method to accept `filePath: string
TreeNode insertParsedPath method and logic `src/core/tree.ts`	Updated `insertParsedPath` to accept nullable `filePath` and adjusted component logic accordingly.
EditableTreeNode null filePath test `src/core/extendRoutes.spec.ts`	Added test for inserting a route with `null` as `filePath`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 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 cd4a3f8 and 733034c.

📒 Files selected for processing (3)

src/core/extendRoutes.spec.ts (1 hunks)
src/core/extendRoutes.ts (1 hunks)
src/core/tree.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/core/extendRoutes.ts (1)

src/core/treeNodeValue.ts (1)

path (73-80)

🔇 Additional comments (2)

src/core/extendRoutes.ts (1)

41-41: LGTM! Type signature correctly updated.

The change allows filePath to be null as intended, enabling programmatically added routes without associated files.

src/core/extendRoutes.spec.ts (1)

33-40: Good test coverage for null filePath functionality.

Test correctly verifies that routes can be inserted with null filePath and maintains expected behavior.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

🪧 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.
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.

Support

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

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 generate unit tests to generate unit tests for 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.

feat: allow filePath to be null on a route added in an editable tree

2d0d1a2

Anoesj mentioned this pull request Mar 19, 2025

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

Merged

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 reviewed Apr 22, 2025

View reviewed changes

src/core/tree.ts Outdated Show resolved Hide resolved

src/core/tree.ts Outdated Show resolved Hide resolved

feat: allow filePath to be null in TreeNode.insertParsedPath

733034c

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: allow `filePath` to be `null` on a route added in an editable tree #607

feat: allow `filePath` to be `null` on a route added in an editable tree #607

Uh oh!

Anoesj commented Mar 18, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

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

edited

Loading

Uh oh!

codecov bot commented Mar 18, 2025 •

edited

Loading

Uh oh!

posva left a comment

Uh oh!

Anoesj commented Apr 22, 2025

Uh oh!

Anoesj commented Apr 22, 2025

Uh oh!

posva left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot commented Aug 7, 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!

Uh oh!

Uh oh!

feat: allow filePath to be null on a route added in an editable tree #607

Are you sure you want to change the base?

feat: allow filePath to be null on a route added in an editable tree #607

Uh oh!

Conversation

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

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

posva left a comment

Choose a reason for hiding this comment

Uh oh!

Anoesj commented Apr 22, 2025

Uh oh!

Anoesj commented Apr 22, 2025

Uh oh!

posva left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

feat: allow `filePath` to be `null` on a route added in an editable tree #607

feat: allow `filePath` to be `null` on a route added in an editable tree #607

Anoesj commented Mar 18, 2025 •

edited by coderabbitai bot

Loading

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

edited

Loading

codecov bot commented Mar 18, 2025 •

edited

Loading

coderabbitai bot commented Aug 7, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)