@samitouri / QOS-React / commits / 18eaf51bd5

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 ```

Orta Therox committed Jan 18, 2025 at 22:41 UTC 18eaf51bd51fed8dfed661d64c306759101d0bfd

2 files changed +32 -1

compiler/packages/eslint-plugin-react-compiler/README.md

+18 -1

@@ -18,7 +18,24 @@ npm install eslint-plugin-react-compiler --save-dev

19 ## Usage

21 -Add `react-compiler` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

21 +### Flat config

22 +

23 +Edit your eslint 8+ config (for example `eslint.config.mjs`) with the recommended configuration:

24 +

25 +```diff

26 ++ import reactCompiler from "eslint-plugin-react-compiler"

27 +import react from "eslint-plugin-react"

28 +

29 +export default [

30 + // Your existing config

31 + { ...pluginReact.configs.flat.recommended, settings: { react: { version: "detect" } } },

32 ++ reactCompiler.config.recommended

33 +]

34 +```

35 +

36 +### Legacy config (`.eslintrc`)

37 +

38 +Add `react-compiler` to the plugins section of your configuration file. You can omit the `eslint-plugin-` prefix:

40 ```json

41 {

compiler/packages/eslint-plugin-react-compiler/src/index.ts

+14

@@ -11,4 +11,18 @@ module.exports = {

11 rules: {

12 'react-compiler': ReactCompilerRule,

13 },

14 + configs: {

15 + recommended: {

16 + plugins: {

17 + 'react-compiler': {

18 + rules: {

19 + 'react-compiler': ReactCompilerRule,

20 + },

21 + },

22 + },

23 + rules: {

24 + 'react-compiler/react-compiler': 'error',

25 + },

26 + },

27 + },

28 };