refactor(material/schematics): change strategy for applying updates (#24588)

* simplify TemplateMigrator logic
* update CardTemplateMigrator impl
* changed from using a two-pass strategy for gathering context
  then applying updates to using a one-pass approach which
  stores updates, sorts them in reverse order, then applies
  updates in one go
* all existing unit tests pass

Author: wagnermaciel

src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts

@@ -7,17 +7,23 @@
  */
 
 import {TmplAstElement} from '@angular/compiler';
-import {TemplateMigrator} from '../../template-migrator';
+import {TemplateMigrator, Update} from '../../template-migrator';
 import {addAttribute} from '../../tree-traversal';
 
 export class CardTemplateMigrator extends TemplateMigrator {
   component = 'card';
   tagName = 'mat-card';
 
-  override updateStartTag(template: string, node: TmplAstElement): string {
+  getUpdates(node: TmplAstElement): Update[] {
     if (node.name !== this.tagName) {
-      return template;
+      return [];
     }
-    return addAttribute(template, node, 'appearance', 'outlined');
+
+    return [
+      {
+        location: node.startSourceSpan.end,
+        updateFn: html => addAttribute(html, node, 'appearance', 'outlined'),
+      },
+    ];
   }
 }

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

@@ -10,27 +10,27 @@ import {Migration, ResolvedResource} from '@angular/cdk/schematics';
 import {SchematicContext} from '@angular-devkit/schematics';
 import {visitElements, parseTemplate} from './tree-traversal';
 import {ComponentMigrator} from '.';
+import {Update} from './template-migrator';
 
 export class TemplateMigration extends Migration<ComponentMigrator[], SchematicContext> {
   enabled = true;
 
   override visitTemplate(template: ResolvedResource) {
     const ast = parseTemplate(template.content, template.filePath);
     const migrators = this.upgradeData.filter(m => m.template).map(m => m.template!);
+    const updates: Update[] = [];
 
-    visitElements(
-      ast.nodes,
-      node => {
-        migrators.forEach(m => {
-          template.content = m.updateEndTag(template.content, node);
-        });
-      },
-      node => {
-        migrators.forEach(m => {
-          template.content = m.updateStartTag(template.content, node);
-        });
-      },
-    );
+    visitElements(ast.nodes, node => {
+      for (let i = 0; i < migrators.length; i++) {
+        updates.push(...migrators[i].getUpdates(node));
+      }
+    });
+
+    updates.sort((a, b) => b.location.offset - a.location.offset);
+
+    updates.forEach(update => {
+      template.content = update.updateFn(template.content);
+    });
 
     this.fileSystem.overwrite(template.filePath, template.content);
   }

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

@@ -8,6 +8,15 @@
 
 import * as compiler from '@angular/compiler';
 
+/** Stores the data needed to make a template update. */
+export interface Update {
+  /** The location of the update. */
+  location: compiler.ParseLocation;
+
+  /** A function to be used to update the template. */
+  updateFn: (html: string) => string;
+}
+
 export abstract class TemplateMigrator {
   /** The name of the component that this migration handles. */
   abstract component: string;
@@ -16,24 +25,10 @@ export abstract class TemplateMigrator {
   abstract tagName: string;
 
   /**
-   * Updates the start tag of the given node in the html template.
-   *
-   * @param template The html content to be updated.
-   * @param node The Element node to be updated.
-   * @returns The updated template.
-   */
-  updateEndTag(template: string, node: compiler.TmplAstElement): string {
-    return template;
-  }
-
-  /**
-   * Updates the end tag of the given node in the html template.
+   * Returns the data needed to update the given node.
    *
-   * @param template The html content to be updated.
-   * @param node The Element node to be updated.
-   * @returns The updated template.
+   * @param node A template ast element.
+   * @returns The data needed to update this node.
    */
-  updateStartTag(template: string, node: compiler.TmplAstElement): string {
-    return template;
-  }
+  abstract getUpdates(node: compiler.TmplAstElement): Update[];
 }