Skip to main content

Crate next_code_frame

Crate next_code_frame 

Source
Expand description

§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 a language-agnostic regex tokenizer for best-effort syntax highlighting

§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 - the library accepts file content as arguments rather than performing IO

§CLI

A code_frame binary is included for quick testing. Pass a filename and start/end positions (1-indexed line:column):

# Highlight a single position
cargo run -p next-code-frame --bin code_frame -- src/app.tsx 10:5

# Highlight a range
cargo run -p next-code-frame --bin code_frame -- src/app.tsx 10:5 10:20

# With an error message
cargo run -p next-code-frame --bin code_frame -- -m "Unexpected token" src/app.tsx 10:5 10:20

§Syntax highlighting

The highlighter uses a single compiled regex pass over the visible content to tokenize strings, comments, numbers, regex literals, and identifiers. Keywords are identified via a compile-time perfect hash set (phf).

§Skip-scan heuristic

For large files, scanning from byte 0 is expensive — the regex tokenizer dominates runtime. To avoid this, extract_highlights() walks backwards from the visible window looking for a blank line and starts the scan there. A blank line is a safe restart point for single-line constructs (strings, line comments, regex literals) because they cannot span blank lines.

Known limitation: The heuristic can produce incorrect highlighting when a multi-line construct (block comment or template literal) contains a blank line that falls between the scan start and the visible window. In this case the scanner misses the opening delimiter and the closing delimiter / trailing code may lose its expected coloring. For example:

/** sneaky

*/
const after = 1; // `*/` may lose comment highlighting

This is a deliberate tradeoff — blank lines inside block comments or template literals that span the window boundary are vanishingly rare in practice, and the consequence is only slightly wrong highlighting, never a failure or missing output.

§Byte-level skip for long lines

When the visible window starts far into a long line (>200 bytes from the line-level scan start), the heuristic additionally scans backwards from the visible start for a ; and restarts the tokenizer there. This is critical for minified files where the entire source may be a single line — without it the scanner would tokenize hundreds of kilobytes of invisible content.

Known limitation: The ; can land inside a string literal, causing an unbalanced quote that cascades incorrect highlighting across the visible window. In practice minified code has frequent ; between statements so this rarely triggers, and the consequence is only incorrect highlighting, never a failure.

§Features

  • Caller-provided output width (no terminal detection — sans-io)
  • 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

Structs§

CodeFrameLocation
Location information for the error in the source code.
CodeFrameOptions
Options for rendering the code frame
Location
A source location with line and column.

Enums§

Language
Language hint for keyword highlighting.

Functions§

render_code_frame
Renders a code frame showing the location of an error in source code.