feat: add auto-hmr-plugin and autoHmr option

[libondev]

reimpl: #617

This pr is similar to the implementation of vuejs/pinia#2954, which transfers the work of automatically injecting hmr code to the plugin part, and adds an option to control whether the plugin is enabled or not.

Summary by CodeRabbit

• New Features
  • Added an option to enable automatic Hot Module Replacement (HMR) handling for Vue Router.
  • When enabled, the plugin automatically injects the needed import and invokes the runtime hook to ensure seamless HMR updates for the router instance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a new unplugin-based auto-HMR plugin that injects import and invocation of handleHotUpdate for Vue Router, and conditionally loads it when the new autoHmr option is enabled in the main plugin options.

Changes

Cohort / File(s)	Change Summary
Auto HMR plugin src/auto-hmr/index.ts	New exported createAutoHmrPlugin implementing AST analysis and code transforms to detect a createRouter instance, inject import { handleHotUpdate } from '...'; if missing, and append a handleHotUpdate(router) call when needed.
Integration & options src/index.ts, src/options.ts	Import and conditionally append the auto-HMR plugin when options.autoHmr is truthy; add optional autoHmr?: boolean to the Options interface.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review AST traversal and edge cases in src/auto-hmr/index.ts (router detection, scope/name collisions, import insertion location).
• Confirm the module path constant passed (MODULE_ROUTES_PATH) matches intended runtime import and behavior.
• Verify no unintended changes to build or plugin ordering when appended in src/index.ts.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding a new auto-HMR plugin and an autoHmr option to control it.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 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 9fdf339 and c77f8c4.

📒 Files selected for processing (2)

• src/index.ts (2 hunks)
• src/options.ts (1 hunks)

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

• src/index.ts

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-08-16T13:00:51.271Z

Learnt from: posva
Repo: posva/unplugin-vue-router PR: 700
File: src/core/context.ts:109-147
Timestamp: 2025-08-16T13:00:51.271Z
Learning: In src/core/context.ts, the options parameter is already resolved, meaning options.experimental.paramMatchers is either an object with a dir property or undefined - never a boolean. The boolean normalization happens earlier in the options resolution phase.

Applied to files:

• src/options.ts

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

src/auto-hmr/index.ts (1)

77-77: Regex reliability concern.

Same issue as line 35 - regex matching in code can be unreliable.

🧹 Nitpick comments (1)

src/auto-hmr/index.ts (1)

35-35: Consider regex reliability.

The regex /handleHotUpdate\([\s\S]*?\)/ may match unintended occurrences like comments or strings. Consider using AST-based detection instead.

-  const handleHotUpdateCallRegex = /handleHotUpdate\([\s\S]*?\)/

Use AST parsing to detect function calls more reliably:

function hasHandleHotUpdateCall(ast: any): boolean {
  // Walk AST to find CallExpression with callee.name === 'handleHotUpdate'
}

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between e62ef6f and aee9b7a.

📒 Files selected for processing (3)

• src/auto-hmr/index.ts (1 hunks)
• src/index.ts (2 hunks)
• src/options.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/index.ts (2)

src/auto-hmr/index.ts (1)

• createAutoHmrPlugin (34-101)

src/core/moduleConstants.ts (1)

• MODULE_ROUTES_PATH (6-6)

🔇 Additional comments (11)

src/options.ts (1)

216-220: LGTM!

Clean addition of the new option with proper documentation.

src/index.ts (2)

24-24: Clean import addition.

---

206-212: Good integration pattern.

Follows the same conditional plugin inclusion pattern as the experimental autoExportsDataLoaders.

src/auto-hmr/index.ts (8)

4-6: Helper function is correct.

---

8-15: Router detection logic is sound.

---

17-28: Import detection logic is correct.

---

42-42: Virtual module filtering is correct.

---

46-48: Early return optimization is good.

---

82-86: Import injection looks correct.

---

89-91: Function call injection is correct.

---

93-95: Code transformation approach is sound.

[libondev]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[libondev]

@posva PTAL

[posva]

Thanks and sorry for the delay!

[posva]

Could you add a filter like the one added for the main plugin (src/index.ts). We should be able to write a regex that checks the code for a router creation like /\w+\s*=\s*(?:experimental_)?createRouter\(/

[posva]

I think it's also worth filtering only on files like router/index and router and allow configuring it

[posva]

This could be either vue-router/auto-routes or vue-router/auto-resolver depending of whether experimental.paramParsers is activated

[posva]

This will need to be an object to match the other use cases. Probably an enabled option will also make sense instead of a boolean and I think we can enable it by default.