@angular-devkit/build-angular 12.2.3 → 12.2.7

package/esbuild-check.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+
+// If the platform does not support the native variant of esbuild, this will crash.
+// This script can then be spawned by the CLI to determine if native usage is supported.
+require('esbuild')
+  .formatMessages([], { kind: 'error ' })
+  .then(
+    () => {},
+    () => {},
+  );

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.2.3",
+  "version": "12.2.7",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "1.0.1",
-    "@angular-devkit/architect": "0.1202.3",
-    "@angular-devkit/build-optimizer": "0.1202.3",
-    "@angular-devkit/build-webpack": "0.1202.3",
-    "@angular-devkit/core": "12.2.3",
+    "@angular-devkit/architect": "0.1202.7",
+    "@angular-devkit/build-optimizer": "0.1202.7",
+    "@angular-devkit/build-webpack": "0.1202.7",
+    "@angular-devkit/core": "12.2.7",
     "@babel/core": "7.14.8",
     "@babel/generator": "7.14.8",
     "@babel/helper-annotate-as-pure": "7.14.5",
@@ -22,7 +22,7 @@
     "@babel/template": "7.14.5",
     "@discoveryjs/json-ext": "0.5.3",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.2.3",
+    "@ngtools/webpack": "12.2.7",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -34,7 +34,7 @@
     "critters": "0.0.10",
     "css-loader": "6.2.0",
     "css-minimizer-webpack-plugin": "3.0.2",
-    "esbuild": "0.12.17",
+    "esbuild-wasm": "0.12.29",
     "find-cache-dir": "3.3.1",
     "glob": "7.1.7",
     "https-proxy-agent": "5.0.0",
@@ -44,7 +44,7 @@
     "less-loader": "10.0.1",
     "license-webpack-plugin": "2.3.20",
     "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "2.1.0",
+    "mini-css-extract-plugin": "2.2.1",
     "minimatch": "3.0.4",
     "open": "8.2.1",
     "ora": "5.4.1",
@@ -76,6 +76,9 @@
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "1.5.2"
   },
