[compiler] Use new diagnostic printing in playground

Per title

Author: josephsavona

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

@@ -11,6 +11,7 @@ import * as t from '@babel/types';
 import BabelPluginReactCompiler, {
   CompilerError,
   CompilerErrorDetail,
+  CompilerDiagnostic,
   Effect,
   ErrorSeverity,
   parseConfigPragmaForTests,
@@ -144,7 +145,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
 function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
   const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
   const error = new CompilerError();
-  const otherErrors: Array<CompilerErrorDetail> = [];
+  const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
   const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
     const entry = results.get(result.name);
     if (Array.isArray(entry)) {
@@ -214,7 +215,7 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
         debugLogIRs: logIR,
         logEvent: (_filename: string | null, event: LoggerEvent) => {
           if (event.kind === 'CompileError') {
-            otherErrors.push(new CompilerErrorDetail(event.detail));
+            otherErrors.push(event.detail);
           }
         },
       },
@@ -226,7 +227,7 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
      * (i.e. object shape that is not CompilerError)
      */
     if (err instanceof CompilerError && err.details.length > 0) {
-      error.details.push(...err.details);
+      error.merge(err);
     } else {
       /**
        * Handle unexpected failures by logging (to get a stack trace)
@@ -245,7 +246,7 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
   }
   // Only include logger errors if there weren't other errors
   if (!error.hasErrors() && otherErrors.length !== 0) {
-    otherErrors.forEach(e => error.push(e));
+    otherErrors.forEach(e => error.details.push(e));
   }
   if (error.hasErrors()) {
     return [{kind: 'err', results, error: error}, language];

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

@@ -142,6 +142,17 @@ async function tabify(
         </>,
       );
     }
+  } else if (compilerOutput.kind === 'err') {
+    const errors = compilerOutput.error.printErrorMessage(source, {
+      eslint: false,
+    });
+    reorderedTabs.set(
+      'Errors',
+      <TextTabContent
+        output={errors}
+        diff={null}
+        showInfoPanel={false}></TextTabContent>,
+    );
   }
   tabs.forEach((tab, name) => {
     reorderedTabs.set(name, tab);
@@ -166,6 +177,19 @@ function Output({store, compilerOutput}: Props): JSX.Element {
   const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
     () => new Map(),
   );
+
+  /*
+   * Update the active tab back to the output or errors tab when the compilation state
+   * changes between success/failure.
+   */
+  const [previousOutputKind, setPreviousOutputKind] = useState(
+    compilerOutput.kind,
+  );
+  if (compilerOutput.kind !== previousOutputKind) {
+    setPreviousOutputKind(compilerOutput.kind);
+    setTabsOpen(new Set([compilerOutput.kind === 'ok' ? 'JS' : 'Errors']));
+  }
+
   useEffect(() => {
     tabify(store.source, compilerOutput).then(tabs => {
       setTabs(tabs);
@@ -196,20 +220,6 @@ function Output({store, compilerOutput}: Props): JSX.Element {
         tabs={tabs}
         changedPasses={changedPasses}
       />
-      {compilerOutput.kind === 'err' ? (
-        <div
-          className="flex flex-wrap absolute bottom-0 bg-white grow border-y border-grey-200 transition-all ease-in"
-          style={{width: 'calc(100vw - 650px)'}}>
-          <div className="w-full p-4 basis-full border-b">
-            <h2>COMPILER ERRORS</h2>
-          </div>
-          <pre
-            className="p-4 basis-full text-red-600 overflow-y-scroll whitespace-pre-wrap"
-            style={{width: 'calc(100vw - 650px)', height: '150px'}}>
-            <code>{compilerOutput.error.toString()}</code>
-          </pre>
-        </div>
-      ) : null}
     </>
   );
 }

compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts

@@ -84,9 +84,7 @@ export default function BabelPluginReactCompiler(
             }
           } catch (e) {
             if (e instanceof CompilerError) {
-              throw new Error(
-                e.printErrorMessage(pass.file.code, {eslint: false}),
-              );
+              throw e.withPrintedMessage(pass.file.code, {eslint: false});
             }
             throw e;
           }

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

@@ -262,6 +262,7 @@ export class CompilerErrorDetail {
 
 export class CompilerError extends Error {
   details: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
+  printedMessage: string | null = null;
 
   static invariant(
     condition: unknown,
@@ -347,18 +348,29 @@ export class CompilerError extends Error {
   }
 
   override get message(): string {
-    return this.toString();
+    return this.printedMessage ?? this.toString();
   }
 
   override set message(_message: string) {}
 
   override toString(): string {
+    if (this.printedMessage) {
+      return this.printedMessage;
+    }
     if (Array.isArray(this.details)) {
       return this.details.map(detail => detail.toString()).join('\n\n');
     }
     return this.name;
   }
 
+  withPrintedMessage(
+    source: string,
+    options: PrintErrorMessageOptions,
+  ): CompilerError {
+    this.printedMessage = this.printErrorMessage(source, options);
+    return this;
+  }
+
   printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
     if (options.eslint && this.details.length === 1) {
       return this.details[0].printErrorMessage(source, options);