Merge pull request Expensify#70394 from margelo/@chrispader/react-compiler-rules-of-react-ci-linting

CI: Add "Rules of React" + React Compiler CI check and companion dev tool

Author: roryabraham

.github/actions/javascript/getPullRequestIncrementalChanges/index.js

@@ -12528,14 +12528,26 @@ function isEmptyObject(obj) {
 /***/ }),
 
 /***/ 7037:
-/***/ ((__unused_webpack_module, exports, __nccwpck_require__) => {
+/***/ (function(__unused_webpack_module, exports, __nccwpck_require__) {
 
 "use strict";
 
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.GIT_ERRORS = void 0;
+const github_1 = __nccwpck_require__(5438);
 const child_process_1 = __nccwpck_require__(2081);
 const util_1 = __nccwpck_require__(3837);
+const GithubUtils_1 = __importDefault(__nccwpck_require__(9296));
+const Logger_1 = __nccwpck_require__(8891);
 const exec = (0, util_1.promisify)(child_process_1.exec);
+const IS_CI = process.env.CI === 'true';
+const GIT_ERRORS = {
+    FAILED_TO_FETCH_FROM_REMOTE: 'Failed to fetch from remote',
+};
+exports.GIT_ERRORS = GIT_ERRORS;
 /**
  * Utility class for git operations.
  */
@@ -12774,10 +12786,146 @@ class Git {
             throw new Error(`Failed to fetch git reference ${ref}: ${error instanceof Error ? error.message : String(error)}`);
         }
     }
+    static getMainBaseCommitHash(remote) {
+        // Fetch the main branch from the specified remote to ensure it's available
+        try {
+            (0, child_process_1.execSync)(`git fetch ${remote} main --no-tags --depth=1 -q`, { encoding: 'utf8' });
+        }
+        catch (error) {
+            throw new Error(GIT_ERRORS.FAILED_TO_FETCH_FROM_REMOTE);
+        }
+        // In CI, use a simpler approach - just use the remote main branch directly
+        // This avoids issues with shallow clones and merge-base calculations
+        if (IS_CI) {
+            try {
+                const mergeBaseHash = (0, child_process_1.execSync)(`git rev-parse ${remote}/main`, { encoding: 'utf8' }).trim();
+                // Validate the output is a proper SHA hash
+                if (!mergeBaseHash || !/^[a-fA-F0-9]{40}$/.test(mergeBaseHash)) {
+                    throw new Error(`git rev-parse returned unexpected output: ${mergeBaseHash}`);
+                }
+                return mergeBaseHash;
+            }
+            catch (error) {
+                (0, Logger_1.error)(`Failed to get commit hash for ${remote}/main:`, error);
+                throw new Error(`Could not get commit hash for ${remote}/main`);
+            }
+        }
+        // For local development, try to find the actual merge base
+        let mergeBaseHash;
+        try {
+            mergeBaseHash = (0, child_process_1.execSync)(`git merge-base ${remote}/main HEAD`, { encoding: 'utf8' }).trim();
+        }
+        catch (error) {
+            // If merge-base fails locally, fall back to using the remote main branch
+            try {
+                mergeBaseHash = (0, child_process_1.execSync)(`git rev-parse ${remote}/main`, { encoding: 'utf8' }).trim();
+                (0, Logger_1.error)(`Warning: Could not find merge base between ${remote}/main and HEAD. Using ${remote}/main as base.`);
+            }
+            catch (fallbackError) {
+                (0, Logger_1.error)(`Failed to find merge base with ${remote}/main:`, error);
+                (0, Logger_1.error)(`Fallback also failed:`, fallbackError);
+                throw new Error(`Could not determine merge base with ${remote}/main`);
+            }
+        }
+        // Validate the output is a proper SHA hash
+        if (!mergeBaseHash || !/^[a-fA-F0-9]{40}$/.test(mergeBaseHash)) {
+            throw new Error(`git merge-base returned unexpected output: ${mergeBaseHash}`);
+        }
+        return mergeBaseHash;
+    }
+    static async getChangedFiles(remote) {
+        if (IS_CI) {
+            const { data: changedFiles } = await GithubUtils_1.default.octokit.pulls.listFiles({
+                owner: 'Expensify',
+                repo: 'App',
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                pull_number: github_1.context.payload.pull_request?.number ?? 0,
+            });
+            return changedFiles.map((file) => file.filename);
+        }
+        try {
+            // Get files changed in the current branch/commit
+            const mainBaseCommitHash = this.getMainBaseCommitHash(remote);
+            // Get the diff output and check status
+            const gitDiffOutput = (0, child_process_1.execSync)(`git diff --diff-filter=AMR --name-only ${mainBaseCommitHash} HEAD`, {
+                encoding: 'utf8',
+            });
+            const files = gitDiffOutput.trim().split('\n');
+            return files;
+        }
+        catch (error) {
+            if (error instanceof Error && error.message === GIT_ERRORS.FAILED_TO_FETCH_FROM_REMOTE) {
+                throw error;
+            }
+            (0, Logger_1.error)('Could not determine changed files:', error);
+            throw error;
+        }
+    }
 }
 exports["default"] = Git;
 
 
+/***/ }),
+
+/***/ 8891:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.bold = exports.formatLink = exports.success = exports.error = exports.note = exports.warn = exports.info = exports.log = void 0;
+const COLOR_DIM = '\x1b[2m';
+const COLOR_RESET = '\x1b[0m';
+const COLOR_YELLOW = '\x1b[33m';
+const COLOR_RED = '\x1b[31m';
+const COLOR_GREEN = '\x1b[32m';
+const COLOR_BOLD = '\x1b[1m';
+const EMOJIS = {
+    // One column emojis need to be rendered with an extra space after to align with two column emojis
+    INFO: '▶️ ',
+    // Two column emojis can be rendered as-is
+    SUCCESS: '✅',
+    WARN: '⚠️',
+    ERROR: '🔴',
+};
+const log = (...args) => {
+    console.debug(...args);
+};
+exports.log = log;
+const info = (...args) => {
+    const lines = [EMOJIS.INFO, ...args];
+    log(...lines);
+};
+exports.info = info;
+const bold = (...args) => {
+    const lines = [COLOR_BOLD, ...args, COLOR_RESET];
+    log(...lines);
+};
+exports.bold = bold;
+const success = (...args) => {
+    const lines = [`${EMOJIS.SUCCESS}${COLOR_GREEN}`, ...args, COLOR_RESET];
+    log(...lines);
+};
+exports.success = success;
+const warn = (...args) => {
+    const lines = [`${EMOJIS.WARN}${COLOR_YELLOW}`, ...args, COLOR_RESET];
+    log(...lines);
+};
+exports.warn = warn;
+const note = (...args) => {
+    const lines = [COLOR_DIM, ...args, COLOR_RESET];
+    log(...lines);
+};
+exports.note = note;
+const error = (...args) => {
+    const lines = [`${EMOJIS.ERROR}${COLOR_RED}`, ...args, COLOR_RESET];
+    log(...lines);
+};
+exports.error = error;
+const formatLink = (name, url) => `\x1b]8;;${url}\x1b\\${name}\x1b]8;;\x1b\\`;
+exports.formatLink = formatLink;
+
+
 /***/ }),
 
 /***/ 9491:

