Polymer Elements in Dart

So it seems that all of the Dart flavors of polymer elements and core elements are deprecated. But in favor of what?

My guess is that JavaScript core elements, like <core-ajax> are the intended replacement, so I give them a whirl tonight. My <x-pizza> custom pizza building element currently uses <polymer-ajax> to load the SVG images that comprise the pizza:



So I start by Bower installing core-ajax. To get that installation in the correct location (lib/elements), I edit .bowerrc:

{
  "directory": "lib/elements/bower_components"
}

Then, I create typical bower.json configuration file:

{
  "name": "svg_example",
  "version": "0.0.0",
  "homepage": "https://github.com/eee-c/polymer-patterns",
  "authors": [
    "Chris Strom "
  ],
  "description": "SVG Example (and more)",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "core-ajax": "Polymer/core-ajax#~0.3.1"
  }
}

This is already way more work than I want. With the Dart versions of the polymer elements, I could simply add them as dependencies in my elements pubspec.yaml. Now I have to maintain pubspec.yaml, bower.json, and .bowerrc. Hopefully that will not be the case in the final product. Anyhow, I run bower install and get a bunch of dependencies that I do not really want, but I do get the core-ajax package:

➜  dart git:(master) ✗ bower install --save Polymer/core-ajax
...
core-ajax#0.3.1 lib/elements/bower_components/core-ajax
└── polymer#0.3.1

polymer#0.3.1 lib/elements/bower_components/polymer
├── core-component-page#0.3.1
└── platform#0.3.1

platform#0.3.1 lib/elements/bower_components/platform

core-component-page#0.3.1 lib/elements/bower_components/core-component-page
├── platform#0.3.1
└── polymer#0.3.1

With that, I am ready to swap out the old Dart <polymer-ajax> with the JavaScript <core-ajax> in my Polymer element's x-pizza.html definition:

<!-- <link rel="import" -->
<!--       href="../../../packages/polymer_elements/polymer_ajax/polymer_ajax.html"> -->
<link rel="import"
      href="bower_components/core-ajax/core-ajax.html">
<polymer-element name="x-pizza">
  <template>
    <core-ajax
      auto
       id="pizza.svg"
       url="/packages/svg_example/images/pizza.svg"
       on-core-response="{{responseReceived}}"></core-ajax>
    <!-- ... -->
  </template>
  <script type="application/dart" src="x_pizza.dart"></script>
</polymer-element>

That produces a lovely multiple-load error when I try it out in Dartium:

Uncaught Possible attempt to load Polymer twice

So I hand edit the Bower installed core-xhr.html file to use the same polymer.html as is used by my Dart element:

<!-- <link rel="import" href="../polymer/polymer.html"> -->
<link rel="import" href="/packages/polymer/polymer.html">
<polymer-element name="core-xhr" hidden>
  <script>
    Polymer('core-xhr', {
       // ...
    });
  </script>
</polymer-element>

That actually gets the old-fashioned XHR request to fire. The <core-ajax> element even generates events that are invoked in my Dart code:

@CustomTag('x-pizza')
class XPizza extends PolymerElement {
  // ...
  responseReceived(e, detail, node){
    svgContent[node.id] = detail['response'];
    if (svgContent.length == shadowRoot.queryAll('core-ajax').length) {
      svgLoaded.complete();
    }
    if (node.id == 'pizza.svg') _updateGraphic();
  }
  // ...
}

BUT… there are no details supplied—either in the detail parameter or the detail property of the CustomEvent. This stumps me. My initial attempts to coerce the event into a ProgressEvent are ineffectual as are attempts to query the response attribute on the <core-ajax> element.

None of this feels terribly robust just yet. Unless I am missing something, there does not seem to be a clear upgrade path for these core elements in Dart. So it seems surprising that they would be deprecated. I will continue investigation tomorrow—perhaps there really is an easy way to do this, it would not be the first time that I missed something mind-blowingly obvious. But my initial thoughts are that Patterns in Polymer will likely continue to use the deprecated polymer_elements and core_elements packages for the foreseeable future.


Day #82

‹prev | My Chain | next›