[babel 8] Use ESM-based chalk@5 (#15792)

Co-authored-by: liuxingbaoyu <30521560+liuxingbaoyu@users.noreply.github.com>

.github/workflows/ci.yml

@@ -49,7 +49,13 @@ jobs:
         run: |
           yarn dedupe --check
       - name: Check for dependency cycles
+        # todo: investigate why we need to install dependencies here to not get
+        # the following error:
+        # Internal Error: chalk@condition:BABEL_8_BREAKING ?[...]: This package
+        # doesn't seem to be present in your lockfile; run "yarn install" to
+        # update the lockfile
         run: |
+          yarn
           yarn release-tool check-cycles
 
   test-coverage:

babel.config.js

@@ -305,6 +305,7 @@ module.exports = function (api) {
             "@babel/transform-modules-commonjs",
             { importInterop: importInteropTest },
           ],
+          "@babel/plugin-transform-dynamic-import",
         ],
       },
       {
@@ -315,6 +316,10 @@ module.exports = function (api) {
         exclude: /regenerator-runtime/,
         plugins: [["@babel/transform-runtime", transformRuntimeOptions]],
       },
+      env === "standalone" && {
+        test: /chalk/,
+        plugins: [pluginReplaceNavigator],
+      },
     ].filter(Boolean),
   };
 
@@ -969,3 +974,20 @@ function pluginGeneratorOptimization({ types: t }) {
     },
   };
 }
+
+function pluginReplaceNavigator({ template }) {
+  return {
+    visitor: {
+      MemberExpression(path) {
+        const object = path.get("object");
+        if (object.isIdentifier({ name: "navigator" })) {
+          object.replaceWith(
+            template.expression.ast`
+              typeof navigator == "object" ? navigator : {}
+            `
+          );
+        }
+      },
+    },
+  };
+}

package.json

@@ -48,7 +48,7 @@
     "@typescript-eslint/parser": "^6.3.0",
     "babel-plugin-transform-charcodes": "^0.2.0",
     "c8": "^8.0.1",
-    "chalk": "^5.0.0",
+    "chalk": "^5.3.0",
     "charcodes": "^0.2.0",
     "core-js": "^3.31.1",
     "eslint": "^8.44.0",

packages/babel-code-frame/package.json

