feat(core): Add schematic to migrate control flow syntax (#52035)

This adds the migration to run to migrate to the block control flow syntax. It includes ngIf, ngFor, and ngSwitch.

PR Close #52035

packages/core/schematics/BUILD.bazel

@@ -12,13 +12,15 @@ pkg_npm(
         "collection.json",
         "migrations.json",
         "package.json",
+        "//packages/core/schematics/ng-generate/control-flow-migration:static_files",
         "//packages/core/schematics/ng-generate/standalone-migration:static_files",
     ],
     validate = False,
     visibility = ["//packages/core:__pkg__"],
     deps = [
         "//packages/core/schematics/migrations/block-template-entities:bundle",
         "//packages/core/schematics/migrations/compiler-options:bundle",
+        "//packages/core/schematics/ng-generate/control-flow-migration:bundle",
         "//packages/core/schematics/ng-generate/standalone-migration:bundle",
     ],
 )

packages/core/schematics/collection.json

@@ -4,7 +4,17 @@
       "description": "Converts the entire application or a part of it to standalone",
       "factory": "./ng-generate/standalone-migration/bundle",
       "schema": "./ng-generate/standalone-migration/schema.json",
-      "aliases": ["standalone"]
+      "aliases": [
+        "standalone"
+      ]
+    },
+    "control-flow-migration": {
+      "description": "Converts the entire application to block control flow syntax",
+      "factory": "./ng-generate/control-flow-migration/bundle",
+      "schema": "./ng-generate/control-flow-migration/schema.json",
+      "aliases": [
+        "control-flow"
+      ]
     }
   }
-}
+}

packages/core/schematics/ng-generate/control-flow-migration/BUILD.bazel

@@ -0,0 +1,39 @@
+load("//tools:defaults.bzl", "esbuild", "ts_library")
+
+package(
+    default_visibility = [
+        "//packages/core/schematics:__pkg__",
+        "//packages/core/schematics/migrations/google3:__pkg__",
+        "//packages/core/schematics/test:__pkg__",
+    ],
+)
+
+filegroup(
+    name = "static_files",
+    srcs = ["schema.json"],
+)
+
+ts_library(
+    name = "control-flow-migration",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//packages/core/schematics:tsconfig.json",
+    deps = [
+        "//packages/compiler",
+        "//packages/core/schematics/utils",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@types/node",
+        "@npm//typescript",
+    ],
+)
+
+esbuild(
+    name = "bundle",
+    entry_point = ":index.ts",
+    external = [
+        "@angular-devkit/*",
+        "typescript",
+    ],
+    format = "cjs",
+    platform = "node",
+    deps = [":control-flow-migration"],
+)

packages/core/schematics/ng-generate/control-flow-migration/README.md

@@ -0,0 +1,33 @@
+## Control Flow Syntax migration
+
+Angular v17 introduces a new control flow syntax. This migration replaces the
+existing usages of `*ngIf`, `*ngFor`, and `*ngSwitch` to their equivalent block
+syntax. Existing ng-templates are preserved in case they are used elsewhere in
+the template.
+
+NOTE: This is a developer preview migration
+
+#### Before
+```ts
+import {Component} from '@angular/core';
+
+@Component({
+  template: `<div><span *ngIf="show">Content here</span></div>`
+})
+export class MyComp {
+  show = false;
+}
+```
+
+
+#### After
+```ts
+import {Component} from '@angular/core';
+
+@Component({
+  template: `<div>@if (show) {<span>Content here</span>}</div>`
+})
+export class MyComp {
+  show = false
+}
+```

packages/core/schematics/ng-generate/control-flow-migration/index.ts

@@ -0,0 +1,63 @@
+/**
+ * @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
+ */
+
+import {Rule, SchematicsException, Tree} from '@angular-devkit/schematics';
+import {relative} from 'path';
+
+import {getProjectTsConfigPaths} from '../../utils/project_tsconfig_paths';
+import {canMigrateFile, createMigrationProgram} from '../../utils/typescript/compiler_host';
+
+import {analyze, AnalyzedFile, migrateTemplate} from './util';
+
+export default function(): Rule {
+  return async (tree: Tree) => {
+    const {buildPaths, testPaths} = await getProjectTsConfigPaths(tree);
+    const basePath = process.cwd();
+    const allPaths = [...buildPaths, ...testPaths];
+
+    if (!allPaths.length) {
+      throw new SchematicsException(
+          'Could not find any tsconfig file. Cannot run the control flow migration.');
+    }
+
+    for (const tsconfigPath of allPaths) {
+      runControlFlowMigration(tree, tsconfigPath, basePath);
+    }
+  };
+}
+
+function runControlFlowMigration(tree: Tree, tsconfigPath: string, basePath: string) {
+  const program = createMigrationProgram(tree, tsconfigPath, basePath);
+  const sourceFiles =
+      program.getSourceFiles().filter(sourceFile => canMigrateFile(basePath, sourceFile, program));
+  const analysis = new Map<string, AnalyzedFile>();
+
+  for (const sourceFile of sourceFiles) {
+    analyze(sourceFile, analysis);
+  }
+
+  for (const [path, file] of analysis) {
+    const ranges = file.getSortedRanges();
+    const relativePath = relative(basePath, path);
+    const content = tree.readText(relativePath);
+    const update = tree.beginUpdate(relativePath);
+
+    for (const [start, end] of ranges) {
+      const template = content.slice(start, end);
+      const length = (end ?? content.length) - start;
+      const migrated = migrateTemplate(template);
+
+      if (migrated !== null) {
+        update.remove(start, length);
+        update.insertLeft(start, migrated);
+      }
+    }
+
+    tree.commitUpdate(update);
+  }
+}

packages/core/schematics/ng-generate/control-flow-migration/schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "AngularControlFlowMigration",
+  "title": "Angular Control Flow Migration Schema",
+  "type": "object",
+  "properties": {}
+}