Be defensive rendering code frames

Cargo.toml

@@ -8,6 +8,7 @@ members = [
   "crates/next-api",
   "crates/next-build-test",
   "crates/next-build",
+  "crates/next-code-frame",
   "crates/next-core",
   "crates/next-custom-transforms",
   "crates/next-taskless",
@@ -287,6 +288,7 @@ debug = true
 # Workspace crates
 next-api = { path = "crates/next-api" }
 next-build = { path = "crates/next-build" }
+next-code-frame = { path = "crates/next-code-frame" }
 next-core = { path = "crates/next-core" }
 next-custom-transforms = { path = "crates/next-custom-transforms" }
 next-taskless = { path = "crates/next-taskless" }

crates/napi/Cargo.toml

@@ -64,6 +64,7 @@ futures-util = { workspace = true }
 owo-colors = { workspace = true }
 napi = { workspace = true }
 napi-derive = "2"
+next-code-frame = { workspace = true  }
 next-custom-transforms = { workspace = true }
 next-taskless = { workspace = true }
 rand = { workspace = true }

crates/napi/src/code_frame.rs

@@ -0,0 +1,89 @@
+use napi::bindgen_prelude::*;
+use next_code_frame::{CodeFrameLocation, CodeFrameOptions, Location, render_code_frame};
+
+#[napi(object)]
+pub struct NapiLocation {
+    pub line: u32,
+    pub column: Option<u32>,
+}
+
+impl From<NapiLocation> for Location {
+    fn from(loc: NapiLocation) -> Self {
+        Location {
+            line: loc.line as usize,
+            column: loc.column.unwrap_or(0) as usize,
+        }
+    }
+}
+
+#[napi(object)]
+pub struct NapiCodeFrameLocation {
+    pub start: NapiLocation,
+    pub end: Option<NapiLocation>,
+}
+
+impl From<NapiCodeFrameLocation> for CodeFrameLocation {
+    fn from(loc: NapiCodeFrameLocation) -> Self {
+        CodeFrameLocation {
+            start: loc.start.into(),
+            end: loc.end.map(Into::into),
+        }
+    }
+}
+
+#[napi(object)]
+#[derive(Default)]
+pub struct NapiCodeFrameOptions {
+    /// Number of lines to show above the error (default: 2)
+    pub lines_above: Option<u32>,
+    /// Number of lines to show below the error (default: 3)
+    pub lines_below: Option<u32>,
+    /// Maximum width of the output (default: terminal width)
+    pub max_width: Option<u32>,
+    /// Whether to use ANSI colors (default: true)
+    pub force_color: Option<bool>,
+    /// Whether to highlight code syntax (default: true)
+    pub highlight_code: Option<bool>,
+    /// Optional message to display with the code frame
+    pub message: Option<String>,
+}
+
+impl From<NapiCodeFrameOptions> for CodeFrameOptions {
+    fn from(opts: NapiCodeFrameOptions) -> Self {
+        CodeFrameOptions {
+            lines_above: opts.lines_above.unwrap_or(2) as usize,
+            lines_below: opts.lines_below.unwrap_or(3) as usize,
+            max_width: opts.max_width.map(|w| w as usize),
+            use_colors: opts.force_color.unwrap_or(true),
+            highlight_code: opts.highlight_code.unwrap_or(true),
+            message: opts.message,
+        }
+    }
+}
+
+/// Renders a code frame showing the location of an error in source code
+///
+/// This is a Rust implementation that replaces Babel's code-frame for better:
+/// - Performance on large files
+/// - Handling of long lines
+/// - Memory efficiency
+///
+/// # Arguments
+/// * `source` - The source code to render
+/// * `location` - The location to highlight (line and column numbers are 1-indexed)
+/// * `options` - Optional configuration
+///
+/// # Returns
+/// The formatted code frame string, or empty string if the location is invalid
+#[napi]
+pub fn code_frame_columns(
+    source: String,
+    location: NapiCodeFrameLocation,
+    options: Option<NapiCodeFrameOptions>,
+) -> Result<String> {
+    let code_frame_location: CodeFrameLocation = location.into();
+    let code_frame_options: CodeFrameOptions = options.unwrap_or_default().into();
+
+    render_code_frame(&source, &code_frame_location, &code_frame_options)
+        .map_err(|e| Error::from_reason(format!("Failed to render code frame: {}", e)))
+}

crates/napi/src/lib.rs

@@ -42,6 +42,7 @@ use swc_core::{
     common::{FilePathMapping, SourceMap},
 };
 
+pub mod code_frame;
 #[cfg(not(target_arch = "wasm32"))]
 pub mod css;
 pub mod lockfile;

crates/next-code-frame/Cargo.toml

@@ -0,0 +1,25 @@
+[package]
+name = "next-code-frame"
+version = "0.0.1"
+description = "Fast, scalable code frame rendering for Next.js error reporting"
+license = "MIT"
+edition = "2024"
+
+[lib]
+bench = false
+
+[lints]
+workspace = true
+
+[profile.dev.package]
+insta.opt-level = 3
+similar.opt-level = 3
+
+[dependencies]
+anyhow = { workspace = true }
+swc_ecma_lexer = "24.0.0"
+swc_common = "15.0.0"
+serde = { workspace = true }
+
+[dev-dependencies]
+insta = { version = "1.43.1", features = ["yaml"] }

crates/next-code-frame/README.md

@@ -0,0 +1,24 @@
+# next-code-frame
+
+Fast, scalable code frame rendering for Next.js error reporting, written in Rust.
+
+This crate provides functionality similar to `@babel/code-frame` but with several improvements:
+- **Scalability**: Handles arbitrarily large files efficiently
+- **Long line handling**: Gracefully scrolls long lines to keep error positions visible and avoid overwhelming the terminal with long lines
+- **Syntax highlighting**: Uses SWC lexer for accurate JavaScript/TypeScript tokenization
+
+## Design
+
+Following the `next-taskless` pattern, this crate:
+- Has no dependency on turbo-tasks, allowing use in webpack/rspack codepaths
+- Is compilable to WASM for environments without native bindings
+- Follows "sans-io" patterns - accepts file content as arguments rather than performing IO
+   - Modifying it to optionally accept file paths is reasonable future work
+
+## Features
+
+- Terminal width detection with sensible defaults
+- Syntax highlighting for JS, TS, JSX, TSX
+- Graceful degradation for non-JS files or parsing errors
+- ANSI color support matching babel-code-frame aesthetics
+- Support for single-line and multi-line error ranges

crates/next-code-frame/examples/comments_punctuation_demo.rs

@@ -0,0 +1,27 @@
+use next_code_frame::{CodeFrameLocation, CodeFrameOptions, Location, render_code_frame};
+
+fn main() {
+    let source = r#"// This is a comment
+const x = 42; // inline comment
+const obj = { foo: 'bar' };
+/* Multi-line
+   comment */
+const result = x > 10 ? 'yes' : 'no';"#;
+
+    let location = CodeFrameLocation {
+        start: Location { line: 2, column: 1 },
+        end: Some(Location {
+            line: 2,
+            column: 14, // Mark "const x = 42;"
+        }),
+    };
+
+    println!("=== With Syntax Highlighting (showing comments and punctuation) ===");
+    let options = CodeFrameOptions {
+        use_colors: true,
+        highlight_code: true,
+        ..Default::default()
+    };
+    let result = render_code_frame(source, &location, &options).unwrap();
+    println!("{}", result);
+}

crates/next-code-frame/examples/complete_highlighting_demo.rs

@@ -0,0 +1,53 @@
+use next_code_frame::{CodeFrameLocation, CodeFrameOptions, Location, render_code_frame};
+
+fn main() {
+    let source = r#"// Type definition
+const greeting: string = "Hello";
+const count = 42 + 10;
+const regex = /test\d+/gi;
+
+/* Calculate result with
+   ternary operator */
+const result = count > 10 ? "yes" : "no";
+
+// Object literal
+const obj = {
+  foo: 'bar',
+  baz: true,
+};
+
+// Arrow function with JSX
+const Component = () => <div>Hello</div>;"#;
+
+    let location = CodeFrameLocation {
+        start: Location { line: 8, column: 1 },
+        end: Some(Location {
+            line: 8,
+            column: 43,
+        }),
+    };
+
+    println!("╔═══════════════════════════════════════════════════════════╗");
+    println!("║  Complete Syntax Highlighting Demo (matching Babel)      ║");
+    println!("╚═══════════════════════════════════════════════════════════╝\n");
+
+    let options = CodeFrameOptions {
+        use_colors: true,
+        highlight_code: true,
+        ..Default::default()
+    };
+    let result = render_code_frame(source, &location, &options).unwrap();
+    println!("{}", result);
+
+    println!("\n╔═══════════════════════════════════════════════════════════╗");
+    println!("║  Color Key:                                               ║");
+    println!("╠═══════════════════════════════════════════════════════════╣");
+    println!("║  \x1b[36mKeywords\x1b[0m (cyan): const, let, var, if, etc.            ║");
+    println!("║  \x1b[33mIdentifiers\x1b[0m (yellow): variable and function names    ║");
+    println!("║  \x1b[32mStrings\x1b[0m (green): \"...\", '...', template literals     ║");
+    println!("║  \x1b[35mNumbers\x1b[0m (magenta): 42, 0x10, bigints                 ║");
+    println!("║  \x1b[33mPunctuation\x1b[0m (yellow): = ; , . : ? + - * /            ║");
+    println!("║  \x1b[90mComments\x1b[0m (gray): // and /* */                        ║");
+    println!("║  Brackets (default): ( ) [ ] {{ }}                       ║");
+    println!("╚═══════════════════════════════════════════════════════════╝");
+}

crates/next-code-frame/examples/highlighting_demo.rs

@@ -0,0 +1,39 @@
+use next_code_frame::{CodeFrameLocation, CodeFrameOptions, Location, render_code_frame};
+
+fn main() {
+    let source = r#"const greeting = "Hello, world!";
+const number = 42;
+const regex = /test/g;
+const obj = { foo: 'bar' };"#;
+
+    let location = CodeFrameLocation {
+        start: Location {
+            line: 2,
+            column: 16,
+        },
+        end: Some(Location {
+            line: 2,
+            column: 18, // Mark "42"
+        }),
+    };
+
+    // Without highlighting
+    println!("=== Without Highlighting ===");
+    let options = CodeFrameOptions {
+        use_colors: true,
+        highlight_code: false,
+        ..Default::default()
+    };
+    let result = render_code_frame(source, &location, &options).unwrap();
+    println!("{}", result);
+
+    // With highlighting
+    println!("\n=== With Syntax Highlighting ===");
+    let options = CodeFrameOptions {
+        use_colors: true,
+        highlight_code: true,
+        ..Default::default()
+    };
+    let result = render_code_frame(source, &location, &options).unwrap();
+    println!("{}", result);
+}