A Solution for Karma Testing Polymer on IE (10 & 11)

I coded in WordPad yesterday. 15 years of successfully repressing that sensation and now I fear I may never recover.

Still, I successfully got Karma & Jasmine to test Polymer code with Internet Explorer yesterday. So it was worth it. Kinda.

Regardless, I am happy to have gotten testing of Polymer on IE working, but I still have a few outstanding questions that I'd like answered before moving on to less traumatizing subjects. My IE Polymer tests work with karma-ie-launcher and IE10. I would like to be able to run karma-webdriver-launcher and use it on both IE10 and IE11.

Switching to karam-webdriver-launcher would mean no more WordPad coding (since the code resides on the host machine, not the guest VM), so I will start there. I already have Karma configuration in place that should work:

module.exports = function(config) {
  config.set({
    // ...
    // Use IP so Windows guest VM can connect to host Karma server
    hostname: '192.168.1.129',
    customLaunchers: {
      'IE10': {
        base: 'WebDriver',
        config: {
          hostname: 'localhost',
          port: 4410
        },
        browserName: 'internet explorer',
        name: 'Karma'
      }
    },
    browsers: ['IE10']
  });
};

I was able to use this to connect to webdriver on Windows the other day, I just could not get the tests to pass. Without changing the tests, I still get very unhelpful failures:

$ karma start --single-run 
INFO [karma]: Karma v0.12.28 server started at http://192.168.1.129:9876/
INFO [launcher]: Starting browser internet explorer via Remote WebDriver
INFO [IE 10.0.0 (Windows 8)]: Connected on socket WUsG_gAEAHJFhm1lLF0G with id 61543069
IE 10.0.0 (Windows 8) ERROR
  Object doesn't support property or method 'indexOf'
  at /home/chris/repos/polymer-book/play/plain_forms/js/node_modules/karma-jasmine/lib/jasmine.js:1759
IE 10.0.0 (Windows 8): Executed 1 of 3 ERROR (0.645 secs / 0.547 secs)

This indexOf failure seems to come from calling a “contains” matcher in my tests on undefined values. As I found yesterday, that is more of a symptom of larger Karma issues than individual test failures.

So I try yesterday's wait-a-browser-event-loop / set-timeout-zero solution in my tests:

  describe('properties', function(){
    it('updates value when internal state changes', function(done) {
      el.model.firstHalfToppings.push('pepperoni');
      el.async(function(){
        setTimeout(function(){
          expect(el.value).toContain('pepperoni');
          done();
        }, 0);
      });
    });
  });

The el here is my <x-pizza> pizza building Polymer element. The asyc() method from Polymer accepts a callback that will be invoked after Polymer has updated the UI and all bound variables. That works on its own in Chrome and Firefox, but, as I found yesterday, Polymer's IE implementation seems to have a bug that requires an additional browser event loop before everything is ready.

And, with that set-timeout-zero, I have my IE WebDriver tests passing:

$ karma start --single-run 
INFO [karma]: Karma v0.12.28 server started at http://192.168.1.129:9876/
INFO [launcher]: Starting browser internet explorer via Remote WebDriver
INFO [IE 10.0.0 (Windows 8)]: Connected on socket oggMD2c6Q8c4-xq-Lk_- with id 68843724
IE 10.0.0 (Windows 8): Executed 3 of 3 SUCCESS (0.54 secs / 0.543 secs)

So what about IE11? Things were even worse in that VM because I have yet to get the console in the Web Developer Tools to start successfully, making troubleshooting next to impossible. Perhaps the set-timeout-zero fix works there as well?

In the Windows VM, I fire up a good old command prompt (I can't believe that it hasn't changed in 10+ years). In there, I start WebDriver via the webdriver node.js package:

C:\Users\IEUser>webdriver-manager start --seleniumPort 4411

I run the IE10 WebDriver on port 4410 and the IE11 WebDriver on 4411. So I update my karma.conf.js accordingly:

module.exports = function(config) {
  config.set({
    // ...
    // Use IP so Windows guest VM can connect to host Karma server
    hostname: '192.168.1.129',

    customLaunchers: {
      'IE10': { /* ... */ },
      'IE11': {
        base: 'WebDriver',
        config: {
          hostname: 'localhost',
          port: 4411
        },
        browserName: 'internet explorer',
        name: 'Karma'
      }
    },

    browsers: ['IE11']
  });
};

