chore: add eslint-plugin-react-compiler for lint-time compiler validation#7536
chore: add eslint-plugin-react-compiler for lint-time compiler validation#7536hectahertz wants to merge 1 commit intomainfrom
Conversation
…tion - Install eslint-plugin-react-compiler as a dev dependency - Add react-compiler/react-compiler rule as 'warn' in eslint.config.mjs - Disable the rule for files not yet migrated to React Compiler - Export unsupportedPatterns from react-compiler.mjs so both the Babel plugin (build-time) and ESLint plugin (lint-time) share a single source of truth for excluded files
|
|
👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the |
There was a problem hiding this comment.
Pull request overview
This PR adds ESLint-based linting for React Compiler compatibility by installing eslint-plugin-react-compiler and configuring it to run during npm run lint. The goal is to surface React Compiler violations earlier in the development cycle (during linting) rather than only at build time.
Changes:
- Installed
eslint-plugin-react-compilerv19.1.0-rc.2 as a dev dependency - Configured the plugin in ESLint to warn on compiler violations, with exclusions for files not yet migrated
- Refactored
react-compiler.mjsto exportunsupportedPatternsas a shared source of truth between build-time and lint-time exclusions
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| package.json | Added eslint-plugin-react-compiler v19.1.0-rc.2 as a dev dependency; minor alphabetization adjustment for @github-ui/storybook-addon-performance-panel |
| package-lock.json | Lockfile updates for the new dependency and its transitive dependencies; version bumps for example apps |
| packages/react/script/react-compiler.mjs | Extracted unsupported patterns into a named array and exported it for use by ESLint config |
| eslint.config.mjs | Added react-compiler plugin configuration with warnings enabled globally and disabled for unsupported file patterns |
| return path.join(PACKAGE_DIR, match) | ||
| }) | ||
| const unsupportedPatterns = [ | ||
| 'src/ActionList/**/*.tsx', |
There was a problem hiding this comment.
The PR description states "Ran npx eslint on all ActionList source files — zero react-compiler/react-compiler warnings, confirming the source is compiler-compatible." However, ActionList is still included in the unsupportedPatterns array at line 15, which means the react-compiler rule is disabled for ActionList files. If ActionList is truly compiler-compatible with zero warnings, it should be removed from this exclusion list to enable both build-time compilation and lint-time validation for those files.
Summary
Currently, React Compiler compatibility is only validated at build time via the Babel plugin. If a component violates the Rules of React in a way that breaks the compiler, the issue is only surfaced during
npm run build— not during local development or in CI lint checks.This PR adds
eslint-plugin-react-compilerto surface compiler diagnostics as ESLint warnings duringnpm run lint, giving developers immediate feedback in their editor and in CI.Changes
eslint-plugin-react-compileras a dev dependencyreact-compiler/react-compilerrule aswarnineslint.config.mjspackages/react/script/react-compiler.mjsto export the rawunsupportedPatternsarray, so both the Babel plugin (build-time) and ESLint plugin (lint-time) share a single source of truth for excluded filesWhen a component is migrated to support the compiler, removing it from the
unsupportedPatternslist inreact-compiler.mjswill automatically enable both build-time compilation and lint-time validation.How did you test this change?
Verified the ESLint rule resolves correctly for both supported and unsupported files:
Ran
npx eslinton all ActionList source files — zeroreact-compiler/react-compilerwarnings, confirming the source is compiler-compatible.