build: avoid duplication of mdc dependencies by generating package.json (#24697)

As part of the Yarn PNP changes we moved from `peerDependencies` in the
experimental package to actual `dependencies` on all individual MDC
packages we rely on. This is necessary for Yarn PnP and conceptually
also makes the package more correct/safe.

This resulted in duplication of the MDC dependencies, making MDC
updates more complicated. We can avoid duplication by auto-inserting
the dependencies. That way we keep two places for the MDC deps:

* The project `package.json`
* `packages.bzl` for the Bazel analysis phase/Starlark.

Author: devversion

src/material-experimental/BUILD.bazel

@@ -34,10 +34,23 @@ sass_library(
     deps = [":theming_scss_lib"],
 )
 
+# Generate the material-experimental `package.json` by adding all MDC dependencies
+# from the project root to the `package-base.json` file. This is done to avoid
+# duplication and make the update process of MDC dependencies more obvious.
+# Note that we need to explicitly reference all individual `@material/` dependencies as
+# our code imports from the individual dependencies (and not from the kitchen-sink package)
+genrule(
+    name = "package_json",
+    srcs = ["package-base.json"],
+    outs = ["package.json"],
+    cmd = "$(execpath //tools/mdc-deps:add-to-package-json) $< > $@",
+    exec_tools = ["//tools/mdc-deps:add-to-package-json"],
+)
+
 ng_package(
     name = "npm_package",
     srcs = [
-        "package.json",
+        ":package_json",
         ":sass_lib",
         ":theming_scss_lib",
     ],

src/material-experimental/package-base.json

@@ -0,0 +1,47 @@
+{
+  "name": "@angular/material-experimental",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Experimental components for Angular Material",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/components.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/components/issues"
+  },
+  "homepage": "https://github.com/angular/components#readme",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./mdc-theming/prebuilt/indigo-pink.css": {
+      "style": "./mdc-theming/prebuilt/indigo-pink.css"
+    },
+    "./mdc-theming/prebuilt/deeppurple-amber.css": {
+      "style": "./mdc-theming/prebuilt/deeppurple-amber.css"
+    },
+    "./mdc-theming/prebuilt/pink-bluegrey.css": {
+      "style": "./mdc-theming/prebuilt/pink-bluegrey.css"
+    },
+    "./mdc-theming/prebuilt/purple-green.css": {
+      "style": "./mdc-theming/prebuilt/purple-green.css"
+    },
+    "./mdc-theming/prebuilt/*": {
+      "style": "./mdc-theming/prebuilt/*.css"
+    }
+  },
+  "peerDependencies": {
+    "@angular/animations": "0.0.0-NG",
+    "@angular/cdk": "0.0.0-PLACEHOLDER",
+    "@angular/core": "0.0.0-NG",
+    "@angular/common": "0.0.0-NG",
+    "@angular/forms": "0.0.0-NG",
+    "@angular/platform-browser": "0.0.0-NG",
+    "@angular/material": "0.0.0-PLACEHOLDER"
+  },
+  "dependencies": {
+    "tslib": "0.0.0-TSLIB"
+  },
+  "sideEffects": false
+}

src/material-experimental/package.json

@@ -0,0 +1,25 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+load("//tools:defaults.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "lib",
+    srcs = glob(["**/*.ts"]),
+    # TODO(ESM): remove this once the Bazel NodeJS rules can handle ESM with `nodejs_binary`.
+    devmode_module = "commonjs",
+    deps = [
+        "@npm//@bazel/runfiles",
+        "@npm//@types/node",
+    ],
+)
+
+nodejs_binary(
+    name = "add-to-package-json",
+    data = [
+        ":lib",
+        "//:package.json",
+    ],
+    entry_point = ":add-to-package-json.ts",
+    templated_args = ["--nobazel_run_linker"],
+)

tools/mdc-deps/BUILD.bazel

@@ -0,0 +1,56 @@
+import * as fs from 'fs';
+
+import {runfiles} from '@bazel/runfiles';
+
+interface PackageJson {
+  name: string;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+}
+
+/**
+ * Inserts all MDC packages from the project `package.json` to the `dependencies`
+ * of the specified base package json file. The output JSON is written to stdout.
+ *
+ * Note that the MDC version placeholder (from the `/packages.bzl` substitutions)
+ * will be used as value for the MDC dependency entries.
+ *
+ * @param basePackageJsonPath Absolute disk path to the base `package.json` file.
+ */
+async function main(basePackageJsonPath: string) {
+  const projectPkgJsonPath = runfiles.resolveWorkspaceRelative('package.json');
+  const projectPkgJson = JSON.parse(
+    await fs.promises.readFile(projectPkgJsonPath, 'utf8'),
+  ) as PackageJson;
+
+  const mdcDeps = Object.keys(projectPkgJson.devDependencies ?? []).filter(pkgName =>
+    pkgName.startsWith('@material/'),
+  );
+
+  if (mdcDeps.length === 0) {
+    throw new Error('Could not find `@material/` MDC dependencies in project `package.json`.');
+  }
+
+  const basePackageJson = JSON.parse(
+    await fs.promises.readFile(basePackageJsonPath, 'utf8'),
+  ) as PackageJson;
+
+  if (basePackageJson.dependencies === undefined) {
+    basePackageJson.dependencies = {};
+  }
+
+  // Add all MDC dependencies as explicit `dependencies`.
+  for (const pkgName of mdcDeps) {
+    basePackageJson.dependencies[pkgName] = '0.0.0-MDC';
+  }
+
+  process.stdout.write(JSON.stringify(basePackageJson, null, 2));
+}
+
+if (require.main === module) {
+  const [basePackageJsonPath] = process.argv.slice(2);
+  main(basePackageJsonPath).catch(e => {
+    console.error(e);
+    process.exitCode = 1;
+  });
+}