[npm] Allow to abort builds.

When there's a new change detected, there's no point in finishing the
previous build (when using the watch mode).

Bug: 393063467
Change-Id: I09a2bfc2d24aa02d8f07fb4141f73a6097d12569
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6429846
Reviewed-by: Nikolay Vitkov <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: bmeurer

scripts/devtools_build.mjs

@@ -2,6 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import childProcess from 'node:child_process';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import {performance} from 'node:perf_hooks';
+import util from 'node:util';
+
+import {autoninjaExecutablePath, gnExecutablePath, rootPath} from './devtools_paths.js';
+
+const execFile = util.promisify(childProcess.execFile);
+
 /**
  * Representation of the feature set that is configured for Chrome. This
  * keeps track of enabled and disabled features and generates the correct
@@ -107,3 +117,83 @@ export class FeatureSet {
     return features;
   }
 }
+
+export const BuildStep = {
+  GN: 'gn-gen',
+  AUTONINJA: 'autoninja',
+};
+
+export class BuildError extends Error {
+  /**
+   * Constructs a new `BuildError` with the given parameters.
+   *
+   * @param {BuildStep} step the build step that failed.
+   * @param {Object} options additional options for the `BuildError`.
+   * @param {Error} options.cause the actual cause for the build error.
+   * @param {string} options.outDir the absolute path to the `target` out directory.
+   * @param {string} options.target the target relative to `//out`.
+   */
+  constructor(step, options) {
+    const {cause, outDir, target} = options;
+    super(`Failed to build target ${target} in ${outDir}`, {cause});
+    this.name = 'BuildError';
+    this.step = step;
+    this.target = target;
+    this.outDir = outDir;
+  }
+
+  toString() {
+    const {stdout} = this.cause;
+    return stdout;
+  }
+}
+
+/**
+ * @typedef BuildResult
+ * @type {object}
+ * @property {number} time - wall clock time (in seconds) for the build.
+ */
+
+/**
+ * @param {string} target
+ * @param {AbortSignal=} signal
+ * @return {Promise<BuildResult>} a `BuildResult` with statistics for the build.
+ */
+export async function build(target, signal) {
+  const startTime = performance.now();
+  const outDir = path.join(rootPath(), 'out', target);
+
+  // Prepare the build directory first.
+  const outDirStat = await fs.stat(outDir).catch(() => null);
+  if (!outDirStat?.isDirectory()) {
+    // Use GN to (optionally create and) initialize the |outDir|.
+    try {
+      const gnExe = gnExecutablePath();
+      const gnArgs = ['-q', 'gen', outDir];
+      await execFile(gnExe, gnArgs, {signal});
+    } catch (cause) {
+      if (cause.name === 'AbortError') {
+        throw cause;
+      }
+      throw new BuildError(BuildStep.GN, {cause, outDir, target});
+    }
+  }
+
+  // Build just the devtools-frontend resources in |outDir|. This is important
+  // since we might be running in a full Chromium checkout and certainly don't
+  // want to build all of Chromium first.
+  try {
+    const autoninjaExe = autoninjaExecutablePath();
+    const autoninjaArgs = ['-C', outDir, '--quiet', 'devtools_all_files'];
+    await execFile(autoninjaExe, autoninjaArgs, {signal});
+  } catch (cause) {
+    if (cause.name === 'AbortError') {
+      throw cause;
+    }
+    throw new BuildError(BuildStep.AUTONINJA, {cause, outDir, target});
+  }
+
+  // Report the build result.
+  const time = (performance.now() - startTime) / 1000;
+  return {time};
+}

scripts/devtools_paths.js

@@ -127,6 +127,14 @@ function nodeModulesPath() {
   return path.join(devtoolsRootPath(), 'node_modules');
 }
 
