Use native ESM for dev scripts (#12296)

Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

.codesandbox/ci.json

@@ -1,5 +1,6 @@
 {
   "buildCommand": "codesandbox:build",
   "sandboxes": ["7s08o", "vhm64"],
-  "packages": ["packages/*"]
+  "packages": ["packages/*"],
+  "node": "14"
 }

.eslintrc.js → .eslintrc.cjs

@@ -87,5 +87,20 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ["packages/babel-traverse/scripts/**/*.js"],
+      rules: {
+        "import/no-extraneous-dependencies": [
+          "error",
+          { packageDir: "./packages/babel-traverse" },
+        ],
+      },
+    },
+    {
+      files: ["scripts/**/*.js"],
+      rules: {
+        "import/no-extraneous-dependencies": ["error", { packageDir: "." }],
+      },
+    },
   ],
 };

.github/workflows/ci.yml

@@ -65,8 +65,9 @@ jobs:
     name: Build Babel Artifacts
     needs: prepare-yarn-cache
     runs-on: ubuntu-latest
-    env:
-      YARN_NODE_LINKER: pnp # use pnp linker for better linking performance and stricter checks
+    # Yarn PnP does not support native ESM yet (https://github.com/yarnpkg/berry/issues/638)
+    # env:
+    #    YARN_NODE_LINKER: pnp # use pnp linker for better linking performance and stricter checks
     steps:
       - name: Checkout code
         uses: actions/checkout@v2

Gulpfile.js → Gulpfile.mjs

@@ -1,26 +1,33 @@
-"use strict";
-
-const plumber = require("gulp-plumber");
-const through = require("through2");
-const chalk = require("chalk");
-const newer = require("gulp-newer");
-const babel = require("gulp-babel");
-const camelCase = require("lodash/camelCase");
-const fancyLog = require("fancy-log");
-const filter = require("gulp-filter");
-const gulp = require("gulp");
-const path = require("path");
-const fs = require("fs");
-const rollup = require("rollup");
-const rollupBabel = require("@rollup/plugin-babel").default;
-const rollupBabelSource = require("./scripts/rollup-plugin-babel-source");
-const rollupCommonJs = require("@rollup/plugin-commonjs");
-const rollupJson = require("@rollup/plugin-json");
-const rollupNodePolyfills = require("rollup-plugin-node-polyfills");
-const rollupNodeResolve = require("@rollup/plugin-node-resolve").default;
-const rollupReplace = require("@rollup/plugin-replace");
-const { terser: rollupTerser } = require("rollup-plugin-terser");
-const { default: rollupDts } = require("rollup-plugin-dts");
+import path from "path";
+import fs from "fs";
+import { createRequire } from "module";
+import { fileURLToPath } from "url";
+
+import plumber from "gulp-plumber";
+import through from "through2";
+import chalk from "chalk";
+import newer from "gulp-newer";
+import babel from "gulp-babel";
+import camelCase from "lodash/camelCase.js";
+import fancyLog from "fancy-log";
+import filter from "gulp-filter";
+import gulp from "gulp";
+import { rollup } from "rollup";
+import { babel as rollupBabel } from "@rollup/plugin-babel";
+import rollupCommonJs from "@rollup/plugin-commonjs";
+import rollupJson from "@rollup/plugin-json";
+import rollupNodePolyfills from "rollup-plugin-node-polyfills";
+import rollupNodeResolve from "@rollup/plugin-node-resolve";
+import rollupReplace from "@rollup/plugin-replace";
+import { terser as rollupTerser } from "rollup-plugin-terser";
+import _rollupDts from "rollup-plugin-dts";
+const { default: rollupDts } = _rollupDts;
+
+import rollupBabelSource from "./scripts/rollup-plugin-babel-source.js";
+import formatCode from "./scripts/utils/formatCode.js";
+
+const require = createRequire(import.meta.url);
+const monorepoRoot = path.dirname(fileURLToPath(import.meta.url));
 
 const defaultPackagesGlob = "./@(codemods|packages|eslint)/*";
 const defaultSourcesGlob = `${defaultPackagesGlob}/src/**/{*.js,!(*.d).ts}`;
