build: update dependency yargs to v18

See associated pull request for more information.

Closes #30399 as a pr takeover

Author: alan-agius4

packages/angular/cli/package.json

@@ -37,7 +37,7 @@
     "pacote": "21.0.0",
     "resolve": "1.22.10",
     "semver": "7.7.2",
-    "yargs": "17.7.2"
+    "yargs": "18.0.0"
   },
   "ng-update": {
     "migrations": "@schematics/angular/migrations/migration-collection.json",

packages/angular/cli/src/command-builder/command-module.ts

@@ -9,7 +9,6 @@
 import { logging, schema } from '@angular-devkit/core';
 import { readFileSync } from 'node:fs';
 import * as path from 'node:path';
-import yargs from 'yargs';
 import type {
   ArgumentsCamelCase,
   Argv,
@@ -47,6 +46,7 @@ export interface CommandContext {
   globalConfiguration: AngularWorkspace;
   logger: logging.Logger;
   packageManager: PackageManagerUtils;
+  yargsInstance: Argv<{}>;
 
   /** Arguments parsed in free-from without parser configuration. */
   args: {
@@ -250,7 +250,7 @@ export abstract class CommandModule<T extends {} = {}> implements CommandModuleI
 
   private reportCommandRunAnalytics(analytics: AnalyticsCollector): void {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const internalMethods = (yargs as any).getInternalMethods();
+    const internalMethods = (this.context.yargsInstance as any).getInternalMethods();
     // $0 generate component [name] -> generate_component
     // $0 add <collection> -> add
     const fullCommand = (internalMethods.getUsageInstance().getUsage()[0][0] as string)

packages/angular/cli/src/command-builder/command-runner.ts

@@ -27,7 +27,7 @@ import {
   demandCommandFailureMessage,
 } from './utilities/command';
 import { jsonHelpUsage } from './utilities/json-help';
-import { normalizeOptionsMiddleware } from './utilities/normalize-options-middleware';
+import { createNormalizeOptionsMiddleware } from './utilities/normalize-options-middleware';
 
 const yargsParser = Parser as unknown as typeof Parser.default;
 
@@ -62,11 +62,14 @@ export async function runCommand(args: string[], logger: logging.Logger): Promis
   }
 
   const root = workspace?.basePath ?? process.cwd();
+  const localYargs = yargs(args);
+
   const context: CommandContext = {
     globalConfiguration,
     workspace,
     logger,
     currentDirectory: process.cwd(),
+    yargsInstance: localYargs,
     root,
     packageManager: new PackageManagerUtils({ globalConfiguration, workspace, root }),
     args: {
@@ -80,15 +83,14 @@ export async function runCommand(args: string[], logger: logging.Logger): Promis
     },
   };
 
-  let localYargs = yargs(args);
   for (const CommandModule of await getCommandsToRegister(positional[0])) {
-    localYargs = addCommandModuleToYargs(localYargs, CommandModule, context);
+    addCommandModuleToYargs(CommandModule, context);
   }
 
   if (jsonHelp) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const usageInstance = (localYargs as any).getInternalMethods().getUsageInstance();
-    usageInstance.help = () => jsonHelpUsage();
+    usageInstance.help = () => jsonHelpUsage(localYargs);
   }
 
   // Add default command to support version option when no subcommand is specified
@@ -127,7 +129,7 @@ export async function runCommand(args: string[], logger: logging.Logger): Promis
     .epilogue('For more information, see https://angular.dev/cli/.\n')
     .demandCommand(1, demandCommandFailureMessage)
     .recommendCommands()
-    .middleware(normalizeOptionsMiddleware)
+    .middleware(createNormalizeOptionsMiddleware(localYargs))
     .version(false)
     .showHelpOnFail(false)
     .strict()

packages/angular/cli/src/command-builder/utilities/command.ts

@@ -20,11 +20,10 @@ export type CommandModuleConstructor = Partial<CommandModuleImplementation> & {
   new (context: CommandContext): Partial<CommandModuleImplementation> & CommandModule;
 };
 
-export function addCommandModuleToYargs<T extends object, U extends CommandModuleConstructor>(
-  localYargs: Argv<T>,
+export function addCommandModuleToYargs<U extends CommandModuleConstructor>(
   commandModule: U,
   context: CommandContext,
-): Argv<T> {
+): void {
   const cmd = new commandModule(context);
   const {
     args: {
@@ -35,7 +34,7 @@ export function addCommandModuleToYargs<T extends object, U extends CommandModul
 
   const describe = jsonHelp ? cmd.fullDescribe : cmd.describe;
 
-  return localYargs.command({
+  context.yargsInstance.command({
     command: cmd.command,
     aliases: cmd.aliases,
     describe:
@@ -58,7 +57,7 @@ export function addCommandModuleToYargs<T extends object, U extends CommandModul
         );
       }
 
-      return cmd.builder(argv) as Argv<T>;
+      return cmd.builder(argv) as Argv;
     },
     handler: (args) => cmd.handler(args),
   });

packages/angular/cli/src/command-builder/utilities/json-help.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import yargs from 'yargs';
+import { Argv } from 'yargs';
 import { FullDescribe } from '../command-module';
 
 interface JsonHelpOption {
@@ -42,9 +42,9 @@ export interface JsonHelp extends JsonHelpDescription {
 
 const yargsDefaultCommandRegExp = /^\$0|\*/;
 
-export function jsonHelpUsage(): string {
+export function jsonHelpUsage(localYargs: Argv): string {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const localYargs = yargs as any;
+  const localYargsInstance = localYargs as any;
   const {
     deprecatedOptions,
     alias: aliases,
@@ -56,13 +56,13 @@ export function jsonHelpUsage(): string {
     demandedOptions,
     default: defaultVal,
     hiddenOptions = [],
-  } = localYargs.getOptions();
+  } = localYargsInstance.getOptions();
 
-  const internalMethods = localYargs.getInternalMethods();
+  const internalMethods = localYargsInstance.getInternalMethods();
   const usageInstance = internalMethods.getUsageInstance();
   const context = internalMethods.getContext();
   const descriptions = usageInstance.getDescriptions();
-  const groups = localYargs.getGroups();
+  const groups = localYargsInstance.getGroups();
   const positional = groups[usageInstance.getPositionalGroupName()] as string[] | undefined;
 
   const hidden = new Set(hiddenOptions);
@@ -124,7 +124,7 @@ export function jsonHelpUsage(): string {
 
   const output: JsonHelp = {
     name: [...context.commands].pop(),
-    command: `${command?.replace(yargsDefaultCommandRegExp, localYargs['$0'])}${defaultSubCommand}`,
+    command: `${command?.replace(yargsDefaultCommandRegExp, localYargsInstance['$0'])}${defaultSubCommand}`,
     ...parseDescription(rawDescription),
     options: normalizeOptions.sort((a, b) => a.name.localeCompare(b.name)),
     subcommands: otherSubcommands.length ? otherSubcommands : undefined,

packages/angular/cli/src/command-builder/utilities/normalize-options-middleware.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import * as yargs from 'yargs';
+import type { Arguments, Argv } from 'yargs';
 
 /**
  * A Yargs middleware that normalizes non Array options when the argument has been provided multiple times.
@@ -17,21 +17,23 @@ import * as yargs from 'yargs';
  *
  * See: https://github.com/yargs/yargs-parser/pull/163#issuecomment-516566614
  */
-export function normalizeOptionsMiddleware(args: yargs.Arguments): void {
-  // `getOptions` is not included in the types even though it's public API.
-  // https://github.com/yargs/yargs/issues/2098
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { array } = (yargs as any).getOptions();
-  const arrayOptions = new Set(array);
+export function createNormalizeOptionsMiddleware(localeYargs: Argv): (args: Arguments) => void {
+  return (args: Arguments) => {
+    // `getOptions` is not included in the types even though it's public API.
+    // https://github.com/yargs/yargs/issues/2098
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { array } = (localeYargs as any).getOptions();
+    const arrayOptions = new Set(array);
 
-  for (const [key, value] of Object.entries(args)) {
-    if (key !== '_' && Array.isArray(value) && !arrayOptions.has(key)) {
-      const newValue = value.pop();
-      // eslint-disable-next-line no-console
-      console.warn(
-        `Option '${key}' has been specified multiple times. The value '${newValue}' will be used.`,
-      );
-      args[key] = newValue;
+    for (const [key, value] of Object.entries(args)) {
+      if (key !== '_' && Array.isArray(value) && !arrayOptions.has(key)) {
+        const newValue = value.pop();
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Option '${key}' has been specified multiple times. The value '${newValue}' will be used.`,
+        );
+        args[key] = newValue;
+      }
     }
-  }
+  };
 }

packages/angular/cli/src/commands/analytics/cli.ts

@@ -41,7 +41,7 @@ export default class AnalyticsCommandModule
     ].sort(); // sort by class name.
 
     for (const module of subcommands) {
-      localYargs = addCommandModuleToYargs(localYargs, module, this.context);
+      addCommandModuleToYargs(module, this.context);
     }
 
     return localYargs.demandCommand(1, demandCommandFailureMessage).strict();

packages/angular/cli/src/commands/cache/cli.ts

@@ -40,7 +40,7 @@ export default class CacheCommandModule
     ].sort();
 
     for (const module of subcommands) {
-      localYargs = addCommandModuleToYargs(localYargs, module, this.context);
+      addCommandModuleToYargs(module, this.context);
     }
 
     return localYargs.demandCommand(1, demandCommandFailureMessage).strict();

packages/angular/cli/src/commands/completion/cli.ts

@@ -7,7 +7,7 @@
  */
 
 import { join } from 'node:path';
-import yargs, { Argv } from 'yargs';
+import { Argv } from 'yargs';
 import { CommandModule, CommandModuleImplementation } from '../../command-builder/command-module';
 import { addCommandModuleToYargs } from '../../command-builder/utilities/command';
 import { colors } from '../../utilities/color';
@@ -23,7 +23,9 @@ export default class CompletionCommandModule
   longDescriptionPath = join(__dirname, 'long-description.md');
 
   builder(localYargs: Argv): Argv {
-    return addCommandModuleToYargs(localYargs, CompletionScriptCommandModule, this.context);
+    addCommandModuleToYargs(CompletionScriptCommandModule, this.context);
+
+    return localYargs;
   }
 
   async run(): Promise<number> {
@@ -69,6 +71,6 @@ class CompletionScriptCommandModule extends CommandModule implements CommandModu
   }
 
   run(): void {
-    yargs.showCompletionScript();
+    this.context.yargsInstance.showCompletionScript();
   }
 }