Show syntax errors on the playground (#12083)

## Summary

This PR updates the playground to show syntax errors.

(I forgot to update this and noticed it this morning.)

## Test Plan

Build the playground locally and preview it:

<img width="764" alt="Screenshot 2024-06-28 at 11 03 35"
src="1fd48d6c-ae41-4672-bf3c-32a61d9946ef">

crates/ruff_wasm/src/lib.rs

@@ -28,7 +28,7 @@ use ruff_workspace::Settings;
 #[wasm_bindgen(typescript_custom_section)]
 const TYPES: &'static str = r#"
 export interface Diagnostic {
-    code: string;
+    code: string | null;
     message: string;
     location: {
         row: number;
@@ -57,7 +57,7 @@ export interface Diagnostic {
 
 #[derive(Serialize, Deserialize, Eq, PartialEq, Debug)]
 pub struct ExpandedMessage {
-    pub code: String,
+    pub code: Option<String>,
     pub message: String,
     pub location: SourceLocation,
     pub end_location: SourceLocation,
@@ -199,17 +199,17 @@ impl Workspace {
 
         let messages: Vec<ExpandedMessage> = diagnostics
             .into_iter()
-            .map(|message| {
+            .map(|diagnostic| {
-                let start_location = source_code.source_location(message.start());
+                let start_location = source_code.source_location(diagnostic.start());
-                let end_location = source_code.source_location(message.end());
+                let end_location = source_code.source_location(diagnostic.end());
 
                 ExpandedMessage {
-                    code: message.kind.rule().noqa_code().to_string(),
+                    code: Some(diagnostic.kind.rule().noqa_code().to_string()),
-                    message: message.kind.body,
+                    message: diagnostic.kind.body,
                     location: start_location,
                     end_location,
-                    fix: message.fix.map(|fix| ExpandedFix {
+                    fix: diagnostic.fix.map(|fix| ExpandedFix {
-                        message: message.kind.suggestion,
+                        message: diagnostic.kind.suggestion,
                         edits: fix
                             .edits()
                             .iter()
@@ -222,6 +222,18 @@ impl Workspace {
                     }),
                 }
             })
+            .chain(parsed.errors().iter().map(|parse_error| {
+                let start_location = source_code.source_location(parse_error.location.start());
+                let end_location = source_code.source_location(parse_error.location.end());
+
+                ExpandedMessage {
+                    code: None,
+                    message: format!("SyntaxError: {}", parse_error.error),
+                    location: start_location,
+                    end_location,
+                    fix: None,
+                }
+            }))
             .collect();
 
         serde_wasm_bindgen::to_value(&messages).map_err(into_error)

crates/ruff_wasm/tests/api.rs

@@ -25,7 +25,7 @@ fn empty_config() {
         "if (1, 2):\n    pass",
         r#"{}"#,
         [ExpandedMessage {
-            code: Rule::IfTuple.noqa_code().to_string(),
+            code: Some(Rule::IfTuple.noqa_code().to_string()),
             message: "If test is a tuple, which is always `True`".to_string(),
             location: SourceLocation {
                 row: OneIndexed::from_zero_indexed(0),
@@ -40,6 +40,27 @@ fn empty_config() {
     );
 }
 
+#[wasm_bindgen_test]
+fn syntax_error() {
+    check!(
+        "x =\ny = 1\n",
+        r#"{}"#,
+        [ExpandedMessage {
+            code: None,
+            message: "SyntaxError: Expected an expression".to_string(),
+            location: SourceLocation {
+                row: OneIndexed::from_zero_indexed(0),
+                column: OneIndexed::from_zero_indexed(3)
+            },
+            end_location: SourceLocation {
+                row: OneIndexed::from_zero_indexed(1),
+                column: OneIndexed::from_zero_indexed(0)
+            },
+            fix: None,
+        }]
+    );
+}
+
 #[wasm_bindgen_test]
 fn partial_config() {
     check!("if (1, 2):\n    pass", r#"{"ignore": ["F"]}"#, []);

playground/src/Editor/SourceEditor.tsx

@@ -39,7 +39,7 @@ export default function SourceEditor({
         startColumn: diagnostic.location.column,
         endLineNumber: diagnostic.end_location.row,
         endColumn: diagnostic.end_location.column,
-        message: `${diagnostic.code}: ${diagnostic.message}`,
+        message: diagnostic.code ? `${diagnostic.code}: ${diagnostic.message}` : diagnostic.message,
         severity: MarkerSeverity.Error,
         tags:
           diagnostic.code === "F401" || diagnostic.code === "F841"