反应编译器跟踪器

这个 React 编译器 自动记住您的组件, 从而不再需要 useCallback 财务报告和审定财务报表 useMemo然而,某些代码模式导致编译器退出. 发生这种情况时,你的组件会失去自动优化,可能造成性能回落.

灵感来自 插图 财务报告和审定财务报表 反应-编译-标记,此工具跟踪编译器在 a 中的错误 .react-compiler.rec.json 与 Git 钩和 CI 合并,防止出现新的违规情况.

先决条件

此工具将您与 Babel 和 React 编译器的源文件编译, 使用您工程中安装的文件, 以便它所报的违反内容与您自己的构建生成的文件相匹配 。 还没有安装的话安装它们:

npm install --save-dev babel-plugin-react-compiler @babel/core@^7.26.0 @babel/preset-react@^7 @babel/preset-typescript@^7

Babel 8 尚未支持,因为 babel-plugin-react-compiler 运行时报告违反有效代码.

安装

npm install --save-dev @doist/react-compiler-tracker

配置

创建一个 .react-compiler-tracker.config.json 用于自定义工具行为的文件 :

{
    "recordsFile": ".react-compiler.rec.json",
    "sourceGlob": "src/**/*.{js,jsx,ts,tsx}"
}

所有字段都是可选的. 默认值见上文.

单项使用

在单列波中,从您的软件包目录中运行工具。 配置文件及所有路径相对于您运行命令的位置 。 默认在框中通常有效 :

my-monorepo/
├── packages/
│   └── frontend/
│       ├── .react-compiler-tracker.config.json  # Optional config
│       ├── .react-compiler.rec.json             # Records file
│       └── src/
│           └── ...

如果您的源文件位于不同的位置( 例如 ) , app/ 改为 src/,自定义配置 :

{
    "sourceGlob": "app/**/*.{ts,tsx}"
}

使用量

--overwrite

通过扫描所有匹配的源文件来重新生成整个记录文件 sourceGlob。用于初始化或从跳过的 Git 钩子取出更改.

npm exec --no -- @doist/react-compiler-tracker --overwrite

--stage-record-file <file1> <file2> ...

检查所提供的文件并更新记录。 如果错误增加(防止执行),则以代码1退出,否则将更新已检查文件的记录文件。 报告错误减少时,庆祝你的进展。 删除的文件会自动从记录中删除(不需要通过路径).

npm exec --no -- @doist/react-compiler-tracker --stage-record-file src/components/Button.tsx src/hooks/useData.ts

如果没有提供文件,则以成功消息清洁退出.

--check-files <file1> <file2> ...

在不更新记录的情况下检查特定文件 。 如果选中的文件显示增加错误计数( 或新出错) , 或不存在任何提供的文件, 则退出代码 1 。 当错误减少时报告, 庆祝你的进展。 主要是CI确保PR不会引入新的编译器错误.

npm exec --no -- @doist/react-compiler-tracker --check-files src/components/Button.tsx src/hooks/useData.ts

没有旗帜

检查匹配的所有源文件 sourceGlob 并报告总出错数。 记录文件是 没有 在此模式中更新.

npm exec --no -- @doist/react-compiler-tracker

--show-errors

显示来自编译器的错误信息,包括文件路径、行号以及出错原因。 可以与任何命令结合. 对所有已检查的文件显示错误, 不论是否增加 .

npm exec --no -- @doist/react-compiler-tracker --check-files --show-errors src/components/Button.tsx

错误增加时的示例输出 :

Errors:
    - src/components/Button.tsx: Line 15: Cannot access refs during render (x2)
    - src/components/Button.tsx: Line 28: Invalid hook usage
❌ React Compiler errors have increased in:
  • src/components/Button.tsx: +3

Please fix the errors and run the command again.

当没有引入新错误时, 您仍然可以看到现有的错误 :

Errors:
    - src/components/Button.tsx: Line 15: Cannot access refs during render (x2)
✅ No new React Compiler errors in checked files

整合实例

阶段

单位 package.json数字 :

{
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": "npm exec --no -- @doist/react-compiler-tracker --stage-record-file"
    }
}

相匹配的文件会自动作为参数传递到命令中.

GitHub 动作 CI

- name: Check React Compiler violations
  run: |
      # Get changed files in the PR
      FILES=$(git diff --name-only origin/main...HEAD -- '*.tsx' '*.ts' '*.jsx' '*.js' | tr '\n' ' ')
      if [ -n "$FILES" ]; then
        npm exec --no -- @doist/react-compiler-tracker --check-files $FILES
      fi

承诺前钩 (手工)

#!/bin/sh
# Get staged files and pass them to the tracker
# (deleted files are auto-detected from records, no need to pass them)
FILES=$(git diff --diff-filter=ACMR --cached --name-only -- '*.tsx' '*.ts' '*.jsx' '*.js' | tr '\n' ' ')
if [ -n "$FILES" ]; then
  npm exec --no -- @doist/react-compiler-tracker --stage-record-file $FILES
fi

释放

这个项目使用 请放行 自动释放。 提交合并为 main 与 fix: 触发补丁释放, feat: 引发轻微释放 feat!: 或者说 fix!: 触发主要释放.

当在 main,释放 - 请创建释放 PR。 将它合并到 npm 和 GitHub 套件 .

许可证

释放 MIT 许可证。 。 。 .