When last I tried to use Core Element in Polymer.dart, it did not go well. I know the team has made incredible progress in the interim, so tonight seems an opportune time to find out how much better things are.
The Core and Paper element work that I have been building in the JavaScript
<x-pizza> element should be a solid test. I start, as I do with all Dart projects, with a pubspec.yaml including Paper and Core dependencies:name: paper
dependencies:
polymer: any
core_elements: any
paper_elements: any
dev_dependencies:
scheduled_test: any
transformers:
- polymer:
entry_points:
- web/index.html
- test/index.htmlA quick pub install and I should be good to go:$ pub install Resolving dependencies... (1.4s) Downloading paper_elements 0.1.0+3... Downloading core_elements 0.1.1+2... Downloading quiver 0.18.2... Got dependencies!I add some initial core imports and elements to the
<x-pizza-toppings> child element:<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="../../../packages/core_elements/core_icons.html">
<link rel="import" href="../../../packages/core_elements/core_item.html">
<polymer-element name="x-pizza-toppings">
<template>
<!-- ... -->
<template repeat="{{ingredient in ingredients}}">
<core-item
icon="add-circle"
label="{{ingredient}}"
on-tap="{{add}}">
</core-item>
</template>
<!-- ... -->
</template>
<script type="application/dart" src="x_pizza_toppings.dart"></script>
</polymer-element>And, when I load things up in Dartium, I get a nice old failure:Exception: Unsupported operation: Couldn't find `document._registerDartTypeUpgrader`. Please make sure that `packages/web_components/dart_support.js` is loaded and available before calling this function.Aha! So that is what the
dart_support.js script does. I know that it is included in generated Polymer.dart code, but until now I could find no use for it.To resolve, I add this back in the main
index.html page that pulls in Polymer, the Polymer elements that I want to use, and initializes everything:<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load platform polyfills -->
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<!-- Load component(s) -->
<link rel="import"
href="packages/paper/elements/x-pizza.html">
<!-- Start 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></x-pizza>
</div>
</body>
</html>
That aside, there are relatively few issues that I have to address converting the <x-pizza> element from JavaScript to Dart. I have to mark properties that are used in the template as @observable. I believe that was the only “significant” change required and it was not that difficult.I do note that I can omit the import of transitions (i.e. the hero transition code). When I was building the JavaScript version, I thought this was required, but even after double checking the JavaScript version, it seems that importing the
core-animated-pages is sufficient to pull in the transition code, which makes sense:<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="../../../packages/core_elements/core_icon.html">
<link rel="import" href="../../../packages/core_elements/core_pages.html">
<link rel="import" href="../../../packages/core_elements/core_animated_pages.html">
<link rel="import" href="x-pizza-toppings.html">
<polymer-element name="x-pizza">
<template>
<!-- ... -->
<core-animated-pages selected="{{toppingsListOrDetails}}" transitions="hero-transition">
<!-- ... -->
</core-animated-pages>
</template>
<script type="application/dart" src="x_pizza.dart"></script>
</polymer-element>
And all of this works just fine:Well, maybe 100% fine. I need to figure out why the icons are the wrong size. There is also a flash of unstyled CSS when the page first loads. I think this would not be an issue if the element were compiled to JavaScript (instead of loaded via
pub serve)—something to check another day. Those minor issues aside, this worked pretty well. Infinitely better than the last time I tried it!Day #156
No comments:
Post a Comment