@angular-devkit/build-angular 17.1.0-next.1 → 17.1.0-next.3

package/src/tools/esbuild/angular/jit-plugin-callbacks.js

@@ -6,13 +6,11 @@
  * 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.setupJitPluginCallbacks = void 0;
 const promises_1 = require("node:fs/promises");
-const node_path_1 = __importDefault(require("node:path"));
+const node_path_1 = require("node:path");
+const load_result_cache_1 = require("../load-result-cache");
 const uri_1 = require("./uri");
 /**
  * Loads/extracts the contents from a load callback Angular JIT entry.
@@ -27,7 +25,7 @@ const uri_1 = require("./uri");
  */
 async function loadEntry(entry, root, skipRead) {
     if (entry.startsWith('file:')) {
-        const specifier = node_path_1.default.join(root, entry.slice(5));
+        const specifier = (0, node_path_1.join)(root, entry.slice(5));
         return {
             path: specifier,
             contents: skipRead ? undefined : await (0, promises_1.readFile)(specifier, 'utf-8'),
@@ -36,7 +34,7 @@ async function loadEntry(entry, root, skipRead) {
     else if (entry.startsWith('inline:')) {
         const [importer, data] = entry.slice(7).split(';', 2);
         return {
-            path: node_path_1.default.join(root, importer),
+            path: (0, node_path_1.join)(root, importer),
             contents: Buffer.from(data, 'base64').toString(),
         };
     }
@@ -53,7 +51,7 @@ async function loadEntry(entry, root, skipRead) {
  * @param styleOptions The options to use when bundling stylesheets.
  * @param additionalResultFiles A Map where stylesheet resources will be added.
  */
-function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage) {
+function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage, loadCache) {
     const root = build.initialOptions.absWorkingDir ?? '';
     // Add a resolve callback to capture and parse any JIT URIs that were added by the
     // JIT resource TypeScript transformer.
@@ -68,13 +66,13 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
             return {
                 // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
                 // This is only necessary for custom namespaces. esbuild will handle the file namespace.
-                path: 'file:' + node_path_1.default.relative(root, node_path_1.default.join(node_path_1.default.dirname(args.importer), specifier)),
+                path: 'file:' + (0, node_path_1.relative)(root, (0, node_path_1.join)((0, node_path_1.dirname)(args.importer), specifier)),
                 namespace,
             };
         }
         else {
             // Inline data may need the importer to resolve imports/references within the content
-            const importer = node_path_1.default.relative(root, args.importer);
+            const importer = (0, node_path_1.relative)(root, args.importer);
             return {
                 path: `inline:${importer};${specifier}`,
                 namespace,
@@ -82,7 +80,7 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         }
     });
     // Add a load callback to handle Component stylesheets (both inline and external)
-    build.onLoad({ filter: /./, namespace: uri_1.JIT_STYLE_NAMESPACE }, async (args) => {
+    build.onLoad({ filter: /./, namespace: uri_1.JIT_STYLE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
         // skipRead is used here because the stylesheet bundling will read a file stylesheet
         // directly either via a preprocessor or esbuild itself.
         const entry = await loadEntry(args.path, root, true /* skipRead */);
@@ -94,24 +92,26 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         else {
             stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path, inlineStyleLanguage);
         }
-        const { contents, resourceFiles, errors, warnings, metafile } = stylesheetResult;
-        additionalResultFiles.set(entry.path, { outputFiles: resourceFiles, metafile });
+        const { contents, outputFiles, errors, warnings, metafile, referencedFiles } = stylesheetResult;
+        additionalResultFiles.set(entry.path, { outputFiles, metafile });
         return {
             errors,
             warnings,
             contents,
             loader: 'text',
+            watchFiles: referencedFiles && [...referencedFiles],
         };
-    });
+    }));
     // Add a load callback to handle Component templates
     // NOTE: While this callback supports both inline and external templates, the transformer
     // currently only supports generating URIs for external templates.
-    build.onLoad({ filter: /./, namespace: uri_1.JIT_TEMPLATE_NAMESPACE }, async (args) => {
-        const { contents } = await loadEntry(args.path, root);
+    build.onLoad({ filter: /./, namespace: uri_1.JIT_TEMPLATE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
+        const { contents, path } = await loadEntry(args.path, root);
         return {
             contents,
             loader: 'text',
+            watchFiles: [path],
         };
-    });
+    }));
 }
 exports.setupJitPluginCallbacks = setupJitPluginCallbacks;

package/src/tools/esbuild/angular/source-file-cache.js

@@ -52,7 +52,6 @@ class SourceFileCache extends Map {
         }
         for (let file of files) {
             file = path.normalize(file);
-            this.typeScriptFileCache.delete(file);
             this.loadResultCache.invalidate(file);
             // Normalize separators to allow matching TypeScript Host paths
             if (USING_WINDOWS) {

package/src/tools/esbuild/bundler-context.d.ts

@@ -20,6 +20,7 @@ export type BundleContextResult = {
         server?: Set<string>;
         browser?: Set<string>;
     };
+    externalConfiguration?: string[];
 };
 export interface InitialFileRecord {
     entrypoint: boolean;
@@ -35,7 +36,6 @@ export declare enum BuildOutputFileType {
 }
 export interface BuildOutputFile extends OutputFile {
     type: BuildOutputFileType;
-    fullOutputPath: string;
     clone: () => BuildOutputFile;
 }
 export type BundlerOptionsFactory<T extends BuildOptions = BuildOptions> = (loadCache: LoadResultCache | undefined) => T;

package/src/tools/esbuild/bundler-context.js

@@ -6,9 +6,13 @@
  * 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.BundlerContext = exports.BuildOutputFileType = void 0;
 const esbuild_1 = require("esbuild");
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_path_1 = require("node:path");
 const load_result_cache_1 = require("./load-result-cache");
 const utils_1 = require("./utils");
@@ -71,6 +75,7 @@ class BundlerContext {
         const externalImportsBrowser = new Set();
         const externalImportsServer = new Set();
         const outputFiles = [];
+        let externalConfiguration;
         for (const result of individualResults) {
             warnings.push(...result.warnings);
             if (result.errors) {
@@ -87,6 +92,12 @@ class BundlerContext {
             outputFiles.push(...result.outputFiles);
             result.externalImports.browser?.forEach((value) => externalImportsBrowser.add(value));
             result.externalImports.server?.forEach((value) => externalImportsServer.add(value));
+            if (result.externalConfiguration) {
+                externalConfiguration ??= new Set();
+                for (const value of result.externalConfiguration) {
+                    externalConfiguration.add(value);
+                }
+            }
         }
         if (errors !== undefined) {
             return { errors, warnings };
@@ -101,6 +112,7 @@ class BundlerContext {
                 browser: externalImportsBrowser,
                 server: externalImportsServer,
             },
+            externalConfiguration: externalConfiguration ? [...externalConfiguration] : undefined,
         };
     }
     /**
@@ -250,10 +262,13 @@ class BundlerContext {
                 externalImports.add(importData.path);
             }
         }
-        const platformIsServer = this.#esbuildOptions?.platform === 'node';
+        (0, node_assert_1.default)(this.#esbuildOptions, 'esbuild options cannot be undefined.');
+        const { platform, assetNames = '' } = this.#esbuildOptions;
+        const platformIsServer = platform === 'node';
+        const mediaDirname = (0, node_path_1.dirname)(assetNames);
         const outputFiles = result.outputFiles.map((file) => {
             let fileType;
-            if ((0, node_path_1.dirname)(file.path) === 'media') {
+            if ((0, node_path_1.dirname)(file.path) === mediaDirname) {
                 fileType = BuildOutputFileType.Media;
             }
             else {
@@ -269,6 +284,7 @@ class BundlerContext {
             externalImports: {
                 [platformIsServer ? 'server' : 'browser']: externalImports,
             },
+            externalConfiguration: this.#esbuildOptions.external,
             errors: undefined,
         };
     }

package/src/tools/esbuild/compiler-plugin-options.js

@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = void 0;
 function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, tailwindConfiguration, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, publicPath, } = options;
     return {
         // JS/TS options
         pluginOptions: {
@@ -26,12 +26,13 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
         // Component stylesheet options
         styleOptions: {
             workspaceRoot,
+            inlineFonts: !!optimizationOptions.fonts.inline,
             optimization: !!optimizationOptions.styles.minify,
             sourcemap: 
             // Hidden component stylesheet sourcemaps are inaccessible which is effectively
             // the same as being disabled. Disabling has the advantage of avoiding the overhead
             // of sourcemap processing.
-            !!sourcemapOptions.styles && (sourcemapOptions.hidden ? false : 'inline'),
+            sourcemapOptions.styles && !sourcemapOptions.hidden ? 'linked' : false,
             outputNames,
             includePaths: stylePreprocessorOptions?.includePaths,
             externalDependencies,
@@ -39,7 +40,8 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             inlineStyleLanguage,
             preserveSymlinks,
             tailwindConfiguration,
-            publicPath: options.publicPath,
+            cacheOptions,
+            publicPath,
         },
     };
 }

package/src/tools/esbuild/global-styles.js

@@ -15,7 +15,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const bundle_options_1 = require("./stylesheets/bundle-options");
 const virtual_module_plugin_1 = require("./virtual-module-plugin");
 function createGlobalStylesBundleOptions(options, target, initial) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, cacheOptions, publicPath, } = options;
     const namespace = 'angular:styles/global';
     const entryPoints = {};
     let found = false;
@@ -33,6 +33,7 @@ function createGlobalStylesBundleOptions(options, target, initial) {
         const buildOptions = (0, bundle_options_1.createStylesheetBundleOptions)({
             workspaceRoot,
             optimization: !!optimizationOptions.styles.minify,
+            inlineFonts: !!optimizationOptions.fonts.inline,
             sourcemap: !!sourcemapOptions.styles,
             preserveSymlinks,
             target,
@@ -45,7 +46,8 @@ function createGlobalStylesBundleOptions(options, target, initial) {
                 },
             includePaths: stylePreprocessorOptions?.includePaths,
             tailwindConfiguration,
-            publicPath: options.publicPath,
+            cacheOptions,
+            publicPath,
         }, loadCache);
         // Keep special CSS comments `/*! comment */` in place when `removeSpecialComments` is disabled.
         // These comments are special for a number of CSS tools such as Critters and PurgeCSS.

package/src/tools/esbuild/index-html-generator.js

@@ -45,7 +45,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
     const hints = [];
     const { indexHtmlOptions, externalPackages, optimizationOptions, crossOrigin, subresourceIntegrity, baseHref, } = buildOptions;
     (0, node_assert_1.default)(indexHtmlOptions, 'indexHtmlOptions cannot be undefined.');
-    if (!externalPackages) {
+    if (!externalPackages && indexHtmlOptions.preloadInitial) {
         for (const [key, value] of initialFiles) {
             if (value.entrypoint) {
                 // Entry points are already referenced in the HTML
@@ -87,6 +87,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         },
         crossOrigin: crossOrigin,
         deployUrl: buildOptions.publicPath,
+        postTransform: indexHtmlOptions.transformer,
     });
     indexHtmlGenerator.readAsset = readAsset;
     const transformResult = await indexHtmlGenerator.process({
@@ -110,6 +111,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
     const { InlineCriticalCssProcessor } = await Promise.resolve().then(() => __importStar(require('../../utils/index-file/inline-critical-css')));
     const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
         minify: false, // CSS has already been minified during the build.
+        deployUrl: buildOptions.publicPath,
         readAsset,
     });
     const { content, errors, warnings } = await inlineCriticalCssProcessor.process(contentWithoutCriticalCssInlined, {

package/src/tools/esbuild/stylesheets/bundle-options.d.ts

@@ -6,12 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { BuildOptions } from 'esbuild';
+import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
 import { LoadResultCache } from '../load-result-cache';
 export interface BundleStylesheetOptions {
     workspaceRoot: string;
     optimization: boolean;
+    inlineFonts: boolean;
     preserveSymlinks?: boolean;
-    sourcemap: boolean | 'external' | 'inline';
+    sourcemap: boolean | 'external' | 'inline' | 'linked';
     outputNames: {
         bundles: string;
         media: string;
@@ -24,6 +26,7 @@ export interface BundleStylesheetOptions {
         package: string;
     };
     publicPath?: string;
+    cacheOptions: NormalizedCachedOptions;
 }
 export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions, cache?: LoadResultCache, inlineComponentData?: Record<string, string>): BuildOptions & {
     plugins: NonNullable<BuildOptions['plugins']>;

package/src/tools/esbuild/stylesheets/bundle-options.js

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createStylesheetBundleOptions = void 0;
 const node_path_1 = __importDefault(require("node:path"));
+const css_inline_fonts_plugin_1 = require("./css-inline-fonts-plugin");
 const css_language_1 = require("./css-language");
 const css_resource_plugin_1 = require("./css-resource-plugin");
 const less_language_1 = require("./less-language");
@@ -26,6 +27,15 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         inlineComponentData,
         tailwindConfiguration: options.tailwindConfiguration,
     }, cache);
+    const plugins = [
+        pluginFactory.create(sass_language_1.SassStylesheetLanguage),
+        pluginFactory.create(less_language_1.LessStylesheetLanguage),
+        pluginFactory.create(css_language_1.CssStylesheetLanguage),
+        (0, css_resource_plugin_1.createCssResourcePlugin)(cache),
+    ];
+    if (options.inlineFonts) {
+        plugins.push((0, css_inline_fonts_plugin_1.createCssInlineFontsPlugin)({ cache, cacheOptions: options.cacheOptions }));
+    }
     return {
         absWorkingDir: options.workspaceRoot,
         bundle: true,
@@ -44,12 +54,7 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         publicPath: options.publicPath,
         conditions: ['style', 'sass', 'less'],
         mainFields: ['style', 'sass'],
-        plugins: [
-            pluginFactory.create(sass_language_1.SassStylesheetLanguage),
-            pluginFactory.create(less_language_1.LessStylesheetLanguage),
-            pluginFactory.create(css_language_1.CssStylesheetLanguage),
-            (0, css_resource_plugin_1.createCssResourcePlugin)(cache),
-        ],
+        plugins,
     };
 }
 exports.createStylesheetBundleOptions = createStylesheetBundleOptions;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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 { Plugin } from 'esbuild';
+import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
+import { LoadResultCache } from '../load-result-cache';
+/**
+ * Options for the createCssInlineFontsPlugin
+ * @see createCssInlineFontsPlugin
+ */
+export interface CssInlineFontsPluginOptions {
+    /** Disk cache normalized options */
+    cacheOptions?: NormalizedCachedOptions;
+    /** Load results cache. */
+    cache?: LoadResultCache;
+}
+/**
+ * Creates an esbuild {@link Plugin} that inlines fonts imported via import-rule.
+ * within the build configuration.
+ */
+export declare function createCssInlineFontsPlugin({ cache, cacheOptions, }: CssInlineFontsPluginOptions): Plugin;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.js

@@ -0,0 +1,57 @@
+"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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssInlineFontsPlugin = void 0;
+const inline_fonts_1 = require("../../../utils/index-file/inline-fonts");
+const load_result_cache_1 = require("../load-result-cache");
+/**
+ * Creates an esbuild {@link Plugin} that inlines fonts imported via import-rule.
+ * within the build configuration.
+ */
+function createCssInlineFontsPlugin({ cache, cacheOptions, }) {
+    return {
+        name: 'angular-css-inline-fonts-plugin',
+        setup(build) {
+            const inlineFontsProcessor = new inline_fonts_1.InlineFontsProcessor({ cache: cacheOptions, minify: false });
+            build.onResolve({ filter: /fonts\.googleapis\.com|use\.typekit\.net/ }, (args) => {
+                // Only attempt to resolve import-rule tokens which only exist inside CSS.
+                if (args.kind !== 'import-rule') {
+                    return null;
+                }
+                if (!inlineFontsProcessor.canInlineRequest(args.path)) {
+                    return null;
+                }
+                return {
+                    path: args.path,
+                    namespace: 'css-inline-fonts',
+                };
+            });
+            build.onLoad({ filter: /./, namespace: 'css-inline-fonts' }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+                try {
+                    return {
+                        contents: await inlineFontsProcessor.processURL(args.path),
+                        loader: 'css',
+                    };
+                }
+                catch (error) {
+                    return {
+                        loader: 'css',
+                        errors: [
+                            {
+                                text: `Failed to inline external stylesheet '${args.path}'.`,
+                                detail: error,
+                            },
+                        ],
+                    };
+                }
+            }));
+        },
+    };
+}
+exports.createCssInlineFontsPlugin = createCssInlineFontsPlugin;

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js

@@ -49,7 +49,15 @@ let postcss;
  *
  * Based on https://tailwindcss.com/docs/functions-and-directives
  */
-const TAILWIND_KEYWORDS = ['@tailwind', '@layer', '@apply', '@config', 'theme(', 'screen('];
+const TAILWIND_KEYWORDS = [
+    '@tailwind',
+    '@layer',
+    '@apply',
+    '@config',
+    'theme(',
+    'screen(',
+    '@screen', // Undocumented in version 3, see: https://github.com/tailwindlabs/tailwindcss/discussions/7516.
+];
 /**
  * Cached postcss instances that can be re-used between various StylesheetPluginFactory instances.
  */

package/src/tools/esbuild/utils.d.ts

@@ -7,6 +7,7 @@
  */
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildOptions, Metafile, OutputFile, PartialMessage } from 'esbuild';
+import { NormalizedOutputOptions } from '../../builders/application/options';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
 import { BuildOutputFile, BuildOutputFileType, InitialFileRecord } from './bundler-context';
 import { BuildOutputAsset } from './bundler-execution-result';
@@ -25,12 +26,11 @@ export declare function logMessages(context: BuilderContext, { errors, warnings
  * @returns An object that can be used with the esbuild build `supported` option.
  */
 export declare function getFeatureSupport(target: string[]): BuildOptions['supported'];
-export declare function writeResultFiles(outputFiles: BuildOutputFile[], assetFiles: BuildOutputAsset[] | undefined, outputPath: string): Promise<void>;
+export declare function writeResultFiles(outputFiles: BuildOutputFile[], assetFiles: BuildOutputAsset[] | undefined, { base, browser, media, server }: NormalizedOutputOptions): Promise<void>;
 export declare function emitFilesToDisk<T = BuildOutputAsset | BuildOutputFile>(files: T[], writeFileCallback: (file: T) => Promise<void>): Promise<void>;
 export declare function createOutputFileFromText(path: string, text: string, type: BuildOutputFileType): BuildOutputFile;
 export declare function createOutputFileFromData(path: string, data: Uint8Array, type: BuildOutputFileType): BuildOutputFile;
 export declare function convertOutputFile(file: OutputFile, type: BuildOutputFileType): BuildOutputFile;
-export declare function getFullOutputPath(file: BuildOutputFile): string;
 /**
  * Transform browserlists result to esbuild target.
  * @see https://esbuild.github.io/api/#target