+function autoninjaExecutablePath() {
+  return path.join(thirdPartyPath(), 'depot_tools', 'autoninja');
+}
+
+function gnExecutablePath() {
+  return path.join(thirdPartyPath(), 'depot_tools', 'gn');
+}
+
 function stylelintExecutablePath() {
   return path.join(nodeModulesPath(), 'stylelint', 'bin', 'stylelint.js');
 }
@@ -164,9 +172,11 @@ function downloadedChromeBinaryPath() {
 }
 
 module.exports = {
+  autoninjaExecutablePath,
   devtoolsRootPath,
   downloadedChromeBinaryPath,
   isInChromiumDirectory,
+  gnExecutablePath,
   litAnalyzerExecutablePath,
   mochaExecutablePath,
   nodeModulesPath,

scripts/run_build.mjs

@@ -2,13 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import childProcess from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 import yargs from 'yargs';
 import {hideBin} from 'yargs/helpers';
 
-import {rootPath} from './devtools_paths.js';
+import {build} from './devtools_build.mjs';
 
 const argv = yargs(hideBin(process.argv))
                  .option('target', {
@@ -35,50 +34,61 @@ const argv = yargs(hideBin(process.argv))
                  .parseSync();
 
 const {target, watch, skipInitialBuild} = argv;
-const cwd = process.cwd();
-const {env} = process;
-
-// Create and initialize the `out/<target>` directory as needed.
-const outDir = path.join(rootPath(), 'out', target);
-if (!fs.existsSync(outDir)) {
-  const gnExe = path.join(cwd, 'third_party', 'depot_tools', 'gn');
-  fs.mkdirSync(outDir, {recursive: true});
-  childProcess.spawnSync(gnExe, ['-q', 'gen', outDir], {
-    cwd,
-    env,
-    stdio: 'inherit',
-  });
-  console.log(`Initialized output directory ${outDir}`);
-}
-
-function build() {
-  const autoninjaExe = path.join(cwd, 'third_party', 'depot_tools', 'autoninja');
-  childProcess.spawnSync(autoninjaExe, ['-C', outDir, 'devtools_all_files'], {
-    cwd,
-    env,
-    stdio: 'inherit',
-  });
-}
+const timeFormatter = new Intl.NumberFormat('en-US', {
+  style: 'unit',
+  unit: 'second',
+  unitDisplay: 'narrow',
+  maximumFractionDigits: 2,
+});
 
 // Perform an initial build (unless we should skip).
 if (!skipInitialBuild) {
-  build();
+  console.log('Building…');
+  try {
+    const {time} = await build(target);
+    console.log(`Build ready (${timeFormatter.format(time)})`);
+  } catch (error) {
+    console.log(error.toString());
+    process.exit(1);
+  }
 }
 
 if (watch) {
   let timeoutId = -1;
+  let buildPromise = Promise.resolve();
+  let abortController = new AbortController();
 
   function watchCallback(eventType, filename) {
     if (eventType !== 'change') {
       return;
     }
-    if (['BUILD.gn'].includes(filename) || ['.css', '.js', '.ts'].includes(path.extname(filename))) {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(build, 250);
+    if (!/^(BUILD\.gn)|(.*\.(css|js|ts))$/.test(filename)) {
+      return;
     }
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(watchRebuild, 250);
+  }
+
+  function watchRebuild() {
+    // Abort any currently running build.
+    abortController.abort();
+    abortController = new AbortController();
+    const {signal} = abortController;
+
+    buildPromise = buildPromise.then(async () => {
+      try {
+        console.log('Rebuilding...');
+        const {time} = await build(target, signal);
+        console.log(`Rebuild successfully (${timeFormatter.format(time)})`);
+      } catch (error) {
+        if (error.name !== 'AbortError') {
+          console.log(error.toString());
+        }
+      }
+    });
   }
 
-  const WATCHLIST = ['front_end', 'inspector_overlay', 'test'];
+  const WATCHLIST = ['front_end', 'test'];
   for (const dirname of WATCHLIST) {
     fs.watch(
         dirname,