plop VS hygen

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.

In this article, I will talk about Plop, which is a little tool that saves you time and helps your team build new files with consistency, as the documentation suggests.

My tool of choice is Plop.js. Plop is a powerful "micro-generator framework" built to help maintain patterns as well as speed up your project build time. From the documenation:

Plop

When it comes to software development, a good developer experience (or DX) is a key aspect in helping the development process to become faster and more efficient. Having a good DX means that developers are focusing on the real deal while other, less important stuff, is being taken care of by automated tools. Such a tool is Plop which I really love for its simplicity and efficiency.

this allows you to import this Header component with import { Header } from 'path/Header' without Header/Header. Creating this structure manually is annoying, so one will benefit from some code generators like plop or hygen.

plop for create a consistent templates for pages, components, etc

Plop

--- to: app/hello.js --- const hello = ``` Hello! This is your first hygen template. Learn what it can do here: https://github.com/jondot/hygen ``` console.log(hello)

hygen

hygen.io is the best code/template generator.

This is a basic example, but you can start to see how you might create CDK templates and share them with your team. I recommend checking out the hygen website, it's an active project and the documentation is quite good.

My comment was misleading-I don’t know if Storybook has native support, but using typescript (or Babel, or any parser) you can analyze a component and automatically create stories with good foundational docs. In the past, I’ve used Hygen and a handful of scripts that were tied into our commit workflow that handled generating boilerplate stories for new components and then automatically updated the stories when any changes to props were picked up.

You can look at Hygen: https://github.com/jondot/hygen

this allows you to import this Header component with import { Header } from 'path/Header' without Header/Header. Creating this structure manually is annoying, so one will benefit from some code generators like plop or hygen.