fix(material/schematics): make ts import replacements more specific (#…

…25504) * fix(material/schematics): make ts import replacements more specific * fixup! fix(material/schematics): make ts import replacements more specific * fixup! fix(material/schematics): make ts import replacements more specific
angular · Aug 23, 2022 · 5ab25d0 · 5ab25d0
1 parent fd5afe7
commit 5ab25d0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 23 deletions.
diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts
@@ -9,15 +9,15 @@
 export const COMPONENTS = [
   'autocomplete',
   'button',
+  'core',
   'card',
   'checkbox',
   'chips',
   'dialog',
   'form-field',
   'input',
+  'list',
   'menu',
-  'option',
-  'optgroup',
   'paginator',
   'progress-bar',
   'progress-spinner',
@@ -31,19 +31,19 @@ export const COMPONENTS = [
   'tooltip',
 ];
 
-export const MIXINS = COMPONENTS.flatMap(component => [
+export const MAT_IMPORT_CHANGES = COMPONENTS.map(component => ({
+  old: `@angular/material/${component}`,
+  new: `@angular/material/legacy-${component}`,
+}));
+
+export const MDC_IMPORT_CHANGES = COMPONENTS.map(component => ({
+  old: `@angular/material-experimental/mdc-${component}`,
+  new: `@angular/material/${component}`,
+}));
+
+export const MIXINS = COMPONENTS.concat(['option', 'optgroup']).flatMap(component => [
   `${component}-theme`,
   `${component}-color`,
   `${component}-density`,
   `${component}-typography`,
 ]);
-
-export const MAT_IMPORT_CHANGE = {
-  old: '@angular/material/',
-  new: '@angular/material/legacy-',
-};
-
-export const MAT_MDC_IMPORT_CHANGE = {
-  old: '@angular/material-experimental/mdc-',
-  new: '@angular/material/',
-};
diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts
@@ -10,7 +10,7 @@ import * as ts from 'typescript';
 import * as postcss from 'postcss';
 import * as scss from 'postcss-scss';
 
-import {MAT_IMPORT_CHANGE, MAT_MDC_IMPORT_CHANGE, MIXINS} from './constants';
+import {MAT_IMPORT_CHANGES, MDC_IMPORT_CHANGES, MIXINS} from './constants';
 
 import {Migration, ResolvedResource, TargetVersion, WorkspacePath} from '@angular/cdk/schematics';
 
@@ -109,16 +109,19 @@ export class LegacyComponentsMigration extends Migration<null> {
    */
   private _handleImportDeclaration(node: ts.ImportDeclaration): void {
     const moduleSpecifier = node.moduleSpecifier as ts.StringLiteral;
-    if (moduleSpecifier.text.startsWith(MAT_IMPORT_CHANGE.old)) {
-      this._tsReplaceAt(node, MAT_IMPORT_CHANGE);
+
+    const matImportChange = this._findMatImportChange(moduleSpecifier);
+    if (matImportChange) {
+      this._tsReplaceAt(node, matImportChange);
 
       if (node.importClause?.namedBindings && ts.isNamedImports(node.importClause.namedBindings)) {
         this._handleNamedImportBindings(node.importClause.namedBindings);
       }
     }
 
-    if (moduleSpecifier.text.startsWith(MAT_MDC_IMPORT_CHANGE.old)) {
-      this._tsReplaceAt(node, MAT_MDC_IMPORT_CHANGE);
+    const mdcImportChange = this._findMdcImportChange(moduleSpecifier);
+    if (mdcImportChange) {
+      this._tsReplaceAt(node, mdcImportChange);
     }
   }
 
@@ -128,12 +131,16 @@ export class LegacyComponentsMigration extends Migration<null> {
    */
   private _handleImportExpression(node: ts.CallExpression): void {
     const moduleSpecifier = node.arguments[0] as ts.StringLiteral;
-    if (moduleSpecifier.text.startsWith(MAT_IMPORT_CHANGE.old)) {
-      this._tsReplaceAt(node, MAT_IMPORT_CHANGE);
+
+    const matImportChange = this._findMatImportChange(moduleSpecifier);
+    if (matImportChange) {
+      this._tsReplaceAt(node, matImportChange);
+      return;
     }
 
-    if (moduleSpecifier.text.startsWith(MAT_MDC_IMPORT_CHANGE.old)) {
-      this._tsReplaceAt(node, MAT_MDC_IMPORT_CHANGE);
+    const mdcImportChange = this._findMdcImportChange(moduleSpecifier);
+    if (mdcImportChange) {
+      this._tsReplaceAt(node, mdcImportChange);
     }
   }
 
@@ -167,7 +174,8 @@ export class LegacyComponentsMigration extends Migration<null> {
       !!node.initializer &&
       ts.isAwaitExpression(node.initializer) &&
       this._isImportCallExpression(node.initializer.expression) &&
-      node.initializer.expression.arguments[0].text.startsWith(MAT_IMPORT_CHANGE.old) &&
+      ts.isStringLiteral(node.initializer.expression.arguments[0]) &&
+      !!this._findMatImportChange(node.initializer.expression.arguments[0]) &&
       ts.isObjectBindingPattern(node.name)
     );
   }
@@ -184,6 +192,18 @@ export class LegacyComponentsMigration extends Migration<null> {
     );
   }
 
+  private _findMatImportChange(
+    moduleSpecifier: ts.StringLiteral,
+  ): {old: string; new: string} | undefined {
+    return MAT_IMPORT_CHANGES.find(change => change.old === moduleSpecifier.text);
+  }
+
+  private _findMdcImportChange(
+    moduleSpecifier: ts.StringLiteral,
+  ): {old: string; new: string} | undefined {
+    return MDC_IMPORT_CHANGES.find(change => change.old === moduleSpecifier.text);
+  }
+
   /** Updates the source file of the given ts node with the given replacements. */
   private _tsReplaceAt(node: ts.Node, str: {old: string; new: string}): void {
     const filePath = this.fileSystem.resolve(node.getSourceFile().fileName);

diff --git a/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts b/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts
@@ -81,6 +81,13 @@ describe('v15 legacy components migration', () => {
           new: `import('@angular/material/legacy-button').then(() => {});`,
         });
       });
+
+      it('does not update non-legacy imports', async () => {
+        await runTypeScriptMigrationTest('named binding', {
+          old: `import {MatButtonToggleModule} from '@angular/material/button-toggle';`,
+          new: `import {MatButtonToggleModule} from '@angular/material/button-toggle';`,
+        });
+      });
     });
 
     describe('material-experimental --> material', () => {