If you've already worked with a popular framework like Angular or Vue, you probably used their wonderful scaffolding tooling.

Just go with a ng generate component my-component and there you go, it creates for you a directory and a bunch of files inside.

What's nice with that is obviously the time saving you've got. So you can focus on your features and business logic, not boring configuration.

Perks :

• Time savy
• Less error prone (Make sure you always have a nice and proper base structure for your component)
• Dry

Let's dive in.

I've found a wonderful github repo called generate-template-files

It's pretty straight-forward. The guy also made an article about its package. But I wanted to talk about it!

So !

You need to have node and npm installed.

First, install the package as a dev dependency.

npm install -D generate-template-files

Then, create a file (filename is your choice!) where we'll put our scaffolding logic.

mkdir tools/scaffold
touch tools/scaffold/generate.js

Add a little helper script in your package.json :

// ./package.json
"scripts": {
        "generate": "node tools/generate.js"
    }

Open it in your favorite editor and put the base content in :

/* ./tools/generate.js */
const { generateTemplateFiles } = require('generate-template-files');

generateTemplateFiles([]);

Basically, when you fire the tool, it give you choices. Each choices is simply an object here.

The tool will search your choice by iterating through that array (as a function parameter) and pick it.

We can create a first choice.

/* ./tools/generate.js */
const { generateTemplateFiles } = require('generate-template-files');

const create_component_basic = {
        option: 'Create a basic component',
        defaultCase: '(pascalCase)',
        entry: {
            folderPath: './tools/templates/components/basic',
        },
        stringReplacers: [
            { question: 'Insert component name', slot: '__name__' },
            { question: 'Insert id css selector', slot: '__idSelector__' },
        ],
        output: {
            path: './dist/components/__name__',
            pathAndFileNameDefaultCase: '(pascalCase)',
            overwrite: true,
        },
        onComplete: (res) => console.log(res),
    }

generateTemplateFiles([create_component_basic]);

So, let's break it down.

option : It's the name of the choice as shown in the CLI when using it.

defaultCase : let you specify the type of case you want. You can use for example pascalCase or camelCase etc... default is (noCase) : it doesn't touch your input.

entry: Basically where it need to get the templates (you can have as many template files for one choice)

stringReplacers : This is important. It's the prompts where the tool ask you for the specifics data of your generated component. You choose a string to search for (like __name__ but it could be anything that can be unique like %%|name|%% if you want) and will replace all its occurrence by what your tell it to replace.

output : Where it need to output the files. You can also specify a custom file name using those strings replacers. In my example, it will create a folder with the __name__ given value and then throw all generated files inside it.

onComplete: a simple function to execute when task finished. I just console log the result.

Now, let's create our template files.

I prefer to create a folder named 'templates', then one folder by type, then one by type instance.

mkdir tools/templates/components/basic
touch tools/template/components/basic/{__name__.component.html,__name__.css}

<!-- ./tools/template/components/basic/__name__.component.html -->
<div id="__idSelector__">Hello I'm the __name__</div>
<link rel="stylesheet" href="./__name__.css">

/* ./tools/template/components/basic/__name__.css */
#__idSelector__ {
    color: red;
}

Perfect

Now, if we start the tool :

npm run generate

It should prompt:

And if we look at the generated files :

<!-- ./dist/components/Header/Header.component.html -->
<div id="HeaderMain">Hello I'm the Header</div>
<link rel="stylesheet" href="./Header.css">

/* ./dist/components/Header/Header.css */
#HeaderMain {
    color: red;
}

Note how the #Header in the css file is now capitalized. It's because of the (pascalCase) setting we've put.

That's it.
You've got the basics of this tools.

If you check the *.d.ts files of the project, you'll have plenty of useful documentation for each of you cases !

Thanks for reading.
Don't forget to star the repo if you find the project useful.

Find codeBelt here :

Robert S.

I like React, Next.j, MobX and TypeScript.