build: set up schematics for v21 and delete v20 ones (#31710)

Sets up the schematics for the v21 release and deletes the ones from v20 that aren't necessary anymore.

Author: crisbeto

src/cdk/schematics/migration.json

@@ -1,10 +1,10 @@
 {
   "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
-    "migration-v20": {
-      "version": "20.0.0-0",
-      "description": "Updates the Angular CDK to v20",
-      "factory": "./ng-update/index#updateToV20"
+    "migration-v21": {
+      "version": "21.0.0-0",
+      "description": "Updates the Angular CDK to v21",
+      "factory": "./ng-update/index#updateToV21"
     },
     "ng-post-update": {
       "description": "Prints out results after ng-update.",

src/cdk/schematics/ng-update/index.ts

@@ -14,9 +14,9 @@ import {createMigrationSchematicRule, NullableDevkitMigration} from './devkit-mi
 const cdkMigrations: NullableDevkitMigration[] = [];
 
 /** Entry point for the migration schematics with target of Angular CDK 20.0.0 */
-export function updateToV20(): Rule {
+export function updateToV21(): Rule {
   return createMigrationSchematicRule(
-    TargetVersion.V20,
+    TargetVersion.V21,
     cdkMigrations,
     cdkUpgradeData,
     onMigrationComplete,

src/cdk/schematics/update-tool/target-version.ts

@@ -10,7 +10,7 @@
 
 // tslint:disable-next-line:prefer-const-enum
 export enum TargetVersion {
-  V20 = 'version 20',
+  V21 = 'version 21',
 }
 
 /**

src/google-maps/schematics/migration.json

@@ -1,9 +1,9 @@
 {
   "schematics": {
-    "migration-v20": {
-      "version": "20.0.0-0",
-      "description": "Updates the Angular Google Maps package to v20",
-      "factory": "./ng-update/index#updateToV20"
+    "migration-v21": {
+      "version": "21.0.0-0",
+      "description": "Updates the Angular Google Maps package to v21",
+      "factory": "./ng-update/index#updateToV21"
     }
   }
 }

src/google-maps/schematics/ng-update/index.ts

@@ -8,7 +8,7 @@
 
 import {Rule} from '@angular-devkit/schematics';
 
-/** Entry point for the migration schematics with target of Angular Material v20 */
-export function updateToV20(): Rule {
+/** Entry point for the migration schematics with target of Angular Material v21 */
+export function updateToV21(): Rule {
   return () => {};
 }

src/material/schematics/migration.json

@@ -1,10 +1,10 @@
 {
   "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
-    "migration-v20": {
+    "migration-v21": {
       "version": "20.0.0-0",
-      "description": "Updates Angular Material to v20",
-      "factory": "./ng-update/index_bundled#updateToV20"
+      "description": "Updates Angular Material to v21",
+      "factory": "./ng-update/index_bundled#updateToV21"
     }
   }
 }

src/material/schematics/ng-update/index.ts

@@ -6,124 +6,20 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {chain, Rule, SchematicContext} from '@angular-devkit/schematics';
+import {chain, Rule} from '@angular-devkit/schematics';
 import {
   createMigrationSchematicRule,
   NullableDevkitMigration,
   TargetVersion,
 } from '@angular/cdk/schematics';
 
 import {materialUpgradeData} from './upgrade-data';
-import {MatCoreMigration} from './migrations/mat-core-removal';
-import {ExplicitSystemVariablePrefixMigration} from './migrations/explicit-system-variable-prefix';
 
-const materialMigrations: NullableDevkitMigration[] = [
-  MatCoreMigration,
-  ExplicitSystemVariablePrefixMigration,
-];
+const materialMigrations: NullableDevkitMigration[] = [];
 
-/** Entry point for the migration schematics with target of Angular Material v20 */
-export function updateToV20(): Rule {
+/** Entry point for the migration schematics with target of Angular Material v21 */
+export function updateToV21(): Rule {
   return chain([
-    createMigrationSchematicRule(
-      TargetVersion.V20,
-      materialMigrations,
-      materialUpgradeData,
-      onMigrationComplete,
-    ),
-    renameMdcTokens(),
-    renameComponentTokens(),
+    createMigrationSchematicRule(TargetVersion.V21, materialMigrations, materialUpgradeData),
   ]);
 }
-
-// Whether the given path should be included when renaming theme token names.
-function shouldRenameTokens(path: string) {
-  if (path.includes('node_modules') || path.includes('.angular') || path.includes('.git')) {
-    return false;
-  }
-
-  return (
-    path.endsWith('.html') ||
-    path.endsWith('.css') ||
-    path.endsWith('.scss') ||
-    path.endsWith('.ts')
-  );
-}
-
-// Renames any CSS variables beginning with "--mdc-" to be "--mat-". These CSS variables
-// refer to tokens that used to be derived from a mix of MDC and Angular. Now all the tokens
-// are converged on being prefixed "--mat-".
-function renameMdcTokens(): Rule {
-  return tree => {
-    tree.visit(path => {
-      if (shouldRenameTokens(path)) {
-        const content = tree.readText(path);
-        const updatedContent = content.replaceAll('--mdc-', '--mat-');
-        if (content !== updatedContent) {
-          tree.overwrite(path, updatedContent);
-        }
-      }
-    });
-  };
-}
-
-// Renames Angular Material component token CSS variables that were renamed so that the base
-// component's name came first or otherwise renamed to match our terminology instead of MDC's.
-function renameComponentTokens(): Rule {
-  const tokenPrefixes = [
-    {old: '--mat-circular-progress', replacement: '--mat-progress-spinner'},
-    {old: '--mat-elevated-card', replacement: '--mat-card-elevated'},
-    {old: '--mat-extended-fab', replacement: '--mat-fab-extended'},
-    {old: '--mat-filled-button', replacement: '--mat-button-filled'},
-    {old: '--mat-filled-text-field', replacement: '--mat-form-field-filled'},
-    {old: '--mat-full-pseudo-checkbox', replacement: '--mat-pseudo-checkbox-full'},
-    {old: '--mat-legacy-button-toggle', replacement: '--mat-button-toggle-legacy'},
-    {old: '--mat-linear-progress', replacement: '--mat-progress-bar'},
-    {old: '--mat-minimal-pseudo-checkbox', replacement: '--mat-pseudo-checkbox-minimal'},
-    {old: '--mat-outlined-button', replacement: '--mat-button-outlined'},
-    {old: '--mat-outlined-card', replacement: '--mat-card-outlined'},
-    {old: '--mat-outlined-text-field', replacement: '--mat-form-field-outlined'},
-    {old: '--mat-plain-tooltip', replacement: '--mat-tooltip'},
-    {old: '--mat-protected-button', replacement: '--mat-button-protected'},
-    {old: '--mat-secondary-navigation-tab', replacement: '--mat-tab'},
-    {old: '--mat-standard-button-toggle', replacement: '--mat-button-toggle'},
-    {old: '--mat-switch', replacement: '--mat-slide-toggle'},
-    {old: '--mat-tab-header', replacement: '--mat-tab'},
-    {old: '--mat-tab-header-with-background', replacement: '--mat-tab'},
-    {old: '--mat-tab-indicator', replacement: '--mat-tab'},
-    {old: '--mat-text-button', replacement: '--mat-button-text'},
-    {old: '--mat-tonal-button', replacement: '--mat-button-tonal'},
-  ];
-  return tree => {
-    tree.visit(path => {
-      if (shouldRenameTokens(path)) {
-        const content = tree.readText(path);
-        let updatedContent = content;
-        for (const tokenPrefix of tokenPrefixes) {
-          updatedContent = updatedContent.replaceAll(tokenPrefix.old, tokenPrefix.replacement);
-        }
-        if (content !== updatedContent) {
-          tree.overwrite(path, updatedContent);
-        }
-      }
-    });
-  };
-}
-
-/** Function that will be called when the migration completed. */
-function onMigrationComplete(
-  context: SchematicContext,
-  targetVersion: TargetVersion,
-  hasFailures: boolean,
-) {
-  context.logger.info('');
-  context.logger.info(`  ✓  Updated Angular Material to ${targetVersion}`);
-  context.logger.info('');
-
-  if (hasFailures) {
-    context.logger.warn(
-      '  ⚠  Some issues were detected but could not be fixed automatically. Please check the ' +
-        'output above and fix these issues manually.',
-    );
-  }
-}