Thursday, June 5, 2014

Non-Worky Attempts at Core Elements in Polymer.dart


I have complete faith that the Polymer.dart developers will resolve the core-* elements problem in good order. Even so, I would like to take a quick look again tonight to see if it might be possible to better install core elements without waiting. This will likely wind up more of an exercise in Bower mechanics than anything else, but we'll see...

The problem is that there is currently no way to install core-* elements (e.g. <core-ajax>) with Polymer.dart. The Dart version of all of these elements have all been deprecated and most did not work anyway because of a late change to the 0.10 version of Polymer.dart. Exacerbating the problem is that installing with Bower—which is already a pain in a Dart project—does not work because the core-* elements look for a different polymer.html than the one used by Polymer.dart. This results in double-loading exceptions. There are even problems with event data between the JavaScript core-* elements and Polymer.dart custom elements. I am not going to attempt to investigate that—I am more interested in seeing what, if anything, Bower can do to help the situation.

Previously, I had to hand-edit the Bower installed <core-ajax> element so that it uses the same polymer.html as Polymer.dart:
<!-- <link rel="import" href="../polymer/polymer.html"> -->
<link rel="import" href="/packages/polymer/polymer.html">
I had hoped to find a location to bower install these core elements, but I see that is not going to work. For the installed ../polymer/polymer.html to resolve to /packages/polymer/polymer.html, I would need this to be an actual Dart package.

Bummer.

Or is it? Maybe this would work as a separate pub package? This is definitely veering into Polymer.dart team territory, but, I am curious. I start with a new local directory and add a pubspec.yaml:
name: eee_core_ajax
version: 0.0.1
description: Core elements for Polymer
author: Chris Strom 
I specify the lib directory for installation:
.bowerrc:
{
  "directory": "lib"
}
Next, I create a blank bower.json config file for my “Dart” package:
{
  "name": "eee_core_ajax",
  "version": "0.0.1",
  "authors": [
    "Chris Strom "
  ],
  "description": "Core ajax for use in Dart",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
  }
}
I add the latest <core-ajax> as:
➜  dart-core-ajax  bower install -S Polymer/core-ajax
bower core-ajax#*               cached git://github.com/Polymer/core-ajax.git#0.3.1
bower core-ajax#*             validate 0.3.1 against git://github.com/Polymer/core-ajax.git#*
bower polymer#>=0.3.0 <1.0.0    cached git://github.com/Polymer/polymer.git#0.3.1
bower polymer#>=0.3.0 <1.0.0  validate 0.3.1 against git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0
bower platform#>=0.3.0 <1.0.0   cached git://github.com/Polymer/platform.git#0.3.1
bower platform#>=0.3.0 <1.0.0 validate 0.3.1 against git://github.com/Polymer/platform.git#>=0.3.0 <1.0.0
bower core-component-page#>=0.3.0 <1.0.0           cached git://github.com/Polymer/core-component-page.git#0.3.1
bower core-component-page#>=0.3.0 <1.0.0         validate 0.3.1 against git://github.com/Polymer/core-component-page.git#>=0.3.0 <1.0.0
bower core-ajax#~0.3.1                            install core-ajax#0.3.1
bower polymer#>=0.3.0 <1.0.0                      install polymer#0.3.1
bower platform#>=0.3.0 <1.0.0                     install platform#0.3.1
bower core-component-page#>=0.3.0 <1.0.0          install core-component-page#0.3.1

core-ajax#0.3.1 lib/core-ajax
└── polymer#0.3.1

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

platform#0.3.1 lib/platform

core-component-page#0.3.1 lib/core-component-page
├── platform#0.3.1
└── polymer#0.3.1
Ah, nuts. That's not going to work. My core-ajax package is going to include a core-ajax sub-directory with that setup:
➜  dart-core-ajax  tree -L 2                       
.
├── bower.json
├── lib
│   ├── core-ajax
│   ├── core-component-page
│   ├── platform
│   └── polymer
└── pubspec.yaml

5 directories, 2 files
Bother. I remove the .bowerrc file, re-install everything in <package-root>/bower_components and manually copy the contents of bower_components/core-ajax into lib:
➜  dart-core-ajax  cp -r bower_components/core-ajax/* lib
Back in my original Polymer.dart code, I add this local directory as a dependency in pubspec.yaml:
name: svg_example
dependencies:
  polymer: ">=0.10.0 <0.11.0"
  eee_core_ajax:
    path: /home/chris/repos/dart-core-ajax
dev_dependencies:
  scheduled_test: any
transformers:
- polymer:
    entry_points: web/index.html
Now, my Polymer element definition template needs to point to this new local package:
<link rel="import"
      href="../../../packages/eee_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>
But, when I try to start pub serve, I get:
package:eee_core_ajax/core-xhr.html:23:1: don't know how to include eee_core_ajax|polymer/polymer.html from svg_example|web/index.html
Dang it. I could write a transformer—or even a script to change the value of the core-* link tag, but this already looking like too much work. Best to call it a night here and move on to more fertile territory tomorrow.

Day #85

4 comments:

  1. Chris,
    Any guess to when the developers will enable core elements in Polymer.dart? By i/o? I am afraid it doesn't seem like a high priority. It would be nice to learn Polymer and Dart together - make one big investment. Do you know of any other element libraries that offers similar building blocks?

    ReplyDelete
    Replies
    1. To be fair, JavaScript core-* elements already work in Polymer.dart -- you just need to hand-edit some of the files and they work fine (to reference the Dart polymer.html instead of the JS one). Well, except for the occasional bugs like events not containing data.

      As for when core-* elements will work without issue, I'm not sure. They prolly don't want to rush into a solution only to have to make a big change shortly thereafter. Hopefully soon though!

      Delete
  2. I don't think they will enable the dart versions of the core elements for quiet a long time, if ever. My take from following the conservation about this on the lists is that they don't want to duplicate the names of already existing Polymer JS elements. The Dart core-elements was one such clash. They would rather we name them something different like x-core-ajax so it doesn't clash with the JS versions namespace. They also see this as a pragmatic move. Why put in all the effort to replicate already existing code, when in theory they should just work with each other. There is already an update of polymer_expressions to help with interop, like handling === and !== operators. (That was me who filed the bug on that one :-) ), plus a few other things to make using JS versions in Dart projects easier. I wouldn't recommend using polymer_expressions 0.11.0 yet, I found it broke some of my code.

    ReplyDelete
    Replies
    1. Agreed, but I would hope that they would make it possible to drop the core- elements into a Dart application without manual changes. Either as a thin wrapper around the JS version (like I tried here) or by addressing the duplicate polymer.html issue (maybe as a transformer).

      Delete