From 87993f333adf28003bca97a24507be6ddc13a2f4 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Wed, 17 Apr 2024 18:25:40 -0700 Subject: [PATCH] [dx] Update suppression error messages ghstack-source-id: 0c362a349de86a07b4e9e381b942939ce4a24e69 Pull Request resolved: https://github.com/facebook/react-forget/pull/2859 --- .../src/Entrypoint/Suppression.ts | 9 +++++---- .../compiler/error.bailout-on-flow-suppression.expect.md | 2 +- ...error.bailout-on-suppression-of-custom-rule.expect.md | 4 ++-- .../error.invalid-sketchy-code-use-forget.expect.md | 4 ++-- .../error.invalid-unclosed-eslint-suppression.expect.md | 4 ++-- .../error.sketchy-code-exhaustive-deps.expect.md | 2 +- .../compiler/error.sketchy-code-rules-of-hooks.expect.md | 2 +- .../__tests__/ReactCompilerRule-test.ts | 2 +- 8 files changed, 15 insertions(+), 14 deletions(-) diff --git a/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Suppression.ts b/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Suppression.ts index 43f5e01301..978b7806e6 100644 --- a/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Suppression.ts +++ b/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Suppression.ts @@ -164,12 +164,13 @@ export function suppressionsToCompilerError( switch (suppressionRange.source) { case "Eslint": reason = - "React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled"; - suggestion = "Remove the eslint disable"; + "React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled"; + suggestion = + "Remove the ESLint suppression and address the React error"; break; case "Flow": reason = - "React Compiler has bailed out of optimizing this component as one or more React rule violations were reported by Flow"; + "React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow"; suggestion = "Remove the Flow suppression and address the React error"; break; default: @@ -180,7 +181,7 @@ export function suppressionsToCompilerError( } error.pushErrorDetail( new CompilerErrorDetail({ - reason: `${reason}. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior`, + reason: `${reason}. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior`, description: suppressionRange.disableComment.value.trim(), severity: ErrorSeverity.InvalidReact, loc: suppressionRange.disableComment.loc ?? null, diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md index 550bdd5c44..1d5b4abdf7 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md @@ -19,7 +19,7 @@ function Foo(props) { 2 | 3 | function Foo(props) { > 4 | // $FlowFixMe[react-rule-hook] - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has bailed out of optimizing this component as one or more React rule violations were reported by Flow. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. $FlowFixMe[react-rule-hook] (4:4) + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. $FlowFixMe[react-rule-hook] (4:4) 5 | useX(); 6 | return null; 7 | } diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md index 38b38e180c..27c4750515 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md @@ -22,9 +22,9 @@ function lowercasecomponent() { 1 | // @eslintSuppressionRules(my-app/react-rule) 2 | > 3 | /* eslint-disable my-app/react-rule */ - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable my-app/react-rule (3:3) + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable my-app/react-rule (3:3) -InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable-next-line my-app/react-rule (7:7) +InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable-next-line my-app/react-rule (7:7) 4 | function lowercasecomponent() { 5 | "use forget"; 6 | const x = []; diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md index cbdf175ba4..ec17f5c994 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md @@ -18,9 +18,9 @@ function lowercasecomponent() { ``` > 1 | /* eslint-disable react-hooks/rules-of-hooks */ - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable react-hooks/rules-of-hooks (1:1) + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable react-hooks/rules-of-hooks (1:1) -InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable-next-line react-hooks/rules-of-hooks (5:5) +InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable-next-line react-hooks/rules-of-hooks (5:5) 2 | function lowercasecomponent() { 3 | "use forget"; 4 | const x = []; diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md index e8a29ee4fa..ce61b15cf4 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md @@ -38,9 +38,9 @@ function CrimesAgainstReact() { ``` 1 | // Note: Everything below this is sketchy > 2 | /* eslint-disable react-hooks/rules-of-hooks */ - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable react-hooks/rules-of-hooks (2:2) + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable react-hooks/rules-of-hooks (2:2) -InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable-next-line react-hooks/rules-of-hooks (25:25) +InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable-next-line react-hooks/rules-of-hooks (25:25) 3 | function lowercasecomponent() { 4 | "use forget"; 5 | const x = []; diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md index bc9f94dc88..78342576a6 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md @@ -23,7 +23,7 @@ function Component() { 4 | () => { 5 | item.push(1); > 6 | }, // eslint-disable-next-line react-hooks/exhaustive-deps - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable-next-line react-hooks/exhaustive-deps (6:6) + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable-next-line react-hooks/exhaustive-deps (6:6) 7 | [] 8 | ); 9 | diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md index 2aa971a014..4eb10ea80d 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md @@ -22,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = { ``` > 1 | /* eslint-disable react-hooks/rules-of-hooks */ - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable react-hooks/rules-of-hooks (1:1) + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable react-hooks/rules-of-hooks (1:1) 2 | function lowercasecomponent() { 3 | const x = []; 4 | return
{x}
; diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts index 71028f4d29..6030018596 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts @@ -116,7 +116,7 @@ const tests: CompilerTestCases = { errors: [ { message: - "React Compiler has bailed out of optimizing this component as one or more React eslint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in undefined behavior", + "React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior", suggestions: [ { output: normalizeIndent`