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

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

@@ -46,7 +46,7 @@ async function getDevServerConfig(wco) {
     if (hmr) {
         extraRules.push({
             loader: hmr_loader_1.HmrLoader,
-            include: [main].map((p) => (0, path_1.resolve)(wco.root, p)),
+            include: [(0, path_1.resolve)(wco.root, main)],
         });
     }
     const extraPlugins = [];

package/src/webpack/configs/styles.js

@@ -97,10 +97,6 @@ function getStylesConfig(wco) {
         // Add plugin to remove hashes from lazy styles.
         extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
     }
-    if (globalStylePaths.some((p) => p.endsWith('.styl'))) {
-        wco.logger.warn('Stylus usage is deprecated and will be removed in a future major version. ' +
-            'To opt-out of the deprecated behaviour, please migrate to another stylesheet language.');
-    }
     const sassImplementation = new sass_service_1.SassWorkerImplementation();
     const sassTildeUsageMessage = new Set();
     extraPlugins.push({
@@ -329,22 +325,6 @@ function getStylesConfig(wco) {
                 },
             ],
         },
-        {
-            extensions: ['styl'],
-            use: [
-                {
-                    loader: require.resolve('stylus-loader'),
-                    options: {
-                        sourceMap: cssSourceMap,
-                        stylusOptions: {
-                            compress: false,
-                            sourceMap: { comment: false },
-                            paths: includePaths,
-                        },
-                    },
-                },
-            ],
-        },
     ];
     return {
         entry: entryPoints,

package/src/webpack/plugins/any-component-style-budget-checker.js

@@ -59,7 +59,7 @@ class AnyComponentStyleBudgetChecker {
                 if (!compilation.compiler.parentCompilation) {
                     return;
                 }
-                const cssExtensions = ['.css', '.scss', '.less', '.styl', '.sass'];
+                const cssExtensions = ['.css', '.scss', '.less', '.sass'];
                 const componentStyles = Object.keys(compilation.assets)
                     .filter((name) => cssExtensions.includes(path.extname(name)))
                     .map((name) => ({

package/src/webpack/plugins/css-optimizer-plugin.d.ts

@@ -32,5 +32,4 @@ export declare class CssOptimizerPlugin {
      */
     private optimize;
     private addWarnings;
-    private transformSupportedBrowsersToTargets;
 }

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

@@ -8,6 +8,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CssOptimizerPlugin = void 0;
+const esbuild_targets_1 = require("../../utils/esbuild-targets");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const esbuild_executor_1 = require("./esbuild-executor");
 /**
@@ -24,7 +25,7 @@ class CssOptimizerPlugin {
     constructor(options) {
         this.esbuild = new esbuild_executor_1.EsbuildExecutor();
         if (options === null || options === void 0 ? void 0 : options.supportedBrowsers) {
-            this.targets = this.transformSupportedBrowsersToTargets(options.supportedBrowsers);
+            this.targets = (0, esbuild_targets_1.transformSupportedBrowsersToTargets)(options.supportedBrowsers);
         }
     }
     apply(compiler) {
@@ -38,7 +39,7 @@ class CssOptimizerPlugin {
                 const cache = compilation.options.cache && compilation.getCache(PLUGIN_NAME);
                 logger.time('optimize css assets');
                 for (const assetName of Object.keys(compilationAssets)) {
-                    if (!/\.(?:css|scss|sass|less|styl)$/.test(assetName)) {
+                    if (!/\.(?:css|scss|sass|less)$/.test(assetName)) {
                         continue;
                     }
                     const asset = compilation.getAsset(assetName);
@@ -117,29 +118,5 @@ class CssOptimizerPlugin {
             }
         }
     }
-    transformSupportedBrowsersToTargets(supportedBrowsers) {
-        const transformed = [];
-        // https://esbuild.github.io/api/#target
-        const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
-        for (const browser of supportedBrowsers) {
-            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 uses ranges `15.2-15.3` versions but only the lowest is required
-            // to perform minimum supported feature checks. esbuild also expects a single version.
-            [version] = version.split('-');
-            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);
-            }
-        }
-        return transformed.length ? transformed : undefined;
-    }
 }
 exports.CssOptimizerPlugin = CssOptimizerPlugin;

package/src/webpack/plugins/hmr/hmr-loader.d.ts

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export declare const HmrLoader: string;
-export default function (this: any, content: string, map: any): void;
+export default function localizeExtractLoader(this: import('webpack').LoaderContext<{}>, content: string, map: Parameters<import('webpack').LoaderDefinitionFunction>[1]): void;

package/src/webpack/plugins/hmr/hmr-loader.js

@@ -11,10 +11,7 @@ exports.HmrLoader = void 0;
 const path_1 = require("path");
 exports.HmrLoader = __filename;
 const hmrAcceptPath = (0, path_1.join)(__dirname, './hmr-accept.js').replace(/\\/g, '/');
-function default_1(content, 
-// Source map types are broken in the webpack type definitions
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-map) {
+function localizeExtractLoader(content, map) {
     const source = `${content}
 
   // HMR Accept Code
@@ -24,4 +21,4 @@ map) {
     this.callback(null, source, map);
     return;
 }
-exports.default = default_1;
+exports.default = localizeExtractLoader;

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

@@ -5,7 +5,6 @@
  * 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 { ScriptTarget } from 'typescript';
 import type { Compiler } from 'webpack';
 /**
  * The options used to configure the {@link JavaScriptOptimizerPlugin}.
@@ -29,11 +28,9 @@ export interface JavaScriptOptimizerOptions {
      */
     sourcemap?: boolean;
     /**
-     * The ECMAScript version that should be used when generating output code.
-     * The optimizer will not adjust the output code with features present in newer
-     * ECMAScript versions.
+     * A list of supported browsers that is used for output code.
      */
-    target: ScriptTarget;
+    supportedBrowsers?: string[];
     /**
      * Enables the retention of identifier names and ensures that function and class names are
      * present in the output code.
@@ -61,7 +58,8 @@ export interface JavaScriptOptimizerOptions {
  * optimizations not yet implemented by `esbuild`.
  */
 export declare class JavaScriptOptimizerPlugin {
-    options: JavaScriptOptimizerOptions;
+    private options;
+    private targets;
     constructor(options: JavaScriptOptimizerOptions);
     apply(compiler: Compiler): void;
 }

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

@@ -12,8 +12,8 @@ var __importDefault = (this && this.__importDefault) || function (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");
+const esbuild_targets_1 = require("../../utils/esbuild-targets");
 const esbuild_executor_1 = require("./esbuild-executor");
 /**
  * The maximum number of Workers that will be created to execute optimize tasks.
@@ -34,6 +34,9 @@ const PLUGIN_NAME = 'angular-javascript-optimizer';
 class JavaScriptOptimizerPlugin {
     constructor(options) {
         this.options = options;
+        if (options.supportedBrowsers) {
+            this.targets = (0, esbuild_targets_1.transformSupportedBrowsersToTargets)(options.supportedBrowsers);
+        }
     }
     apply(compiler) {
         const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
@@ -90,25 +93,13 @@ class JavaScriptOptimizerPlugin {
                         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 = 'next';
-                    }
-                    else {
-                        target = Number(typescript_1.ScriptTarget[this.options.target].slice(2));
-                    }
-                }
                 // Setup the options used by all worker tasks
                 const optimizeOptions = {
                     sourcemap: this.options.sourcemap,
                     define,
                     keepNames: this.options.keepNames,
                     keepIdentifierNames: this.options.keepIdentifierNames,
-                    target,
+                    target: this.targets,
                     removeLicenses: this.options.removeLicenses,
                     advanced: this.options.advanced,
                     // Perform a single native esbuild support check.

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

@@ -39,9 +39,10 @@ export interface OptimizeRequestOptions {
      */
     sourcemap?: boolean;
     /**
-     * Specifies the target ECMAScript version for the output code.
+     * Specifies the list of supported esbuild targets.
+     * @see: https://esbuild.github.io/api/#target
      */
-    target: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020 | 'next';
+    target?: string[];
     /**
      * 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

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

@@ -26,9 +26,7 @@ async function default_1({ asset, options }) {
     // esbuild is used as a first pass
     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, 
-    // Terser only supports up to ES2020.
-    options.target === 'next' ? 2020 : options.target, options.advanced);
+    const terserResult = await optimizeWithTerser(asset.name, esbuildResult.code, options.sourcemap, options.advanced);
     // Merge intermediate sourcemaps with input sourcemap if enabled
     let fullSourcemap;
     if (options.sourcemap) {
@@ -56,49 +54,26 @@ exports.default = default_1;
  * @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.keepIdentifierNames,
-            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,
-            // This option should always be disabled for browser builds as we don't rely on `.name`
-            // and causes deadcode to be retained which makes `NG_BUILD_MANGLE` unusable to investigate tree-shaking issues.
-            // We enable `keepNames` only for server builds as Domino relies on `.name`.
-            // Once we no longer rely on Domino for SSR we should be able to remove this.
-            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;
+    return esbuild.transform(content, {
+        minifyIdentifiers: !options.keepIdentifierNames,
+        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,
+        // This option should always be disabled for browser builds as we don't rely on `.name`
+        // and causes deadcode to be retained which makes `NG_BUILD_MANGLE` unusable to investigate tree-shaking issues.
+        // We enable `keepNames` only for server builds as Domino relies on `.name`.
+        // Once we no longer rely on Domino for SSR we should be able to remove this.
+        keepNames: options.keepNames,
+        target: options.target,
+    });
 }
 /**
  * Optimizes a JavaScript asset using terser.
@@ -106,17 +81,17 @@ async function optimizeWithEsbuild(content, name, options) {
  * @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) {
+async function optimizeWithTerser(name, code, sourcemaps, advanced) {
     const result = await (0, terser_1.minify)({ [name]: code }, {
         compress: {
             passes: advanced ? 2 : 1,
             pure_getters: advanced,
         },
-        ecma: target,
+        // terser only supports up to ES2020
+        ecma: 2020,
         // 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

package/src/webpack/plugins/typescript.js

@@ -11,52 +11,41 @@ exports.createIvyPlugin = void 0;
 const webpack_1 = require("@ngtools/webpack");
 const typescript_1 = require("typescript");
 function createIvyPlugin(wco, aot, tsconfig) {
-    const { buildOptions } = wco;
+    var _a, _b;
+    var _c;
+    const { buildOptions, tsConfig } = wco;
     const optimize = buildOptions.optimization.scripts;
     const compilerOptions = {
         sourceMap: buildOptions.sourceMap.scripts,
         declaration: false,
         declarationMap: false,
     };
+    if (tsConfig.options.target === undefined || tsConfig.options.target < typescript_1.ScriptTarget.ES2022) {
+        tsConfig.options.target = typescript_1.ScriptTarget.ES2022;
+        // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
+        // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
+        // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
+        (_a = (_c = tsConfig.options).useDefineForClassFields) !== null && _a !== void 0 ? _a : (_c.useDefineForClassFields = false);
+        wco.logger.warn('TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and ' +
+            '"false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. ' +
+            'For more information, see https://github.com/browserslist/browserslist');
+    }
     if (buildOptions.preserveSymlinks !== undefined) {
         compilerOptions.preserveSymlinks = buildOptions.preserveSymlinks;
     }
-    // Outputting ES2015 from TypeScript is the required minimum for the build optimizer passes.
-    // Downleveling to ES5 will occur after the build optimizer passes via babel which is the same
-    // as for third-party libraries. This greatly reduces the complexity of static analysis.
-    if (wco.scriptTarget < typescript_1.ScriptTarget.ES2015) {
-        compilerOptions.target = typescript_1.ScriptTarget.ES2015;
-        wco.logger.warn('DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.');
-    }
     const fileReplacements = {};
     if (buildOptions.fileReplacements) {
         for (const replacement of buildOptions.fileReplacements) {
             fileReplacements[replacement.replace] = replacement.with;
         }
     }
-    let inlineStyleFileExtension;
-    switch (buildOptions.inlineStyleLanguage) {
-        case 'less':
-            inlineStyleFileExtension = 'less';
-            break;
-        case 'sass':
-            inlineStyleFileExtension = 'sass';
-            break;
-        case 'scss':
-            inlineStyleFileExtension = 'scss';
-            break;
-        case 'css':
-        default:
-            inlineStyleFileExtension = 'css';
-            break;
-    }
     return new webpack_1.AngularWebpackPlugin({
         tsconfig,
         compilerOptions,
         fileReplacements,
         jitMode: !aot,
         emitNgModuleScope: !optimize,
-        inlineStyleFileExtension,
+        inlineStyleFileExtension: (_b = buildOptions.inlineStyleLanguage) !== null && _b !== void 0 ? _b : 'css',
     });
 }
 exports.createIvyPlugin = createIvyPlugin;

package/src/webpack/utils/helpers.d.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { ObjectPattern } from 'copy-webpack-plugin';
-import { ScriptTarget } from 'typescript';
 import type { Configuration, WebpackOptionsNormalized } from 'webpack';
 import { AssetPatternClass, OutputHashing, ScriptElement, StyleElement } from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
@@ -31,4 +30,3 @@ export declare function globalScriptsByBundleName(root: string, scripts: ScriptE
 export declare function assetPatterns(root: string, assets: AssetPatternClass[]): ObjectPattern[];
 export declare function externalizePackages(context: string, request: string | undefined, callback: (error?: Error, result?: string) => void): void;
 export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;
-export declare function getMainFieldsAndConditionNames(target: ScriptTarget, platformServer: boolean): Pick<WebpackOptionsNormalized['resolve'], 'mainFields' | 'conditionNames'>;

package/src/webpack/utils/helpers.js

@@ -33,12 +33,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMainFieldsAndConditionNames = exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const crypto_1 = require("crypto");
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
-const typescript_1 = require("typescript");
 const schema_1 = require("../../builders/browser/schema");
 const package_version_1 = require("../../utils/package-version");
 function getOutputHashFormat(outputHashing = schema_1.OutputHashing.None, length = 20) {
@@ -288,18 +287,3 @@ function getStatsOptions(verbose = false) {
         : webpackOutputOptions;
 }
 exports.getStatsOptions = getStatsOptions;
-function getMainFieldsAndConditionNames(target, platformServer) {
-    const mainFields = platformServer
-        ? ['es2015', 'module', 'main']
-        : ['es2015', 'browser', 'module', 'main'];
-    const conditionNames = ['es2015', '...'];
-    if (target >= typescript_1.ScriptTarget.ES2020) {
-        mainFields.unshift('es2020');
-        conditionNames.unshift('es2020');
-    }
-    return {
-        mainFields,
-        conditionNames,
-    };
-}
-exports.getMainFieldsAndConditionNames = getMainFieldsAndConditionNames;