Monday, June 2, 2014

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

3 comments:


  1. This is what Seth Ladd says:

    "The Polymer.dart team intends to ship a package of the core- elements for Dart developers."

    https://github.com/bwu-dart/core_elements/pull/49

    "This project is now unmaintained and unsupported by the Polymer team. Polymer.dart 0.10.0 should "just work" with the polymer.js core-* elements. I believe the plan is to publish a pub package with core-* elements, but I'm not 100% sure. Perhaps there is some bower/pub interop, too. Emailing web@dartlang.org is a good place for questions like this."
    https://github.com/bwu-dart/polymer_ui_elements/pull/171

    ReplyDelete
    Replies
    1. Thanks. The problem is, as I found, that the core-* elements do not, in fact, just work. Unless I am doing something wrong. That's entirely possible (and usually probable), but others seem to indicate that they have run into similar issues. Perhaps this deprecation was a little premature :-\

      Delete
    2. I agree, I think it's a bit premature too.

      Delete