From a3443db923c642de2d73cc0b0bc01f60a1e38faa Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Thu, 2 Apr 2020 11:02:46 +0200 Subject: [PATCH 1/2] feat(@schematics/angular): change `browserslist` file name to `.browserslistrc` Closes: #15961 --- .../test/browser/scripts-array_spec_large.ts | 2 +- .../application/files/browserslist.template | 12 ----- .../migrations/migration-collection.json | 5 ++ .../update-10/rename-browserslist-config.ts | 39 +++++++++++++++ .../rename-browserslist-config_spec.ts | 50 +++++++++++++++++++ .../update-8/differential-loading_spec.ts | 6 +-- 6 files changed, 96 insertions(+), 18 deletions(-) delete mode 100644 packages/schematics/angular/application/files/browserslist.template create mode 100644 packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts create mode 100644 packages/schematics/angular/migrations/update-10/rename-browserslist-config_spec.ts diff --git a/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts index 18b183588747..1b0db06852de 100644 --- a/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts @@ -95,7 +95,7 @@ describe('Browser Builder scripts array', () => { host.appendToFile('src/main.ts', '\nimport \'./input-script.js\';'); // Enable differential loading - host.appendToFile('browserslist', '\nIE 10'); + host.appendToFile('.browserslistrc', '\nIE 10'); // Remove styles so we don't have to account for them in the index.html order check. const { files } = await browserBuild(architect, host, target, { diff --git a/packages/schematics/angular/application/files/browserslist.template b/packages/schematics/angular/application/files/browserslist.template deleted file mode 100644 index 80848532e47d..000000000000 --- a/packages/schematics/angular/application/files/browserslist.template +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/packages/schematics/angular/migrations/migration-collection.json b/packages/schematics/angular/migrations/migration-collection.json index c5b8912e3c34..060b8cb57fd7 100644 --- a/packages/schematics/angular/migrations/migration-collection.json +++ b/packages/schematics/angular/migrations/migration-collection.json @@ -59,6 +59,11 @@ "version": "10.0.0-beta.0", "factory": "./update-10/update-tslint", "description": "Update tslint to version 6." + }, + "rename-browserslist-config": { + "version": "10.0.0-beta.0", + "factory": "./update-10/rename-browserslist-config", + "description": "Renaming Browserslist configurations to '.browserslistrc'." } } } diff --git a/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts b/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts new file mode 100644 index 000000000000..f5e2efd74500 --- /dev/null +++ b/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts @@ -0,0 +1,39 @@ +/** + * @license + * Copyright Google Inc. 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 { Path, join } from '@angular-devkit/core'; +import { DirEntry, Rule } from '@angular-devkit/schematics'; + +function visit(directory: DirEntry): Path[] { + const files: Path[] = []; + + for (const path of directory.subfiles) { + if (path !== 'browserslist') { + continue; + } + + files.push(join(directory.path, path)); + } + + for (const path of directory.subdirs) { + if (path === 'node_modules') { + continue; + } + + files.push(...visit(directory.dir(path))); + } + + return files; +} + +export default function (): Rule { + return tree => { + for (const path of visit(tree.root)) { + tree.rename(path, path.replace(/browserslist$/, '.browserslistrc')); + } + }; +} diff --git a/packages/schematics/angular/migrations/update-10/rename-browserslist-config_spec.ts b/packages/schematics/angular/migrations/update-10/rename-browserslist-config_spec.ts new file mode 100644 index 000000000000..7162b1921032 --- /dev/null +++ b/packages/schematics/angular/migrations/update-10/rename-browserslist-config_spec.ts @@ -0,0 +1,50 @@ +/** + * @license + * Copyright Google Inc. 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 { EmptyTree } from '@angular-devkit/schematics'; +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; + +describe('Migration to rename Browserslist configurations', () => { + const schematicName = 'rename-browserslist-config'; + + const schematicRunner = new SchematicTestRunner( + 'migrations', + require.resolve('../migration-collection.json'), + ); + + let tree: UnitTestTree; + beforeEach(() => { + tree = new UnitTestTree(new EmptyTree()); + }); + + it(`should rename file 'browserslist' to 'browserslistrc'`, async () => { + tree.create('/browserslist', 'IE9'); + tree.create('/src/app/home/browserslist', 'IE9'); + + const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise(); + expect(newTree.exists('/.browserslistrc')).toBeTruthy(); + expect(newTree.exists('/browserslist')).toBeFalsy(); + + expect(newTree.exists('/src/app/home/.browserslistrc')).toBeTruthy(); + expect(newTree.exists('/src/app/home/browserslist')).toBeFalsy(); + }); + + it(`should not rename "browserslist" file in 'node_modules'`, async () => { + tree.create('/node_modules/browserslist', 'IE9'); + + const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise(); + expect(newTree.exists('/node_modules/browserslist')).toBeTruthy(); + expect(newTree.exists('/node_modules/.browserslistrc')).toBeFalsy(); + }); + + it(`should not rename a folder which is named 'browserslist'`, async () => { + tree.create('/app/browserslist/file.txt', 'content'); + + const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise(); + expect(newTree.exists('/app/browserslist/file.txt')).toBeTruthy(); + }); +}); diff --git a/packages/schematics/angular/migrations/update-8/differential-loading_spec.ts b/packages/schematics/angular/migrations/update-8/differential-loading_spec.ts index 70360efb121c..874687ff6d38 100644 --- a/packages/schematics/angular/migrations/update-8/differential-loading_spec.ts +++ b/packages/schematics/angular/migrations/update-8/differential-loading_spec.ts @@ -105,14 +105,12 @@ describe('Migration to version 8', () => { }); it(`should create browserslist file if it doesn't exist`, async () => { - tree.delete('/browserslist'); const tree2 = await schematicRunner.runSchematicAsync('migration-07', {}, tree.branch()).toPromise(); expect(tree2.exists('/browserslist')).toBe(true); }); it('should move browserslist file if it exists in the sourceRoot', async () => { tree.create('/src/browserslist', 'last 2 Chrome versions'); - tree.delete('/browserslist'); const tree2 = await schematicRunner.runSchematicAsync('migration-07', {}, tree.branch()).toPromise(); expect(tree2.exists('/browserslist')).toBe(true); }); @@ -191,7 +189,6 @@ describe('Migration to version 8', () => { }); it(`should not update projects which browser builder is not 'build-angular:browser'`, async () => { - tree.delete('/browserslist'); const config = JSON.parse(tree.readContent('angular.json')); config.projects['migration-test'].architect.build.builder = '@dummy/builders:browser'; @@ -201,8 +198,7 @@ describe('Migration to version 8', () => { }); it(`should move 'browserslist' to root when 'sourceRoot' is not defined`, async () => { - tree.rename('/browserslist', '/src/browserslist'); - expect(tree.exists('/src/browserslist')).toBe(true); + tree.create('/src/browserslist', 'content'); const config = JSON.parse(tree.readContent('angular.json')); config.projects['migration-test'].sourceRoot = undefined; From 05be25fddde4d9c31a92d5d09b33ac59218505cf Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Fri, 3 Apr 2020 09:37:33 +0200 Subject: [PATCH 2/2] test: change `browserslist` file name to `.browserslistrc` --- .../src/utils/build-browser-features_spec.ts | 16 ++++++++-------- .../browser/differential_loading_spec_large.ts | 4 ++-- .../test/browser/styles_spec_large.ts | 4 ++-- .../test/dev-server/index_spec_large.ts | 6 +++--- .../build_angular/test/server/base_spec_large.ts | 2 +- .../application/files/.browserslistrc.template | 12 ++++++++++++ .../update-10/rename-browserslist-config.ts | 10 +++------- .../{browserslist => .browserslistrc} | 0 .../{browserslist => .browserslistrc} | 0 .../e2e/tests/i18n/ivy-localize-es2015.ts | 2 +- .../e2e/tests/i18n/ve-localize-es2015.ts | 2 +- tests/legacy-cli/e2e/tests/misc/browsers.ts | 2 +- tests/legacy-cli/e2e/tests/misc/es2015-nometa.ts | 2 +- .../e2e/tests/misc/forwardref-es2105.ts | 2 +- tests/legacy-cli/e2e/tests/misc/support-ie.ts | 4 ++-- 15 files changed, 38 insertions(+), 30 deletions(-) create mode 100644 packages/schematics/angular/application/files/.browserslistrc.template rename tests/angular_devkit/build_angular/hello-world-app-ve/{browserslist => .browserslistrc} (100%) rename tests/angular_devkit/build_angular/hello-world-app/{browserslist => .browserslistrc} (100%) diff --git a/packages/angular_devkit/build_angular/src/utils/build-browser-features_spec.ts b/packages/angular_devkit/build_angular/src/utils/build-browser-features_spec.ts index 5d8314623fc8..ac5a200c4a10 100644 --- a/packages/angular_devkit/build_angular/src/utils/build-browser-features_spec.ts +++ b/packages/angular_devkit/build_angular/src/utils/build-browser-features_spec.ts @@ -31,7 +31,7 @@ describe('BuildBrowserFeatures', () => { describe('isDifferentialLoadingNeeded', () => { it('should be true for for IE 9-11 and ES2015', () => { host.writeMultipleFiles({ - 'browserslist': 'IE 9-11', + '.browserslistrc': 'IE 9-11', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -43,7 +43,7 @@ describe('BuildBrowserFeatures', () => { it('should be false for Chrome and ES2015', () => { host.writeMultipleFiles({ - 'browserslist': 'last 1 chrome version', + '.browserslistrc': 'last 1 chrome version', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -55,7 +55,7 @@ describe('BuildBrowserFeatures', () => { it('detects no need for differential loading for target is ES5', () => { host.writeMultipleFiles({ - 'browserslist': 'last 1 chrome version', + '.browserslistrc': 'last 1 chrome version', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -67,7 +67,7 @@ describe('BuildBrowserFeatures', () => { it('should be false for Safari 10.1 when target is ES2015', () => { host.writeMultipleFiles({ - 'browserslist': 'Safari 10.1', + '.browserslistrc': 'Safari 10.1', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -81,7 +81,7 @@ describe('BuildBrowserFeatures', () => { describe('isFeatureSupported', () => { it('should be true for es6-module and Safari 10.1', () => { host.writeMultipleFiles({ - 'browserslist': 'Safari 10.1', + '.browserslistrc': 'Safari 10.1', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -93,7 +93,7 @@ describe('BuildBrowserFeatures', () => { it('should be false for es6-module and IE9', () => { host.writeMultipleFiles({ - 'browserslist': 'IE 9', + '.browserslistrc': 'IE 9', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -105,7 +105,7 @@ describe('BuildBrowserFeatures', () => { it('should be true for es6-module and last 1 chrome version', () => { host.writeMultipleFiles({ - 'browserslist': 'last 1 chrome version', + '.browserslistrc': 'last 1 chrome version', }); const buildBrowserFeatures = new BuildBrowserFeatures( @@ -117,7 +117,7 @@ describe('BuildBrowserFeatures', () => { it('should be true for es6-module and Edge 18', () => { host.writeMultipleFiles({ - 'browserslist': 'Edge 18', + '.browserslistrc': 'Edge 18', }); const buildBrowserFeatures = new BuildBrowserFeatures( diff --git a/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts index dc318ccc2b75..28c67319b87e 100644 --- a/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts @@ -18,7 +18,7 @@ describe('Browser Builder with differential loading', () => { await host.initialize().toPromise(); // to trigger differential loading we need an non ever green browser host.writeMultipleFiles({ - browserslist: 'IE 10', + '.browserslistrc': 'IE 10', }); architect = (await createArchitect(host.root())).architect; @@ -193,7 +193,7 @@ describe('Browser Builder with differential loading', () => { it('adds `type="module"` when differential loading is needed', async () => { host.writeMultipleFiles({ - browserslist: ` + '.browserslistrc': ` last 1 chrome version IE 9 `, diff --git a/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts index e1ae024c4712..2926085fce5b 100644 --- a/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts @@ -285,7 +285,7 @@ describe('Browser Builder styles', () => { /* normal-comment */ /*! important-comment */ div { flex: 1 }`, - browserslist: 'IE 10', + '.browserslistrc': 'IE 10', }); const overrides = { extractCss: true, optimization: false }; @@ -319,7 +319,7 @@ describe('Browser Builder styles', () => { grid-template-columns: 100px; } `, - browserslist: 'IE 10', + '.browserslistrc': 'IE 10', }); const overrides = { extractCss: true, optimization: true, styles: ['src/styles.scss'] }; diff --git a/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts b/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts index 22aca8912431..8a19c3bc2873 100644 --- a/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/dev-server/index_spec_large.ts @@ -18,7 +18,7 @@ describe('Dev Server Builder index', () => { it(`adds 'type="module"' when differential loading is needed`, async () => { host.writeMultipleFiles({ - browserslist: ` + '.browserslistrc': ` last 1 chrome version IE 10 `, @@ -41,7 +41,7 @@ describe('Dev Server Builder index', () => { it(`does not add 'type="module"' to custom scripts when differential loading is needed`, async () => { host.writeMultipleFiles({ - browserslist: ` + '.browserslistrc': ` last 1 chrome version IE 10 `, @@ -85,7 +85,7 @@ describe('Dev Server Builder index', () => { it(`doesn't 'type="module"' when differential loading is not needed`, async () => { host.writeMultipleFiles({ - browserslist: ` + '.browserslistrc': ` last 1 chrome version `, }); diff --git a/packages/angular_devkit/build_angular/test/server/base_spec_large.ts b/packages/angular_devkit/build_angular/test/server/base_spec_large.ts index fe41953e9c4e..10c1dd958472 100644 --- a/packages/angular_devkit/build_angular/test/server/base_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/server/base_spec_large.ts @@ -57,7 +57,7 @@ describe('Server Builder', () => { // the below is needed because of different code paths // for polyfills if differential loading is needed host.writeMultipleFiles({ - 'browserslist': 'IE 10', + '.browserslistrc': 'IE 10', }); const run = await architect.scheduleTarget(target); diff --git a/packages/schematics/angular/application/files/.browserslistrc.template b/packages/schematics/angular/application/files/.browserslistrc.template new file mode 100644 index 000000000000..80848532e47d --- /dev/null +++ b/packages/schematics/angular/application/files/.browserslistrc.template @@ -0,0 +1,12 @@ +# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries + +# You can see what browsers were selected by your queries by running: +# npx browserslist + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts b/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts index f5e2efd74500..0698d2e0198f 100644 --- a/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts +++ b/packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts @@ -8,15 +8,13 @@ import { Path, join } from '@angular-devkit/core'; import { DirEntry, Rule } from '@angular-devkit/schematics'; -function visit(directory: DirEntry): Path[] { - const files: Path[] = []; - +function* visit(directory: DirEntry): IterableIterator { for (const path of directory.subfiles) { if (path !== 'browserslist') { continue; } - files.push(join(directory.path, path)); + yield join(directory.path, path); } for (const path of directory.subdirs) { @@ -24,10 +22,8 @@ function visit(directory: DirEntry): Path[] { continue; } - files.push(...visit(directory.dir(path))); + yield* visit(directory.dir(path)); } - - return files; } export default function (): Rule { diff --git a/tests/angular_devkit/build_angular/hello-world-app-ve/browserslist b/tests/angular_devkit/build_angular/hello-world-app-ve/.browserslistrc similarity index 100% rename from tests/angular_devkit/build_angular/hello-world-app-ve/browserslist rename to tests/angular_devkit/build_angular/hello-world-app-ve/.browserslistrc diff --git a/tests/angular_devkit/build_angular/hello-world-app/browserslist b/tests/angular_devkit/build_angular/hello-world-app/.browserslistrc similarity index 100% rename from tests/angular_devkit/build_angular/hello-world-app/browserslist rename to tests/angular_devkit/build_angular/hello-world-app/.browserslistrc diff --git a/tests/legacy-cli/e2e/tests/i18n/ivy-localize-es2015.ts b/tests/legacy-cli/e2e/tests/i18n/ivy-localize-es2015.ts index 31b8f3f90f27..5ee1aa36434c 100644 --- a/tests/legacy-cli/e2e/tests/i18n/ivy-localize-es2015.ts +++ b/tests/legacy-cli/e2e/tests/i18n/ivy-localize-es2015.ts @@ -9,7 +9,7 @@ export default async function() { await setupI18nConfig(); // Ensure a ES2015 build is used. - await writeFile('browserslist', 'Chrome 65'); + await writeFile('.browserslistrc', 'Chrome 65'); await updateJsonFile('tsconfig.json', config => { config.compilerOptions.target = 'es2015'; config.angularCompilerOptions.disableTypeScriptVersionCheck = true; diff --git a/tests/legacy-cli/e2e/tests/i18n/ve-localize-es2015.ts b/tests/legacy-cli/e2e/tests/i18n/ve-localize-es2015.ts index 91194763444a..9b92078b2b2b 100644 --- a/tests/legacy-cli/e2e/tests/i18n/ve-localize-es2015.ts +++ b/tests/legacy-cli/e2e/tests/i18n/ve-localize-es2015.ts @@ -22,7 +22,7 @@ export default async function() { await npm('install', `${localizeVersion}`); // Ensure a ES2015 build is used. - await writeFile('browserslist', 'Chrome 65'); + await writeFile('.browserslistrc', 'Chrome 65'); await updateJsonFile('tsconfig.json', config => { config.compilerOptions.target = 'es2015'; config.angularCompilerOptions.disableTypeScriptVersionCheck = true; diff --git a/tests/legacy-cli/e2e/tests/misc/browsers.ts b/tests/legacy-cli/e2e/tests/misc/browsers.ts index 50fa6d76edaa..31d864c3e9ba 100644 --- a/tests/legacy-cli/e2e/tests/misc/browsers.ts +++ b/tests/legacy-cli/e2e/tests/misc/browsers.ts @@ -16,7 +16,7 @@ export default async function () { } await replaceInFile( - 'browserslist', + '.browserslistrc', 'not IE 9-11', 'Safari 9-10.1\nIE 9-11', ); diff --git a/tests/legacy-cli/e2e/tests/misc/es2015-nometa.ts b/tests/legacy-cli/e2e/tests/misc/es2015-nometa.ts index d283d03be9a7..ef319e184249 100644 --- a/tests/legacy-cli/e2e/tests/misc/es2015-nometa.ts +++ b/tests/legacy-cli/e2e/tests/misc/es2015-nometa.ts @@ -3,7 +3,7 @@ import { ng } from '../../utils/process'; export default async function() { // Ensure an ES2015 build is used in test - await writeFile('browserslist', 'Chrome 65'); + await writeFile('.browserslistrc', 'Chrome 65'); await ng('generate', 'service', 'user'); diff --git a/tests/legacy-cli/e2e/tests/misc/forwardref-es2105.ts b/tests/legacy-cli/e2e/tests/misc/forwardref-es2105.ts index af0e32ee5c01..497f60aab160 100644 --- a/tests/legacy-cli/e2e/tests/misc/forwardref-es2105.ts +++ b/tests/legacy-cli/e2e/tests/misc/forwardref-es2105.ts @@ -4,7 +4,7 @@ import { expectToFail } from '../../utils/utils'; export default async function() { // Ensure an ES2015 build is used in test - await writeFile('browserslist', 'Chrome 65'); + await writeFile('.browserslistrc', 'Chrome 65'); // Update the application to use a forward reference await replaceInFile( diff --git a/tests/legacy-cli/e2e/tests/misc/support-ie.ts b/tests/legacy-cli/e2e/tests/misc/support-ie.ts index 8f174b7059e5..042ff1f15190 100644 --- a/tests/legacy-cli/e2e/tests/misc/support-ie.ts +++ b/tests/legacy-cli/e2e/tests/misc/support-ie.ts @@ -14,7 +14,7 @@ export default async function () { appArchitect.build.options.es5BrowserSupport = false; }); - await writeFile('browserslist', 'last 2 Chrome versions'); + await writeFile('.browserslistrc', 'last 2 Chrome versions'); await ng('build'); await expectFileNotToExist('dist/test-project/polyfills-es5.js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim` @@ -40,7 +40,7 @@ export default async function () { const appArchitect = workspaceJson.projects['test-project'].architect; appArchitect.build.options.es5BrowserSupport = undefined; }); - await writeFile('browserslist', 'IE 10'); + await writeFile('.browserslistrc', 'IE 10'); await ng('build'); await expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js'); await expectFileToMatch('dist/test-project/index.html', oneLineTrim`