@angular-devkit/build-angular 15.1.0-next.1 → 15.1.0-next.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.1.0-next.1",
+  "version": "15.1.0-next.2",
   "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.1501.0-next.1",
-    "@angular-devkit/build-webpack": "0.1501.0-next.1",
-    "@angular-devkit/core": "15.1.0-next.1",
+    "@angular-devkit/architect": "0.1501.0-next.2",
+    "@angular-devkit/build-webpack": "0.1501.0-next.2",
+    "@angular-devkit/core": "15.1.0-next.2",
     "@babel/core": "7.20.5",
     "@babel/generator": "7.20.5",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,18 +20,18 @@
     "@babel/runtime": "7.20.6",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.1.0-next.1",
+    "@ngtools/webpack": "15.1.0-next.2",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.13",
     "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "4.21.4",
-    "cacache": "17.0.2",
+    "cacache": "17.0.3",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.2",
-    "esbuild-wasm": "0.15.16",
+    "esbuild-wasm": "0.16.2",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -41,8 +41,8 @@
     "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.1",
-    "magic-string": "0.26.7",
-    "mini-css-extract-plugin": "2.7.1",
+    "magic-string": "0.27.0",
+    "mini-css-extract-plugin": "2.7.2",
     "open": "8.4.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
@@ -56,7 +56,7 @@
     "semver": "7.3.8",
     "source-map-loader": "4.0.1",
     "source-map-support": "0.5.21",
-    "terser": "5.16.0",
+    "terser": "5.16.1",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.1",
@@ -67,7 +67,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.16"
+    "esbuild": "0.16.2"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",

package/src/babel/presets/application.d.ts

@@ -31,7 +31,6 @@ export interface ApplicationPresetOptions {
         jitMode: boolean;
         linkerPluginCreator: typeof import('@angular/compiler-cli/linker/babel').createEs2015LinkerPlugin;
     };
-    forcePresetEnv?: boolean;
     forceAsyncTransformation?: boolean;
     instrumentCode?: {
         includedBasePath: string;

package/src/babel/presets/application.js

@@ -29,10 +29,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const assert_1 = require("assert");
+const browserslist_1 = __importDefault(require("browserslist"));
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+/**
+ * List of browsers which are affected by a WebKit bug where class field
+ * initializers might have incorrect variable scopes.
+ *
+ * See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
+ * See: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
+ */
+const safariClassFieldScopeBugBrowsers = new Set((0, browserslist_1.default)([
+    // Safari <15 is technically not supported via https://angular.io/guide/browser-support,
+    // but we apply the workaround if forcibly selected.
+    'Safari <=15',
+    'iOS <=15',
+]));
 function createI18nDiagnostics(reporter) {
     const diagnostics = new (class {
         constructor() {
@@ -113,13 +130,24 @@ function default_1(api, options) {
             },
         }));
     }
-    if (options.forcePresetEnv) {
+    // Applications code ES version can be controlled using TypeScript's `target` option.
+    // However, this doesn't effect libraries and hence we use preset-env to downlevel ES features
+    // based on the supported browsers in browserslist.
+    if (options.supportedBrowsers) {
+        const includePlugins = [];
+        // If a Safari browser affected by the class field scope bug is selected, we
+        // downlevel class properties by ensuring the class properties Babel plugin
+        // is always included- regardless of the preset-env targets.
+        if (options.supportedBrowsers.some((b) => safariClassFieldScopeBugBrowsers.has(b))) {
+            includePlugins.push('@babel/plugin-proposal-class-properties');
+        }
         presets.push([
             require('@babel/preset-env').default,
             {
                 bugfixes: true,
                 modules: false,
                 targets: options.supportedBrowsers,
+                include: includePlugins,
                 exclude: ['transform-typeof-symbol'],
             },
         ]);

package/src/babel/webpack-loader.js

@@ -51,13 +51,12 @@ exports.default = (0, babel_loader_1.custom)(() => {
     });
     return {
         async customOptions(options, { source, map }) {
-            var _a, _b, _c;
+            var _a, _b;
             const { i18n, aot, optimize, instrumentCode, supportedBrowsers, ...rawOptions } = options;
             // Must process file if plugins are added
             let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
             const customOptions = {
                 forceAsyncTransformation: false,
-                forcePresetEnv: false,
                 angularLinker: undefined,
                 i18n: undefined,
                 instrumentCode: undefined,
@@ -76,20 +75,15 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 };
                 shouldProcess = true;
             }
-            // Analyze for ES target processing
-            if ((_a = customOptions.supportedBrowsers) === null || _a === void 0 ? void 0 : _a.length) {
-                // Applications code ES version can be controlled using TypeScript's `target` option.
-                // However, this doesn't effect libraries and hence we use preset-env to downlevel ES fetaures
-                // based on the supported browsers in browserlist.
-                customOptions.forcePresetEnv = true;
-            }
             // Application code (TS files) will only contain native async if target is ES2017+.
             // However, third-party libraries can regardless of the target option.
             // APF packages with code in [f]esm2015 directories is downlevelled to ES2015 and
             // will not have native async.
             customOptions.forceAsyncTransformation =
                 !/[\\/][_f]?esm2015[\\/]/.test(this.resourcePath) && source.includes('async');
-            shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forcePresetEnv || false);
+            shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation ||
+                customOptions.supportedBrowsers !== undefined ||
+                false);
             // Analyze for i18n inlining
             if (i18n &&
                 !/[\\/]@angular[\\/](?:compiler|localize)/.test(this.resourcePath) &&
@@ -128,7 +122,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                     pureTopLevel: angularPackage,
                     // JavaScript modules that are marked as side effect free are considered to have
                     // no decorators that contain non-local effects.
-                    wrapDecorators: !!((_c = (_b = this._module) === null || _b === void 0 ? void 0 : _b.factoryMeta) === null || _c === void 0 ? void 0 : _c.sideEffectFree),
+                    wrapDecorators: !!((_b = (_a = this._module) === null || _a === void 0 ? void 0 : _a.factoryMeta) === null || _b === void 0 ? void 0 : _b.sideEffectFree),
                 };
                 shouldProcess = true;
             }

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

@@ -190,19 +190,7 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
         entryNames: outputNames.bundles,
         assetNames: outputNames.media,
         target,
-        supported: {
-            // Native async/await is not supported with Zone.js. Disabling support here will cause
-            // esbuild to downlevel async/await and for await...of to a Zone.js supported form. However, esbuild
-            // does not currently support downleveling async generators. Instead babel is used within the JS/TS
-            // loader to perform the downlevel transformation.
-            // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
-            'async-await': false,
-            // V8 currently has a performance defect involving object spread operations that can cause signficant
-            // degradation in runtime performance. By not supporting the language feature here, a downlevel form
-            // will be used instead which provides a workaround for the performance issue.
-            // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
-            'object-rest-spread': false,
-        },
+        supported: getFeatureSupport(target),
         mainFields: ['es2020', 'browser', 'module', 'main'],
         conditions: ['es2020', 'es2015', 'module'],
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
@@ -249,6 +237,56 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
         },
     };
 }
