Migration Guide

Your best bet is to look at examples that have already been converted:

• TodoMVC: diffs
• Tutorial examples diffs

The rest of this page has details on the conversion of Stopwatch.

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).
3. Add a constraint on the Dart SDK (17).

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 @reflectable 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. Remove all white space, including newlines, between the <div>/</div> tags and the curly braces (20). See Binding to text content.
3. Remove the curly braces around the stop, start, and reset functions (22,23,24).