Migration Guide

No guide or tools exist for converting old polymer.dart apps to Polymer 1.0. We recommend looking at examples that have already been converted:

• TodoMVC: old and new

• Stopwatch: diffs.

Stopwatch

The stopwatch example demonstrates a simple stopwatch using Polymer dart. It was originally implemented using a pre-1.0 version of Polymer dart and has been updated to 1.0. The following sections highlight the important changes. For each change, the relevant line number(s) are called out in parentheses.

pubspec.yaml

1. Change the polymer dependency to ^1.0.0 (5).
2. Add dependencies for web_components (6), browser (7), and reflectable (8).
3. Replace the polymer transformer with the web_components (10) and reflectable (13) transformers.
4. Add a constraint on the Dart SDK (17).
5. Add dependency overrides (19). This will no longer be required once the "behaviors" branch of polymer-dart is merged into the master branch.

index.dart

The index.dart file is not strictly needed, but is good practice. This kicks off the Polymer app.

index.html

1. Include the web_components (14), dart_support (15), and browser/dart (27) scripts.
2. Specify index.dart as the application/dart script (26).

tute_stopwatch.dart

1. Add a library name that has the @HtmlImports annotation (3 and 4). See Dart-to-HTML imports.
2. Import web_components.dart (10).
3. On the TuteStopWatch class, which extends PolymerElement, change the @CustomTag annotation to @PolymerRegister (12). See Registration and Lifecycle.
4. @observable is no longer supported. You can create this functionality by specifying @Property(observer: (15) on the variable, implementing an event handler (72), and calling notifyPath on the variable when value changes (67, 85).
5. The start (44), stop (54), reset (63), and updateTime (72) functions are now marked with the @eventHandler annotation. See Properties.
6. Whenever the value of the counter object, call notifyPath with the new value (67, 85). See Data Binding Syntax.

tute_stopwatch.html

1. Replace <polymer-element> tag with <dom-module>. See Local Dom.
2. Move the <style> tag (9-17) outside of <template>.
3. Remove all white space, including newlines, between the <div>/</div> tags and the curly braces (20). See Binding to text content.
4. Remove the curly braces around the stop, start, and reset functions (22,23,24).