anujparikh / generator-polymer-element

Quickly scaffold lightweight Polymer elements with Yeoman

Polymer Element Generator

Quickly scaffold and develop modern Polymer elements with Yeoman, based on Polymer's seed-element and built as an ES6 class.

The generator comes bundled with a Gulp buildstep which includes Babel, Rollup, PostCSS, inline asset processing, and BrowserSync.

--

Installation & usage

Install Yeoman and the element generator

$ npm install -g yo generator-polymer-element

Then use it

$ yo polymer-element

Developing your element

Your element lives in the src folder and is compiled to the project root by Gulp. To build it run gulp build, or the default gulp task on your command line.

It's built with upcoming standards as an ES6 class. See Polymer's primer on using ES6 to build components: Building web components using ES6 classes.

You can write Javascript and styles directly inline, or split them into files and get Gulp to inline them by adding an inline property to link and script tags.

<!-- Inline assets with Gulp -->
<link rel="stylesheet" src="./my-element.css" inline>
<script src="./my-element.js" inline></script>

Inline scripts and styles can still be processed via Gulp, thanks to gulp-process-inline.

<script>
    // Transpiled with Babel, even though it's in HTML
    let myVar = 'my-var';
    () => console.log(myVar);
</script>

Module bundling is handled with Rollup, which allows you to import and export both ES6 and CommonJS modules.

// Require modules using ES6 syntax, Rollup will bundle them for you
import foo from 'bar';
foo(); 

Serving locally

You can serve your element locally with BrowserSync. Just run gulp serve, or the default gulp command, then go to localhost:3000 to see your component page. You have a component demo in the demo folder, go to localhost:3000/demo to see it in action.

TODO

• Add basic tests

--

License

MIT © Sean King