fix: hmr don't with React.lazy + import() Component

[sorrycc]

Close #1366

Summary by CodeRabbit

• 新功能

  • 在 scripts/test-hmr.mjs 中引入了一个新的测试场景，以验证动态导入和热模块替换（HMR）的功能。

• 改进

  • 对动态导入的处理进行了改进，优化了参数传递和绑定。
  • 更新了 umi 版本，从 ^4.0.70 升级到 ~4.2.0。

• 修正

  • 更新了多个 JavaScript 文件中的动态导入语句，确保在动态导入时正确绑定模块路径。

• 依赖更新

  • 在 package.json 中添加了 umi 依赖版本 ~4.2.0。

[coderabbitai]

Warning

Review failed

The pull request is closed.

Walkthrough

这次更改涉及改善动态导入功能，优化了要求调用和模块注册的方法。主要调整了参数绑定和函数调用方式，以便于处理动态导入的模块和热模块替换（HMR）。

Changes

文件路径	修改摘要
crates/mako/src/visitors/dynamic_import.rs	调整了用于构建动态导入的实用函数和方法调用，改进了require_call和dr_call的功能。
crates/mako/templates/app_runtime.stpl	修改了createRuntime函数中的条件渲染逻辑和参数名，特别是requireModule.dr函数中的参数名。
e2e/fixtures/javascript.require-dynamic/expect.js	修改了moduleReg函数调用中的参数，改为使用__mako_require__.bind动态函数调用。
e2e/fixtures/runtime.dynamic_import_interop/expect.js	修改了动态导入语句，调整了模块路径的绑定方式。
examples/with-umi/package.json	将"umi"的版本从"^4.0.70"更新为"~4.2.0"。
package.json	添加了"umi": "~4.2.0"到dependencies中。
scripts/test-hmr.mjs	在src/Foo.tsx文件中介绍了一个新的测试场景，并验证了HMR的预期HTML输出。

Assessment against linked issues

Objective (Issue #1366)	Addressed	Explanation
解决 React.lazy + import() 的HMR问题	✅

Poem

代码花园兔奔跑，
改动细微功能高。
动态导入巧调整，
热模块替换停不了。
🎉✨函数绑定，不再烦扰，
新版本上线，齐欢笑！🌸🐇

Tip

AI model upgrade

gpt-4o model for reviews and chat is now live

OpenAI claims that this model is better at understanding and generating code than the previous models. Please join our Discord Community to provide any feedback or to report any issues.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

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>.
  • Generate unit testing code for this file.
  • 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 generate unit testing code for this file.
  • @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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @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.

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 as 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 resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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.