feat(material/schematics): implement basic ts import migrations (#24797)

* feat(material/schematics): implement basic ts import migrations

* move runtime migration files into new ts-migration folder
* move button runtime test to the ts-migration folder
* define basic replacements in import-replacements.ts
* use basic replacements to generically implement RuntimeMigrator for all components

Author: wagnermaciel

src/material/schematics/ng-generate/mdc-migration/index.ts

@@ -10,7 +10,7 @@ import {ComponentMigrator, MIGRATORS} from './rules';
 import {DevkitFileSystem, UpdateProject, findStylesheetFiles} from '@angular/cdk/schematics';
 import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 
-import {RuntimeCodeMigration} from './rules/runtime-migration';
+import {RuntimeCodeMigration} from './rules/ts-migration/runtime-migration';
 import {Schema} from './schema';
 import {TemplateMigration} from './rules/template-migration';
 import {ThemingStylesMigration} from './rules/theming-styles';

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

@@ -10,7 +10,6 @@ import {StyleMigrator} from './style-migrator';
 import {TemplateMigrator} from './template-migrator';
 
 import {AutocompleteStylesMigrator} from './components/autocomplete/autocomplete-styles';
-import {ButtonRuntimeMigrator} from './components/button/button-runtime';
 import {ButtonStylesMigrator} from './components/button/button-styles';
 import {CardStylesMigrator} from './components/card/card-styles';
 import {CardTemplateMigrator} from './components/card/card-template';
@@ -26,7 +25,7 @@ import {PaginatorStylesMigrator} from './components/paginator/paginator-styles';
 import {ProgressBarStylesMigrator} from './components/progress-bar/progress-bar-styles';
 import {ProgressSpinnerStylesMigrator} from './components/progress-spinner/progress-spinner-styles';
 import {RadioStylesMigrator} from './components/radio/radio-styles';
-import {RuntimeMigrator} from './runtime-migrator';
+import {RuntimeMigrator} from './ts-migration/runtime-migrator';
 import {SelectStylesMigrator} from './components/select/select-styles';
 import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles';
 import {SliderStylesMigrator} from './components/slider/slider-styles';
@@ -46,84 +45,103 @@ export const MIGRATORS: ComponentMigrator[] = [
   {
     component: 'autocomplete',
     styles: new AutocompleteStylesMigrator(),
+    runtime: new RuntimeMigrator('autocomplete'),
   },
   {
     component: 'button',
     styles: new ButtonStylesMigrator(),
-    runtime: new ButtonRuntimeMigrator(),
+    runtime: new RuntimeMigrator('button'),
   },
   {
     component: 'card',
     styles: new CardStylesMigrator(),
+    runtime: new RuntimeMigrator('card'),
     template: new CardTemplateMigrator(),
   },
   {
     component: 'checkbox',
     styles: new CheckboxStylesMigrator(),
+    runtime: new RuntimeMigrator('checkbox'),
   },
   {
     component: 'chips',
     styles: new ChipsStylesMigrator(),
+    runtime: new RuntimeMigrator('chips'),
     template: new ChipsTemplateMigrator(),
   },
   {
     component: 'dialog',
     styles: new DialogStylesMigrator(),
+    runtime: new RuntimeMigrator('dialog'),
   },
   {
     component: 'form-field',
     styles: new FormFieldStylesMigrator(),
+    runtime: new RuntimeMigrator('form-field'),
   },
   {
     component: 'input',
     styles: new InputStylesMigrator(),
+    runtime: new RuntimeMigrator('input'),
   },
   {
     component: 'list',
     styles: new ListStylesMigrator(),
+    runtime: new RuntimeMigrator('list'),
   },
   {
     component: 'menu',
     styles: new MenuStylesMigrator(),
+    runtime: new RuntimeMigrator('menu'),
   },
   {
     component: 'paginator',
     styles: new PaginatorStylesMigrator(),
+    runtime: new RuntimeMigrator('paginator'),
   },
   {
     component: 'progress-bar',
     styles: new ProgressBarStylesMigrator(),
+    runtime: new RuntimeMigrator('progress-bar'),
   },
   {
     component: 'progress-spinner',
     styles: new ProgressSpinnerStylesMigrator(),
+    runtime: new RuntimeMigrator('progress-spinner'),
   },
   {
     component: 'radio',
     styles: new RadioStylesMigrator(),
+    runtime: new RuntimeMigrator('radio'),
   },
   {
     component: 'select',
     styles: new SelectStylesMigrator(),
+    runtime: new RuntimeMigrator('select'),
   },
   {
     component: 'slide-toggle',
     styles: new SlideToggleStylesMigrator(),
+    runtime: new RuntimeMigrator('slide-toggle'),
   },
   {
     component: 'slider',
     styles: new SliderStylesMigrator(),
+    runtime: new RuntimeMigrator('slider'),
   },
   {
     component: 'table',
     styles: new TableStylesMigrator(),
+    runtime: new RuntimeMigrator('table'),
   },
   {
     component: 'tabs',
     styles: new TabsStylesMigrator(),
+    runtime: new RuntimeMigrator('tabs'),
   },
   {
     component: 'tooltip',
     styles: new TooltipStylesMigrator(),
+    runtime: new RuntimeMigrator('tooltip'),
   },
 ];

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

@@ -0,0 +1,102 @@
+/**
+ * @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
+ */
+
+export const IMPORT_REPLACEMENTS: {[component: string]: {old: string; new: string}} = {
+  'button': {
+    old: '@angular/material/button',
+    new: '@angular/material-experimental/mdc-button',
+  },
+  'card': {
+    old: '@angular/material/card',
+    new: '@angular/material-experimental/mdc-card',
+  },
+  'checkbox': {
+    old: '@angular/material/checkbox',
+    new: '@angular/material-experimental/mdc-checkbox',
+  },
+  'chips': {
+    old: '@angular/material/chips',
+    new: '@angular/material-experimental/mdc-chips',
+  },
+  'dialog': {
+    old: '@angular/material/dialog',
+    new: '@angular/material-experimental/mdc-dialog',
+  },
+  'autocomplete': {
+    old: '@angular/material/autocomplete',
+    new: '@angular/material-experimental/mdc-autocomplete',
+  },
+  'form-field': {
+    old: '@angular/material/form-field',
+    new: '@angular/material-experimental/mdc-form-field',
+  },
+  'input': {
+    old: '@angular/material/input',
+    new: '@angular/material-experimental/mdc-input',
+  },
+  'select': {
+    old: '@angular/material/select',
+    new: '@angular/material-experimental/mdc-select',
+  },
+  'core': {
+    old: '@angular/material/core',
+    new: '@angular/material-experimental/mdc-core',
+  },
+  'list': {
+    old: '@angular/material/list',
+    new: '@angular/material-experimental/mdc-list',
+  },
+  'menu': {
+    old: '@angular/material/menu',
+    new: '@angular/material-experimental/mdc-menu',
+  },
+  'progress-bar': {
+    old: '@angular/material/progress-bar',
+    new: '@angular/material-experimental/mdc-progress-bar',
+  },
+  'progress-spinner': {
+    old: '@angular/material/progress-spinner',
+    new: '@angular/material-experimental/mdc-progress-spinner',
+  },
+  'radio': {
+    old: '@angular/material/radio',
+    new: '@angular/material-experimental/mdc-radio',
+  },
+  'sidenav': {
+    old: '@angular/material/sidenav',
+    new: '@angular/material-experimental/mdc-sidenav',
+  },
+  'slide-toggle': {
+    old: '@angular/material/slide-toggle',
+    new: '@angular/material-experimental/mdc-slide-toggle',
+  },
+  'slider': {
+    old: '@angular/material/slider',
+    new: '@angular/material-experimental/mdc-slider',
+  },
+  'snack-bar': {
+    old: '@angular/material/snack-bar',
+    new: '@angular/material-experimental/mdc-snack-bar',
+  },
+  'table': {
+    old: '@angular/material/table',
+    new: '@angular/material-experimental/mdc-table',
+  },
+  'tabs': {
+    old: '@angular/material/tabs',
+    new: '@angular/material-experimental/mdc-tabs',
+  },
+  'paginator': {
+    old: '@angular/material/paginator',
+    new: '@angular/material-experimental/mdc-paginator',
+  },
+  'tooltip': {
+    old: '@angular/material/tooltip',
+    new: '@angular/material-experimental/mdc-tooltip',
+  },
+};

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

@@ -8,7 +8,7 @@
 
 import {Migration} from '@angular/cdk/schematics';
 import {SchematicContext} from '@angular-devkit/schematics';
-import {ComponentMigrator} from './index';
+import {ComponentMigrator} from '../index';
 import * as ts from 'typescript';
 
 export class RuntimeCodeMigration extends Migration<ComponentMigrator[], SchematicContext> {

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

@@ -1,4 +1,8 @@
-import {APP_MODULE_FILE, createNewTestRunner, migrateComponents} from '../test-setup-helper';
+import {
+  APP_MODULE_FILE,
+  createNewTestRunner,
+  migrateComponents,
+} from '../components/test-setup-helper';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
 import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
 

src/material/schematics/ng-generate/mdc-migration/rules/components/button/button-runtime.spec.ts renamed to src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.spec.ts

@@ -7,10 +7,17 @@
  */
 
 import * as ts from 'typescript';
+import {IMPORT_REPLACEMENTS} from './import-replacements';
 
-export abstract class RuntimeMigrator {
-  abstract oldImportModule: string;
-  abstract newImportModule: string;
+export class RuntimeMigrator {
+  oldImportModule: string;
+  newImportModule: string;
+
+  constructor(component: string) {
+    const replacements = IMPORT_REPLACEMENTS[component];
+    this.oldImportModule = replacements.old;
+    this.newImportModule = replacements.new;
+  }
 
   updateModuleSpecifier(specifier: ts.StringLiteralLike): ts.StringLiteral | null {
     if (specifier.text !== this.oldImportModule) {