Generating Super Simple Polymer (JS)

I really want a minimal Polymer code generator. I thought Yeoman might have something to fit my needs, but upon further review, I am not so sure.

I missed some of what Yeoman's Polymer was doing yesterday. Most the sub-generators wind up installing a lot. I had thought yo polymer:seed might be the answer to my needs. Even though it installed testing stuff too soon (and the wrong testing library) for my tastes, the rest was close. But it turns out that it just installs crazy amounts of dependencies in the parent directory thanks to the hidden .bowerrc file that it includes:

{
  "directory": "../"
}

The end result is 9 directories containing 52 files:

$ tree       
.
├── core-component-page
│   └── ...
├── elements
│   ├── bower.json
│   ├── demo.html
│   ├── index.html
│   ├── README.md
│   ├── test
│   │   ├── index.html
│   │   ├── tests.html
│   │   └── x-pizza-basic.html
│   ├── x-pizza.css
│   └── x-pizza.html
├── platform
│   ├── platform.js
│   └── ...
├── polymer
│   ├── polymer.html
│   ├── polymer.js
│   └── ...
└── polymer-test-tools
    ├── chai
    │   └── ...
    ├── karma-common.conf.js
    ├── mocha
    │   ├── mocha.js
    │   └── ...
    └── ...

9 directories, 52 files

My goal here is to generate the minimal setup required to start coding a Polymer element. I need to keep it small so that my screencasts are short—both on time and concepts.

The end result of my first screencast should be something like:

$ tree
.
├── index.html
├── elements
│   ├── x-pizza.html
│   └── x_pizza.js
├── bower.json
└── bower_components
    └── ...

I should be able to run a python simple HTTP server in the root and see the <x-pizza> element working in the index.html page.

So, I am going to let Emacs generate the index.html page. I will likely stick with a very simple HTML skeleton and add the platform.js <script> tag and the element link by hand (or keyboard shortcut). I tend to think of these as important enough to type out by hand.

For the Bower stuff, I think I will approach it by creating a minimal bower.json on the command-line:

$ echo '{"name": "x_pizza"}' > bower.json

Then install and save my Polymer dependencies:

$ bower install -S Polymer/polymer
bower polymer#*                 cached git://github.com/Polymer/polymer.git#0.4.2
...
polymer#0.4.2 bower_components/polymer

So that takes care of the index.html page and Bower, what about the element? The polymer:el generator is close to what I need, but... there are two things that give me pause.

First, the element is generated in the wrong directory (I think). Where I would prefer it go directly in elements, polymer:el puts it in app/elements/<name-of-element>/:

$ yo polymer:el x-pizza
? Would you like an external CSS file for this element? No
? Would you like to include an import in your elements.html file? No
   create app/elements/x-pizza/x-pizza.html

I could move it, but then I would have to change the polymer.html import in the generated output since bower_components will wind up in the parent directory instead of the grandparent directory:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="<%= elementName %>" attributes="">
  <template><% if (!externalStyle) { %>
    <-- ... -->
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        // define element prototype here
      });

    })();
  </script>
</polymer-element>

Even that I could live with, but I think including the Polymer prototype definition in the HTML, coupled with my other pet peeves, is what will keep me from Yeoman. Emacs has a nifty JavaScript mode that I would prefer to use in a separate .js file. There are multi-minor mode solutions for working with both HTML and JavaScript in the same file, but something about it just does not feel as nice.

So I think I will wind up relying on Emacs for this as well. Speaking of Emacs, I need to dust off some of my extremely rusty elisp to modify the built-in HTML mode to accommodate <polymer-element> definition elements. Something like this in my .emacs ought to work:

(setq html-tag-alist (cons '("polymer-element" (\n
        "<template>\n    " _
        "\n  </template>\n"
        "  <script src=\"x_element.js\"></script>"
  ))
 html-tag-alist
))

When I used the HTML mode insert-element command for polymer-element, the above template will be inserted with the cursor being placed after the initial <template> tag (by virtue of the underscore). I may fiddle with yasnippet as an alternative, but I have never been able to get on board with snippets. I can remember the most obscure Emacs keyboard combinations, but I have never been able to use snippets often enough to remember them.

Regardless, I think that I will not be using Yeoman in the screencasts. It sets up beautiful Polymer elements and development layouts, but feels too noisy for my needs. Hopefully this low-key approach will work better.

Day #206

‹prev | My Chain | next›