DEV Community

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

Posted on

6

Get rid of Copy/Paste with Plop Js!

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 😇

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay