feat(@schematics/angular): migrate existing ES5 projects to support differential loading

With this change, differential loading will be enabled as we add an non ever green browser and change the tsconfig script target to es2015.

Author: alan-agius4

packages/schematics/angular/migrations/update-8/differential-loading.ts

@@ -0,0 +1,113 @@
+/**
+ * @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 {
+  JsonParseMode,
+  isJsonObject,
+  join,
+  normalize,
+  parseJson,
+  parseJsonAst,
+} from '@angular-devkit/core';
+import { Rule, Tree } from '@angular-devkit/schematics';
+import {
+  findPropertyInAstObject,
+  insertPropertyInAstObjectInOrder,
+} from '../../utility/json-utils';
+
+// tslint:disable-next-line:max-line-length
+const browserslistContent = `# 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
+
+# Googlebot uses an older version of Chrome
+# For additional information see: https://developers.google.com/search/docs/guides/rendering
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
+not Chrome 41 # For Googlebot support, remove 'not'.`;
+
+export function updateES5Projects(): Rule {
+  return (host: Tree) => {
+    const tsConfigPath = '/tsconfig.json';
+    const buffer = host.read(tsConfigPath);
+    if (!buffer) {
+      return host;
+    }
+
+    const tsCfgAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
+
+    if (tsCfgAst.kind !== 'object') {
+      return host;
+    }
+
+    const compilerOptions = findPropertyInAstObject(tsCfgAst, 'compilerOptions');
+    if (!compilerOptions || compilerOptions.kind !== 'object') {
+      return host;
+    }
+
+    const scriptTarget = findPropertyInAstObject(compilerOptions, 'target');
+    if (scriptTarget && scriptTarget.value === 'es2015') {
+      return host;
+    }
+
+    const recorder = host.beginUpdate(tsConfigPath);
+    if (scriptTarget) {
+      const { start, end } = scriptTarget;
+      recorder.remove(start.offset, end.offset - start.offset);
+      recorder.insertLeft(start.offset, '"es2015"');
+    } else {
+      insertPropertyInAstObjectInOrder(recorder, compilerOptions, 'target', 'es2015', 4);
+    }
+    host.commitUpdate(recorder);
+
+    return updateBrowserlist;
+  };
+}
+
+function updateBrowserlist(): Rule {
+  return (tree) => {
+    const angularConfigContent = tree.read('angular.json') || tree.read('.angular.json');
+
+    if (!angularConfigContent) {
+      return;
+    }
+
+    const angularJson = parseJson(angularConfigContent.toString(), JsonParseMode.Loose);
+
+    if (!isJsonObject(angularJson) || !isJsonObject(angularJson.projects)) {
+      // If that field isn't there, no use...
+      return;
+    }
+
+    // For all projects
+    for (const projectName of Object.keys(angularJson.projects)) {
+      const project = angularJson.projects[projectName];
+      if (!isJsonObject(project)) {
+        continue;
+      }
+      if (typeof project.root != 'string' || project.projectType !== 'application') {
+        continue;
+      }
+
+      const browserslistPath = join(normalize(project.root), '/browserslist');
+      const source = tree.read(browserslistPath);
+      if (!source) {
+        tree.create(browserslistPath, browserslistContent);
+      } else {
+        const recorder = tree.beginUpdate(browserslistPath);
+        recorder.insertRight(source.length, '\nChrome 41 # Googlebot');
+        tree.commitUpdate(recorder);
+      }
+    }
+
+    return tree;
+  };
+}

packages/schematics/angular/migrations/update-8/differential-loading_spec.ts

@@ -0,0 +1,78 @@
+/**
+ * @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 version 8', () => {
+  describe('Migrate ES5 projects to enable differential loading', () => {
+    const tsConfigPath = '/tsconfig.json';
+    const oldTsConfig = {
+      compilerOptions: {
+        module: 'es2015',
+        moduleResolution: 'node',
+        typeRoots: [
+          'node_modules/@types',
+        ],
+      },
+    };
+
+    const schematicRunner = new SchematicTestRunner(
+      'migrations',
+      require.resolve('../migration-collection.json'),
+    );
+
+    let tree: UnitTestTree;
+
+    beforeEach(async () => {
+      tree = new UnitTestTree(new EmptyTree());
+      tree = await schematicRunner.runExternalSchematicAsync(
+        require.resolve('../../collection.json'), 'ng-new',
+        {
+          name: 'migration-test',
+          version: '1.2.3',
+          directory: '.',
+        },
+        tree,
+      ).toPromise();
+      tree.overwrite(tsConfigPath, JSON.stringify(oldTsConfig, null, 2));
+    });
+
+    it(`should update 'target' to es2015 when property exists`, () => {
+      const tree2 = schematicRunner.runSchematic('migration-07', {}, tree.branch());
+      const { target } = JSON.parse(tree2.readContent(tsConfigPath)).compilerOptions;
+      expect(target).toBe('es2015');
+    });
+
+    it(`should create 'target' property when doesn't exists`, () => {
+      const tree2 = schematicRunner.runSchematic('migration-07', {}, tree.branch());
+      const compilerOptions = {
+        ...oldTsConfig.compilerOptions,
+        target: undefined,
+      };
+
+      tree.overwrite(tsConfigPath, JSON.stringify({ compilerOptions }, null, 2));
+      const { target } = JSON.parse(tree2.readContent(tsConfigPath)).compilerOptions;
+      expect(target).toBe('es2015');
+    });
+
+    it(`should update browserslist file to add an non evergreen browser`, () => {
+      const tree2 = schematicRunner.runSchematic('migration-07', {}, tree.branch());
+      expect(tree2.readContent('/browserslist')).toContain('Chrome 41');
+    });
+
+    it(`should create browserslist file if it doesn't exist`, () => {
+      tree.delete('/browserslist');
+      const tree2 = schematicRunner.runSchematic('migration-07', {}, tree.branch());
+      expect(tree2.exists('/browserslist')).toBe(true);
+      expect(tree2.readContent('/browserslist'))
+        .toContain('Googlebot support');
+    });
+  });
+});

packages/schematics/angular/migrations/update-8/index.ts

@@ -11,6 +11,7 @@ import {
   chain,
 } from '@angular-devkit/schematics';
 import { updatePackageJson, updateTsLintConfig } from './codelyzer-5';
+import { updateES5Projects } from './differential-loading';
 import { dropES2015Polyfills } from './drop-es6-polyfills';
 
 export default function(): Rule {
@@ -19,6 +20,7 @@ export default function(): Rule {
       updateTsLintConfig(),
       updatePackageJson(),
       dropES2015Polyfills(),
+      updateES5Projects(),
     ]);
   };
 }