@@ -17,9 +17,10 @@
   "main": "./lib/index.js",
   "dependencies": {
     "@babel/highlight": "workspace:^",
-    "chalk": "condition:BABEL_8_BREAKING ? ^4.1.2 : ^2.4.2"
+    "chalk": "condition:BABEL_8_BREAKING ? ^5.3.0 : ^2.4.2 (esm:default,Chalk)"
   },
   "devDependencies": {
+    "import-meta-resolve": "^3.0.0",
     "strip-ansi": "^4.0.0"
   },
   "engines": {

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

@@ -1,17 +1,12 @@
 import highlight, { shouldHighlight } from "@babel/highlight";
 
-import _chalk from "chalk";
-const chalk = _chalk as unknown as typeof import("chalk-BABEL_8_BREAKING-true");
-type Chalk =
-  typeof import("chalk-BABEL_8_BREAKING-true").Instance extends new () => infer R
-    ? R
-    : never;
+import chalk, { Chalk as ChalkClass, type ChalkInstance as Chalk } from "chalk";
 
 let chalkWithForcedColor: Chalk = undefined;
 function getChalk(forceColor: boolean) {
   if (forceColor) {
     chalkWithForcedColor ??= process.env.BABEL_8_BREAKING
-      ? new chalk.Instance({ level: 1 })
+      ? new ChalkClass({ level: 1 })
       : // @ts-expect-error .Instance was .constructor in chalk 2
         new chalk.constructor({ enabled: true, level: 1 });
     return chalkWithForcedColor;

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

@@ -1,43 +1,47 @@
+import { USE_ESM } from "$repo-utils";
+
 import stripAnsi from "strip-ansi";
 import chalk from "chalk";
 import _codeFrame, { codeFrameColumns } from "../lib/index.js";
 const codeFrame = _codeFrame.default || _codeFrame;
 
 import { createRequire } from "module";
 const require = createRequire(import.meta.url);
-const babelHighlightChalk = require(require.resolve("chalk", {
-  paths: [require.resolve("@babel/highlight")],
-}));
 
 describe("@babel/code-frame", function () {
+  let babelHighlightChalk;
+  beforeAll(async function () {
+    if (USE_ESM && process.env.BABEL_8_BREAKING) {
+      const { resolve } = await import("import-meta-resolve");
+      ({ default: babelHighlightChalk } = await import(
+        resolve("chalk", resolve("@babel/highlight", import.meta.url))
+      ));
+    } else {
+      babelHighlightChalk = require(require.resolve("chalk", {
+        paths: [require.resolve("@babel/highlight")],
+      }));
+    }
+  });
+
   function stubColorSupport(supported) {
     let originalChalkEnabled;
     let originalChalkLevel;
-    let originalChalkSupportsColor;
     let originalHighlightChalkEnabled;
     let originalHighlightChalkLevel;
-    let originalHighlightChalkSupportsColor;
 
     beforeEach(function () {
-      originalChalkSupportsColor = chalk.supportsColor;
       originalChalkLevel = chalk.level;
       originalChalkEnabled = chalk.enabled;
-      originalHighlightChalkSupportsColor = babelHighlightChalk.supportsColor;
       originalHighlightChalkLevel = babelHighlightChalk.level;
       originalHighlightChalkEnabled = babelHighlightChalk.enabled;
 
-      babelHighlightChalk.supportsColor = chalk.supportsColor = supported
-        ? { level: 1 }
-        : false;
       babelHighlightChalk.level = chalk.level = supported ? 1 : 0;
       babelHighlightChalk.enabled = chalk.enabled = supported;
     });
 
     afterEach(function () {
-      chalk.supportsColor = originalChalkSupportsColor;
       chalk.level = originalChalkLevel;
       chalk.enabled = originalChalkEnabled;
-      babelHighlightChalk.supportsColor = originalHighlightChalkSupportsColor;
       babelHighlightChalk.level = originalHighlightChalkLevel;
       babelHighlightChalk.enabled = originalHighlightChalkEnabled;
     });

packages/babel-highlight/package.json

@@ -16,7 +16,7 @@
   "main": "./lib/index.js",
   "dependencies": {
     "@babel/helper-validator-identifier": "workspace:^",
-    "chalk": "condition:BABEL_8_BREAKING ? ^4.1.2 : ^2.4.2",
+    "chalk": "condition:BABEL_8_BREAKING ? ^5.3.0 : ^2.4.2 (esm:default,Chalk)",
     "js-tokens": "condition:BABEL_8_BREAKING ? ^8.0.0 : ^4.0.0"
   },
   "devDependencies": {

packages/babel-highlight/src/index.ts

@@ -8,12 +8,7 @@ import {
   isKeyword,
 } from "@babel/helper-validator-identifier";
 
-import _chalk from "chalk";
-const chalk = _chalk as unknown as typeof import("chalk-BABEL_8_BREAKING-true");
-type Chalk =
-  typeof import("chalk-BABEL_8_BREAKING-true").Instance extends new () => infer R
-    ? R
-    : never;
+import chalk, { Chalk as ChalkClass, type ChalkInstance as Chalk } from "chalk";
 
 /**
  * Names that are always allowed as identifiers, but also appear as keywords
@@ -253,14 +248,14 @@ type Options = {
  * Whether the code should be highlighted given the passed options.
  */
 export function shouldHighlight(options: Options): boolean {
-  return !!chalk.supportsColor || options.forceColor;
+  return chalk.level > 0 || options.forceColor;
 }
 
 let chalkWithForcedColor: Chalk = undefined;
 function getChalk(forceColor: boolean) {
   if (forceColor) {
     chalkWithForcedColor ??= process.env.BABEL_8_BREAKING
-      ? new chalk.Instance({ level: 1 })
+      ? new ChalkClass({ level: 1 })
       : // @ts-expect-error .Instance was .constructor in chalk 2
         new chalk.constructor({ enabled: true, level: 1 });
     return chalkWithForcedColor;

packages/babel-highlight/test/index.js

@@ -15,20 +15,16 @@ const describeBabel7NoESM =
 describe("@babel/highlight", function () {
   function stubColorSupport(supported) {
     let originalChalkLevel;
-    let originalChalkSupportsColor;
     let originalChalkEnabled;
 
     beforeEach(function () {
-      originalChalkSupportsColor = chalk.supportsColor;
       originalChalkLevel = chalk.level;
       originalChalkEnabled = chalk.enabled;
-      chalk.supportsColor = supported ? { level: 1 } : false;
       chalk.level = supported ? 1 : 0;
       chalk.enabled = supported;
     });
 
     afterEach(function () {
-      chalk.supportsColor = originalChalkSupportsColor;
       chalk.level = originalChalkLevel;
       chalk.enabled = originalChalkEnabled;
     });

test/esm/package.json

@@ -6,6 +6,6 @@
   "devDependencies": {
     "@babel/runtime": "workspace:^",
     "@babel/runtime-corejs3": "workspace:^",
-    "chalk": "^4.1.0"
+    "chalk": "^5.3.0"
   }
 }