convert @babel/code-frame to typescript (#12433)

packages/babel-code-frame/src/index.ts

@@ -0,0 +1,234 @@
+import highlight, { shouldHighlight, getChalk } from "@babel/highlight";
+
+let deprecationWarningShown = false;
+
+type Location = {
+  column: number;
+  line: number;
+};
+
+type NodeLocation = {
+  end?: Location;
+  start: Location;
+};
+
+export 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;
+}
+
+/**
+ * Chalk styles for code frame token types.
+ */
+function getDefs(chalk) {
+  return {
+    gutter: chalk.grey,
+    marker: chalk.red.bold,
+    message: chalk.red.bold,
+  };
+}
+
+/**
+ * RegExp to test for newlines in terminal.
+ */
+
+const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
+
+/**
+ * Extract what lines should be marked and highlighted.
+ */
+
+function getMarkerLines(
+  loc: NodeLocation,
+  source: Array<string>,
+  opts: Options,
+): {
+  start: number;
+  end: number;
+  markerLines: any;
+} {
+  const startLoc: Location = {
+    column: 0,
+    line: -1,
+    ...loc.start,
+  };
+  const endLoc: Location = {
+    ...startLoc,
+    ...loc.end,
+  };
+  const { linesAbove = 2, linesBelow = 3 } = opts || {};
+  const startLine = startLoc.line;
+  const startColumn = startLoc.column;
+  const endLine = endLoc.line;
+  const endColumn = endLoc.column;
+
+  let start = Math.max(startLine - (linesAbove + 1), 0);
+  let end = Math.min(source.length, endLine + linesBelow);
+
+  if (startLine === -1) {
+    start = 0;
+  }
+
+  if (endLine === -1) {
+    end = source.length;
+  }
+
+  const lineDiff = endLine - startLine;
+  const markerLines = {};
+
+  if (lineDiff) {
+    for (let i = 0; i <= lineDiff; i++) {
+      const lineNumber = i + startLine;
+
+      if (!startColumn) {
+        markerLines[lineNumber] = true;
+      } else if (i === 0) {
+        const sourceLength = source[lineNumber - 1].length;
+
+        markerLines[lineNumber] = [startColumn, sourceLength - startColumn + 1];
+      } else if (i === lineDiff) {
+        markerLines[lineNumber] = [0, endColumn];
+      } else {
+        const sourceLength = source[lineNumber - i].length;
+
+        markerLines[lineNumber] = [0, sourceLength];
+      }
+    }
+  } else {
+    if (startColumn === endColumn) {
+      if (startColumn) {
+        markerLines[startLine] = [startColumn, 0];
+      } else {
+        markerLines[startLine] = true;
+      }
+    } else {
+      markerLines[startLine] = [startColumn, endColumn - startColumn];
+    }
+  }
+
+  return { start, end, markerLines };
+}
+
+export function codeFrameColumns(
+  rawLines: string,
+  loc: NodeLocation,
+  opts: Options = {},
+): string {
+  const highlighted =
+    (opts.highlightCode || opts.forceColor) && shouldHighlight(opts);
+  const chalk = getChalk(opts);
+  const defs = getDefs(chalk);
+  const maybeHighlight = (chalkFn, string) => {
+    return highlighted ? chalkFn(string) : string;
+  };
+  const lines = rawLines.split(NEWLINE);
+  const { start, end, markerLines } = getMarkerLines(loc, lines, opts);
+  const hasColumns = loc.start && typeof loc.start.column === "number";
+
+  const numberMaxWidth = String(end).length;
+
+  const highlightedLines = highlighted ? highlight(rawLines, opts) : rawLines;
+
+  let frame = highlightedLines
+    .split(NEWLINE)
+    .slice(start, end)
+    .map((line, index) => {
+      const number = start + 1 + index;
+      const paddedNumber = ` ${number}`.slice(-numberMaxWidth);
+      const gutter = ` ${paddedNumber} | `;
+      const hasMarker = markerLines[number];
+      const lastMarkerLine = !markerLines[number + 1];
+      if (hasMarker) {
+        let markerLine = "";
+        if (Array.isArray(hasMarker)) {
+          const markerSpacing = line
+            .slice(0, Math.max(hasMarker[0] - 1, 0))
+            .replace(/[^\t]/g, " ");
+          const numberOfMarkers = hasMarker[1] || 1;
+
+          markerLine = [
+            "\n ",
+            maybeHighlight(defs.gutter, gutter.replace(/\d/g, " ")),
+            markerSpacing,
+            maybeHighlight(defs.marker, "^").repeat(numberOfMarkers),
+          ].join("");
+
+          if (lastMarkerLine && opts.message) {
+            markerLine += " " + maybeHighlight(defs.message, opts.message);
+          }
+        }
+        return [
+          maybeHighlight(defs.marker, ">"),
+          maybeHighlight(defs.gutter, gutter),
+          line,
+          markerLine,
+        ].join("");
+      } else {
+        return ` ${maybeHighlight(defs.gutter, gutter)}${line}`;
+      }
+    })
+    .join("\n");
+
+  if (opts.message && !hasColumns) {
+    frame = `${" ".repeat(numberMaxWidth + 1)}${opts.message}\n${frame}`;
+  }
+
+  if (highlighted) {
+    return chalk.reset(frame);
+  } else {
+    return frame;
+  }
+}
+
+/**
+ * Create a code frame, adding line numbers, code highlighting, and pointing to a given position.
+ */
+
+export default function (
+  rawLines: string,
+  lineNumber: number,
+  colNumber?: number | null,
+  opts: Options = {},
+): string {
+  if (!deprecationWarningShown) {
+    deprecationWarningShown = true;
+
+    const message =
+      "Passing lineNumber and colNumber is deprecated to @babel/code-frame. Please use `codeFrameColumns`.";
+
+    if (process.emitWarning) {
+      // A string is directly supplied to emitWarning, because when supplying an
+      // Error object node throws in the tests because of different contexts
+      process.emitWarning(message, "DeprecationWarning");
+    } else {
+      const deprecationError = new Error(message);
+      deprecationError.name = "DeprecationWarning";
+      console.warn(new Error(message));
+    }
+  }
+
+  colNumber = Math.max(colNumber, 0);
+
+  const location: NodeLocation = {
+    start: { column: colNumber, line: lineNumber },
+  };
+
+  return codeFrameColumns(rawLines, location, opts);
+}