+  "optionalDependencies": {
+    "esbuild": "0.12.29"
+  },
   "peerDependencies": {
     "@angular/compiler-cli": "^12.0.0",
     "@angular/localize": "^12.0.0",

package/src/utils/color.js

@@ -29,7 +29,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.colors = exports.removeColor = void 0;
 const ansiColors = __importStar(require("ansi-colors"));
 const tty_1 = require("tty");
-const supportsColor = process.stdout instanceof tty_1.WriteStream && process.stdout.getColorDepth() > 1;
+function supportColor() {
+    if (process.env.FORCE_COLOR !== undefined) {
+        // 2 colors: FORCE_COLOR = 0 (Disables colors), depth 1
+        // 16 colors: FORCE_COLOR = 1, depth 4
+        // 256 colors: FORCE_COLOR = 2, depth 8
+        // 16,777,216 colors: FORCE_COLOR = 3, depth 16
+        // See: https://nodejs.org/dist/latest-v12.x/docs/api/tty.html#tty_writestream_getcolordepth_env
+        // and https://github.com/nodejs/node/blob/b9f36062d7b5c5039498e98d2f2c180dca2a7065/lib/internal/tty.js#L106;
+        switch (process.env.FORCE_COLOR) {
+            case '':
+            case 'true':
+            case '1':
+            case '2':
+            case '3':
+                return true;
+            default:
+                return false;
+        }
+    }
+    if (process.stdout instanceof tty_1.WriteStream) {
+        return process.stdout.getColorDepth() > 1;
+    }
+    return false;
+}
 function removeColor(text) {
     // This has been created because when colors.enabled is false unstyle doesn't work
     // see: https://github.com/doowb/ansi-colors/blob/a4794363369d7b4d1872d248fc43a12761640d8e/index.js#L38
@@ -40,4 +63,4 @@ exports.removeColor = removeColor;
 // Create function is not defined in the typings. See: https://github.com/doowb/ansi-colors/pull/44
 const colors = ansiColors.create();
 exports.colors = colors;
-colors.enabled = supportsColor;
+colors.enabled = supportColor();

package/src/webpack/configs/dev-server.js

@@ -98,7 +98,7 @@ function getDevServerConfig(wco) {
             },
             sockPath: path_1.posix.join(servePath, 'sockjs-node'),
             stats: false,
-            compress: stylesOptimization.minify || scriptsOptimization,
+            compress: false,
             watchOptions: helpers_1.getWatchOptions(poll),
             https: getSslConfig(root, wco.buildOptions),
             overlay: {

package/src/webpack/configs/styles.js

@@ -33,6 +33,7 @@ const sass_service_1 = require("../../sass/sass-service");
 const build_browser_features_1 = require("../../utils/build-browser-features");
 const environment_options_1 = require("../../utils/environment-options");
 const plugins_1 = require("../plugins");
+const esbuild_executor_1 = require("../plugins/esbuild-executor");
 const helpers_1 = require("../utils/helpers");
 function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
     const entryPoints = {};
@@ -243,7 +244,7 @@ function getStylesConfig(wco) {
     const extraMinimizers = [];
     if (buildOptions.optimization.styles.minify) {
         const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-        const esbuild = require('esbuild');
+        const esbuild = new esbuild_executor_1.EsbuildExecutor();
         const cssnanoOptions = {
             preset: [
                 'default',
@@ -439,11 +440,23 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
     // https://esbuild.github.io/api/#target
     const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
     for (const browser of supportedBrowsers) {
-        const [browserName, version] = browser.split(' ');
+        let [browserName, version] = browser.split(' ');
+        // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
+        if (browserName === 'ios_saf') {
+            browserName = 'ios';
+            // browserslist also uses ranges for iOS Safari versions but only the lowest is required
+            // to perform minimum supported feature checks. esbuild also expects a single version.
+            [version] = version.split('-');
+        }
         if (browserName === 'ie') {
             transformed.push('edge12');
         }
         else if (esBuildSupportedBrowsers.has(browserName)) {
+            if (browserName === 'safari' && version === 'TP') {
+                // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
+                // a Technology Preview (TP) of Safari is assumed to support all currently known features.
+                version = '999';
+            }
             transformed.push(browserName + version);
         }
     }

package/src/webpack/plugins/esbuild-executor.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+import type { FormatMessagesOptions, PartialMessage, TransformOptions, TransformResult } from 'esbuild';
+/**
+ * Provides the ability to execute esbuild regardless of the current platform's support
+ * for using the native variant of esbuild. The native variant will be preferred (assuming
+ * the `alwaysUseWasm` constructor option is `false) due to its inherent performance advantages.
+ * At first use of esbuild, a supportability test will be automatically performed and the
+ * WASM-variant will be used if needed by the platform.
+ */
+export declare class EsbuildExecutor implements Pick<typeof import('esbuild'), 'transform' | 'formatMessages'> {
+    private alwaysUseWasm;
+    private esbuildTransform;
+    private esbuildFormatMessages;
+    private initialized;
+    /**
+     * Constructs an instance of the `EsbuildExecutor` class.
+     *
+     * @param alwaysUseWasm If true, the WASM-variant will be preferred and no support test will be
+     * performed; if false (default), the native variant will be preferred.
+     */
+    constructor(alwaysUseWasm?: boolean);
+    /**
+     * Determines whether the native variant of esbuild can be used on the current platform.
+     *
+     * @returns True, if the native variant of esbuild is support; False, if the WASM variant is required.
+     */
+    static hasNativeSupport(): boolean;
+    /**
+     * Initializes the esbuild transform and format messages functions.
+     *
+     * @returns A promise that fulfills when esbuild has been loaded and available for use.
+     */
+    private ensureEsbuild;
+    /**
+     * Transitions an executor instance to use the WASM-variant of esbuild.
+     */
+    private useWasm;
+    transform(input: string, options?: TransformOptions): Promise<TransformResult>;
+    formatMessages(messages: PartialMessage[], options: FormatMessagesOptions): Promise<string[]>;
+}

package/src/webpack/plugins/esbuild-executor.js

@@ -0,0 +1,126 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EsbuildExecutor = void 0;
+const child_process_1 = require("child_process");
+const path = __importStar(require("path"));
+/**
+ * Provides the ability to execute esbuild regardless of the current platform's support
+ * for using the native variant of esbuild. The native variant will be preferred (assuming
+ * the `alwaysUseWasm` constructor option is `false) due to its inherent performance advantages.
+ * At first use of esbuild, a supportability test will be automatically performed and the
+ * WASM-variant will be used if needed by the platform.
+ */
+class EsbuildExecutor {
+    /**
+     * Constructs an instance of the `EsbuildExecutor` class.
+     *
+     * @param alwaysUseWasm If true, the WASM-variant will be preferred and no support test will be
+     * performed; if false (default), the native variant will be preferred.
+     */
+    constructor(alwaysUseWasm = false) {
+        this.alwaysUseWasm = alwaysUseWasm;
+        this.initialized = false;
+        this.esbuildTransform = this.esbuildFormatMessages = () => {
+            throw new Error('esbuild implementation missing');
+        };
+    }
+    /**
+     * Determines whether the native variant of esbuild can be used on the current platform.
+     *
+     * @returns True, if the native variant of esbuild is support; False, if the WASM variant is required.
+     */
+    static hasNativeSupport() {
+        // Try to use native variant to ensure it is functional for the platform.
+        // Spawning a separate esbuild check process is used to determine if the native
+        // variant is viable. If check fails, the WASM variant is initialized instead.
+        // Attempting to call one of the native esbuild functions is not a viable test
+        // currently since esbuild spawn errors are currently not propagated through the
+        // call stack for the esbuild function. If this limitation is removed in the future
+        // then the separate process spawn check can be removed in favor of a direct function
+        // call check.
+        try {
+            const { status, error } = child_process_1.spawnSync(process.execPath, [
+                path.join(__dirname, '../../../esbuild-check.js'),
+            ]);
+            return status === 0 && error === undefined;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Initializes the esbuild transform and format messages functions.
+     *
+     * @returns A promise that fulfills when esbuild has been loaded and available for use.
+     */
+    async ensureEsbuild() {
+        if (this.initialized) {
+            return;
+        }
+        // If the WASM variant was preferred at class construction or native is not supported, use WASM
+        if (this.alwaysUseWasm || !EsbuildExecutor.hasNativeSupport()) {
+            await this.useWasm();
+            this.initialized = true;
+            return;
+        }
+        try {
+            // Use the faster native variant if available.
+            const { transform, formatMessages } = await Promise.resolve().then(() => __importStar(require('esbuild')));
+            this.esbuildTransform = transform;
+            this.esbuildFormatMessages = formatMessages;
+        }
+        catch {
+            // If the native variant is not installed then use the WASM-based variant
+            await this.useWasm();
+        }
+        this.initialized = true;
+    }
+    /**
+     * Transitions an executor instance to use the WASM-variant of esbuild.
+     */
+    async useWasm() {
+        const { transform, formatMessages } = await Promise.resolve().then(() => __importStar(require('esbuild-wasm')));
+        this.esbuildTransform = transform;
+        this.esbuildFormatMessages = formatMessages;
+        // The ESBUILD_BINARY_PATH environment variable cannot exist when attempting to use the
+        // WASM variant. If it is then the binary located at the specified path will be used instead
+        // of the WASM variant.
+        delete process.env.ESBUILD_BINARY_PATH;
+        this.alwaysUseWasm = true;
+    }
+    async transform(input, options) {
+        await this.ensureEsbuild();
+        return this.esbuildTransform(input, options);
+    }
+    async formatMessages(messages, options) {
+        await this.ensureEsbuild();
+        return this.esbuildFormatMessages(messages, options);
+    }
+}
+exports.EsbuildExecutor = EsbuildExecutor;

package/src/webpack/plugins/javascript-optimizer-plugin.js

@@ -14,6 +14,7 @@ exports.JavaScriptOptimizerPlugin = void 0;
 const piscina_1 = __importDefault(require("piscina"));
 const typescript_1 = require("typescript");
 const environment_options_1 = require("../../utils/environment-options");
+const esbuild_executor_1 = require("./esbuild-executor");
 /**
  * The maximum number of Workers that will be created to execute optimize tasks.
  */
@@ -105,6 +106,10 @@ class JavaScriptOptimizerPlugin {
                     target,
                     removeLicenses: this.options.removeLicenses,
                     advanced: this.options.advanced,
+                    // Perform a single native esbuild support check.
+                    // This removes the need for each worker to perform the check which would
+                    // otherwise require spawning a separate process per worker.
+                    alwaysUseWasm: !esbuild_executor_1.EsbuildExecutor.hasNativeSupport(),
                 };
                 // Sort scripts so larger scripts start first - worker pool uses a FIFO queue
                 scriptsToOptimize.sort((a, b) => a.code.length - b.code.length);

package/src/webpack/plugins/javascript-optimizer-worker.d.ts

@@ -13,22 +13,64 @@ interface OptimizeRequest {
      * The options to use when optimizing.
      */
     options: {
+        /**
+         * Controls advanced optimizations.
+         * Currently these are only terser related:
+         * * terser compress passes are set to 2
+         * * terser pure_getters option is enabled
+         */
         advanced: boolean;
+        /**
+         * Specifies the string tokens that should be replaced with a defined value.
+         */
         define?: Record<string, string>;
+        /**
+         * Controls whether class, function, and variable names should be left intact
+         * throughout the output code.
+         */
         keepNames: boolean;
+        /**
+         * Controls whether license text is removed from the output code.
+         * Within the CLI, this option is linked to the license extraction functionality.
+         */
         removeLicenses: boolean;
+        /**
+         * Controls whether source maps should be generated.
+         */
         sourcemap: boolean;
+        /**
+         * Specifies the target ECMAScript version for the output code.
+         */
         target: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020;
+        /**
+         * Controls whether esbuild should only use the WASM-variant instead of trying to
+         * use the native variant. Some platforms may not support the native-variant and
+         * this option allows one support test to be conducted prior to all the workers starting.
+         */
+        alwaysUseWasm: boolean;
     };
     /**
      * The JavaScript asset to optimize.
      */
     asset: {
+        /**
+         * The name of the JavaScript asset (typically the filename).
+         */
         name: string;
+        /**
+         * The source content of the JavaScript asset.
+         */
         code: string;
+        /**
+         * The source map of the JavaScript asset, if available.
+         * This map is merged with all intermediate source maps during optimization.
+         */
         map: object;
     };
 }
+/**
+ * Handles optimization requests sent from the main thread via the `JavaScriptOptimizerPlugin`.
+ */
 export default function ({ asset, options }: OptimizeRequest): Promise<{
     name: string;
     code: string;

package/src/webpack/plugins/javascript-optimizer-worker.js

@@ -11,23 +11,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const remapping_1 = __importDefault(require("@ampproject/remapping"));
-const esbuild_1 = require("esbuild");
 const terser_1 = require("terser");
+const esbuild_executor_1 = require("./esbuild-executor");
+/**
+ * The cached esbuild executor.
+ * This will automatically use the native or WASM version based on platform and availability
+ * with the native version given priority due to its superior performance.
+ */
+let esbuild;
+/**
+ * Handles optimization requests sent from the main thread via the `JavaScriptOptimizerPlugin`.
+ */
 async function default_1({ asset, options }) {
     // esbuild is used as a first pass
-    const esbuildResult = await esbuild_1.transform(asset.code, {
-        minifyIdentifiers: !options.keepNames,
-        minifySyntax: true,
-        // NOTE: Disabling whitespace ensures unused pure annotations are kept
-        minifyWhitespace: false,
-        pure: ['forwardRef'],
-        legalComments: options.removeLicenses ? 'none' : 'inline',
-        sourcefile: asset.name,
-        sourcemap: options.sourcemap && 'external',
-        define: options.define,
-        keepNames: options.keepNames,
-        target: `es${options.target}`,
-    });
+    const esbuildResult = await optimizeWithEsbuild(asset.code, asset.name, options);
     // terser is used as a second pass
     const terserResult = await optimizeWithTerser(asset.name, esbuildResult.code, options.sourcemap, options.target, options.advanced);
     // Merge intermediate sourcemaps with input sourcemap if enabled
@@ -48,6 +45,65 @@ async function default_1({ asset, options }) {
     return { name: asset.name, code: terserResult.code, map: fullSourcemap };
 }
 exports.default = default_1;
+/**
+ * Optimizes a JavaScript asset using esbuild.
+ *
+ * @param content The JavaScript asset source content to optimize.
+ * @param name The name of the JavaScript asset. Used to generate source maps.
+ * @param options The optimization request options to apply to the content.
+ * @returns A promise that resolves with the optimized code, source map, and any warnings.
+ */
+async function optimizeWithEsbuild(content, name, options) {
+    var _a;
+    if (!esbuild) {
+        esbuild = new esbuild_executor_1.EsbuildExecutor(options.alwaysUseWasm);
+    }
+    let result;
+    try {
+        result = await esbuild.transform(content, {
+            minifyIdentifiers: !options.keepNames,
+            minifySyntax: true,
+            // NOTE: Disabling whitespace ensures unused pure annotations are kept
+            minifyWhitespace: false,
+            pure: ['forwardRef'],
+            legalComments: options.removeLicenses ? 'none' : 'inline',
+            sourcefile: name,
+            sourcemap: options.sourcemap && 'external',
+            define: options.define,
+            keepNames: options.keepNames,
+            target: `es${options.target}`,
+        });
+    }
+    catch (error) {
+        const failure = error;
+        // If esbuild fails with only ES5 support errors, fallback to just terser.
+        // This will only happen if ES5 is the output target and a global script contains ES2015+ syntax.
+        // In that case, the global script is technically already invalid for the target environment but
+        // this is and has been considered a configuration issue. Global scripts must be compatible with
+        // the target environment.
+        if ((_a = failure.errors) === null || _a === void 0 ? void 0 : _a.every((error) => error.text.includes('to the configured target environment ("es5") is not supported yet'))) {
+            result = {
+                code: content,
+                map: '',
+                warnings: [],
+            };
+        }
+        else {
+            throw error;
+        }
+    }
+    return result;
+}
+/**
+ * Optimizes a JavaScript asset using terser.
+ *
+ * @param name The name of the JavaScript asset. Used to generate source maps.
+ * @param code The JavaScript asset source content to optimize.
+ * @param sourcemaps If true, generate an output source map for the optimized code.
+ * @param target Specifies the target ECMAScript version for the output code.
+ * @param advanced Controls advanced optimizations.
+ * @returns A promise that resolves with the optimized code and source map.
+ */
 async function optimizeWithTerser(name, code, sourcemaps, target, advanced) {
     const result = await terser_1.minify({ [name]: code }, {
         compress: {