PSA: A new Yeoman generator for Polymer has been released

[Addy Osmani]

I've just finished up the first stable Yeoman generator for Polymer and pushed it to https://github.com/yeoman/generator-polymer :)

Working on a tutorial on how to build a complete Polymer app using it, but hopefully the readme should be sufficient for now :)

General workflow after installing with npm install generator-polymer -g:

$ yo polymer

will scaffold out your basic Polymer app (with HTML5 Boilerplate), pull the latest Polymer from Bower and install Grunt tasks for your workflow. We optionally include Sass Bootstrap for UI if you want it, but can switch to something better later on if needed. You can preview this app by running grunt server.

$ yo polymer:element button

will scaffold out a new Polymer element called 'button' under elements/button.html containing all the boilerplate needed. It includes the latest lifecycle events and looks a little like:

<polymer-element name="button-element"  attributes="">

  <template>

    <style>

      @host { :scope {display: block;} }

    </style>

    <span>I'm <b>button-element</b>. This is my Shadow DOM.</span>

  </template>

  <script>

    Polymer('button-element', {

      //applyAuthorStyles: true,

      //resetStyleInheritance: true,

      created: function() { },

      enteredView: function() { },

      leftView: function() { },

      attributeChanged: function(attrName, oldVal, newVal) { }

    });

  </script>

</polymer-element>

We also ask you a few questions to help with this process such as:

• Do you want to include a constructor?
• Do you want to HTML import this element into your index.html? 
• Do you want to HTML import any other elements into this element?

To help make some sense of the above, let's try scaffolding out another element. How about a panel?

$ yo polymer:element panel

This time we say yes to including it in our index.html file, meaning we inject:

<link rel="import" href="elements/panel.html"> into your document head and add 

<panel-element></panel-element> to the body.

We then say yes to including any other elements and specify 'button.html' as the element. This results in a panel element that looks like:

 <link rel="import" href="button.html">

<polymer-element name="panel-element"  attributes="">

  <template>

    <style>

      @host { :scope {display: block;} }

    </style>

    <span>I'm <b>panel-element</b>. This is my Shadow DOM.</span>

        <button-element></button-element>

  </template>

  <script>

    Polymer('panel-element', {

      //applyAuthorStyles: true,

      //resetStyleInheritance: true,

      created: function() { },

      enteredView: function() { },

      leftView: function() { },

      attributeChanged: function(attrName, oldVal, newVal) { }

    });

  </script>

</polymer-element>

Installing the generator also gives you grunt and bower so you could also just bower install polymer-elements and use that right away too. There are a few other nice features supported like LiveReload, but at a high-level I hope that this tooling helps developers rapidly scaffold out their Polymer apps more quickly. 

Do let me know if you run into any issues with it!

Cheers.

PS: Big thanks to Eric for reviewing the generator and output. It really helped to be able to stay on top of what was changing.

[Fernando Hurtado]

Hi, 

Great, I'm trying Yeoman and is very useful on this particular polymer environment, I'm building a generator myself but got a lot of questions, API documentation is not that straighforward.

Keep with this great stuff

Héctor Fernando