Skip to content

Commit 563b412

Browse files
frankieyanclaude
andauthored
docs: Update README for standalone package (#13)
* docs: Update README for standalone package Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * docs: Simplify integration examples Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent dec66b2 commit 563b412

1 file changed

Lines changed: 74 additions & 2 deletions

File tree

README.md

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,80 @@
11
# React Compiler Tracker
22

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.
44

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+
```
678
779
## License
880

0 commit comments

Comments
 (0)