refactor: replace inquirer with prompts

prompts is much smaller than inquirer, so this should help in installing the CLI faster.

Author: satya164

package.json

@@ -47,9 +47,9 @@
     "fs-extra": "^9.0.1",
     "github-username": "^5.0.1",
     "glob": "^7.1.6",
-    "inquirer": "^7.0.4",
     "is-git-dirty": "^2.0.1",
     "json5": "^2.1.3",
+    "prompts": "^2.4.0",
     "validate-npm-package-name": "^3.0.0",
     "which": "^2.0.2",
     "yargs": "^15.3.1"
@@ -70,8 +70,8 @@
     "@types/ejs": "^3.0.4",
     "@types/fs-extra": "^9.0.1",
     "@types/glob": "^7.1.2",
-    "@types/inquirer": "^6.5.0",
     "@types/json5": "^0.0.30",
+    "@types/prompts": "^2.0.9",
     "@types/validate-npm-package-name": "^3.0.0",
     "@types/which": "^1.3.2",
     "@types/yargs": "^15.0.5",

src/cli.ts

@@ -2,10 +2,10 @@ import path from 'path';
 import fs from 'fs-extra';
 import chalk from 'chalk';
 import yargs from 'yargs';
-import inquirer from 'inquirer';
 import { cosmiconfigSync } from 'cosmiconfig';
 import isGitDirty from 'is-git-dirty';
 import create, { args as CreateArgs } from './create';
+import prompts, { PromptObject } from './utils/prompts';
 import * as logger from './utils/logger';
 import buildAAR from './targets/aar';
 import buildCommonJS from './targets/commonjs';
