A couple of days ago I stumbled upon a new tool called hygen hygen.io on github as jondot/hygen.

Here's what the description from the repo says:

hygen is the simple, fast, and scalable code generator that lives in your project.

The bottom line is it's a cli-based scaffolding tool. It uses an odd combination of ejs and front-matter.

How does it work?

First you install the CLI tool globally using npm.

npm install hygen -g

Then call hygen init self to generate a scaffold, for generating scaffolds, kind of meta right?

This will allow you to run hygen generator new component.

By now you should have a _templates folder with a generator and a component directory inside.

You'll see a temporary file inside _templates/component/hello.ejs.t which you can customize to be be the new component. I would rename hello.ejs.t to simple.ejs.t and put this inside:

---
to: src/components/<%= name %>.tsx
---
import React from 'react'

export function <%= name %>(props) {
  return <h1>Hello, {props.name}</h1>;
}

Then you can run:

hygen component new --name Example

And voila! You will have easily created a new component.

Using Prompts

One super-cool feature is the prompt functionality, just by adding in a prompt.js file to the generator directory you can get prompted when you run the command for different ejs variables rather then supplying them as flags to the command.

The Shell

One nice addition is an option to execute a shell command from the front-matter of a generator. This allows better pipelining of side-effects.

---
sh: echo "hi"
---

Open Questions

Is it possible to get .ejs.t vscode syntax with front matter support? Perhaps just use .ejs?

One possible workaround for vscode picking up the .t file- type is to add a file association in the vscode preferences:

{
  "files.associations": {
    // @see https://dev.to/reggi/using-hygen-3g3i
    "*.ejs.t": "html"
  }
}

Conclusion

I love it so far! It's greatly improved my workflow and I continue to find new use cases. ❤️❤️❤️❤️❤️