build: split material ng-update schematics to a separate bundle (#25379)

* build: split material ng-update schematics to a separate bundle

* split material ng-update schematics to a separate bundle
* delete `resolveBazelPath` and uses of `__dirname` and replace w/ `runfiles.resolve...`
* export gesture config template as a variable instead of having to use fs readFile

* fixup! build: split material ng-update schematics to a separate bundle

Co-authored-by: Paul Gschwendtner <[email protected]>

Author: wagnermaciel

src/cdk/schematics/BUILD.bazel

@@ -85,6 +85,7 @@ ts_library(
         "//src/cdk/schematics/update-tool",
         "//src/cdk/testing/private",
         "@npm//@angular-devkit/schematics",
+        "@npm//@bazel/runfiles",
         "@npm//@schematics/angular",
         "@npm//@types/jasmine",
         "@npm//@types/node",

src/cdk/schematics/ng-update/test-cases/misc/external-resource-resolution.spec.ts

@@ -1,4 +1,4 @@
-import {resolveBazelPath} from '@angular/cdk/schematics/testing';
+import {runfiles} from '@bazel/runfiles';
 import {MIGRATION_PATH} from '../../../paths';
 import {createTestCaseSetup} from '../../../testing';
 
@@ -7,7 +7,11 @@ describe('ng-update external resource resolution', () => {
     const {runFixers, writeFile, appTree} = await createTestCaseSetup(
       'migration-v6',
       MIGRATION_PATH,
-      [resolveBazelPath(__dirname, './external-resource-resolution_input.ts')],
+      [
+        runfiles.resolvePackageRelative(
+          'ng-update/test-cases/misc/external-resource-resolution_input.ts',
+        ),
+      ],
     );
 
     const testContent = `<div cdk-connected-overlay [origin]="test"></div>`;

src/cdk/schematics/ng-update/test-cases/misc/global-stylesheets.spec.ts

@@ -1,4 +1,4 @@
-import {resolveBazelPath} from '@angular/cdk/schematics/testing';
+import {runfiles} from '@bazel/runfiles';
 import {readFileSync} from 'fs';
 import {MIGRATION_PATH} from '../../../paths';
 import {createTestCaseSetup} from '../../../testing';
@@ -8,7 +8,7 @@ describe('global stylesheets migration', () => {
     const {runFixers, writeFile, appTree} = await createTestCaseSetup(
       'migration-v6',
       MIGRATION_PATH,
-      [resolveBazelPath(__dirname, './global-stylesheets_input.ts')],
+      [runfiles.resolvePackageRelative('ng-update/test-cases/misc/global-stylesheets_input.ts')],
     );
 
     const testStylesheetPath = 'projects/cdk-testing/src/test-cases/global-stylesheets-test.scss';
@@ -17,7 +17,10 @@ describe('global stylesheets migration', () => {
     // be picked up by the update-tool.
     writeFile(
       testStylesheetPath,
-      readFileSync(resolveBazelPath(__dirname, './global-stylesheets-test.scss'), 'utf8'),
+      readFileSync(
+        runfiles.resolvePackageRelative('ng-update/test-cases/misc/global-stylesheets-test.scss'),
+        'utf8',
+      ),
     );
     writeFile('/projects/cdk-testing/third_party/materialize.css/bundle.css', '');
 

src/cdk/schematics/ng-update/test-cases/misc/method-call-checks.spec.ts

@@ -1,11 +1,11 @@
-import {resolveBazelPath} from '@angular/cdk/schematics/testing';
+import {runfiles} from '@bazel/runfiles';
 import {MIGRATION_PATH} from '../../../paths';
 import {createTestCaseSetup} from '../../../testing';
 
 describe('v6 method call checks', () => {
   it('should properly report invalid method calls', async () => {
     const {runFixers} = await createTestCaseSetup('migration-v6', MIGRATION_PATH, [
-      resolveBazelPath(__dirname, './method-call-checks_input.ts'),
+      runfiles.resolvePackageRelative('ng-update/test-cases/misc/method-call-checks_input.ts'),
     ]);
 
     const {logOutput} = await runFixers();

src/cdk/schematics/testing/index.ts

@@ -11,4 +11,3 @@ export * from './test-app';
 export * from './test-case-setup';
 export * from './test-library';
 export * from './file-content';
-export * from './resolve-bazel-path';

src/cdk/schematics/testing/resolve-bazel-path.ts

@@ -4,12 +4,24 @@ load("//tools:defaults.bzl", "jasmine_node_test", "pkg_npm", "ts_library")
 package(default_visibility = ["//visibility:public"])
 
 copy_to_bin(
-    name = "schematics_assets",
+    name = "collection_assets",
     srcs = [
-        "ng-update/migrations/hammer-gestures-v9/gesture-config.template",
-    ] + glob([
+        "collection.json",
+        "migration.json",
+    ],
+)
+
+copy_to_bin(
+    name = "ng_generate_assets",
+    srcs = glob([
         "ng-generate/*/files/**/*",
-        "**/*.json",
+    ]),
+)
+
+copy_to_bin(
+    name = "schema_assets",
+    srcs = glob([
+        "**/schema.json",
     ]),
 )
 
@@ -19,12 +31,12 @@ ts_library(
         ["**/*.ts"],
         exclude = [
             "**/*.spec.ts",
-            "ng-update/test-cases/**/*.ts",
+            "paths.ts",
             "ng-generate/*/files/**/*.ts",
         ],
     ),
-    # Schematics do not need to run in browsers and can use `commonjs`
-    # as format instead the default `umd` format.
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
     devmode_module = "commonjs",
     prodmode_module = "commonjs",
     tsconfig = ":tsconfig.json",
@@ -41,6 +53,23 @@ ts_library(
     ],
 )
 
+ts_library(
+    name = "paths",
+    testonly = True,
+    srcs = ["paths.ts"],
+    data = [
+        ":collection_assets",
+    ],
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
+    devmode_module = "commonjs",
+    prodmode_module = "commonjs",
+    tsconfig = ":tsconfig.json",
+    deps = [
+        "@npm//@bazel/runfiles",
+    ],
+)
+
 # This package is intended to be combined into the main @angular/material package as a dep.
 pkg_npm(
     name = "npm_package",
@@ -49,8 +78,11 @@ pkg_npm(
         "//src/material/schematics/ng-generate/mdc-migration:npm_package",
     ],
     deps = [
+        ":collection_assets",
+        ":ng_generate_assets",
+        ":schema_assets",
         ":schematics",
-        ":schematics_assets",
+        "//src/material/schematics/ng-update:ng_update_index",
     ],
 )
 
@@ -60,7 +92,9 @@ jasmine_node_test(
     name = "unit_tests",
     srcs = [":unit_test_sources"],
     data = [
-        ":schematics_assets",
+        ":collection_assets",
+        ":ng_generate_assets",
+        ":schema_assets",
         ":schematics_test_cases",
     ],
 )
@@ -81,6 +115,7 @@ ts_library(
     prodmode_module = "commonjs",
     tsconfig = ":tsconfig.json",
     deps = [
+        ":paths",
         ":schematics",
         "//src/cdk/schematics",
         "//src/cdk/schematics/testing",

src/material/schematics/BUILD.bazel

@@ -4,57 +4,52 @@
     "migration-v6": {
       "version": "6.0.0",
       "description": "Updates Angular Material to v6",
-      "factory": "./ng-update/index#updateToV6"
+      "factory": "./ng-update/index_bundled#updateToV6"
     },
     "migration-v7": {
       "version": "7.0.0",
       "description": "Updates Angular Material to v7",
-      "factory": "./ng-update/index#updateToV7"
+      "factory": "./ng-update/index_bundled#updateToV7"
     },
     "migration-v8": {
       "version": "8.0.0",
       "description": "Updates Angular Material to v8",
-      "factory": "./ng-update/index#updateToV8"
+      "factory": "./ng-update/index_bundled#updateToV8"
     },
     "migration-v9": {
       "version": "9.0.0-0",
       "description": "Updates Angular Material to v9",
-      "factory": "./ng-update/index#updateToV9"
+      "factory": "./ng-update/index_bundled#updateToV9"
     },
     "migration-v10": {
       "version": "10.0.0-0",
       "description": "Updates Angular Material to v10",
-      "factory": "./ng-update/index#updateToV10"
+      "factory": "./ng-update/index_bundled#updateToV10"
     },
     "migration-v11": {
       "version": "11.0.0-0",
       "description": "Updates Angular Material to v11",
-      "factory": "./ng-update/index#updateToV11"
+      "factory": "./ng-update/index_bundled#updateToV11"
     },
     "migration-v12": {
       "version": "12.0.0-0",
       "description": "Updates Angular Material to v12",
-      "factory": "./ng-update/index#updateToV12"
+      "factory": "./ng-update/index_bundled#updateToV12"
     },
     "migration-v13": {
       "version": "13.0.0-0",
       "description": "Updates Angular Material to v13",
-      "factory": "./ng-update/index#updateToV13"
+      "factory": "./ng-update/index_bundled#updateToV13"
     },
     "migration-v14": {
       "version": "14.0.0-0",
       "description": "Updates the Angular Material to v14",
-      "factory": "./ng-update/index#updateToV14"
+      "factory": "./ng-update/index_bundled#updateToV14"
     },
     "migration-v15": {
       "version": "15.0.0-0",
       "description": "Updates the Angular Material to v15",
-      "factory": "./ng-update/index#updateToV15"
-    },
-    "ng-post-update": {
-      "description": "Prints out results after ng-update.",
-      "factory": "./ng-update/index#postUpdate",
-      "private": true
+      "factory": "./ng-update/index_bundled#updateToV15"
     }
   }
 }

src/material/schematics/migration.json

@@ -88,7 +88,8 @@ jasmine_node_test(
     data = [
         ":mdc_migration_bundle",
         ":unit_tests_assets",
-        "//src/material/schematics:schematics_assets",
+        "//src/material/schematics:collection_assets",
+        "//src/material/schematics:ng_generate_assets",
     ],
     deps = [
         ":unit_tests_bundle",

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

@@ -0,0 +1,96 @@
+load("//tools:defaults.bzl", "esbuild", "jasmine_node_test", "spec_bundle", "ts_library")
+
+## THIS ONE IS ESM
+# By default everything is ESM
+# ESBUild needs ESM for bundling. Cannot reliably use CJS as input.
+ts_library(
+    name = "ng_update_lib",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "test-cases/**/*.ts",
+        ],
+    ),
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
+    devmode_module = "commonjs",
+    deps = [
+        "//src/cdk/schematics",
+        "@npm//@angular-devkit/core",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@schematics/angular",
+        "@npm//@types/node",
+        "@npm//typescript",
+    ],
+)
+
+esbuild(
+    name = "ng_update_index",
+    entry_point = ":index.ts",
+    external = [
+        "@angular/cdk/schematics",
+        "@schematics/angular",
+        "@angular-devkit/schematics",
+        "@angular-devkit/core",
+        "typescript",
+    ],
+    # TODO: Switch to ESM when Angular CLI supports it.
+    format = "cjs",
+    output = "index_bundled.js",
+    platform = "node",
+    target = "es2015",
+    visibility = ["//src/material/schematics:__pkg__"],
+    deps = [":ng_update_lib"],
+)
+
+#################
+## Specs
+#################
+
+filegroup(
+    name = "schematics_test_cases",
+    testonly = True,
+    srcs = glob([
+        "test-cases/**/*_input.ts",
+        "test-cases/**/*_expected_output.ts",
+    ]),
+)
+
+# This one is now ESM, the default in the repository
+# Needs to be ESM because we import frm `ng_update_lib` (which is also ESM)
+ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":ng_update_lib",
+        "//src/cdk/schematics",
+        "//src/cdk/schematics/testing",
+        "//src/material/schematics:paths",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@bazel/runfiles",
+        "@npm//@types/jasmine",
+        "@npm//@types/node",
+    ],
+)
+
+spec_bundle(
+    name = "spec_bundle",
+    external = ["*/paths.js"],
+    platform = "cjs-legacy",
+    deps = [":test_lib"],
+)
+
+jasmine_node_test(
+    name = "test",
+    data = [
+        ":ng_update_index",
+        ":schematics_test_cases",
+        "//src/cdk/schematics",
+        "//src/material/schematics:collection_assets",
+    ],
+    shard_count = 4,
+    deps = [
+        ":spec_bundle",
+    ],
+)