build: convert approve-api-golden and run-component-tests scripts to .mts to support updated chalk (#31966)

(cherry picked from commit 3cbe5a0)

Author: lekhmanrus

package.json

@@ -22,7 +22,7 @@
     "build-and-check-release-output": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only scripts/build-and-check-release-output.mts",
     "dev-app": "ibazel run //src/dev-app:devserver",
     "universal-app": "bazel run //src/universal-app:server",
-    "test": "node ./scripts/run-component-tests.js",
+    "test": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only ./scripts/run-component-tests.mts",
     "test-local": "pnpm -s test --local",
     "test-firefox": "pnpm -s test --firefox",
     "test-tsec": "pnpm bazelisk test //... --build_tag_filters=tsec --test_tag_filters=tsec",
@@ -42,7 +42,7 @@
     "ts-circular-deps:check": "pnpm -s ng-dev ts-circular-deps check --config ./src/circular-deps-test.conf.cjs",
     "ts-circular-deps:approve": "pnpm -s ng-dev ts-circular-deps approve --config ./src/circular-deps-test.conf.cjs",
     "merge": "pnpm -s ng-dev pr merge",
-    "approve-api": "node ./scripts/approve-api-golden.js",
+    "approve-api": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only ./scripts/approve-api-golden.mts",
     "integration-tests": "bazel test --test_tag_filters=-linker-integration-test --build_tests_only -- //integration/...",
     "test-linker-aot": "bazel test --partial_compilation --test_tag_filters=partial-compilation-integration,-firefox --build_tests_only -- //integration/... //src/...",
     "test-linker-jit": "bazel test --partial_compilation --test_tag_filters=partial-compilation-integration,-firefox --build_tests_only --//tools:force_partial_jit_compilation=True  -- //integration/... //src/...",

scripts/approve-api-golden.js renamed to scripts/approve-api-golden.mts

@@ -1,23 +1,21 @@
 #!/usr/bin/env node
 
-const shelljs = require('shelljs');
-const chalk = require('chalk');
-const path = require('path');
-const {guessPackageName} = require('./util');
-const projectDir = path.join(__dirname, '../');
+import chalk from 'chalk';
+import {join} from 'path';
+import sh from 'shelljs';
+import {guessPackageName} from './util.mjs';
+
 const bazel = process.env['BAZEL'] || 'pnpm -s bazel';
 
 if (process.argv.length < 3) {
   console.error(chalk.red('No package name has been passed in for API golden approval.'));
   process.exit(1);
 }
 
-// ShellJS should exit if any command fails.
-shelljs.set('-e');
-shelljs.cd(projectDir);
+sh.set('-e');
 
 for (const searchPackageName of process.argv.slice(2)) {
-  const packageNameGuess = guessPackageName(searchPackageName, path.join(projectDir, 'src'));
+  const packageNameGuess = guessPackageName(searchPackageName, join(process.cwd(), 'src'));
 
   if (!packageNameGuess.result) {
     console.error(
@@ -30,8 +28,8 @@ for (const searchPackageName of process.argv.slice(2)) {
     process.exit(1);
   }
 
-  const [packageName, ..._entryPointTail] = packageNameGuess.result.split('/');
+  const [packageName] = packageNameGuess.result.split('/');
   const apiGoldenTargetName = `//goldens:${packageName}_api.accept`.replace(/-/g, '_');
 
-  shelljs.exec(`${bazel} run ${apiGoldenTargetName}`);
+  sh.exec(`${bazel} run ${apiGoldenTargetName}`);
 }

scripts/run-component-tests.js renamed to scripts/run-component-tests.mts

@@ -17,27 +17,31 @@
  *   --no-watch   | Watch mode is enabled by default. This flag opts-out to standard Bazel.
  */
 
-const yargs = require('yargs');
-const shelljs = require('shelljs');
-const chalk = require('chalk');
-const path = require('path');
-const args = process.argv.slice(2);
-const {guessPackageName, convertPathToPosix} = require('./util');
+import chalk from 'chalk';
+import {join, relative} from 'path';
+import sh from 'shelljs';
+import yargs from 'yargs';
+import {guessPackageName, convertPathToPosix} from './util.mjs';
 
-// Path to the project directory.
-const projectDir = path.join(__dirname, '../');
+const args = process.argv.slice(2);
 
 // Path to the directory that contains all packages.
-const packagesDir = path.join(projectDir, 'src/');
+const packagesDir = join(process.cwd(), 'src/');
 
 // ShellJS should exit if any command fails.
-shelljs.set('-e');
-shelljs.cd(projectDir);
+sh.set('-e');
+
+interface CliArgs {
+  components: string[];
+  debug: boolean;
+  firefox: boolean;
+  watch: boolean;
+}
 
 // Extracts the supported command line options.
-const {components, debug, firefox, watch} = yargs(args)
+const parser = yargs(args)
   .command('* <components..>', 'Run tests for specified components', args =>
-    args.positional('components', {type: 'array'}),
+    args.positional('components', {type: 'string', array: true}),
   )
   .option('debug', {
     alias: 'local',
@@ -53,8 +57,9 @@ const {components, debug, firefox, watch} = yargs(args)
     default: true,
     description: 'Whether tests should be re-run automatically upon changes.',
   })
-  .strict()
-  .parseSync();
+  .strict();
+
+const {components, debug, firefox, watch} = parser.parseSync() as unknown as CliArgs;
 
 // Whether tests for all components should be run.
 const all = components.length === 1 && components[0] === 'all';
@@ -84,51 +89,49 @@ if (all) {
     console.warn(chalk.yellow('Unable to run all component tests in watch mode.'));
     console.warn(chalk.yellow('Tests will be run in non-watch mode..'));
   }
-  shelljs.exec(
+  sh.exec(
     `pnpm -s bazel test --test_tag_filters=-e2e,browser:${browserName} ` +
       `--build_tag_filters=browser:${browserName} --build_tests_only //src/...`,
   );
-  return;
-}
+} else {
+  // Exit if no component has been specified.
+  if (!components.length) {
+    console.error(
+      chalk.red(
+        'No component specified. Please either specify individual components, or pass "all" ' +
+          'in order to run tests for all components.',
+      ),
+    );
+    console.info(chalk.yellow('Below are a few examples of how the script can be run:'));
+    console.info(chalk.yellow(` - pnpm test all`));
+    console.info(chalk.yellow(` - pnpm test cdk/overlay material/stepper`));
+    console.info(chalk.yellow(` - pnpm test button toolbar`));
+    process.exit(1);
+  }
 
-// Exit if no component has been specified.
-if (!components.length) {
-  console.error(
-    chalk.red(
-      'No component specified. Please either specify individual components, or pass "all" ' +
-        'in order to run tests for all components.',
-    ),
+  const bazelAction = debug ? 'run' : 'test';
+  const testLabels = components.map(
+    t => `${getBazelPackageOfComponentName(t)}:${getTargetName(t)}`,
   );
-  console.info(chalk.yellow('Below are a few examples of how the script can be run:'));
-  console.info(chalk.yellow(` - pnpm test all`));
-  console.info(chalk.yellow(` - pnpm test cdk/overlay material/stepper`));
-  console.info(chalk.yellow(` - pnpm test button toolbar`));
-  process.exit(1);
-}
-
-const bazelAction = debug ? 'run' : 'test';
-const testLabels = components.map(t => `${getBazelPackageOfComponentName(t)}:${getTargetName(t)}`);
-
-// Runs Bazel for the determined test labels.
-shelljs.exec(`${bazelBinary} ${bazelAction} ${testLabels.join(' ')}`);
 
+  // Runs Bazel for the determined test labels.
+  sh.exec(`${bazelBinary} ${bazelAction} ${testLabels.join(' ')}`);
+}
 /**
  * Gets the Bazel package label for the specified component name. Throws if
  * the component could not be resolved to a Bazel package.
  */
-function getBazelPackageOfComponentName(name) {
+function getBazelPackageOfComponentName(name: string) {
   // Before guessing any Bazel package, we test if the name contains the
   // package name already. If so, we just use that for Bazel package.
   const targetName =
-    convertPathToBazelLabel(name) || convertPathToBazelLabel(path.join(packagesDir, name));
+    convertPathToBazelLabel(name) || convertPathToBazelLabel(join(packagesDir, name));
   if (targetName !== null) {
     return targetName;
   }
   // If the name does not contain an explicit package name, try to guess it.
   const guess = guessPackageName(name, packagesDir);
-  const guessLabel = guess.result
-    ? convertPathToBazelLabel(path.join(packagesDir, guess.result))
-    : null;
+  const guessLabel = guess.result ? convertPathToBazelLabel(join(packagesDir, guess.result)) : null;
 
   if (guessLabel) {
     return guessLabel;
@@ -144,15 +147,15 @@ function getBazelPackageOfComponentName(name) {
 }
 
 /** Converts a path to a Bazel label. */
-function convertPathToBazelLabel(name) {
-  if (shelljs.test('-d', name)) {
-    return `//${convertPathToPosix(path.relative(projectDir, name))}`;
+function convertPathToBazelLabel(name: string) {
+  if (sh.test('-d', name)) {
+    return `//${convertPathToPosix(relative(process.cwd(), name))}`;
   }
   return null;
 }
 
 /** Gets the name of the target that should be run. */
-function getTargetName(packageName) {
+function getTargetName(packageName: string) {
   // Schematics don't have _debug and browser targets.
   if (packageName && packageName.endsWith('schematics')) {
     return 'unit_tests';

scripts/util.js renamed to scripts/util.mts

@@ -1,5 +1,5 @@
-const path = require('path');
-const shelljs = require('shelljs');
+import {join} from 'path';
+import sh from 'shelljs';
 
 /** Map of common typos in target names. The key is the typo, the value is the correct form. */
 const commonTypos = new Map([['snackbar', 'snack-bar']]);
@@ -13,12 +13,12 @@ const orderedGuessPackages = ['material', 'cdk', 'material-experimental', 'cdk-e
  * Tries to guess the full name of a package, based on a shorthand name.
  * Returns an object with the result of the guess and the names that were attempted.
  */
-function guessPackageName(name, packagesDir) {
+export function guessPackageName(name: string, packagesDir: string) {
   name = correctTypos(name);
 
   // Build up a list of packages that we're going to try.
-  const attempts = [name, ...orderedGuessPackages.map(package => path.join(package, name))];
-  const result = attempts.find(guessName => shelljs.test('-d', path.join(packagesDir, guessName)));
+  const attempts = [name, ...orderedGuessPackages.map(guessPackage => join(guessPackage, name))];
+  const result = attempts.find(guessName => sh.test('-d', join(packagesDir, guessName)));
 
   return {
     result: result ? convertPathToPosix(result) : null,
@@ -27,21 +27,16 @@ function guessPackageName(name, packagesDir) {
 }
 
 /** Converts an arbitrary path to a Posix path. */
-function convertPathToPosix(pathName) {
+export function convertPathToPosix(pathName: string) {
   return pathName.replace(/\\/g, '/');
 }
 
 /** Correct common typos in a target name */
-function correctTypos(target) {
+function correctTypos(target: string) {
   let correctedTarget = target;
   for (const [typo, correction] of commonTypos) {
     correctedTarget = correctedTarget.replace(typo, correction);
   }
 
   return correctedTarget;
 }
-
-module.exports = {
-  guessPackageName,
-  convertPathToPosix,
-};