mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00

History

Joseph Savona 7d29ecbeb2 [compiler] Aggregate error reporting, separate eslint rules (#34176 ) NOTE: this is a merged version of @mofeiZ's original PR along with my edits per offline discussion. The description is updated to reflect the latest approach. The key problem we're trying to solve with this PR is to allow developers more control over the compiler's various validations. The idea is to have a number of rules targeting a specific category of issues, such as enforcing immutability of props/state/etc or disallowing access to refs during render. We don't want to have to run the compiler again for every single rule, though, so @mofeiZ added an LRU cache that caches the full compilation output of N most recent files. The first rule to run on a given file will cause it to get cached, and then subsequent rules can pull from the cache, with each rule filtering down to its specific category of errors. For the categories, I went through and assigned a category roughly 1:1 to existing validations, and then used my judgement on some places that felt distinct enough to warrant a separate error. Every error in the compiler now has to supply both a severity (for legacy reasons) and a category (for ESLint). Each category corresponds 1:1 to a ESLint rule definition, so that the set of rules is automatically populated based on the defined categories. Categories include a flag for whether they should be in the recommended set or not. Note that as with the original version of this PR, only eslint-plugin-react-compiler is changed. We still have to update the main lint rule. ## Test Plan * Created a sample project using ESLint v9 and verified that the plugin can be configured correctly and detects errors * Edited `fixtures/eslint-v9` and introduced errors, verified that the w latest config changes in that fixture it correctly detects the errors * In the sample project, confirmed that the LRU caching is correctly caching compiler output, ie compiling files just once. Co-authored-by: Mofei Zhang <feifei0@meta.com>		2025-08-21 14:53:34 -07:00
..
__tests__	[compiler] Aggregate error reporting, separate eslint rules (#34176 )	2025-08-21 14:53:34 -07:00
src	[compiler] Aggregate error reporting, separate eslint rules (#34176 )	2025-08-21 14:53:34 -07:00
babel.config.js	Compiler: unfork prettier config (#30205 )	2024-07-18 17:00:24 -04:00
package.json	[compiler] Aggregate error reporting, separate eslint rules (#34176 )	2025-08-21 14:53:34 -07:00
README.md	docs(eslint-plugin-react-compiler): fix typo (#32149 )	2025-01-22 16:59:50 +01:00
tsconfig.json	[compiler] Migrate compiler packages to tsup (#32550 )	2025-03-07 16:41:55 -05:00
tsup.config.ts	[compiler] Add missing copyrights (#33004 )	2025-04-23 22:04:44 -04:00

README.md

eslint-plugin-react-compiler

ESLint plugin surfacing problematic React code found by the React compiler.

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-react-compiler:

npm install eslint-plugin-react-compiler --save-dev

Usage

Flat config

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

+ 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.configs.recommended    
]

Legacy config (`.eslintrc`)

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

{
    "plugins": [
        "react-compiler"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "react-compiler/react-compiler": "error"
    }
}

Rules

TODO: Run eslint-doc-generator to generate the rules list.