Material misc rules should not be part of the CDK

Author: devversion

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

@@ -8,16 +8,30 @@
 
 import {Rule} from '@angular-devkit/schematics';
 import {TargetVersion} from './target-version';
+import {cdkUpgradeData} from './upgrade-data';
 import {createUpgradeRule} from './upgrade-rules';
+import {UpgradeTSLintConfig} from './upgrade-rules/tslint-config';
+
+/** List of additional upgrade rules which are specifically for the CDK. */
+const extraUpgradeRules = [
+  // Misc check rules
+  'check-template-misc',
+];
+
+/** TSLint upgrade configuration that will be passed to the CDK ng-update rule. */
+const tslintUpgradeConfig: UpgradeTSLintConfig = {
+  upgradeData: cdkUpgradeData,
+  extraUpgradeRules,
+};
 
 /** Entry point for the migration schematics with target of Angular Material 6.0.0 */
 export function updateToV6(): Rule {
-  return createUpgradeRule(TargetVersion.V6);
+  return createUpgradeRule(TargetVersion.V6, tslintUpgradeConfig);
 }
 
 /** Entry point for the migration schematics with target of Angular Material 7.0.0 */
 export function updateToV7(): Rule {
-  return createUpgradeRule(TargetVersion.V7);
+  return createUpgradeRule(TargetVersion.V7, tslintUpgradeConfig);
 }
 
 /** Post-update schematic to be called when update is finished. */

src/cdk/schematics/ng-update/public-api.ts

@@ -9,6 +9,8 @@
 export * from './target-version';
 export * from './upgrade-data';
 export * from './data/index';
+export * from './html-parsing/angular';
+export * from './html-parsing/elements';
 export * from './upgrade-rules/index';
 export * from './upgrade-rules/tslint-config';
 export * from './tslint/component-walker';
@@ -17,4 +19,5 @@ export * from './tslint/external-failure-walker';
 export * from './typescript/base-types';
 export * from './typescript/imports';
 export * from './typescript/literal';
+export * from './typescript/module-specifiers';
 

src/cdk/schematics/ng-update/material/typescript-specifiers.ts renamed to src/cdk/schematics/ng-update/typescript/module-specifiers.ts

@@ -9,20 +9,20 @@
 import {green, red} from 'chalk';
 import {RuleFailure, Rules, RuleWalker} from 'tslint';
 import * as ts from 'typescript';
-import {
-  isMaterialExportDeclaration,
-  isMaterialImportDeclaration,
-} from '../../material/typescript-specifiers';
 import {
   isExportSpecifierNode,
   isImportSpecifierNode,
   isNamespaceImportNode,
 } from '../../typescript/imports';
