refactor(@angular-devkit/build-angular): remove custom Webpack Stats types

Webpack 5 contains improved types that we can leverage.

(cherry picked from commit cb9e51f)

Author: alan-agius4

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -65,8 +65,6 @@ import { normalizeExtraEntryPoints } from '../webpack/utils/helpers';
 import {
   BundleStats,
   ChunkType,
-  JsonChunkStats,
-  JsonCompilationStats,
   generateBundleStats,
   statsErrorsToString,
   statsHasErrors,
@@ -260,7 +258,7 @@ export function buildWebpackBrowser(
               emittedFiles = [],
               outputPath: webpackOutputPath,
             } = buildEvent;
-            const webpackRawStats = buildEvent.webpackStats as JsonCompilationStats;
+            const webpackRawStats = buildEvent.webpackStats;
             if (!webpackRawStats) {
               throw new Error('Webpack stats build result is required.');
             }
@@ -568,7 +566,7 @@ export function buildWebpackBrowser(
                   executor.stop();
                 }
                 for (const result of processResults) {
-                  const chunk = webpackStats.chunks?.find((chunk) => chunk.id.toString() === result.name);
+                  const chunk = webpackStats.chunks?.find((chunk) => chunk.id?.toString() === result.name);
 
                   if (result.original) {
                     bundleInfoStats.push(generateBundleInfoStats(result.original, chunk, 'modern'));
@@ -580,10 +578,10 @@ export function buildWebpackBrowser(
                 }
 
                 const unprocessedChunks = webpackStats.chunks?.filter((chunk) => !processResults
-                  .find((result) => chunk.id.toString() === result.name),
+                  .find((result) => chunk.id?.toString() === result.name),
                 ) || [];
                 for (const chunk of unprocessedChunks) {
-                  const asset = webpackStats.assets?.find(a => a.name === chunk.files[0]);
+                  const asset = webpackStats.assets?.find(a => a.name === chunk.files?.[0]);
                   bundleInfoStats.push(generateBundleStats({ ...chunk, size: asset?.size }));
                 }
               } else {
@@ -771,15 +769,15 @@ function assertNever(input: never): never {
 
 function generateBundleInfoStats(
   bundle: ProcessBundleFile,
-  chunk: JsonChunkStats | undefined,
+  chunk: webpack.StatsChunk | undefined,
   chunkType: ChunkType,
 ): BundleStats {
   return generateBundleStats(
     {
       size: bundle.size,
       files: bundle.map ? [bundle.filename, bundle.map.filename] : [bundle.filename],
       names: chunk?.names,
-      entry: !!chunk?.names.includes('runtime'),
+      entry: !!chunk?.names?.includes('runtime'),
       initial: !!chunk?.initial,
       rendered: true,
       chunkType,

packages/angular_devkit/build_angular/src/server/index.ts

@@ -28,7 +28,7 @@ import {
   getStylesConfig,
   getTypeScriptConfig,
 } from '../webpack/configs';
-import { JsonCompilationStats, webpackStatsLogger } from '../webpack/utils/stats';
+import { webpackStatsLogger } from '../webpack/utils/stats';
 import { Schema as ServerBuilderOptions } from './schema';
 
 /**
@@ -119,7 +119,7 @@ export function execute(
             );
           }
 
-          webpackStatsLogger(context.logger, webpackStats as JsonCompilationStats, config);
+          webpackStatsLogger(context.logger, webpackStats, config);
 
           return { ...output, success };
         }),

packages/angular_devkit/build_angular/src/utils/bundle-calculator.ts

@@ -6,14 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { basename } from 'path';
+import { StatsAsset, StatsChunk, StatsCompilation } from 'webpack';
 import { Budget, Type } from '../browser/schema';
 import { ProcessBundleFile, ProcessBundleResult } from '../utils/process-bundle';
-import {
-  JsonAssetStats,
-  JsonChunkStats,
-  JsonCompilationStats,
-  formatSize,
-} from '../webpack/utils/stats';
+import { formatSize } from '../webpack/utils/stats';
 
 interface Size {
   size: number;
@@ -108,7 +104,7 @@ export function* calculateThresholds(budget: Budget): IterableIterator<Threshold
  */
 function calculateSizes(
   budget: Budget,
-  stats: JsonCompilationStats,
+  stats: StatsCompilation,
   processResults: ProcessBundleResult[],
 ): Size[] {
   if (budget.type === Type.AnyComponentStyle) {
@@ -121,8 +117,8 @@ function calculateSizes(
   type CalculatorTypes = {
     new (
       budget: Budget,
-      chunks: JsonChunkStats[],
-      assets: JsonAssetStats[],
+      chunks: StatsChunk[],
+      assets: StatsAsset[],
       processResults: ProcessBundleResult[],
     ): Calculator;
   };
@@ -152,21 +148,21 @@ function calculateSizes(
 abstract class Calculator {
   constructor (
     protected budget: Budget,
-    protected chunks: JsonChunkStats[],
-    protected assets: JsonAssetStats[],
+    protected chunks: StatsChunk[],
+    protected assets: StatsAsset[],
     protected processResults: ProcessBundleResult[],
   ) {}
 
   abstract calculate(): Size[];
 
   /** Calculates the size of the given chunk for the provided build type. */
   protected calculateChunkSize(
-    chunk: JsonChunkStats,
+    chunk: StatsChunk,
     buildType: DifferentialBuildType,
   ): number {
     // Look for a process result containing different builds for this chunk.
     const processResult = this.processResults
-        .find((processResult) => processResult.name === chunk.id.toString());
+        .find((processResult) => processResult.name === chunk.id?.toString());
 
     if (processResult) {
       // Found a differential build, use the correct size information.
@@ -176,8 +172,11 @@ abstract class Calculator {
       return processResultFile && processResultFile.size || 0;
     } else {
       // No differential builds, get the chunk size by summing its assets.
-      return chunk.files
-          .filter(file => !file.endsWith('.map'))
+      if (!chunk.files) {
+        return 0;
+      }
+
+      return chunk.files.filter(file => !file.endsWith('.map'))
           .map(file => {
             const asset = this.assets.find((asset) => asset.name === file);
             if (!asset) {
@@ -190,7 +189,7 @@ abstract class Calculator {
     }
   }
 
-  protected getAssetSize(asset: JsonAssetStats): number {
+  protected getAssetSize(asset: StatsAsset): number {
     if (asset.name.endsWith('.js')) {
       const processResult = this.processResults
         .find((processResult) => processResult.original && basename(processResult.original.filename) === asset.name);
@@ -219,8 +218,9 @@ class BundleCalculator extends Calculator {
     // each then check afterwards if they are all the same.
     const buildSizes = Object.values(DifferentialBuildType).map((buildType) => {
       const size = this.chunks
-        .filter(chunk => chunk.names.includes(budgetName))
-        .map(chunk => this.calculateChunkSize(chunk, buildType))
+        .filter(chunk => chunk?.names?.includes(budgetName))
+        // tslint:disable-next-line: no-non-null-assertion
+        .map(chunk => this.calculateChunkSize(chunk!, buildType))
         .reduce((l, r) => l + r, 0);
 
       return { size, label: `bundle ${this.budget.name}-${buildTypeLabels[buildType]}` };
@@ -358,7 +358,7 @@ function calculateBytes(
 
 export function* checkBudgets(
   budgets: Budget[],
-  webpackStats: JsonCompilationStats,
+  webpackStats: StatsCompilation,
   processResults: ProcessBundleResult[],
 ): IterableIterator<{ severity: ThresholdSeverity, message: string }> {
   // Ignore AnyComponentStyle budgets as these are handled in `AnyComponentStyleBudgetChecker`.

packages/angular_devkit/build_angular/src/utils/bundle-calculator_spec.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import { StatsCompilation } from 'webpack';
 import { Budget, Type } from '../browser/schema';
 import { ThresholdSeverity, checkBudgets } from './bundle-calculator';
 import { ProcessBundleResult } from './process-bundle';
@@ -32,7 +33,7 @@ describe('bundle-calculator', () => {
             size: 0.5 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -60,7 +61,7 @@ describe('bundle-calculator', () => {
             size: 0.5 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -95,7 +96,7 @@ describe('bundle-calculator', () => {
             size: 0.75 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -121,7 +122,8 @@ describe('bundle-calculator', () => {
           },
         ],
         assets: [],
-      };
+      } as unknown as StatsCompilation;
+
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -164,7 +166,7 @@ describe('bundle-calculator', () => {
           },
         ],
         assets: [],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -211,7 +213,7 @@ describe('bundle-calculator', () => {
             size: 0.75 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -237,7 +239,7 @@ describe('bundle-calculator', () => {
           },
         ],
         assets: [],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -281,7 +283,7 @@ describe('bundle-calculator', () => {
           },
         ],
         assets: [],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -332,7 +334,7 @@ describe('bundle-calculator', () => {
             size: 1.5 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -367,7 +369,7 @@ describe('bundle-calculator', () => {
             size: 0.75 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -402,7 +404,7 @@ describe('bundle-calculator', () => {
             size: 0.5 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -433,7 +435,7 @@ describe('bundle-calculator', () => {
             size: 0.5 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -468,7 +470,7 @@ describe('bundle-calculator', () => {
             size: 0.5 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
 
       const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
 
@@ -499,7 +501,7 @@ describe('bundle-calculator', () => {
             size: 1.25 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -542,7 +544,7 @@ describe('bundle-calculator', () => {
             size: 1.25 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -585,7 +587,7 @@ describe('bundle-calculator', () => {
             size: 1.25 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',
@@ -628,7 +630,7 @@ describe('bundle-calculator', () => {
             size: 1.25 * KB,
           },
         ],
-      };
+      } as unknown as StatsCompilation;
       const processResults: ProcessBundleResult[] = [
         {
           name: '0',

packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts

@@ -9,10 +9,8 @@ import { Compilation, WebpackError } from 'webpack';
 
 export function addWarning(compilation: Compilation, message: string): void {
   compilation.warnings.push(new WebpackError(message));
-
 }
 
 export function addError(compilation: Compilation, message: string): void {
   compilation.errors.push(new WebpackError(message));
-
 }