From 1a5dcdbed1abcd79fec6bc2cc5886f255fc0d8dc Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Thu, 6 Jul 2023 10:07:24 +0000 Subject: [PATCH] refactor(@angular-devkit/build-angular): remove `resourcesOutputPath` option from application builder. This `resourcesOutputPath` option is removed from the application builder. Instead the CSS resources will always be emitted in a directory named `media`. This is preparation to output server and browser bundles in different directories. --- .../src/builders/application/options.ts | 8 +++----- .../src/builders/application/schema.json | 4 ---- .../tests/options/output-hashing_spec.ts | 17 ++++++++--------- .../browser-esbuild/builder-status-warnings.ts | 1 + .../tools/esbuild/stylesheets/bundle-options.ts | 6 +++--- 5 files changed, 15 insertions(+), 21 deletions(-) diff --git a/packages/angular_devkit/build_angular/src/builders/application/options.ts b/packages/angular_devkit/build_angular/src/builders/application/options.ts index 567bfe145480..2a4a02fbbde6 100644 --- a/packages/angular_devkit/build_angular/src/builders/application/options.ts +++ b/packages/angular_devkit/build_angular/src/builders/application/options.ts @@ -94,13 +94,11 @@ export async function normalizeOptions( ? '[name].[hash]' : '[name]', media: - options.outputHashing === OutputHashing.All || options.outputHashing === OutputHashing.Media + 'media/' + + (options.outputHashing === OutputHashing.All || options.outputHashing === OutputHashing.Media ? '[name].[hash]' - : '[name]', + : '[name]'), }; - if (options.resourcesOutputPath) { - outputNames.media = path.join(options.resourcesOutputPath, outputNames.media); - } let fileReplacements: Record | undefined; if (options.fileReplacements) { diff --git a/packages/angular_devkit/build_angular/src/builders/application/schema.json b/packages/angular_devkit/build_angular/src/builders/application/schema.json index 05783f1d32e1..d0320c4fc67a 100644 --- a/packages/angular_devkit/build_angular/src/builders/application/schema.json +++ b/packages/angular_devkit/build_angular/src/builders/application/schema.json @@ -220,10 +220,6 @@ "type": "string", "description": "The full path for the new output directory, relative to the current workspace.\nBy default, writes output to a folder named dist/ in the current project." }, - "resourcesOutputPath": { - "type": "string", - "description": "The path where style resources will be placed, relative to outputPath." - }, "aot": { "type": "boolean", "description": "Build using Ahead of Time compilation.", diff --git a/packages/angular_devkit/build_angular/src/builders/application/tests/options/output-hashing_spec.ts b/packages/angular_devkit/build_angular/src/builders/application/tests/options/output-hashing_spec.ts index 9d59b3f8a8de..6623736fce2b 100644 --- a/packages/angular_devkit/build_angular/src/builders/application/tests/options/output-hashing_spec.ts +++ b/packages/angular_devkit/build_angular/src/builders/application/tests/options/output-hashing_spec.ts @@ -34,7 +34,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeTrue(); expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeTrue(); expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeTrue(); - expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue(); + expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue(); }); it(`doesn't hash any filenames when not set`, async () => { @@ -52,7 +52,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse(); expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse(); expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse(); - expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse(); + expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse(); }); it(`doesn't hash any filenames when set to "none"`, async () => { @@ -71,7 +71,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse(); expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse(); expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse(); - expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse(); + expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse(); }); it(`hashes CSS resources filenames only when set to "media"`, async () => { @@ -90,7 +90,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse(); expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse(); expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse(); - expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue(); + expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue(); }); it(`hashes bundles filenames only when set to "bundles"`, async () => { @@ -109,11 +109,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeTrue(); expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeTrue(); expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeTrue(); - expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse(); + expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse(); }); - // TODO: Re-enable once implemented in the esbuild builder - xit('does not hash non injected styles', async () => { + it('does not hash non injected styles', async () => { harness.useTarget('build', { ...BASE_OPTIONS, outputHashing: OutputHashing.All, @@ -159,8 +158,8 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { const { result } = await harness.executeOnce(); expect(result?.success).toBe(true); - harness.expectFile('dist/test.svg').toExist(); - harness.expectFile('dist/small-test.svg').toExist(); + harness.expectFile('dist/media/test.svg').toExist(); + harness.expectFile('dist/media/small-test.svg').toExist(); }); }); }); diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/builder-status-warnings.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/builder-status-warnings.ts index 629ea4cbb3a0..3b1506956adb 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/builder-status-warnings.ts +++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/builder-status-warnings.ts @@ -56,6 +56,7 @@ export function logBuilderStatusWarnings(options: BrowserBuilderOptions, context if ( unsupportedOption === 'namedChunks' || unsupportedOption === 'vendorChunk' || + unsupportedOption === 'resourcesOutputPath' || unsupportedOption === 'deployUrl' ) { context.logger.warn( diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts index 250773bf1de0..2afcaddd8411 100644 --- a/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts +++ b/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts @@ -27,7 +27,7 @@ export interface BundleStylesheetOptions { optimization: boolean; preserveSymlinks?: boolean; sourcemap: boolean | 'external' | 'inline'; - outputNames?: { bundles?: string; media?: string }; + outputNames: { bundles: string; media: string }; includePaths?: string[]; externalDependencies?: string[]; target: string[]; @@ -57,8 +57,8 @@ export function createStylesheetBundleOptions( return { absWorkingDir: options.workspaceRoot, bundle: true, - entryNames: options.outputNames?.bundles, - assetNames: options.outputNames?.media, + entryNames: options.outputNames.bundles, + assetNames: options.outputNames.media, logLevel: 'silent', minify: options.optimization, metafile: true,