.github/workflows/preDeploy.yml

@@ -16,13 +16,17 @@ jobs:
   prettier:
     uses: ./.github/workflows/prettier.yml
 
+  react-compiler-compliance:
+    uses: ./.github/workflows/react-compiler-compliance.yml
+    secrets: inherit
+
   test:
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   confirmPassingBuild:
     runs-on: ubuntu-latest
-    needs: [typecheck, lint, test]
+    needs: [typecheck, lint, react-compiler-compliance, test]
     if: ${{ always() }}
 
     steps:

.github/workflows/react-compiler-compliance.yml

@@ -0,0 +1,31 @@
+name: React Compiler Compliance Check
+
+on:
+  workflow_call:
+  pull_request:
+    types: [opened, synchronize]
+    branches-ignore: [staging, production]
+    paths: ['**.tsx']
+
+concurrency:
+  group: ${{ github.ref == 'refs/heads/main' && format('{0}-{1}', github.ref, github.sha) || github.ref }}-react-compiler-compliance
+  cancel-in-progress: true
+jobs:
+  react-compiler-compliance:
+    name: React Compiler Compliance
+    if: ${{ github.actor != 'OSBotify' }}
+    runs-on: ubuntu-latest
+
+    steps:
+      # v4
+      - name: Checkout
+        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608
+
+      - name: Setup Node
+        uses: ./.github/actions/composite/setupNode
+
+      - name: Run React Compiler Compliance Check
+        run: npm run react-compiler-compliance-check check-changed
+        env:
+          CI: true
+          GITHUB_TOKEN: ${{ github.token }}

.gitignore

@@ -145,7 +145,8 @@ web-build/
 # Jeykll
 docs/.bundle
 
-# Output of react compiler healthcheck dev script
+# React Compiler Compliance Check output
+react-compiler-report.json
 react-compiler-output.txt
 
 # Rock Framework

babel.config.js

@@ -7,7 +7,6 @@ const ReactCompilerConfig = {
     environment: {
         enableTreatRefLikeIdentifiersAsRefs: true,
     },
-    // We exclude 'tests' directory from compilation, but still compile components imported in test files.
     sources: (filename) => !filename.includes('tests/') && !filename.includes('node_modules/'),
 };
 

