Previously, I talked about how Plop can help increase productivity when coding by reducing context switching. In this article, we’ll dive into an example and configure a Plop generator to create a React component in Typescript. By the end, you’ll be able to start using Plop to build your own generators for any type of project and reap the productivity benefits! Before we start Please ensure you have and the npm CLI installed (optionally yarn) and that npm (and yarn) is available on the PATH environment variable. Node.js I will use yarn in my examples but these can all be substituted for the equivalent npm command. With that out of the way, let’s begin. 1. Create the project Create a new project using typescript: create-react-app yarn create react-app plop_example_project --template=typescript 2. Install Plop We will install Plop as a development dependency within the project. It is possible to install globally making command line access marginally easier, but I prefer to keep projects self-contained wherever possible to reduce the potential for conflict with other projects. So, installing within the project, type the following in the console: yarn add plop --dev This will add the development dependency to your project. 3. Add a ‘plop’ script Since we have created a local copy, we need to call Plop via the npm scripts. Add the “plop” script to the file: package.json {  
  ..., : {    
    ..., : },
  ...
} "scripts" "plop" "plop" 4. Create the template files The templates are simply files ( ) which, at their most basic level, take a set of variables and transform them into a text output. As the name suggests, the placeholders for each variable appear in the template between which then get replaced with supplied values when the script is called. The filenames can also include placeholders, something that we’ll take advantage of in this example. handlebars *.hbs {{handlebars}} We will create three template files: {{name}}.tsx.hbs {{name}}.module.css.hbs {{name}}.test.tsx.hbs Note that the file names take a variable between handlebars followed by a file extension. When the generator runs, the extension will be removed and the populated, leaving us with a filename that fully represents our intended file type. name .hbs name Create a new directory and create the three templates, inserting the following code: plop_templates/component {{name}}.tsx.hbs import React, { ReactElement, HTMLProps } from 'react';

import classes from './ {{name}} .module.scss';

export interface {{name}} Props extends HTMLProps < {{type}} > {
  
}

export default (props: {{name}} Props): ReactElement < {{type}} > => {
  return ( < {{tag}} = > className {classes.Root} </ {{tag}} >
  );
} {{name}}.module.css.hbs .Root {

} {{name}}.test.tsx.hbs import React from 'react';
import { render } from '@testing-library/react';
import {{name}} from './ {{name}} ';

test('renders', () => {
  render( < {{name}} />);
}); These three files represent the simplest form any component will take. They use three variables: The name of the component name — The element type according to the , usually a subtype of , e.g. type — HTML DOM API HTMLElement HTMLDivElement The HTML tag name, e.g. tag — div The values for these variables are defined when the plop script is called, described in step 6. 5. Create the config file Now we’ll tie the templates and Plop CLI together to form our generator. We do this by creating a file in the root of our project and populating like so: plopfile.js .exports = {

  plop.setGenerator( , { : , : [
        { : , : , : },
        { : , : , : },
        { : , : , : },
      ], : [
        { : , : , : },
      ]
  });
}; module ( ) function plop 'component' description 'React component using Typescript' prompts type 'input' name 'name' message 'Name: ' type 'input' name 'type' message 'DOM API Type: ' type 'input' name 'tag' message 'Tag name: ' actions type 'addMany' destination 'src/components/{{name}}' templateFiles 'plop_templates/component/*.hbs' exports a function that takes plop as an argument from which a generator can be created. In this example, we’ll get values for the three variables and , then use these variables in our handlebars templates. plopfile.js name, type, tag The first argument passed to the function specifies the name of the generator to run. The second specifies the prompts (where we set the values for the variables) and the actions to take. plop.setGenerator() Anatomy of prompts takes an array of questions. The questions are documented in full , however in this example we use: prompts Inquirer.js here , since we are requesting values for variables type — “input” — the name of the variable used in the templates, i.e. and name name, type, tag — A message to display to the user in the console message Anatomy of actions takes an array of In this example, we use which takes the values of the variables, transforms the templates and outputs the new files to the defined destination. actions actionConfigs . addMany ”, since we are adding several files type — “addMany — a relative file path from the root of the project to where we want the new files to be placed. Directories are created if they do not already exist destination — A representing the path to the files that are to be transformed. In this example, anything in the folder that ends with a extension. templateFiles Glob plop_templates/component .hbs 6. Run the command The generator is now ready to be called. Make sure the console is at the project root and run the following command: yarn plop component MyComponentTest HTMLDivElement div Within a couple of seconds, you should see three new files at The CLI output will confirm this. src/components/MyComponentTest. Inspect the file content to see that the placeholders have all been transformed to the values you have supplied in the command. The general structure of the command is: yarn plop [generator_name] [first_prompt_value] [...prompt_values] You’ll notice that after “ all the other arguments are optional. If more than one generator is defined, the Plop CLI will ask you to choose a generator. yarn plop”, Supplying the prompt values is also optional. If they are included, they must be in the order specified in . If they are not provided, then the message for each prompt is displayed (again, specified in ) where you can provide your answer. plopfile.js plopfile.js The optional arguments make it very easy for new team members, or yourself coming back to a project after while, to use the generators without having to remember a long list of prompts in the beginning. By now, you should have a decent understanding of how Plop can be used to generate files, individually or in groups. Not only will it help reduce the amount of boilerplate that you write, but if you are anything like me then the productivity and time saving benefits will become so apparent that you’ll wonder what you ever did without it! Previously published at - https://medium.com/@fgmonaghan/boost-your-coding-productivity-with-plop-tutorial-68f2a50b15f3

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Boost Your Coding Productivity with Plop

Too Long; Didn't Read

Company Mentioned

Frank Monaghan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Boost Your Coding Productivity with Plop

Too Long; Didn't Read

Company Mentioned

Frank Monaghan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES