@angular-devkit/build-angular 12.2.0-next.0 → 12.2.0

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

@@ -0,0 +1,150 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JavaScriptOptimizerPlugin = void 0;
+const piscina_1 = __importDefault(require("piscina"));
+const typescript_1 = require("typescript");
+const environment_options_1 = require("../../utils/environment-options");
+/**
+ * The maximum number of Workers that will be created to execute optimize tasks.
+ */
+const MAX_OPTIMIZE_WORKERS = environment_options_1.maxWorkers;
+/**
+ * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
+ */
+const PLUGIN_NAME = 'angular-javascript-optimizer';
+/**
+ * A Webpack plugin that provides JavaScript optimization capabilities.
+ *
+ * The plugin uses both `esbuild` and `terser` to provide both fast and highly-optimized
+ * code output. `esbuild` is used as an initial pass to remove the majority of unused code
+ * as well as shorten identifiers. `terser` is then used as a secondary pass to apply
+ * optimizations not yet implemented by `esbuild`.
+ */
+class JavaScriptOptimizerPlugin {
+    constructor(options = {}) {
+        this.options = options;
+    }
+    apply(compiler) {
+        const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+            }, async (compilationAssets) => {
+                const scriptsToOptimize = [];
+                const cache = compilation.options.cache && compilation.getCache('JavaScriptOptimizerPlugin');
+                // Analyze the compilation assets for scripts that require optimization
+                for (const assetName of Object.keys(compilationAssets)) {
+                    if (!assetName.endsWith('.js')) {
+                        continue;
+                    }
+                    const scriptAsset = compilation.getAsset(assetName);
+                    if (scriptAsset && !scriptAsset.info.minimized) {
+                        const { source: scriptAssetSource, name } = scriptAsset;
+                        let cacheItem;
+                        if (cache) {
+                            const eTag = cache.getLazyHashedEtag(scriptAssetSource);
+                            cacheItem = cache.getItemCache(name, eTag);
+                            const cachedOutput = await cacheItem.getPromise();
+                            if (cachedOutput) {
+                                compilation.updateAsset(name, cachedOutput.source, {
+                                    minimized: true,
+                                });
+                                continue;
+                            }
+                        }
+                        const { source, map } = scriptAssetSource.sourceAndMap();
+                        scriptsToOptimize.push({
+                            name: scriptAsset.name,
+                            code: typeof source === 'string' ? source : source.toString(),
+                            map,
+                            cacheItem,
+                        });
+                    }
+                }
+                if (scriptsToOptimize.length === 0) {
+                    return;
+                }
+                // Ensure all replacement values are strings which is the expected type for esbuild
+                let define;
+                if (this.options.define) {
+                    define = {};
+                    for (const [key, value] of Object.entries(this.options.define)) {
+                        define[key] = String(value);
+                    }
+                }
+                let target = 2017;
+                if (this.options.target) {
+                    if (this.options.target <= typescript_1.ScriptTarget.ES5) {
+                        target = 5;
+                    }
+                    else if (this.options.target < typescript_1.ScriptTarget.ESNext) {
+                        target = Number(typescript_1.ScriptTarget[this.options.target].slice(2));
+                    }
+                    else {
+                        target = 2020;
+                    }
+                }
+                // Setup the options used by all worker tasks
+                const optimizeOptions = {
+                    sourcemap: this.options.sourcemap,
+                    define,
+                    keepNames: this.options.keepNames,
+                    target,
+                    removeLicenses: this.options.removeLicenses,
+                    advanced: this.options.advanced,
+                };
+                // Sort scripts so larger scripts start first - worker pool uses a FIFO queue
+                scriptsToOptimize.sort((a, b) => a.code.length - b.code.length);
+                // Initialize the task worker pool
+                const workerPath = require.resolve('./javascript-optimizer-worker');
+                const workerPool = new piscina_1.default({
+                    filename: workerPath,
+                    maxThreads: MAX_OPTIMIZE_WORKERS,
+                });
+                // Enqueue script optimization tasks and update compilation assets as the tasks complete
+                try {
+                    const tasks = [];
+                    for (const { name, code, map, cacheItem } of scriptsToOptimize) {
+                        tasks.push(workerPool
+                            .run({
+                            asset: {
+                                name,
+                                code,
+                                map,
+                            },
+                            options: optimizeOptions,
+                        })
+                            .then(({ code, name, map }) => {
+                            const optimizedAsset = map
+                                ? new SourceMapSource(code, name, map)
+                                : new OriginalSource(code, name);
+                            compilation.updateAsset(name, optimizedAsset, { minimized: true });
+                            return cacheItem === null || cacheItem === void 0 ? void 0 : cacheItem.storePromise({
+                                source: optimizedAsset,
+                            });
+                        }, (error) => {
+                            const optimizationError = new compiler.webpack.WebpackError(`Optimization error [${name}]: ${error.stack || error.message}`);
+                            compilation.errors.push(optimizationError);
+                        }));
+                    }
+                    await Promise.all(tasks);
+                }
+                finally {
+                    void workerPool.destroy();
+                }
+            });
+        });
+    }
+}
+exports.JavaScriptOptimizerPlugin = JavaScriptOptimizerPlugin;

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

