Auto migrate non-parseable expressions

Author: devversion

src/lib/schematics/update/rules/ripple-v7/ripple-speed-factor.ts

@@ -12,3 +12,15 @@ export function convertSpeedFactorToDuration(factor: number) {
   // now calculate the exact `enterDuration`. 450ms is the enter duration without factor.
   return 450 / (factor || 1);
 }
+
+/**
+ * Creates a runtime TypeScript expression that can be used in order to calculate the duration
+ * from the speed factor expression that couldn't be statically analyzed.
+ *
+ * @param speedFactorValue Speed factor expression that couldn't be statically analyzed.
+ */
+export function createSpeedFactorConvertExpression(speedFactorValue: string): string {
+  // To be sure that the speed factor value expression is calculated properly, we need to add
+  // the according parenthesis.
+  return `450 / (${speedFactorValue})`;
+}

src/lib/schematics/update/rules/ripple-v7/switchRippleSpeedFactorRule.ts

@@ -8,8 +8,18 @@
 
 import {ProgramAwareRuleWalker, RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {bold, red, green} from 'chalk';
-import {convertSpeedFactorToDuration} from './ripple-speed-factor';
+import {bold, red} from 'chalk';
+import {
+  convertSpeedFactorToDuration,
+  createSpeedFactorConvertExpression,
+} from './ripple-speed-factor';
+
+/**
+ * Note that will be added whenever a speed factor expression has been converted to calculate
+ * the according duration. This note should encourage people to clean up their code by switching
+ * away from the speed factors to explicit durations.
+ */
+const removeNote = `TODO: Cleanup duration calculation.`;
 
 /**
  * Rule that walks through property assignment and switches the global `baseSpeedFactor`
@@ -19,7 +29,7 @@ import {convertSpeedFactorToDuration} from './ripple-speed-factor';
 export class Rule extends Rules.TypedRule {
   applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): RuleFailure[] {
     return this.applyWithWalker(
-        new SwitchRippleSpeedFactorRule(sourceFile, this.getOptions(), program));
+      new SwitchRippleSpeedFactorRule(sourceFile, this.getOptions(), program));
   }
 }
 
@@ -53,21 +63,32 @@ export class SwitchRippleSpeedFactorRule extends ProgramAwareRuleWalker {
         const propertyNameReplacement = this.createReplacement(leftExpression.name.getStart(),
           leftExpression.name.getWidth(), 'animation');
 
+        // Replace the value assignment with the new animation config.
         const rightExpressionReplacement = this.createReplacement(expression.right.getStart(),
           expression.right.getWidth(), `{enterDuration: ${newEnterDurationValue}}`);
 
         this.addFailureAtNode(
           expression,
-          `Found deprecated member assignment for "${bold('MatRipple')}#${red('speedFactor')}"`,
+          `Found deprecated variable assignment for "${bold('MatRipple')}#${red('speedFactor')}"`,
           [propertyNameReplacement, rightExpressionReplacement]);
       } else {
-        // In case the speed factor is dynamically calculated or passed to the assignment, we just
-        // print the failure and notify about the breaking change.
+        // Handle the right expression differently if the previous speed factor value can't
+        // be resolved statically. In that case, we just create a TypeScript expression that
+        // calculates the explicit duration based on the non-static speed factor expression.
+        const newExpression = createSpeedFactorConvertExpression(expression.right.getText());
+
+        // Replace the `speedFactor` property name with `animation`.
+        const propertyNameReplacement = this.createReplacement(leftExpression.name.getStart(),
+          leftExpression.name.getWidth(), 'animation');
+
+        // Replace the value assignment with the new animation config and remove todo.
+        const rightExpressionReplacement = this.createReplacement(expression.right.getStart(),
+          expression.right.getWidth(), `/** ${removeNote} */ {enterDuration: ${newExpression}}`);
+
         this.addFailureAtNode(
-          expression, `Found deprecated member assignment for "${bold('MatRipple')}#` +
-          `${red('speedFactor')}. Please manually switch from "${red('speedFactor')}" to ` +
-          `"${green('animation')}". Note that the animation property only accepts explicit ` +
-          `durations in milliseconds.`);
+          expression,
+          `Found deprecated variable assignment for "${bold('MatRipple')}#${red('speedFactor')}"`,
+          [propertyNameReplacement, rightExpressionReplacement]);
       }
     }
   }
