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.
--
Install Yeoman and the element generator
$ npm install -g yo generator-polymer-element
Then use it
$ yo polymer-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();
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.
- Add basic tests
--
MIT © Sean King