fix(matcher): finalize param token before processing escaped colon

[babu-ch]

fixes #2517

Summary by CodeRabbit

• New Features

  • Enhanced route parameter handling to support escaped special characters in dynamic routes, enabling more flexible route patterns.
  • Added new entity navigation links in the playground application.

• Tests

  • Expanded test coverage for route tokenization, parsing, and URL generation with special character handling.

[netlify]

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	e19d06b
🔍 Latest deploy log	https://app.netlify.com/projects/vue-router/deploys/69b131f7cfcd5f0009adae61

[coderabbitai]

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: d4367ec1-f0ed-49cd-b41b-9eaa9bb02dd4

📥 Commits

Reviewing files that changed from the base of the PR and between ad6ba73 and e19d06b.

📒 Files selected for processing (4)

• packages/playground/src/App.vue
• packages/playground/src/router.ts
• packages/router/__tests__/matcher/pathParser.spec.ts
• packages/router/src/matcher/pathTokenizer.ts

---

📝 Walkthrough

Walkthrough

The PR fixes a bug where route parameters followed by escaped colons were incorrectly parsed, causing parameter names to have colon suffixes and values to have colon prefixes. Changes include a tokenizer update to handle escape sequences properly, comprehensive test coverage for escaped colon scenarios, and playground examples demonstrating the fix.

Changes

Cohort / File(s)	Summary
Router Core Fix packages/router/src/matcher/pathTokenizer.ts	Adds escape handling logic for the backslash character when in Param or ParamRegExpEnd state, enabling proper consumption of buffers and state transitions to handle escaped colons within parameter segments.
Test Coverage packages/router/__tests__/matcher/pathParser.spec.ts	Comprehensive test suite expansion covering tokenizer, parser, and generation flows for escaped colon scenarios, including single parameters with escaped colons, optional/repeatable parameters, custom regex patterns, and multiple parameter combinations.
Playground Examples packages/playground/src/router.ts, packages/playground/src/App.vue	Adds new route definition with escaped colon between parameters (/entity/:entityType([^:]+)\::entityID) and corresponding navigation links for testing the fix with concrete URLs.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A colon escaped, now parsing runs free,
Parameters dance where they're meant to be,
No more twisted names or values askew,
The tokenizer fixed—makes routes work true! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main fix: finalizing parameter tokens before processing escaped colons in the path matcher.
Linked Issues check	✅ Passed	Changes directly address issue #2517: the matcher fix handles escaped colons correctly, and playground route demonstrates the fix works for affected parameter patterns.
Out of Scope Changes check	✅ Passed	All changes are in scope: pathTokenizer logic fix, related test coverage, and playground demonstration of the escaped-colon scenarios from the issue.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

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

commit: 086a950

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.67%. Comparing base (f6923a5) to head (e19d06b).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2654      +/-   ##
==========================================
+ Coverage   85.66%   85.67%   +0.01%     
==========================================
  Files          86       86              
  Lines       10007    10015       +8     
  Branches     2289     2291       +2     
==========================================
+ Hits         8572     8580       +8     
  Misses       1422     1422              
  Partials       13       13              

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