|
1 | 1 | # React Compiler Tracker |
2 | 2 |
|
3 | | -While it's safe to opt out of using memoization hooks such as `useCallback` and `useMemo` in code optimized by the [React Compiler](https://react.dev/learn/react-compiler/introduction), it is easy to introduce violations that cause the compiler to bail out, leading to performance issues when values are not memoized. |
| 3 | +While it's safe to opt out of using memoization hooks such as `useCallback` and `useMemo` in code optimized by the [React Compiler](https://react.dev/learn/react-compiler), it is easy to introduce violations that cause the compiler to bail out, leading to performance issues when values are not memoized. |
4 | 4 |
|
5 | | -Designed to run as a part of Git hooks and CI, this tool helps prevent this and progressively adopt the React Compiler by tracking and warning against newly introduced compilation errors. |
| 5 | +Designed to run as a part of Git hooks and CI, this tool helps prevent this and progressively adopt the React Compiler by tracking and warning against newly introduced compilation errors. It maintains a `.react-compiler-tracker.json` record file to track known compiler errors per file. |
| 6 | + |
| 7 | +## Prerequisites |
| 8 | + |
| 9 | +This tool requires the React Compiler to be configured in your project using `babel.config.js`. |
| 10 | + |
| 11 | +See the [React Compiler installation guide](https://react.dev/learn/react-compiler/installation#babel) for setup instructions. |
| 12 | + |
| 13 | +## Installation |
| 14 | + |
| 15 | +```bash |
| 16 | +npm install --save-dev @doist/react-compiler-tracker |
| 17 | +``` |
| 18 | + |
| 19 | +## Usage |
| 20 | + |
| 21 | +### `--overwrite` |
| 22 | + |
| 23 | +Regenerates the entire `.react-compiler-tracker.json` by scanning all supported source files (`src/**/*.{js,jsx,ts,tsx}`). Useful for initialization or picking up changes from skipped Git hooks. |
| 24 | + |
| 25 | +```bash |
| 26 | +npx @doist/react-compiler-tracker --overwrite |
| 27 | +``` |
| 28 | + |
| 29 | +### `--stage-record-file` |
| 30 | + |
| 31 | +Checks Git staged files and updates the records. Exits with code 1 if errors increase (preventing the commit), otherwise updates `.react-compiler-tracker.json` for staged files. |
| 32 | + |
| 33 | +```bash |
| 34 | +npx @doist/react-compiler-tracker --stage-record-file |
| 35 | +``` |
| 36 | + |
| 37 | +### `--check-files <file1> <file2> ...` |
| 38 | + |
| 39 | +Checks specific files without updating records. Exits with code 1 if checked files show increased error counts (or new errors). Primarily for CI to ensure PRs don't introduce new compiler errors. |
| 40 | + |
| 41 | +```bash |
| 42 | +npx @doist/react-compiler-tracker --check-files src/components/Button.tsx src/hooks/useData.ts |
| 43 | +``` |
| 44 | + |
| 45 | +### No flags |
| 46 | + |
| 47 | +Checks all supported source files and reports the total error count. The records file is **not** updated in this mode. |
| 48 | + |
| 49 | +```bash |
| 50 | +npx @doist/react-compiler-tracker |
| 51 | +``` |
| 52 | + |
| 53 | +## Integration Examples |
| 54 | + |
| 55 | +### lint-staged |
| 56 | + |
| 57 | +In `package.json`: |
| 58 | + |
| 59 | +```json |
| 60 | +{ |
| 61 | + "lint-staged": { |
| 62 | + "src/**/*.{js,jsx,ts,tsx}": "npx @doist/react-compiler-tracker --stage-record-file" |
| 63 | + } |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +### GitHub Actions CI |
| 68 | + |
| 69 | +```yaml |
| 70 | +- name: Check React Compiler violations |
| 71 | + run: | |
| 72 | + # Get changed files in the PR |
| 73 | + FILES=$(git diff --name-only origin/main...HEAD -- '*.tsx' '*.ts' '*.jsx' '*.js' | tr '\n' ' ') |
| 74 | + if [ -n "$FILES" ]; then |
| 75 | + npx @doist/react-compiler-tracker --check-files $FILES |
| 76 | + fi |
| 77 | +``` |
6 | 78 |
|
7 | 79 | ## License |
8 | 80 |
|
|
0 commit comments