Day 993: Vulcanize (with Exclusions)

Deployment of Polymer.dart is causing me a bit of bother. In a good way. I continue to stretch the boundaries of what Polymer can do—and probably should do. I have to admit that I am struggling with including data in Polymers—especially when it comes to deployment. I am so very close to having a working solution in Dart, but I begin to suspect that I am fighting the framework just a little too much. So I am switching apps, back to the JavaScript equivalent to see if I have similar problems.

I am still trying to read configuration from both the Polymer definition and when using the Polymer. I have been placing the configuration in a <link> import before the Polymer definition:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="hello-you.json">
<polymer-element name="hello-you">
  <!-- ... -->
</polymer-element>

The configuration when using the element goes inside the Polymer tags:

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

And, thanks to the magic of Polymer, that works just fine—when the Polymers are separate from the web and not combined into a single deployment asset. But I recognize that this might not be ideal for real-world usage, which is where the deployment-minded vulcanize comes in.

I start by installing vulcanize:

$ npm install -g vulcanize

Then I run it on the entry page to my JavaScript Polymer application:

$ vulcanize index.html
Default output to vulcanized.html in the input directory.

When I look at my JSON configured Polymer pre-vulcanize, I see:



When I load up the vulcanized version, I find:



Well, that does not bode well for my attempts at external configuration.

There are a couple of options that vulcanize supports. The --csp creates an external JavaScript file, but my configuration imports are still slurped directly into the page.

The only other option that I can think to use is the --config. In a configuration file, I find that I can specify imports that I want vulcanize to ignore. That sounds promising. So I create vulcanize_conf.js with the following content:

{
  "excludes": {
    "imports": [
      "\\.json$"
    ]
  }
}

The documentation suggests that I can exclude by regular expression, which is what I do above. I then use the configuration:

$ vulcanize --config=vulcanize_conf.js index.html 
Default output to vulcanized.html in the input directory.

And that actually works:



Well, not quite. The default configuration in the Polymer definition is still imported, but the configuration when I use the Polymer, while still in the HTML, is not imported properly.

Still, this seems promising. While not ideal to have to exclude JSON configuration in Polymers, it seems doable and seems, if anything, slightly easier than in the Dart equivalent.



Day #993

‹prev | My Chain | next›