chore: use webpack watcher in watch mode (#14590)

package.json

@@ -29,7 +29,6 @@
     "babel-loader": "^9.0.0",
     "camelcase": "^6.2.0",
     "chalk": "^4.0.0",
-    "chokidar": "^3.3.0",
     "dedent": "^1.0.0",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^9.0.0",
@@ -118,7 +117,7 @@
     "typecheck:tests": "tsc -b packages/{babel-jest,babel-plugin-jest-hoist,create-jest,diff-sequences,expect,expect-utils,jest-circus,jest-cli,jest-config,jest-console,jest-snapshot,jest-util,jest-validate,jest-watcher,jest-worker,pretty-format}/**/__tests__",
     "verify-old-ts": "node ./scripts/verifyOldTs.mjs",
     "verify-pnp": "node ./scripts/verifyPnP.mjs",
-    "watch": "yarn build:js && node ./scripts/watch.mjs",
+    "watch": "node ./scripts/watch.mjs",
     "watch:ts": "yarn build:ts --watch"
   },
   "workspaces": [

scripts/build.mjs

@@ -10,18 +10,12 @@ import * as path from 'path';
 import util from 'util';
 import chalk from 'chalk';
 import fs from 'graceful-fs';
-import webpack from 'webpack';
-import {ERROR, OK, createWebpackConfigs} from './buildUtils.mjs';
+import {ERROR, OK, createWebpackCompiler} from './buildUtils.mjs';
 
 async function buildNodePackages() {
   process.stdout.write(chalk.inverse(' Bundling packages \n'));
 
-  const webpackConfigs = createWebpackConfigs();
-  const compiler = webpack(
-    webpackConfigs
-      .map(({webpackConfig}) => webpackConfig)
-      .filter(config => config != null),
-  );
+  const compiler = createWebpackCompiler();
 
   let stats;
   try {

scripts/buildUtils.mjs

@@ -146,7 +146,7 @@ export const copyrightSnippet = `
  */
 `.trim();
 
-export function createWebpackConfigs() {
+function createWebpackConfigs() {
   const packages = getPackages();
 
   return packages.map(({packageDir, pkg}) => {
@@ -292,6 +292,15 @@ export function createWebpackConfigs() {
   });
 }
 
+export function createWebpackCompiler() {
+  const webpackConfigs = createWebpackConfigs();
+  return webpack(
+    webpackConfigs
+      .map(({webpackConfig}) => webpackConfig)
+      .filter(config => config != null),
+  );
+}
+
 // inspired by https://framagit.org/Glandos/webpack-ignore-dynamic-require
 class IgnoreDynamicRequire {
   constructor(extraEntries) {

scripts/watch.mjs

@@ -9,75 +9,38 @@
  * Watch files for changes and rebuild (copy from 'src/' to `build/`) if changed
  */
 
-import {execSync} from 'child_process';
-import * as path from 'path';
-import {fileURLToPath} from 'url';
 import chalk from 'chalk';
-import chokidar from 'chokidar';
-import fs from 'graceful-fs';
-import {PACKAGES_DIR, getPackages} from './buildUtils.mjs';
+import {createWebpackCompiler} from './buildUtils.mjs';
 
-const BUILD_CMD = `node ${path.resolve(
-  path.dirname(fileURLToPath(import.meta.url)),
-  'build.mjs',
-)}`;
+const compiler = createWebpackCompiler();
 
-let filesToBuild = new Map();
+let hasBuilt = false;
 
-const exists = filename => {
-  try {
-    return fs.statSync(filename).isFile();
-  } catch {}
-  return false;
-};
-const rebuild = filename => filesToBuild.set(filename, true);
+console.log(chalk.cyan('Building packages…'));
 
-chokidar
-  .watch(
-    getPackages().map(p => path.resolve(p.packageDir, 'src')),
-    {
-      ignoreInitial: true,
-      ignored: /(^|[/\\])\../, // ignore dotfiles
-    },
-  )
-  .on('all', (event, filePath) => {
-    if (
-      (event === 'change' || event === 'rename' || event === 'add') &&
-      exists(filePath)
-    ) {
-      console.log(
-        chalk.green('->'),
-        `${event}: ${path.relative(PACKAGES_DIR, filePath)}`,
-      );
-      rebuild(filePath);
-    } else {
-      filePath.split(path.join(path.sep, 'src', path.sep));
-      const buildFile = filePath
-        .replace(
-          path.join(path.sep, 'src', path.sep),
-          path.join(path.sep, 'build', path.sep),
-        )
-        .replace(/\.ts$/, '.js');
-      try {
-        fs.unlinkSync(buildFile);
-        process.stdout.write(
-          `${chalk.red('  \u2022 ')}${path.relative(
-            PACKAGES_DIR,
-            buildFile,
-          )} (deleted)\n`,
-        );
-      } catch {}
-    }
-  });
+compiler.watch({}, (error, stats) => {
+  if (!hasBuilt) {
+    hasBuilt = true;
 
-setInterval(() => {
-  const files = Array.from(filesToBuild.keys());
-  if (files.length > 0) {
-    filesToBuild = new Map();
-    try {
-      execSync(`${BUILD_CMD} ${files.join(' ')}`, {stdio: [0, 1, 2]});
-    } catch {}
+    console.log(chalk.red('->'), chalk.cyan('Watching for changes…'));
   }
-}, 100);
 
-console.log(chalk.red('->'), chalk.cyan('Watching for changes...'));
+  if (error) {
+    console.error('Got error from watch mode', error);
+  }
+
+  if (stats) {
+    const info = stats.toJson();
+
+    if (stats.hasErrors() || stats.hasWarnings()) {
+      for (const error of info.errors) {
+        console.error('error', error.message);
+      }
+      for (const warning of info.warnings) {
+        console.warn('warning', warning.message);
+      }
+    } else {
+      console.log(chalk.red('->'), chalk.green('Rebuilt packages'));
+    }
+  }
+});

yarn.lock

@@ -2948,7 +2948,6 @@ __metadata:
     babel-loader: ^9.0.0
     camelcase: ^6.2.0
     chalk: ^4.0.0
-    chokidar: ^3.3.0
     dedent: ^1.0.0
     eslint: ^8.8.0
     eslint-config-prettier: ^9.0.0
@@ -7296,7 +7295,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.3.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
+"chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies: