feat: add support for react compiler #6211
Conversation
🦋 Changeset detectedLatest commit: ac6d583 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
staff
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
size-limit report 📦
|
There was a problem hiding this comment.
Pull Request Overview
Add support for React Compiler by integrating babel-plugin-react-compiler into our build and test pipelines and adding a migration-status reporting script.
- Introduce
script/react-compiler-migration-status.mtsto track which files are migrated or not. - Update Vitest, Rollup, Babel, Storybook, and Vite configs to apply the React Compiler plugin selectively.
- Add required dependencies and a GitHub Actions job to surface migration status.
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| script/react-compiler-migration-status.mts | New script to report migration progress |
| packages/react/vitest.config.mts | Added React Compiler plugin to Vitest config |
| packages/react/script/react-compiler.mjs | Define which files are supported by React Compiler |
| packages/react/rollup.config.mjs | Enable React Compiler plugin in Rollup build |
| packages/react/package.json | Add React Compiler runtime and plugin deps |
| packages/react/babel.config.js | Enable React Compiler plugin in Babel config |
| packages/react/.storybook/main.ts | Enable React Compiler plugin in Storybook |
| .github/workflows/migration-status.yml | Added CI job for migration status |
| .changeset/clean-ends-end.md | Documented minor release bump |
Comments suppressed due to low confidence (1)
.github/workflows/migration-status.yml:15
- [nitpick] Pinning to Node.js version 22 may not be available on GitHub Actions runners yet; consider using a current LTS like 20 or specifying a semver range.
node-version: 22
| import fs from 'node:fs' | ||
| import {files, notMigrated as notMigratedFiles} from '../packages/react/script/react-compiler.mjs' | ||
|
|
||
| const directory = path.resolve(import.meta.dirname, '..') |
There was a problem hiding this comment.
import.meta.dirname is not a standard ES module property; use fileURLToPath(import.meta.url) and path.dirname to compute the script directory.
Copilot uses AI. Check for mistakes.
| @@ -1,10 +1,18 @@ | |||
| const defines = require('./babel-defines') | |||
| const {isSupported} = require('./script/react-compiler.mjs') | |||
There was a problem hiding this comment.
Requiring an ES module (.mjs) via CommonJS require will fail at runtime; convert this config to ESM or use dynamic import() or rename to a .cjs file.
Copilot uses AI. Check for mistakes.
| const migrated = files | ||
| .filter(filepath => { | ||
| return notMigratedFiles.indexOf(filepath) === -1 | ||
| }) | ||
| .map(filepath => { | ||
| const stats = fs.statSync(filepath) | ||
| return { | ||
| filepath, | ||
| size: stats.size, | ||
| } | ||
| }) | ||
| const notMigrated = notMigratedFiles.map(filepath => { | ||
| const stats = fs.statSync(filepath) | ||
| return { | ||
| filepath, | ||
| size: stats.size, | ||
| } | ||
| }) | ||
|
|
||
| let totalSize = 0 | ||
|
|
||
| for (const filepath of files) { | ||
| const stats = fs.statSync(filepath) | ||
| totalSize += stats.size |
There was a problem hiding this comment.
[nitpick] The script calls fs.statSync on each file multiple times (for total and migrated sizes); consolidate these into a single pass to reduce filesystem operations.
| const migrated = files | |
| .filter(filepath => { | |
| return notMigratedFiles.indexOf(filepath) === -1 | |
| }) | |
| .map(filepath => { | |
| const stats = fs.statSync(filepath) | |
| return { | |
| filepath, | |
| size: stats.size, | |
| } | |
| }) | |
| const notMigrated = notMigratedFiles.map(filepath => { | |
| const stats = fs.statSync(filepath) | |
| return { | |
| filepath, | |
| size: stats.size, | |
| } | |
| }) | |
| let totalSize = 0 | |
| for (const filepath of files) { | |
| const stats = fs.statSync(filepath) | |
| totalSize += stats.size | |
| const fileStatsMap = Object.fromEntries( | |
| files.map(filepath => [filepath, fs.statSync(filepath)]) | |
| ) | |
| const migrated = files | |
| .filter(filepath => { | |
| return notMigratedFiles.indexOf(filepath) === -1 | |
| }) | |
| .map(filepath => ({ | |
| filepath, | |
| size: fileStatsMap[filepath].size, | |
| })) | |
| const notMigrated = notMigratedFiles.map(filepath => ({ | |
| filepath, | |
| size: fileStatsMap[filepath].size, | |
| })) | |
| let totalSize = 0 | |
| for (const filepath of files) { | |
| totalSize += fileStatsMap[filepath].size |
Copilot uses AI. Check for mistakes.
|
👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/384580 |
|
🔴 golden-jobs completed with status |
github-actions
bot
added
integration-tests: failing
Add support for React Compiler by following the guide in: https://react.dev/learn/react-compiler. We use the approach where we are opting out files from being processed by React Compiler (as recommended by the guide). Files that we are not processing with React Compiler are captured in our migration-status workflow.
Changelog
New
Changed
Removed
Rollout strategy