feat: integrated react-compiler#290
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 Walkthrough概述该变更为项目添加了React编译器支持，包括新增TypeScript类型、更新构建配置以接受编译器选项，以及在BabelCommonConfig中实现条件化的React编译器插件注入。 变更清单
代码审查工作量评估🎯 3 (中等复杂) | ⏱️ ~20 分钟 重点关注领域：
诗歌
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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. Comment |
Summary of ChangesHello @li-jia-nan, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces the React Compiler into the project's build pipeline. The primary goal is to leverage automatic memoization and optimization capabilities provided by the compiler to enhance the performance of React applications. This involves updating project dependencies, configuring Babel to use the new plugin, and making minor adjustments to development-related files. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request integrates the React Compiler by adding the babel-plugin-react-compiler and its necessary dependencies. The Babel configuration is updated to include the new plugin. The changes are generally good, but I have a couple of suggestions for src/getBabelCommonConfig.ts to improve consistency and maintainability: one regarding module resolution for the new plugin and another about a comment's language. Additionally, some minor code quality improvements are included in other files.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.gitignore(1 hunks)package.json(1 hunks)script/prettier.js(1 hunks)src/getBabelCommonConfig.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
script/prettier.js (1)
script/lint-prettier.js (1)
didError(16-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (5)
.gitignore (1)
28-28: LGTM!添加 pnpm-lock.yaml 到 .gitignore 是合理的做法，与 PR 中的工具链更新保持一致。
script/prettier.js (1)
40-42: LGTM!移除未使用的错误变量是合理的简化。现代 JavaScript 支持不绑定错误参数的 catch 语句。
src/getBabelCommonConfig.ts (3)
5-7: LGTM!添加
BabelConfig接口继承TransformOptions并扩展cacheDirectory字段是合理的类型定义，提高了类型安全性。
9-9: LGTM!函数返回类型更新为
BabelConfig接口，与新定义的接口保持一致，提供了更好的类型检查。
11-16: 检查 React Compiler 配置：已验证，发现需改进的地方。根据官方 React Compiler 文档确认，target 选项接受字符串值 '17'、'18' 或 '19'，目前使用的
'18'格式正确。已验证的项目：
- target 配置格式 ✓：字符串格式
'18'符合官方规范- 插件顺序 ✓：React Compiler 正确地被放置在插件数组第一位，@babel/plugin-transform-typescript 在第二位，执行顺序符合官方要求
- 兼容性 ✓：与 @babel/preset-react ^7.0.0 和其他 Babel 插件兼容
需要改进的地方：
根据官方文档，当目标版本低于 React 19（即 '17' 或 '18'）时，应将 react-compiler-runtime 添加为依赖。当前项目的 package.json 中缺少此依赖。请确认是否需要将
react-compiler-runtime添加到项目依赖中。
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/getBabelCommonConfig.ts (1)
36-43: 建议将代码注释改为英文。根据之前的审查意见，为了保持项目一致性并方便国际贡献者，建议将第 40 行的中文注释改为英文。
建议应用以下修改：
{ - target: '18', // 最低支持的版本是 React 18 + target: '18', // The minimum supported version is React 18 },相关审查意见：之前的评审中已经指出需要使用英文注释。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/getBabelCommonConfig.ts(3 hunks)src/getWebpackConfig.ts(1 hunks)src/gulpfile.ts(2 hunks)src/jest/codePreprocessor.ts(1 hunks)src/jest/demoPreprocessor.ts(1 hunks)src/jest/rewriteSource.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
src/jest/rewriteSource.ts (2)
src/jest/codePreprocessor.ts (1)
ImportDeclaration(13-15)src/jest/demoPreprocessor.ts (1)
ImportDeclaration(93-102)
src/getWebpackConfig.ts (2)
src/jest/codePreprocessor.ts (1)
process(37-70)src/utils/projectHelper.ts (1)
getProjectPath(6-8)
src/getBabelCommonConfig.ts (1)
src/utils/projectHelper.ts (1)
resolve(10-12)
🔇 Additional comments (7)
src/getWebpackConfig.ts (1)
38-45: 实现正确，逻辑清晰。新增的
libDir常量和对getBabelCommonConfig的调用符合预期。仅在libDir === 'dist'时启用 React Compiler，这样的条件判断合理且与其他文件保持一致。src/jest/demoPreprocessor.ts (1)
123-125: 实现正确。正确地将
enabledReactCompiler选项传递给getBabelCommonConfig，与其他文件的实现保持一致。src/jest/codePreprocessor.ts (1)
39-41: 实现正确。正确地将
enabledReactCompiler选项传递给getBabelCommonConfig，与其他文件的实现保持一致。src/jest/rewriteSource.ts (1)
1-5: 类型改进合理。统一了 Babel 类型的导入方式，类型注解更加明确，运行时行为保持不变。
src/getBabelCommonConfig.ts (3)
5-11: 类型定义清晰合理。新增的
BabelConfigOptions和BabelConfig接口设计良好，为配置提供了类型安全保障。
13-14: 函数签名改进提升了可配置性。新增的
options参数使得 Babel 配置更加灵活，PluginItem[]类型注解也增强了类型安全。
63-63: 正确导出函数。新增的默认导出语句使得该函数可以被其他模块正确引用。
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
2 participants
Summary by CodeRabbit
发布说明
新功能
杂项
✏️ Tip: You can customize this high-level summary in your review settings.