@angular/build 19.0.0-next.0 → 19.0.0-next.10

package/src/tools/babel/plugins/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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.dev/license
+ */
+
+declare module 'istanbul-lib-instrument' {
+  export interface Visitor {
+    enter(path: import('@babel/core').NodePath<types.Program>): void;
+    exit(path: import('@babel/core').NodePath<types.Program>): void;
+  }
+
+  export function programVisitor(
+    types: typeof import('@babel/core').types,
+    filePath?: string,
+    options?: { inputSourceMap?: object | null },
+  ): Visitor;
+}

package/src/tools/esbuild/angular/compiler-plugin.d.ts

@@ -21,6 +21,8 @@ export interface CompilerPluginOptions {
     sourceFileCache?: SourceFileCache;
     loadResultCache?: LoadResultCache;
     incremental: boolean;
+    externalRuntimeStyles?: boolean;
+    instrumentForCoverage?: (request: string) => boolean;
 }
 export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
     inlineStyleLanguage: string;

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

@@ -35,6 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = createCompilerPlugin;
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_crypto_1 = require("node:crypto");
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const compilation_1 = require("../../angular/compilation");
@@ -120,13 +121,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Angular compiler which does not have direct knowledge of transitive resource
                 // dependencies or web worker processing.
                 let modifiedFiles;
+                let invalidatedStylesheetEntries;
                 if (pluginOptions.sourceFileCache?.modifiedFiles.size &&
                     referencedFileTracker &&
                     !pluginOptions.noopTypeScriptCompilation) {
                     // TODO: Differentiate between changed input files and stale output files
                     modifiedFiles = referencedFileTracker.update(pluginOptions.sourceFileCache.modifiedFiles);
                     pluginOptions.sourceFileCache.invalidate(modifiedFiles);
-                    stylesheetBundler.invalidate(modifiedFiles);
+                    invalidatedStylesheetEntries = stylesheetBundler.invalidate(modifiedFiles);
                 }
                 if (!pluginOptions.noopTypeScriptCompilation &&
                     compilation.update &&
@@ -138,14 +140,26 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     fileReplacements: pluginOptions.fileReplacements,
                     modifiedFiles,
                     sourceFileCache: pluginOptions.sourceFileCache,
-                    async transformStylesheet(data, containingFile, stylesheetFile) {
+                    async transformStylesheet(data, containingFile, stylesheetFile, order) {
                         let stylesheetResult;
                         // Stylesheet file only exists for external stylesheets
                         if (stylesheetFile) {
                             stylesheetResult = await stylesheetBundler.bundleFile(stylesheetFile);
                         }
                         else {
-                            stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, styleOptions.inlineStyleLanguage);
+                            stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, 
+                            // Inline stylesheets from a template style element are always CSS
+                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage, 
+                            // When external runtime styles are enabled, an identifier for the style that does not change
+                            // based on the content is required to avoid emitted JS code changes. Any JS code changes will
+                            // invalid the output and force a full page reload for HMR cases. The containing file and order
+                            // of the style within the containing file is used.
+                            pluginOptions.externalRuntimeStyles
+                                ? (0, node_crypto_1.createHash)('sha-256')
+                                    .update(containingFile)
+                                    .update((order ?? 0).toString())
+                                    .digest('hex')
+                                : undefined);
                         }
                         const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
                         if (errors) {
@@ -199,6 +213,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Initialize the Angular compilation for the current build.
                 // In watch mode, previous build state will be reused.
                 let referencedFiles;
+                let externalStylesheets;
                 try {
                     const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
@@ -209,6 +224,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                             !!initializationResult.compilerOptions.sourceMap ||
                             !!initializationResult.compilerOptions.inlineSourceMap;
                     referencedFiles = initializationResult.referencedFiles;
+                    externalStylesheets = initializationResult.externalStylesheets;
                 }
                 catch (error) {
                     (result.errors ??= []).push({
@@ -229,6 +245,19 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     hasCompilationErrors = await sharedTSCompilationState.waitUntilReady;
                     return result;
                 }
+                if (externalStylesheets) {
+                    // Process any new external stylesheets
+                    for (const [stylesheetFile, externalId] of externalStylesheets) {
+                        await bundleExternalStylesheet(stylesheetBundler, stylesheetFile, externalId, result, additionalResults);
+                    }
+                    // Process any updated stylesheets
+                    if (invalidatedStylesheetEntries) {
+                        for (const stylesheetFile of invalidatedStylesheetEntries) {
+                            // externalId is already linked in the bundler context so only enabling is required here
+                            await bundleExternalStylesheet(stylesheetBundler, stylesheetFile, true, result, additionalResults);
+                        }
+                    }
+                }
                 // Update TypeScript file output cache for all affected files
                 try {
                     await (0, profiling_1.profileAsync)('NG_EMIT_TS', async () => {
@@ -310,7 +339,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // A string indicates untransformed output from the TS/NG compiler.
                     // This step is unneeded when using esbuild transpilation.
                     const sideEffects = await hasSideEffects(request);
-                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects);
+                    const instrumentForCoverage = pluginOptions.instrumentForCoverage?.(request);
+                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects, instrumentForCoverage);
                     // Store as the returned Uint8Array to allow caching the fully transformed code
                     typeScriptFileCache.set(request, contents);
                 }
@@ -374,6 +404,17 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
         },
     };
 }
+async function bundleExternalStylesheet(stylesheetBundler, stylesheetFile, externalId, result, additionalResults) {
+    const { outputFiles, metafile, errors, warnings } = await stylesheetBundler.bundleFile(stylesheetFile, externalId);
+    if (errors) {
+        (result.errors ??= []).push(...errors);
+    }
+    (result.warnings ??= []).push(...warnings);
+    additionalResults.set(stylesheetFile, {
+        outputFiles,
+        metafile,
+    });
+}
 function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks) {
     return (compilerOptions) => {
         // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
@@ -431,6 +472,7 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
             mapRoot: undefined,
             sourceRoot: undefined,
             preserveSymlinks,
+            externalRuntimeStyles: pluginOptions.externalRuntimeStyles,
         };
     };
 }

