[CLI] Bump deps for next major version (#10405)

* Bump listr2

* Migrate implementation and update tests for listr2

* Migrate inquirer to inquirer/prompts

Author: eddeee888

.changeset/smooth-pans-walk.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/cli': major
+---
+
+Migrate inquirer to @inquirer/prompts

.changeset/tough-apricots-bake.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/cli': major
+---
+
+Bump listr2 to v9

packages/graphql-codegen-cli/package.json

@@ -55,17 +55,17 @@
     "@graphql-tools/load": "^8.1.0",
     "@graphql-tools/url-loader": "^8.0.0",
     "@graphql-tools/utils": "^10.0.0",
+    "@inquirer/prompts": "^7.8.2",
     "@whatwg-node/fetch": "^0.10.0",
     "chalk": "^4.1.0",
     "cosmiconfig": "^9.0.0",
     "debounce": "^2.0.0",
     "detect-indent": "^6.0.0",
     "graphql-config": "^5.1.1",
-    "inquirer": "^8.0.0",
     "is-glob": "^4.0.1",
     "jiti": "^2.3.0",
     "json-to-pretty-yaml": "^1.2.2",
-    "listr2": "^4.0.5",
+    "listr2": "^9.0.0",
     "log-symbols": "^4.0.0",
     "micromatch": "^4.0.5",
     "shell-quote": "^1.7.3",
@@ -78,7 +78,6 @@
   "devDependencies": {
     "@graphql-tools/merge": "9.0.6",
     "@parcel/watcher": "^2.1.0",
-    "@types/inquirer": "8.2.10",
     "@types/is-glob": "4.0.4",
     "@types/js-yaml": "4.0.9",
     "@types/micromatch": "^4.0.2",

packages/graphql-codegen-cli/src/codegen.ts

@@ -397,8 +397,17 @@ export async function executeCodegen(
                     },
                   ],
                   {
-                    // it stops when of the tasks failed
+                    /**
+                     * For each `generates` task, we must do the following in order:
+                     *
+                     * 1. Load schema
+                     * 2. Load documents
+                     * 3. Generate based on the schema + documents
+                     *
+                     * This way, the 3rd step has all the schema and documents loaded in previous steps to work correctly
+                     */
                     exitOnError: true,
+                    concurrent: false,
                   }
                 );
               },
@@ -414,13 +423,13 @@ export async function executeCodegen(
     {
       rendererOptions: {
         clearOutput: false,
-        collapse: true,
+        collapseSubtasks: true,
         formatOutput: 'wrap',
         removeEmptyLines: false,
       },
       renderer: config.verbose ? 'verbose' : 'default',
       ctx: { errors: [] },
-      rendererSilent: isTest || config.silent,
+      silentRendererCondition: isTest || config.silent,
       exitOnError: true,
     }
   );

packages/graphql-codegen-cli/src/init/index.ts

@@ -1,9 +1,8 @@
 import { Types } from '@graphql-codegen/plugin-helpers';
-import inquirer from 'inquirer';
 import { bold, writeConfig, writePackage } from './helpers.js';
-import { getQuestions } from './questions.js';
+import { getAnswers } from './questions.js';
 import { guessTargets } from './targets.js';
