feat(migrations): add migration to convert ngClass to use class

feat angular#61661 - add migration to convert ngClass to use class

Author: aparzi

adev/src/app/sub-navigation-data.ts

@@ -1371,6 +1371,12 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'reference/migrations/self-closing-tags',
         contentPath: 'reference/migrations/self-closing-tags',
       },
+      {
+        label: 'NgClass to Class',
+        path: 'reference/migrations/ngclass-to-class',
+        contentPath: 'reference/migrations/ngclass-to-class',
+        status: 'new',
+      },
     ],
   },
 ];

adev/src/content/reference/migrations/ngclass-to-class.md

@@ -0,0 +1,43 @@
+# Migration from NgClass to class bindings
+
+This schematic migrates NgClass directive usages to class bindings in your application.
+It will only migrate usages that are considered safe to migrate.
+
+Run the schematic using the following command:
+
+```bash
+ng generate @angular/core:ngclass-to-class
+```
+
+
+#### Before
+
+```html
+<div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
+```
+
+
+#### After
+
+```html
+<div [class]="{admin: isAdmin, dense: density === 'high'}">
+```
+
+## Configuration options
+
+The migration supports a few options for fine tuning the migration to your specific needs.
+
+### `--migrate-space-separated-key`
+
+By default, migration avoids migrating keys separated by spaces.
+To migrate these keys as well, enable the `--migrate-space-separated-key` flag.
+
+```html
+<div [ngClass]="{'class1 class2': condition}"></div>
+```
+
+to
+
+```html
+<div [class.class1]="condition" [class.class2]="condition"></div>
+```

adev/src/content/reference/migrations/overview.md

@@ -30,4 +30,7 @@ Learn about how you can migrate your existing angular project to the latest feat
   <docs-card title="Self-closing tags" link="Migrate now" href="reference/migrations/self-closing-tags">
     Convert component templates to use self-closing tags where possible.
   </docs-card>
+  <docs-card title="NgClass to Class Bindings" link="Migrate now" href="reference/migrations/ngclass-to-class">
+      Convert component templates to prefer class bindings over the `NgClass`directives when possible.
+  </docs-card>
 </docs-card-container>

packages/core/schematics/BUILD.bazel

@@ -43,6 +43,7 @@ npm_package(
         "migrations.json",
         ":bundles",
         "//packages/core/schematics/migrations/control-flow-migration:static_files",
+        "//packages/core/schematics/migrations/ngclass-to-class-migration:static_files",
         "//packages/core/schematics/ng-generate/cleanup-unused-imports:static_files",
         "//packages/core/schematics/ng-generate/inject-migration:static_files",
         "//packages/core/schematics/ng-generate/output-migration:static_files",
@@ -109,6 +110,10 @@ bundle_entrypoints = [
         "control-flow-migration",
         "packages/core/schematics/migrations/control-flow-migration/index.js",
     ],
+    [
+        "ngclass-to-class-migration",
+        "packages/core/schematics/migrations/ngclass-to-class-migration/index.js",
+    ],
     [
         "router-current-navigation",
         "packages/core/schematics/migrations/router-current-navigation/index.js",
@@ -127,6 +132,7 @@ rollup.rollup(
         "//packages/core/schematics/migrations/control-flow-migration",
         "//packages/core/schematics/migrations/document-core",
         "//packages/core/schematics/migrations/inject-flags",
+        "//packages/core/schematics/migrations/ngclass-to-class-migration",
         "//packages/core/schematics/migrations/router-current-navigation",
         "//packages/core/schematics/migrations/test-bed-get",
         "//packages/core/schematics/ng-generate/cleanup-unused-imports",

packages/core/schematics/collection.json

@@ -57,6 +57,12 @@
       "factory": "./bundles/control-flow-migration.cjs#migrate",
       "schema": "./migrations/control-flow-migration/schema.json",
       "aliases": ["control-flow"]
+    },
+    "ngclass-to-class-migration": {
+      "description": "Updates usages of `ngClass` directives to the `class` bindings where possible",
+      "factory": "./bundles/ngclass-to-class-migration.cjs#migrate",
+      "schema": "./migrations/ngclass-to-class-migration/schema.json",
+      "aliases": ["ngclass-to-class"]
     }
   }
 }

packages/core/schematics/migrations/control-flow-migration/cases.ts

@@ -8,22 +8,15 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   hasLineBreaks,
-  parseTemplate,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const boundcase = '[ngSwitchCase]';
 export const switchcase = '*ngSwitchCase';

packages/core/schematics/migrations/control-flow-migration/fors.ts

@@ -8,24 +8,17 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   getPlaceholder,
   hasLineBreaks,
-  parseTemplate,
   PlaceholderKind,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const ngfor = '*ngFor';
 export const nakedngfor = 'ngFor';

packages/core/schematics/migrations/control-flow-migration/ifs.ts

@@ -8,23 +8,16 @@
 
 import {visitAll} from '@angular/compiler';
 
-import {
-  ElementCollector,
-  ElementToMigrate,
-  endMarker,
-  MigrateError,
-  Result,
-  startMarker,
-} from './types';
+import {ElementCollector, ElementToMigrate, endMarker, Result, startMarker} from './types';
 import {
   calculateNesting,
   getMainBlock,
   getOriginals,
   getPlaceholder,
   hasLineBreaks,
-  parseTemplate,
   reduceNestingOffset,
 } from './util';
+import {MigrateError, parseTemplate} from '../../utils/parse_html';
 
 export const ngif = '*ngIf';
 export const boundngif = '[ngIf]';

packages/core/schematics/migrations/control-flow-migration/index.ts

@@ -12,10 +12,11 @@ import {join, relative} from 'path';
 import {canMigrateFile, createMigrationProgram} from '../../utils/typescript/compiler_host';
 
 import {migrateTemplate} from './migration';
-import {AnalyzedFile, MigrateError} from './types';
+import {AnalyzedFile} from './types';
 import {analyze} from './util';
 import {getProjectTsConfigPaths} from '../../utils/project_tsconfig_paths';
 import {normalizePath} from '../../utils/change_tracker';
+import {MigrateError} from '../../utils/parse_html';
 
 interface Options {
   path?: string;

packages/core/schematics/migrations/control-flow-migration/migration.ts

@@ -12,21 +12,15 @@ import {migrateCase} from './cases';
 import {migrateFor} from './fors';
 import {migrateIf} from './ifs';
 import {migrateSwitch} from './switches';
-import {
-  AnalyzedFile,
-  endI18nMarker,
-  endMarker,
-  MigrateError,
-  startI18nMarker,
-  startMarker,
-} from './types';
+import {AnalyzedFile, endI18nMarker, endMarker, startI18nMarker, startMarker} from './types';
 import {
   canRemoveCommonModule,
   formatTemplate,
   processNgTemplates,
   removeImports,
   validateMigratedTemplate,
 } from './util';
+import {MigrateError} from '../../utils/parse_html';
 
 /**
  * Actually migrates a given template to the new syntax