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

‹prev | My Chain | next›