contributingGuides/REACT_COMPILER.md

@@ -6,9 +6,46 @@
 
 At Expensify, we are early adopters of this tool and aim to fully leverage its capabilities.
 
-## React Compiler compatibility check
+## React Compiler compliance checker
 
-To check if your code can be compiled by React Compiler and hence gets all its optimizations "for free", you can run the `npm run react-compiler-healthcheck-test` locally and analyze the output.
+We provide a script, `scripts/react-compiler-compliance-check.ts`, which checks for "Rules of React" compliance locally and enforces these in PRs adding or changing React code through a CI check.
+
+### What it does
+
+Runs `react-compiler-healthcheck` in verbose mode, parses output, and summarizes which files compiled and which failed, including file, line, column, and reason. It can:
+
+- Check all files or a specific file/glob
+- Check only files changed relative to a base branch
+- Optionally generate a machine-readable report `react-compiler-report.json`
+- Exit with non-zero code when failures are found (useful for CI)
+
+### Usage
+
+> [!NOTE]
+> This script uses `origin` as the base remote by default. If your GH remote is named differently, use the `--remote <name>` flag.
+
+#### Check entire codebase or a specific file/glob
+
+```bash
+npm run react-compiler-compliance-check check                        # Check all files
+npm run react-compiler-compliance-check check src/path/Component.tsx # Check specific file
+npm run react-compiler-compliance-check check "src/**/*.tsx"         # Check glob pattern
+```
+
+#### Check only changed files against a remote main (default remote is `origin`)
+
+```bash
+npm run react-compiler-compliance-check check-changed
+```
+
+#### Generate a detailed report (saved as `./react-compiler-report.json`)
+
+You can use the `--report` flag with both of the above commands:
+
+```bash
+npm run react-compiler-compliance-check check --report
+npm run react-compiler-compliance-check check-changed --report
+```
 
 ## How can I check what exactly prevents file from successful optimization or whether my fix for passing `react-compiler` actually works?
 
@@ -36,6 +73,7 @@ If you encounter this error, you need to add the `Ref` postfix to the variable n
 If you added a modification to `SharedValue`, you'll likely encounter this error. You can ignore this error for now because the current `react-native-reanimated` API is not compatible with `react-compiler` rules. Once [this PR](https://github.com/software-mansion/react-native-reanimated/pull/6312) is merged, we'll rewrite the code to be compatible with `react-compiler`. Until then, you can ignore this error.
 
 ### Existing manual memoization could not be preserved. [...]
+
 These types of errors usually occur when the calls to `useMemo` that were made manually are too complex for react-compiler to understand. React compiler is still experimental so unfortunately this can happen.
 
 Some specific cases of this error are described below.
@@ -96,7 +134,7 @@ return (
         <ToggleSettingOptionRow
             onToggle={item.onToggle}
             // ❌ such code triggers the error - `qboConfig?.pendingFields` is an external variable from the closure
-            // so this code is pretty complicated for `react-compiler` optimizations 
+            // so this code is pretty complicated for `react-compiler` optimizations
             pendingAction={settingsPendingAction([item.subscribedSetting], qboConfig?.pendingFields)}
             // ❌ such code triggers the error - `qboConfig` is an external variable from the closure
             errors={ErrorUtils.getLatestErrorField(qboConfig, item.subscribedSetting)}

package.json

@@ -72,8 +72,7 @@
     "gh-actions-unused-styles": "npx ts-node scripts/findUnusedStyles.ts",
     "setup-https": "mkcert -install && mkcert -cert-file config/webpack/certificate.pem -key-file config/webpack/key.pem dev.new.expensify.com localhost 127.0.0.1",
     "e2e-test-runner-build": "node --max-old-space-size=8192 node_modules/.bin/ncc build tests/e2e/testRunner.ts -o tests/e2e/dist/",
-    "react-compiler-healthcheck": "react-compiler-healthcheck --verbose",
-    "react-compiler-healthcheck-test": "react-compiler-healthcheck --verbose &> react-compiler-output.txt",
+    "react-compiler-compliance-check": "ts-node scripts/react-compiler-compliance-check.ts",
     "generate-search-parser": "peggy --format es -o src/libs/SearchParser/searchParser.js src/libs/SearchParser/searchParser.peggy src/libs/SearchParser/baseRules.peggy",
     "generate-autocomplete-parser": "peggy --format es -o src/libs/SearchParser/autocompleteParser.js src/libs/SearchParser/autocompleteParser.peggy src/libs/SearchParser/baseRules.peggy && ./scripts/parser-workletization.sh src/libs/SearchParser/autocompleteParser.js",
     "web:prod": "http-server ./dist --cors",