+import {
+  isMaterialExportDeclaration,
+  isMaterialImportDeclaration,
+} from '../../typescript/module-specifiers';
 import {getUpgradeDataFromWalker} from '../../upgrade-data';
 
 /**
- * Rule that walks through every identifier that is part of Angular Material and replaces the
- * outdated name with the new one.
+ * Rule that walks through every identifier that is part of Angular Material or thr CDK
+ * and replaces the outdated name with the new one if specified in the upgrade data.
  */
 export class Rule extends Rules.AbstractRule {
 

src/cdk/schematics/ng-update/upgrade-rules/class-names/classNamesIdentifierRule.ts

@@ -9,14 +9,13 @@
 import {Rule, SchematicContext, TaskId, Tree} from '@angular-devkit/schematics';
 import {RunSchematicTask, TslintFixTask} from '@angular-devkit/schematics/tasks';
 import {sync as globSync} from 'glob';
-import {cdkUpgradeData} from '../upgrade-data';
 import {getProjectTsConfigPaths} from './project-tsconfig-paths';
 import {TargetVersion} from '../target-version';
 import {createTslintConfig, UpgradeTSLintConfig} from './tslint-config';
 
 /** Creates a Angular schematic rule that runs the upgrade for the specified target version. */
 export function createUpgradeRule(targetVersion: TargetVersion,
-                                  upgradeConfig?: UpgradeTSLintConfig): Rule {
+                                  upgradeConfig: UpgradeTSLintConfig): Rule {
   return (tree: Tree, context: SchematicContext) => {
 
     const projectTsConfigPaths = getProjectTsConfigPaths(tree);
@@ -33,7 +32,6 @@ export function createUpgradeRule(targetVersion: TargetVersion,
     const tslintConfig = createTslintConfig(targetVersion, {
       // Default options that can be overwritten if specified explicitly. e.g. if the
       // Material update schematic wants to specify a different upgrade data.
-      upgradeData: cdkUpgradeData,
       extraStyleFiles: extraStyleFiles,
       // Custom upgrade configuration options.
       ...upgradeConfig,

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

@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bold, green, red} from 'chalk';
+import {green, red} from 'chalk';
 import {RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {findInputsOnElementWithTag, findOutputsOnElementWithTag} from '../../html-parsing/angular';
 import {ExternalResource} from '../../tslint/component-file';
 import {ComponentWalker} from '../../tslint/component-walker';
 import {findAllSubstringIndices} from '../../typescript/literal';
@@ -50,35 +49,6 @@ export class Walker extends ComponentWalker {
       });
     });
 
-    findOutputsOnElementWithTag(content, 'selectionChange', ['mat-list-option']).forEach(offset => {
-      failures.push({
-        start: node.getStart() + offset,
-        end: node.getStart() + offset + 'selectionChange'.length,
-        message: `Found deprecated @Output() "${red('selectionChange')}" on ` +
-            `"${bold('mat-list-option')}". Use "${green('selectionChange')}" on ` +
-            `"${bold('mat-selection-list')}" instead.`
-      });
-    });
-
-    findOutputsOnElementWithTag(content, 'selectedChanged', ['mat-datepicker']).forEach(offset => {
-      failures.push({
-        start: node.getStart() + offset,
-        end: node.getStart() + offset + 'selectionChange'.length,
-        message: `Found deprecated @Output() "${red('selectedChanged')}" on ` +
-            `"${bold('mat-datepicker')}". Use "${green('dateChange')}" or ` +
-            `"${green('dateInput')}" on "${bold('<input [matDatepicker]>')}" instead.`
-      });
-    });
-
-    findInputsOnElementWithTag(content, 'selected', ['mat-button-toggle-group']).forEach(offset => {
-      failures.push({
-        start: node.getStart() + offset,
-        end: node.getStart() + offset + 'selected'.length,
-        message: `Found deprecated @Input() "${red('selected')}" on ` +
-            `"${bold('mat-radio-button-group')}". Use "${green('value')}" instead.`
-      });
-    });
-
     return failures;
   }
 }

src/cdk/schematics/ng-update/upgrade-rules/misc-checks/checkTemplateMiscRule.ts

@@ -21,16 +21,25 @@ export interface UpgradeTSLintConfig {
 /** Type for the configuration list of upgrade rules. */
 export type UpgradeRules = (string | (string | TargetVersion)[])[];
 
-/** List of rules that need to be enabled when running the TSLint fix task. */
-const upgradeRules: UpgradeRules = [
+/**
+ * List of upgrade rules that will be always enabled because the upgrade data for these rules
+ * can be swapped out dynamically.
+ *
+ * Rules which are specific to CDK breaking changes and are not based on the upgrade data,
+ * shouldn't be listed here because those cannot be disabled if Angular Material runs its
+ * update schematic using these base rules.
+ */
+const baseUpgradeRules: UpgradeRules = [
   // Attribute selector update rules.
   'attribute-selectors-string-literal',
   'attribute-selectors-stylesheet',
   'attribute-selectors-template',
 
+  // Class inheritance
+  'class-inheritance-check',
+
   // Class name update rules
   'class-names-identifier',
-  'class-names-identifier-misc',
 
   // CSS selectors update rules
   'css-selectors-string-literal',
@@ -51,19 +60,10 @@ const upgradeRules: UpgradeRules = [
 
   // Property name update rules
   'property-names-access',
-  'property-names-misc',
 
-  // Class inheritance
-  'class-inheritance-check',
-  'class-inheritance-misc',
-
-  // signature checks
+  // Signature and method call checks
   'constructor-signature-check',
   'method-calls-check',
-
-  // Additional misc rules.
-  'check-import-misc',
-  'check-template-misc',
 ];
 
 /** List of absolute paths that refer to directories that contain the upgrade rules. */
@@ -80,7 +80,7 @@ const ruleDirectories = globSync('./**/', {cwd: __dirname, absolute: true});
  * specify additional external stylesheets which are not referenced by Angular.
  */
 export function createTslintConfig(target: TargetVersion, config: UpgradeTSLintConfig) {
-  const configuredRules = upgradeRules.concat(config.extraUpgradeRules || []);
+  const configuredRules = baseUpgradeRules.concat(config.extraUpgradeRules || []);
   const configuredRuleDirs = ruleDirectories.concat(config.extraRuleDirectories || []);
 
   const enabledRules = configuredRules.reduce((result, data) => {

src/cdk/schematics/ng-update/upgrade-rules/tslint-config.ts

@@ -13,13 +13,20 @@ import {materialUpgradeData} from './upgrade-data';
 
 /** List of additional upgrade rules for Angular Material. */
 const upgradeRules = [
+  // Misc check rules
+  'check-class-inheritance-misc',
+  'check-class-names-misc',
+  'check-imports-misc',
+  'check-property-names-misc',
+  'check-template-misc',
+
   // Ripple misc V7
   ['ripple-speed-factor-assignment', TargetVersion.V7],
   ['ripple-speed-factor-template', TargetVersion.V7],
 ];
 
 /** List of absolute paths that refer to directories that contain the Material upgrade rules. */
-const ruleDirectories = globSync('rules/**/', {cwd: __dirname, absolute: true});
+const ruleDirectories = globSync('upgrade-rules/**/', {cwd: __dirname, absolute: true});
 
 /** TSLint upgrade configuration that will be passed to the CDK ng-update rule. */
 const tslintUpgradeConfig: UpgradeTSLintConfig = {

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

@@ -7,7 +7,8 @@ describe('v6 method call checks', () => {
       'method-call-checks': resolveBazelDataFile(`misc/method-call-checks_input.ts`)
     });
 
-    // TODO: move to CDK
+    // TODO(devversion): Move this test case to the CDK and assert that this failure has been
+    // reported by TSLint.
     expect(logOutput)
       .not.toMatch(/\[15,.*Found call to "FocusMonitor\.monitor".*renderer.*has been removed/);
     expect(logOutput)

src/lib/schematics/ng-update/test-cases/misc/method-call-checks.spec.ts

@@ -9,11 +9,11 @@
 import {bold, green} from 'chalk';
 import {ProgramAwareRuleWalker, RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {determineBaseTypes} from '../../typescript/base-types';
+import {determineBaseTypes} from '@angular/cdk/schematics';
 
 /**
- * Rule that checks for classes that extend Angular Material or CDK classes which have
- * changed their API.
+ * Rule that checks for classes that extend Angular Material classes which have changed
+ * their API.
  */
 export class Rule extends Rules.TypedRule {
   applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): RuleFailure[] {

src/cdk/schematics/ng-update/upgrade-rules/class-inheritance/classInheritanceMiscRule.ts renamed to src/lib/schematics/ng-update/upgrade-rules/misc-checks/checkClassInheritanceMiscRule.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {isMaterialImportDeclaration} from '@angular/cdk/schematics';
 import {red} from 'chalk';
 import {ProgramAwareRuleWalker, RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {isMaterialImportDeclaration} from '../../material/typescript-specifiers';
 
 /**
  * Rule that detects import declarations that refer to outdated identifiers from Angular Material

src/cdk/schematics/ng-update/upgrade-rules/class-names/classNamesIdentifierMiscRule.ts renamed to src/lib/schematics/ng-update/upgrade-rules/misc-checks/checkClassNamesMiscRule.ts

@@ -0,0 +1,77 @@
+/**
+ * @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 {
+  ComponentWalker,
+  ExternalResource,
+  findInputsOnElementWithTag,
+  findOutputsOnElementWithTag,
+} from '@angular/cdk/schematics';
+import {bold, green, red} from 'chalk';
+import {RuleFailure, Rules} from 'tslint';
+import * as ts from 'typescript';
+
+/**
+ * Rule that walks through every inline or external template and reports if there are outdated
+ * usages of the Angular Material API that needs to be updated manually.
+ */
+export class Rule extends Rules.AbstractRule {
+  apply(sourceFile: ts.SourceFile): RuleFailure[] {
+    return this.applyWithWalker(new Walker(sourceFile, this.getOptions()));
+  }
+}
+
+export class Walker extends ComponentWalker {
+
+  visitInlineTemplate(node: ts.StringLiteralLike) {
+    this._createFailuresForContent(node, node.getText()).forEach(data => {
+      this.addFailureFromStartToEnd(data.start, data.end, data.message);
+    });
+  }
+
+  visitExternalTemplate(node: ExternalResource) {
+    this._createFailuresForContent(node, node.getText()).forEach(data => {
+      this.addExternalFailureFromStartToEnd(node, data.start, data.end, data.message);
+    });
+  }
+
+  private _createFailuresForContent(node: ts.Node, content: string) {
+    const failures: {message: string, start: number, end: number}[] = [];
+
+    findOutputsOnElementWithTag(content, 'selectionChange', ['mat-list-option']).forEach(offset => {
+      failures.push({
+        start: node.getStart() + offset,
+        end: node.getStart() + offset + 'selectionChange'.length,
+        message: `Found deprecated @Output() "${red('selectionChange')}" on ` +
+            `"${bold('mat-list-option')}". Use "${green('selectionChange')}" on ` +
+            `"${bold('mat-selection-list')}" instead.`
+      });
+    });
+
+    findOutputsOnElementWithTag(content, 'selectedChanged', ['mat-datepicker']).forEach(offset => {
+      failures.push({
+        start: node.getStart() + offset,
+        end: node.getStart() + offset + 'selectionChange'.length,
+        message: `Found deprecated @Output() "${red('selectedChanged')}" on ` +
+            `"${bold('mat-datepicker')}". Use "${green('dateChange')}" or ` +
+            `"${green('dateInput')}" on "${bold('<input [matDatepicker]>')}" instead.`
+      });
+    });
+
+    findInputsOnElementWithTag(content, 'selected', ['mat-button-toggle-group']).forEach(offset => {
+      failures.push({
+        start: node.getStart() + offset,
+        end: node.getStart() + offset + 'selected'.length,
+        message: `Found deprecated @Input() "${red('selected')}" on ` +
+            `"${bold('mat-radio-button-group')}". Use "${green('value')}" instead.`
+      });
+    });
+
+    return failures;
+  }
+}

src/cdk/schematics/ng-update/upgrade-rules/misc-checks/checkImportMiscRule.ts renamed to src/lib/schematics/ng-update/upgrade-rules/misc-checks/checkImportsMiscRule.ts

@@ -135,7 +135,7 @@
     "exclude": [
       // Exclude schematic template files and test cases that can't be linted.
       "src/lib/schematics/**/files/**/*",
-      "src/lib/schematics/update/test-cases/**/*"
+      "src/lib/schematics/ng-update/test-cases/**/*"
     ]
   }
 }