refactor(@angular/cli): use latest inquirer prompt package

The `inquirer` package has been rewritten with a new set of packages.
The rewrite had a focus on reduced package size and improved performance.
The main prompt package is now `@inquirer/prompts`. The API is very similar
but did require some refactoring to adapt to Angular's usage.

Author: clydin

package.json

@@ -83,6 +83,7 @@
     "@bazel/esbuild": "5.8.1",
     "@bazel/jasmine": "5.8.1",
     "@discoveryjs/json-ext": "0.5.7",
+    "@inquirer/prompts": "5.0.5",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@types/babel__core": "7.20.5",

packages/angular/cli/BUILD.bazel

@@ -54,8 +54,8 @@ ts_library(
         "//packages/angular_devkit/schematics/tasks",
         "//packages/angular_devkit/schematics/tools",
         "@npm//@angular/core",
+        "@npm//@inquirer/prompts",
         "@npm//@types/ini",
-        "@npm//@types/inquirer",
         "@npm//@types/node",
         "@npm//@types/npm-package-arg",
         "@npm//@types/pacote",

packages/angular/cli/package.json

@@ -25,11 +25,11 @@
     "@angular-devkit/architect": "0.0.0-EXPERIMENTAL-PLACEHOLDER",
     "@angular-devkit/core": "0.0.0-PLACEHOLDER",
     "@angular-devkit/schematics": "0.0.0-PLACEHOLDER",
+    "@inquirer/prompts": "5.0.5",
     "@schematics/angular": "0.0.0-PLACEHOLDER",
     "@yarnpkg/lockfile": "1.1.0",
     "ansi-colors": "4.1.3",
     "ini": "4.1.3",
-    "inquirer": "9.2.23",
     "jsonc-parser": "3.2.1",
     "npm-package-arg": "11.0.2",
     "npm-pick-manifest": "9.0.1",

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

@@ -6,21 +6,19 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { normalize as devkitNormalize, schema } from '@angular-devkit/core';
+import { JsonValue, normalize as devkitNormalize, schema } from '@angular-devkit/core';
 import { Collection, UnsuccessfulWorkflowExecution, formats } from '@angular-devkit/schematics';
 import {
   FileSystemCollectionDescription,
   FileSystemSchematicDescription,
   NodeWorkflow,
 } from '@angular-devkit/schematics/tools';
-import type { CheckboxQuestion, Question } from 'inquirer';
 import { relative, resolve } from 'path';
 import { Argv } from 'yargs';
 import { isPackageNameSafeForAnalytics } from '../analytics/analytics';
 import { EventCustomDimension } from '../analytics/analytics-parameters';
 import { getProjectByCwd, getSchematicDefaults } from '../utilities/config';
 import { assertIsError } from '../utilities/error';
-import { loadEsmModule } from '../utilities/load-esm';
 import { memoize } from '../utilities/memoize';
 import { isTTY } from '../utilities/tty';
 import {
@@ -172,76 +170,98 @@ export abstract class SchematicsCommandModule
 
     if (options.interactive !== false && isTTY()) {
       workflow.registry.usePromptProvider(async (definitions: Array<schema.PromptDefinition>) => {
-        const questions = definitions
-          .filter((definition) => !options.defaults || definition.default === undefined)
-          .map((definition) => {
-            const question: Question = {
-              name: definition.id,
-              message: definition.message,
-              default: definition.default,
-            };
-
-            const validator = definition.validator;
-            if (validator) {
-              question.validate = (input) => validator(input);
-
-              // Filter allows transformation of the value prior to validation
-              question.filter = async (input) => {
-                for (const type of definition.propertyTypes) {
-                  let value;
-                  switch (type) {
-                    case 'string':
-                      value = String(input);
-                      break;
-                    case 'integer':
-                    case 'number':
-                      value = Number(input);
-                      break;
-                    default:
-                      value = input;
-                      break;
+        let prompts: typeof import('@inquirer/prompts') | undefined;
+        const answers: Record<string, JsonValue> = {};
+
+        for (const definition of definitions) {
+          if (options.defaults && definition.default !== undefined) {
+            continue;
+          }
+
+          // Only load prompt package if needed
+          prompts ??= await import('@inquirer/prompts');
+
+          switch (definition.type) {
+            case 'confirmation':
+              answers[definition.id] = await prompts.confirm({
+                message: definition.message,
+                default: definition.default as boolean | undefined,
+              });
+              break;
+            case 'list':
+              if (!definition.items?.length) {
+                continue;
+              }
+
+              const choices = definition.items?.map((item) => {
+                return typeof item == 'string'
+                  ? {
+                      name: item,
+                      value: item,
+                    }
+                  : {
+                      name: item.label,
+                      value: item.value,
+                    };
+              });
+
+              answers[definition.id] = await (
+                definition.multiselect ? prompts.checkbox : prompts.select
+              )({
+                message: definition.message,
+                default: definition.default,
+                choices,
+              });
+              break;
+            case 'input':
+              let finalValue: JsonValue | undefined;
+              answers[definition.id] = await prompts.input({
+                message: definition.message,
+                default: definition.default as string | undefined,
+                async validate(value) {
+                  if (definition.validator === undefined) {
+                    return true;
                   }
-                  // Can be a string if validation fails
-                  const isValid = (await validator(value)) === true;
-                  if (isValid) {
-                    return value;
+
+                  let lastValidation: ReturnType<typeof definition.validator> = false;
+                  for (const type of definition.propertyTypes) {
+                    let potential;
+                    switch (type) {
+                      case 'string':
+                        potential = String(value);
+                        break;
+                      case 'integer':
+                      case 'number':
+                        potential = Number(value);
+                        break;
+                      default:
+                        potential = value;
+                        break;
+                    }
+                    lastValidation = await definition.validator(potential);
+
+                    // Can be a string if validation fails
+                    if (lastValidation === true) {
+                      finalValue = potential;
+
+                      return true;
+                    }
                   }
-                }
-
-                return input;
-              };
-            }
-
-            switch (definition.type) {
-              case 'confirmation':
-                question.type = 'confirm';
-                break;
-              case 'list':
-                question.type = definition.multiselect ? 'checkbox' : 'list';
-                (question as CheckboxQuestion).choices = definition.items?.map((item) => {
-                  return typeof item == 'string'
-                    ? item
-                    : {
-                        name: item.label,
-                        value: item.value,
-                      };
-                });
-                break;
-              default:
-                question.type = definition.type;
-                break;
-            }
-
-            return question;
-          });
-
-        if (questions.length) {
-          const { default: inquirer } = await loadEsmModule<typeof import('inquirer')>('inquirer');
-
-          return inquirer.prompt(questions);
-        } else {
-          return {};
+
+                  return lastValidation;
+                },
+              });
+
+              // Use validated value if present.
+              // This ensures the correct type is inserted into the final schema options.
+              if (finalValue !== undefined) {
+                answers[definition.id] = finalValue;
+              }
+              break;
+          }
         }
+
+        return answers;
       });
     }
 

packages/angular/cli/src/utilities/prompt.ts

@@ -6,14 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import type {
-  CheckboxChoiceOptions,
-  CheckboxQuestion,
-  ListChoiceOptions,
-  ListQuestion,
-  Question,
-} from 'inquirer';
-import { loadEsmModule } from './load-esm';
 import { isTTY } from './tty';
 
 export async function askConfirmation(
@@ -25,64 +17,58 @@ export async function askConfirmation(
     return noTTYResponse ?? defaultResponse;
   }
 
-  const question: Question = {
-    type: 'confirm',
-    name: 'confirmation',
-    prefix: '',
+  const { confirm } = await import('@inquirer/prompts');
+  const answer = await confirm({
     message,
     default: defaultResponse,
-  };
+    theme: {
+      prefix: '',
+    },
+  });
 
-  const { default: inquirer } = await loadEsmModule<typeof import('inquirer')>('inquirer');
-  const answers = await inquirer.prompt([question]);
-
-  return answers['confirmation'];
+  return answer;
 }
 
 export async function askQuestion(
   message: string,
-  choices: ListChoiceOptions[],
+  choices: { name: string; value: string | null }[],
   defaultResponseIndex: number,
   noTTYResponse: null | string,
 ): Promise<string | null> {
   if (!isTTY()) {
     return noTTYResponse;
   }
 
-  const question: ListQuestion = {
-    type: 'list',
-    name: 'answer',
-    prefix: '',
+  const { select } = await import('@inquirer/prompts');
+  const answer = await select({
     message,
     choices,
     default: defaultResponseIndex,
-  };
-
-  const { default: inquirer } = await loadEsmModule<typeof import('inquirer')>('inquirer');
-  const answers = await inquirer.prompt([question]);
+    theme: {
+      prefix: '',
+    },
+  });
 
-  return answers['answer'];
+  return answer;
 }
 
 export async function askChoices(
   message: string,
-  choices: CheckboxChoiceOptions[],
+  choices: { name: string; value: string }[],
   noTTYResponse: string[] | null,
 ): Promise<string[] | null> {
   if (!isTTY()) {
     return noTTYResponse;
   }
 
-  const question: CheckboxQuestion = {
-    type: 'checkbox',
-    name: 'answer',
-    prefix: '',
+  const { checkbox } = await import('@inquirer/prompts');
+  const answers = await checkbox({
     message,
     choices,
-  };
-
-  const { default: inquirer } = await loadEsmModule<typeof import('inquirer')>('inquirer');
-  const answers = await inquirer.prompt([question]);
+    theme: {
+      prefix: '',
+    },
+  });
 
-  return answers['answer'];
+  return answers;
 }

tests/legacy-cli/e2e/tests/commands/analytics/ask-analytics-command.ts

@@ -14,7 +14,7 @@ export default async function () {
         NG_FORCE_TTY: '1',
         NG_FORCE_AUTOCOMPLETE: 'false',
       },
-      'y' /* stdin */,
+      'n\n' /* stdin */,
     );
 
     if (!ANALYTICS_PROMPT.test(stdout)) {

tests/legacy-cli/e2e/tests/commands/completion/completion-prompt.ts

@@ -48,7 +48,7 @@ export default async function () {
         SHELL: '/bin/bash',
         HOME: home,
       },
-      'y' /* stdin: accept prompt */,
+      'y\n' /* stdin: accept prompt */,
     );
 
     if (!AUTOCOMPLETION_PROMPT.test(stdout)) {
@@ -80,7 +80,7 @@ export default async function () {
         SHELL: '/bin/bash',
         HOME: home,
       },
-      'n' /* stdin: reject prompt */,
+      'n\n' /* stdin: reject prompt */,
     );
 
     if (!AUTOCOMPLETION_PROMPT.test(stdout)) {
@@ -118,7 +118,7 @@ export default async function () {
         SHELL: '/bin/bash',
         HOME: home,
       },
-      'y' /* stdin: accept prompt */,
+      'y\n' /* stdin: accept prompt */,
     );
 
     if (!AUTOCOMPLETION_PROMPT.test(stdout1)) {
@@ -171,7 +171,7 @@ export default async function () {
         SHELL: '/bin/bash',
         HOME: home,
       },
-      'n' /* stdin: reject prompt */,
+      'n\n' /* stdin: reject prompt */,
     );
 
     if (!AUTOCOMPLETION_PROMPT.test(stdout1)) {
@@ -217,7 +217,7 @@ export default async function () {
         SHELL: '/bin/bash',
         HOME: home,
       },
-      'y' /* stdin: accept prompt */,
+      'y\n' /* stdin: accept prompt */,
     );
 
     if (!err.message.includes('Failed to append autocompletion setup')) {
@@ -237,7 +237,7 @@ export default async function () {
         SHELL: '/bin/bash',
         HOME: home,
       },
-      'y' /* stdin: accept prompt */,
+      'y\n' /* stdin: accept prompt */,
     );
 
     if (!AUTOCOMPLETION_PROMPT.test(stdout2)) {