@angular-devkit/build-angular 15.0.0-next.3 → 15.0.0-next.4

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.0.0-next.3",
+  "version": "15.0.0-next.4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1500.0-next.3",
-    "@angular-devkit/build-webpack": "0.1500.0-next.3",
-    "@angular-devkit/core": "15.0.0-next.3",
+    "@angular-devkit/architect": "0.1500.0-next.4",
+    "@angular-devkit/build-webpack": "0.1500.0-next.4",
+    "@angular-devkit/core": "15.0.0-next.4",
     "@babel/core": "7.19.3",
     "@babel/generator": "7.19.3",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,17 +20,18 @@
     "@babel/runtime": "7.19.0",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.0.0-next.3",
+    "@ngtools/webpack": "15.0.0-next.4",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.12",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
     "cacache": "16.1.3",
+    "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.15.9",
+    "esbuild-wasm": "0.15.10",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -46,7 +47,7 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.16",
+    "postcss": "8.4.17",
     "postcss-import": "15.0.0",
     "postcss-loader": "7.0.1",
     "regenerator-runtime": "0.13.9",
@@ -54,10 +55,10 @@
     "rxjs": "6.6.7",
     "sass": "1.55.0",
     "sass-loader": "13.0.2",
-    "semver": "7.3.7",
+    "semver": "7.3.8",
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
-    "terser": "5.15.0",
+    "terser": "5.15.1",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.0",
@@ -68,7 +69,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.9"
+    "esbuild": "0.15.10"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",
@@ -112,7 +113,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": "^14.15.0 || >=16.10.0",
+    "node": "^14.20.0 || >=16.10.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },

package/src/builders/browser-esbuild/compiler-plugin.d.ts

@@ -6,11 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
+import ts from 'typescript';
 import { BundleStylesheetOptions } from './stylesheets';
-export declare function createCompilerPlugin(pluginOptions: {
+export declare class SourceFileCache extends Map<string, ts.SourceFile> {
+    readonly modifiedFiles: Set<string>;
+    invalidate(files: Iterable<string>): void;
+}
+export interface CompilerPluginOptions {
     sourcemap: boolean;
     tsconfig: string;
     advancedOptimizations?: boolean;
     thirdPartySourcemaps?: boolean;
     fileReplacements?: Record<string, string>;
-}, styleOptions: BundleStylesheetOptions): Plugin;
+    sourceFileCache?: SourceFileCache;
+}
+export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions): Plugin;

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -33,10 +33,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCompilerPlugin = void 0;
+exports.createCompilerPlugin = exports.SourceFileCache = void 0;
 const core_1 = require("@babel/core");
 const assert = __importStar(require("assert"));
 const fs_1 = require("fs");
+const os_1 = require("os");
 const path = __importStar(require("path"));
 const typescript_1 = __importDefault(require("typescript"));
 const application_1 = __importDefault(require("../../babel/presets/application"));
@@ -47,7 +48,7 @@ const stylesheets_1 = require("./stylesheets");
  * Converts TypeScript Diagnostic related information into an esbuild compatible note object.
  * Related information is a subset of a full TypeScript Diagnostic and also used for diagnostic
  * notes associated with the main Diagnostic.
- * @param diagnostic The TypeScript diagnostic relative information to convert.
+ * @param info The TypeScript diagnostic relative information to convert.
  * @param host A TypeScript FormatDiagnosticsHost instance to use during conversion.
  * @returns An esbuild diagnostic message as a PartialMessage object
  */
@@ -106,6 +107,26 @@ function convertTypeScriptDiagnostic(diagnostic, host) {
     }
     return message;
 }
+const USING_WINDOWS = (0, os_1.platform)() === 'win32';
+const WINDOWS_SEP_REGEXP = new RegExp(`\\${path.win32.sep}`, 'g');
+class SourceFileCache extends Map {
+    constructor() {
+        super(...arguments);
+        this.modifiedFiles = new Set();
+    }
+    invalidate(files) {
+        this.modifiedFiles.clear();
+        for (let file of files) {
+            // Normalize separators to allow matching TypeScript Host paths
+            if (USING_WINDOWS) {
+                file = file.replace(WINDOWS_SEP_REGEXP, path.posix.sep);
+            }
+            this.delete(file);
+            this.modifiedFiles.add(file);
+        }
+    }
+}
+exports.SourceFileCache = SourceFileCache;
 // This is a non-watch version of the compiler code from `@ngtools/webpack` augmented for esbuild
 // eslint-disable-next-line max-lines-per-function
 function createCompilerPlugin(pluginOptions, styleOptions) {
@@ -160,6 +181,9 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             let fileEmitter;
             // The stylesheet resources from component stylesheets that will be added to the build results output files
             let stylesheetResourceFiles;
+            let previousBuilder;
+            let previousAngularProgram;
+            const babelMemoryCache = new Map();
             build.onStart(async () => {
                 var _a, _b;
                 const result = {};
@@ -201,22 +225,34 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     stylesheetResourceFiles.push(...resourceFiles);
                     return { content: contents };
                 };
+                // Temporary deep import for host augmentation support
+                const { augmentHostWithCaching, augmentHostWithReplacements, augmentProgramWithVersioning, } = require('@ngtools/webpack/src/ivy/host');
                 // Augment TypeScript Host for file replacements option
                 if (pluginOptions.fileReplacements) {
-                    // Temporary deep import for file replacements support
-                    const { augmentHostWithReplacements } = require('@ngtools/webpack/src/ivy/host');
                     augmentHostWithReplacements(host, pluginOptions.fileReplacements);
                 }
+                // Augment TypeScript Host with source file caching if provided
+                if (pluginOptions.sourceFileCache) {
+                    augmentHostWithCaching(host, pluginOptions.sourceFileCache);
+                    // Allow the AOT compiler to request the set of changed templates and styles
+                    host.getModifiedResourceFiles = function () {
+                        var _a;
+                        return (_a = pluginOptions.sourceFileCache) === null || _a === void 0 ? void 0 : _a.modifiedFiles;
+                    };
+                }
                 // Create the Angular specific program that contains the Angular compiler
-                const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host);
+                const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host, previousAngularProgram);
+                previousAngularProgram = angularProgram;
                 const angularCompiler = angularProgram.compiler;
                 const { ignoreForDiagnostics } = angularCompiler;
                 const typeScriptProgram = angularProgram.getTsProgram();
