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
  • Introduced an option to enable automatic Hot Module Replacement (HMR) handling for Vue Router.
  • Added support for seamless HMR updates by automatically injecting necessary imports and function calls when the feature is enabled in the plugin options.

[coderabbitai]

Walkthrough

A new plugin for automatic Vue Router HMR integration was added. The main plugin now conditionally includes this HMR plugin based on a new autoHmr option in the configuration interface.

Changes

File(s)	Change Summary
src/auto-hmr/index.ts	Added new plugin: injects import and invocation of handleHotUpdate for Vue Router HMR automation.
src/index.ts	Imports and conditionally applies the new auto-HMR plugin based on the autoHmr option.
src/options.ts	Added optional autoHmr boolean property to the Options interface.

---

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

📒 Files selected for processing (1)

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

🔇 Additional comments (9)

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

1-3: LGTM! Clean imports for plugin functionality.

The import statements properly bring in the necessary types for unplugin, AST manipulation, and TypeScript support.

---

5-16: LGTM! Well-structured helper functions.

The utility functions correctly extract router variable names and locate router declarations in the AST.

---

18-29: LGTM! Robust import detection logic.

The function correctly identifies handleHotUpdate imports from the specified module path.

---

31-72: LGTM! Comprehensive AST traversal implementation.

The recursive traversal correctly handles both direct function calls and member expression calls to handleHotUpdate.

---

74-76: LGTM! Simple and clear interface definition.

The options interface is appropriately minimal for the plugin's requirements.

---

78-82: LGTM! Proper plugin configuration.

The plugin name and enforcement settings are correctly configured for post-processing.

---

84-90: LGTM! Efficient early filtering.

The performance optimizations skip unnecessary processing for virtual modules and irrelevant files.

---

92-116: LGTM! Sound AST analysis logic.

The code correctly parses and analyzes the AST to detect router declarations and existing imports.

---

118-138: LGTM! Clean code injection logic.

The conditional addition of imports and function calls is well-implemented and maintains code structure.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

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

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