Plop is a micro-generator framework that helps you create consistent and repeatable code snippets, files, or projects. It allows you to define templates and automate the creation of boilerplate code, making it easier to maintain consistency across your codebase.
File Generation
This feature allows you to generate files based on templates. In this example, a new component file is created using a Handlebars template. The user is prompted for the component name, and the file is generated in the specified path.
module.exports = function (plop) {
plop.setGenerator('component', {
description: 'Create a new component',
prompts: [
{
type: 'input',
name: 'name',
message: 'Component name?'
}
],
actions: [
{
type: 'add',
path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.js',
templateFile: 'plop-templates/component.hbs'
}
]
});
};Custom Actions
Plop allows you to define custom actions that can be executed as part of the generation process. In this example, a custom action type is defined and used in a generator.
module.exports = function (plop) {
plop.setActionType('customAction', function (answers, config, plop) {
// Custom action logic here
return 'Custom action executed';
});
plop.setGenerator('custom', {
description: 'Run a custom action',
prompts: [],
actions: [
{
type: 'customAction'
}
]
});
};Template Rendering
This feature allows you to render templates with dynamic data. In this example, a README file is generated using a Handlebars template, with the project name provided by the user.
module.exports = function (plop) {
plop.setGenerator('readme', {
description: 'Create a README file',
prompts: [
{
type: 'input',
name: 'projectName',
message: 'Project name?'
}
],
actions: [
{
type: 'add',
path: 'README.md',
templateFile: 'plop-templates/readme.hbs'
}
]
});
};Yeoman Generator is a scaffolding tool that allows you to create custom generators for project templates. It is more feature-rich and has a larger ecosystem compared to Plop, but it can be more complex to set up and use.
Hygen is a fast, scalable, and developer-friendly code generator that uses plain text templates. It is similar to Plop in terms of simplicity and ease of use, but it focuses more on speed and scalability.
Slush is a scaffolding tool that uses Gulp for code generation. It is similar to Plop in that it allows you to create custom generators, but it leverages the Gulp ecosystem for more advanced build and task automation capabilities.
Micro-generator framework that makes it easy for an entire team to create files with a level or uniformity.
Plop is essentially glue code between inquirer prompts and handlebar templates. You can also add your own handlebar helper methods and use them in your templates.
npm install -g plop
The main parts of a plop generator are the plop file (plopfile.js) and the templates. Templates can either be inline, or in separate files.
A basic plop file starts its life as a lowly node module that exports a function that accepts the plop object.
module.exports = function (plop) {};
The plop object offers two main functions (addHelper, setGenerator). addHelper is directly passed through to the handlebars method registerHelper. So if you are familiar with handlebars helpers, then you already know how this works.
module.exports = function (plop) {
plop.addHelper('upperCase', function (text) {
return text.toUpperCase();
});
};
Next we need to setup a generator using plop.setGenerator
The config object needs to include prompts and actions (description is optional). The prompts array is passed to inquirer. The actions array is a list of actions to take (described in greater detail below)
module.exports = function (plop) {
plop.setGenerator('test', {
description: 'this is a test',
prompts: [{
type: 'input',
name: 'name',
message: 'What is your name?',
validate: function (value) {
if ((/.+/).test(value)) { return true; }
return 'name is required';
}
}],
actions: [{
type: 'add',
path: 'folder/{{dashCase name}}.txt',
templateFile: 'templates/temp.txt'
}]
});
};
The plop.setGenerator config object includes an array of actions to take. There are two types of actions you can include (add and modify). Both types of actions require a path to take action on (all paths are based on the location of the plopfile), and a template to use.
Let's start with the simpler of the 2 actions, add.
The add action is used to (you guessed it) add files to your project. The path property is a handlebars template that will be used to create the file by name. The file contents will be determined by the template or templateFile property. As you've probably guessed, the template property is used for an inline template while the templateFile is a path to the template stored in a file somewhere else in the project. I suggest keeping your template files in a plop-templates folder at the root of the project.
The modify action is similar to add, but the main difference is that it will use a pattern property to find/replace text in the file specified by the path property. The pattern property should be a RegExp and capture groups can be used in the replacement template using $1, $2, etc. More details on modify can be found in the example folder.
There are a few helpers that I have found useful enough to include with plop. They are mostly case modifiers, but here is the complete list.
Once plop is installed, and you have created a generator, you are ready to run plop from the terminal. Running plop with no parameters will present you with a list of generators to pick from. You can also run plop [generatorName] to trigger a generator directly.
Because when you create your boilerplate separate from your code, you naturally put more thought into it.
Because saving your team (or yourself) 5-15 minutes when creating every route, component, controller, helper, test, view, etc... really adds up.
Because creating a new controller shouldn't mean copying another controller and stripping it of everything that is unique to it.
Yeoman is great and it does a fantastic job of scaffolding out an initial codebase for you. However, the initial codebase is just the beginning. I believe the true benefit to generators is not realized by saving a developer 40 hours in the beginning, but by saving a team days of work over the life of the project. Yes, yeoman has sub generators that do a similar job. However, if you're like me, you will continually tweak structure and code throughout the project till the sub generators that came built into your yeoman seed are no longer valid. These structures change as requirements change and code is refactored. So that got me thinking... you know, what I really want is for these generatorsto be part of the codebase. Plop does that for you.
FAQs
Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity
The npm package plop receives a total of 629,530 weekly downloads. As such, plop popularity was classified as popular.
We found that plop demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.