refactor: setup esbuild and update-tool in mdc-migration schematic

Sets up ESBuild and the update-tool in the MDC migration schematic. This
allows us to have a clear separation of some parts of the migration /
rely on the TypeScript AST etc.

We use ESBuild so that we can bring in e.g. Sass AST without requiring
a dependency on the Material NPM package.

Author: devversion

integration/mdc-migration/BUILD.bazel

@@ -20,7 +20,7 @@ node_integration_test(
         # See: https://github.com/yarnpkg/yarn/issues/2165.
         # TODO(devversion): determine if a solution/workaround could live in the test runner.
         "yarn install --cache-folder .yarn_cache_folder/",
-        "yarn ng generate @angular/material:mdc-migration -c all",
+        "yarn ng generate @angular/material:mdc-migration -c all --tsconfig tsconfig.app.json",
         "yarn test",
     ],
     npm_packages = npmPackageMappings,

src/cdk/schematics/ng-update/public-api.ts

@@ -16,4 +16,5 @@ export * from './typescript/base-types';
 export * from './typescript/imports';
 export * from './typescript/literal';
 export * from './typescript/module-specifiers';
+export * from './find-stylesheets';
 export * from './upgrade-data';

src/material/schematics/BUILD.bazel

@@ -47,6 +47,9 @@ ts_library(
 pkg_npm(
     name = "npm_package",
     srcs = ["package.json"],
+    nested_packages = [
+        "//src/material/schematics/ng-generate/mdc-migration:npm_package",
+    ],
     deps = [
         ":schematics",
         ":schematics_assets",

src/material/schematics/collection.json

@@ -45,7 +45,7 @@
     },
     "mdcMigration": {
       "description": "Migrate to MDC-based Angular Material components",
-      "factory": "./ng-generate/mdc-migration/index",
+      "factory": "./ng-generate/mdc-migration/index_bundled",
       "schema": "./ng-generate/mdc-migration/schema.json",
       "aliases": ["mdc-migration"]
     }

src/material/schematics/ng-generate/mdc-migration/BUILD.bazel

@@ -0,0 +1,89 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
+load("//tools:defaults.bzl", "esbuild", "jasmine_node_test", "pkg_npm", "spec_bundle", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+STATIC_ASSETS = [
+    "schema.json",
+]
+
+ts_library(
+    name = "mdc_migration_lib",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk/schematics",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@types/node",
+    ],
+)
+
+esbuild(
+    name = "mdc_migration_bundle",
+    entry_point = ":index.ts",
+    external = [
+        "@angular/cdk/schematics",
+        "@angular-devkit/schematics",
+        "@angular-devkit/core",
+    ],
+    format = "cjs",
+    output = "index_bundled.js",
+    platform = "node",
+    target = "es2015",
+    deps = [":mdc_migration_lib"],
+)
+
+pkg_npm(
+    name = "npm_package",
+    srcs = STATIC_ASSETS,
+    deps = [":mdc_migration_bundle"],
+)
+
+########################################
+#   Testing configuration              #
+########################################
+
+ts_library(
+    name = "unit_tests_lib",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":mdc_migration_lib",
+        "//src/cdk/schematics/testing",
+        "@npm//@angular-devkit/core",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@bazel/runfiles",
+        "@npm//@types/jasmine",
+        "@npm//@types/node",
+    ],
+)
+
+spec_bundle(
+    name = "unit_tests_bundle",
+    platform = "node",
+    deps = [":unit_tests_lib"],
+)
+
+copy_to_bin(
+    name = "unit_tests_assets",
+    testonly = True,
+    srcs = STATIC_ASSETS,
+)
+
+jasmine_node_test(
+    name = "unit_tests",
+    data = [
+        ":mdc_migration_bundle",
+        ":unit_tests_assets",
+        "//src/material/schematics:schematics_assets",
+    ],
+    deps = [
+        ":unit_tests_bundle",
+        # Runtime dependencies needed by the test and actual migration sources. These need
+        # to be specified explicitly here because they are not captured by the bundling.
+        "//src/cdk/schematics",
+        "@npm//@schematics/angular",
+    ],
+)

src/material/schematics/ng-generate/mdc-migration/index.ts

@@ -7,8 +7,10 @@
  */
 
 import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
-import * as path from 'path';
 import {Schema} from './schema';
+import {DevkitFileSystem, UpdateProject, findStylesheetFiles} from '@angular/cdk/schematics';
+import {ThemingStylesMigration} from './rules/theming-styles';
+import {dirname} from 'path';
 
 /** Groups of components that must be migrated together. */
 const migrationGroups = [
@@ -51,10 +53,39 @@ function getComponentsToMigrate(requested: string[]): Set<string> {
 
 export default function (options: Schema): Rule {
   const componentsToMigrate = getComponentsToMigrate(options.components);
-  // TOOD(mmalerba): Use a workspace-releative rather than absolute path.
-  const pathToMigrate = path.resolve(options.path ?? process.cwd());
+  const tsconfigPath = options.tsconfig;
+  const migrationDir = options.directory ?? dirname(tsconfigPath);
 
-  console.log('Will migrate', [...componentsToMigrate], 'for', pathToMigrate);
+  console.log('Migrating:', [...componentsToMigrate]);
+  console.log('Directory:', migrationDir);
 
-  return (tree: Tree, context: SchematicContext) => tree;
+  return (tree: Tree, context: SchematicContext) => {
+    const fileSystem = new DevkitFileSystem(tree);
+    const program = UpdateProject.createProgramFromTsconfig(
+      fileSystem.resolve(tsconfigPath),
+      fileSystem,
+    );
+
+    const additionalStylesheetPaths = findStylesheetFiles(tree, migrationDir);
+    const project = new UpdateProject(context, program, fileSystem, new Set(), context.logger);
+    const {hasFailures} = project.migrate(
+      [ThemingStylesMigration],
+      null,
+      null,
+      additionalStylesheetPaths,
+    );
+
+    // Commit all recorded edits in the update recorder. We apply the edits after all
+    // migrations ran because otherwise offsets in the TypeScript program would be
+    // shifted and individual migrations could no longer update the same source file.
+    fileSystem.commitEdits();
+
+    if (hasFailures) {
+      context.logger.error('Unable to migrate project. See errors above.');
+    } else {
+      context.logger.info('Successfully migrated the project.');
+    }
+
+    return tree;
+  };
 }

src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.spec.ts

@@ -0,0 +1,40 @@
+import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+import {Schema} from '../schema';
+import {runfiles} from '@bazel/runfiles';
+
+describe('theming styles', () => {
+  let runner: SchematicTestRunner;
+  let cliAppTree: UnitTestTree;
+
+  beforeEach(async () => {
+    runner = new SchematicTestRunner(
+      '@angular/material',
+      runfiles.resolveWorkspaceRelative('src/material/schematics/collection.json'),
+    );
+    cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner));
+  });
+
+  async function migrate(options: Schema): Promise<UnitTestTree> {
+    return await runner.runSchematicAsync('mdcMigration', options, cliAppTree).toPromise();
+  }
+
+  it('should work', async () => {
+    cliAppTree.create(
+      '/projects/material/src/theme.scss',
+      `
+        @use '@angular/material' as mat;
+
+        $my-theme: ();
+        @include mat.all-component-themes($my-theme);
+    `,
+    );
+
+    const result = await migrate({
+      tsconfig: '/projects/material/tsconfig.app.json',
+      components: ['all'],
+    });
+
+    expect(result.readContent('/projects/material/src/theme.scss')).toContain('$some-var:');
+  });
+});

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

@@ -0,0 +1,19 @@
+/**
+ * @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 {Migration, ResolvedResource} from '@angular/cdk/schematics';
+import {SchematicContext} from '@angular-devkit/schematics';
+
+export class ThemingStylesMigration extends Migration<null, SchematicContext> {
+  enabled = true;
+
+  override visitStylesheet(stylesheet: ResolvedResource) {
+    // TODO: Implement this migration. This is just a placeholder currently.
+    this.fileSystem.edit(stylesheet.filePath).insertRight(0, '$some-var: #fff;');
+  }
+}

src/material/schematics/ng-generate/mdc-migration/schema.d.ts

@@ -8,9 +8,18 @@
 
 export interface Schema {
   /**
-   * The path to migrate.
+   * Workspace-relative path to the TypeScript project that should be migrated.
    */
-  path?: string;
+  tsconfig: string;
+  /**
+   * Workspace-relative path to a directory which will be migrated.
+   *
+   * Source files determined outside of this directory will be ignored,
+   * allowing for an incremental migration.
+   *
+   * If not set, the directory is determined based on the specified tsconfig.
+   */
+  directory?: string;
 
   /**
    * The components to migrate.

src/material/schematics/ng-generate/mdc-migration/schema.json

@@ -4,11 +4,16 @@
   "title": "Material MDC Migration Schema",
   "type": "object",
   "properties": {
-    "path": {
+    "tsconfig": {
       "type": "string",
       "format": "path",
-      "description": "The path to migrate. (Defaults to the current working directory)",
-      "alias": "p",
+      "description": "Workspace-relative path to the TypeScript project that should be migrated."
+    },
+    "directory": {
+      "type": "string",
+      "format": "path",
+      "description": "Workspace-relative path to a directory which will be migrated.",
+      "alias": "d",
       "default": ""
     },
     "components": {