← Back to archive

Repo of the Day

plopjs/plop

Published: Mar 7, 2024

Open repository ↗

Consistency Made Simple - kind like a mini yeoman generator that helps you generate files consistently across a team. I saw it used in the Bulletproof react codebase for generating components for the FE.

Summary

Plop is a JavaScript micro-generator framework for creating files with a consistent structure across a team. According to the README, it works as "glue code between inquirer prompts and handlebar templates," letting engineers define templates once and reuse them whenever a new file (like a controller or component) is needed.

What it is useful for

Plop helps teams that repeatedly create similar file structures—controllers, components, routes, helpers, tests, views—keep every new file aligned with the current "best practice" without hunting through the codebase for an example to copy. The README describes this as turning "the right way" into "the easiest way" to make new files, which reduces context switching and prevents drift between similar pieces of code. A generator can run multiple actions in sequence, so one command can create several related files at once, and custom action types can be registered to do work beyond plain file creation.

How engineers can use it

The README documents the following setup:

  1. Install locally: npm install --save-dev plop

  2. Optionally install globally for CLI access: npm install -g plop

  3. Create a plopfile.js at the project root. The file exports a function that receives a plop API object:

    export default function (plop) {
      plop.setGenerator("controller", {
        description: "application controller logic",
        prompts: [{ type: "input", name: "name", message: "controller name please" }],
        actions: [{ type: "add", path: "src/{{name}}.js", templateFile: "plop-templates/controller.hbs" }],
      });
    }
    

    prompts use Inquirer questions, and actions describe what to do, such as add to write a new file from a Handlebars template. The same file can also register Handlebars helpers, partials, and custom action types via setHelper, setPartial, and setActionType.

From the terminal, run plop to pick a generator interactively, or plop controller to run one directly. You can bypass prompts with positional arguments—plop component "my component" react—or use the --force flag to overwrite existing files. TypeScript plopfiles are supported natively on Node.js v22.18+; older versions require the tsx loader setup described in the README.

The README notes that the documentation is "a work in progress," and the version supplied here is truncated, so the full list of built-in actions and interface details should be confirmed against the documentation at plopjs.com.