`inquirer` package in Puck codebase.

In this article, we review inquirer package in Puck codebase. We will look at:

1. What is inquirer package?

2. Usage in Puck codebase

What is inquirer package?

Inquirer.js is a collection of common interactive command line user interfaces.

[!IMPORTANT] This is the legacy version of Inquirer.js. While it still receives maintenance, it is not actively developed. For the new Inquirer, see @inquirer/prompts.

Inquirer.js should ease the process of

• providing error feedback

• asking questions

• parsing input

• validating answers

• managing hierarchical prompts

examples folder demonstrates how Inquirer can be used.

Below is an input.mjs example:

 
/**
 * Input prompt example
 */
 
import inquirer from '../dist/esm/index.js';
 
const questions = [
  {
    type: 'input',
    name: 'first_name',
    message: "What's your first name",
  },
  {
    type: 'input',
    name: 'last_name',
    message: "What's your last name",
    default() {
      return 'Doe';
    },
  },
  {
    type: 'input',
    name: 'fav_color',
    message: "What's your favorite color",
    transformer(color, answers, flags) {
      if (flags.isFinal) {
        return color + '!';
      }
 
      return color;
    },
  },
  {
    type: 'input',
    name: 'phone',
    message: "What's your phone number",
    validate(value) {
      const pass = value.match(
        /^([01])?[\s.-]?\(?(\d{3})\)?[\s.-]?(\d{3})[\s.-]?(\d{4})\s?((?:#|ext\.?\s?|x\.?\s?)(?:\d+)?)?$/i,
      );
      if (pass) {
        return true;
      }
 
      return 'Please enter a valid phone number';
    },
  },
];
 
inquirer.prompt(questions).then((answers) => {
  console.log(JSON.stringify(answers, null, '  '));
});

Learn more about Inquirer.

Usage in Puck codebase

At line 100, in puck/packages/create-puck-app/index.js, you will find the following code:

const questions = [
      ...beforeQuestions,
      {
        type: "list",
        name: "recipe",
        message: "Which recipe would you like to use?",
        required: true,
        default: "next",
        choices: [
          {
            name: "Next.js",
            value: "next",
          },
          {
            name: "React Router",
            value: "react-router",
          },
          {
            name: "Remix",
            value: "remix",
          },
        ],
      },
    ];
const answers = await inquirer.prompt(questions);
const appName = answers.appName || _appName;
const recipe = answers.recipe;

inquirer is imported at line 6 as shown below:

import inquirer from "inquirer";

This is used in combination with commander package to build the CLI, create-puck-app.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/puckeditor/puck/blob/main/packages/create-puck-app/index.js#L6

2. https://www.npmjs.com/package/inquirer

3. https://github.com/SBoudrias/Inquirer.js/blob/main/packages/inquirer/examples/