feat(common): Add contexts to the error messages

crates/swc_error_reporters/examples/swc_try.rs

@@ -16,7 +16,7 @@ fn main() {
     let emitter = PrettyEmitter::new(
         cm.clone(),
         wr.clone(),
-        GraphicalReportHandler::new(),
+        GraphicalReportHandler::new().with_context_lines(3),
         PrettyEmitterConfig {
             skip_filename: false,
         },
@@ -25,8 +25,14 @@ fn main() {
     // true).skip_filename(skip_filename);
     let handler = Handler::with_emitter(true, false, Box::new(emitter));
 
-    let fm1 = cm.new_source_file(FileName::Custom("foo.js".into()), "13579".into());
-    let fm2 = cm.new_source_file(FileName::Custom("bar.js".into()), "02468".into());
+    let fm1 = cm.new_source_file(
+        FileName::Custom("foo.js".into()),
+        "13579\n12345\n13579".into(),
+    );
+    let fm2 = cm.new_source_file(
+        FileName::Custom("bar.js".into()),
+        "02468\n12345\n02468".into(),
+    );
 
     // This is a simple example.
     handler
@@ -37,7 +43,7 @@ fn main() {
     // This can be used to show configurable error with the config.
 
     handler
-        .struct_span_err(span(&fm1, 0, 3), "constraint violation")
+        .struct_span_err(span(&fm1, 6, 9), "constraint violation")
         .span_note(span(&fm2, 0, 1), "this is your config")
         .emit();
 

crates/swc_error_reporters/src/handler.rs

@@ -75,6 +75,7 @@ fn to_miette_reporter(color: ColorConfig) -> GraphicalReportHandler {
         ColorConfig::Always => GraphicalReportHandler::default(),
         ColorConfig::Never => GraphicalReportHandler::default().with_theme(GraphicalTheme::none()),
     }
+    .with_context_lines(3)
 }
 
 /// Try operation with a [Handler] and prints the errors as a [String] wrapped

crates/swc_error_reporters/src/lib.rs

@@ -69,17 +69,41 @@ impl SourceCode for MietteSourceCode<'_> {
     fn read_span<'a>(
         &'a self,
         span: &SourceSpan,
-        _context_lines_before: usize,
-        _context_lines_after: usize,
+        context_lines_before: usize,
+        context_lines_after: usize,
     ) -> Result<Box<dyn SpanContents<'a> + 'a>, MietteError> {
         let lo = span.offset();
         let hi = lo + span.len();
 
-        let span = Span::new(BytePos(lo as _), BytePos(hi as _), Default::default());
+        let mut span = Span::new(BytePos(lo as _), BytePos(hi as _), Default::default());
 
-        let span = self.0.span_extend_to_prev_char(span, '\n');
+        span = self
+            .0
+            .with_span_to_prev_source(span, |src| {
+                let len = src
+                    .rsplit('\n')
+                    .take(context_lines_before)
+                    .map(|s| s.len() + 1)
+                    .sum::<usize>();
+
+                span.lo.0 -= (len as u32) - 1;
+                span
+            })
+            .unwrap_or(span);
 
-        let span = self.0.span_extend_to_next_char(span, '\n');
+        span = self
+            .0
+            .with_span_to_next_source(span, |src| {
+                let len = src
+                    .split('\n')
+                    .take(context_lines_after)
+                    .map(|s| s.len() + 1)
+                    .sum::<usize>();
+
+                span.hi.0 += (len as u32) - 1;
+                span
+            })
+            .unwrap_or(span);
 
         let mut src = self
             .0