Crafting Recursive Prompts with Plop

When scaffolding new projects or features, repetitive tasks like file creation and boilerplate code can waste valuable time. That’s where Plop comes in—a micro-generator framework that helps automate these monotonous processes. Today, we’re diving into the world of recursive prompts in Plop, which allows you to interactively collect data in a loop based on user input.

What Are Recursive Prompts?

Recursive prompts enable you to repeatedly ask the user a series of questions until a certain condition is met. This is particularly useful when the required inputs are not fixed, such as adding an unknown number of items to a list.

Setting Up Plop

Before we begin, ensure you have Plop installed. You can add it to your project using npm:

npm install plop --save-dev

Next, create a plopfile.js at the root of your project. This file will define our generator and prompts.

Our Fictional Use Case: Magic Potion Ingredients

Imagine you’re creating a fantasy game where players can concoct magic potions. Each potion has a name, effect, and a list of ingredients that can vary in length. We want to generate a potion recipe file with all the necessary details.

Here’s how we can implement recursive prompts in our plopfile.js to collect potion information:

module.exports = function (plop) {
  plop.setGenerator('potion', {
    description: 'Create a new magic potion recipe',
    prompts: async function (inquirer) {
      const basicAnswers = await inquirer.prompt([
        {
          type: 'input',
          name: 'potionName',
          message: 'What is the name of the potion?',
        },
        {
          type: 'input',
          name: 'effect',
          message: 'What effect does the potion have?',
        },
      ]);

      let ingredients = [];
      let addIngredients = true;
      while (addIngredients) {
        const ingredientAnswers = await inquirer.prompt([
          {
            type: 'input',
            name: 'name',
            message: 'Ingredient name:'
          },
          {
            type: 'number',
            name: 'quantity',
            message: 'Quantity needed (in grams):'
          }
        ]);
        ingredients.push(ingredientAnswers);

        addIngredients = (await inquirer.prompt([
          {
            type: 'confirm',
            name: 'addMore',
            message: 'Would you like to add another ingredient?',
            default: false
          }
        ])).addMore;
      }

      return {
        ...basicAnswers,
        ingredients
      };
    },
    actions: [
      {
        type: 'add',
        path: 'potions/{{kebabCase potionName}}.json',
        templateFile: 'plop-templates/potion.json.hbs',
      }
    ]
  });
};

In this example, we use an asynchronous function for the prompts property. We first collect the potion’s name and effect. Then, we enter a while loop, asking the user for ingredient names and quantities, which we store in an array. We continue this loop until the user indicates they don’t want to add more ingredients.

Creating the Potion Recipe Template

Next, we need to create a Handlebars template file (potion.json.hbs) in a plop-templates directory:

{
  "name": "{{potionName}}",
  "effect": "{{effect}}",
  "ingredients": [
    {{#each ingredients}}
    {
      "name": "{{this.name}}",
      "quantity": {{this.quantity}}
    }{{#unless @last}},{{/unless}}
    {{/each}}
  ]
}

This template defines the structure of our potion recipe file using the data collected from the prompts.

Generating a Potion Recipe

With everything set up, run Plop with the following command and follow the interactive prompts to create your potion recipe:

npx plop potion

Conclusion

Recursive prompts in Plop offer a powerful way to interactively collect varying amounts of data. Using the asynchronous prompting approach, we’ve created a flexible system for generating custom potion recipes in our fictional game. Whether managing a fantasy game or a real-world project, Plop can help you automate and streamline your development process.