Unfortunately, when I try to run the same Karma tests against IE11, I find:

$ karma start --single-run 
INFO [karma]: Karma v0.12.28 server started at http://192.168.1.129:9876/
INFO [launcher]: Starting browser Internet Explorer 11 via Remote WebDriver
INFO [IE 11.0.0 (Windows 7)]: Connected on socket xu5uT_EaFT6kfCVrTOpE with id 86153250
IE 11.0.0 (Windows 7) <x-pizza> properties updates value when internal state changes FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:29:7)
IE 11.0.0 (Windows 7) <x-pizza> syncing <input> values updates the input FAILED
...
IE 11.0.0 (Windows 7): Executed 3 of 3 (2 FAILED) (0.4 secs / 0.396 secs)
INFO [WebDriver]: Killed Karma test.

For whatever reason, it seems that my Polymer element is taking more than the usual single event loop to register in IE11. A single event loop is all that is required in Chrome, Firefox, and IE10. But IE11 requires an additional 10 milliseconds before it is ready:

describe('<x-pizza>', function(){
  var el, container;

  beforeEach(function(done){
    container = document.createElement("div");
    container.innerHTML = '<x-pizza></x-pizza>';
    document.body.appendChild(container);
    el = document.querySelector('x-pizza');

    setTimeout(done, 10); // Delay for elements to register in Polymer
  });

  describe('properties', function(){
    it('updates value when internal state changes', function(done) {
      // Same async + set-timeout-zero test here...
    });
  });
});

With that, I have my tests passing on IE11:

$ karma start --single-run 
INFO [karma]: Karma v0.12.28 server started at http://192.168.1.129:9876/
INFO [launcher]: Starting browser Internet Explorer 11 via Remote WebDriver
INFO [IE 11.0.0 (Windows 7)]: Connected on socket sQqPBHAEvsL1ujLtULSD with id 7115351
IE 11.0.0 (Windows 7): Executed 3 of 3 SUCCESS (0.634 secs / 0.566 secs)

And this seems to work reliably. I run through 10 single-run rounds of tests and all pass each time. If I drop down to 2 milliseconds, then tests start failing on occasion. If I really, really needed IE testing, I might bump these timeout delays for 50 or 100 milliseconds. For now, I'm just happy with a reliable local solution.

So it is ugly. It is rife with callbacks, set-timeout-zeros and other more arbitrary set-timeouts. But I have a working solution for testing Polymer on Internet Explorer. And I didn't even need to fire up WordPad.


Day #38

‹prev | My Chain | next›

Finally, Testing Polymer in Internet Explorer

I am not fond of Internet Explorer. The reasons are myriad, but not terribly helpful. Despite my dislike, I must admit that it tends to fail in ways that make sense. More often than not, when troubleshooting an “IE bug” I find myself wondering how code works in other browsers. Maybe that will wind up being the case with my Polymer testing woes.

I am running tests for my <x-pizza> Polymer element with Karma. The tests are written with the Jasmine testing library and look like:

describe('<x-pizza>', function(){
  var el, container;
  beforeEach(function(done){
    // Create <x-pizza> el and other setup...
  });
  // ...
  describe('properties', function(){
    it('updates value when internal state changes', function(done) {
      el.model.firstHalfToppings.push('pepperoni');
      el.async(function(){
        expect(el.value).toContain('pepperoni');
        done();
      });
    });
  });
});

The error for the past two nights (with karma-webdriver-launcher and karma-ie-launcher) occurs when I try to access the firstHalfToppings property of model. In the test, it is undefined:

C:\Users\IEUser\plain_old_forms>node node_modules\karma\bin\karma start --single-run --browsers IE
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser IE
INFO [IE 11.0.0 (Windows 7)]: Connected on socket qNf8JVIEqjDNilL7AQFH with id 9528228
IE 11.0.0 (Windows 7) <x-pizza> properties updates value when internal state changes FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:29:7)

But if I fire this element up in a web page, that property is very definitely defined:



