Merge pull request #581 from kevmoo/polymer

lib/polymer_element.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library polymer.polymer_element;
 
 import 'dart:async';
 import 'dart:html';
 import 'dart:mirrors';
 
 import 'package:custom_element/custom_element.dart';
-import 'package:mdv/mdv.dart' as mdv;
+import 'package:fancy_syntax/syntax.dart' show FancySyntax;
+import 'package:mdv/mdv.dart' show NodeBinding;
 import 'package:observe/observe.dart';
+import 'package:observe/src/microtask.dart';
 
-import 'observe.dart';
 import 'src/utils_observe.dart' show toCamelCase, toHyphenedName;
 
 /**
  * Registers a [PolymerElement]. This is similar to [registerCustomElement]
  * but it is designed to work with the `<element>` element and adds additional
  * features.
  */
 void registerPolymerElement(String localName, PolymerElement create()) {
   registerCustomElement(localName, () => create().._initialize(localName));
 }
 
 /**
  * *Warning*: many features of this class are not fully implemented.
  *
  * The base class for Polymer elements. It provides convience features on top
  * of the custom elements web standard.
  *
  * Currently it supports publishing attributes via:
  *
  *     <element name="..." attributes="foo, bar, baz">
  *
  * Any attribute published this way can be used in a data binding expression,
  * and it should contain a corresponding DOM field.
  *
  * *Warning*: due to dart2js mirror limititations, the mapping from HTML
  * attribute to element property is a conversion from `dash-separated-words`
  * to camelCase, rather than searching for a property with the same name.
  */
 // TODO(jmesserly): fix the dash-separated-words issue. Polymer uses lowercase.
