feat(@angular-devkit/build-angular): implement progress option for es…

…build builder

When using the esbuild-based browser application builder, the `progress` option which
is enabled by default will now show an activity spinner when building/rebuilding.

packages/angular_devkit/build_angular/src/builders/browser-esbuild/experimental-warnings.ts

@@ -11,7 +11,6 @@ import { Schema as BrowserBuilderOptions } from '../browser/schema';
 
 const UNSUPPORTED_OPTIONS: Array<keyof BrowserBuilderOptions> = [
  'budgets',
- 'progress',
 
  // * i18n support
  'localize',

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -19,6 +19,7 @@ import { transformSupportedBrowsersToTargets } from '../../utils/esbuild-targets
 import { FileInfo } from '../../utils/index-file/augment-index-html';
 import { IndexHtmlGenerator } from '../../utils/index-file/index-html-generator';
 import { augmentAppWithServiceWorkerEsbuild } from '../../utils/service-worker';
+import { Spinner } from '../../utils/spinner';
 import { getSupportedBrowsers } from '../../utils/supported-browsers';
 import { BundleStats, generateBuildStatsTable } from '../../webpack/utils/stats';
 import { checkCommonJSModules } from './commonjs-checker';
@@ -575,6 +576,21 @@ function createGlobalStylesBundleOptions(
  return buildOptions;
 }
 
+async function withSpinner<T>(text: string, action: () => T | Promise<T>): Promise<T> {
+ const spinner = new Spinner(text);
+ spinner.start();
+
+ try {
+ return await action();
+ } finally {
+ spinner.stop();
+ }
+}
+
+async function withNoProgress<T>(test: string, action: () => T | Promise<T>): Promise<T> {
+ return action();
+}
+
 /**
  * Main execution function for the esbuild-based application builder.
  * The options are compatible with the Webpack-based builder.
@@ -626,10 +642,14 @@ export async function* buildEsbuildBrowser(
  }
  }
 
+ const withProgress: typeof withSpinner = normalizedOptions.progress
+ ? withSpinner
+ : withNoProgress;
+
  // Initial build
  let result: ExecutionResult;
  try {
- result = await execute(normalizedOptions, context);
+ result = await withProgress('Building...', () => execute(normalizedOptions, context));
 
  if (shouldWriteResult) {
  // Write output files
@@ -653,7 +673,9 @@ export async function* buildEsbuildBrowser(
  }
  }
 
- context.logger.info('Watch mode enabled. Watching for file changes...');
+ if (normalizedOptions.progress) {
+ context.logger.info('Watch mode enabled. Watching for file changes...');
+ }
 
  // Setup a watcher
  const watcher = createWatcher({
@@ -675,13 +697,13 @@ export async function* buildEsbuildBrowser(
  // Wait for changes and rebuild as needed
  try {
  for await (const changes of watcher) {
- context.logger.info('Changes detected. Rebuilding...');
-
  if (userOptions.verbose) {
  context.logger.info(changes.toDebugString());
  }
 
- result = await execute(normalizedOptions, context, result.createRebuildState(changes));
+ result = await withProgress('Changes detected. Rebuilding...', () =>
+ execute(normalizedOptions, context, result.createRebuildState(changes)),
+ );
 
  if (shouldWriteResult) {
  // Write output files

packages/angular_devkit/build_angular/src/builders/browser-esbuild/options.ts

@@ -160,6 +160,7 @@ export async function normalizeOptions(
  subresourceIntegrity,
  verbose,
  watch,
+ progress,
  } = options;
 
  // Return all the normalized options
@@ -176,6 +177,7 @@ export async function normalizeOptions(
  stats: !!statsJson,
  polyfills: polyfills === undefined || Array.isArray(polyfills) ? polyfills : [polyfills],
  poll,
+ progress: progress ?? true,
  // If not explicitly set, default to the Node.js process argument
  preserveSymlinks: preserveSymlinks ?? process.execArgv.includes('--preserve-symlinks'),
  stylePreprocessorOptions,