refactor(@angular-devkit/build-angular): standardize builder transforms

Author: clydin

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

@@ -23,7 +23,7 @@ import {
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import * as fs from 'fs';
 import * as path from 'path';
-import { Observable, combineLatest, from, of, zip } from 'rxjs';
+import { from, of, zip } from 'rxjs';
 import { catchError, concatMap, map, switchMap } from 'rxjs/operators';
 import * as webpack from 'webpack';
 import { NgBuildAnalyticsPlugin } from '../../plugins/webpack/analytics';
@@ -44,6 +44,7 @@ import {
   statsToString,
   statsWarningsToString,
 } from '../angular-cli-files/utilities/stats';
+import { ExecutionTransformer } from '../transforms';
 import { deleteOutputDir } from '../utils';
 import { generateBrowserWebpackConfigFromContext } from '../utils/webpack-browser-config';
 import { Schema as BrowserBuilderSchema } from './schema';
@@ -77,7 +78,7 @@ export function createBrowserLoggingCallback(
 export async function buildBrowserWebpackConfigFromContext(
   options: BrowserBuilderSchema,
   context: BuilderContext,
-  host: virtualFs.Host<fs.Stats>,
+  host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
 ): Promise<{ workspace: experimental.workspace.Workspace, config: webpack.Configuration[] }> {
   return generateBrowserWebpackConfigFromContext(
     options,
@@ -126,53 +127,48 @@ function getCompilerConfig(wco: WebpackConfigOptions): webpack.Configuration {
   return {};
 }
 
-export type BrowserConfigTransformFn = (
-  workspace: experimental.workspace.Workspace,
-  config: webpack.Configuration,
-) => Observable<webpack.Configuration>;
+async function initialize(
+  options: BrowserBuilderSchema,
+  context: BuilderContext,
+  host: virtualFs.Host<fs.Stats>,
+  webpackConfigurationTransform?: ExecutionTransformer<webpack.Configuration>,
+): Promise<{ workspace: experimental.workspace.Workspace, config: webpack.Configuration[] }> {
+  const { config, workspace } = await buildBrowserWebpackConfigFromContext(options, context, host);
+
+  let transformedConfig;
+  if (webpackConfigurationTransform) {
+    transformedConfig = [];
+    for (const c of config) {
+      transformedConfig.push(await webpackConfigurationTransform(c));
+    }
+  }
+
+  if (options.deleteOutputPath) {
+    await deleteOutputDir(
+      normalize(context.workspaceRoot),
+      normalize(options.outputPath),
+      host,
+    ).toPromise();
+  }
 
+  return { config: transformedConfig || config, workspace };
+}
 
 export function buildWebpackBrowser(
   options: BrowserBuilderSchema,
   context: BuilderContext,
   transforms: {
-    config?: BrowserConfigTransformFn,
-    output?: (output: BrowserBuilderOutput) => Observable<BuilderOutput>,
+    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>,
     logging?: WebpackLoggingCallback,
   } = {},
 ) {
   const host = new NodeJsSyncHost();
   const root = normalize(context.workspaceRoot);
 
-  const configFn = transforms.config;
-  const outputFn = transforms.output;
   const loggingFn = transforms.logging
     || createBrowserLoggingCallback(!!options.verbose, context.logger);
 
-  // This makes a host observable into a cold one. This is because we want to wait until
-  // subscription before calling buildBrowserWebpackConfigFromContext, which can throw.
-  return of(null).pipe(
-    switchMap(() => from(buildBrowserWebpackConfigFromContext(options, context, host))),
-    switchMap(({ workspace, config }) => {
-      if (configFn) {
-        return combineLatest(config.map(config => configFn(workspace, config))).pipe(
-          map(config => ({ workspace, config })),
-        );
-      } else {
-        return of({ workspace, config });
-      }
-    }),
-    switchMap(({ workspace, config }) => {
-      if (options.deleteOutputPath) {
-        return deleteOutputDir(
-          root,
-          normalize(options.outputPath),
-          host,
-        ).pipe(map(() => ({ workspace, config })));
-      } else {
-        return of({ workspace, config });
-      }
-    }),
+  return from(initialize(options, context, host, transforms.webpackConfiguration)).pipe(
     switchMap(({ workspace, config: configs }) => {
       const projectName = context.target
         ? context.target.project : workspace.getDefaultProjectName();
@@ -237,11 +233,9 @@ export function buildWebpackBrowser(
           // If we use differential loading, both configs have the same outputs
           outputPath: path.resolve(context.workspaceRoot, options.outputPath),
         } as BrowserBuilderOutput)),
-        concatMap(output => outputFn ? outputFn(output) : of(output)),
       );
     }),
   );
 }
 
-
 export default createBuilder<json.JsonObject & BrowserBuilderSchema>(buildWebpackBrowser);

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

@@ -27,11 +27,11 @@ import * as webpack from 'webpack';
 import * as WebpackDevServer from 'webpack-dev-server';
 import { checkPort } from '../angular-cli-files/utilities/check-port';
 import {
-  BrowserConfigTransformFn,
   buildBrowserWebpackConfigFromContext,
   createBrowserLoggingCallback,
 } from '../browser';
 import { Schema as BrowserBuilderSchema } from '../browser/schema';
+import { ExecutionTransformer } from '../transforms';
 import { normalizeOptimization } from '../utils';
 import { Schema } from './schema';
 const open = require('open');
@@ -75,8 +75,7 @@ export function serveWebpackBrowser(
   options: DevServerBuilderSchema,
   context: BuilderContext,
   transforms: {
-    browserConfig?: BrowserConfigTransformFn,
-    serverConfig?: ServerConfigTransformFn,
+    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>,
     logging?: WebpackLoggingCallback,
   } = {},
 ): Observable<DevServerBuilderOutput> {
@@ -123,22 +122,17 @@ export function serveWebpackBrowser(
 
     // No differential loading for dev-server, hence there is just one config
     let webpackConfig = webpackConfigResult.config[0];
-    const workspace = webpackConfigResult.workspace;
-
-    if (transforms.browserConfig) {
-      webpackConfig = await transforms.browserConfig(workspace, webpackConfig).toPromise();
-    }
 
     const port = await checkPort(options.port || 0, options.host || 'localhost', 4200);
-    let webpackDevServerConfig = buildServerConfig(
+    const webpackDevServerConfig = webpackConfig.devServer = buildServerConfig(
       root,
       options,
       browserOptions,
       context.logger,
     );
 
-    if (transforms.serverConfig) {
-      webpackDevServerConfig = await transforms.serverConfig(workspace, webpackConfig).toPromise();
+    if (transforms.webpackConfiguration) {
+      webpackConfig = await transforms.webpackConfiguration(webpackConfig);
     }
 
     return { browserOptions, webpackConfig, webpackDevServerConfig, port };
@@ -208,7 +202,6 @@ export function serveWebpackBrowser(
       `);
 
       openAddress = serverAddress + webpackDevServerConfig.publicPath;
-      webpackConfig.devServer = webpackDevServerConfig;
 
       return runWebpackDevServer(webpackConfig, context, { logging: loggingFn });
     }),

packages/angular_devkit/build_angular/src/index.ts

@@ -12,7 +12,7 @@
 // See https://github.com/angular/angular-cli/issues/9691#issuecomment-367322703 for details.
 // We need to add a require here to satisfy the dependency checker.
 // require('ajv');
-
+export * from './transforms';
 export * from './app-shell';
 export * from './browser';
 export {

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

@@ -18,6 +18,7 @@ import {
   getWorkerConfig,
 } from '../angular-cli-files/models/webpack-configs';
 import { Schema as BrowserBuilderOptions } from '../browser/schema';
+import { ExecutionTransformer } from '../transforms';
 import { generateBrowserWebpackConfigFromContext } from '../utils/webpack-browser-config';
 import { Schema as KarmaBuilderOptions } from './schema';
 
@@ -27,12 +28,10 @@ type KarmaConfigOptions = import ('karma').ConfigOptions & {
   configFile?: string;
 };
 
-type WebpackConfigurationTransformer =
-  (configuration: webpack.Configuration) => webpack.Configuration;
-
 async function initialize(
   options: KarmaBuilderOptions,
   context: BuilderContext,
+  webpackConfigurationTransformer?: ExecutionTransformer<webpack.Configuration>,
   // tslint:disable-next-line:no-implicit-dependencies
 ): Promise<[typeof import ('karma'), webpack.Configuration]> {
   const { config } = await generateBrowserWebpackConfigFromContext(
@@ -53,18 +52,22 @@ async function initialize(
   // tslint:disable-next-line:no-implicit-dependencies
   const karma = await import('karma');
 
-  return [karma, config[0]];
+  return [
+    karma,
+    webpackConfigurationTransformer ? await webpackConfigurationTransformer(config[0]) : config[0],
+  ];
 }
 
 export function execute(
   options: KarmaBuilderOptions,
   context: BuilderContext,
   transforms: {
-    webpackConfiguration?: WebpackConfigurationTransformer,
+    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>,
+    // The karma options transform cannot be async without a refactor of the builder implementation
     karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions,
   } = {},
 ): Observable<BuilderOutput> {
-  return from(initialize(options, context)).pipe(
+  return from(initialize(options, context, transforms.webpackConfiguration)).pipe(
     switchMap(([karma, webpackConfig]) => new Observable<BuilderOutput>(subscriber => {
       const karmaOptions: KarmaConfigOptions = {};
 
@@ -93,9 +96,7 @@ export function execute(
 
       karmaOptions.buildWebpack = {
         options,
-        webpackConfig: transforms.webpackConfiguration
-          ? transforms.webpackConfiguration(webpackConfig)
-          : webpackConfig,
+        webpackConfig,
         // Pass onto Karma to emit BuildEvents.
         successCb: () => subscriber.next({ success: true }),
         failureCb: () => subscriber.next({ success: false }),

packages/angular_devkit/build_angular/src/transforms.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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
+ */
+export type ExecutionTransformer<T> = (input: T) => T | Promise<T>;