What is Plop – File Generator Tool System

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

What is Plop?

Plop is a file generator tool system which allows you to define a script file to generate all the boilerplate files for you. Similar in how Angular schematics works, you can define a set of actions who would generate all the pre-defined code for you either automatically or by answering to some CLI prompts.

First you will need to define a plopfile.js who would contain a function who would receive a plop object with access to all the methods to generate the code.

module.exports = function (plop) {
    plop.setGenerator('components', {
        description: 'This will generate the components folder',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'type the name for your components folder'
        }],
        actions: [{
            type: 'add',
            path: 'src/components/{{name}}.component.js',
            templateFile: 'plop-templates/components.hbs'
        }]
    });
};
  • First of all we will use the .setGenerator function using 'components' as the generator name, so if we want to trigger this generator we would use plop components.
  • Then, in the prompts array, we will define a array of InquirerQuestion we could later use the input values for these question as parameters in our templates.
  • Finally, actions, who accept a array of ActionConfig, these actions will act on the files we will create and adapt them according to our needs.

We will also need to add a new folder were we will store our template, I will call it plop-templates and add a new file components.hbs.

<br />{{name}}

We will have the following structure:


Conversion Post EN

initial folder structure

Now if we jump into the console in within our folder where we have the plopfile file and type plop components we will be asked 'type the name for your components folder' which is the message we defined in the message key for th object of the prompts array. After answering it will generate a folder with the answer we provided, in my case was test-components.

After this we will have the following structure:

folder structure

And if we open the generated test-components.js we will see that the {{name}} variable has been modified with the name we provided in the console:

test-components

When to use Plop

Now that we saw a simple example of how it works we can start creating more complex templates to automate our task. For example, we will create a new generator to generate all our Redux boilerplate for us.

main.hbs

import { Action } from '@ngrx/store';
// constants
// actions
export type {{pascalCase fileName }}Actions =
;

constants.hbs

export const {{constantCase actionName}} = '[Talents] {{actionName}}';
export const {{constantCase actionName}}_FAIL = '[Talents] {{actionName}} Fail';
export const {{constantCase actionName}}_SUCCESS = '[Talents] {{actionName}} Success';

actions.hbs

export class {{pascalCase actionName}} implements Action {
public readonly type = {{constantCase actionName}};
constructor(public payload) {}
}
export class {{pascalCase actionName}}Fail implements Action {
public readonly type = {{constantCase actionName}}_FAIL;
constructor(public payload) {}
}
export class {{pascalCase actionName}}Success implements Action {
public readonly type = {{constantCase actionName}}_SUCCESS;
constructor(public payload) {}
}

typeExport.hbs

| {{pascalCase actionName}}
| {{pascalCase actionName}}Success
| {{pascalCase actionName}}Fail

ploplfile.js

module.exports = function (plop) {
    plop.setGenerator('actions', {
        description: 'This will generate the actions file',
        prompts: [
            {
                type: 'input',
                name: 'fileName',
                message: 'type the name for your file'
            },
            {
                type: 'input',
                name: 'actionName',
                message: 'type the name for your action'
            }
        ],
        actions: [
            {
                type: 'add',
                path: '{{pascalCase fileName}}.actions.ts',
                templateFile: 'plop-templates/actions/main.hbs',
                skipIfExists: true
            },
            {
                type: 'append',
                path: '{{pascalCase fileName}}.actions.ts',
                pattern: /(\/\/ constants)/g,
                templateFile: 'plop-templates/actions/constants.hbs',
            },
            {
                type: 'append',
                path: '{{pascalCase fileName}}.actions.ts',
                pattern: /(\/\/ actions)/g,
                templateFile: 'plop-templates/actions/actions.hbs',
            },
            {
                type: 'append',
                path: '{{pascalCase fileName}}.actions.ts',
                pattern: /(export\s+type\s[\w]+\s=)/g,
                templateFile: 'plop-templates/actions/typeExport.hbs',
            }
        ]
    });
};

Link to the repo

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Get updates from our latest tech findings

About Apiumhub

Apiumhub brings together a community of software developers & architects to help you transform your idea into a powerful and scalable product. Our Tech Hub specialises in Software ArchitectureWeb Development & Mobile App Development. Here we share with you industry tips & best practices, based on our experience.

Popular posts​
Download Grow Professionally: Inside Apiumhub's Dev Team

Are you Data Driven?

Let's build your success together.

Talk to us

Have a challenging project?

We Can Work On It Together