refactor: remove @types/webpack

alan-agius4 · clydin · commit dee6b7948996 · 2021-04-12T10:02:07.000-04:00
diff --git a/etc/api/angular_devkit/build_optimizer/src/_golden-api.d.ts b/etc/api/angular_devkit/build_optimizer/src/_golden-api.d.ts
@@ -3,7 +3,7 @@ export declare function buildOptimizer(options: BuildOptimizerOptions): Transfor
 export declare const buildOptimizerLoaderPath: string;
 
 export declare class BuildOptimizerWebpackPlugin {
-    apply(compiler: Compiler | WebpackFourCompiler): void;
+    apply(compiler: Compiler): void;
 }
 
 export default function buildOptimizerLoader(this: {
diff --git a/package.json b/package.json
@@ -120,7 +120,6 @@
     "@types/semver": "^7.0.0",
     "@types/text-table": "^0.2.1",
     "@types/uuid": "^8.0.0",
-    "@types/webpack": "^4.41.22",
     "@types/webpack-dev-server": "^3.1.7",
     "@types/webpack-sources": "^2.0.0",
     "@yarnpkg/lockfile": "1.1.0",
diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/packages/angular_devkit/build_angular/BUILD.bazel
@@ -134,7 +134,6 @@ ts_library(
         "@npm//@types/rimraf",
         "@npm//@types/semver",
         "@npm//@types/text-table",
-        "@npm//@types/webpack",
         "@npm//@types/webpack-dev-server",
         "@npm//@types/webpack-sources",
         "@npm//ajv",
@@ -215,7 +214,6 @@ ts_library(
         ":build_angular",
         "//packages/angular_devkit/architect/testing",
         "//packages/angular_devkit/core",
-        "@npm//@types/webpack",
         "@npm//typescript",
         "@npm//webpack",
     ],
diff --git a/packages/angular_devkit/build_angular/src/extract-i18n/ivy-extract-loader.ts b/packages/angular_devkit/build_angular/src/extract-i18n/ivy-extract-loader.ts
@@ -14,7 +14,8 @@ interface LocalizeExtractLoaderOptions {
 }
 
 export default function localizeExtractLoader(
-  this: import('webpack').loader.LoaderContext,
+  // tslint:disable-next-line: no-any
+  this: any,
   content: string,
   // Source map types are broken in the webpack type definitions
   // tslint:disable-next-line: no-any
diff --git a/packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts b/packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts
@@ -4,17 +4,15 @@
  *
  * 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 * as webpack from 'webpack';
+*/
+import { Compilation, WebpackError } from 'webpack';
 
-const WebpackError = require('webpack/lib/WebpackError');
-
-export function addWarning(compilation: webpack.compilation.Compilation, message: string): void {
+export function addWarning(compilation: Compilation, message: string): void {
   compilation.warnings.push(new WebpackError(message));
 
 }
 
-export function addError(compilation: webpack.compilation.Compilation, message: string): void {
+export function addError(compilation: Compilation, message: string): void {
   compilation.errors.push(new WebpackError(message));
 
 }
diff --git a/packages/angular_devkit/build_angular/src/webpack.d.ts b/packages/angular_devkit/build_angular/src/webpack.d.ts
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -142,7 +142,8 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
 
   const { supportedBrowsers } = new BuildBrowserFeatures(wco.projectRoot);
   const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean | undefined) => {
-    return (loader: webpack.loader.LoaderContext) => ({
+    // tslint:disable-next-line: no-any
+    return (loader: any) => ({
       map: inlineSourcemaps
         ? {
             inline: true,
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-loader.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-loader.ts
@@ -12,7 +12,8 @@ export const HmrLoader = __filename;
 const hmrAcceptPath = join(__dirname, './hmr-accept.js').replace(/\\/g, '/');
 
 export default function (
-  this: import('webpack').loader.LoaderContext,
+  // tslint:disable-next-line: no-any
+  this: any,
   content: string,
   // Source map types are broken in the webpack type definitions
   // tslint:disable-next-line: no-any
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts
@@ -32,7 +32,8 @@ export interface PostcssCliResourcesOptions {
   /** CSS is extracted to a `.css` or is embedded in a `.js` file. */
   extracted?: boolean;
   filename: (resourcePath: string) => string;
-  loader: webpack.loader.LoaderContext;
+  // tslint:disable-next-line: no-any
+  loader: any;
   emitFile: boolean;
 }
 
@@ -92,7 +93,7 @@ export default function(options?: PostcssCliResourcesOptions): Plugin {
 
     const { pathname, hash, search } = url.parse(inputUrl.replace(/\\/g, '/'));
     const resolver = (file: string, base: string) => new Promise<string>((resolve, reject) => {
-      loader.resolve(base, decodeURI(file), (err, result) => {
+      loader.resolve(base, decodeURI(file), (err: Error, result: string) => {
         if (err) {
           reject(err);
 
@@ -113,7 +114,7 @@ export default function(options?: PostcssCliResourcesOptions): Plugin {
         }
 
         let outputPath = interpolateName(
-          {  resourcePath: result } as webpack.loader.LoaderContext,
+          {  resourcePath: result },
           filename(result),
           { content, context: loader.context || loader.rootContext },
         )
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/scripts-webpack-plugin.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/scripts-webpack-plugin.ts
@@ -5,20 +5,18 @@
  * 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
  */
-// tslint:disable
-// TODO: cleanup this file, it's copied as is from Angular CLI.
 
-import { Compiler, loader } from 'webpack';
-import { CachedSource, ConcatSource, OriginalSource, RawSource, Source } from 'webpack-sources';
 import { interpolateName } from 'loader-utils';
 import * as path from 'path';
+import { Compilation, Compiler } from 'webpack';
+import { CachedSource, ConcatSource, OriginalSource, RawSource, Source } from 'webpack-sources';
 
 const Chunk = require('webpack/lib/Chunk');
 const EntryPoint = require('webpack/lib/Entrypoint');
 
 export interface ScriptsWebpackPluginOptions {
   name: string;
-  sourceMap: boolean;
+  sourceMap?: boolean;
   scripts: string[];
   filename: string;
   basePath: string;
@@ -29,7 +27,7 @@ interface ScriptOutput {
   source: CachedSource;
 }
 
-function addDependencies(compilation: any, scripts: string[]): void {
+function addDependencies(compilation: Compilation, scripts: string[]): void {
   for (const script of scripts) {
     compilation.fileDependencies.add(script);
   }
@@ -38,37 +36,40 @@ export class ScriptsWebpackPlugin {
   private _lastBuildTime?: number;
   private _cachedOutput?: ScriptOutput;
 
-  constructor(private options: Partial<ScriptsWebpackPluginOptions> = {}) { }
+  constructor(private options: ScriptsWebpackPluginOptions) { }
 
-  async shouldSkip(compilation: any, scripts: string[]): Promise<boolean> {
+  // tslint:disable-next-line: no-any
+  async shouldSkip(compilation: Compilation, scripts: string[]): Promise<boolean> {
     if (this._lastBuildTime == undefined) {
       this._lastBuildTime = Date.now();
+
       return false;
     }
 
     for (const script of scripts) {
       const scriptTime = await new Promise<number | undefined>((resolve, reject) => {
-        compilation.fileSystemInfo.getFileTimestamp(script, (error: unknown, entry: any) => {
+        compilation.fileSystemInfo.getFileTimestamp(script, (error, entry) => {
           if (error) {
             reject(error);
 
             return;
           }
 
-          resolve(typeof entry !== 'string' ? entry.safeTime : undefined)
-        })
-      })
+          resolve((entry && typeof entry !== 'string') ? entry.safeTime : undefined);
+        });
+      });
 
       if (!scriptTime || scriptTime > this._lastBuildTime) {
         this._lastBuildTime = Date.now();
+
         return false;
       }
     }
 
     return true;
   }
 
-  private _insertOutput(compilation: any, { filename, source }: ScriptOutput, cached = false) {
+  private _insertOutput(compilation: Compilation, { filename, source }: ScriptOutput, cached = false) {
     const chunk = new Chunk(this.options.name);
     chunk.rendered = !cached;
     chunk.id = this.options.name;
@@ -81,7 +82,8 @@ export class ScriptsWebpackPlugin {
     compilation.entrypoints.set(this.options.name, entrypoint);
     compilation.chunks.add(chunk);
 
-    compilation.assets[filename] = source;
+    // tslint:disable-next-line: no-any
+    compilation.assets[filename] = source as any;
     compilation.hooks.chunkAsset.call(chunk, filename);
   }
 
@@ -111,6 +113,7 @@ export class ScriptsWebpackPlugin {
               compilation.inputFileSystem.readFile(fullPath, (err?: Error, data?: string | Buffer) => {
                 if (err) {
                   reject(err);
+
                   return;
                 }
 
@@ -143,7 +146,7 @@ export class ScriptsWebpackPlugin {
 
           const combinedSource = new CachedSource(concatSource);
           const filename = interpolateName(
-            { resourcePath: 'scripts.js' } as loader.LoaderContext,
+            { resourcePath: 'scripts.js' },
             this.options.filename as string,
             { content: combinedSource.source() },
           );
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/single-test-transform.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/single-test-transform.ts
@@ -8,7 +8,6 @@
 import { logging, tags } from '@angular-devkit/core';
 import { getOptions } from 'loader-utils';
 import { extname } from 'path';
-import { loader } from 'webpack';
 
 export interface SingleTestTransformLoaderOptions {
   /* list of paths relative to the entry-point */
@@ -31,7 +30,8 @@ export const SingleTestTransformLoader = __filename;
  * Then it adds import statements for each file in the files options
  * array to import them directly, and thus run the tests there.
  */
-export default function loader(this: loader.LoaderContext, source: string): string {
+// tslint:disable-next-line: no-any
+export default function loader(this: any, source: string): string {
   const { files = [], logger = console } = getOptions(this) as SingleTestTransformLoaderOptions;
   // signal the user that expected content is not present.
   if (!source.includes('require.context(')) {
diff --git a/packages/angular_devkit/build_optimizer/BUILD.bazel b/packages/angular_devkit/build_optimizer/BUILD.bazel
@@ -40,6 +40,7 @@ ts_library(
         "@npm//source-map",
         "@npm//tslib",
         "@npm//typescript",
+        "@npm//webpack",
     ],
 )
 
diff --git a/packages/angular_devkit/build_optimizer/package.json b/packages/angular_devkit/build_optimizer/package.json
@@ -16,15 +16,14 @@
     "webpack-sources": "2.2.0"
   },
   "peerDependencies": {
-    "webpack": "^4.0.0 || ^5.30.0"
+    "webpack": "^5.30.0"
   },
   "peerDependenciesMeta": {
     "webpack": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@types/webpack": "^4.41.22",
     "webpack": "5.30.0"
   }
 }
diff --git a/packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-plugin.ts b/packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-plugin.ts
@@ -5,19 +5,18 @@
  * 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 { Compiler, WebpackFourCompiler } from 'webpack';
+import type { Compiler, Module } from 'webpack';
 
 interface ModuleData {
-  resourceResolveData: { descriptionFileData?: { typings?: string } };
+  resourceResolveData?: { descriptionFileData?: { typings?: string } };
 }
 
 export class BuildOptimizerWebpackPlugin {
-  apply(compiler: Compiler | WebpackFourCompiler) {
-    (compiler as Compiler).hooks.normalModuleFactory.tap('BuildOptimizerWebpackPlugin', nmf => {
+  apply(compiler: Compiler) {
+    compiler.hooks.normalModuleFactory.tap('BuildOptimizerWebpackPlugin', nmf => {
       // tslint:disable-next-line: no-any
-      nmf.hooks.module.tap('BuildOptimizerWebpackPlugin', (module, data) => {
-        const { descriptionFileData } = (data as ModuleData).resourceResolveData;
-        if (descriptionFileData) {
+      nmf.hooks.module.tap('BuildOptimizerWebpackPlugin', (module: Module, data: ModuleData) => {
+        if (data.resourceResolveData?.descriptionFileData) {
           // Only TS packages should use Build Optimizer.
           // Notes:
           // - a TS package might not have defined typings but still use .d.ts files next to their
@@ -26,7 +25,7 @@ export class BuildOptimizerWebpackPlugin {
           // provide configuration options to the plugin to cover that case if there's demand.
           // - a JS-only package that also happens to provides typings will also be flagged by this
           // check. Not sure there's a good way to skip those.
-          const skipBuildOptimizer = !descriptionFileData.typings;
+          const skipBuildOptimizer = !data.resourceResolveData.descriptionFileData.typings;
           module.factoryMeta = { ...module.factoryMeta, skipBuildOptimizer };
         }
 
diff --git a/packages/angular_devkit/build_optimizer/src/webpack.d.ts b/packages/angular_devkit/build_optimizer/src/webpack.d.ts
diff --git a/packages/angular_devkit/build_webpack/BUILD.bazel b/packages/angular_devkit/build_webpack/BUILD.bazel
@@ -49,7 +49,6 @@ ts_library(
     deps = [
         "//packages/angular_devkit/architect",
         "@npm//@types/node",
-        "@npm//@types/webpack",
         "@npm//@types/webpack-dev-server",
         "@npm//rxjs",
         "@npm//webpack",
diff --git a/packages/angular_devkit/build_webpack/src/utils.ts b/packages/angular_devkit/build_webpack/src/utils.ts
@@ -18,7 +18,7 @@ export interface EmittedFiles {
   extension: string;
 }
 
-export function getEmittedFiles(compilation: webpack.compilation.Compilation): EmittedFiles[] {
+export function getEmittedFiles(compilation: webpack.Compilation): EmittedFiles[] {
   const files: EmittedFiles[] = [];
 
   // adds all chunks to the list of emitted files such as lazy loaded modules
diff --git a/packages/ngtools/webpack/BUILD.bazel b/packages/ngtools/webpack/BUILD.bazel
@@ -37,7 +37,6 @@ ts_library(
     deps = [
         "@npm//@angular/compiler-cli",
         "@npm//@types/node",
-        "@npm//@types/webpack",
         "@npm//@types/webpack-sources",
         "@npm//enhanced-resolve",
         "@npm//typescript",
diff --git a/packages/ngtools/webpack/src/ivy/diagnostics.ts b/packages/ngtools/webpack/src/ivy/diagnostics.ts
@@ -7,12 +7,13 @@
  */
 import { Diagnostics, formatDiagnostics } from '@angular/compiler-cli';
 import { DiagnosticCategory } from 'typescript';
+import { Compilation } from 'webpack';
 import { addError, addWarning } from '../webpack-diagnostics';
 
 export type DiagnosticsReporter = (diagnostics: Diagnostics) => void;
 
 export function createDiagnosticsReporter(
-  compilation: import('webpack').compilation.Compilation,
+  compilation: Compilation,
 ): DiagnosticsReporter {
   return (diagnostics) => {
     for (const diagnostic of diagnostics) {
diff --git a/packages/ngtools/webpack/src/ivy/loader.ts b/packages/ngtools/webpack/src/ivy/loader.ts
@@ -9,7 +9,8 @@ import * as path from 'path';
 import { AngularPluginSymbol, FileEmitterCollection } from './symbol';
 
 export function angularWebpackLoader(
-  this: import('webpack').loader.LoaderContext,
+  // tslint:disable-next-line: no-any
+  this: any,
   content: string,
   // Source map types are broken in the webpack type definitions
   // tslint:disable-next-line: no-any
diff --git a/packages/ngtools/webpack/src/ivy/plugin.ts b/packages/ngtools/webpack/src/ivy/plugin.ts
diff --git a/packages/ngtools/webpack/src/ivy/system.ts b/packages/ngtools/webpack/src/ivy/system.ts
diff --git a/packages/ngtools/webpack/src/ngcc_processor.ts b/packages/ngtools/webpack/src/ngcc_processor.ts
diff --git a/packages/ngtools/webpack/src/resource_loader.ts b/packages/ngtools/webpack/src/resource_loader.ts
diff --git a/packages/ngtools/webpack/src/webpack-diagnostics.ts b/packages/ngtools/webpack/src/webpack-diagnostics.ts
diff --git a/packages/ngtools/webpack/src/webpack.d.ts b/packages/ngtools/webpack/src/webpack.d.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ export declare function buildOptimizer(options: BuildOptimizerOptions): Transfor`
`3`	`3`	`export declare const buildOptimizerLoaderPath: string;`
`4`	`4`
`5`	`5`	`export declare class BuildOptimizerWebpackPlugin {`
`6`		`- apply(compiler: Compiler \| WebpackFourCompiler): void;`
	`6`	`+ apply(compiler: Compiler): void;`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export default function buildOptimizerLoader(this: {`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@ interface LocalizeExtractLoaderOptions {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`export default function localizeExtractLoader(`
`17`		`- this: import('webpack').loader.LoaderContext,`
	`17`	`+ // tslint:disable-next-line: no-any`
	`18`	`+ this: any,`
`18`	`19`	`content: string,`
`19`	`20`	`// Source map types are broken in the webpack type definitions`
`20`	`21`	`// tslint:disable-next-line: no-any`
Original file line number	Diff line number	Diff line change
`@@ -4,17 +4,15 @@`
`4`	`4`	`*`
`5`	`5`	`* Use of this source code is governed by an MIT-style license that can be`
`6`	`6`	`* found in the LICENSE file at https://angular.io/license`
`7`		`- */`
`8`		`-import * as webpack from 'webpack';`
	`7`	`+*/`
	`8`	`+import { Compilation, WebpackError } from 'webpack';`
`9`	`9`
`10`		`-const WebpackError = require('webpack/lib/WebpackError');`
`11`		`-`
`12`		`-export function addWarning(compilation: webpack.compilation.Compilation, message: string): void {`
	`10`	`+export function addWarning(compilation: Compilation, message: string): void {`
`13`	`11`	`compilation.warnings.push(new WebpackError(message));`
`14`	`12`
`15`	`13`	`}`
`16`	`14`
`17`		`-export function addError(compilation: webpack.compilation.Compilation, message: string): void {`
	`15`	`+export function addError(compilation: Compilation, message: string): void {`
`18`	`16`	`compilation.errors.push(new WebpackError(message));`
`19`	`17`
`20`	`18`	`}`