Extract @babel/highlight package from @babel/code-frame

This creates a new package called @babel/highlight which syntax highlights
JavaScript code for terminal output. This functionality was already
present in @babel/code-frame, but exposing it as a separate package lets
other projects leverage it. @babel/code-frame has been refactored
slightly so that it uses @babel/highlight to do its syntax highlighting.

packages/babel-code-frame/package.json

@@ -8,11 +8,10 @@
   "repository": "https://github.com/babel/babel/tree/master/packages/babel-code-frame",
   "main": "lib/index.js",
   "dependencies": {
-    "chalk": "^2.0.0",
-    "esutils": "^2.0.2",
-    "js-tokens": "^3.0.0"
+    "@babel/highlight": "7.0.0-beta.39"
   },
   "devDependencies": {
+    "chalk": "^2.0.0",
     "strip-ansi": "^4.0.0"
   }
 }

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

@@ -1,6 +1,4 @@
-import jsTokens, { matchToToken } from "js-tokens";
-import esutils from "esutils";
-import Chalk from "chalk";
+import highlight, { shouldHighlight, getChalk } from "@babel/highlight";
 
 let deprecationWarningShown = false;
 
@@ -15,21 +13,10 @@ type NodeLocation = {
 };
 
 /**
- * Chalk styles for token types.
+ * Chalk styles for code frame token types.
  */
-
 function getDefs(chalk) {
   return {
-    keyword: chalk.cyan,
-    capitalized: chalk.yellow,
-    jsx_tag: chalk.yellow,
-    punctuator: chalk.yellow,
-    // bracket:  intentionally omitted.
-    number: chalk.magenta,
-    string: chalk.green,
-    regex: chalk.magenta,
-    comment: chalk.grey,
-    invalid: chalk.white.bgRed.bold,
     gutter: chalk.grey,
     marker: chalk.red.bold,
     message: chalk.red.bold,
@@ -42,76 +29,6 @@ function getDefs(chalk) {
 
 const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
 
-/**
- * RegExp to test for what seems to be a JSX tag name.
- */
-
-const JSX_TAG = /^[a-z][\w-]*$/i;
-
-/**
- * RegExp to test for the three types of brackets.
- */
-
-const BRACKET = /^[()[\]{}]$/;
-
-/**
- * Get the type of token, specifying punctuator type.
- */
-
-function getTokenType(match) {
-  const [offset, text] = match.slice(-2);
-  const token = matchToToken(match);
-
-  if (token.type === "name") {
-    if (esutils.keyword.isReservedWordES6(token.value)) {
-      return "keyword";
-    }
-
-    if (
-      JSX_TAG.test(token.value) &&
-      (text[offset - 1] === "<" || text.substr(offset - 2, 2) == "</")
-    ) {
-      return "jsx_tag";
-    }
-
-    if (token.value[0] !== token.value[0].toLowerCase()) {
-      return "capitalized";
-    }
-  }
-
-  if (token.type === "punctuator" && BRACKET.test(token.value)) {
-    return "bracket";
-  }
-
-  if (
-    token.type === "invalid" &&
-    (token.value === "@" || token.value === "#")
-  ) {
-    return "punctuator";
-  }
-
-  return token.type;
-}
-
-/**
- * Highlight `text`.
- */
-
-function highlight(defs: Object, text: string) {
-  return text.replace(jsTokens, function(...args) {
-    const type = getTokenType(args);
-    const colorize = defs[type];
-    if (colorize) {
-      return args[0]
-        .split(NEWLINE)
-        .map(str => colorize(str))
-        .join("\n");
-    } else {
-      return args[0];
-    }
-  });
-}
-
 /**
  * Extract what lines should be marked and highlighted.
  */
@@ -186,16 +103,13 @@ export function codeFrameColumns(
   opts: Object = {},
 ): string {
   const highlighted =
-    (opts.highlightCode && Chalk.supportsColor) || opts.forceColor;
-  let chalk = Chalk;
-  if (opts.forceColor) {
-    chalk = new Chalk.constructor({ enabled: true, level: 1 });
-  }
+    (opts.highlightCode || opts.forceColor) && shouldHighlight(opts);
+  const chalk = getChalk(opts);
+  const defs = getDefs(chalk);
   const maybeHighlight = (chalkFn, string) => {
     return highlighted ? chalkFn(string) : string;
   };
-  const defs = getDefs(chalk);
-  if (highlighted) rawLines = highlight(defs, rawLines);
+  if (highlighted) rawLines = highlight(rawLines, opts);
 
   const lines = rawLines.split(NEWLINE);
   const { start, end, markerLines } = getMarkerLines(loc, lines, opts);