package/src/tools/esbuild/angular/component-stylesheets.d.ts

@@ -22,7 +22,7 @@ export declare class ComponentStylesheetBundler {
      * @param cache A load result cache to use when bundling.
      */
     constructor(options: BundleStylesheetOptions, incremental: boolean);
-    bundleFile(entry: string): Promise<{
+    bundleFile(entry: string, externalId?: string | boolean): Promise<{
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
@@ -30,7 +30,7 @@ export declare class ComponentStylesheetBundler {
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
-    bundleInline(data: string, filename: string, language: string): Promise<{
+    bundleInline(data: string, filename: string, language: string, externalId?: string): Promise<{
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
@@ -38,7 +38,12 @@ export declare class ComponentStylesheetBundler {
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
-    invalidate(files: Iterable<string>): void;
+    /**
+     * Invalidates both file and inline based component style bundling state for a set of modified files.
+     * @param files The group of files that have been modified
+     * @returns An array of file based stylesheet entries if any were invalidated; otherwise, undefined.
+     */
+    invalidate(files: Iterable<string>): string[] | undefined;
     dispose(): Promise<void>;
     private extractResult;
 }

package/src/tools/esbuild/angular/component-stylesheets.js

@@ -11,6 +11,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStylesheetBundler = void 0;
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = __importDefault(require("node:path"));
 const bundler_context_1 = require("../bundler-context");
@@ -35,21 +36,31 @@ class ComponentStylesheetBundler {
         this.options = options;
         this.incremental = incremental;
     }
-    async bundleFile(entry) {
+    async bundleFile(entry, externalId) {
         const bundlerContext = await this.#fileContexts.getOrCreate(entry, () => {
             return new bundler_context_1.BundlerContext(this.options.workspaceRoot, this.incremental, (loadCache) => {
                 const buildOptions = (0, bundle_options_1.createStylesheetBundleOptions)(this.options, loadCache);
-                buildOptions.entryPoints = [entry];
+                if (externalId) {
+                    (0, node_assert_1.default)(typeof externalId === 'string', 'Initial external component stylesheets must have a string identifier');
+                    buildOptions.entryPoints = { [externalId]: entry };
+                    delete buildOptions.publicPath;
+                }
+                else {
+                    buildOptions.entryPoints = [entry];
+                }
                 return buildOptions;
             });
         });
-        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles, !!externalId);
     }
-    async bundleInline(data, filename, language) {
+    async bundleInline(data, filename, language, externalId) {
         // Use a hash of the inline stylesheet content to ensure a consistent identifier. External stylesheets will resolve
         // to the actual stylesheet file path.
         // TODO: Consider xxhash instead for hashing
-        const id = (0, node_crypto_1.createHash)('sha256').update(data).digest('hex');
+        const id = (0, node_crypto_1.createHash)('sha256')
+            .update(data)
+            .update(externalId ?? '')
+            .digest('hex');
         const entry = [language, id, filename].join(';');
         const bundlerContext = await this.#inlineContexts.getOrCreate(entry, () => {
             const namespace = 'angular:styles/component';
@@ -57,7 +68,13 @@ class ComponentStylesheetBundler {
                 const buildOptions = (0, bundle_options_1.createStylesheetBundleOptions)(this.options, loadCache, {
                     [entry]: data,
                 });
-                buildOptions.entryPoints = [`${namespace};${entry}`];
+                if (externalId) {
+                    buildOptions.entryPoints = { [externalId]: `${namespace};${entry}` };
+                    delete buildOptions.publicPath;
+                }
+                else {
+                    buildOptions.entryPoints = [`${namespace};${entry}`];
+                }
                 buildOptions.plugins.push({
                     name: 'angular-component-styles',
                     setup(build) {
@@ -83,19 +100,29 @@ class ComponentStylesheetBundler {
             });
         });
         // Extract the result of the bundling from the output files
-        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles, !!externalId);
     }
+    /**
+     * Invalidates both file and inline based component style bundling state for a set of modified files.
+     * @param files The group of files that have been modified
+     * @returns An array of file based stylesheet entries if any were invalidated; otherwise, undefined.
+     */
     invalidate(files) {
         if (!this.incremental) {
             return;
         }
         const normalizedFiles = [...files].map(node_path_1.default.normalize);
-        for (const bundler of this.#fileContexts.values()) {
-            bundler.invalidate(normalizedFiles);
+        let entries;
+        for (const [entry, bundler] of this.#fileContexts.entries()) {
+            if (bundler.invalidate(normalizedFiles)) {
+                entries ??= [];
+                entries.push(entry);
+            }
         }
         for (const bundler of this.#inlineContexts.values()) {
             bundler.invalidate(normalizedFiles);
         }
+        return entries;
     }
     async dispose() {
         const contexts = [...this.#fileContexts.values(), ...this.#inlineContexts.values()];
@@ -103,7 +130,7 @@ class ComponentStylesheetBundler {
         this.#inlineContexts.clear();
         await Promise.allSettled(contexts.map((context) => context.dispose()));
     }
-    extractResult(result, referencedFiles) {
+    extractResult(result, referencedFiles, external) {
         let contents = '';
         let metafile;
         const outputFiles = [];
@@ -122,7 +149,15 @@ class ComponentStylesheetBundler {
                     outputFiles.push(clonedOutputFile);
                 }
                 else if (filename.endsWith('.css')) {
-                    contents = outputFile.text;
+                    if (external) {
+                        const clonedOutputFile = outputFile.clone();
+                        clonedOutputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
+                        outputFiles.push(clonedOutputFile);
+                        contents = node_path_1.default.posix.join(this.options.publicPath ?? '', filename);
+                    }
+                    else {
+                        contents = outputFile.text;
+                    }
                 }
                 else {
                     throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);

package/src/tools/esbuild/angular/file-reference-tracker.d.ts

@@ -7,7 +7,7 @@
  */
 export declare class FileReferenceTracker {
     #private;
-    get referencedFiles(): IterableIterator<string>;
+    get referencedFiles(): MapIterator<string>;
     add(containingFile: string, referencedFiles: Iterable<string>): void;
     /**
      *

package/src/tools/esbuild/application-code-bundle.d.ts

@@ -11,10 +11,6 @@ import { SourceFileCache } from './angular/source-file-cache';
 import { BundlerOptionsFactory } from './bundler-context';
 export declare function createBrowserCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BuildOptions;
 export declare function createBrowserPolyfillBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BuildOptions | BundlerOptionsFactory | undefined;
-/**
- * Create an esbuild 'build' options object for the server bundle.
- * @param options The builder's user-provider normalized options.
- * @returns An esbuild BuildOptions object.
- */
-export declare function createServerCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache): BuildOptions;
 export declare function createServerPolyfillBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BundlerOptionsFactory | undefined;
+export declare function createServerMainCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache): BuildOptions;
+export declare function createSsrEntryCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache): BuildOptions;