Skip to content

Commit 40dc44b

Browse files
clydinclydin
committed
refactor(@angular-devkit/build-angular): remove usage of Webpack Stats.ToJsonOutput type
The `Stats.ToJsonOutput` type is not present in the Webpack 5 typings. There was also a large amount of forced typing in the code to successfully compile. Minimal Webpack JSON stat types are now used that represent the fields used by the tooling.
1 parent b105ed6 commit 40dc44b

File tree

6 files changed

+105
-43
lines changed

6 files changed

+105
-43
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ import { normalizeExtraEntryPoints } from '../webpack/utils/helpers';
6666
import {
6767
BundleStats,
6868
ChunkType,
69+
JsonChunkStats,
6970
generateBundleStats,
7071
statsErrorsToString,
7172
statsHasErrors,
@@ -781,10 +782,9 @@ function assertNever(input: never): never {
781782
throw new Error(`Unexpected call to assertNever() with input: ${JSON.stringify(input, null /* replacer */, 4 /* tabSize */)}`);
782783
}
783784

784-
type ArrayElement<A> = A extends ReadonlyArray<infer T> ? T : never;
785785
function generateBundleInfoStats(
786786
bundle: ProcessBundleFile,
787-
chunk: ArrayElement<webpack.Stats.ToJsonOutput['chunks']> | undefined,
787+
chunk: JsonChunkStats | undefined,
788788
chunkType: ChunkType,
789789
): BundleStats {
790790
return generateBundleStats(

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,14 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import { basename } from 'path';
9-
import * as webpack from 'webpack';
109
import { Budget, Type } from '../browser/schema';
1110
import { ProcessBundleFile, ProcessBundleResult } from '../utils/process-bundle';
12-
import { formatSize } from '../webpack/utils/stats';
11+
import {
12+
JsonAssetStats,
13+
JsonChunkStats,
14+
JsonCompilationStats,
15+
formatSize,
16+
} from '../webpack/utils/stats';
1317

1418
interface Size {
1519
size: number;
@@ -105,7 +109,7 @@ export function* calculateThresholds(budget: Budget): IterableIterator<Threshold
105109
*/
106110
function calculateSizes(
107111
budget: Budget,
108-
stats: webpack.Stats.ToJsonOutput,
112+
stats: JsonCompilationStats,
109113
processResults: ProcessBundleResult[],
110114
): Size[] {
111115
if (budget.type === Type.AnyComponentStyle) {
@@ -115,7 +119,14 @@ function calculateSizes(
115119
}
116120

117121
type NonComponentStyleBudgetTypes = Exclude<Budget['type'], Type.AnyComponentStyle>;
118-
type CalculatorTypes = { new(budget: Budget, chunks: Chunk[], assets: Asset[], processResults: ProcessBundleResult[]): Calculator };
122+
type CalculatorTypes = {
123+
new (
124+
budget: Budget,
125+
chunks: JsonChunkStats[],
126+
assets: JsonAssetStats[],
127+
processResults: ProcessBundleResult[],
128+
): Calculator;
129+
};
119130
const calculatorMap: Record<NonComponentStyleBudgetTypes, CalculatorTypes> = {
120131
all: AllCalculator,
121132
allScript: AllScriptCalculator,
@@ -139,22 +150,19 @@ function calculateSizes(
139150
return calculator.calculate();
140151
}
141152

142-
type ArrayElement<T> = T extends Array<infer U> ? U : never;
143-
type Chunk = ArrayElement<Exclude<webpack.Stats.ToJsonOutput['chunks'], undefined>>;
144-
type Asset = ArrayElement<Exclude<webpack.Stats.ToJsonOutput['assets'], undefined>>;
145153
abstract class Calculator {
146154
constructor (
147155
protected budget: Budget,
148-
protected chunks: Chunk[],
149-
protected assets: Asset[],
156+
protected chunks: JsonChunkStats[],
157+
protected assets: JsonAssetStats[],
150158
protected processResults: ProcessBundleResult[],
151159
) {}
152160

153161
abstract calculate(): Size[];
154162

155163
/** Calculates the size of the given chunk for the provided build type. */
156164
protected calculateChunkSize(
157-
chunk: Chunk,
165+
chunk: JsonChunkStats,
158166
buildType: DifferentialBuildType,
159167
): number {
160168
// Look for a process result containing different builds for this chunk.
@@ -183,7 +191,7 @@ abstract class Calculator {
183191
}
184192
}
185193

186-
protected getAssetSize(asset: Asset): number {
194+
protected getAssetSize(asset: JsonAssetStats): number {
187195
if (asset.name.endsWith('.js')) {
188196
const processResult = this.processResults
189197
.find((processResult) => processResult.original && basename(processResult.original.filename) === asset.name);
@@ -348,7 +356,7 @@ function calculateBytes(
348356

349357
export function* checkBudgets(
350358
budgets: Budget[],
351-
webpackStats: webpack.Stats.ToJsonOutput,
359+
webpackStats: JsonCompilationStats,
352360
processResults: ProcessBundleResult[],
353361
): IterableIterator<{ severity: ThresholdSeverity, message: string }> {
354362
// Ignore AnyComponentStyle budgets as these are handled in `AnyComponentStyleBudgetChecker`.

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

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import * as webpack from 'webpack';
98
import { Budget, Type } from '../browser/schema';
109
import { ThresholdSeverity, checkBudgets } from './bundle-calculator';
1110
import { ProcessBundleResult } from './process-bundle';
@@ -33,7 +32,7 @@ describe('bundle-calculator', () => {
3332
size: 0.5 * KB,
3433
},
3534
],
36-
} as unknown as webpack.Stats.ToJsonOutput;
35+
};
3736

3837
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
3938

@@ -61,7 +60,7 @@ describe('bundle-calculator', () => {
6160
size: 0.5 * KB,
6261
},
6362
],
64-
} as unknown as webpack.Stats.ToJsonOutput;
63+
};
6564

6665
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
6766

@@ -81,6 +80,7 @@ describe('bundle-calculator', () => {
8180
const stats = {
8281
chunks: [
8382
{
83+
id: 0,
8484
names: [ 'foo' ],
8585
files: [ 'foo.js', 'bar.js' ],
8686
},
@@ -95,7 +95,7 @@ describe('bundle-calculator', () => {
9595
size: 0.75 * KB,
9696
},
9797
],
98-
} as unknown as webpack.Stats.ToJsonOutput;
98+
};
9999

100100
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
101101

@@ -121,7 +121,7 @@ describe('bundle-calculator', () => {
121121
},
122122
],
123123
assets: [],
124-
} as unknown as webpack.Stats.ToJsonOutput;
124+
};
125125
const processResults: ProcessBundleResult[] = [
126126
{
127127
name: '0',
@@ -164,7 +164,7 @@ describe('bundle-calculator', () => {
164164
},
165165
],
166166
assets: [],
167-
} as unknown as webpack.Stats.ToJsonOutput;
167+
};
168168
const processResults: ProcessBundleResult[] = [
169169
{
170170
name: '0',
@@ -195,7 +195,9 @@ describe('bundle-calculator', () => {
195195
const stats = {
196196
chunks: [
197197
{
198+
id: 0,
198199
initial: true,
200+
names: [ 'foo' ],
199201
files: [ 'foo.js', 'bar.js' ],
200202
},
201203
],
@@ -209,7 +211,7 @@ describe('bundle-calculator', () => {
209211
size: 0.75 * KB,
210212
},
211213
],
212-
} as unknown as webpack.Stats.ToJsonOutput;
214+
};
213215

214216
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
215217

@@ -230,11 +232,12 @@ describe('bundle-calculator', () => {
230232
{
231233
id: 0,
232234
initial: true,
235+
names: [ 'foo' ],
233236
files: [ 'foo.js', 'bar.js' ],
234237
},
235238
],
236239
assets: [],
237-
} as unknown as webpack.Stats.ToJsonOutput;
240+
};
238241
const processResults: ProcessBundleResult[] = [
239242
{
240243
name: '0',
@@ -273,11 +276,12 @@ describe('bundle-calculator', () => {
273276
{
274277
id: 0,
275278
initial: true,
279+
names: [ 'foo' ],
276280
files: [ 'foo.js', 'bar.js' ],
277281
},
278282
],
279283
assets: [],
280-
} as unknown as webpack.Stats.ToJsonOutput;
284+
};
281285
const processResults: ProcessBundleResult[] = [
282286
{
283287
name: '0',
@@ -308,7 +312,9 @@ describe('bundle-calculator', () => {
308312
const stats = {
309313
chunks: [
310314
{
315+
id: 0,
311316
initial: true,
317+
names: [ 'foo' ],
312318
files: [ 'foo.js', 'bar.js' ],
313319
},
314320
],
@@ -326,7 +332,7 @@ describe('bundle-calculator', () => {
326332
size: 1.5 * KB,
327333
},
328334
],
329-
} as unknown as webpack.Stats.ToJsonOutput;
335+
};
330336

331337
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
332338

@@ -345,7 +351,9 @@ describe('bundle-calculator', () => {
345351
const stats = {
346352
chunks: [
347353
{
354+
id: 0,
348355
initial: true,
356+
names: [ 'foo' ],
349357
files: [ 'foo.js', 'bar.css' ],
350358
},
351359
],
@@ -359,7 +367,7 @@ describe('bundle-calculator', () => {
359367
size: 0.75 * KB,
360368
},
361369
],
362-
} as unknown as webpack.Stats.ToJsonOutput;
370+
};
363371

364372
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
365373

@@ -378,7 +386,9 @@ describe('bundle-calculator', () => {
378386
const stats = {
379387
chunks: [
380388
{
389+
id: 0,
381390
initial: true,
391+
names: [ 'foo' ],
382392
files: [ 'foo.css', 'bar.js' ],
383393
},
384394
],
@@ -392,7 +402,7 @@ describe('bundle-calculator', () => {
392402
size: 0.5 * KB,
393403
},
394404
],
395-
} as unknown as webpack.Stats.ToJsonOutput;
405+
};
396406

397407
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
398408

@@ -407,7 +417,9 @@ describe('bundle-calculator', () => {
407417
const stats = {
408418
chunks: [
409419
{
420+
id: 0,
410421
initial: true,
422+
names: [ 'foo' ],
411423
files: [ 'foo.js', 'bar.js' ],
412424
},
413425
],
@@ -421,7 +433,7 @@ describe('bundle-calculator', () => {
421433
size: 0.5 * KB,
422434
},
423435
],
424-
} as unknown as webpack.Stats.ToJsonOutput;
436+
};
425437

426438
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
427439

@@ -440,7 +452,9 @@ describe('bundle-calculator', () => {
440452
const stats = {
441453
chunks: [
442454
{
455+
id: 0,
443456
initial: true,
457+
names: [ 'foo' ],
444458
files: [ 'foo.ext', 'bar.ext' ],
445459
},
446460
],
@@ -454,7 +468,7 @@ describe('bundle-calculator', () => {
454468
size: 0.5 * KB,
455469
},
456470
],
457-
} as unknown as webpack.Stats.ToJsonOutput;
471+
};
458472

459473
const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));
460474

@@ -473,7 +487,9 @@ describe('bundle-calculator', () => {
473487
const stats = {
474488
chunks: [
475489
{
490+
id: 0,
476491
initial: true,
492+
names: [ 'foo' ],
477493
files: [ 'foo.js' ],
478494
},
479495
],
@@ -483,7 +499,7 @@ describe('bundle-calculator', () => {
483499
size: 1.25 * KB,
484500
},
485501
],
486-
} as unknown as webpack.Stats.ToJsonOutput;
502+
};
487503
const processResults: ProcessBundleResult[] = [
488504
{
489505
name: '0',
@@ -514,7 +530,9 @@ describe('bundle-calculator', () => {
514530
const stats = {
515531
chunks: [
516532
{
533+
id: 0,
517534
initial: true,
535+
names: [ 'foo' ],
518536
files: [ 'foo.js' ],
519537
},
520538
],
@@ -524,7 +542,7 @@ describe('bundle-calculator', () => {
524542
size: 1.25 * KB,
525543
},
526544
],
527-
} as unknown as webpack.Stats.ToJsonOutput;
545+
};
528546
const processResults: ProcessBundleResult[] = [
529547
{
530548
name: '0',
@@ -555,7 +573,9 @@ describe('bundle-calculator', () => {
555573
const stats = {
556574
chunks: [
557575
{
576+
id: 0,
558577
initial: true,
578+
names: [ 'foo' ],
559579
files: [ 'foo.js' ],
560580
},
561581
],
@@ -565,7 +585,7 @@ describe('bundle-calculator', () => {
565585
size: 1.25 * KB,
566586
},
567587
],
568-
} as unknown as webpack.Stats.ToJsonOutput;
588+
};
569589
const processResults: ProcessBundleResult[] = [
570590
{
571591
name: '0',
@@ -596,7 +616,9 @@ describe('bundle-calculator', () => {
596616
const stats = {
597617
chunks: [
598618
{
619+
id: 0,
599620
initial: true,
621+
names: [ 'foo' ],
600622
files: [ 'foo.js' ],
601623
},
602624
],
@@ -606,7 +628,7 @@ describe('bundle-calculator', () => {
606628
size: 1.25 * KB,
607629
},
608630
],
609-
} as unknown as webpack.Stats.ToJsonOutput;
631+
};
610632
const processResults: ProcessBundleResult[] = [
611633
{
612634
name: '0',

0 commit comments

Comments
 (0)