Improve code-frame/hightlight typings (#14643)

* code-frame

* map js-tokens to Babel 8

* highlight

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

@@ -1,5 +1,7 @@
 import highlight, { shouldHighlight, getChalk } from "@babel/highlight";
 
+type Chalk = ReturnType<typeof getChalk>;
+
 let deprecationWarningShown = false;
 
 type Location = {
@@ -37,7 +39,7 @@ export interface Options {
 /**
  * Chalk styles for code frame token types.
  */
-function getDefs(chalk) {
+function getDefs(chalk: Chalk) {
   return {
     gutter: chalk.grey,
     marker: chalk.red.bold,
@@ -55,14 +57,16 @@ const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
  * Extract what lines should be marked and highlighted.
  */
 
+type MarkerLines = Record<number, true | [number, number]>;
+
 function getMarkerLines(
   loc: NodeLocation,
   source: Array<string>,
   opts: Options,
 ): {
   start: number;
   end: number;
-  markerLines: any;
+  markerLines: MarkerLines;
 } {
   const startLoc: Location = {
     column: 0,
@@ -91,7 +95,7 @@ function getMarkerLines(
   }
 
   const lineDiff = endLine - startLine;
-  const markerLines = {};
+  const markerLines: MarkerLines = {};
 
   if (lineDiff) {
     for (let i = 0; i <= lineDiff; i++) {
@@ -135,7 +139,7 @@ export function codeFrameColumns(
     (opts.highlightCode || opts.forceColor) && shouldHighlight(opts);
   const chalk = getChalk(opts);
   const defs = getDefs(chalk);
-  const maybeHighlight = (chalkFn, string) => {
+  const maybeHighlight = (chalkFn: Chalk, string: string) => {
     return highlighted ? chalkFn(string) : string;
   };
   const lines = rawLines.split(NEWLINE);

packages/babel-highlight/src/index.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../../lib/third-party-libs.d.ts" />
 
-import type { Token, JSXToken } from "js-tokens";
+import type { Token as JSToken, JSXToken } from "js-tokens";
 import jsTokens from "js-tokens";
 
 import {
@@ -33,6 +33,10 @@ type InternalTokenType =
   | "comment"
   | "invalid";
 
+type Token = {
+  type: InternalTokenType | "uncolored";
+  value: string;
+};
 /**
  * Chalk styles for token types.
  */
@@ -69,7 +73,7 @@ if (process.env.BABEL_8_BREAKING) {
    * Get the type of token, specifying punctuator type.
    */
   const getTokenType = function (
-    token: Token | JSXToken,
+    token: JSToken | JSXToken,
   ): InternalTokenType | "uncolored" {
     if (token.type === "IdentifierName") {
       if (
@@ -128,7 +132,7 @@ if (process.env.BABEL_8_BREAKING) {
   /**
    * Turn a string of JS into an array of objects.
    */
-  tokenize = function* (text: string) {
+  tokenize = function* (text: string): Generator<Token> {
     for (const token of jsTokens(text, { jsx: true })) {
       switch (token.type) {
         case "TemplateHead":
@@ -161,7 +165,9 @@ if (process.env.BABEL_8_BREAKING) {
    */
   const JSX_TAG = /^[a-z][\w-]*$/i;
 
-  const getTokenType = function (token, offset, text) {
+  // The token here is defined in js-tokens@4. However we don't bother
+  // typing it since the whole block will be removed in Babel 8
+  const getTokenType = function (token: any, offset: number, text: string) {
     if (token.type === "name") {
       if (
         isKeyword(token.value) ||

scripts/generators/tsconfig.js

@@ -117,6 +117,7 @@ fs.writeFileSync(
               ["./lib/babel-plugin-dynamic-import-node.d.ts"],
             ],
             ["globals", ["./node_modules/globals-BABEL_8_BREAKING-true"]],
+            ["js-tokens", ["./node_modules/js-tokens-BABEL_8_BREAKING-true"]],
             ["regexpu-core", ["./lib/regexpu-core.d.ts"]],
           ]),
         },

tsconfig.json

@@ -702,6 +702,9 @@
       "globals": [
         "./node_modules/globals-BABEL_8_BREAKING-true"
       ],
+      "js-tokens": [
+        "./node_modules/js-tokens-BABEL_8_BREAKING-true"
+      ],
       "regexpu-core": [
         "./lib/regexpu-core.d.ts"
       ]