DEV Community

Cover image for Get rid of Copy/Paste with Plop Js!
Melih Şahin
Melih Şahin

Posted on

Get rid of Copy/Paste with Plop Js!

#plopjs #javascript #nextjs #codegeneration

Hello,

Almost all of us, while working on a project, are copy/pasting from the previous one while creating similar structures. While thinking if there is a fast way to do this, I came across plop js.

Plop js actually allows us to create the structures that we have previously created templates on cli via command. It does this in a very simple way. I can give hygen and yeoman as an alternative to plop js. I plan to write content about these libraries in the future.

What Are the Conveniences It Provides Us?

  • Saves time.
  • Saves from writing repetitive code blocks and folder structures every time.
  • Helps people working in the project to create structures in the same standard. So it provides code integrity.

Let’s reinforce them by writing a sample project. In our scenario, we will create a component whose name we will determine, a file where we determine the types contained in this component, and a style file with the help of a command.

Let’s create a next js project from scratch. project from scratch.

 npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

First, let’s include plop js in our project with yarn.

 yarn add plop -D
Enter fullscreen mode Exit fullscreen mode

Those who use npm can use this.

 npm install --save-dev plop
Enter fullscreen mode Exit fullscreen mode

To run our Plop script from the terminal, let’s add it to our “package.json” file.

 { ... "scripts": { ..., "plop": "plop" }, ... }
Enter fullscreen mode Exit fullscreen mode

It’s time to create our code template. To do this, we use handlebars js, which allows us to create templates at a basic level. We create a folder called templates in the project home directory and add our template files inside.

template/{{name}}.tsx.hbs

 import { {{pascalCase name}}Props } from "./{{name}}"; import "./{{name}}.css"; const {{name}} = ({ className="" }:{{pascalCase name}}Props) => { return ( <div className={`{{name}} ${className}`}> {{name}} component </div>  ); }; export default {{name}};
Enter fullscreen mode Exit fullscreen mode

template/{{name}}.ts.hbs

 export interface {{pascalCase name}}Props { className?: string; }
Enter fullscreen mode Exit fullscreen mode

template/{{name}}.css.hbs

 .{{name}} { background-color: "#FF5733"; }
Enter fullscreen mode Exit fullscreen mode

When we have completed our template files, we can create a file called “plopfile.js” in the main directory of our project.

plopfile.js

 module.exports = function (plop) { plop.setGenerator("component", { description: "this is a skeleton plopfile", prompts: [ { type: "input", name: "name", message: "Enter component name:" }, ], actions: [ { type: "addMany", destination: "app/components/{{camelCase name}}", templateFiles: "templates/*.hbs", base: "templates", }, ] }); };
Enter fullscreen mode Exit fullscreen mode
  • description: Describes what the command does.
  • prompts: The part where we define the questions asked to the user.
  • actions: The part that defines the operation that the command will execute.
  • actions types: is used to define the type of the function. For example, in our example, we create 3 files with a single command. We do this with the action of type addMany. The add type is used to add a single file. If we want to modify the file we use modify.

Finally, let’s run our command:

 yarn plop
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

You can access the source codes of the sample project from this link. 🔗

Continue with content 🚀

You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

Top comments (0)