feat: move to ESM

.babelrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [require.resolve('./devtools/babel.cjs')],
+};

.eslintrc.js → .eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     // parsing
     parser: '@babel/eslint-parser',
     parserOptions: {
-        ecmaVersion: 2018,
+        ecmaVersion: 2022,
         sourceType: 'module',
         ecmaFeatures: {
             jsx: true,
@@ -227,7 +227,7 @@ module.exports = {
     settings: {
         'import/resolver': {
             node: {
-                extensions: ['.mjs', '.csj', '.js', '.ts', '.tsx', '.json'],
+                extensions: ['.mjs', '.cjs', '.js', '.ts', '.tsx', '.json'],
             },
         },
     },

devtools/commands/build.js → devtools/commands/build.ts

@@ -1,8 +1,8 @@
-const path = require('path');
-const rimraf = require('rimraf');
-const webpack = require('webpack');
-const webpackConfigs = require('../webpack');
-const { rootDirname } = require('../webpack/variables');
+import path from 'path';
+import rimraf from 'rimraf';
+import webpack from 'webpack';
+import webpackConfigs from '../webpack';
+import { rootDirname } from '../webpack/variables';
 
 // empty build directory
 rimraf.sync(path.join(rootDirname, 'build'));
@@ -13,8 +13,8 @@ compiler.run((err, stats) => {
     if (err) {
         console.error(err.stack || err);
 
-        if (err.details) {
-            console.error(err.details);
+        if ((err as any).details) {
+            console.error((err as any).details);
         }
 
         process.exit(1);

devtools/commands/dev.ts

@@ -0,0 +1,7 @@
+import MainRunner from './devRuner';
+
+if (process.env.NODE_ENV !== 'test') {
+    process.env.NODE_ENV = 'development';
+}
+
+new MainRunner().start();

devtools/commands/devRuner/MigrationRunner.js → devtools/commands/devRuner/MigrationRunner.ts

@@ -1,6 +1,12 @@
-const Enquirer = require('enquirer');
+import Enquirer from 'enquirer';
 
 class MigrationRunner {
+    private enquirer: Enquirer<{ doExecute: boolean }>;
+
+    private migrationPromise: Promise<unknown> | null;
+
+    private latestPrompt: Enquirer.Prompt | null;
+
     constructor() {
         this.enquirer = new Enquirer();
         this.migrationPromise = null;
@@ -60,4 +66,4 @@ class MigrationRunner {
     }
 }
 
-module.exports = MigrationRunner;
+export default MigrationRunner;

devtools/commands/devRuner/ServerRunner.js → devtools/commands/devRuner/ServerRunner.ts

@@ -1,4 +1,4 @@
-const listen = require('test-listen');
+import listen from 'test-listen';
 
 class ServerRunner {
     constructor() {
@@ -58,4 +58,4 @@ class ServerRunner {
     }
 }
 
-module.exports = ServerRunner;
+export default ServerRunner;

devtools/commands/devRuner/WorkerRunner.js → devtools/commands/devRuner/WorkerRunner.ts

@@ -1,4 +1,6 @@
 class WorkerRunner {
+    private cleanUp: () => Promise<void> | null;
+
     constructor() {
         this.cleanUp = null;
     }
@@ -21,4 +23,4 @@ class WorkerRunner {
     }
 }
 
-module.exports = WorkerRunner;
+export default WorkerRunner;

devtools/commands/devRuner/index.js → devtools/commands/devRuner/index.ts

@@ -1,29 +1,53 @@
-const http = require('http');
-const path = require('path');
-const chalk = require('chalk');
-const express = require('express');
-const httpProxy = require('http-proxy');
-const { choosePort } = require('react-dev-utils/WebpackDevServerUtils');
-const clearConsole = require('react-dev-utils/clearConsole');
-const printBuildError = require('react-dev-utils/printBuildError');
-const rimraf = require('rimraf');
-const webpack = require('webpack');
-const devMiddleware = require('webpack-dev-middleware');
-const hotMiddleware = require('webpack-hot-middleware');
-const loadEnvConfig = require('../../env');
-const webpackConfigs = require('../../webpack');
-const { rootDirname } = require('../../webpack/variables');
-const MigrationRunner = require('./MigrationRunner');
-const ServerRunner = require('./ServerRunner');
-const WorkerRunner = require('./WorkerRunner');
+import http from 'http';
+import path from 'path';
+import chalk from 'chalk';
+import express from 'express';
+import httpProxy from 'http-proxy';
+import { choosePort } from 'react-dev-utils/WebpackDevServerUtils';
+import clearConsole from 'react-dev-utils/clearConsole';
+import printBuildError from 'react-dev-utils/printBuildError';
+import rimraf from 'rimraf';
+import webpack from 'webpack';
+import devMiddleware from 'webpack-dev-middleware';
+import hotMiddleware from 'webpack-hot-middleware';
+import loadEnvConfig from '../../env';
+import webpackConfigs from '../../webpack';
+import { rootDirname } from '../../webpack/variables';
+import MigrationRunner from './MigrationRunner';
+import ServerRunner from './ServerRunner';
+import WorkerRunner from './WorkerRunner';
 
 // resolve the path to get the entrypoint for the server once built
 const serverEntry = path.resolve('./build/server.js');
 
 // is it running in an interactive shell
 const isInteractive = process.stdout.isTTY;
 
+type Runner = ServerRunner | WorkerRunner | MigrationRunner;
+
 class MainRunner {
+    private serverRunner: ServerRunner;
+
+    private workerRunner: WorkerRunner;
+
+    private migrationRunner: MigrationRunner;
+
+    private runners: Runner[];
+
+    private latestRun: number;
+
+    private port: number | null;
+
+    private compiler: webpack.MultiCompiler;
+
+    private serverCompiler: webpack.Compiler;
+
+    private appCompiler: webpack.Compiler;
+
+    private appCompilerPromise: Promise<unknown> | null;
+
+    private appCompilerResolve: (value?: unknown) => void | null;
+
     constructor() {
         // create runner
         this.serverRunner = new ServerRunner();
@@ -111,7 +135,7 @@ class MainRunner {
                 }
 
                 // cleanup previous worker
-                await this.workerRunner.stop(isOutdated);
+                await this.workerRunner.stop();
 
                 // now we can get the latest version of our server
                 // eslint-disable-next-line global-require, import/no-unresolved, import/no-dynamic-require
@@ -187,4 +211,4 @@ class MainRunner {
     }
 }
 
-module.exports = MainRunner;
+export default MainRunner;

devtools/commands/extractTheme.js → devtools/commands/extractTheme.ts

@@ -1,8 +1,8 @@
-const fs = require('fs');
-const path = require('path');
-const less = require('less');
-const VariablesOutput = require('less-plugin-variables-output');
-const { srcDirname } = require('../webpack/variables');
+import fs from 'fs';
+import path from 'path';
+import less from 'less';
+import VariablesOutput from 'less-plugin-variables-output';
+import { srcDirname } from '../webpack/variables';
 
 const overrideLess = fs.readFileSync(path.join(srcDirname, 'app/antd.override.less'), 'utf8');
 

devtools/commands/lint-commits.js → devtools/commands/lint-commits.ts

@@ -1,5 +1,5 @@
-const { Octokit } = require('@octokit/rest');
-const execa = require('execa');
+import { Octokit } from '@octokit/rest';
+import { execa } from 'execa';
 
 const git = async (...args) => {
     const { stdout } = await execa('git', args);

devtools/env.js → devtools/env.ts

@@ -1,18 +1,19 @@
-const fs = require('fs');
-const path = require('path');
-const { parse } = require('dotenv');
-const { expand } = require('dotenv-expand');
+import fs from 'fs';
+import path from 'path';
+import { parse, DotenvParseOutput } from 'dotenv';
+import { DotenvExpandOutput, expand } from 'dotenv-expand';
 
-let combinedEnv;
-const cachedLoadedEnvFiles = [];
+let combinedEnv: DotenvParseOutput;
 
-const processEnv = (loadedEnvFiles, dir, verbose = true) => {
+const cachedLoadedEnvFiles: { path: string; contents: string }[] = [];
+
+const processEnv = (loadedEnvFiles, dir, verbose = true): DotenvParseOutput => {
     const origEnv = { ...process.env };
-    const parsed = {};
+    const parsed: DotenvParseOutput = {};
 
     for (const envFile of loadedEnvFiles) {
         try {
-            let result = {};
+            let result: DotenvExpandOutput = {};
 
             result.parsed = parse(envFile.contents);
             result = expand(result);
@@ -91,4 +92,4 @@ const loadEnvConfig = (dir, dev = false, verbose = true) => {
     return { combinedEnv, loadedEnvFiles: cachedLoadedEnvFiles };
 };
 
-module.exports = loadEnvConfig;
+export default loadEnvConfig;

devtools/releases/docker.js → devtools/releases/docker.cjs

@@ -1,6 +1,6 @@
 const { spawn } = require('child_process');
 const path = require('path');
-const { getReleaseName } = require('./sentry');
+const { getReleaseName } = require('./sentry.cjs');
 
 // compute paths
 const cwd = path.resolve(__dirname, '../../');

devtools/webpack/WebpackPackagePlugin.js → devtools/webpack/WebpackPackagePlugin.ts

@@ -1,9 +1,9 @@
-const fs = require('fs');
-const { builtinModules } = require('module');
-const path = require('path');
-const { parse, stringify } = require('@yarnpkg/lockfile');
-const { flow, map, groupBy, uniq } = require('lodash/fp');
-const { Compilation } = require('webpack');
+import fs from 'fs';
+import { builtinModules } from 'module';
+import path from 'path';
+import { parse, stringify } from '@yarnpkg/lockfile';
+import { flow, map, groupBy, uniq } from 'lodash/fp';
+import Webpack from 'webpack';
 
 const pluginName = 'WebpackPackagePlugin';
 
@@ -16,8 +16,17 @@ const getParentIdentifier = identifier => {
     return identifier.split('/')[0];
 };
 
+export type Options = {
+    name: string;
+    version?: string;
+    yarnFile: string;
+    additionalModules: string[];
+    scriptExecName: string;
+    scriptExecCmd: (compilation) => string;
+};
+
 // default options
-const defaultOptions = {
+const defaultOptions: Options = {
     name: process.env.npm_package_name,
     version: undefined,
     yarnFile: 'yarn.lock',
@@ -128,7 +137,11 @@ const processDependencies = (entries, rootDependencies) => {
 };
 
 class WebpackPackagePlugin {
-    constructor(options) {
+    private readonly options: Options;
+
+    private readonly yarnEntries: any;
+
+    constructor(options: Partial<Options>) {
         // merge default options and given options
         this.options = { ...defaultOptions, ...options };
 
@@ -150,7 +163,7 @@ class WebpackPackagePlugin {
 
         compiler.hooks.compilation.tap(pluginName, compilation => {
             compilation.hooks.processAssets.tap(
-                { name: pluginName, stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING },
+                { name: pluginName, stage: Webpack.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING },
                 assets => {
                     const externalPackages = [];
 
@@ -223,4 +236,4 @@ class WebpackPackagePlugin {
     }
 }
 
-module.exports = WebpackPackagePlugin;
+export default WebpackPackagePlugin;

devtools/webpack/babel.js → devtools/webpack/babel.ts

@@ -1,13 +1,16 @@
-const { isBuildIntentDevelopment } = require('./variables');
+import { RuleSetRule } from 'webpack';
+import { isBuildIntentDevelopment } from './variables';
 
-const getBabelRule = (isServer = false) => {
+const getBabelRule = (isServer = false): RuleSetRule => {
     const presetOptions = {
         isServer,
         hasReactRefresh: !isServer,
         hasJsxRuntime: true,
         development: isBuildIntentDevelopment,
     };
 
+    const useReactRefresh = isBuildIntentDevelopment && !isServer;
+
     return {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
@@ -17,13 +20,11 @@ const getBabelRule = (isServer = false) => {
                 options: {
                     babelrc: false,
                     presets: [[require.resolve('../babel'), presetOptions]],
-                    plugins: [isBuildIntentDevelopment && !isServer && require.resolve('react-refresh/babel')].filter(
-                        Boolean
-                    ),
+                    plugins: [useReactRefresh && require.resolve('react-refresh/babel')].filter(Boolean),
                 },
             },
         ],
     };
 };
 
-module.exports = getBabelRule;
+export default getBabelRule;