[npm] Replace npm run watch with npm run build -- --watch.

When `devtools_bundle = false` we can use the fast rebuild for `.ts`
files as well (although this is unsound in case of `const enum`s), but
that was already the case with the `watch_build.js` script.

Also spit out a warning if using `--watch` and `devtools_bundle` isn't
set to `false` in the GN args.

Fixed: 411328609
Change-Id: I9d6f6b51be96b4af581e7c165045e9f0f47e7a0f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6688491
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: bmeurer

package.json

@@ -30,7 +30,7 @@
     "rdb": "rdb stream -new -realm chromium:public --",
     "start": "vpython3 third_party/node/node.py --output scripts/run_start.mjs",
     "webtest": "vpython3 third_party/node/node.py --output scripts/npm_test.js",
-    "watch": "vpython3 third_party/node/node.py --output scripts/watch_build.js",
+    "watch": "npm run build -- --watch",
     "test": "vpython3 third_party/node/node.py --output scripts/run_on_target.mjs gen/test/run.js"
   },
   "devDependencies": {

scripts/devtools_build.mjs

@@ -134,7 +134,7 @@ export class FeatureSet {
  *
  * @param {Error} error the `Error` from the failed `autoninja` invocation.
  * @param {string} outDir the absolute path to the `target` out directory.
- * @param {string} target the targe relative to `//out`.
+ * @param {string} target the target relative to `//out`.
  * @return {string} the human readable error message.
  */
 function buildErrorMessageForNinja(error, outDir, target) {
@@ -177,6 +177,7 @@ ${output}
   return `Failed to build \`${target}' in \`${outDir}' (${message.substring(0, message.indexOf('\n'))})`;
 }
 
+/** @enum */
 export const BuildStep = {
   GN: 'gn',
   AUTONINJA: 'autoninja',
@@ -186,7 +187,7 @@ export class BuildError extends Error {
   /**
    * Constructs a new `BuildError` with the given parameters.
    *
-   * @param {keyof BuildStep} step the build step that failed.
+   * @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.
@@ -211,8 +212,8 @@ export class BuildError extends Error {
  */
 
 /**
- * @param {string} target
- * @return {Promise<void>}
+ * @param {string} target the target relative to `//out`.
+ * @return {Promise<Map<string, string>>} the GN args for the `target`.
  */
 export async function prepareBuild(target) {
   const outDir = path.join(rootPath(), 'out', target);
@@ -229,6 +230,8 @@ export async function prepareBuild(target) {
       throw new BuildError(BuildStep.GN, {cause, outDir, target});
     }
   }
+
+  return await gnArgsForTarget(target);
 }
 
 /** @type Map<string, Promise<Map<string, string>>> */
@@ -279,7 +282,9 @@ function gnRefsForTarget(target, filename) {
 }
 
 async function computeBuildTargetsForFiles(target, filenames) {
-  if (filenames && filenames.length && filenames.every(filename => path.extname(filename) === '.css')) {
+  const SUPPORTED_EXTENSIONS = ['.css', '.ts'];
+  if (filenames && filenames.length &&
+      filenames.every(filename => SUPPORTED_EXTENSIONS.includes(path.extname(filename)))) {
     if (isInChromiumDirectory().isInChromium) {
       filenames = filenames.map(filename => path.join('third_party', 'devtools-frontend', 'src', filename));
     }
@@ -288,6 +293,11 @@ async function computeBuildTargetsForFiles(target, filenames) {
       try {
         const gnRefs = (await Promise.all(filenames.map(filename => gnRefsForTarget(target, filename)))).flat();
         if (gnRefs.length) {
+          // If there are any changes to TypeScript files, we need to also rebuild the
+          // `en-US.json`, as otherwise the changes to `UIStrings` aren't picked up.
+          if (filenames.some(filename => path.extname(filename) === '.ts')) {
+            gnRefs.push('collect_strings');
+          }
           return gnRefs;
         }
       } catch (error) {

scripts/run_build.mjs

@@ -45,7 +45,19 @@ const timeFormatter = new Intl.NumberFormat('en-US', {
 // Prepare the build target if not initialized.
 const spinner = ora('Preparing…').start();
 try {
-  await prepareBuild(target);
+  const gnArgs = await prepareBuild(target);
+  if (watch) {
+    if (gnArgs.get('devtools_bundle') !== 'false') {
+      spinner.info(
+          'Using watch mode with full rebuilds. Use `gn gen out/' + target +
+          ' --args="devtools_bundle=false"` to enable fast rebuilds.');
+    } else {
+      spinner.warn(
+          'Using watch mode with fast rebuilds (since `devtools_bundle=false`' +
+          ' for //out/' + target + '). Be aware that fast rebuilds are a best' +
+          ' effort and might not work reliably in all cases.');
+    }
+  }
   spinner.clear();
 } catch (error) {
   spinner.fail(error.message);