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:
-
Install locally:
npm install --save-dev plop -
Optionally install globally for CLI access:
npm install -g plop -
Create a
plopfile.jsat the project root. The file exports a function that receives aplopAPI 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" }], }); }promptsuse Inquirer questions, andactionsdescribe what to do, such asaddto write a new file from a Handlebars template. The same file can also register Handlebars helpers, partials, and custom action types viasetHelper,setPartial, andsetActionType.
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.