generator-polymer-plus
v1.2.0
Published
Scaffold out a Polymer project with ES2015 support
Downloads
14
Maintainers
Readme
Yeoman generator for Polymer projects with ES2015 built in
Introduction
Polymer is a library of polyfills and sugar which enable the use of Web Components in modern browsers. The project allows developers to build apps using the platform of tomorrow and inform the W3C of places where in-flight specifications can be further improved.
generator-polymer
provides Polymer scaffolding using Yeoman (a scaffolding tool for the web), letting you easily create and customize Polymer (custom) elements via the command-line and import them using HTML Imports. This saves you time writing boilerplate code so you can start writing up the logic to your components straight away.
Features
- A Polymer app scaffold built with Polymer Starter Kit
- Sub-generator to create Polymer elements for your app
- Quick deploy to GitHub pages
- All the goodness of seed-element (docs & landing page for your element)
- web-component-tester support
In addition, this generator leverages polymer-starter-kit-plus to provide ES2015 support "out of the box" along with many other bonus features!
See this README for more details.
Extras:
- Element generator uses ES2015 classes
- Stylus support
- ReactiveElements using Rx lite and Rx DOM bindings
- Themes in
/themes
can be styled using Stylus (CSS pre-processor)
TODO
- Suggestions are welcome ;)
Issues
This generator clones Polymer Starter Kit and seed-element. If you're having issues with the template files generated for those projects, please raise them on those repos as they are the canonical source.
Installation
Install the generatornpm install -g generator-polymer-plus
Make a new directory and cd into itmkdir -p my-project && cd $_
Scaffold a new Polymer project:yo polymer-plus
Generators
Available generators:
Note: Generators are to be run from the root of your app
App
Sets up a new Polymer app, generating all the boilerplate you need to get started.
Example:
yo polymer-plus
Element (alias: El)
Generates a polymer element in app/elements
and optionally appends an import to app/elements/elements.html
.
Example:
yo polymer-plus:element my-element
# or use the alias
yo polymer-plus:el my-element
Note: You must pass in an element name, and the name must contain a dash "-"
One can also include element dependencies to be imported. For instance, if you're creating a fancy-menu
element which needs to import paper-button
and paper-checkbox
as dependencies, you can generate the file like so:
yo polymer-plus:el fancy-menu paper-button paper-checkbox
Options
--docs, include iron-component-page docs with your element and demo.html
--path, override default directory structure, ex: --path foo/bar will put your element in app/elements/foo/bar
Seed
Generates a reusable polymer element based on the seed-element workflow. This should only be used if you're creating a standalone element repo that you intend to share with others via bower. If you're just building a Polymer app, stick to the Element generator.
To preview your new element you'll want to use the polyserve tool.
Example:
mkdir -p my-foo && cd $_
yo polymer-plus:seed my-foo
polyserve
Gh
Generates a Github pages branch for your seed-element.
This requires that you have SSH keys setup on GitHub.
If your documentation or demo pages have dependencies declared as devDependencies in bower.json
, they will be included in your GitHub pages branch.
Example:
cd my-foo
yo polymer-plus:gh
If, for some reason, you don't want the devDependencies, use the --nodevdeps
option.
Testing
The project generated by yo polymer
contains support for web-component-tester. The following commands are included:
Run local tests (in terminal):
gulp test:local
Run remote tests with SauceLabs:
gulp test:remote
See the web-component-tester readme for configuration options.
Gotchas
The elements.html
file
The app
generator will produce an elements.html
file where you can place your imports. This file will be vulcanized when you run the default gulp
task. You'll want to make sure that elements.html is the only import in your index.html file, otherwise there's a good chance you'll accidentally load Polymer twice and break the app.
Contribute
See the contributing docs
When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.