feat: add better errors with miette from oxc, rich diagnostics

Author: Inerska

packages/facetpack-native/README.md

@@ -41,8 +41,52 @@ const result = parseSync('App.tsx', code, {
 
 console.log(result.program)
 console.log(result.errors)
+console.log(result.diagnostics)
 ```
 
+### Rich Diagnostics
+
+Parse errors include detailed diagnostics with contextual help messages, similar to Rust compiler errors:
+
+```ts
+const result = parseSync('config.ts', `const obj = {
+  name: 'test',
+  items: [
+    { id: 1
+  ]
+}`)
+
+result.diagnostics.forEach(d => console.log(d.formatted))
+```
+
+Output:
+```
+  × Expected `,` or `}` but found `]`
+   ╭─[config.ts:5:3]
+ 1 │ const obj = {
+ 2 │   name: 'test',
+ 3 │   items: [
+ 4 │     { id: 1
+   ·     ┬
+   ·     ╰── Opened here
+ 5 │   ]
+   ·   ┬
+   ·   ╰── `,` or `}` expected
+ 6 │ }
+   ╰────
+  help: Check for missing punctuation or unclosed brackets
+```
+
+Each diagnostic includes:
+- `severity` - Error, Warning, Info, or Hint
+- `code` - Error code (e.g., E0001)
+- `message` - Error description
+- `filename`, `line`, `column` - Location info
+- `snippet` - Relevant source code line
+- `help` - Contextual suggestion to fix the error
+- `suggestion` - Specific fix recommendation
+- `formatted` - Pre-formatted colored output with visual pointers
+
 ### Resolve
 
 ```ts

packages/facetpack-native/index.d.ts

@@ -11,6 +11,29 @@ export declare function analyzeBatchSync(modules: Array<ModuleInput>): Array<Mod
 
 export declare function analyzeSync(filename: string, sourceText: string): ModuleAnalysis
 
+export interface Diagnostic {
+  severity: DiagnosticSeverity
+  code?: string
+  message: string
+  filename: string
+  line: number
+  column: number
+  endLine?: number
+  endColumn?: number
+  snippet?: string
+  label?: string
+  help?: string
+  suggestion?: string
+  formatted: string
+}
+
+export declare const enum DiagnosticSeverity {
+  Error = 'Error',
+  Warning = 'Warning',
+  Info = 'Info',
+  Hint = 'Hint'
+}
+
 export interface ExportInfo {
   name: string
   isDefault: boolean
@@ -64,6 +87,7 @@ export interface ParseOptions {
 export interface ParseResult {
   program: string
   errors: Array<string>
+  diagnostics: Array<Diagnostic>
   panicked: boolean
 }
 
@@ -115,6 +139,7 @@ export interface TransformResult {
   code: string
   map?: string
   errors: Array<string>
+  diagnostics: Array<Diagnostic>
 }
 
 export declare function transformSync(filename: string, sourceText: string, options?: TransformOptions | undefined | null): TransformResult

packages/facetpack-native/index.js

@@ -149,7 +149,7 @@ mod tests {
     "#;
     let options = MinifyOptions {
       mangle: Some(false),
-      compress: Some(false), // Disable compress to avoid dead code elimination
+      compress: Some(false),
       ..Default::default()
     };
     let command = MinifyCommand::new(code.to_string(), "test.js".to_string(), Some(options));

packages/facetpack-native/src/cqrs/command/minify.rs

@@ -131,6 +131,7 @@ impl Command for TransformCommand {
       code: codegen_return.code,
       map,
       errors,
+      diagnostics: vec![],
     })
   }
 }
@@ -294,4 +295,42 @@ mod tests {
 
     assert!(result.errors.is_empty());
   }
+
+  #[test]
+  fn test_error_transform_invalid_jsx_attribute() {
+    let code = r#"const App = () => <View style= />;"#;
+    let command = TransformCommand::new("Component.tsx".to_string(), code.to_string(), None);
+    let result = command.execute();
+    assert!(result.is_err());
+  }
+
+  #[test]
+  fn test_error_transform_unclosed_jsx_tag() {
+    let code = r#"const App = () => <View><Text>Hello</View>;"#;
+    let command = TransformCommand::new("App.tsx".to_string(), code.to_string(), None);
+    let result = command.execute();
+    assert!(result.is_err());
+  }
+
+  #[test]
+  fn test_error_transform_invalid_typescript_generic() {
+    let code = "const fn = <T,>(x: T) => x; fn<>(5);";
+    let command = TransformCommand::new("generic.ts".to_string(), code.to_string(), None);
+    let _result = command.execute();
+  }
+
+  #[test]
+  fn test_error_transform_mixed_jsx_children() {
+    let code = r#"const App = () => <View>{items.map(i => <Text key={i}>{i}</Text>)}</View>;"#;
+    let command = TransformCommand::new("List.tsx".to_string(), code.to_string(), None);
+    let result = command.execute();
+    assert!(result.is_ok());
+  }
+
+  #[test]
+  fn test_error_transform_async_in_wrong_context() {
+    let code = r#"const x = await fetch('/api');"#;
+    let command = TransformCommand::new("api.ts".to_string(), code.to_string(), None);
+    let _result = command.execute();
+  }
 }