From dde00149ebd554cf84ac816579b44a615958930e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= <jlhwung@gmail.com>
Date: Wed, 1 Jun 2022 13:26:35 -0400
Subject: [PATCH 1/3] code-frame

---
 packages/babel-code-frame/src/index.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/babel-code-frame/src/index.ts b/packages/babel-code-frame/src/index.ts
index 35c26501c5bc..db5b7de65c2e 100644
--- a/packages/babel-code-frame/src/index.ts
+++ b/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,6 +57,8 @@ 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>,
@@ -62,7 +66,7 @@ function getMarkerLines(
 ): {
   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);

From 8ad3c128aecb4532f89219c265f6b66d8ba25b68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= <jlhwung@gmail.com>
Date: Wed, 1 Jun 2022 13:49:10 -0400
Subject: [PATCH 2/3] map js-tokens to Babel 8

---
 scripts/generators/tsconfig.js | 1 +
 tsconfig.json                  | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/scripts/generators/tsconfig.js b/scripts/generators/tsconfig.js
index 37f2156e421b..5940766f3de3 100644
--- a/scripts/generators/tsconfig.js
+++ b/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"]],
           ]),
         },
diff --git a/tsconfig.json b/tsconfig.json
index 8fce7ecacb84..b6bc3925d5a7 100644
--- a/tsconfig.json
+++ b/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"
       ]

From f5ee20faa2830e7f7a1ff4bd69456d5b7f32d548 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= <jlhwung@gmail.com>
Date: Wed, 1 Jun 2022 13:49:32 -0400
Subject: [PATCH 3/3] highlight

---
 packages/babel-highlight/src/index.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/babel-highlight/src/index.ts b/packages/babel-highlight/src/index.ts
index 9ac6c0612d4e..60d2ee6bdb42 100644
--- a/packages/babel-highlight/src/index.ts
+++ b/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) ||