@@ -92,15 +99,16 @@ function rename(fn) {
  * @param {string} message
  */
 function generateHelpers(generator, dest, filename, message) {
-  const formatCode = require("./scripts/utils/formatCode");
   const stream = gulp
-    .src(".", { base: __dirname })
+    .src(".", { base: monorepoRoot })
     .pipe(errorsLogger())
     .pipe(
-      through.obj(function (file, enc, callback) {
+      through.obj(async (file, enc, callback) => {
+        const { default: generateCode } = await import(generator);
+
         file.path = filename;
         file.contents = Buffer.from(
-          formatCode(require(generator)(filename), dest + file.path)
+          formatCode(generateCode(filename), dest + file.path)
         );
         fancyLog(`${chalk.green("✔")} Generated ${message}`);
         callback(null, file);
@@ -119,7 +127,7 @@ function generateHelpers(generator, dest, filename, message) {
  */
 async function generateTypeHelpers(helperKind, filename = "index.ts") {
   return generateHelpers(
-    `./packages/babel-types/scripts/generators/${helperKind}`,
+    `./packages/babel-types/scripts/generators/${helperKind}.js`,
     `./packages/babel-types/src/${helperKind}/generated/`,
     filename,
     `@babel/types -> ${helperKind}`
@@ -133,7 +141,7 @@ async function generateTypeHelpers(helperKind, filename = "index.ts") {
  */
 async function generateTraverseHelpers(helperKind) {
   return generateHelpers(
-    `./packages/babel-traverse/scripts/generators/${helperKind}`,
+    `./packages/babel-traverse/scripts/generators/${helperKind}.js`,
     `./packages/babel-traverse/src/path/generated/`,
     `${helperKind}.ts`,
     `@babel/traverse -> ${helperKind}`
@@ -142,9 +150,8 @@ async function generateTraverseHelpers(helperKind) {
 
 function generateStandalone() {
   const dest = "./packages/babel-standalone/src/generated/";
-  const formatCode = require("./scripts/utils/formatCode");
   return gulp
-    .src(babelStandalonePluginConfigGlob, { base: __dirname })
+    .src(babelStandalonePluginConfigGlob, { base: monorepoRoot })
     .pipe(
       through.obj((file, enc, callback) => {
         fancyLog("Generating @babel/standalone files");
@@ -190,7 +197,7 @@ function finish(stream) {
 }
 
 function getFiles(glob, { include, exclude }) {
-  let stream = gulp.src(glob, { base: __dirname });
+  let stream = gulp.src(glob, { base: monorepoRoot });
 
   if (exclude) {
     const filters = exclude.map(p => `!**/${p}/**`);
@@ -206,7 +213,7 @@ function getFiles(glob, { include, exclude }) {
 }
 
 function buildBabel(exclude) {
-  const base = __dirname;
+  const base = monorepoRoot;
 
   return getFiles(defaultSourcesGlob, {
     exclude: exclude && exclude.map(p => p.src),
@@ -259,7 +266,7 @@ function buildRollup(packages, targetBrowsers) {
       }
       const input = getIndexFromPackage(src);
       fancyLog(`Compiling '${chalk.cyan(input)}' with rollup ...`);
-      const bundle = await rollup.rollup({
+      const bundle = await rollup({
         input,
         external,
         onwarn(warning, warn) {
@@ -352,7 +359,7 @@ function buildRollupDts(packages) {
     packages.map(async packageName => {
       const input = `${packageName}/lib/index.d.ts`;
       fancyLog(`Bundling '${chalk.cyan(input)}' with rollup ...`);
-      const bundle = await rollup.rollup({
+      const bundle = await rollup({
         input,
         plugins: [rollupDts()],
       });
@@ -378,7 +385,7 @@ function removeDts(exclude) {
 function copyDts(packages) {
   return getFiles(`${defaultPackagesGlob}/src/**/*.d.ts`, { include: packages })
     .pipe(rename(file => path.resolve(file.base, mapSrcToLib(file.relative))))
-    .pipe(gulp.dest(__dirname));
+    .pipe(gulp.dest(monorepoRoot));
 }
 
 const libBundles = [

Makefile

@@ -87,12 +87,12 @@ check-compat-data-ci:
 	$(MAKE) check-compat-data
 
 lint:
-	BABEL_ENV=test $(YARN) eslint scripts $(SOURCES) '*.{js,ts}' --format=codeframe --ext .js,.cjs,.mjs,.ts
+	BABEL_ENV=test $(YARN) eslint scripts $(SOURCES) '*.{js,cjs,mjs,ts}' --format=codeframe --ext .js,.cjs,.mjs,.ts
 
 fix: fix-json fix-js
 
 fix-js:
-	$(YARN) eslint scripts $(SOURCES) '*.{js,ts}' --format=codeframe --ext .js,.cjs,.mjs,.ts --fix
+	$(YARN) eslint scripts $(SOURCES) '*.{js,cjs,mjs,ts}' --format=codeframe --ext .js,.cjs,.mjs,.ts --fix
 
 fix-json:
 	$(YARN) prettier "{$(COMMA_SEPARATED_SOURCES)}/*/test/fixtures/**/options.json" --write --loglevel warn

package.json

@@ -3,6 +3,7 @@
   "version": "7.12.12",
   "private": true,
   "license": "MIT",
+  "type": "commonjs",
   "scripts": {
     "bootstrap": "make bootstrap",
     "codesandbox:build": "make build-no-bundle",
@@ -11,7 +12,7 @@
     "lint": "make lint",
     "test": "make test",
     "version": "yarn --immutable-cache && git add yarn.lock",
-    "test:esm": "node test/esm/index.mjs"
+    "test:esm": "node test/esm/index.js"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.0",

packages/babel-traverse/scripts/generators/asserts.js

@@ -1,7 +1,6 @@
-"use strict";
-const t = require("@babel/types");
+import t from "@babel/types";
 
-module.exports = function generateAsserts() {
+export default function generateAsserts() {
   let output = `/*
  * This file is auto-generated! Do not modify it directly.
  * To re-generate run 'make build'
@@ -12,7 +11,7 @@ import NodePath from "../index";
 
 export interface NodePathAssetions {`;
 
-  for (const type of t.TYPES) {
+  for (const type of [...t.TYPES].sort()) {
     output += `
   assert${type}(
     opts?: object,
@@ -23,4 +22,4 @@ export interface NodePathAssetions {`;
 }`;
 
   return output;
-};
+}

packages/babel-traverse/scripts/generators/validators.js

@@ -1,11 +1,8 @@
-"use strict";
+import t from "@babel/types";
+import virtualTypes from "../../lib/path/lib/virtual-types.js";
+import definitions from "@babel/types/lib/definitions/index.js";
 
-const t = require("@babel/types");
-const virtualTypes = require("../../lib/path/lib/virtual-types");
-
-const definitions = require("@babel/types/lib/definitions");
-
-module.exports = function generateValidators() {
+export default function generateValidators() {
   let output = `/*
  * This file is auto-generated! Do not modify it directly.
  * To re-generate run 'make build'
@@ -16,7 +13,7 @@ import NodePath from "../index";
 export interface NodePathValidators {
 `;
 
-  for (const type of t.TYPES) {
+  for (const type of [...t.TYPES].sort()) {
     output += `is${type}(opts?: object): this is NodePath<t.${type}>;`;
   }
 
@@ -34,4 +31,4 @@ export interface NodePathValidators {
 `;
 
   return output;
-};
+}

packages/babel-traverse/scripts/generators/virtual-types.js

@@ -1,8 +1,6 @@
-"use strict";
+import virtualTypes from "../../lib/path/lib/virtual-types.js";
 
-const virtualTypes = require("../../lib/path/lib/virtual-types");
-
-module.exports = function generateValidators() {
+export default function generateValidators() {
   let output = `/*
  * This file is auto-generated! Do not modify it directly.
  * To re-generate run 'make build'
@@ -23,4 +21,4 @@ export interface VirtualTypeAliases {
 `;
 
   return output;
-};
+}

packages/babel-traverse/scripts/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

packages/babel-types/scripts/generators/asserts.js

@@ -1,5 +1,4 @@
-"use strict";
-const definitions = require("../../lib/definitions");
+import definitions from "../../lib/definitions/index.js";
 
 function addAssertHelper(type) {
   const result =
@@ -14,7 +13,7 @@ function addAssertHelper(type) {
   `;
 }
 
-module.exports = function generateAsserts() {
+export default function generateAsserts() {
   let output = `/*
  * This file is auto-generated! Do not modify it directly.
  * To re-generate run 'make build'
@@ -48,4 +47,4 @@ function assert(type: string, node: any, opts?: any): void {
   });
 
   return output;
-};
+}

packages/babel-types/scripts/generators/ast-types.js

@@ -1,9 +1,7 @@
-"use strict";
+import t from "../../lib/index.js";
+import stringifyValidator from "../utils/stringifyValidator.js";
 
-const t = require("../../");
-const stringifyValidator = require("../utils/stringifyValidator");
-
-module.exports = function generateAstTypes() {
+export default function generateAstTypes() {
   let code = `// NOTE: This file is autogenerated. Do not modify.
 // See packages/babel-types/scripts/generators/ast-types.js for script used.
 
@@ -118,7 +116,7 @@ export interface ${deprecatedAlias[type]} extends BaseNode {
   code += "}\n\n";
 
   return code;
-};
+}
 
 function hasDefault(field) {
   return field.default != null;

packages/babel-types/scripts/generators/builders.js

@@ -1,10 +1,8 @@
-"use strict";
-const definitions = require("../../lib/definitions");
-const formatBuilderName = require("../utils/formatBuilderName");
-const lowerFirst = require("../utils/lowerFirst");
-
-const t = require("../../");
-const stringifyValidator = require("../utils/stringifyValidator");
+import t from "../../lib/index.js";
+import definitions from "../../lib/definitions/index.js";
+import formatBuilderName from "../utils/formatBuilderName.js";
+import lowerFirst from "../utils/lowerFirst.js";
+import stringifyValidator from "../utils/stringifyValidator.js";
 
 function areAllRemainingFieldsNullable(fieldName, fieldNames, fields) {
   const index = fieldNames.indexOf(fieldName);
@@ -73,11 +71,11 @@ function generateBuilderArgs(type) {
   return args;
 }
 
-module.exports = function generateBuilders(kind) {
+export default function generateBuilders(kind) {
   return kind === "uppercase.js"
     ? generateUppercaseBuilders()
     : generateLowercaseBuilders();
-};
+}
 
 function generateLowercaseBuilders() {
   let output = `/*

packages/babel-types/scripts/generators/constants.js

@@ -1,7 +1,6 @@
-"use strict";
-const definitions = require("../../lib/definitions");
+import definitions from "../../lib/definitions/index.js";
 
-module.exports = function generateConstants() {
+export default function generateConstants() {
   let output = `/*
  * This file is auto-generated! Do not modify it directly.
  * To re-generate run 'make build'
@@ -13,4 +12,4 @@ import { FLIPPED_ALIAS_KEYS } from "../../definitions";\n\n`;
   });
 
   return output;
-};
+}