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

lib/babel-packages.js.flow

@@ -59,3 +59,60 @@ declare module "@babel/helper-annotate-as-pure" {
         }
   ): void;
 }
+
+declare module "@babel/code-frame" {
+  declare type Location = {
+    column: number,
+    line: number,
+  };
+  declare type NodeLocation = {
+    end?: Location,
+    start: Location,
+  };
+  declare 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;
+  }
+  declare export function codeFrameColumns(
+    rawLines: string,
+    loc: NodeLocation,
+    opts?: Options
+  ): string;
+
+  /**
+   * Create a code frame, adding line numbers, code highlighting, and pointing to a given position.
+   */
+  declare export default function codeFrame(
+    rawLines: string,
+    lineNumber: number,
+    colNumber?: number | null,
+    opts?: Options
+  ): string;
+}

packages/babel-code-frame/package.json

@@ -18,6 +18,7 @@
     "@babel/highlight": "workspace:^7.10.4"
   },
   "devDependencies": {
+    "@types/chalk": "^2.0.0",
     "chalk": "^2.0.0",
     "strip-ansi": "^4.0.0"
   }

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

@@ -3,15 +3,37 @@ import highlight, { shouldHighlight, getChalk } from "@babel/highlight";
 let deprecationWarningShown = false;
 
 type Location = {
-  column: number,
+  column: number;
-  line: number,
+  line: number;
 };
 
 type NodeLocation = {
-  end: Location,
+  end?: Location;
-  start: 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.
  */
@@ -36,8 +58,12 @@ const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
 function getMarkerLines(
   loc: NodeLocation,
   source: Array<string>,
-  opts: Object,
+  opts: Options,
-): { start: number, end: number, markerLines: Object } {
+): {
+  start: number;
+  end: number;
+  markerLines: any;
+} {
   const startLoc: Location = {
     column: 0,
     line: -1,
@@ -103,7 +129,7 @@ function getMarkerLines(
 export function codeFrameColumns(
   rawLines: string,
   loc: NodeLocation,
-  opts: Object = {},
+  opts: Options = {},
 ): string {
   const highlighted =
     (opts.highlightCode || opts.forceColor) && shouldHighlight(opts);
@@ -178,8 +204,8 @@ export function codeFrameColumns(
 export default function (
   rawLines: string,
   lineNumber: number,
-  colNumber: ?number,
+  colNumber?: number | null,
-  opts: Object = {},
+  opts: Options = {},
 ): string {
   if (!deprecationWarningShown) {
     deprecationWarningShown = true;