fix(rome_wasm): fix the WASM diagnostic printer and add a snapshot te…

…st for it
rome · Oct 6, 2022 · b885f80 · b885f80
1 parent 5042251
commit b885f80
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 6 deletions.
diff --git a/crates/rome_diagnostics/src/file.rs b/crates/rome_diagnostics/src/file.rs
@@ -157,6 +157,13 @@ impl SimpleFile {
     pub fn empty() -> SimpleFile {
         SimpleFile::new(String::new(), String::new())
     }
+
+    pub fn source_code(&self) -> SourceCode<&'_ str, &'_ LineIndex> {
+        SourceCode {
+            text: &self.source,
+            line_starts: Some(&self.line_starts),
+        }
+    }
 }
 
 impl Files for SimpleFile {
@@ -165,10 +172,7 @@ impl Files for SimpleFile {
     }
 
     fn source(&self, _id: FileId) -> Option<SourceCode<&'_ str, &'_ LineIndex>> {
-        Some(SourceCode {
-            text: &self.source,
-            line_starts: Some(&self.line_starts),
-        })
+        Some(self.source_code())
     }
 }
 

diff --git a/crates/rome_wasm/src/utils.rs b/crates/rome_wasm/src/utils.rs
@@ -6,7 +6,8 @@ use wasm_bindgen::prelude::*;
 use rome_console::fmt::HTML;
 use rome_console::{fmt::Formatter, markup};
 use rome_diagnostics::file::SimpleFile;
-use rome_diagnostics::Diagnostic;
+use rome_diagnostics::v2::serde::Diagnostic;
+use rome_diagnostics::v2::{DiagnosticExt, PrintDiagnostic};
 
 use super::IDiagnostic;
 
@@ -39,10 +40,11 @@ impl DiagnosticPrinter {
 
     pub fn print(&mut self, diagnostic: IDiagnostic) -> Result<(), Error> {
         let diag: Diagnostic = diagnostic.into_serde().map_err(into_error)?;
+        let err = diag.with_file_source_code(self.file.source_code());
 
         let mut html = HTML(&mut self.buffer);
         Formatter::new(&mut html)
-            .write_markup(markup!({ diag.display(&self.file) }))
+            .write_markup(markup!({ PrintDiagnostic(&err) }))
             .map_err(into_error)?;
 
         Ok(())

diff --git a/npm/js-api/tests/wasm/__snapshots__/diagnosticPrinter.test.mjs.snap b/npm/js-api/tests/wasm/__snapshots__/diagnosticPrinter.test.mjs.snap
@@ -0,0 +1,26 @@
+// Vitest Snapshot v1
+
+exports[`Rome WebAssembly DiagnosticPrinter > should format content > HTML diagnostic 1`] = `
+"file.js:3:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+<strong><span style=\\"color: Tomato;\\">  </span></strong><strong><span style=\\"color: Tomato;\\">✖</span></strong> <span style=\\"color: Tomato;\\">error message content</span>
+  
+    <strong>1 │ </strong>const variable = expr();
+    <strong>2 │ </strong>
+<strong><span style=\\"color: Tomato;\\">  </span></strong><strong><span style=\\"color: Tomato;\\">&gt;</span></strong> <strong>3 │ </strong>if(expr()) {
+   <strong>   │ </strong>     <strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong>
+    <strong>4 │ </strong>    statement();
+    <strong>5 │ </strong>}
+  
+file.js:4:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+<strong><span style=\\"color: Tomato;\\">  </span></strong><strong><span style=\\"color: Tomato;\\">✖</span></strong> <span style=\\"color: Tomato;\\">error message content</span>
+  
+    <strong>3 │ </strong>if(expr()) {
+<strong><span style=\\"color: Tomato;\\">  </span></strong><strong><span style=\\"color: Tomato;\\">&gt;</span></strong> <strong>4 │ </strong>    statement();
+   <strong>   │ </strong>       <strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong><strong><span style=\\"color: Tomato;\\">^</span></strong>
+<strong><span style=\\"color: Tomato;\\">  </span></strong><strong><span style=\\"color: Tomato;\\">&gt;</span></strong> <strong>5 │ </strong>}
+   <strong>   │ </strong><strong><span style=\\"color: Tomato;\\">^</span></strong>
+  
+"
+`;
diff --git a/npm/js-api/tests/wasm/diagnosticPrinter.test.mjs b/npm/js-api/tests/wasm/diagnosticPrinter.test.mjs
@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import { DiagnosticPrinter } from "@rometools/wasm-nodejs";
+
+describe("Rome WebAssembly DiagnosticPrinter", () => {
+    it("should format content", async () => {
+        const SOURCE_CODE =
+            `const variable = expr();
+
+if(expr()) {
+    statement();
+}`;
+        const printer = new DiagnosticPrinter("file.js", SOURCE_CODE);
+
+        printer.print({
+            "advices": {
+                "advices": [],
+            },
+            "category": "parse",
+            "description": "error description content",
+            "location": {
+                "path": {
+                    "File": {
+                        "PathAndId": {
+                            "file_id": 0,
+                            "path": "file.js",
+                        },
+                    },
+                },
+                "source_code": null,
+                "span": [
+                    31,
+                    37,
+                ],
+            },
+            "message": [
+                {
+                    "content": "error message content",
+                    "elements": [],
+                },
+            ],
+            "severity": "Error",
+            "source": null,
+            "tags": [],
+            "verbose_advices": {
+                "advices": [],
+            },
+        });
+
+        printer.print({
+            "advices": {
+                "advices": [],
+            },
+            "category": "parse",
+            "description": "error description content",
+            "location": {
+                "path": {
+                    "File": {
+                        "PathAndId": {
+                            "file_id": 0,
+                            "path": "file.js",
+                        },
+                    },
+                },
+                "source_code": null,
+                "span": [
+                    46,
+                    58,
+                ],
+            },
+            "message": [
+                {
+                    "content": "error message content",
+                    "elements": [],
+                },
+            ],
+            "severity": "Error",
+            "source": null,
+            "tags": [],
+            "verbose_advices": {
+                "advices": [],
+            },
+        });
+
+        const html = printer.finish();
+        expect(html).toMatchSnapshot("HTML diagnostic");;
+    });
+});