Yeoman generators are very useful and they allow you to focus on implementing your application without having to reinvent the wheel over and over again…
Building a yeoman generator is not rocket science and a very comprehensive tutorial on how to do it can be seen at yeoman’s website.
WebComponents are also in a trend these days, and I strongly believe they are the future. Apart from Polymer, X-Tag is probably the most used and talked WebComponents library out there. X-Tag started as a Mozilla project but is now supported by Microsoft. It’s a very clever library, that does not rely on all WebComponents API to work, which is a big advantage over Polymer. It only needs the browser to support custom elements, which means that it supports IE9+. It’s also very simple to understand, which means the learning curve is not that steep.
Now, building a yeoman generator that allows you to scaffold an X-Tag WebComponent is very useful and will save you a lot of copy and past on an X-Tag application.
I won’t go throw all the details in this post, that’s not the objective, but instead I’ll give you an overview of the steps required to create your own yeoman X-Tag webcomponent generator.
The first thing you need to do is create the folder where you want to create the yeoman generator and then type:
$npm init
This command allows you to create the package.json file. You’ll be asked several questions, the first one is the name of your generator, and you have to name it generator-name-of-your-generator, this allows the generator to be indexed by the yeoman generators page when you publish the generator.
You’ll also be asked to give keywords to describe your generator, and you have to include at least the “yeoman-generator” keywords, for the same reason as the paragraph above.
After the creation of the package.json file you need to add the yeoman generator as a dependency for the module by typing:
npm install --save yeoman-generator
Now if you follow the tutorial on how to create yeoman generators, there’s a part about templating. This is the most important part because it’s the one that copies files and allows you to replace anchors inside those files with text such as the yeoman generator’s name and so on.
The template for the X-Tag WebComponent file in its simplest form will be something like:
import xtag from 'x-tag';
import './<%= filename %>.css';
(function () {
xtag.register('<%= filename %>', {
lifecycle: {
// Fires when an instance of the element is created
created: function () { },
// Fires when an instance was inserted into the document
inserted: function () { },
// Fires when an instance was removed from the document
removed: function () { },
// Fires when an attribute was added, removed, or updated
attributeChanged: function (attr, oldVal, newVal) { }
},
events: { },
accessors: { },
methods: {}
});
}());
Here <%= filename %> is an anchor that will be replaced by the webcomponent’s name. This might change depending one your own specific implementation.
Apart from the main webcomponent module file above, there are at least 3 or 4 files that should be included in the generator. A file to contain your unit tests, and as a good practice, this file should contain a failing test, so that you are sure that you’ll look at the tests :). A css, less or sass file depending on what you use, a template for the readme file and a small html file where you can test your webcomponent.
It’s also a good practice to use some kind of templating engine like handlbars or mustache so that you have your html in a different file and not inside the webcomponent itself.
Following these simple steps above, you can create your own yeoman generator, in this case, to generate an X-Tag webcomponent.
Feel free to have a look at the X-Tag webcomponent generator I built, and do a pull request if you want to do improvements on it:
vloureiroblog 