@@ -30,11 +30,11 @@ yargs
     const pak = path.join(root, 'package.json');
 
     if (isGitDirty()) {
-      const { shouldContinue } = await inquirer.prompt({
+      const { shouldContinue } = await prompts({
         type: 'confirm',
         name: 'shouldContinue',
         message: `The working directory is not clean. You should commit or stash your changes before configuring bob. Continue anyway?`,
-        default: false,
+        initial: false,
       });
 
       if (!shouldContinue) {
@@ -48,11 +48,11 @@ yargs
       );
     }
 
-    const { source } = await inquirer.prompt({
-      type: 'input',
+    const { source } = await prompts({
+      type: 'text',
       name: 'source',
       message: 'Where are your source files?',
-      default: 'src',
+      initial: 'src',
       validate: (input) => Boolean(input),
     });
 
@@ -74,21 +74,41 @@ yargs
     }
 
     const pkg = JSON.parse(await fs.readFile(pak, 'utf-8'));
-    const questions: inquirer.Question[] = [
+    const questions: PromptObject[] = [
       {
-        type: 'input',
+        type: 'text',
         name: 'output',
         message: 'Where do you want to generate the output files?',
-        default: 'lib',
-        validate: (input) => Boolean(input),
+        initial: 'lib',
+        validate: (input: string) => Boolean(input),
       },
       {
-        type: 'checkbox',
+        type: 'multiselect',
         name: 'targets',
         message: 'Which targets do you want to build?',
-        // @ts-ignore
-        choices: ['aar', 'commonjs', 'module', 'typescript'],
-        validate: (input) => Boolean(input.length),
+        choices: [
+          {
+            title: 'commonjs - for running in Node (tests, SSR etc.)',
+            value: 'commonjs',
+            selected: true,
+          },
+          {
+            title: 'module - for bundlers (metro, webpack etc.)',
+            value: 'module',
+            selected: true,
+          },
+          {
+            title: 'typescript - declaration files for typechecking',
+            value: 'typescript',
+            selected: /\.tsx?$/.test(entryFile),
+          },
+          {
+            title: 'aar - bundle android code to a binary',
+            value: 'aar',
+            selected: false,
+          },
+        ],
+        validate: (input: string) => Boolean(input.length),
       },
     ];
 
@@ -102,11 +122,11 @@ yargs
         type: 'confirm',
         name: 'flow',
         message: 'Do you want to publish definitions for flow?',
-        default: Object.keys(pkg.devDependencies || {}).includes('flow-bin'),
+        initial: Object.keys(pkg.devDependencies || {}).includes('flow-bin'),
       });
     }
 
-    const { output, targets, flow } = await inquirer.prompt(questions);
+    const { output, targets, flow } = await prompts(questions);
 
     const target =
       targets[0] === 'commonjs' || targets[0] === 'module'
@@ -128,11 +148,11 @@ yargs
       entries.types = path.join(output, 'typescript', source, 'index.d.ts');
 
       if (!(await fs.pathExists(path.join(root, 'tsconfig.json')))) {
-        const { tsconfig } = await inquirer.prompt({
+        const { tsconfig } = await prompts({
           type: 'confirm',
           name: 'tsconfig',
           message: `You have enabled 'typescript' compilation, but we couldn't find a 'tsconfig.json' in project root. Generate one?`,
-          default: true,
+          initial: true,
         });
 
         if (tsconfig) {
@@ -182,11 +202,11 @@ yargs
       const entry = entries[key];
 
       if (pkg[key] && pkg[key] !== entry) {
-        const { replace } = await inquirer.prompt({
+        const { replace } = await prompts({
           type: 'confirm',
           name: 'replace',
           message: `Your package.json has the '${key}' field set to '${pkg[key]}'. Do you want to replace it with '${entry}'?`,
-          default: true,
+          initial: true,
         });
 
         if (replace) {
@@ -198,11 +218,11 @@ yargs
     }
 
     if (pkg.scripts && pkg.scripts.prepare && pkg.scripts.prepare !== prepare) {
-      const { replace } = await inquirer.prompt({
+      const { replace } = await prompts({
         type: 'confirm',
         name: 'replace',
         message: `Your package.json has the 'scripts.prepare' field set to '${pkg.scripts.prepare}'. Do you want to replace it with '${prepare}'?`,
-        default: true,
+        initial: true,
       });
 
       if (replace) {
@@ -218,11 +238,11 @@ yargs
       JSON.stringify(pkg.files.slice().sort()) !==
         JSON.stringify(files.slice().sort())
     ) {
-      const { update } = await inquirer.prompt({
+      const { update } = await prompts({
         type: 'confirm',
         name: 'update',
         message: `Your package.json already has a 'files' field. Do you want to update it?`,
-        default: true,
+        initial: true,
       });
 
       if (update) {

src/create.ts

@@ -3,11 +3,11 @@ import fs from 'fs-extra';
 import ejs from 'ejs';
 import dedent from 'dedent';
 import chalk from 'chalk';
-import inquirer from 'inquirer';
 import type yargs from 'yargs';
 import spawn from 'cross-spawn';
 import validateNpmPackage from 'validate-npm-package-name';
 import githubUsername from 'github-username';
+import prompts, { PromptObject } from './utils/prompts';
 import pack from '../package.json';
 
 const BINARIES = /(gradlew|\.(jar|keystore|png|jpg|gif))$/;
@@ -140,11 +140,17 @@ export default async function create(argv: yargs.Arguments<any>) {
 
   const basename = path.basename(argv.name);
 
-  const questions: Record<ArgName, inquirer.Question> = {
+  const questions: Record<
+    ArgName,
+    Omit<PromptObject<keyof Answers>, 'validate'> & {
+      validate?: (value: string) => boolean | string;
+    }
+  > = {
     'slug': {
-      type: 'input',
+      type: 'text',
+      name: 'slug',
       message: 'What is the name of the npm package?',
-      default: validateNpmPackage(basename).validForNewPackages
+      initial: validateNpmPackage(basename).validForNewPackages
         ? /^(@|react-native)/.test(basename)
           ? basename
           : `react-native-${basename}`
@@ -154,29 +160,34 @@ export default async function create(argv: yargs.Arguments<any>) {
         'Must be a valid npm package name',
     },
     'description': {
-      type: 'input',
+      type: 'text',
+      name: 'description',
       message: 'What is the description for the package?',
-      validate: (input) => Boolean(input),
+      validate: (input) => Boolean(input) || 'Cannot be empty',
     },
     'author-name': {
-      type: 'input',
+      type: 'text',
+      name: 'authorName',
       message: 'What is the name of package author?',
-      default: name,
-      validate: (input) => Boolean(input),
+      initial: name,
+      validate: (input) => Boolean(input) || 'Cannot be empty',
     },
     'author-email': {
-      type: 'input',
+      type: 'text',
+      name: 'authorEmail',
       message: 'What is the email address for the package author?',
-      default: email,
+      initial: email,
       validate: (input) =>
         /^\S+@\S+$/.test(input) || 'Must be a valid email address',
     },
     'author-url': {
-      type: 'input',
+      type: 'text',
+      name: 'authorUrl',
       message: 'What is the URL for the package author?',
-      default: async (answers: any) => {
+      // @ts-ignore: this is supported, but types are wrong
+      initial: async (previous: string) => {
         try {
-          const username = await githubUsername(answers.authorEmail);
+          const username = await githubUsername(previous);
 
           return `https://github.com/${username}`;
         } catch (e) {
@@ -188,39 +199,46 @@ export default async function create(argv: yargs.Arguments<any>) {
       validate: (input) => /^https?:\/\//.test(input) || 'Must be a valid URL',
     },
     'repo-url': {
-      type: 'input',
+      type: 'text',
+      name: 'repoUrl',
       message: 'What is the URL for the repository?',
-      default: (answers: any) => {
+      // @ts-ignore: this is supported, but types are wrong
+      initial: (_: string, answers: Answers) => {
         if (/^https?:\/\/github.com\/[^/]+/.test(answers.authorUrl)) {
           return `${answers.authorUrl}/${answers.slug
             .replace(/^@/, '')
             .replace(/\//g, '-')}`;
         }
 
-        return undefined;
+        return '';
       },
       validate: (input) => /^https?:\/\//.test(input) || 'Must be a valid URL',
     },
     'type': {
-      type: 'list',
+      type: 'select',
+      name: 'type',
       message: 'What type of package do you want to develop?',
-      // @ts-ignore - seems types are wrong for inquirer
       choices: [
-        { name: 'Native module in Kotlin and Objective-C', value: 'native' },
-        { name: 'Native module in Kotlin and Swift', value: 'native-swift' },
-        { name: 'Native module with C++ code', value: 'cpp' },
-        { name: 'Native view in Kotlin and Objective-C', value: 'native-view' },
-        { name: 'Native view in Kotlin and Swift', value: 'native-view-swift' },
+        { title: 'Native module in Kotlin and Objective-C', value: 'native' },
+        { title: 'Native module in Kotlin and Swift', value: 'native-swift' },
+        { title: 'Native module with C++ code', value: 'cpp' },
+        {
+          title: 'Native view in Kotlin and Objective-C',
+          value: 'native-view',
+        },
         {
-          name: 'JavaScript library with native example',
+          title: 'Native view in Kotlin and Swift',
+          value: 'native-view-swift',
+        },
+        {
+          title: 'JavaScript library with native example',
           value: 'js',
         },
         {
-          name: 'JavaScript library with Expo example and Web support',
+          title: 'JavaScript library with Expo example and Web support',
           value: 'expo',
         },
       ],
-      default: 'native',
     },
   };
 
@@ -234,19 +252,15 @@ export default async function create(argv: yargs.Arguments<any>) {
     type,
   } = {
     ...argv,
-    ...(await inquirer.prompt(
-      Object.entries(questions).map(([key, value]) => ({
-        ...value,
-        name: key.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase()),
-        when: !(argv[key] && value.validate
-          ? value.validate(argv[key]) === true
-          : Boolean(argv[key])),
-        default:
-          typeof value.default === 'function'
-            ? (answers: Partial<Answers>) =>
-                value.default({ ...argv, ...answers })
-            : value.default,
-      }))
+    ...(await prompts(
+      Object.entries(questions)
+        .filter(
+          ([k, v]) =>
+            !(argv[k] && v.validate
+              ? v.validate(argv[k]) === true
+              : Boolean(argv[k]))
+        )
+        .map(([, v]) => v)
     )),
   } as Answers;
 

src/utils/logger.ts

@@ -7,7 +7,7 @@ const logger = (type: string, color: Function) => (...messages: unknown[]) => {
 export const info = logger('ℹ', chalk.blue);
 export const warn = logger('⚠', chalk.yellow);
 export const error = logger('✖', chalk.red);
-export const success = logger('✓', chalk.green);
+export const success = logger('✔', chalk.green);
 
 export const exit = (...messages: unknown[]) => {
   error(...messages);

src/utils/prompts.ts

@@ -0,0 +1,17 @@
+import promptsModule from 'prompts';
+
+export default function prompts(
+  args: promptsModule.PromptObject | promptsModule.PromptObject[],
+  options?: promptsModule.Options
+) {
+  return promptsModule(args, {
+    onCancel() {
+      process.exit(1);
+    },
+    ...options,
+  });
+}
+
+export type PromptObject<
+  T extends string = string
+> = promptsModule.PromptObject<T>;