After much futzing, I eventually trace this not to my code, but to Polymer's async() method, which comes on the line after the failure message. Things got so wonky that failures in previous tests would break other tests in non-helpful ways. Only after running single tests — with Karma/Jasmine's ddescribe() / iit() — was I able to identify the culprit as async(), which my test uses:

    it('updates value when internal state changes', function(done) {
      el.model.firstHalfToppings.push('pepperoni');
      el.async(function(){
        expect(el.value).toContain('pepperoni');
        done();
      });
    });

Polymer elements expose this method as a callback mechanism. The supplied callback (my test's assertion in this case), is only invoked once Polymer has updated the UI and all bound variables. This is ideal for testing because the test can be assured that all of the Polymer element's properties and visualizations have been updated—at least in Chrome and Firefox.

In Internet Explorer, it seems that nothing is updated until one more browser event loop. In other words, I have to wait for a setTimeout-0 in addition to the async() callback:

it('updates value when internal state changes', function(done) {
      el.model.firstHalfToppings.push('pepperoni');
      el.async(function(){
        setTimeout(function(){
          expect(el.value).toContain('pepperoni');
          done();
        }, 0);
      });
    });

This quite definitely fixes the test. I have other tests that magically pass with the addition of a setTimeout-0, but reliably fail without.

And once again, after some investigation of an “IE Bug,” I am left with a code error that is not IE's fault. This is almost certainly a Polymer bug. The entire point of async() is that the element is updated when the supplied callback is invoked. That I have to wait for another event loop on top of this seems quite wrong.


Day #37

‹prev | My Chain | next›

Polymer and Karma-Ie-Launcher

Testing in Internet Explorer is a low priority for me. It always seems to be more effort than it is worth, given its dwindling market share. Still, I recognize that there is value and that some folks need it. So, even if I will not run automated tests for the code in Patterns in Polymer, I would like to be able to tell people that it does work.

Except that I was unable to get karma-webdriver-launcher to launch IE tests against Polymer last night. I suspect that the problems lie with WebDriver, so tonight, I try karma-ie-launcher instead.

First, I copy the code and tests onto my Windows VM. In there I add karma-ie-launcher to the list of NPM package.json dependencies:

{
  "name": "plain_old_forms",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-watch": "~0.5.0",
    "karma-jasmine": "~0.2.0",
    "karma-ie-launcher": ">0.0"
  }
}

After an npm install, I try to start Karma:

C:\Users\IEUser\plain_old_forms>karma start --single-run --browsers IE
'karma' is not recognized as an internal or external command,
operable program or batch file.

OK, so I install it globally:

C:\Users\IEUser\plain_old_forms>npm install -g karma
npm WARN optional dep failed, continuing fsevents@0.3.1

> ws@0.4.32 install C:\Users\IEUser\AppData\Roaming\npm\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

C:\Users\IEUser\AppData\Roaming\npm\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
karma@0.12.28 C:\Users\IEUser\AppData\Roaming\npm\node_modules\karma
├── ...

With that, when I try Karma now, I get:

C:\Users\IEUser\plain_old_forms>karma start --single-run --browsers IE
'karma' is not recognized as an internal or external command,
operable program or batch file.

Sigh. It looks like I need the full path instead:

C:\Users\IEUser\plain_old_forms>node node_modules\karma\bin\karma start --single-run --browsers IE
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser IE
WARN [watcher]: Pattern "C:/Users/IEUser/plain_old_forms/bower_components/webcomponentsjs/webcomponents.js" does not match any file.
WARN [watcher]: Pattern "C:/Users/IEUser/plain_old_forms/bower_components/**" does not match any file.
INFO [IE 11.0.0 (Windows 7)]: Connected on socket _0g9fTtXw2PJOCjb5b2y with id 98303942
IE 11.0.0 (Windows 7) <x-pizza> element content has a shadow DOM FAILED
        ReferenceError: 'Polymer' is undefined
           at waitForPolymer (C:/Users/IEUser/plain_old_forms/test/PolymerSetup.js:19:5)
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/PolymerSetup.js:29:3)
...
IE 11.0.0 (Windows 7): Executed 3 of 3 (3 FAILED) ERROR (0.047 secs / 0.038 secs)

Oops! I neglected to bower install my client-side dependencies (this time I globally install from the start):

C:\Users\IEUser\plain_old_forms>npm install -g bower
C:\Users\IEUser\AppData\Roaming\npm\bower -> C:\Users\IEUser\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.12 C:\Users\IEUser\AppData\Roaming\npm\node_modules\bower
└── ...

That does get installed in a useful location and it works… to a point:

C:\Users\IEUser\plain_old_forms>bower install
bower polymer#*                 ENOGIT git is not installed or not in the PATH

So it seems that I need Git installed to work with Polymer on Windows. This is already more trouble than it is worth to me, but I must see it through. I install Git the usual way and accept all of the default options but one:



This will allow bower to access Git when running from the command prompt:

C:\Users\IEUser\plain_old_forms>bower install
...
a-form-input#0.0.1 bower_components\a-form-input
└── polymer#0.5.2
polymer#0.5.2 bower_components\polymer
├── core-component-page#0.5.2
└── webcomponentsjs#0.5.2
core-component-page#0.5.2 bower_components\core-component-page
├── polymer#0.5.2
└── webcomponentsjs#0.5.2
webcomponentsjs#0.5.2 bower_components\webcomponentsjs

Yay!

Now, when I karma, I find:

C:\Users\IEUser\plain_old_forms>node node_modules\karma\bin\karma start --single-run --browsers IE
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser IE
INFO [IE 11.0.0 (Windows 7)]: Connected on socket qNf8JVIEqjDNilL7AQFH with id 9528228
IE 11.0.0 (Windows 7) <x-pizza> properties updates value when internal state changes FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:29:7)
IE 11.0.0 (Windows 7) <x-pizza> syncing <input> values updates the input FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:42:7)
        TypeError: Unable to get property 'value' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:47:7)
IE 11.0.0 (Windows 7): Executed 3 of 3 (2 FAILED) (0.453 secs / 0.444 secs)

Dang it! Those are the same errors that I saw yesterday with WebDriver. So it seems that this is a problem with IE and Polymer rather than WebDriver. The failure is occurring when the test adds a topping to the first half of the pizza being built by the <x-pizza> Polymer element:

  describe('properties', function(){
    it('updates value when internal state changes', function(done) {
      el.model.firstHalfToppings.push('pepperoni');
      el.async(function(){
        expect(el.value).toContain('pepperoni');
        done();
      });
    });
  });

This works in Chrome and Firefox, but it seems that I need a different approach in Internet Explorer. Unfortunately, the web developer tools are still broken in my install so this is going to be tricky to troubleshoot.



Day #36

‹prev | My Chain | next›

Karma IE Testing of Polymer Elements with WebDriver

I think I am resigned to Karma as the best solution for Polymer—especially for the testing chapters in Patterns in Polymer. My experience with WebDriver, and Protractor in particular, made this a tougher decision than I expected. In the end, the combination of WebDriver's lack of shadow DOM support (kinda important with Polymer) and conceptual overload lead me to set Protractor aside. For now.

There are two things that I will miss from Protactor: wait-for-element baked in to element finders and easy Internet Explorer testing. There is not much to be done with async testing in Karma—that is more or less up to the testing library, most of which rely on done() callbacks. Those work, but are not as nice as Protractor's promise-based finders. I can live without them—especially in the book. But crazy as it might seem, I would like to be able to test on Internet Explorer.

In Protractor, I could establish a WebDriver instance in a Windows VM that my Protractor tests could drive from my Linux box. In Karma, I think I am stuck with karma-ie-launcher. There is not a ton of documentation on that project, but I assume that I would have to install Node.js, Karma, and my code on the Windows VM in order to make that work. I much prefer the code residing entirely on my machine with only a WebDriver instance running on the Windows VM.

Enter karma-webdriver-launcher. I add it to the list of NPM package dependencies:

{
  "name": "plain_old_forms",
  "devDependencies": {
    // ....
    "karma-webdriver-launcher": "~ 1.0.1"
  }
}

And then install:

$ npm install