-                const builder = typescript_1.default.createAbstractBuilder(typeScriptProgram, host);
+                augmentProgramWithVersioning(typeScriptProgram);
+                const builder = typescript_1.default.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, previousBuilder, configurationDiagnostics);
+                previousBuilder = builder;
                 await angularCompiler.analyzeAsync();
                 function* collectDiagnostics() {
                     // Collect program level diagnostics
-                    yield* configurationDiagnostics;
+                    yield* builder.getConfigFileParsingDiagnostics();
                     yield* angularCompiler.getOptionDiagnostics();
                     yield* builder.getOptionsDiagnostics();
                     yield* builder.getGlobalDiagnostics();
@@ -243,11 +279,11 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 }
                 fileEmitter = createFileEmitter(builder, mergeTransformers(angularCompiler.prepareEmit().transformers, {
                     before: [replaceBootstrap(() => builder.getProgram().getTypeChecker())],
-                }), () => []);
+                }), (sourceFile) => angularCompiler.incrementalDriver.recordSuccessfulEmit(sourceFile));
                 return result;
             });
             build.onLoad({ filter: compilerOptions.allowJs ? /\.[cm]?[jt]sx?$/ : /\.[cm]?tsx?$/ }, async (args) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
                 assert.ok(fileEmitter, 'Invalid plugin execution order');
                 const typescriptResult = await fileEmitter((_b = (_a = pluginOptions.fileReplacements) === null || _a === void 0 ? void 0 : _a[args.path]) !== null && _b !== void 0 ? _b : args.path);
                 if (!typescriptResult) {
@@ -260,8 +296,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     return {
                         errors: [
                             {
-                                text: 'File is missing from the TypeScript compilation.',
-                                location: { file: args.path },
+                                text: `File '${args.path}' is missing from the TypeScript compilation.`,
                                 notes: [
                                     {
                                         text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
@@ -271,92 +306,15 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     };
                 }
-                const data = (_c = typescriptResult.content) !== null && _c !== void 0 ? _c : '';
-                const forceAsyncTransformation = /async\s+function\s*\*/.test(data);
-                const useInputSourcemap = pluginOptions.sourcemap &&
-                    (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
-                // If no additional transformations are needed, return the TypeScript output directly
-                if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations) {
-                    return {
-                        // Strip sourcemaps if they should not be used
-                        contents: useInputSourcemap
-                            ? data
-                            : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
-                        loader: 'js',
-                    };
-                }
-                const babelResult = await (0, core_1.transformAsync)(data, {
-                    filename: args.path,
-                    inputSourceMap: (useInputSourcemap ? undefined : false),
-                    sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
-                    compact: false,
-                    configFile: false,
-                    babelrc: false,
-                    browserslistConfigFile: false,
-                    plugins: [],
-                    presets: [
-                        [
-                            application_1.default,
-                            {
-                                forceAsyncTransformation,
-                                optimize: pluginOptions.advancedOptimizations && {},
-                            },
-                        ],
-                    ],
-                });
                 return {
-                    contents: (_d = babelResult === null || babelResult === void 0 ? void 0 : babelResult.code) !== null && _d !== void 0 ? _d : '',
+                    contents: await transformWithBabelCached(args.path, (_c = typescriptResult.content) !== null && _c !== void 0 ? _c : '', pluginOptions, babelMemoryCache),
                     loader: 'js',
                 };
             });
             build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
-                var _a;
                 const data = await fs_1.promises.readFile(args.path, 'utf-8');
-                const forceAsyncTransformation = !/[\\/][_f]?esm2015[\\/]/.test(args.path) && /async\s+function\s*\*/.test(data);
-                const shouldLink = await (0, webpack_loader_1.requiresLinking)(args.path, data);
-                const useInputSourcemap = pluginOptions.sourcemap &&
-                    (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
-                // If no additional transformations are needed, return the TypeScript output directly
-                if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations && !shouldLink) {
-                    return {
-                        // Strip sourcemaps if they should not be used
-                        contents: useInputSourcemap
-                            ? data
-                            : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
-                        loader: 'js',
-                    };
-                }
-                const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(args.path);
-                const linkerPluginCreator = (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin;
-                const result = await (0, core_1.transformAsync)(data, {
-                    filename: args.path,
-                    inputSourceMap: (useInputSourcemap ? undefined : false),
-                    sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
-                    compact: false,
-                    configFile: false,
-                    babelrc: false,
-                    browserslistConfigFile: false,
-                    plugins: [],
-                    presets: [
-                        [
-                            application_1.default,
-                            {
-                                angularLinker: {
-                                    shouldLink,
-                                    jitMode: false,
-                                    linkerPluginCreator,
-                                },
-                                forceAsyncTransformation,
-                                optimize: pluginOptions.advancedOptimizations && {
-                                    looseEnums: angularPackage,
-                                    pureTopLevel: angularPackage,
-                                },
-                            },
-                        ],
-                    ],
-                });
                 return {
-                    contents: (_a = result === null || result === void 0 ? void 0 : result.code) !== null && _a !== void 0 ? _a : data,
+                    contents: await transformWithBabelCached(args.path, data, pluginOptions, babelMemoryCache),
                     loader: 'js',
                 };
             });
@@ -386,3 +344,69 @@ function createFileEmitter(program, transformers = {}, onAfterEmit) {
         return { content, dependencies: [] };
     };
 }
+async function transformWithBabel(filename, data, pluginOptions) {
+    var _a;
+    const forceAsyncTransformation = !/[\\/][_f]?esm2015[\\/]/.test(filename) && /async\s+function\s*\*/.test(data);
+    const shouldLink = await (0, webpack_loader_1.requiresLinking)(filename, data);
+    const useInputSourcemap = pluginOptions.sourcemap &&
+        (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(filename));
+    // If no additional transformations are needed, return the data directly
+    if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations && !shouldLink) {
+        // Strip sourcemaps if they should not be used
+        return useInputSourcemap ? data : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '');
+    }
+    const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(filename);
+    const linkerPluginCreator = shouldLink
+        ? (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin
+        : undefined;
+    const result = await (0, core_1.transformAsync)(data, {
+        filename,
+        inputSourceMap: (useInputSourcemap ? undefined : false),
+        sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
+        compact: false,
+        configFile: false,
+        babelrc: false,
+        browserslistConfigFile: false,
+        plugins: [],
+        presets: [
+            [
+                application_1.default,
+                {
+                    angularLinker: {
+                        shouldLink,
+                        jitMode: false,
+                        linkerPluginCreator,
+                    },
+                    forceAsyncTransformation,
+                    optimize: pluginOptions.advancedOptimizations && {
+                        looseEnums: angularPackage,
+                        pureTopLevel: angularPackage,
+                    },
+                },
+            ],
+        ],
+    });
+    return (_a = result === null || result === void 0 ? void 0 : result.code) !== null && _a !== void 0 ? _a : data;
+}
+/**
+ * Transforms JavaScript file data using the babel transforms setup in transformWithBabel. The
+ * supplied cache will be used to avoid repeating the transforms for data that has previously
+ * been transformed such as in a previous rebuild cycle.
+ * @param filename The file path of the data to be transformed.
+ * @param data The file data that will be transformed.
+ * @param pluginOptions Compiler plugin options that will be used to control the transformation.
+ * @param cache A cache of previously transformed data that will be used to avoid repeat transforms.
+ * @returns A promise containing the transformed data.
+ */
+async function transformWithBabelCached(filename, data, pluginOptions, cache) {
+    // The pre-transformed data is used as a cache key. Since the cache is memory only,
+    // the options cannot change and do not need to be represented in the key. If the
+    // cache is later stored to disk, then the options that affect transform output
+    // would need to be added to the key as well.
+    let result = cache.get(data);
+    if (result === undefined) {
+        result = await transformWithBabel(filename, data, pluginOptions);
+        cache.set(data, result);
+    }
+    return result;
+}

