{{announcement.body}}
{{announcement.title}}

What is Plop?: File Generator Tool System

DZone 's Guide to

What is Plop?: File Generator Tool System

Plop is a file generator tool system which allows you to define a script file to generate all the boilerplate files for you.

· Web Dev Zone ·
Free Resource

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.

JavaScript
 






  • 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.

JavaScript
 




xxxxxxxxxx
1


 
1
<br />{{name}}
2
 
          


We will have the following 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:

test-components folder

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:

JavaScript
 




xxxxxxxxxx
1


 
1
test-components
2
 
          


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

JavaScript
 




xxxxxxxxxx
1


 
1
import { Action } from '@ngrx/store';
2
 
          
3
// constants
4
 
          
5
// actions
6
 
          
7
export type {{pascalCase fileName }}Actions =
8
;


constants.hbs

JavaScript
 




xxxxxxxxxx
1


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


actions.hbs

Java
 




xxxxxxxxxx
1
14


 
1
export class {{pascalCase actionName}} implements Action {
2
public readonly type = {{constantCase actionName}};
3
constructor(public payload) {}
4
}
5
 
          
6
export class {{pascalCase actionName}}Fail implements Action {
7
public readonly type = {{constantCase actionName}}_FAIL;
8
constructor(public payload) {}
9
}
10
 
          
11
export class {{pascalCase actionName}}Success implements Action {
12
public readonly type = {{constantCase actionName}}_SUCCESS;
13
constructor(public payload) {}
14
}


typeExport.hbs

Java
 




xxxxxxxxxx
1


 
1
| {{pascalCase actionName}}
2
| {{pascalCase actionName}}Success
3
| {{pascalCase actionName}}Fail


ploplfile.js

Java
 




xxxxxxxxxx
1
43


 
1
module.exports = function (plop) {
2
    plop.setGenerator('actions', {
3
        description: 'This will generate the actions file',
4
        prompts: [
5
            {
6
                type: 'input',
7
                name: 'fileName',
8
                message: 'type the name for your file'
9
            },
10
            {
11
                type: 'input',
12
                name: 'actionName',
13
                message: 'type the name for your action'
14
            }
15
        ],
16
        actions: [
17
            {
18
                type: 'add',
19
                path: '{{pascalCase fileName}}.actions.ts',
20
                templateFile: 'plop-templates/actions/main.hbs',
21
                skipIfExists: true
22
            },
23
            {
24
                type: 'append',
25
                path: '{{pascalCase fileName}}.actions.ts',
26
                pattern: /(\/\/ constants)/g,
27
                templateFile: 'plop-templates/actions/constants.hbs',
28
            },
29
            {
30
                type: 'append',
31
                path: '{{pascalCase fileName}}.actions.ts',
32
                pattern: /(\/\/ actions)/g,
33
                templateFile: 'plop-templates/actions/actions.hbs',
34
            },
35
            {
36
                type: 'append',
37
                path: '{{pascalCase fileName}}.actions.ts',
38
                pattern: /(export\s+type\s[\w]+\s=)/g,
39
                templateFile: 'plop-templates/actions/typeExport.hbs',
40
            }
41
        ]
42
    });
43
};


Link to the repo


Topics:
angular, boilerplate, file generator, plop, web dev

Published at DZone with permission of Arnau Silvestre . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}