karma-webdriver-launcher@1.0.1 node_modules/karma-webdriver-launcher
└── wd@0.2.8 (vargs@0.1.0, async@0.2.10, q@0.9.7, underscore.string@2.3.3, archiver@0.4.10, lodash@1.3.1, request@2.21.0)

To use in my Karma configuration, I add a custom launcher for IE11:

module.exports = function(config) {
  var webdriverConfig = {
    hostname: 'localhost',
    port: 4411
  };

  config.set({
    // ...
    customLaunchers: {
      'IE11': {
        base: 'WebDriver',
        config: webdriverConfig,
        browserName: 'internet explorer',
        name: 'Karma'
      }
    },

    browsers: ['IE11']
  });
};

I already have WebDriver installed on my Windows VM via the webdriver Node.js package. I start it with:

C:\Users\IEUser>webdriver-manager start --seleniumPort=4411

(I also have port forwarding to 4411 in place)

Then I run the tests from my Linux box, or I try. Instead of successful or failing tests, I see an error:

$ karma start --single-run
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
...
INFO [launcher]: Trying to start internet explorer via Remote WebDriver again (2/2).
WARN [launcher]: internet explorer via Remote WebDriver have not captured in 60000 ms, killing.
INFO [WebDriver]: Killed Karma test.
ERROR [launcher]: internet explorer via Remote WebDriver failed 2 times (timeout). Giving up.

On the Windows side, I see that I am unable to connect to the Karma server on port 9876:



I was unaware of this, but it is possible to set the hostname for the Karma web server in the configuration file. So I add the IP address of my Linux box:

  config.set({
    // ...
    hostname: '192.168.1.129',

    customLaunchers: {
      'IE11': {
        base: 'WebDriver',
        config: webdriverConfig,
        browserName: 'internet explorer',
        name: 'Karma'
      }
    },
    browsers: ['IE11']
  });

And that actually works:

$ karma start --single-run
INFO [karma]: Karma v0.12.28 server started at http://192.168.1.129:9876/
INFO [launcher]: Starting browser internet explorer via Remote WebDriver
INFO [IE 11.0.0 (Windows 7)]: Connected on socket JiWBPa2Dzoq-fiGXsSvi with id 96899745
IE 11.0.0 (Windows 7) <x-pizza> properties updates value when internal state changes FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:29:7)
IE 11.0.0 (Windows 7) <x-pizza> syncing <input> values updates the input FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:42:7)
        TypeError: Unable to get property 'value' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:47:7)
IE 11.0.0 (Windows 7): Executed 3 of 3 (2 FAILED) (0.415 secs / 0.409 secs)
INFO [WebDriver]: Killed Karma test.

Well, it kind of works.

The connection is made and one of the test even passes. The two failing tests seem an awful lot like WebDriver and Polymer issues that I have seen over the past two weeks. Satisfied that I can connect, I will call it a night here. I may investigate the failures tomorrow.


Day #35

‹prev | My Chain | next›

MutationObserver as a Best (Dart) Practice for Watching Polymers

It's always something. At least that's how it feels sometime when coding Polymer.dart. Working with observable attributes does not always work with raw Dart. If you run the code through the Polymer asset transform for Dart Pub, then observables work fine in Dartium. But then, of course, things need to be compiled to JavaScript to work across the modern web (except for unstable Chrome). That usually works…

But it did not work for last night's code that tried to listen to the changes stream for a Polymer:

    // DOESN"T WORK IN IE!!!!!!!!!!!!!!!!!
    el.changes.listen((changes) {
      changes.forEach((change) {
        print(
          '[changes] '
          '${change.name} changed '
          'from: ${change.oldValue} '
          'to: ${change.newValue}.'
        );
      });
    });

Well, it works in Firefox, but when I try to load this in Internet Explorer, I get Object doesn't support property or method get$changes:



At this point, there is precious little that I can do about that specific error. Between the observable woes, the compile time, things not working in the dev channel version of Chrome, I feel as if I am working too much with the proverbial spit and duct tape already. So I abandon listening to the changes property, at least for the purposes of using it in Patterns in Polymer. Instead, I fallback to the JavaScript solution, which is to use mutation observers.

