Well, that simplifies things.
I spent yesterday sorting out some testing confusion between early the 0.10 and current 0.9 versions of Polymer.dart. I was able to get the 0.9 testing working to my satisfaction, but noticed that an annotation that I thought was 0.10 worked in 0.9. Or at least had an effect—it broke my tests entirely. I planned to investigate today, but then the Polymer.dart team went and released 0.10. So let's see how that works...
First off, even though 0.10 is no longer pre-release, one of its dependencies is. When I
pub upgrade, I still get the 0.9 version of Polymer—presumably because a dependency is blocking it:➜ dart git:(master) pub upgrade Resolving dependencies... (22.1s) ... polymer 0.9.5+2 (1 newer version available) ... No dependencies changed.So, even though Polymer.dart 0.10 is ready, I still need to peg the version dependency in
pubspec.yaml:name: svg_example
dependencies:
polymer: ">=0.10.0 <0.11.0"
polymer_elements: any
dev_dependencies:
scheduled_test: any
transformers:
- polymer:
entry_points: web/index.htmlThat's not a huge deal in normal code—in fact, it is a recommended practice. But in my book code, it's a minor hassle. I prefer to track the latest release so that I can see when chapters break. Pinning the code in a bunch of chapters manually with each release is going to be problematic. I will worry about that later. For now, I try my tests only to get two failures and no tests run:CONSOLE MESSAGE: warning: polymer_ajax.html not found. CONSOLE ERROR: Exception: Bad state: polymer.js must be loaded before polymer.dart, please add <link rel="import" href="packages/polymer/polymer.html" > to your <head> before any Dart scripts. Alternatively you can get a different version of polymer.js by following the instructions at http://www.polymer-project.org; if you do that be sure to include the platform polyfills.I will worry about
<polymer-ajax> / <core-ajax> / <javascript-ajax> another time. I think that I can run my tests without them. But I need to figure out that second error.In the 0.9 version of Polymer.dart, I had to manually invoke
initPolymer() inside my tests to make them work. I have no idea how the console message's instructions to add a <link> tag will impact that, but there is one way to find out. In the test/index.html testing context page, I add the described <link> tag:<head> <!-- Load Polymer --> <link rel="import" href="packages/polymer/polymer.html"> <!-- Load component(s) --> <link rel="import" href="packages/svg_example/elements/x-pizza.html"> <!-- The actual tests --> <script type="application/dart" src="test.dart"></script> <script src="packages/unittest/test_controller.js"></script> </head>Aside from the absence of
;component=1 on the type attribute of the test.dart <script> tag, this is now identical to what I had been using in the 0.10 pre-release version of Polymer.dart. The ;component=1 was the means by which Polymer.dart kept all web components executing in the same code isolate. It was also part of the mechanism by which the Polymer platform started up, replacing the 0.9 initPolymer(). But, for now, I leave initPolymer() in the main entry point of my test/test.dart test script:library x_pizza_test;
import 'package:polymer/polymer.dart';
// Other imports...
main() {
initPolymer();
// Tests here...
}
And, when I run my tests now, I see:➜ dart git:(master) ✗ content_shell --dump-render-tree test/index.html #READY CONSOLE MESSAGE: warning: polymer_ajax.html not found. CONSOLE MESSAGE: unittest-suite-wait-for-done CONSOLE MESSAGE: PASS: [defaults] it has no toppings CONSOLE MESSAGE: PASS: [adding toppings] updates the pizza state accordingly CONSOLE MESSAGE: CONSOLE MESSAGE: All 2 tests passed. CONSOLE MESSAGE: unittest-suite-success CONSOLE WARNING: line 213: PASSUh... yay? Er… I mean yay! I knew that would work.
But that is only half of today's battle. I have the test passing, but what about the actual web application that uses this
<x-pizza> custom element? In 0.9, I had been loading it by linking the definition with a <link> tag, then using Polymer.dart's init code to initPolymer():<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- Load component(s) -->
<link rel="import" href="packages/svg_example/elements/x-pizza.html">
<!-- Load Polymer -->
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
</head>
<body>
<div class="container">
<h1>Ye Olde Dart Pizza Shoppe</h1>
<x-pizza toppings="pepperoni,sausage"></x-pizza>
</div>
</body>
</html>That fails however on build:[Warning from polymer (Linter) on svg_example|web/index.html]: web/index.html:15:3: Besides the initPolymer invocation, to run a polymer application you need to include the following HTML import: <link rel="import" href="packages/polymer/polymer.html">. This will include the common polymer logic needed to boostrap your application. Build completed successfullyAnd it fails on loading in Dartium as well:
ShadowDOMPolyfill polyfill was loaded in Dartium. This will not work. This indicates that Dartium's Chrome version is not compatible with this version of web_components. dart_support.js:10The pre-release 0.10 version of Polymer.dart did away with
init.dart in favor of a linked polymer.html definition. The final release seems to retain init.dart and load polymer.html: <!-- Load Polymer -->
<link rel="import" href="packages/polymer/polymer.html">
<!-- Load component(s) -->
<link rel="import" href="packages/svg_example/elements/x-pizza.html">
<!-- Start Polymer -->
<script type="application/dart">
export 'package:polymer/init.dart';
</script><link> tag for packages/polymer/polymer.html.I am not quite done with the upgrade, however. I still need
<polymer-ajax> working. With all of the Dart packages seemingly deprecated, it seems like I need the JavaScript version of that element (and any other Polymer/Core elements that I might want to use). I will investigate that tomorrow. I also still need to figure out what the @initMethod annotation does, but that will likely wait for another day.Day #81
No comments:
Post a Comment