Add local eslint rule to validate markdown codeblocks with React Compiler (#7988)

In https://github.com/facebook/react/pull/34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.

In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.

To express that a codeblock has an expected error, we can use the following metadata:

```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
    expectedErrors?: {
      'react-compiler'?: number[];
    };
  };
```

and can be used like so:

````
```js {expectedErrors: {'react-compiler': [4]}}
//  setState directly in render
function Component({value}) {
  const [count, setCount] = useState(0);
  setCount(value); // error on L4
  return <div>{count}</div>;
}
```
````

Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
This commit is contained in:
lauren
2025-09-18 15:32:18 -04:00
committed by GitHub
parent bd03b86c02
commit b6a32d1e0e
21 changed files with 2542 additions and 7 deletions

View File

@@ -32,6 +32,9 @@ jobs:
- name: Install deps
run: yarn install --frozen-lockfile
- name: Install deps (eslint-local-rules)
run: yarn install --frozen-lockfile
working-directory: eslint-local-rules
- name: Lint codebase
run: yarn ci-check