package/src/builders/browser-esbuild/esbuild.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BuilderContext } from '@angular-devkit/architect';
-import { BuildFailure, BuildOptions, BuildResult, Message, OutputFile } from 'esbuild';
+import { BuildFailure, BuildInvalidate, BuildOptions, BuildResult, Message, OutputFile } from 'esbuild';
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.
@@ -19,11 +19,12 @@ export declare function isEsBuildFailure(value: unknown): value is BuildFailure;
  * All builds use the `write` option with a value of `false` to allow for the output files
  * build result array to be populated.
  *
- * @param options The esbuild options object to use when building.
+ * @param optionsOrInvalidate The esbuild options object to use when building or the invalidate object
+ * returned from an incremental build to perform an additional incremental build.
  * @returns If output files are generated, the full esbuild BuildResult; if not, the
  * warnings and errors for the attempted build.
  */
-export declare function bundle(options: BuildOptions): Promise<(BuildResult & {
+export declare function bundle(optionsOrInvalidate: BuildOptions | BuildInvalidate): Promise<(BuildResult & {
     outputFiles: OutputFile[];
 }) | (BuildFailure & {
     outputFiles?: never;

package/src/builders/browser-esbuild/esbuild.js

@@ -24,16 +24,22 @@ exports.isEsBuildFailure = isEsBuildFailure;
  * All builds use the `write` option with a value of `false` to allow for the output files
  * build result array to be populated.
  *
- * @param options The esbuild options object to use when building.
+ * @param optionsOrInvalidate The esbuild options object to use when building or the invalidate object
+ * returned from an incremental build to perform an additional incremental build.
  * @returns If output files are generated, the full esbuild BuildResult; if not, the
  * warnings and errors for the attempted build.
  */
-async function bundle(options) {
+async function bundle(optionsOrInvalidate) {
     try {
-        return await (0, esbuild_1.build)({
-            ...options,
-            write: false,
-        });
+        if (typeof optionsOrInvalidate === 'function') {
+            return (await optionsOrInvalidate());
+        }
+        else {
+            return await (0, esbuild_1.build)({
+                ...optionsOrInvalidate,
+                write: false,
+            });
+        }
     }
     catch (failure) {
         // Build failures will throw an exception which contains errors/warnings

package/src/builders/browser-esbuild/experimental-warnings.js

@@ -24,9 +24,6 @@ const UNSUPPORTED_OPTIONS = [
     'inlineStyleLanguage',
     // The following option has no effect until preprocessors are supported
     // 'stylePreprocessorOptions',
-    // * Watch mode
-    'watch',
-    'poll',
     // * Deprecated
     'deployUrl',
     // * Always enabled with esbuild

package/src/builders/browser-esbuild/index.d.ts

@@ -10,10 +10,10 @@ import { Schema as BrowserBuilderOptions } from './schema';
 /**
  * Main execution function for the esbuild-based application builder.
  * The options are compatible with the Webpack-based builder.
- * @param options The browser builder options to use when setting up the application build
+ * @param initialOptions The browser builder options to use when setting up the application build
  * @param context The Architect builder context object
- * @returns A promise with the builder result output
+ * @returns An async iterable with the builder result output
  */
-export declare function buildEsbuildBrowser(options: BrowserBuilderOptions, context: BuilderContext): Promise<BuilderOutput>;
+export declare function buildEsbuildBrowser(initialOptions: BrowserBuilderOptions, context: BuilderContext): AsyncIterable<BuilderOutput>;
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<BrowserBuilderOptions & import("../../../../core/src").JsonObject>;
 export default _default;