-import { Answers, Tags } from './types.js';
+import { Tags } from './types.js';
 
 function log(...msgs: string[]) {
   // eslint-disable-next-line no-console
@@ -17,8 +16,7 @@ export async function init() {
   `);
 
   const possibleTargets = await guessTargets();
-
-  const answers = await inquirer.prompt<Answers>(getQuestions(possibleTargets));
+  const answers = await getAnswers(possibleTargets);
 
   // define config
   const config: Types.Config = {

packages/graphql-codegen-cli/src/init/questions.ts

@@ -1,98 +1,92 @@
-import inquirer from 'inquirer';
+import { checkbox, input, select, confirm } from '@inquirer/prompts';
 import { grey } from './helpers.js';
 import { plugins } from './plugins.js';
-import { Answers, Tags } from './types.js';
+import { type Answers, type PluginOption, Tags } from './types.js';
 
-export function getQuestions(possibleTargets: Record<Tags, boolean>): inquirer.QuestionCollection {
-  return [
-    {
-      type: 'list',
-      name: 'targets',
+export async function getAnswers(possibleTargets: Record<Tags, boolean>): Promise<Answers> {
+  try {
+    const targetChoices = getApplicationTypeChoices(possibleTargets);
+
+    const targets = await select({
       message: `What type of application are you building?`,
-      choices: getApplicationTypeChoices(possibleTargets),
-      validate: ((targets: any[]) => targets.length > 0) as any,
-      default: getApplicationTypeChoices(possibleTargets).findIndex(c => c.checked),
-    },
-    {
-      type: 'input',
-      name: 'schema',
-      message: 'Where is your schema?:',
-      suffix: grey(' (path or url)'),
+      choices: targetChoices,
+      default: targetChoices.find(c => c.checked)?.value,
+    });
+    const schema = await input({
+      message: `Where is your schema?: ${grey('(path or url)')}`,
       default: 'http://localhost:4000', // matches Apollo Server's default
-      validate: (str: string) => str.length > 0,
-    },
-    {
-      type: 'input',
-      name: 'documents',
-      message: 'Where are your operations and fragments?:',
-      when: answers => {
-        // flatten targets
-        // I can't find an API in Inquirer that would do that
-        answers.targets = normalizeTargets(answers.targets);
+      validate: str => str.length > 0,
+    });
 
-        return (
-          answers.targets.includes(Tags.client) ||
-          answers.targets.includes(Tags.angular) ||
-          answers.targets.includes(Tags.stencil)
-        );
-      },
-      default: getDocumentsDefaultValue,
-      validate: (str: string) => str.length > 0,
-    },
-    {
-      type: 'checkbox',
-      name: 'plugins',
-      when: answers => {
-        // flatten targets
-        // I can't find an API in Inquirer that would do that
-        answers.targets = normalizeTargets(answers.targets);
+    let documents: string | undefined;
+    if (targets.includes(Tags.client) || targets.includes(Tags.angular) || targets.includes(Tags.stencil))
+      documents = await input({
+        message: 'Where are your operations and fragments?:',
+        default: getDocumentsDefaultValue(targets),
+        validate: str => str.length > 0,
+      });
 
-        return !answers.targets.includes(Tags.client);
-      },
-      message: 'Pick plugins:',
-      choices: getPluginChoices,
-      validate: ((plugins: any[]) => plugins.length > 0) as any,
-    },
-    {
-      type: 'input',
-      name: 'output',
+    let plugins: PluginOption[];
+    if (!targets.includes(Tags.client)) {
+      plugins = await checkbox({
+        message: 'Pick plugins:',
+        choices: getPluginChoices(targets),
+        validate: plugins => plugins.length > 0,
+      });
+    }
+
+    const output = await input({
       message: 'Where to write the output:',
-      default: getOutputDefaultValue,
-      validate: (str: string) => str.length > 0,
-    },
-    {
-      type: 'confirm',
-      name: 'introspection',
-      default: false,
+      default: getOutputDefaultValue({ targets, plugins }),
+      validate: str => str.length > 0,
+    });
+
+    const introspection = await confirm({
       message: 'Do you want to generate an introspection file?',
-    },
-    {
-      type: 'input',
-      name: 'config',
+      default: false,
+    });
+
+    const config = await input({
       message: 'How to name the config file?',
-      default: answers =>
-        answers.targets.includes(Tags.client) ||
-        answers.targets.includes(Tags.typescript) ||
-        answers.targets.includes(Tags.angular)
+      default: (() =>
+        targets.includes(Tags.client) || targets.includes(Tags.typescript) || targets.includes(Tags.angular)
           ? 'codegen.ts'
-          : 'codegen.yml',
-      validate: (str: string) => {
+          : 'codegen.yml')(),
+      validate: str => {
         const isNotEmpty = str.length > 0;
         const hasCorrectExtension = ['json', 'yml', 'yaml', 'js', 'ts'].some(ext =>
           str.toLocaleLowerCase().endsWith(`.${ext}`)
         );
 
         return isNotEmpty && hasCorrectExtension;
       },
-    },
-    {
-      type: 'input',
-      name: 'script',
+    });
+
+    const script = await input({
       default: 'codegen',
       message: 'What script in package.json should run the codegen?',
       validate: (str: string) => str.length > 0,
-    },
-  ];
+    });
+
+    return {
+      targets,
+      schema,
+      documents,
+      plugins,
+      output,
+      introspection,
+      config,
+      script,
+    };
+  } catch (error) {
+    if (error instanceof Error && error.name === 'ExitPromptError') {
+      // This error because user exited using CMD+C, just exit gracefully or else user would see an ugly error message
+      // https://github.com/SBoudrias/Inquirer.js/blob/ee16061a1e3f99a6cc714a3d473f7cd12b06a3f1/packages/prompts/README.md#handling-ctrlc-gracefully
+      process.exit();
+    } else {
+      throw error;
+    }
+  }
 }
 
 export function getApplicationTypeChoices(possibleTargets: Record<Tags, boolean>) {
@@ -154,43 +148,39 @@ export function getApplicationTypeChoices(possibleTargets: Record<Tags, boolean>
   ];
 }
 
-export function getPluginChoices(answers: Answers) {
+export function getPluginChoices(targets: Tags[]) {
   return plugins
-    .filter(p => p.available(answers.targets))
-    .map<inquirer.DistinctChoice<inquirer.AllChoiceMap>>(p => {
+    .filter(p => p.available(targets))
+    .map(p => {
       return {
         name: p.name,
         value: p,
-        checked: p.shouldBeSelected(answers.targets),
+        checked: p.shouldBeSelected(targets),
       };
     });
 }
 
-function normalizeTargets(targets: Tags[] | Tags[][]): Tags[] {
-  return [].concat(...targets);
-}
-
-export function getOutputDefaultValue(answers: Answers) {
-  if (answers.targets.includes(Tags.client)) {
+function getOutputDefaultValue({ targets, plugins }: { targets: Tags[]; plugins: PluginOption[] }) {
+  if (targets.includes(Tags.client)) {
     return 'src/gql/';
   }
-  if (answers.plugins.some(plugin => plugin.defaultExtension === '.tsx')) {
+  if (plugins.some(plugin => plugin.defaultExtension === '.tsx')) {
     return 'src/generated/graphql.tsx';
   }
-  if (answers.plugins.some(plugin => plugin.defaultExtension === '.ts')) {
+  if (plugins.some(plugin => plugin.defaultExtension === '.ts')) {
     return 'src/generated/graphql.ts';
   }
   return 'src/generated/graphql.js';
 }
 
-export function getDocumentsDefaultValue(answers: Answers) {
-  if (answers.targets.includes(Tags.vue)) {
+function getDocumentsDefaultValue(targets: Tags[]): string {
+  if (targets.includes(Tags.vue)) {
     return 'src/**/*.vue';
   }
-  if (answers.targets.includes(Tags.angular)) {
+  if (targets.includes(Tags.angular)) {
     return 'src/**/*.ts';
   }
-  if (answers.targets.includes(Tags.client)) {
+  if (targets.includes(Tags.client)) {
     return 'src/**/*.tsx';
   }
   return 'src/**/*.graphql';

packages/graphql-codegen-cli/tests/__snapshots__/init.spec.ts.snap

@@ -99,7 +99,7 @@ export default config;
 "
 `;
 
-exports[`init should have few default values 1`] = `
+exports[`init should have few default values for Angular 1`] = `
 "
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
@@ -119,7 +119,7 @@ export default config;
 "
 `;
 
-exports[`init should have few default values 2`] = `
+exports[`init should have few default values for React 1`] = `
 "overwrite: true
 schema: "./schema.ts"
 documents: "graphql/**/*.graphql"