-abstract class PolymerElement extends CustomElement with _EventsMixin {
+class PolymerElement extends CustomElement with _EventsMixin {
   // This is a partial port of:
   // https://github.com/Polymer/polymer/blob/stable/src/attrs.js
   // https://github.com/Polymer/polymer/blob/stable/src/bindProperties.js
   // https://github.com/Polymer/polymer/blob/7936ff8/src/declaration/events.js
   // https://github.com/Polymer/polymer/blob/7936ff8/src/instance/events.js
   // TODO(jmesserly): we still need to port more of the functionality
 
+  /// The one syntax to rule them all.
+  static BindingDelegate _fancySyntax = new FancySyntax();
+
   // TODO(sigmund): delete. The next line is only added to avoid warnings from
   // the analyzer (see http://dartbug.com/11672)
   Element get host => super.host;
 
   bool get applyAuthorStyles => false;
   bool get resetStyleInheritance => false;
 
   /**
    * The declaration of this polymer-element, used to extract template contents
    * and other information.
@@ skipping 51 matching lines @@
   void created() {
     // TODO(jmesserly): this breaks until we get some kind of type conversion.
     // _publishedAttrs.forEach((name, propObserver) {
     // var value = attributes[name];
     //   if (value != null) propObserver.value = value;
     // });
     _initShadowRoot();
     _addHostListeners();
   }
 
+  /**
+   * Creates the document fragment to use for each instance of the custom
+   * element, given the `<template>` node. By default this is equivalent to:
+   *
+   *     template.createInstance(this, fancySyntax);
+   *
+   * Where fancySyntax is a singleton `FancySyntax` instance from the
+   * [fancy_syntax](https://pub.dartlang.org/packages/fancy_syntax) package.
+   *
+   * You can override this method to change the instantiation behavior of the
+   * template, for example to use a different data-binding syntax.
+   */
+  DocumentFragment instanceTemplate(Element template) =>
+      template.createInstance(this, _fancySyntax);
+
   void _initShadowRoot() {
     for (var localName in _localNames) {
       var declaration = getDeclaration(localName);
       var root = createShadowRoot(localName);
       _addInstanceListeners(root, localName);
 
       root.applyAuthorStyles = applyAuthorStyles;
       root.resetStyleInheritance = resetStyleInheritance;
 
       var templateNode = declaration.children.firstWhere(
           (n) => n.localName == 'template', orElse: () => null);
       if (templateNode == null) return;
 
-      root.nodes.add(cloneTemplate(templateNode.content));
-      // TODO(sigmund): use fancy-syntax as the default.
-      // TODO(sigmund,jmesserly): mdv.bindModel should be async internally
-      Timer.run(() => mdv.bindModel(root, this));
+      // Create the contents of the element's ShadowRoot, and add them.
+      root.nodes.add(instanceTemplate(templateNode));
     }
   }
 
-  void bind(String name, model, String path) {
+  NodeBinding createBinding(String name, model, String path) {
     var propObserver = _publishedAttrs[name];
     if (propObserver != null) {
-      unbind(name);
-
-      _bindings[name] = new PathObserver(model, path).bindSync((value) {
-        propObserver.value = value;
-      });
-      return;
+      return new _PolymerBinding(this, name, model, path, propObserver);
     }
-    return super.bind(name, model, path);
-  }
-
-  void unbind(String name) {
-    if (_bindings != null) {
-      var binding = _bindings.remove(name);
-      if (binding != null) {
-        binding.cancel();
-        return;
-      }
-    }
-    return super.unbind(name);
-  }
-
-  void unbindAll() {
-    for (var binding in _bindings.values) binding.cancel();
-    _bindings.clear();
-    return super.unbindAll();
+    return super.createBinding(name, model, path);
   }
 }
 
+class _PolymerBinding extends NodeBinding {
+  final PathObserver _publishedAttr;
+
+  _PolymerBinding(node, property, model, path, PathObserver this._publishedAttr)
+      : super(node, property, model, path);
+
+  void boundValueChanged(newValue) {
+    _publishedAttr.value = newValue;
+  }
+}
+
 /**
  * Polymer features to handle the syntactic sugar on-* to declare to
  * automatically map event handlers to instance methods of the [PolymerElement].
  * This mixin is a port of:
  * https://github.com/Polymer/polymer/blob/7936ff8/src/declaration/events.js
  * https://github.com/Polymer/polymer/blob/7936ff8/src/instance/events.js
  */
 abstract class _EventsMixin {
   // TODO(sigmund): implement the Dart equivalent of 'inheritDelegates'
   // Notes about differences in the implementation below:
@@ skipping 162 matching lines @@
     // dartbug.com/11108).
     var methodDecl = reflectClass(receiver.runtimeType).methods[method];
     if (methodDecl != null) {
       // This will either truncate the argument list or extend it with extra
       // null arguments, so it will match the signature.
       // TODO(sigmund): consider accepting optional arguments when we can tell
       // them appart from named arguments (see http://dartbug.com/11334)
       args.length = methodDecl.parameters.where((p) => !p.isOptional).length;
     }
     reflect(receiver).invoke(method, args);
+    performMicrotaskCheckpoint();
   }
 
   bool _instanceEventListener(String eventName, Event event) {
     if (event.bubbles) {
       if (event.path == null || !ShadowRoot.supported) {
         return _listenLocalNoEventPath(eventName, event);
       } else {
         return _listenLocal(eventName, event);
       }
     }
@@ skipping 141 matching lines @@
   'onKeyMessage': MediaElement.keyMessageEvent,
   'onNeedKey': MediaElement.needKeyEvent,
   'onWebGlContextLost': CanvasElement.webGlContextLostEvent,
   'onWebGlContextRestored': CanvasElement.webGlContextRestoredEvent,
   'onPointerLockChange': Document.pointerLockChangeEvent,
   'onPointerLockError': Document.pointerLockErrorEvent,
   'onReadyStateChange': Document.readyStateChangeEvent,
   'onSelectionChange': Document.selectionChangeEvent,
   'onSecurityPolicyViolation': Document.securityPolicyViolationEvent,
 };