feat(@angular-devkit/build-angular): provide option to allow automatically cleaning the terminal screen during rebuilds

When setting `"clearScreen": true` to the appliction builder during rebuilds the terminimal screen will be cleaned.

```json
{
  "projects": {
    "my-app": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "clearScreen": true
          }
        }
      }
    }
  }
}
```

Closes #25699

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/application/build-action.ts

@@ -10,6 +10,7 @@ import { BuilderOutput } from '@angular-devkit/architect';
 import type { logging } from '@angular-devkit/core';
 import { existsSync } from 'node:fs';
 import path from 'node:path';
+import { clearScreenDown, cursorTo } from 'node:readline';
 import { BuildOutputFile } from '../../tools/esbuild/bundler-context';
 import { ExecutionResult, RebuildState } from '../../tools/esbuild/bundler-execution-result';
 import { shutdownSassWorkerPool } from '../../tools/esbuild/stylesheets/sass-language';
@@ -19,6 +20,20 @@ import { shouldWatchRoot } from '../../utils/environment-options';
 import { NormalizedCachedOptions } from '../../utils/normalize-cache';
 import { NormalizedOutputOptions } from './options';
 
+// Watch workspace for package manager changes
+const packageWatchFiles = [
+  // manifest can affect module resolution
+  'package.json',
+  // npm lock file
+  'package-lock.json',
+  // pnpm lock file
+  'pnpm-lock.yaml',
+  // yarn lock file including Yarn PnP manifest files (https://yarnpkg.com/advanced/pnp-spec/)
+  'yarn.lock',
+  '.pnp.cjs',
+  '.pnp.data.json',
+];
+
 export async function* runEsBuildBuildAction(
   action: (rebuildState?: RebuildState) => ExecutionResult | Promise<ExecutionResult>,
   options: {
@@ -36,13 +51,15 @@ export async function* runEsBuildBuildAction(
     poll?: number;
     signal?: AbortSignal;
     preserveSymlinks?: boolean;
+    clearScreen?: boolean;
   },
 ): AsyncIterable<(ExecutionResult['outputWithFiles'] | ExecutionResult['output']) & BuilderOutput> {
   const {
     writeToFileSystemFilter,
     writeToFileSystem,
     watch,
     poll,
+    clearScreen,
     logger,
     deleteOutputPath,
     cacheOptions,
@@ -113,20 +130,6 @@ export async function* runEsBuildBuildAction(
       watcher.add(projectRoot);
     }
 
-    // Watch workspace for package manager changes
-    const packageWatchFiles = [
-      // manifest can affect module resolution
-      'package.json',
-      // npm lock file
-      'package-lock.json',
-      // pnpm lock file
-      'pnpm-lock.yaml',
-      // yarn lock file including Yarn PnP manifest files (https://yarnpkg.com/advanced/pnp-spec/)
-      'yarn.lock',
-      '.pnp.cjs',
-      '.pnp.data.json',
-    ];
-
     watcher.add(
       packageWatchFiles
         .map((file) => path.join(workspaceRoot, file))
@@ -164,6 +167,10 @@ export async function* runEsBuildBuildAction(
         break;
       }
 
+      if (clearScreen) {
+        clearTerminal();
+      }
+
       if (verbose) {
         logger.info(changes.toDebugString());
       }
@@ -212,3 +219,12 @@ export async function* runEsBuildBuildAction(
     shutdownSassWorkerPool();
   }
 }
+
+function clearTerminal(): void {
+  const rowCount = process.stdout.rows - 2;
+  const clean = rowCount > 0 ? '\n'.repeat(rowCount) : '';
+  // eslint-disable-next-line no-console
+  console.log(clean);
+  cursorTo(process.stdout, 0, 0);
+  clearScreenDown(process.stdout);
+}

packages/angular_devkit/build_angular/src/builders/application/index.ts

@@ -126,6 +126,7 @@ export async function* buildApplicationInternal(
       projectRoot: normalizedOptions.projectRoot,
       workspaceRoot: normalizedOptions.workspaceRoot,
       progress: normalizedOptions.progress,
+      clearScreen: normalizedOptions.clearScreen,
       writeToFileSystem,
       // For app-shell and SSG server files are not required by users.
       // Omit these when SSR is not enabled.

packages/angular_devkit/build_angular/src/builders/application/options.ts

@@ -294,6 +294,7 @@ export async function normalizeOptions(
     namedChunks,
     budgets,
     deployUrl,
+    clearScreen,
   } = options;
 
   // Return all the normalized options
@@ -348,6 +349,7 @@ export async function normalizeOptions(
     loaderExtensions,
     jsonLogs: useJSONBuildLogs,
     colors: colors.enabled,
+    clearScreen,
   };
 }
 

packages/angular_devkit/build_angular/src/builders/application/schema.json

@@ -133,6 +133,11 @@
       },
       "default": []
     },
+    "clearScreen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Automatically clearing the terminal screen during rebuilds."
+    },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "default": true,