[compiler][rfc] Switch eslint-plugin-react-compiler to single rule for Meta compat

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts

@@ -184,25 +184,28 @@ function validateNoContextVariableAssignment(
   fn: HIRFunction,
   errors: CompilerError,
 ): void {
+  const context = new Set(fn.context.map(place => place.identifier.id));
   for (const block of fn.body.blocks.values()) {
     for (const instr of block.instructions) {
       const value = instr.value;
       switch (value.kind) {
         case 'StoreContext': {
-          errors.pushDiagnostic(
-            CompilerDiagnostic.create({
-              category: ErrorCategory.UseMemo,
-              reason:
-                'useMemo() callbacks may not reassign variables declared outside of the callback',
-              description:
-                'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
-              suggestions: null,
-            }).withDetails({
-              kind: 'error',
-              loc: value.lvalue.place.loc,
-              message: 'Cannot reassign variable',
-            }),
-          );
+          if (context.has(value.lvalue.place.identifier.id)) {
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
+                category: ErrorCategory.UseMemo,
+                reason:
+                  'useMemo() callbacks may not reassign variables declared outside of the callback',
+                description:
+                  'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
+                suggestions: null,
+              }).withDetails({
+                kind: 'error',
+                loc: value.lvalue.place.loc,
+                message: 'Cannot reassign variable',
+              }),
+            );
+          }
           break;
         }
       }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md

