feat(material/ng-update): add migration for hammerjs in version 9

Author: devversion

src/cdk/private/testing/public-api.ts

@@ -9,3 +9,4 @@
 export * from './expect-async-error';
 export * from './wrapped-error-message';
 export * from './mock-ng-zone';
+export * from './text-dedent';

src/cdk/private/testing/text-dedent.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+
+/**
+ * Template string function that can be used to dedent a given string
+ * literal. The smallest common indentation will be omitted.
+ */
+export function dedent(strings: TemplateStringsArray, ...values: any[]) {
+  let joinedString = '';
+  for (let i = 0; i < values.length; i++) {
+    joinedString += `${strings[i]}${values[i]}`;
+  }
+  joinedString += strings[strings.length - 1];
+
+  const matches = joinedString.match(/^[ \t]*(?=\S)/gm);
+  if (matches === null) {
+    return joinedString;
+  }
+
+  const minLineIndent = Math.min(...matches.map(el => el.length));
+  const omitMinIndentRegex = new RegExp(`^[ \\t]{${minLineIndent}}`, 'gm');
+  return minLineIndent > 0 ? joinedString.replace(omitMinIndentRegex, '') : joinedString;
+}

src/cdk/schematics/index.ts

@@ -9,3 +9,10 @@
 export * from './utils';
 export * from './ng-update/public-api';
 export * from './update-tool/public-api';
+
+// Re-export parse5 from the CDK. Material schematics code cannot simply import
+// "parse5" because it could result in a different version. As long as we import
+// it from within the CDK, it will always be the correct version that is specified
+// in the CDK "package.json" as optional dependency.
+import * as parse5 from 'parse5';
+export {parse5};

src/cdk/schematics/ng-update/index.ts

@@ -40,7 +40,7 @@ function onMigrationComplete(targetVersion: TargetVersion, hasFailures: boolean)
 
   if (hasFailures) {
     console.log(chalk.yellow(
-      '  ⚠  Some issues were detected but could not be fixed automatically. Please check the ' +
-      'output above and fix these issues manually.'));
+        '  ⚠  Some issues were detected but could not be fixed automatically. Please check the ' +
+        'output above and fix these issues manually.'));
   }
 }

src/cdk/schematics/ng-update/upgrade-rules/index.ts

@@ -7,6 +7,7 @@
  */
 
 import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 
 import {Constructor, runMigrationRules} from '../../update-tool';
 import {MigrationRule} from '../../update-tool/migration-rule';
