From ba05932f8948d6bf5173563db54a32cc305c82d0 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Wed, 16 Oct 2024 18:57:16 -0400 Subject: [PATCH] refactor(@angular/build): move component stylesheet bundler out of compiler plugin The component stylesheet bundler is now created during the setup of the Angular compiler plugin options. This is an initial step to support more fine-grained rebuild actions with the new component stylesheet development server support. --- .../tools/esbuild/angular/compiler-plugin.ts | 9 +--- .../tools/esbuild/application-code-bundle.ts | 22 ++++---- .../tools/esbuild/compiler-plugin-options.ts | 54 ++++++++++--------- 3 files changed, 41 insertions(+), 44 deletions(-) diff --git a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts index 541b0e073e35..544f03fe31b4 100644 --- a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts +++ b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts @@ -30,7 +30,6 @@ import { import { JavaScriptTransformer } from '../javascript-transformer'; import { LoadResultCache, createCachedLoad } from '../load-result-cache'; import { logCumulativeDurations, profileAsync, resetCumulativeDurations } from '../profiling'; -import { BundleStylesheetOptions } from '../stylesheets/bundle-options'; import { SharedTSCompilationState, getSharedCompilationState } from './compilation-state'; import { ComponentStylesheetBundler } from './component-stylesheets'; import { FileReferenceTracker } from './file-reference-tracker'; @@ -57,7 +56,7 @@ export interface CompilerPluginOptions { // eslint-disable-next-line max-lines-per-function export function createCompilerPlugin( pluginOptions: CompilerPluginOptions, - styleOptions: BundleStylesheetOptions & { inlineStyleLanguage: string }, + stylesheetBundler: ComponentStylesheetBundler, ): Plugin { return { name: 'angular-compiler', @@ -128,12 +127,6 @@ export function createCompilerPlugin( // Determines if transpilation should be handle by TypeScript or esbuild let useTypeScriptTranspilation = true; - // Track incremental component stylesheet builds - const stylesheetBundler = new ComponentStylesheetBundler( - styleOptions, - styleOptions.inlineStyleLanguage, - pluginOptions.incremental, - ); let sharedTSCompilationState: SharedTSCompilationState | undefined; // To fully invalidate files, track resource referenced files and their referencing source diff --git a/packages/angular/build/src/tools/esbuild/application-code-bundle.ts b/packages/angular/build/src/tools/esbuild/application-code-bundle.ts index 6ddc125f107c..1fa63bdfb4e8 100644 --- a/packages/angular/build/src/tools/esbuild/application-code-bundle.ts +++ b/packages/angular/build/src/tools/esbuild/application-code-bundle.ts @@ -38,7 +38,7 @@ export function createBrowserCodeBundleOptions( ): BuildOptions { const { entryPoints, outputNames, polyfills } = options; - const { pluginOptions, styleOptions } = createCompilerPluginOptions( + const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions( options, target, sourceFileCache, @@ -65,8 +65,8 @@ export function createBrowserCodeBundleOptions( createCompilerPlugin( // JS/TS options pluginOptions, - // Component stylesheet options - styleOptions, + // Component stylesheet bundler + stylesheetBundler, ), ], }; @@ -134,7 +134,7 @@ export function createBrowserPolyfillBundleOptions( // Only add the Angular TypeScript compiler if TypeScript files are provided in the polyfills if (hasTypeScriptEntries) { buildOptions.plugins ??= []; - const { pluginOptions, styleOptions } = createCompilerPluginOptions( + const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions( options, target, sourceFileCache, @@ -144,7 +144,7 @@ export function createBrowserPolyfillBundleOptions( // JS/TS options { ...pluginOptions, noopTypeScriptCompilation: true }, // Component stylesheet options are unused for polyfills but required by the plugin - styleOptions, + stylesheetBundler, ), ); } @@ -243,7 +243,7 @@ export function createServerMainCodeBundleOptions( 'createServerCodeBundleOptions should not be called without a defined serverEntryPoint.', ); - const { pluginOptions, styleOptions } = createCompilerPluginOptions( + const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions( options, target, sourceFileCache, @@ -278,8 +278,8 @@ export function createServerMainCodeBundleOptions( createCompilerPlugin( // JS/TS options { ...pluginOptions, noopTypeScriptCompilation: true }, - // Component stylesheet options - styleOptions, + // Component stylesheet bundler + stylesheetBundler, ), ], }; @@ -382,7 +382,7 @@ export function createSsrEntryCodeBundleOptions( 'createSsrEntryCodeBundleOptions should not be called without a defined serverEntryPoint.', ); - const { pluginOptions, styleOptions } = createCompilerPluginOptions( + const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions( options, target, sourceFileCache, @@ -411,8 +411,8 @@ export function createSsrEntryCodeBundleOptions( createCompilerPlugin( // JS/TS options { ...pluginOptions, noopTypeScriptCompilation: true }, - // Component stylesheet options - styleOptions, + // Component stylesheet bundler + stylesheetBundler, ), ], inject, diff --git a/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts b/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts index 38bad72a7026..568e6f8e0b85 100644 --- a/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts +++ b/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts @@ -8,6 +8,7 @@ import { NormalizedApplicationBuildOptions } from '../../builders/application/options'; import type { createCompilerPlugin } from './angular/compiler-plugin'; +import { ComponentStylesheetBundler } from './angular/component-stylesheets'; import type { SourceFileCache } from './angular/source-file-cache'; type CreateCompilerPluginParameters = Parameters; @@ -18,7 +19,7 @@ export function createCompilerPluginOptions( sourceFileCache?: SourceFileCache, ): { pluginOptions: CreateCompilerPluginParameters[0]; - styleOptions: CreateCompilerPluginParameters[1]; + stylesheetBundler: ComponentStylesheetBundler; } { const { workspaceRoot, @@ -40,6 +41,7 @@ export function createCompilerPluginOptions( externalRuntimeStyles, instrumentForCoverage, } = options; + const incremental = !!options.watch; return { // JS/TS options @@ -52,33 +54,35 @@ export function createCompilerPluginOptions( fileReplacements, sourceFileCache, loadResultCache: sourceFileCache?.loadResultCache, - incremental: !!options.watch, + incremental, externalRuntimeStyles, instrumentForCoverage, }, - // 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 ? 'linked' : false, - outputNames, - includePaths: stylePreprocessorOptions?.includePaths, - // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'. - // eslint-disable-next-line @typescript-eslint/no-explicit-any - sass: stylePreprocessorOptions?.sass as any, - externalDependencies, - target, + stylesheetBundler: new ComponentStylesheetBundler( + { + 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 ? 'linked' : false, + outputNames, + includePaths: stylePreprocessorOptions?.includePaths, + // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'. + // eslint-disable-next-line @typescript-eslint/no-explicit-any + sass: stylePreprocessorOptions?.sass as any, + externalDependencies, + target, + preserveSymlinks, + tailwindConfiguration, + postcssConfiguration, + cacheOptions, + publicPath, + }, inlineStyleLanguage, - preserveSymlinks, - tailwindConfiguration, - postcssConfiguration, - cacheOptions, - publicPath, - }, + incremental, + ), }; }