build: update to the latest version of dev-infra with ESM (#25052)

* build: update to the latest version of dev-infra with ESM

Updates to the latest version of dev-infra with full ESM.

* build: enable `--strict` for tools typescript code

* build: update notify slack script to ESM as it imports from `ng-dev`

Author: devversion

.circleci/config.yml

@@ -128,7 +128,7 @@ var_20: &slack_notify_on_failure
   run:
     name: 'Notifying team about job failure'
     when: on_fail
-    command: node ./scripts/circleci/notify-slack-job-failure.js
+    command: node ./scripts/circleci/notify-slack-job-failure.mjs
 
 # Branch filter that only matches the main branch.
 var_21: &only_main_branch_filter
@@ -509,7 +509,7 @@ jobs:
           name: Running size integration tests (failures are reported in Slack only).
           command: |
             # If the size integration tests fail, report the failure to a dedicated #components-ci-size-tracking Slack channel.
-            yarn integration-tests:size-test || node ./scripts/circleci/notify-slack-job-failure.js components-ci-size-tracking
+            yarn integration-tests:size-test || node ./scripts/circleci/notify-slack-job-failure.mjs components-ci-size-tracking
       - *slack_notify_on_failure
 
   # ----------------------------------------------------------------------------

.ng-dev/caretaker.ts renamed to .ng-dev/caretaker.mts

@@ -0,0 +1,8 @@
+import {format} from './format.mjs';
+import {github} from './github.mjs';
+import {pullRequest} from './pull-request.mjs';
+import {commitMessage} from './commit-message.mjs';
+import {caretaker} from './caretaker.mjs';
+import {release} from './release.mjs';
+
+export {commitMessage, format, github, pullRequest, caretaker, release};

.ng-dev/commit-message.ts renamed to .ng-dev/commit-message.mts

@@ -1,8 +1,8 @@
-import {SemVer} from 'semver';
+import semver from 'semver';
 import {ReleaseConfig} from '@angular/dev-infra-private/ng-dev';
-import {assertValidFrameworkPeerDependency} from '../tools/release-checks/check-framework-peer-dependency';
-import {assertValidUpdateMigrationCollections} from '../tools/release-checks/check-migration-collections';
-import {assertValidNpmPackageOutput} from '../tools/release-checks/npm-package-output';
+import {assertValidFrameworkPeerDependency} from '../tools/release-checks/check-framework-peer-dependency.mjs';
+import {assertValidUpdateMigrationCollections} from '../tools/release-checks/check-migration-collections.mjs';
+import {assertValidNpmPackageOutput} from '../tools/release-checks/npm-package-output/index.mjs';
 
 /**
  * Packages that will be published as part of the project.
@@ -46,11 +46,11 @@ export const release: ReleaseConfig = {
   buildPackages: async () => {
     // The `performNpmReleaseBuild` function is loaded at runtime as loading of the
     // script results in an invocation of Bazel for any `yarn ng-dev` command.
-    const {performNpmReleaseBuild} = await import('../scripts/build-packages-dist');
+    const {performNpmReleaseBuild} = await import('../scripts/build-packages-dist.mjs');
     return performNpmReleaseBuild();
   },
   prereleaseCheck: async (newVersionStr, builtPackagesWithInfo) => {
-    const newVersion = new SemVer(newVersionStr);
+    const newVersion = new semver.SemVer(newVersionStr);
 
     await assertValidFrameworkPeerDependency(newVersion);
     await assertValidUpdateMigrationCollections(newVersion);

.ng-dev/config.mts

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "strict": true,
-    "target": "es2015",
-    "module": "commonjs",
+    "target": "es2020",
+    "module": "Node16",
     "esModuleInterop": true,
     "noEmit": true,
     "skipLibCheck": true,

.ng-dev/config.ts

@@ -15,9 +15,10 @@
   },
   "scripts": {
     "postinstall": "node tools/postinstall/apply-patches.js",
-    "build": "ts-node --project scripts/tsconfig.json ./scripts/build-packages-dist.ts",
-    "build-and-check-release-output": "ts-node --project scripts/tsconfig.json scripts/build-and-check-release-output.ts",
-    "build-docs-content": "ts-node --project scripts/tsconfig.json ./scripts/build-docs-content.ts",
+    "ng-dev": "TS_NODE_PROJECT=$PWD/.ng-dev/tsconfig.json node_modules/@angular/dev-infra-private/ng-dev/bundles/cli.mjs",
+    "build": "ts-node --esm --project scripts/tsconfig.json ./scripts/build-packages-dist-main.mts",
+    "build-docs-content": "ts-node --esm --project scripts/tsconfig.json ./scripts/build-docs-content-main.mts",
+    "build-and-check-release-output": "ts-node --esm --project scripts/tsconfig.json scripts/build-and-check-release-output.mts",
     "dev-app": "ibazel run //src/dev-app:devserver",
     "test": "node ./scripts/run-component-tests.js",
     "test-local": "yarn -s test --local",
@@ -48,8 +49,8 @@
     "check-mdc-exports": "ts-node --project scripts/tsconfig.json scripts/check-mdc-exports.ts",
     "check-tooling-setup": "yarn tsc --project tools/tsconfig.json && yarn tsc --project .ng-dev/tsconfig.json",
     "tsc": "node ./node_modules/typescript/bin/tsc",
-    "ci-push-deploy-docs-app": "ts-node --project scripts/tsconfig.json scripts/docs-deploy/deploy-ci-push.ts",
-    "ci-docs-monitor-test": "ts-node --project scripts/tsconfig.json scripts/docs-deploy/monitoring/ci-test.ts",
+    "ci-push-deploy-docs-app": "ts-node --esm --project scripts/tsconfig.json scripts/docs-deploy/deploy-ci-push.mts",
+    "ci-docs-monitor-test": "ts-node --esm --project scripts/tsconfig.json scripts/docs-deploy/monitoring/ci-test.mts",
     "prepare": "husky install"
   },
   "version": "14.1.0-next.0",
@@ -74,7 +75,7 @@
     "@angular/bazel": "^14.0.1",
     "@angular/cli": "^14.0.1",
     "@angular/compiler-cli": "^14.0.1",
-    "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#e45a962f80dbcd36bcdfe82497d8b6ce3990506c",
+    "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#136fa6e336fd635db4e16cd582e1fd9b6cf444a6",
     "@angular/localize": "^14.0.1",
     "@angular/platform-browser-dynamic": "^14.0.1",
     "@angular/platform-server": "^14.0.1",
@@ -154,7 +155,6 @@
     "@types/node": "^16.10.9",
     "@types/node-fetch": "^2.5.5",
     "@types/parse5": "^6.0.3",
-    "@types/sass": "^1.43.1",
     "@types/selenium-webdriver": "^3.0.17",
     "@types/semver": "^7.3.9",
     "@types/send": "^0.17.1",
@@ -209,7 +209,7 @@
     "shelljs": "^0.8.5",
     "stylelint": "^14.5.0",
     "terser": "^5.10.0",
-    "ts-node": "^10.4.0",
+    "ts-node": "^10.8.1",
     "tsec": "0.2.2",
     "tsickle": "0.39.1",
     "tslint": "^6.1.3",
@@ -218,7 +218,7 @@
     "vrsource-tslint-rules": "6.0.0",
     "yaml": "^1.10.2",
     "yargs": "^17.3.1",
-    "zx": "^4.3.0"
+    "zx": "^6.2.4"
   },
   "resolutions": {
     "@angular/dev-infra-private/typescript": "~4.7.2",

.ng-dev/format.ts renamed to .ng-dev/format.mts

@@ -0,0 +1,31 @@
+/**
+ * Script that builds the NPM release output for all packages
+ * and runs sanity checks against the NPM package output.
+ */
+
+import fs from 'fs';
+import semver from 'semver';
+import {dirname, join} from 'path';
+import {fileURLToPath} from 'url';
+
+import {performNpmReleaseBuild} from './build-packages-dist.mjs';
+import {assertValidNpmPackageOutput} from '../tools/release-checks/npm-package-output/index.mjs';
+
+async function main() {
+  const projectDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+  const packageJsonContent = await fs.promises.readFile(join(projectDir, 'package.json'), 'utf8');
+  const packageJson = JSON.parse(packageJsonContent) as {version: string};
+
+  // Build the NPM package artifacts.
+  const builtPackages = performNpmReleaseBuild();
+
+  // Run the release output validation checks.
+  await assertValidNpmPackageOutput(builtPackages, semver.parse(packageJson.version)!);
+}
+
+try {
+  await main();
+} catch (e) {
+  console.error(e);
+  process.exit(1);
+}

.ng-dev/github.ts renamed to .ng-dev/github.mts

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+/**
+ * Script that builds the docs content NPM package and moves it into a conveniently
+ * accessible distribution directory (the project `dist/` directory).
+ */
+
+import {buildDocsContentPackage} from './build-docs-content.mjs';
+
+const builtPackage = buildDocsContentPackage();
+console.info(`Built docs-content into: ${builtPackage.outputPath}`);

.ng-dev/pull-request.ts renamed to .ng-dev/pull-request.mts

@@ -1,17 +1,15 @@
-#!/usr/bin/env node
-
 /**
  * Script that builds the docs content NPM package and moves it into a conveniently
  * accessible distribution directory (the project `dist/` directory).
  */
 
-import {cd, chmod, cp, exec, mkdir, rm, set} from 'shelljs';
-
+import sh from 'shelljs';
 import {BuiltPackage} from '@angular/dev-infra-private/ng-dev';
-import {join} from 'path';
+import {fileURLToPath} from 'url';
+import {join, dirname} from 'path';
 
 /** Path to the project directory. */
-const projectDir = join(__dirname, '../');
+const projectDir = join(dirname(fileURLToPath(import.meta.url)), '../');
 
 /** Path to the distribution directory. */
 const distDir = join(projectDir, 'dist/');
@@ -32,38 +30,33 @@ const bazelCmd = process.env.BAZEL || `yarn -s bazel`;
  */
 export function buildDocsContentPackage(): BuiltPackage {
   // ShellJS should exit if a command fails.
-  set('-e');
+  sh.set('-e');
 
   // Go to project directory.
-  cd(projectDir);
+  sh.cd(projectDir);
 
   /** Path to the bazel bin output directory. */
-  const bazelBinPath = exec(`${bazelCmd} info bazel-bin`).stdout.trim();
+  const bazelBinPath = sh.exec(`${bazelCmd} info bazel-bin`).stdout.trim();
 
   /** Path where the NPM package is built into by Bazel. */
   const bazelBinOutDir = join(bazelBinPath, 'src/components-examples/npm_package');
 
   // Clean the output directory to ensure that the docs-content package
   // will not contain outdated files from previous builds.
-  rm('-rf', outputDir);
-  mkdir('-p', distDir);
+  sh.rm('-rf', outputDir);
+  sh.mkdir('-p', distDir);
 
   // Build the docs-content package with the snapshot-build mode. That will help
   // determining which commit is associated with the built docs-content.
-  exec(`${bazelCmd} build src/components-examples:npm_package --config=snapshot-build`);
+  sh.exec(`${bazelCmd} build src/components-examples:npm_package --config=snapshot-build`);
 
   // Copy the package output into the dist path. Also update the permissions
   // as Bazel by default marks files in the bazel-out as readonly.
-  cp('-R', bazelBinOutDir, outputDir);
-  chmod('-R', 'u+w', outputDir);
+  sh.cp('-R', bazelBinOutDir, outputDir);
+  sh.chmod('-R', 'u+w', outputDir);
 
   return {
     name: '@angular/components-examples',
     outputPath: outputDir,
   };
 }
-
-if (require.main === module) {
-  const builtPackage = buildDocsContentPackage();
-  console.info(`Built docs-content into: ${builtPackage.outputPath}`);
-}

.ng-dev/release.ts renamed to .ng-dev/release.mts

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+/**
+ * Script that builds the release output of all packages which have the "release-package
+ * Bazel tag set. The script builds all those packages and copies the release output to the
+ * distribution folder within the project.
+ */
+
+import {performDefaultSnapshotBuild} from './build-packages-dist.mjs';
+
+// We always build as a snapshot build, unless the script is invoked directly by the
+// release publish script. The snapshot release configuration ensures that the current
+// Git `HEAD` sha is included for the version placeholders.
+performDefaultSnapshotBuild();

.ng-dev/tsconfig.json

@@ -1,24 +1,23 @@
-#!/usr/bin/env node
-
 /**
  * Script that builds the release output of all packages which have the "release-package
- * bazel tag set. The script builds all those packages and copies the release output to the
+ * Bazel tag set. The script builds all those packages and copies the release output to the
  * distribution folder within the project.
  */
 
 import {execSync} from 'child_process';
-import {join} from 'path';
+import {join, dirname} from 'path';
 import {BuiltPackage} from '@angular/dev-infra-private/ng-dev';
-import {chmod, cp, mkdir, rm, set, test} from 'shelljs';
+import {fileURLToPath} from 'url';
+import sh from 'shelljs';
 
 // ShellJS should exit if a command fails.
-set('-e');
+sh.set('-e');
 
 /** Name of the Bazel tag that will be used to find release package targets. */
 const releaseTargetTag = 'release-package';
 
 /** Path to the project directory. */
-const projectDir = join(__dirname, '../');
+const projectDir = join(dirname(fileURLToPath(import.meta.url)), '../');
 
 /** Command that runs Bazel. */
 const bazelCmd = process.env.BAZEL || `yarn -s bazel`;
@@ -31,18 +30,6 @@ const queryPackagesCmd =
 /** Path for the default distribution output directory. */
 const defaultDistPath = join(projectDir, 'dist/releases');
 
-// Export the methods for building the release packages. These
-// can be consumed by the release tool.
-exports.performNpmReleaseBuild = performNpmReleaseBuild;
-exports.performDefaultSnapshotBuild = performDefaultSnapshotBuild;
-
-if (module === require.main) {
-  // We always build as a snapshot bu8ild, unless the script is invoked directly by the
-  // release publish script. The snapshot release configuration ensures that the current
-  // Git `HEAD` sha is included for the version placeholders.
-  performDefaultSnapshotBuild();
-}
-
 /** Builds the release packages for NPM. */
 export function performNpmReleaseBuild(): BuiltPackage[] {
   return buildReleasePackages(defaultDistPath, /* isSnapshotBuild */ false);
@@ -82,26 +69,26 @@ function buildReleasePackages(distPath: string, isSnapshotBuild: boolean): Built
   // do this to ensure that the version placeholders are properly populated.
   packageNames.forEach(pkgName => {
     const outputPath = getBazelOutputPath(pkgName);
-    if (test('-d', outputPath)) {
-      chmod('-R', 'u+w', outputPath);
-      rm('-rf', outputPath);
+    if (sh.test('-d', outputPath)) {
+      sh.chmod('-R', 'u+w', outputPath);
+      sh.rm('-rf', outputPath);
     }
   });
 
   exec(`${bazelCmd} build ${stampConfigArg} ${targets.join(' ')}`);
 
   // Delete the distribution directory so that the output is guaranteed to be clean. Re-create
   // the empty directory so that we can copy the release packages into it later.
-  rm('-rf', distPath);
-  mkdir('-p', distPath);
+  sh.rm('-rf', distPath);
+  sh.mkdir('-p', distPath);
 
   // Copy the package output into the specified distribution folder.
   packageNames.forEach(pkgName => {
     const outputPath = getBazelOutputPath(pkgName);
     const targetFolder = getDistPath(pkgName);
     console.log(`> Copying package output to "${targetFolder}"`);
-    cp('-R', outputPath, targetFolder);
-    chmod('-R', 'u+w', targetFolder);
+    sh.cp('-R', outputPath, targetFolder);
+    sh.chmod('-R', 'u+w', targetFolder);
   });
 
   return packageNames.map(pkg => {

package.json

@@ -5,11 +5,11 @@
  * will be a noop when running for forked builds (i.e. PRs).
  */
 
-const {
+import {
   isVersionBranch,
   getConfig,
   assertValidGithubConfig,
-} = require('@angular/dev-infra-private/ng-dev');
+} from '@angular/dev-infra-private/ng-dev';
 
 if (process.env.CIRCLE_PR_NUMBER) {
   console.info('Skipping notifications for pull requests.');
@@ -23,7 +23,7 @@ const {
   SLACK_COMPONENTS_CI_FAILURES_WEBHOOK_URL: webhookUrl,
 } = process.env;
 
-const {github} = getConfig([assertValidGithubConfig]);
+const {github} = await getConfig([assertValidGithubConfig]);
 const isPublishBranch = isVersionBranch(branchName) || branchName === github.mainBranchName;
 
 // We don't want to spam the CI failures channel with e.g. Renovate branch failures.