From fdf3e99ee155d1ee73459c393d0cdb7a710cd609 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 11 Jul 2025 17:10:59 -0700
Subject: [PATCH] [compiler] Use new diagnostic printing in playground

Per title
---
 .../apps/playground/components/Editor/EditorImpl.tsx     | 9 +++++----
 compiler/apps/playground/components/Editor/Output.tsx    | 6 +++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
index 02813a8d2f..4d8e2ece05 100644
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/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(error);
           }
         },
       },
@@ -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];
diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 7886f11e62..743b08d81b 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -206,7 +206,11 @@ function Output({store, compilerOutput}: Props): JSX.Element {
           <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>
+            <code>
+              {compilerOutput.error.printErrorMessage(store.source, {
+                eslint: false,
+              })}
+            </code>
           </pre>
         </div>
       ) : null}