Day 991: Mixing Config and Content in Polymers

So it turns out that I already know how to do the rest. I hate it when that happens.

The whole point of these posts is to ask a question to which I don't know the answer—and then answer it (or come up with next steps). So first the answer to the question I did not remember knowing. Then a new question that I am pretty sure I don't know.

First up: how to mix distributed content with imported configuration in Polymer? The answer: you just do it. For instance, if I wanted to distribute “And good-bye…” as closing content in my super-simple <hello-you> Polymer, I can write it like:

      <hello-you>
        <link rel="import" href="scripts/hello-you.json">
        <p>And good-bye…</p>
      </hello-you>

Now I am importing hello-you.json configuration and including HTML content inside my custom <hello-you> Polymer instead of just using configuration. I can continue to use the same code to process the configuration from yesterday without change. To include the HTML content—without <link> noise, I just include a <content> tag like usual in the Polymer's <template>:

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-you">
  <template>
    <h2>{{hello}} {{your_name}}</h2>
    <!-- ... -->
    <content></content>
  </template>
  <script>
    Polymer('hello-you', {
      // ...
    });
  </script>
</polymer-element>

The result is exactly what I desire—the content wrapped by my Polymer is distributed into the Polymer's DOM:



I already know how to do similar stuff in Dart. Instead of importing outside of the <polymer-element> tag, I need to include the <link> tag inside:

<script src="../../packages/browser/dart.js"></script>
<script src="../../packages/browser/interop.js"></script>
<polymer-element name="hello-you">
  <link rel="import" href="hello-you.json">
  <template>
    <!-- ... -->
  </template>
  <script type="application/dart" src="hello_you.dart"></script>
</polymer-element>

I also have to use my Polymer transformer to strip out JSON, but I have gotten used to that.

What I need to figure out tonight, is how to organize my Polymers. I have been putting everything in a scripts directory and, especially with all of the internal and external configuration floating around, that seems to be messy.

Folks have suggested an “elements” directory to hold Polymers. And after a bit of fiddling, I settle on that as well. It is not as tied to implementation as “polymers” might be, but seems to do a good job of separating regular code from Polymer:

$ tree -I 'bower_components|node_modules'
.
├── assets
│   └── bootstrap.min.css
├── bower.json
├── elements
│   ├── hello-you.html
│   └── hello-you.json
├── Gruntfile.js
├── index.html
├── karma.conf.js
├── package.json
└── scripts
    └── hello-you.json

Here, the hello-you.json in the scripts directory is the custom configuration that is being applied to the Polymer whereas the one inside elements is the internal configuration for the Polymer.

I am still unsure if it really helps much in the Dart code. The custom configuration there tends to reside in the web directory and everything else—Polymer and Polymer backing code—goes in lib. Still some folks seem to prefer placing elements in lib/elements and that seems more consistent between the two languages so I will probably adopt that convention as well.

Day #991

‹prev | My Chain | next›