fix(rome_wasm): fix the WASM diagnostic printer

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())
     }
 }
 

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(())

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>
+
+"
+`;

npm/js-api/tests/wasm/diagnosticPrinter.test.mjs

@@ -0,0 +1,80 @@
+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");
+	});
+});