@@ -0,0 +1,37 @@
+/**
+ * @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
+ */
+/**
+ * A request to optimize JavaScript using the supplied options.
+ */
+interface OptimizeRequest {
+    /**
+     * The options to use when optimizing.
+     */
+    options: {
+        advanced: boolean;
+        define?: Record<string, string>;
+        keepNames: boolean;
+        removeLicenses: boolean;
+        sourcemap: boolean;
+        target: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020;
+    };
+    /**
+     * The JavaScript asset to optimize.
+     */
+    asset: {
+        name: string;
+        code: string;
+        map: object;
+    };
+}
+export default function ({ asset, options }: OptimizeRequest): Promise<{
+    name: string;
+    code: string;
+    map: import("@ampproject/remapping/dist/types/source-map").default | undefined;
+}>;
+export {};

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

@@ -0,0 +1,74 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const remapping_1 = __importDefault(require("@ampproject/remapping"));
+const esbuild_1 = require("esbuild");
+const terser_1 = require("terser");
+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}`,
+    });
+    // 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
+    let fullSourcemap;
+    if (options.sourcemap) {
+        const partialSourcemaps = [];
+        if (esbuildResult.map) {
+            partialSourcemaps.unshift(JSON.parse(esbuildResult.map));
+        }
+        if (terserResult.map) {
+            partialSourcemaps.unshift(terserResult.map);
+        }
+        partialSourcemaps.push(asset.map);
+        fullSourcemap = remapping_1.default(partialSourcemaps, () => null);
+    }
+    return { name: asset.name, code: terserResult.code, map: fullSourcemap };
+}
+exports.default = default_1;
+async function optimizeWithTerser(name, code, sourcemaps, target, advanced) {
+    const result = await terser_1.minify({ [name]: code }, {
+        compress: {
+            passes: advanced ? 2 : 1,
+            pure_getters: advanced,
+        },
+        ecma: target,
+        // esbuild in the first pass is used to minify identifiers instead of mangle here
+        mangle: false,
+        format: {
+            // ASCII output is enabled here as well to prevent terser from converting back to UTF-8
+            ascii_only: true,
+            wrap_func_args: false,
+        },
+        sourceMap: sourcemaps &&
+            {
+                asObject: true,
+                // typings don't include asObject option
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            },
+    });
+    if (!result.code) {
+        throw new Error('Terser failed for unknown reason.');
+    }
+    return { code: result.code, map: result.map };
+}

package/src/webpack/plugins/postcss-cli-resources.d.ts

@@ -14,7 +14,7 @@ export interface PostcssCliResourcesOptions {
     /** CSS is extracted to a `.css` or is embedded in a `.js` file. */
     extracted?: boolean;
     filename: (resourcePath: string) => string;
-    loader: any;
+    loader: import('webpack').LoaderContext<unknown>;
     emitFile: boolean;
 }
 export declare const postcss = true;

package/src/webpack/plugins/postcss-cli-resources.js

@@ -102,6 +102,7 @@ function default_1(options) {
                 }
                 loader.addDependency(result);
                 if (emitFile) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     loader.emitFile(outputPath, content, undefined, { sourceFilename: result });
                 }
                 let outputUrl = outputPath.replace(/\\/g, '/');
@@ -141,7 +142,7 @@ function default_1(options) {
                     processedUrl = await process(originalUrl, context, resourceCache);
                 }
                 catch (err) {
-                    loader.emitError(decl.error(err.message, { word: originalUrl }).toString());
+                    loader.emitError(decl.error(err.message, { word: originalUrl }));
                     continue;
                 }
                 if (lastIndex < match.index) {

package/src/webpack/plugins/single-test-transform.d.ts

@@ -24,4 +24,4 @@ export declare const SingleTestTransformLoader: string;
  * 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: any, source: string): string;
+export default function loader(this: import('webpack').LoaderContext<SingleTestTransformLoaderOptions>, source: string): string;

package/src/webpack/plugins/single-test-transform.js

@@ -9,7 +9,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SingleTestTransformLoader = void 0;
 const core_1 = require("@angular-devkit/core");
-const loader_utils_1 = require("loader-utils");
 const path_1 = require("path");
 exports.SingleTestTransformLoader = __filename;
 /**
@@ -27,7 +26,7 @@ exports.SingleTestTransformLoader = __filename;
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function loader(source) {
-    const { files = [], logger = console } = loader_utils_1.getOptions(this);
+    const { files = [], logger = console } = this.getOptions();
     // signal the user that expected content is not present.
     if (!source.includes('require.context(')) {
         logger.error(core_1.tags.stripIndent `The 'include' option requires that the 'main' file for tests includes the below line: