@babel/code-frame

import codeFrame, { codeFrameColumns, highlight } from "@babel/code-frame";
import type { Options, Location, NodeLocation } from "@babel/code-frame";

const codeFrame = require("@babel/code-frame");
const { codeFrameColumns, highlight } = require("@babel/code-frame");

import codeFrame, { codeFrameColumns } from "@babel/code-frame";

const sourceCode = `class Foo {
  constructor() {
    console.log("Hello");
  }
}`;

// Recommended API - highlight specific location
const frame = codeFrameColumns(sourceCode, {
  start: { line: 2, column: 16 }
}, {
  highlightCode: true,
  message: "Syntax error here"
});

console.log(frame);
// Output:
//   1 | class Foo {
// > 2 |   constructor() {
//     |                ^
//   3 |     console.log("Hello");
//   4 |   }
//   5 | }

/**
 * Create a code frame with advanced location marking capabilities (recommended API)
 * @param rawLines - Source code as string
 * @param loc - Location object with start/end positions
 * @param opts - Optional configuration options
 * @returns Formatted code frame string
 */
function codeFrameColumns(
  rawLines: string,
  loc: NodeLocation,
  opts?: Options
): string;

/**
 * Legacy API - Create a code frame with line numbers, highlighting, and pointing to a given position
 * @deprecated Use codeFrameColumns instead
 * @param rawLines - Source code as string
 * @param lineNumber - Line number (1-based)
 * @param colNumber - Column number (0-based), optional
 * @param opts - Optional configuration options
 * @returns Formatted code frame string
 */
function codeFrame(
  rawLines: string,
  lineNumber: number,
  colNumber?: number | null,
  opts?: Options
): string;

export default codeFrame;

import { codeFrameColumns } from "@babel/code-frame";

// Single position highlighting
const frame1 = codeFrameColumns(sourceCode, {
  start: { line: 2, column: 16 }
});

// Range highlighting across columns
const frame2 = codeFrameColumns(sourceCode, {
  start: { line: 2, column: 3 },
  end: { line: 2, column: 16 }
});

// Multi-line range highlighting
const frame3 = codeFrameColumns(sourceCode, {
  start: { line: 2, column: 17 },
  end: { line: 4, column: 3 }
}, {
  highlightCode: true,
  message: "This entire block has an issue"
});

/**
 * Apply syntax highlighting to JavaScript/TypeScript code
 * @param text - Source code to highlight
 * @returns Highlighted code string with ANSI color codes
 */
function highlight(text: string): string;

import { highlight } from "@babel/code-frame";

const jsCode = `const greeting = "Hello World";
console.log(greeting);`;

const highlighted = highlight(jsCode);
console.log(highlighted); // Output with syntax colors in terminal

// Custom context lines
const frame = codeFrameColumns(sourceCode, { start: { line: 5, column: 10 } }, {
  linesAbove: 1,
  linesBelow: 1
});

// Force color output for non-terminal environments
const coloredFrame = codeFrameColumns(sourceCode, { start: { line: 3, column: 5 } }, {
  forceColor: true,
  message: "Variable not defined"
});

// Enable syntax highlighting for terminals
const highlightedFrame = codeFrameColumns(sourceCode, { start: { line: 2, column: 8 } }, {
  highlightCode: true
});

interface Location {
  /** Column number (0-based) */
  column: number;
  /** Line number (1-based) */
  line: number;
}

interface NodeLocation {
  /** Optional end position for range highlighting */
  end?: Location;
  /** Start position for highlighting */
  start: Location;
}

interface Options {
  /** Syntax highlight the code as JavaScript for terminals. default: false */
  highlightCode?: boolean;
  /** The number of lines to show above the error. default: 2 */
  linesAbove?: number;
  /** The number of lines to show below the error. default: 3 */
  linesBelow?: number;
  /**
   * Forcibly syntax highlight the code as JavaScript (for non-terminals);
   * overrides highlightCode. default: false
   */
  forceColor?: boolean;
  /**
   * Pass in a string to be displayed inline (if possible) next to the
   * highlighted location in the code. If it can't be positioned inline,
   * it will be placed above the code frame. default: nothing
   */
  message?: string;
}

function displayError(error: CompilerError, sourceCode: string) {
  const frame = codeFrameColumns(sourceCode, {
    start: { line: error.line, column: error.column }
  }, {
    highlightCode: true,
    message: error.message,
    linesAbove: 3,
    linesBelow: 3
  });
  
  console.error(`Error in ${error.filename}:\n${frame}`);
}

// Highlight entire function body
const functionFrame = codeFrameColumns(sourceCode, {
  start: { line: 2, column: 17 }, // Opening brace
  end: { line: 4, column: 3 }     // Closing brace
}, {
  message: "Function body contains deprecated syntax"
});