_Hey Yuri, what is Hygen?
I hear you asking. Worry not for I have the answers you seek and more! Hygen is a CLI Tool, or going by its homepage “The scalable code generator that saves you time.” Neat, right?
_Yeah but that still doesn’t tell us much… why would I use it? What good can it do to me?
Good questions indeed! Let me try and give some good answers too!
What
Let’s start with what you can do with Hygen, and what you can use it for. Hygen is capable of generating any kind of file or launching any bash shell command based on a CLI command or on user CLI-Wizard. For example, it is able to generate a file (or a list of files) by simply invoking:
hygen {generator} {action} [ -parameter [value] ] _Yeah duh! We could already do that with the touch command!
Did I forget to mention it? The generated file (or file list) is based on an easily customizable templating engine!
_Well yeah, you forgot to mention it, now it may make sense… still it all depends on how easily I can generate a template and tie it all up, after all I would rather do it manually if the hygen process to do that requires more effort…
Worry not for defining a template is as simple as generating a file with the ejs.t extension and defining an header! Here is a quick example (courtesy of Matías Capeletto)
---
to: components/<%= name %>/index.jsx
---
import React from 'react'
export const <%= name %> = ({ children }) => (
<div className="<%= h.changeCase.paramCase(name) %>">{children}</div>"
)Why
Sometimes, no matter how much you try, your codebase will have repeated patterns, like scaffolding enforced conventions, or even files. A command like “hygen func-comp my-comp-name” could save anyone in the team the bother to locate the right folder in which to create the MyCompName.jsx file, adding the file and writing the basic template of a component.
In short: if a repetition has to happen, let the computer take care of that for you!
How
Getting Started with hygen in your project
npm install -g hygenhygen init self- ???
- Profit
Yeah, it is as simple as that: you can run Hygen on any machine (as long as you have npm installed) and it will init itself in your project. Hygen will create its own scaffolding and you can quickly start to create your generators based on folder convention:
_templates/{generator}/{action}/**.ejs.t
Templating with ejs.t and parameters
An ejs.t template is mainly composed of two parts:
- The header section
- The content section
The Header section
The header section is used to inform Hygen what we expect it to do, and how to do it, while the content section is basically the text we want to put inside a file (or something we want to pipe in bash).
The most common use-case for a header is the “to” parameter or the “sh” in case we want to execute a script. The documentation does a better job at explaining the finer detail so I will not explain it all but an important part I want to highlight is:
Conditionally rendering
Not all the .ejs.t files must always generate an output, you may choose to condition your output based on CLI parameters or Wizard values. If that is the case you simply need to somehow interpret the values and render null in the TO/SH header section. Hygen will skip the template in that case.
The content section
The content can be any kind of text, and you will be able to make use of the full potential of the https://ejs.co/ template engine! Not much to add about that, it’s as simple as writing your template and replacing the dynamic part with the ejs tags.
Multiple file/bash commands, same action
By making smart use of the aforementioned conditional rendering and Hygen scaffolding convention, you can trigger multiple actions based on the same Wizard/CLI command at the same time. All you need to do is generate multiple files under the convention _templates/{generator}/{action}/**.ejs.t and every single .ejs.t file will get executed one after the other when you invoke the hygen {generator} {action} command.
CLI wizard? I want that!
If you want to be presented with a step-by-step CLI wizard where you can condition parameter inputs (for example, to only be a selection of some pre-set values), or you want a typical yes/no experience, Hygen has you covered!
By simply creating a file Prompt.js inside your _template/{generator}/action folder you are ready to go. Let’s see an example:
// see types of prompts:
// https://github.com/enquirer/enquirer/tree/master/examples
//
module.exports = [
{
type: 'multiselect',
name: 'resources',
hint: '(Use <space> to select, <return> to submit)',
message: "Select resources to generate",
initial: [0,1,2,3],
choices: [
{ name: 'entity', value: "entity", hint: '(based on typeorm package script)' },
{ name: 'migration', value: "migration", hint: '(based on typeorm package script, you may want to rename the generated file later...)' },
{ name: 'factory', value: "factory", hint: '(based on hygen template, requires the entity)' },
{ name: 'seeder', value: "seeder", hint: '(based on hygen template, requires the factory, doesn\'t update seeds/runners/all...)' },
]
},
{
type: 'input',
name: 'name',
message: "name",
hint: 'camelCase singular name of your entity'
},
]Conclusion
Hygen is a very powerful tool that doesn’t really compromise between ease of use and customizability. If you find yourself repeating the same scaffolding procedures over and over you should totally check it out for your next project!
