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
codeBelt / generate-template-files
A simple generator to create custom template files for any application
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 :
Top comments (0)