generator-polymer-element

Polymer Element Generator

Quickly scaffold modern, lightweight Polymer 2 elements with Yeoman, either as standalone projects or a single file for use inside apps.

Standalone elements come bundled with Gulp, Babel, Rollup, PostCSS, inline processing, and BrowserSync. All elements have optional ES6-only support and an optional template boilerplate.

Check out the files in app/templates in this repo for a better idea of what you'll get.

Contents

• Installation & usage
• Elements for apps
• Standalone elements
  • Inline processing
  • Module bundling
  • Serving locally

Installation & usage

Install Yeoman and the element generator with NPM or Yarn

$ npm i -g yo generator-polymer-element

Then run it

$ yo polymer-element

Elements for apps

To create a new element for use inside a Polymer app, just select 'Part of an app' when prompted. This will generate a single HTML file under the name of your element with a minimal Polymer 2 boilerplate setup.

Standalone elements

To create a standalone element for distribution in its own repo, select 'Standalone' when prompted. This will scaffold out a lightweight, modern Polymer element project, including a buildstep, conditional transpilation, module bundling, PostCSS processing, and more.

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.

Inline processing

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 are 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

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(); 

If you opt out of compiling your element class to ES5, Babel will still run but only transpile for evergreen browsers (all of which support native ES6 classes) using babel-preset-env. Otherwise IE11 will be added as a Babel target.

Serving locally

You can serve standalone elements locally with Browsersync. 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.

---

MIT © Sean King