fix(material/schematics): add custom replacements for imports

Author: amysorto

src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts

@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export const IMPORT_REPLACEMENTS: {[component: string]: {old: string; new: string}} = {
+export interface ImportReplacement {
+  old: string;
+  new: string;
+  additionalMatModuleNamePrefixes?: string[];
+  customReplacements?: {old: string; new: string}[];
+}
+
+// TODO: Add rest of custom replacements for components here
+export const REPLACEMENTS: {[component: string]: ImportReplacement} = {
   'button': {
     old: '@angular/material/legacy-button',
     new: '@angular/material/button',
@@ -22,10 +30,12 @@ export const IMPORT_REPLACEMENTS: {[component: string]: {old: string; new: strin
   'chips': {
     old: '@angular/material/legacy-chips',
     new: '@angular/material/chips',
+    additionalMatModuleNamePrefixes: ['chip'],
   },
   'dialog': {
     old: '@angular/material/legacy-dialog',
     new: '@angular/material/dialog',
+    customReplacements: [{old: 'LegacyDialogRole', new: 'DialogRole'}],
   },
   'autocomplete': {
     old: '@angular/material/legacy-autocomplete',

src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.spec.ts

@@ -17,7 +17,11 @@ describe('button runtime code', () => {
 
   async function runMigrationTest(oldFileContent: string, newFileContent: string) {
     cliAppTree.overwrite(APP_MODULE_FILE, oldFileContent);
-    const tree = await migrateComponents(['button', 'card', 'dialog'], runner, cliAppTree);
+    const tree = await migrateComponents(
+      ['button', 'card', 'chips', 'dialog', 'progress-bar'],
+      runner,
+      cliAppTree,
+    );
     expect(tree.readContent(APP_MODULE_FILE)).toBe(newFileContent);
   }
 
@@ -41,6 +45,25 @@ describe('button runtime code', () => {
       );
     });
 
+    it('should replace the old import with the new one for hyphenated component names', async () => {
+      await runMigrationTest(
+        `
+        import {NgModule} from '@angular/core';
+        import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+
+        @NgModule({imports: [MatLegacyProgressBarModule]})
+        export class AppModule {}
+      `,
+        `
+        import {NgModule} from '@angular/core';
+        import {MatProgressBarModule} from '@angular/material/progress-bar';
+
+        @NgModule({imports: [MatProgressBarModule]})
+        export class AppModule {}
+      `,
+      );
+    });
+
     it('should replace the old imports with the new ones', async () => {
       await runMigrationTest(
         `
@@ -60,6 +83,44 @@ describe('button runtime code', () => {
       );
     });
 
+    it('should replace the old imports with the new ones including different specified module name prefixes', async () => {
+      await runMigrationTest(
+        `
+        import {NgModule} from '@angular/core';
+        import {MatLegacyChipsModule, MatLegacyChipEvent} from '@angular/material/legacy-chips';
+
+        @NgModule({imports: [MatLegacyChipsModule]})
+        export class AppModule {}
+      `,
+        `
+        import {NgModule} from '@angular/core';
+        import {MatChipsModule, MatChipEvent} from '@angular/material/chips';
+
+        @NgModule({imports: [MatChipsModule]})
+        export class AppModule {}
+      `,
+      );
+    });
+
+    it('should replace the old imports with the new ones including custom replacements', async () => {
+      await runMigrationTest(
+        `
+        import {NgModule} from '@angular/core';
+        import {MatLegacyDialogModule, LegacyDialogRole} from '@angular/material/legacy-dialog';
+
+        @NgModule({imports: [MatLegacyDialogModule]})
+        export class AppModule {}
+      `,
+        `
+        import {NgModule} from '@angular/core';
+        import {MatDialogModule, DialogRole} from '@angular/material/dialog';
+
+        @NgModule({imports: [MatDialogModule]})
+        export class AppModule {}
+      `,
+      );
+    });
+
     it('should migrate multi-line imports', async () => {
       await runMigrationTest(
         `

src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.ts

@@ -7,21 +7,47 @@
  */
 
 import * as ts from 'typescript';
-import {IMPORT_REPLACEMENTS} from './import-replacements';
+import {ImportReplacement, REPLACEMENTS} from './import-replacements';
 
 export class RuntimeMigrator {
   oldImportModule: string;
   newImportModule: string;
   importSpecifierReplacements: {old: string; new: string}[];
 
   constructor(component: string) {
-    const replacements = IMPORT_REPLACEMENTS[component];
+    const replacements = REPLACEMENTS[component];
     this.oldImportModule = replacements.old;
     this.newImportModule = replacements.new;
 
-    const firstLetterCapitalizedComponent = component[0].toUpperCase() + component.slice(1);
-    const capitalizedComponent = component.toUpperCase();
-    this.importSpecifierReplacements = [
+    this.importSpecifierReplacements = this.getReplacementsFromComponentName(component);
+
+    replacements.additionalMatModuleNamePrefixes?.forEach(prefix => {
+      this.importSpecifierReplacements = this.importSpecifierReplacements.concat(
+        this.getReplacementsFromComponentName(prefix),
+      );
+    });
+
+    replacements.customReplacements?.forEach(replacement => {
+      this.importSpecifierReplacements = this.importSpecifierReplacements.concat(replacement);
+    });
+
+    console.log(this.importSpecifierReplacements);
+  }
+
+  getReplacementsFromComponentName(componentName: string): ImportReplacement[] {
+    const words = componentName.split('-');
+
+    let firstLetterCapitalizedComponent = '';
+    let capitalizedComponent = '';
+    words.forEach(word => {
+      firstLetterCapitalizedComponent += word[0].toUpperCase() + word.slice(1);
+      capitalizedComponent += word.toUpperCase() + '_';
+    });
+
+    /// Remove trailing underscore at the end
+    capitalizedComponent = capitalizedComponent.slice(0, -1);
+
+    const specifierReplacements = [
       {
         old: 'MatLegacy' + firstLetterCapitalizedComponent,
         new: 'Mat' + firstLetterCapitalizedComponent,
@@ -31,6 +57,8 @@ export class RuntimeMigrator {
         new: 'MAT_' + capitalizedComponent,
       },
     ];
+
+    return specifierReplacements;
   }
 
   updateImportOrExportSpecifier(specifier: ts.Identifier): ts.Identifier | null {