refactor(schematics): cleanup attribute selector rules (#12507)

Author: devversion

src/lib/schematics/update/material/color.ts

@@ -16,7 +16,7 @@ const colorFns = {
 
 export function color(message: string): string {
   // 'r{{text}}' with red 'text', 'g{{text}}' with green 'text', and 'b{{text}}' with bold 'text'.
-  return message.replace(/(.)\{\{(.*?)\}\}/g, (_m, fnName, text) => {
+  return message.replace(/(.){{(.*?)}}/g, (_m, fnName, text) => {
     const fn = colorFns[fnName];
     return fn ? fn(text) : text;
   });

src/lib/schematics/update/material/extra-stylsheets.ts

@@ -0,0 +1,55 @@
+/**
+ * @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 {green, red} from 'chalk';
+import {Replacement, RuleFailure, Rules, RuleWalker} from 'tslint';
+import {
+  attributeSelectors,
+  MaterialAttributeSelectorData,
+} from '../../material/data/attribute-selectors';
+import {findAllSubstringIndices} from '../../typescript/literal';
+import * as ts from 'typescript';
+
+/**
+ * Rule that walks through every string literal that is part of a call expression and
+ * switches deprecated attribute selectors to the updated selector.
+ */
+export class Rule extends Rules.AbstractRule {
+  apply(sourceFile: ts.SourceFile): RuleFailure[] {
+    return this.applyWithWalker(new Walker(sourceFile, this.getOptions()));
+  }
+}
+
+class Walker extends RuleWalker {
+
+  visitStringLiteral(literal: ts.StringLiteral) {
+    if (literal.parent && literal.parent.kind !== ts.SyntaxKind.CallExpression) {
+      return;
+    }
+
+    const literalText = literal.getFullText();
+
+    attributeSelectors.forEach(selector => {
+      findAllSubstringIndices(literalText, selector.replace)
+        .map(offset => literal.getStart() + offset)
+        .map(start => new Replacement(start, selector.replace.length, selector.replaceWith))
+        .forEach(replacement => this._addFailureWithReplacement(literal, replacement, selector));
+    });
+  }
+
+  /** Adds an attribute selector failure with the given replacement at the specified node. */
+  private _addFailureWithReplacement(node: ts.Node, replacement: Replacement,
+                                     selector: MaterialAttributeSelectorData) {
+
+    this.addFailureAtNode(
+      node,
+      `Found deprecated attribute selector "${red('[' + selector.replace + ']')}" which ` +
+      `has been renamed to "${green('[' + selector.replaceWith + ']')}"`,
+      replacement);
+  }
+}

src/lib/schematics/update/rules/attribute-selectors/attributeSelectorsStringLiteralRule.ts

@@ -0,0 +1,78 @@
+/**
+ * @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 {green, red} from 'chalk';
+import {sync as globSync} from 'glob';
+import {IOptions, Replacement, RuleFailure, Rules} from 'tslint';
+import {attributeSelectors} from '../../material/data/attribute-selectors';
+import {ExternalResource} from '../../tslint/component-file';
+import {ComponentWalker} from '../../tslint/component-walker';
+import {
+  addFailureAtReplacement,
+  createExternalReplacementFailure,
+} from '../../tslint/rule-failures';
+import {findAllSubstringIndices} from '../../typescript/literal';
+import * as ts from 'typescript';
+
+/**
+ * Rule that walks through every stylesheet in the application and updates outdated
+ * attribute selectors to the updated selector.
+ */
+export class Rule extends Rules.AbstractRule {
+
+  apply(sourceFile: ts.SourceFile): RuleFailure[] {
+    return this.applyWithWalker(new Walker(sourceFile, this.getOptions()));
+  }
+}
+
+export class Walker extends ComponentWalker {
+
+  constructor(sourceFile: ts.SourceFile, options: IOptions) {
+    // In some applications, developers will have global stylesheets that are not specified in any
+    // Angular component. Therefore we glob up all css and scss files outside of node_modules and
+    // dist and check them as well.
+    const extraFiles = globSync('!(node_modules|dist)/**/*.+(css|scss)');
+    super(sourceFile, options, extraFiles);
+    extraFiles.forEach(styleUrl => this._reportExternalStyle(styleUrl));
+  }
+
+  visitInlineStylesheet(literal: ts.StringLiteral) {
+    this._createReplacementsForContent(literal, literal.getText())
+      .forEach(data => addFailureAtReplacement(this, data.failureMessage, data.replacement));
+  }
+
+  visitExternalStylesheet(node: ExternalResource) {
+    this._createReplacementsForContent(node, node.getFullText())
+      .map(data => createExternalReplacementFailure(node, data.failureMessage,
+          this.getRuleName(), data.replacement))
+      .forEach(failure => this.addFailure(failure));
+  }
+
+  /**
+   * Searches for outdated attribute selectors in the specified content and creates replacements
+   * with the according messages that can be added to a rule failure.
+   */
+  private _createReplacementsForContent(node: ts.Node, stylesheetContent: string) {
+    const replacements: {failureMessage: string, replacement: Replacement}[] = [];
+
+    attributeSelectors.forEach(selector => {
+      const currentSelector = `[${selector.replace}]`;
+      const updatedSelector = `[${selector.replaceWith}]`;
+
+      const failureMessage = `Found deprecated attribute selector "${red(currentSelector)}"` +
+        ` which has been renamed to "${green(updatedSelector)}"`;
+
+      findAllSubstringIndices(stylesheetContent, currentSelector)
+        .map(offset => node.getStart() + offset)
+        .map(start => new Replacement(start, currentSelector.length, updatedSelector))
+        .forEach(replacement => replacements.push({replacement, failureMessage}));
+    });
+
+    return replacements;
+  }
+}

src/lib/schematics/update/rules/attribute-selectors/attributeSelectorsStylesheetRule.ts

@@ -0,0 +1,64 @@
+/**
+ * @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 {green, red} from 'chalk';
+import {Replacement, RuleFailure, Rules} from 'tslint';
+import * as ts from 'typescript';
+import {attributeSelectors} from '../../material/data/attribute-selectors';
+import {ExternalResource} from '../../tslint/component-file';
+import {ComponentWalker} from '../../tslint/component-walker';
+import {
+  addFailureAtReplacement,
+  createExternalReplacementFailure,
+} from '../../tslint/rule-failures';
+import {findAllSubstringIndices} from '../../typescript/literal';
+
+/**
+ * Rule that walks through every component template and switches outdated attribute
+ * selectors to the updated selector.
+ */
+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(template: ts.StringLiteral) {
+    this._createReplacementsForContent(template, template.getText())
+      .forEach(data => addFailureAtReplacement(this, data.failureMessage, data.replacement));
+  }
+
+  visitExternalTemplate(template: ExternalResource) {
+    this._createReplacementsForContent(template, template.getFullText())
+      .map(data => createExternalReplacementFailure(template, data.failureMessage,
+          this.getRuleName(), data.replacement))
+      .forEach(failure => this.addFailure(failure));
+  }
+
+  /**
+   * Searches for outdated attribute selectors in the specified content and creates replacements
+   * with the according messages that can be added to a rule failure.
+   */
+  private _createReplacementsForContent(node: ts.Node, templateContent: string) {
+    const replacements: {failureMessage: string, replacement: Replacement}[] = [];
+
+    attributeSelectors.forEach(selector => {
+      const failureMessage = `Found deprecated attribute selector "[${red(selector.replace)}]"` +
+        ` which has been renamed to "[${green(selector.replaceWith)}]"`;
+
+      findAllSubstringIndices(templateContent, selector.replace)
+        .map(offset => node.getStart() + offset)
+        .map(start => new Replacement(start, selector.replace.length, selector.replaceWith))
+        .forEach(replacement => replacements.push({replacement, failureMessage}));
+    });
+
+    return replacements;
+  }
+}

src/lib/schematics/update/rules/attribute-selectors/attributeSelectorsTemplateRule.ts

@@ -12,7 +12,7 @@ import * as ts from 'typescript';
 import {findInputsOnElementWithTag, findOutputsOnElementWithTag} from '../html/angular';
 import {ExternalResource} from '../tslint/component-file';
 import {ComponentWalker} from '../tslint/component-walker';
-import {findAll} from '../typescript/literal';
+import {findAllSubstringIndices} from '../typescript/literal';
 
 /**
  * Rule that walks through every component decorator and updates their inline or external
@@ -48,12 +48,14 @@ export class CheckTemplateMiscWalker extends ComponentWalker {
       {start: number, end: number, message: string}[] {
     let failures: {message: string, start: number, end: number}[] = [];
 
-    failures = failures.concat(findAll(templateContent, 'cdk-focus-trap').map(offset => ({
-      start: offset,
-      end: offset + 'cdk-focus-trap'.length,
-      message: `Found deprecated element selector "${red('cdk-focus-trap')}" which has been` +
-          ` changed to an attribute selector "${green('[cdkTrapFocus]')}"`
-    })));
+    failures = failures.concat(
+      findAllSubstringIndices(templateContent, 'cdk-focus-trap').map(offset => ({
+        start: offset,
+        end: offset + 'cdk-focus-trap'.length,
+        message: `Found deprecated element selector "${red('cdk-focus-trap')}" which has been` +
+            ` changed to an attribute selector "${green('[cdkTrapFocus]')}"`
+      }))
+    );
 
     failures = failures.concat(
         findOutputsOnElementWithTag(templateContent, 'selectionChange', ['mat-list-option'])

src/lib/schematics/update/rules/checkTemplateMiscRule.ts

@@ -10,7 +10,7 @@ import {green, red} from 'chalk';
 import {Replacement, RuleFailure, Rules, RuleWalker} from 'tslint';
 import * as ts from 'typescript';
 import {cssNames} from '../material/data/css-names';
-import {findAll} from '../typescript/literal';
+import {findAllSubstringIndices} from '../typescript/literal';
 
 /**
  * Rule that walks through every string literal, which includes the outdated Material name and
@@ -34,7 +34,7 @@ export class SwitchStringLiteralCssNamesWalker extends RuleWalker {
     cssNames.forEach(name => {
       if (!name.whitelist || name.whitelist.strings) {
         this.createReplacementsForOffsets(stringLiteral, name,
-            findAll(stringLiteralText, name.replace)).forEach(replacement => {
+            findAllSubstringIndices(stringLiteralText, name.replace)).forEach(replacement => {
           this.addFailureAtNode(
               stringLiteral,
               `Found deprecated CSS class "${red(name.replace)}" which has been renamed to` +

src/lib/schematics/update/rules/switchStringLiteralAttributeSelectorsRule.ts

@@ -10,7 +10,7 @@ import {green, red} from 'chalk';
 import {Replacement, RuleFailure, Rules, RuleWalker} from 'tslint';
 import * as ts from 'typescript';
 import {elementSelectors} from '../material/data/element-selectors';
-import {findAll} from '../typescript/literal';
+import {findAllSubstringIndices} from '../typescript/literal';
 
 /**
  * Rule that walks through every string literal, which includes the outdated Material name and
@@ -33,7 +33,7 @@ export class SwitchStringLiteralElementSelectorsWalker extends RuleWalker {
 
     elementSelectors.forEach(selector => {
       this.createReplacementsForOffsets(stringLiteral, selector,
-          findAll(stringLiteralText, selector.replace)).forEach(replacement => {
+          findAllSubstringIndices(stringLiteralText, selector.replace)).forEach(replacement => {
         this.addFailureAtNode(
             stringLiteral,
             `Found deprecated element selector "${red(selector.replace)}" which has been` +