refactor(@schematics/angular): generate Baseline date in ng generate config browserslist

This changes `ng generate config browserslist` to no longer generate a list of browsers used by Angular, but instead generate a dependency on `browserslist-config-baseline` and configures the date to match Angular. This used to generate a `.browserslistrc` file, however since the config is a single line and `browserslist-config-baseline` requires a separate config in the `package.json`, it feels a little more ergonomic to put both in the `package.json` file instead.

Author: dgp1130

packages/schematics/angular/BUILD.bazel

@@ -4,6 +4,7 @@
 # found in the LICENSE file at https://angular.dev/license
 
 load("@npm2//:defs.bzl", "npm_link_all_packages")
+load("//:constants.bzl", "BASELINE_DATE")
 load("//tools:defaults2.bzl", "copy_to_bin", "jasmine_test", "npm_package", "ts_project")
 load("//tools:ts_json_schema.bzl", "ts_json_schema")
 
@@ -42,11 +43,20 @@ copy_to_bin(
     srcs = glob(["**/schema.json"]),
 )
 
+# Vendor the Baseline configuration into this package.
+genrule(
+    name = "angular_baseline_date",
+    srcs = [],
+    outs = ["config/baseline.txt"],
+    cmd = "echo \"%s\" > $@" % BASELINE_DATE,
+)
+
 RUNTIME_ASSETS = [
     "collection.json",
     "migrations/migration-collection.json",
     "package.json",
     "utility/latest-versions/package.json",
+    ":angular_baseline_date",
 ] + glob(
     include = [
         "*/schema.json",

packages/schematics/angular/config/files/.browserslistrc.template

@@ -14,14 +14,20 @@ import {
   filter,
   mergeWith,
   move,
+  noop,
   strings,
   url,
 } from '@angular-devkit/schematics';
+import { promises as fs } from 'node:fs';
 import { posix as path } from 'node:path';
 import { relativePathToWorkspaceRoot } from '../utility/paths';
 import { getWorkspace as readWorkspace, updateWorkspace } from '../utility/workspace';
 import { Builders as AngularBuilder } from '../utility/workspace-models';
 import { Schema as ConfigOptions, Type as ConfigType } from './schema';
+import { JSONFile } from '../utility/json-file';
+import { addPackageJsonDependency, NodeDependencyType } from '../utility/dependencies';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { latestVersions } from '../utility/latest-versions';
 
 export default function (options: ConfigOptions): Rule {
   switch (options.type) {
@@ -35,20 +41,37 @@ export default function (options: ConfigOptions): Rule {
 }
 
 function addBrowserslistConfig(options: ConfigOptions): Rule {
-  return async (host) => {
+  return async (host, context) => {
     const workspace = await readWorkspace(host);
     const project = workspace.projects.get(options.project);
     if (!project) {
       throw new SchematicsException(`Project name "${options.project}" doesn't not exist.`);
     }
 
-    return mergeWith(
-      apply(url('./files'), [
-        filter((p) => p.endsWith('.browserslistrc.template')),
-        applyTemplates({}),
-        move(project.root),
-      ]),
+    // Read Angular's default vendored `.browserslistrc` file.
+    const widelyAvailableOnDate = await fs.readFile(path.join(__dirname, 'baseline.txt'), 'utf8');
+
+    const pkgJson = new JSONFile(host, 'package.json');
+    pkgJson.modify(
+      ['browserslist'],
+      ['extends browserslist-config-baseline'],
+      /* insertInOrder */ false,
     );
+    pkgJson.modify(
+      ['browserslist-config-baseline'],
+      { widelyAvailableOnDate },
+      /* insertInOrder */ false,
+    );
+
+    addPackageJsonDependency(host, {
+      type: NodeDependencyType.Dev,
+      name: 'browserslist-config-baseline',
+      version: latestVersions['browserslist-config-baseline'],
+    });
+
+    context.addTask(new NodePackageInstallTask());
+
+    return noop;
   };
 }
 

packages/schematics/angular/config/index.ts

@@ -92,9 +92,16 @@ describe('Config Schematic', () => {
   });
 
   describe(`when 'type' is 'browserslist'`, () => {
-    it('should create a .browserslistrc file', async () => {
+    it('should create a browserslist configuration', async () => {
       const tree = await runConfigSchematic(ConfigType.Browserslist);
-      expect(tree.exists('projects/foo/.browserslistrc')).toBeTrue();
+      const config = JSON.parse(tree.readContent('package.json'));
+
+      expect(config.browserslist).toEqual(['extends browserslist-config-baseline']);
+      expect(config['browserslist-config-baseline']).toEqual({
+        widelyAvailableOnDate: jasmine.stringMatching(/\d\d\d\d-\d\d-\d\d/), // YYYY-MM-DD
+      });
+
+      expect(config.devDependencies['browserslist-config-baseline']).toBeDefined();
     });
   });
 });

packages/schematics/angular/config/index_spec.ts

@@ -7,6 +7,7 @@
     "@types/jasmine": "~5.1.0",
     "@types/node": "^20.17.19",
     "browser-sync": "^3.0.0",
+    "browserslist-config-baseline": "^0.4.0",
     "express": "^5.1.0",
     "jasmine-core": "~5.6.0",
     "jasmine-spec-reporter": "~7.0.0",