@@ -51,7 +52,7 @@ type NullableMigrationRule = Constructor<MigrationRule<RuleUpgradeData|null>>;
 export function createUpgradeRule(
     targetVersion: TargetVersion, extraRules: NullableMigrationRule[], upgradeData: RuleUpgradeData,
     onMigrationCompleteFn?: (targetVersion: TargetVersion, hasFailures: boolean) => void): Rule {
-  return (tree: Tree, context: SchematicContext) => {
+  return async (tree: Tree, context: SchematicContext) => {
     const logger = context.logger;
     const {buildPaths, testPaths} = getProjectTsConfigPaths(tree);
 
@@ -67,13 +68,30 @@ export function createUpgradeRule(
     // we don't want to check these again, as this would result in duplicated failure messages.
     const analyzedFiles = new Set<string>();
     let hasRuleFailures = false;
+    let needsPackageManagerRun = false;
 
-    for (const tsconfigPath of [...buildPaths, ...testPaths]) {
-      hasRuleFailures = hasRuleFailures || runMigrationRules(
-          tree, context.logger, tsconfigPath, targetVersion, [...cdkMigrationRules, ...extraRules],
-          upgradeData, analyzedFiles);
+    const runMigration = (tsconfigPath: string, isTestTarget: boolean) => {
+      const result = runMigrationRules(
+          tree, context.logger, tsconfigPath, isTestTarget, targetVersion,
+          [...cdkMigrationRules, ...extraRules], upgradeData, analyzedFiles);
+
+      hasRuleFailures = hasRuleFailures || result.hasFailures;
+      needsPackageManagerRun = needsPackageManagerRun || result.needsPackageManagerRun;
+    };
+
+    buildPaths.forEach(p => runMigration(p, false));
+    testPaths.forEach(p => runMigration(p, true));
+
+    // Migrations can be require the package manager to run upon completion.
+    // e.g. to update the lock file when a dependency has been removed.
+    if (needsPackageManagerRun) {
+      context.addTask(new NodePackageInstallTask({quiet: true}));
     }
 
+    // Execute all asynchronous tasks and await them here. We want to run
+    // the "onMigrationCompleteFn" after all work is done.
+    await context.engine.executePostTasks().toPromise();
+
     if (onMigrationCompleteFn) {
       onMigrationCompleteFn(targetVersion, hasRuleFailures);
     }

src/cdk/schematics/testing/test-case-setup.ts

@@ -14,6 +14,7 @@ import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/test
 import {readFileSync, removeSync} from 'fs-extra';
 import {sync as globSync} from 'glob';
 import {basename, extname, join, relative, sep} from 'path';
+import {EMPTY} from 'rxjs';
 import {createTestApp} from '../testing';
 
 /** Suffix that indicates whether a given file is a test case input. */
@@ -53,7 +54,15 @@ export async function createFileSystemTestApp(runner: SchematicTestRunner) {
   };
 
   function writeFile(filePath: string, content: string) {
+    // Update the temp file system host to reflect the changes in the real file system.
+    // This is still necessary since we depend on the real file system for parsing the
+    // TypeScript project.
     tempFileSystemHost.sync.write(normalize(filePath), virtualFs.stringToFileBuffer(content));
+    if (hostTree.exists(filePath)) {
+      hostTree.overwrite(filePath, content);
+    } else {
+      hostTree.create(filePath, content);
+    }
   }
 }
 
@@ -95,6 +104,12 @@ export async function createTestCaseSetup(migrationName: string, collectionPath:
     // from within the project.
     process.chdir(tempPath);
 
+    // Patch "executePostTasks" to do nothing. This is necessary since
+    // we cannot run the node install task in unit tests. Rather we just
+    // assert that certain async post tasks are scheduled.
+    // TODO(devversion): RxJS version conflicts between angular-devkit and our dev deps.
+    runner.engine.executePostTasks = () => EMPTY as any;
+
     await runner.runSchematicAsync(migrationName, {}, appTree).toPromise();
 
     // Switch back to the initial working directory.
@@ -103,7 +118,7 @@ export async function createTestCaseSetup(migrationName: string, collectionPath:
     return {logOutput};
   };
 
-  return {appTree, writeFile, tempPath, removeTempDir, runFixers};
+  return {runner, appTree, writeFile, tempPath, removeTempDir, runFixers};
 }
 
 /**

src/cdk/schematics/update-tool/index.ts

@@ -20,9 +20,9 @@ import {parseTsconfigFile} from './utils/parse-tsconfig';
 export type Constructor<T> = new (...args: any[]) => T;
 
 export function runMigrationRules<T>(
-    tree: Tree, logger: logging.LoggerApi, tsconfigPath: string, targetVersion: TargetVersion,
-    ruleTypes: Constructor<MigrationRule<T>>[], upgradeData: T,
-    analyzedFiles: Set<string>): boolean {
+    tree: Tree, logger: logging.LoggerApi, tsconfigPath: string, isTestTarget: boolean,
+    targetVersion: TargetVersion, ruleTypes: Constructor<MigrationRule<T>>[], upgradeData: T,
+    analyzedFiles: Set<string>): {hasFailures: boolean, needsPackageManagerRun: boolean} {
   // The CLI uses the working directory as the base directory for the
   // virtual file system tree.
   const basePath = process.cwd();
@@ -44,8 +44,9 @@ export function runMigrationRules<T>(
 
   // Create instances of all specified migration rules.
   for (const ruleCtor of ruleTypes) {
-    const rule = new ruleCtor(program, typeChecker, targetVersion, upgradeData);
-    rule.getUpdateRecorder = getUpdateRecorder;
+    const rule = new ruleCtor(
+        program, typeChecker, targetVersion, upgradeData, tree, getUpdateRecorder, basePath, logger,
+        isTestTarget);
     rule.init();
     if (rule.ruleEnabled) {
       rules.push(rule);
@@ -102,6 +103,9 @@ export function runMigrationRules<T>(
         }
       });
 
+  // Call the "postAnalysis" method for each migration rule.
+  rules.forEach(r => r.postAnalysis());
+
   // Commit all recorded updates in the update recorder. We need to perform the
   // replacements per source file in order to ensure that offsets in the TypeScript
   // program are not incorrectly shifted.
@@ -120,7 +124,10 @@ export function runMigrationRules<T>(
     });
   }
 
-  return !!ruleFailures.length;
+  return {
+    hasFailures: !!ruleFailures.length,
+    needsPackageManagerRun: rules.some(r => r.needsPackageManagerRun),
+  };
 
   function getUpdateRecorder(filePath: string): UpdateRecorder {
     const treeFilePath = getProjectRelativePath(filePath);

src/cdk/schematics/update-tool/migration-rule.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {UpdateRecorder} from '@angular-devkit/schematics';
+import {logging} from '@angular-devkit/core';
+import {Tree, UpdateRecorder} from '@angular-devkit/schematics';
 import * as ts from 'typescript';
 import {ResolvedResource} from './component-resource-collector';
 import {TargetVersion} from './target-version';
@@ -25,13 +26,38 @@ export class MigrationRule<T> {
   /** Whether the migration rule is enabled or not. */
   ruleEnabled = true;
 
+  /** Whether the package manager should run upon migration completion. */
+  needsPackageManagerRun = false;
+
   constructor(
-      public program: ts.Program, public typeChecker: ts.TypeChecker,
-      public targetVersion: TargetVersion, public upgradeData: T) {}
+      /** TypeScript program for the migration. */
+      public program: ts.Program,
+      /** TypeChecker instance for the analysis program. */
+      public typeChecker: ts.TypeChecker,
+      /** Version for which the migration rule should run. */
+      public targetVersion: TargetVersion,
+      /** Upgrade data passed to the migration. */
+      public upgradeData: T,
+      /** Devkit tree for the current migration. Can be used to insert/remove files. */
+      public tree: Tree,
+      /** Gets the update recorder for a given source file or resolved template. */
+      public getUpdateRecorder: (filePath: string) => UpdateRecorder,
+      /** Base directory of the virtual file system tree. */
+      public basePath: string,
+      /** Logger that can be used to print messages as part of the migration. */
+      public logger: logging.LoggerApi,
+      /** Whether the migration runs for a test target. */
+      public isTestTarget: boolean) {}
 
   /** Method can be used to perform global analysis of the program. */
   init(): void {}
 
+  /**
+   * Method that will be called once all nodes, templates and stylesheets
+   * have been visited.
+   */
+  postAnalysis(): void {}
+
   /**
    * Method that will be called for each node in a given source file. Unlike tslint, this
    * function will only retrieve TypeScript nodes that need to be casted manually. This
@@ -46,11 +72,6 @@ export class MigrationRule<T> {
   /** Method that will be called for each stylesheet in the program. */
   visitStylesheet(stylesheet: ResolvedResource): void {}
 
-  /** Gets the update recorder for a given source file or resolved template. */
-  getUpdateRecorder(filePath: string): UpdateRecorder {
-    throw new Error('MigrationRule#getUpdateRecorder is not implemented.');
-  }
-
   /** Creates a failure with a specified message at the given node location. */
   createFailureAtNode(node: ts.Node, message: string) {
     const sourceFile = node.getSourceFile();

src/cdk/schematics/utils/index.ts

@@ -12,6 +12,7 @@ export * from './build-component';
 export * from './get-project';
 export * from './html-head-element';
 export * from './parse5-element';
+export * from './project-index-file';
 export * from './project-main-file';
 export * from './project-style-file';
 export * from './project-targets';

src/cdk/schematics/utils/project-index-file.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC 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 {WorkspaceProject} from '@angular-devkit/core/src/experimental/workspace';
+import {BrowserBuilderTarget} from '@schematics/angular/utility/workspace-models';
+import {defaultTargetBuilders, getTargetsByBuilderName} from './project-targets';
+
+/** Gets the path of the index file in the given project. */
+export function getProjectIndexFiles(project: WorkspaceProject): string[] {
+  // Use a set to remove duplicate index files referenced in multiple build targets
+  // of a project.
+  return [...new Set(
+      (getTargetsByBuilderName(project, defaultTargetBuilders.build) as BrowserBuilderTarget[])
+          .filter(t => t.options.index)
+          .map(t => t.options.index!))];
+}

src/cdk/schematics/utils/project-targets.ts

@@ -8,26 +8,37 @@
 
 import {WorkspaceProject} from '@angular-devkit/core/src/experimental/workspace';
 import {SchematicsException} from '@angular-devkit/schematics';
+import {BuilderTarget} from '@schematics/angular/utility/workspace-models';
+
+/** Object that maps a CLI target to its default builder name. */
+export const defaultTargetBuilders = {
+  build: '@angular-devkit/build-angular:browser',
+  test: '@angular-devkit/build-angular:karma',
+};
 
 /** Resolves the architect options for the build target of the given project. */
 export function getProjectTargetOptions(project: WorkspaceProject, buildTarget: string) {
-  if (project.targets &&
-    project.targets[buildTarget] &&
-    project.targets[buildTarget].options) {
-
+  if (project.targets && project.targets[buildTarget] && project.targets[buildTarget].options) {
     return project.targets[buildTarget].options;
   }
 
   // TODO(devversion): consider removing this architect check if the CLI completely switched
   // over to `targets`, and the `architect` support has been removed.
   // See: https://github.com/angular/angular-cli/commit/307160806cb48c95ecb8982854f452303801ac9f
-  if (project.architect &&
-      project.architect[buildTarget] &&
+  if (project.architect && project.architect[buildTarget] &&
       project.architect[buildTarget].options) {
-
     return project.architect[buildTarget].options;
   }
 
   throw new SchematicsException(
-    `Cannot determine project target configuration for: ${buildTarget}.`);
+      `Cannot determine project target configuration for: ${buildTarget}.`);
+}
+
+/** Gets all targets from the given project that match the specified builder name. */
+export function getTargetsByBuilderName(
+    project: WorkspaceProject, builderName: string): BuilderTarget<any, unknown>[] {
+  const targets = project.targets || project.architect || {};
+  return Object.keys(targets)
+      .filter(name => targets[name].builder === builderName)
+      .map(name => targets[name]);
 }

src/material/schematics/BUILD.bazel

@@ -8,6 +8,7 @@ filegroup(
     name = "schematics_assets",
     srcs = glob([
         "ng-generate/*/files/**/*",
+        "ng-update/upgrade-rules/hammer-gestures-v9/gesture-config.template",
         "**/*.json",
     ]),
 )
@@ -70,6 +71,7 @@ ts_library(
     tsconfig = ":tsconfig.json",
     deps = [
         ":schematics",
+        "//src/cdk/private/testing",
         "//src/cdk/schematics",
         "//src/cdk/schematics/testing",
         "@npm//@angular-devkit/core",

src/material/schematics/ng-add/fonts/material-fonts.ts

@@ -6,26 +6,35 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Tree} from '@angular-devkit/schematics';
-import {appendHtmlElementToHead, getProjectFromWorkspace} from '@angular/cdk/schematics';
+import {SchematicsException, Tree} from '@angular-devkit/schematics';
+import {
+  appendHtmlElementToHead,
+  getProjectFromWorkspace,
+  getProjectIndexFiles,
+} from '@angular/cdk/schematics';
 import {getWorkspace} from '@schematics/angular/utility/config';
 import {Schema} from '../schema';
-import {getIndexHtmlPath} from './project-index-html';
 
 /** Adds the Material Design fonts to the index HTML file. */
 export function addFontsToIndex(options: Schema): (host: Tree) => Tree {
   return (host: Tree) => {
     const workspace = getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
-    const projectIndexHtmlPath = getIndexHtmlPath(project);
+    const projectIndexFiles = getProjectIndexFiles(project);
+
+    if (!projectIndexFiles.length) {
+      throw new SchematicsException('No project index HTML file could be found.');
+    }
 
     const fonts = [
       'https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap',
       'https://fonts.googleapis.com/icon?family=Material+Icons',
     ];
 
     fonts.forEach(f => {
-      appendHtmlElementToHead(host, projectIndexHtmlPath, `<link href="${f}" rel="stylesheet">`);
+      projectIndexFiles.forEach(indexFilePath => {
+        appendHtmlElementToHead(host, indexFilePath, `<link href="${f}" rel="stylesheet">`);
+      });
     });
 
     return host;