polymd - A module to create a Polymer component from the template

While working a lot with web components I needed a script that I can use to create a Polymer web component from a template and also creates all other stuff I use during development. So I wrote a Node module to automate some work for me.
The other stuff I use are editors, git, and linters configuration files, travis integration to test web components, bower and common tasks, package file with common dependencies and GitHub files like CONTRIBUTE.md.

Generated element structure

The goal for this module is to speed up web components creation time and unification of the development style of this components. So all components follow the same coding style and coding quality check defined in .editorconfig, .jsbeautifyrc, .jscsrc and .jshintrc. 

Basic usage

Install module:

sudo npm install polymd -g

The -g flag is used to be able to run the module anywhere on your system but it require administrative permissions.
Then use the command:

polymd my-element --description "the main element that is a web component" --author "The Advanced REST Client authors" --version "0.0.1" --repository "advanced-rest-client/my-element"

Options:

Option	Shortcut	Description
--description	-d	Short description for the component used in bower and in the package file
--author	-a	Author of the component. You can set up the POLYMD_AUTHOR env variable to automatically insert it into this field. If not, the USER variable will be used (if present).
--version	-v	Version of the component. Use semantic version standard.
--repository	-r	The repository of the element. It should be only a user or organization name and component name will be appended. Use the POLYMD_REPO env variable to automate this.
--skip-tests	-st	Skip creation of the tests cases.
--skip-demo	-sd	Skip creation of the demo page.

Tests

Tests case generated by the script uses web-component-tester. It creates tests directory with basic test template:

suite('basic', function() {
  test('`my-element` should be initialized', function() {
    var element = fixture('basic');
    assert.equal(element.isAttached, true, 'element.isAttached equals true');
  });
});

This tests can be invoked by calling

wct

Or if you use Polymer-cli then:

polymer test

Also you can do it in browser:

polymer serve --open

and then navigating to the test/index.html file.

Demos

Demos are used internally by Polymer's iron-component-pages to display demo of the component. It's useful if you want to publish your component and provide documentation for it.

Example demo page for web component

Demos are located under demo directory. The definition to locate the demo page can be found in component's main file as a metatag inside the documentation section: @demo demo/index.html. You can add more than one demo page.

Travis CI

Generated element is also ready for Travis CI. After you enable travis for component's repository it will test it using polylint for javascript errors and wct against created test cases.

Travis CI report

Gulp tasks

Generated package comes with few handy scripts that will help build and manage the package.
First is the lint task that will parse source code and display errors in javascript code.
Run it by calling:

gulp lint

Another task is the release task. It will bump version in package.json and bower.json files, create a changelog from commits history (if you are using correct commit syntax), push changes to the git repository, create a tag for the release and finally push a release from the tag. It's very helpful because you can do all this tasks in one command.
One note here. You have to setup a GITHUB_TOKEN environment variable before running this script. It need to contain a GitHub OAuth token to the script can push changes to GitHub.
Run the task by calling

gulp release

Summary

The module was created to save time that should be used for development and to unificate coding style across all components. It helps creating demo pages, documentation and test cases for the component. I hope it help you with your development process.