[compiler] Use diagnostic for "found suppression" error (#33981)

Author: josephsavona

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime"; // 
-        @compilationMode:"all"
+@compilationMode:"all"
 function nonReactFn() {
   const $ = _c(1);
   let t0;

compiler/apps/playground/components/Editor/Output.tsx

@@ -137,9 +137,9 @@ async function tabify(
     } else {
       language = 'markdown';
       output = `
-# Output
+# Summary
 
-React Compiler compiled this function sucessfully, but there are lint errors that indicate potential issues with the original code.
+React Compiler compiled this function successfully, but there are lint errors that indicate potential issues with the original code.
 
 ## ${compilerOutput.errors.length} Lint Errors
 
@@ -181,7 +181,7 @@ ${code}
       'Output',
       <TextTabContent
         output={errors}
-        language="plaintext"
+        language="markdown"
         diff={null}
         showInfoPanel={false}></TextTabContent>,
     );

compiler/apps/playground/components/Editor/monacoOptions.ts

@@ -28,5 +28,5 @@ export const monacoOptions: Partial<EditorProps['options']> = {
 
   automaticLayout: true,
   wordWrap: 'on',
-  wrappingIndent: 'deepIndent',
+  wrappingIndent: 'same',
 };

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Suppression.ts

@@ -8,8 +8,8 @@
 import {NodePath} from '@babel/core';
 import * as t from '@babel/types';
 import {
+  CompilerDiagnostic,
   CompilerError,
-  CompilerErrorDetail,
   CompilerSuggestionOperation,
   ErrorSeverity,
 } from '../CompilerError';
@@ -181,12 +181,11 @@ export function suppressionsToCompilerError(
           'Unhandled suppression source',
         );
     }
-    error.pushErrorDetail(
-      new CompilerErrorDetail({
-        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(),
+    error.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: reason,
+        description: `React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression \`${suppressionRange.disableComment.value.trim()}\``,
         severity: ErrorSeverity.InvalidReact,
-        loc: suppressionRange.disableComment.loc ?? null,
         suggestions: [
           {
             description: suggestion,
@@ -197,6 +196,10 @@ export function suppressionsToCompilerError(
             op: CompilerSuggestionOperation.Remove,
           },
         ],
+      }).withDetail({
+        kind: 'error',
+        loc: suppressionRange.disableComment.loc ?? null,
+        message: 'Found React rule suppression',
       }),
     );
   }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md

@@ -18,15 +18,15 @@ function Foo(props) {
 ```
 Found 1 error:
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow
 
-$FlowFixMe[react-rule-hook].
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`
 
 error.bailout-on-flow-suppression.ts:4:2
   2 |
   3 | function Foo(props) {
 > 4 |   // $FlowFixMe[react-rule-hook]
-    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   5 |   useX();
   6 |   return null;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md

@@ -21,28 +21,28 @@ function lowercasecomponent() {
 ```
 Found 2 errors:
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable my-app/react-rule.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`
 
 error.bailout-on-suppression-of-custom-rule.ts:3:0
   1 | // @eslintSuppressionRules:["my-app","react-rule"]
   2 |
 > 3 | /* eslint-disable my-app/react-rule */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   4 | function lowercasecomponent() {
   5 |   'use forget';
   6 |   const x = [];
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable-next-line my-app/react-rule.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`
 
 error.bailout-on-suppression-of-custom-rule.ts:7:2
    5 |   'use forget';
    6 |   const x = [];
 >  7 |   // eslint-disable-next-line my-app/react-rule
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
    8 |   return <div>{x}</div>;
    9 | }
   10 | /* eslint-enable my-app/react-rule */

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md

@@ -19,26 +19,26 @@ function lowercasecomponent() {
 ```
 Found 2 errors:
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable react-hooks/rules-of-hooks.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
 
 error.invalid-sketchy-code-use-forget.ts:1:0
 > 1 | /* eslint-disable react-hooks/rules-of-hooks */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   2 | function lowercasecomponent() {
   3 |   'use forget';
   4 |   const x = [];
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable-next-line react-hooks/rules-of-hooks.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`
 
 error.invalid-sketchy-code-use-forget.ts:5:2
   3 |   'use forget';
   4 |   const x = [];
 > 5 |   // eslint-disable-next-line react-hooks/rules-of-hooks
-    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   6 |   return <div>{x}</div>;
   7 | }
   8 | /* eslint-enable react-hooks/rules-of-hooks */

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md

@@ -38,14 +38,14 @@ function CrimesAgainstReact() {
 ```
 Found 1 error:
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable react-hooks/rules-of-hooks.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
 
 error.invalid-unclosed-eslint-suppression.ts:2:0
   1 | // Note: Everything below this is sketchy
 > 2 | /* eslint-disable react-hooks/rules-of-hooks */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   3 | function lowercasecomponent() {
   4 |   'use forget';
   5 |   const x = [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md

@@ -22,15 +22,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable-next-line react-hooks/exhaustive-deps.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`
 
 error.sketchy-code-exhaustive-deps.ts:6:7
   4 |     () => {
   5 |       item.push(1);
 > 6 |     }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   7 |     []
   8 |   );
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md

@@ -23,13 +23,13 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: 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
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-eslint-disable react-hooks/rules-of-hooks.
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
 
 error.sketchy-code-rules-of-hooks.ts:1:0
 > 1 | /* eslint-disable react-hooks/rules-of-hooks */
-    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   2 | function lowercasecomponent() {
   3 |   const x = [];
   4 |   return <div>{x}</div>;