@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @flow
+export hook useItemLanguage(items) {
+  return useMemo(() => {
+    let language: ?string = null;
+    items.forEach(item => {
+      if (item.language != null) {
+        language = item.language;
+      }
+    });
+    return language;
+  }, [items]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export function useItemLanguage(items) {
+  const $ = _c(2);
+  let language;
+  if ($[0] !== items) {
+    language = null;
+    items.forEach((item) => {
+      if (item.language != null) {
+        language = item.language;
+      }
+    });
+    $[0] = items;
+    $[1] = language;
+  } else {
+    language = $[1];
+  }
+  return language;
+}
+
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js

@@ -0,0 +1,12 @@
+// @flow
+export hook useItemLanguage(items) {
+  return useMemo(() => {
+    let language: ?string = null;
+    items.forEach(item => {
+      if (item.language != null) {
+        language = item.language;
+      }
+    });
+    return language;
+  }, [items]);
+}

compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts

@@ -5,35 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  ErrorCategory,
-  getRuleForCategory,
-} from 'babel-plugin-react-compiler/src/CompilerError';
 import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
-import {allRules} from '../src/rules/ReactCompilerRule';
+import ReactCompilerRule from '../src/rules/ReactCompilerRule';
 
-testRule(
-  'no impure function calls rule',
-  allRules[getRuleForCategory(ErrorCategory.Purity).name].rule,
-  {
-    valid: [],
-    invalid: [
-      {
-        name: 'Known impure function calls are caught',
-        code: normalizeIndent`
+testRule('no impure function calls rule', ReactCompilerRule, {
+  valid: [],
+  invalid: [
+    {
+      name: 'Known impure function calls are caught',
+      code: normalizeIndent`
       function Component() {
         const date = Date.now();
         const now = performance.now();
         const rand = Math.random();
         return <Foo date={date} now={now} rand={rand} />;
       }
     `,
-        errors: [
-          makeTestCaseError('Cannot call impure function during render'),
-          makeTestCaseError('Cannot call impure function during render'),
-          makeTestCaseError('Cannot call impure function during render'),
-        ],
-      },
-    ],
-  },
-);
+      errors: [
+        makeTestCaseError('Cannot call impure function during render'),
+        makeTestCaseError('Cannot call impure function during render'),
+        makeTestCaseError('Cannot call impure function during render'),
+      ],
+    },
+  ],
+});

compiler/packages/eslint-plugin-react-compiler/__tests__/InvalidHooksRule-test.ts

@@ -5,30 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  ErrorCategory,
-  getRuleForCategory,
-} from 'babel-plugin-react-compiler/src/CompilerError';
 import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
-import {allRules} from '../src/rules/ReactCompilerRule';
+import {AllRules} from '../src/rules/ReactCompilerRule';
 
-testRule(
-  'rules-of-hooks',
-  allRules[getRuleForCategory(ErrorCategory.Hooks).name].rule,
-  {
-    valid: [
-      {
-        name: 'Basic example',
-        code: normalizeIndent`
+testRule('rules-of-hooks', AllRules, {
+  valid: [
+    {
+      name: 'Basic example',
+      code: normalizeIndent`
         function Component() {
           useHook();
           return <div>Hello world</div>;
         }
       `,
-      },
-      {
-        name: 'Violation with Flow suppression',
-        code: `
+    },
+    {
+      name: 'Violation with Flow suppression',
+      code: `
       // Valid since error already suppressed with flow.
       function useHook() {
         if (cond) {
@@ -37,11 +30,11 @@ testRule(
         }
       }
     `,
-      },
-      {
-        // OK because invariants are only meant for the compiler team's consumption
-        name: '[Invariant] Defined after use',
-        code: normalizeIndent`
+    },
+    {
+      // OK because invariants are only meant for the compiler team's consumption
+      name: '[Invariant] Defined after use',
+      code: normalizeIndent`
         function Component(props) {
           let y = function () {
             m(x);
@@ -52,49 +45,42 @@ testRule(
           return y;
         }
       `,
-      },
-      {
-        name: "Classes don't throw",
-        code: normalizeIndent`
+    },
+    {
+      name: "Classes don't throw",
+      code: normalizeIndent`
         class Foo {
           #bar() {}
         }
       `,
-      },
-    ],
-    invalid: [
-      {
-        name: 'Simple violation',
-        code: normalizeIndent`
+    },
+  ],
+  invalid: [
+    {
+      name: 'Simple violation',
+      code: normalizeIndent`
       function useConditional() {
         if (cond) {
           useConditionalHook();
         }
       }
     `,
-        errors: [
-          makeTestCaseError(
-            'Hooks must always be called in a consistent order',
-          ),
-        ],
-      },
-      {
-        name: 'Multiple diagnostics within the same function are surfaced',
-        code: normalizeIndent`
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: 'Multiple diagnostics within the same function are surfaced',
+      code: normalizeIndent`
         function useConditional() {
           cond ?? useConditionalHook();
           props.cond && useConditionalHook();
           return <div>Hello world</div>;
         }`,
-        errors: [
-          makeTestCaseError(
-            'Hooks must always be called in a consistent order',
-          ),
-          makeTestCaseError(
-            'Hooks must always be called in a consistent order',
-          ),
-        ],
-      },
-    ],
-  },
-);
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+  ],
+});

compiler/packages/eslint-plugin-react-compiler/__tests__/NoAmbiguousJsxRule-test.ts

@@ -5,22 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  ErrorCategory,
-  getRuleForCategory,
-} from 'babel-plugin-react-compiler/src/CompilerError';
 import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
-import {allRules} from '../src/rules/ReactCompilerRule';
+import ReactCompilerRule from '../src/rules/ReactCompilerRule';
 
-testRule(
-  'no ambiguous JSX rule',
-  allRules[getRuleForCategory(ErrorCategory.ErrorBoundaries).name].rule,
-  {
-    valid: [],
-    invalid: [
-      {
-        name: 'JSX in try blocks are warned against',
-        code: normalizeIndent`
+testRule('no ambiguous JSX rule', ReactCompilerRule, {
+  valid: [],
+  invalid: [
+    {
+      name: 'JSX in try blocks are warned against',
+      code: normalizeIndent`
       function Component(props) {
         let el;
         try {
@@ -31,8 +24,7 @@ testRule(
         return el;
       }
     `,
-        errors: [makeTestCaseError('Avoid constructing JSX within try/catch')],
-      },
-    ],
-  },
-);
+      errors: [makeTestCaseError('Avoid constructing JSX within try/catch')],
+    },
+  ],
+});