refactor: update schematics to work with new UpdateBuffer (#26504)

* refactor: update schematics to work with new UpdateBuffer

This change is needed for the upcoming changes in Angular CLI version 16 where the default `UpdateBuffer` is replaced with the `UpdateBuffer2`.

This commits changes how certain updates are applied to avoid overlapping changes which would otherwise result in broken output due to the offset would be out of sync.

* ci: add test step to test schematics with `UpdateBuffer2`

This commit adds a new step in CI to tests schematics using the `UpdateBuffer2` which will be the default and only `UpdateBuffer` in Angular CLI  vertsion 16.

(cherry picked from commit c4414ad)

Author: alan-agius4

.circleci/config.yml

@@ -582,6 +582,9 @@ jobs:
       # Setup the components repository to use the MDC snapshot builds.
       # Run project tests with the MDC canary builds.
       - run: bazel test --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --build_tests_only -- src/...
+      # The below tests should be removed when consuming Angular CLI version 16 which should contain
+      # https://github.com/angular/angular-cli/pull/24211
+      - run: bazel test //src/cdk/schematics/... //src/material/schematics/... --build_tests_only --test_env=NG_UPDATE_BUFFER_V2=1
       - *slack_notify_on_failure
 
 # ----------------------------------------------------------------------------------------

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

@@ -22,6 +22,7 @@ export class RuntimeCodeMigration extends Migration<ComponentMigrator[], Schemat
   private _stylesMigration: ThemingStylesMigration;
   private _templateMigration: TemplateMigration;
   private _hasPossibleTemplateMigrations = true;
+  private _updates: {offset: number; update: () => void}[] | undefined;
 
   override visitNode(node: ts.Node): void {
     try {
@@ -337,7 +338,18 @@ export class RuntimeCodeMigration extends Migration<ComponentMigrator[], Schemat
     const start = oldNode.getStart();
     const width = oldNode.getWidth();
 
-    this.fileSystem.edit(filePath).remove(start, width).insertRight(start, newNodeText);
+    this._updates ??= [];
+    this._updates.push({
+      offset: start,
+      update: () =>
+        this.fileSystem.edit(filePath).remove(start, width).insertRight(start, newNodeText),
+    });
+  }
+
+  override postAnalysis(): void {
+    // Apply the updates in reverse offset order this ensures that there are no
+    // overlapping changes which would caused a change in offsets.
+    this._updates?.sort((a, b) => b.offset - a.offset).forEach(({update}) => update());
   }
 
   /** Checks whether a specifier identifier is referring to an imported symbol. */

src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts

@@ -23,6 +23,7 @@ import {extname} from 'path';
 
 export class LegacyComponentsMigration extends Migration<null> {
   enabled = this.targetVersion === TargetVersion.V15;
+  private _updates: {offset: number; update: () => void}[] | undefined;
 
   override visitStylesheet(stylesheet: ResolvedResource): void {
     const extension = extname(stylesheet.filePath).toLowerCase();
@@ -429,6 +430,17 @@ export class LegacyComponentsMigration extends Migration<null> {
     str: {old: string; new: string},
   ): void {
     const index = this.fileSystem.read(filePath)!.indexOf(str.old, offset);
-    this.fileSystem.edit(filePath).remove(index, str.old.length).insertRight(index, str.new);
+    this._updates ??= [];
+    this._updates.push({
+      offset: index,
+      update: () =>
+        this.fileSystem.edit(filePath).remove(index, str.old.length).insertRight(index, str.new),
+    });
+  }
+
+  override postAnalysis(): void {
+    // Apply the updates in reverse offset order this ensures that there are no
+    // overlapping changes which would caused a change in offsets.
+    this._updates?.sort((a, b) => b.offset - a.offset).forEach(({update}) => update());
   }
 }