Support eslint 8+ flat plugin syntax out of the box for eslint-plugin-react-compiler (#32120)

## Summary

The current docs for the react compiler eslint plugin is based on
integrating with the old-style eslint config format. This is generally
fine, but most plugins (and the [official
docs](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file))
are now describing themselves in the new format.

This PR has two changes:

- Update the exports to include a "flat configuration"
- Adds a README change describing how to handle both configs

The solution is semi-based on @guillaumebrunerie's answer in
https://github.com/reactwg/react-compiler/discussions/25 mixed with
reading the source code for
[eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/src/index.ts)

## How did you test this change?

I faked this API in the most recent deploy:

![Screenshot 2025-01-18 at 19 58
44](https://github.com/user-attachments/assets/ae0e4bea-fb96-4073-a5f7-c886d087b6af)

Then used that in my app:

![Screenshot 2025-01-18 at 20 04
33](https://github.com/user-attachments/assets/21f77158-7535-453a-b988-49cf59d22d71)

and get myself some compiler messages:

```
/Users/orta/dev/app/apps/puzzmo.com/src/palette/HoverPopover.tsx
  31:37  error  Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)  react-compiler/react-compiler

/Users/orta/dev/app/apps/puzzmo.com/src/components/gameplay/PlayGamePauseOverlay.tsx
   33:7   error  Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)  react-compiler/react-compiler
   35:5   error  Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)  react-compiler/react-compiler
```
This commit is contained in:
Orta Therox
2025-01-18 22:41:34 +00:00
committed by GitHub
parent 829401dc17
commit 18eaf51bd5
2 changed files with 32 additions and 1 deletions

View File

@@ -18,7 +18,24 @@ npm install eslint-plugin-react-compiler --save-dev
## Usage
Add `react-compiler` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
### Flat config
Edit your eslint 8+ config (for example `eslint.config.mjs`) with the recommended configuration:
```diff
+ import reactCompiler from "eslint-plugin-react-compiler"
import react from "eslint-plugin-react"
export default [
// Your existing config
{ ...pluginReact.configs.flat.recommended, settings: { react: { version: "detect" } } },
+ reactCompiler.config.recommended
]
```
### Legacy config (`.eslintrc`)
Add `react-compiler` to the plugins section of your configuration file. You can omit the `eslint-plugin-` prefix:
```json
{

View File

@@ -11,4 +11,18 @@ module.exports = {
rules: {
'react-compiler': ReactCompilerRule,
},
configs: {
recommended: {
plugins: {
'react-compiler': {
rules: {
'react-compiler': ReactCompilerRule,
},
},
},
rules: {
'react-compiler/react-compiler': 'error',
},
},
},
};