mirror of
https://github.com/zebrajr/react.git
synced 2025-12-07 12:20:38 +01:00
00aa0043c7
Currently in the `compiler` workspace, we invoke esbuild directly to build most packages (with the exception of `snap`). This has been mostly fine, but does not allow us to do things like generate type declaration files. I would like #32416 to be able to consume the merged eslint-plugin-react-compiler from source rather than via npm, and one of the things that has come up from my exploration in that stack using the compiler from source is that babel-plugin-react-compiler is missing type declarations. This is primarily because React's build process uses rollup + rollup-plugin-typescript, which runs tsc. So the merged plugin needs to typecheck properly in order to build. An alternative might be to migrate to something like babel with rollup instead to simply strip types rather than typecheck before building. The minor downside of that approach is that we would need to manually maintain a d.ts file for eslint-plugin-react-hooks. For now I would like to see if this PR helps us make progress rather than go for the slightly worse alternative. [`tsup`](https://github.com/egoist/tsup) is esbuild based so build performance is comparable. It is slower when generating d.ts files, but it's still much faster than rollup which we used prior to esbuild. For now, I have turned off `dts` by default, and it is only passed when publishing on npm. If you want to also generate d.ts files you can run `yarn build --dts`. ``` # BEFORE: build all compiler packages (esbuild) $ time yarn build ✨ Done in 15.61s. yarn build 13.82s user 1.54s system 96% cpu 15.842 total # --- # AFTER: build all compiler packages (tsup) $ time yarn build ✨ Done in 12.39s. yarn build 12.58s user 1.68s system 106% cpu 13.350 total # --- # AFTER: build all compiler packages and type declarations (tsup) $ time yarn build --dts ✨ Done in 30.69s. yarn build 43.57s user 3.20s system 150% cpu 31.061 total ``` I still need to test if this unblocks #32416 but this stack can be landed independently though as we could probably just release type declarations on npm. No one should be using the compiler directly, but if they really wanted to, lack of type declarations would not stop them (cf React secret internals). Note that I still kept esbuild as we still use it directly for forgive. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32550). * #32551 * __->__ #32550 |
||
|---|---|---|
| .. | ||
| __tests__ | ||
| src | ||
| babel.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsup.config.ts | ||
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.