Generator-polymer-web-component NPM

generator-polymer-web-component

A Yeoman generator for Web Components using Polymer with an integrated build process through Gulp (CSS autoprefixer, eslint, live reload with browserSync and code minification).

The generator and gulpfile are highly inspired by Generator Polymer Element.

Installation

First, install Yeoman and generator-polymer-web-component using npm (we assume you have pre-installed node.js).

$ npm install -g yo
$ npm install -g generator-polymer-web-component

Then generate your new component:

$ yo polymer-web-component

By default, the component's name will be the folder where you execute the command. If you specify a name for your component, the generator will create a folder with that name for your component if the current folder doesn't match that name.

Build and serve

Run gulp inside your component to build the minified version and serve the component's demo.

$ cd <component-path> && gulp

Options

Use the flag --no-minify to build the dist without minify.

$ gulp --no-minify

Testing

You can choose TDD or BDD style for unit tests. Navigate to http://localhost:<port>/test/ to run your tests.

The port may change depending on the ports in use.

Code coverage through Web Component Tester

You need web-component-tester installed globally:

$ npm install -g web-component-tester

Then, you can run your tests on the specified local browsers (Chrome by default) in wct.conf.js:

$ cd <component-path> && wct

Code coverage is done with Istanbul. By default, the coverage thresholds for statements, branches, functions and lines are set to 70%. You can change this thresholds in wct.conf.js.