+/**
+ * Generates a syntax feature object map for Angular applications based on a list of targets.
+ * A full set of feature names can be found here: https://esbuild.github.io/api/#supported
+ * @param target An array of browser/engine targets in the format accepted by the esbuild `target` option.
+ * @returns An object that can be used with the esbuild build `supported` option.
+ */
+function getFeatureSupport(target) {
+    const supported = {
+        // Native async/await is not supported with Zone.js. Disabling support here will cause
+        // esbuild to downlevel async/await and for await...of to a Zone.js supported form. However, esbuild
+        // does not currently support downleveling async generators. Instead babel is used within the JS/TS
+        // loader to perform the downlevel transformation.
+        // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
+        'async-await': false,
+        // V8 currently has a performance defect involving object spread operations that can cause signficant
+        // degradation in runtime performance. By not supporting the language feature here, a downlevel form
+        // will be used instead which provides a workaround for the performance issue.
+        // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
+        'object-rest-spread': false,
+    };
+    // Detect Safari browser versions that have a class field behavior bug
+    // See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
+    // See: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
+    let safariClassFieldScopeBug = false;
+    for (const browser of target) {
+        let majorVersion;
+        if (browser.startsWith('ios')) {
+            majorVersion = Number(browser.slice(3, 5));
+        }
+        else if (browser.startsWith('safari')) {
+            majorVersion = Number(browser.slice(6, 8));
+        }
+        else {
+            continue;
+        }
+        // Technically, 14.0 is not broken but rather does not have support. However, the behavior
+        // is identical since it would be set to false by esbuild if present as a target.
+        if (majorVersion === 14 || majorVersion === 15) {
+            safariClassFieldScopeBug = true;
+            break;
+        }
+    }
+    // If class field support cannot be used set to false; otherwise leave undefined to allow
+    // esbuild to use `target` to determine support.
+    if (safariClassFieldScopeBug) {
+        supported['class-field'] = false;
+        supported['class-static-field'] = false;
+    }
+    return supported;
+}
 function createGlobalStylesBundleOptions(options, target) {
     const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, watch, } = options;
     const buildOptions = (0, stylesheets_1.createStylesheetBundleOptions)({

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

@@ -22,7 +22,6 @@ export interface JavaScriptTransformerOptions {
  */
 export declare class JavaScriptTransformer {
     #private;
-    private options;
     constructor(options: JavaScriptTransformerOptions, maxThreads?: number);
     /**
      * Performs JavaScript transformations on a file from the filesystem.

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

@@ -20,7 +20,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _JavaScriptTransformer_workerPool;
+var _JavaScriptTransformer_workerPool, _JavaScriptTransformer_commonOptions;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JavaScriptTransformer = void 0;
 const piscina_1 = __importDefault(require("piscina"));
@@ -33,12 +33,19 @@ const piscina_1 = __importDefault(require("piscina"));
  */
 class JavaScriptTransformer {
     constructor(options, maxThreads) {
-        this.options = options;
         _JavaScriptTransformer_workerPool.set(this, void 0);
+        _JavaScriptTransformer_commonOptions.set(this, void 0);
         __classPrivateFieldSet(this, _JavaScriptTransformer_workerPool, new piscina_1.default({
             filename: require.resolve('./javascript-transformer-worker'),
             maxThreads,
         }), "f");
+        // Extract options to ensure only the named options are serialized and sent to the worker
+        const { sourcemap, thirdPartySourcemaps = false, advancedOptimizations = false } = options;
+        __classPrivateFieldSet(this, _JavaScriptTransformer_commonOptions, {
+            sourcemap,
+            thirdPartySourcemaps,
+            advancedOptimizations,
+        }, "f");
     }
     /**
      * Performs JavaScript transformations on a file from the filesystem.
@@ -51,7 +58,7 @@ class JavaScriptTransformer {
         // they may need linking. The data is also not yet available to perform most transformation checks.
         return __classPrivateFieldGet(this, _JavaScriptTransformer_workerPool, "f").run({
             filename,
-            ...this.options,
+            ...__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f"),
         });
     }
     /**
@@ -66,7 +73,7 @@ class JavaScriptTransformer {
         // Perform a quick test to determine if the data needs any transformations.
         // This allows directly returning the data without the worker communication overhead.
         let forceAsyncTransformation;
-        if (skipLinker && !this.options.advancedOptimizations) {
+        if (skipLinker && !__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f").advancedOptimizations) {
             // If the linker is being skipped and no optimizations are needed, only async transformation is left.
             // This checks for async generator functions. All other async transformation is handled by esbuild.
             forceAsyncTransformation = data.includes('async') && /async\s+function\s*\*/.test(data);
@@ -80,7 +87,7 @@ class JavaScriptTransformer {
             // Send the async check result if present to avoid rechecking in the worker
             forceAsyncTransformation,
             skipLinker,
-            ...this.options,
+            ...__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f"),
         });
     }
     /**
@@ -92,4 +99,4 @@ class JavaScriptTransformer {
     }
 }
 exports.JavaScriptTransformer = JavaScriptTransformer;
-_JavaScriptTransformer_workerPool = new WeakMap();
+_JavaScriptTransformer_workerPool = new WeakMap(), _JavaScriptTransformer_commonOptions = new WeakMap();

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

@@ -25,7 +25,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     crossOrigin: import("./schema").CrossOrigin | undefined;
     externalDependencies: string[] | undefined;
     poll: number | undefined;
-    preserveSymlinks: boolean | undefined;
+    preserveSymlinks: boolean;
     stylePreprocessorOptions: import("./schema").StylePreprocessorOptions | undefined;
     subresourceIntegrity: boolean | undefined;
     verbose: boolean | undefined;

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

@@ -131,7 +131,8 @@ async function normalizeOptions(context, projectName, options) {
         crossOrigin,
         externalDependencies,
         poll,
-        preserveSymlinks,
+        // If not explicitly set, default to the Node.js process argument
+        preserveSymlinks: preserveSymlinks !== null && preserveSymlinks !== void 0 ? preserveSymlinks : process.execArgv.includes('--preserve-symlinks'),
         stylePreprocessorOptions,
         subresourceIntegrity,
         verbose,

package/src/utils/esbuild-targets.js

@@ -15,9 +15,18 @@ exports.transformSupportedBrowsersToTargets = void 0;
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target
-    const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios', 'node']);
+    const esBuildSupportedBrowsers = new Set([
+        'chrome',
+        'edge',
+        'firefox',
+        'ie',
+        'ios',
+        'node',
+        'opera',
+        'safari',
+    ]);
     for (const browser of supportedBrowsers) {
-        let [browserName, version] = browser.split(' ');
+        let [browserName, version] = browser.toLowerCase().split(' ');
         // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
         if (browserName === 'ios_saf') {
             browserName = 'ios';
@@ -31,6 +40,12 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
                 // a Technology Preview (TP) of Safari is assumed to support all currently known features.
                 version = '999';
             }
+            else if (!version.includes('.')) {
+                // A lone major version is considered by esbuild to include all minor versions. However,
+                // browserslist does not and is also inconsistent in its `.0` version naming. For example,
+                // Safari 15.0 is named `safari 15` but Safari 16.0 is named `safari 16.0`.
+                version += '.0';
+            }
             transformed.push(browserName + version);
         }
     }

package/src/utils/index-file/augment-index-html.js

@@ -125,7 +125,7 @@ async function augmentIndexHtml(params) {
         }
         rewriter.emitEndTag(tag);
     });
-    const content = await transformedContent;
+    const content = await transformedContent();
     return {
         content: linkTags.length || scriptTags.length
             ? // In case no body/head tags are not present (dotnet partial templates)

package/src/utils/index-file/html-rewriting-stream.d.ts

@@ -7,5 +7,5 @@
  */
 export declare function htmlRewritingStream(content: string): Promise<{
     rewriter: import('parse5-html-rewriting-stream');
-    transformedContent: Promise<string>;
+    transformedContent: () => Promise<string>;
 }>;

package/src/utils/index-file/html-rewriting-stream.js

@@ -37,26 +37,30 @@ async function htmlRewritingStream(content) {
     const rewriter = new (await Promise.resolve().then(() => __importStar(require('parse5-html-rewriting-stream')))).default();
     return {
         rewriter,
-        transformedContent: new Promise((resolve) => {
-            new stream_1.Readable({
-                encoding: 'utf8',
-                read() {
-                    this.push(Buffer.from(content));
-                    this.push(null);
-                },
-            })
-                .pipe(rewriter)
-                .pipe(new stream_1.Writable({
-                write(chunk, encoding, callback) {
-                    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk, encoding) : chunk);
-                    callback();
-                },
-                final(callback) {
-                    callback();
-                    resolve(Buffer.concat(chunks).toString());
-                },
-            }));
-        }),
+        transformedContent: () => {
+            return new Promise((resolve) => {
+                new stream_1.Readable({
+                    encoding: 'utf8',
+                    read() {
+                        this.push(Buffer.from(content));
+                        this.push(null);
+                    },
+                })
+                    .pipe(rewriter)
+                    .pipe(new stream_1.Writable({
+                    write(chunk, encoding, callback) {
+                        chunks.push(typeof chunk === 'string'
+                            ? Buffer.from(chunk, encoding)
+                            : chunk);
+                        callback();
+                    },
+                    final(callback) {
+                        callback();
+                        resolve(Buffer.concat(chunks).toString());
+                    },
+                }));
+            });
+        },
     };
 }
 exports.htmlRewritingStream = htmlRewritingStream;

package/src/utils/index-file/inline-fonts.js

@@ -63,7 +63,7 @@ class InlineFontsProcessor {
         const hrefList = [];
         const existingPreconnect = new Set();
         // Collector link tags with href
-        const { rewriter: collectorStream } = await (0, html_rewriting_stream_1.htmlRewritingStream)(content);
+        const { rewriter: collectorStream, transformedContent: initCollectorStream } = await (0, html_rewriting_stream_1.htmlRewritingStream)(content);
         collectorStream.on('startTag', (tag) => {
             const { tagName, attrs } = tag;
             if (tagName !== 'link') {
@@ -95,6 +95,10 @@ class InlineFontsProcessor {
                 }
             }
         });
+        initCollectorStream().catch(() => {
+            // We don't really care about any errors here because it just initializes
+            // the rewriting stream, as we are waiting for `finish` below.
+        });
         await new Promise((resolve) => collectorStream.on('finish', resolve));
         // Download stylesheets
         const hrefsContent = new Map();
@@ -146,7 +150,7 @@ class InlineFontsProcessor {
                     break;
             }
         });
-        return transformedContent;
+        return transformedContent();
     }
     async getResponse(url) {
         var _a;

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

@@ -90,8 +90,9 @@ async function optimizeWithTerser(name, code, sourcemaps, advanced) {
             passes: advanced ? 2 : 1,
             pure_getters: advanced,
         },
-        // terser only supports up to ES2020
-        ecma: 2020,
+        // Set to ES2015 to prevent higher level features from being introduced when browserslist
+        // contains older browsers. The build system requires browsers to support ES2015 at a minimum.
+        ecma: 2015,
         // esbuild in the first pass is used to minify identifiers instead of mangle here
         mangle: false,
         // esbuild in the first pass is used to minify function names