Mutation observers are a new browser standard that watch for changes (change watcher just doesn't sound as cool as mutation observer). Since they are new, they are not supported by Internet Explorer 10. But, unlike the changes property which does not seem to get translated by dart2js, mutation observers do compile—even down to Internet Explorer 10.

So the above changes based code becomes:

    var observer = new MutationObserver((mutations, _) {
      mutations.forEach((mutation) {
        print(
          '[mutation] ' +
          mutation.attributeName +
          ' is now: ' +
          mutation.target.attributes[mutation.attributeName]
        );
      });
    });
    observer.observe(el, attributes: true);

Just as I found with the JavaScript MutationObserver, the constructor for a Dart MutationObserver takes a callback function that will be invoked whenever observed changes are seen. For some reason the Dart callback requires two parameters, the second is the observer instance that was just created. Since I need that in scope for the call to observer.observe() anyway, I just stick with a placeholder variable for the second parameter.

With that, I have a Dart solution for observing Polymers that works. Even in IE:



Bother. I suppose I cannot complain too much. Living life on the bleeding edge for books like Patterns in Polymer fairly well invites struggles like this. Still, it forces me to keep a delicate balance between understanding what really works today and what is likely to work as readers are trying to use the book. In this case, I will likely stick with MutationObserver, if only because it fits the existing narrative a little better. Still, I would venture to guess that this will work in all supported IEs once IE 12 comes along and everyone can abandon IE 10. For me, that day can't come soon enough.

Day #1,015

‹prev | My Chain | next›

Polymer.Dart in IE

The browser wars are long since over, won by Firefox when it reached 10% market share ca. 2005. Once that inflection point hit, it was impossible to target a single browser without alienating 1 out of every ten potential customers. At this point, it hardly matters which browser is “winning.” If a particular browser or browser version has 10% or more of the market share, we developers have to support it. If a particular browser or browser version has less than 10%, then we have to make a cost-benefit judgment on whether to support it.

That said, I rather like the approach of Dart and Polymer (and others): support only the most recent versions of evergreen (self-updating) browsers. To be sure, applications that are delivered today would ignore a fair portion of potential customers (10%-25% depending on which damn statistics you believe). But the cost of maintaining libraries and codebases for antique browsers is high—often prohibitively so. And as modern, evergreen browsers like Chrome, Firefox and Internet Explorer continue to evolve, the number of ignored potential customers goes down rapidly.

Bottom line: supporting browsers like Internet Explore 10+ is important. I have every reason to expect that Polymer, Dart, and even Polymer.dart will work on IE. But I have not tried it yet. I create a “hello world” type Polymer.dart application (actually, copy it from Patterns in Polymer) and serve it up via pub serve. When run in Dartium, the bound variables update the title and the button randomly changes the color in the same title:



My next step is to add the Polymer transformer to pubspec.yaml so that pub can transform this into JavaScript for other browsers:

name: ie
dependencies:
  polymer: any
  observe: "0.9.0+1"
dev_dependencies:
  unittest: any
transformers:
- polymer:
    entry_points: web/index.html

Only that doesn't work. Even in Dartium, I now find that my Polymer is being ignored. It is almost as if it is not being loaded from the lib directory.

After checking the sample ToDo MVC code, it seems that is exactly what is going on. In there, they have all of the Polymers in sub-directories of web.

So I copy my elements from the lib directory into web/elements:

➜  dart git:(master) ✗ cd web
➜  web git:(master) ✗ mkdir elements
➜  web git:(master) ✗ cd elements
➜  elements git:(master) ✗ cp -r ../../lib/hello* 

Then I update the page to point to the new location of the Polymer:

    <!-- Load component(s) -->
    <link rel="import" href="elements/hello-you.html">
    <!-- Load Polymer -->
    <script type="application/dart">
      export 'package:polymer/init.dart';
    </script>
    <script src="packages/browser/dart.js"></script>

And I restart pub serve. With that, I have my Polymer.dart application serving up properly—even on Internet Explorer:



I will have to dig into the lib vs. web directory locations a bit more. I suspect that I need to package my Polymers for pub deployment rather than serving them from lib. For now, I am happy to have a proof of concept Polymer.dart successfully running under Internet Explorer.


Day #970

‹prev | My Chain | next›