@@ -94,29 +115,42 @@ export class SwitchRippleSpeedFactorRule extends ProgramAwareRuleWalker {
     // immediately in the provider object (e.g. it can happen that someone just imports the
     // config from a separate file).
 
-    if (assignment.initializer.kind === ts.SyntaxKind.NumericLiteral) {
-      const numericValue = parseFloat((assignment.initializer as ts.NumericLiteral).text);
+    const {initializer, name} = assignment;
+
+    if (initializer.kind === ts.SyntaxKind.NumericLiteral) {
+      const numericValue = parseFloat((initializer as ts.NumericLiteral).text);
       const newEnterDurationValue = convertSpeedFactorToDuration(numericValue);
 
-      const keyNameReplacement = this.createReplacement(assignment.name.getStart(),
+      const keyNameReplacement = this.createReplacement(name.getStart(),
         assignment.name.getWidth(), `animation`);
 
-      const initializerReplacement = this.createReplacement(assignment.initializer.getStart(),
-        assignment.initializer.getWidth(), `{enterDuration: ${newEnterDurationValue}}`);
+      const initializerReplacement = this.createReplacement(initializer.getStart(),
+        initializer.getWidth(), `{enterDuration: ${newEnterDurationValue}}`);
 
       this.addFailureAtNode(
         assignment,
-        `Found deprecated property assignment for "${bold('MAT_RIPPLE_GLOBAL_OPTIONS')} -> ` +
+        `Found deprecated property assignment for "${bold('MAT_RIPPLE_GLOBAL_OPTIONS')}:` +
         `${red('baseSpeedFactor')}"`,
         [keyNameReplacement, initializerReplacement]);
     } else {
-      // In case the base speed factor is dynamically calculated and inside of an Angular provider,
-      // we just print the failure and notify about the breaking change.
+      // Handle the right expression differently if the previous speed factor value can't
+      // be resolved statically. In that case, we just create a TypeScript expression that
+      // calculates the explicit duration based on the non-static speed factor expression.
+      const newExpression = createSpeedFactorConvertExpression(initializer.getText());
+
+      // Replace the `baseSpeedFactor` property name with `animation`.
+      const propertyNameReplacement = this.createReplacement(name.getStart(),
+        name.getWidth(), 'animation');
+
+      // Replace the value assignment with the new animation config and remove todo.
+      const rightExpressionReplacement = this.createReplacement(initializer.getStart(),
+        initializer.getWidth(), `/** ${removeNote} */ {enterDuration: ${newExpression}}`);
+
       this.addFailureAtNode(
-        assignment, `Found a deprecated property assignment for ` +
-        `"${bold('MAT_RIPPLE_GLOBAL_OPTIONS')} -> ${red('speedFactor')}. Please manually switch ` +
-        `from "${red('baseSpeedFactor')}" to "${green('animation')}". Note that the animation ` +
-        `property only accepts explicit durations in milliseconds.`);
+        assignment,
+        `Found a deprecated property assignment for "${bold('MAT_RIPPLE_GLOBAL_OPTIONS')}:` +
+        `${red('baseSpeedFactor')}.`,
+        [propertyNameReplacement, rightExpressionReplacement]);
     }
   }
 }

src/lib/schematics/update/rules/ripple-v7/switchRippleSpeedFactorTemplateRule.ts

@@ -8,10 +8,12 @@
 
 import {RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {convertSpeedFactorToDuration} from './ripple-speed-factor';
+import {
+  convertSpeedFactorToDuration,
+  createSpeedFactorConvertExpression,
+} from './ripple-speed-factor';
 import {ExternalResource} from '../../tslint/component-file';
 import {ComponentWalker} from '../../tslint/component-walker';
-import {red, green} from 'chalk';
 
 /** Regular expression that matches [matRippleSpeedFactor]="$NUMBER" in templates. */
 const speedFactorNumberRegex = /\[matRippleSpeedFactor]="(\d+(?:\.\d+)?)"/g;
@@ -26,7 +28,7 @@ const speedFactorNotParseable = /\[matRippleSpeedFactor]="(?!\d+(?:\.\d+)?")(.*)
 export class Rule extends Rules.AbstractRule {
   apply(sourceFile: ts.SourceFile): RuleFailure[] {
     return this.applyWithWalker(
-        new SwitchRippleSpeedFactorTemplateRule(sourceFile, this.getOptions()));
+      new SwitchRippleSpeedFactorTemplateRule(sourceFile, this.getOptions()));
   }
 }
 
@@ -56,10 +58,12 @@ export class SwitchRippleSpeedFactorTemplateRule extends ComponentWalker {
     }
 
     while ((match = speedFactorNotParseable.exec(templateText)) !== null) {
+      const newDurationExpression = createSpeedFactorConvertExpression(match[1]);
+      const fix = this.createReplacement(startPos + match.index!, match[0].length,
+        `[matRippleAnimation]="{enterDuration: (${newDurationExpression})}"`);
+
       this.addFailureAt(startPos + match.index!, match[0].length,
-        `Detected deprecated ${red('[matRippleSpeedFactor]')} input binding with non-parseable ` +
-        `value. Please switch manually to ${green('[matRippleAnimation]')}. Note that the ` +
-        `animation config only accepts explicit durations in milliseconds.`);
+        'Detected deprecated [matRippleSpeedFactor] input binding with non-parseable value.', fix);
     }
   }
 }