Updating Polymer to derive from custom elements.

pkg/polymer/lib/src/instance.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.
 
 part of polymer;
 
 /**
  * Use this annotation to publish a field as an attribute. For example:
  *
  *     class MyPlaybackElement extends PolymerElement {
  *       // This will be available as an HTML attribute, for example:
  *       //     <my-playback volume="11">
  *       @published double volume;
  *     }
  */
 // TODO(jmesserly): does @published imply @observable or vice versa?
 const published = const PublishedProperty();
 
 /** An annotation used to publish a field as an attribute. See [published]. */
 class PublishedProperty extends ObservableProperty {
   const PublishedProperty();
 }
 
-// TODO(jmesserly): make this the mixin so we can have Polymer type extensions,
-// and move the implementation of PolymerElement in here. Once done it will look
-// like:
-// abstract class Polymer { ... all the things ... }
-// typedef PolymerElement = HtmlElement with Polymer, Observable;
-abstract class Polymer {
+/**
+ * The mixin class for Polymer elements. It provides convenience features on top
+ * of the custom elements web standard.
+ */
+abstract class Polymer implements Element {
+  // Fully ported from revision:
+  // https://github.com/Polymer/polymer/blob/4dc481c11505991a7c43228d3797d28f21267779
+  //
+  //   src/instance/attributes.js
+  //   src/instance/base.js
+  //   src/instance/events.js
+  //   src/instance/mdv.js
+  //   src/instance/properties.js
+  //   src/instance/utils.js
+  //
+  // Not yet ported:
+  //   src/instance/style.js -- blocked on ShadowCSS.shimPolyfillDirectives
+
+
   // TODO(jmesserly): should this really be public?
   /** Regular expression that matches data-bindings. */
   static final bindPattern = new RegExp(r'\{\{([^{}]*)}}');
 
   /**
    * Like [document.register] but for Polymer elements.
    *
    * Use the [name] to specify custom elment's tag name, for example:
    * "fancy-button" if the tag is used as `<fancy-button>`.
    *
    * The [type] is the type to construct. If not supplied, it defaults to
    * [PolymerElement].
    */
   // NOTE: this is called "element" in src/declaration/polymer-element.js, and
   // exported as "Polymer".
   static void register(String name, [Type type]) {
     //console.log('registering [' + name + ']');
     if (type == null) type = PolymerElement;
-    _registerClassMirror(name, reflectClass(type));
-  }
 
-  // TODO(jmesserly): we use ClassMirror internall for now, until it is possible
-  // to get from ClassMirror -> Type.
-  static void _registerClassMirror(String name, ClassMirror type) {
     _typesByName[name] = type;
     // notify the registrar waiting for 'name', if any
     _notifyType(name);
   }
-}
-
-/**
- * The base class for Polymer elements. It provides convience features on top
- * of the custom elements web standard.
- */
-class PolymerElement extends CustomElement with ObservableMixin {
-  // Fully ported from revision:
-  // https://github.com/Polymer/polymer/blob/4dc481c11505991a7c43228d3797d28f21267779
-  //
-  //   src/instance/attributes.js
-  //   src/instance/base.js
-  //   src/instance/events.js
-  //   src/instance/mdv.js
-  //   src/instance/properties.js
-  //   src/instance/utils.js
-  //
-  // Not yet ported:
-  //   src/instance/style.js -- blocked on ShadowCSS.shimPolyfillDirectives
 
   /// The one syntax to rule them all.
   static final BindingDelegate _polymerSyntax = new PolymerExpressions();
 
   static int _preparingElements = 0;
 
   PolymerDeclaration _declaration;
 
   /** The most derived `<polymer-element>` declaration for this element. */
   PolymerDeclaration get declaration => _declaration;
@@ skipping 26 matching lines @@
    * Gets the shadow root associated with the corresponding custom element.
    *
    * This is identical to [shadowRoot], unless there are multiple levels of
    * inheritance and they each have their own shadow root. For example,
    * this can happen if the base class and subclass both have `<template>` tags
    * in their `<polymer-element>` tags.
    */
   // TODO(jmesserly): Polymer does not have this feature. Reconcile.
   ShadowRoot getShadowRoot(String customTagName) => _shadowRoots[customTagName];
 
-  ShadowRoot createShadowRoot([name]) {
-    if (name != null) {
-      throw new ArgumentError('name argument must not be supplied.');
-    }
-
-    // Provides ability to traverse from ShadowRoot to the host.
-    // TODO(jmessery): remove once we have this ability on the DOM.
-    final root = super.createShadowRoot();
-    _shadowHost[root] = host;
-    return root;
-  }
-
   /**
    * Invoke [callback] in [wait], unless the job is re-registered,
    * which resets the timer. For example:
    *
    *     _myJob = job(_myJob, callback, const Duration(milliseconds: 100));
    *
    * Returns a job handle which can be used to re-register a job.
    */
   Job job(Job job, void callback(), Duration wait) =>
       runJob(job, callback, wait);
 
   // TODO(jmesserly): I am not sure if we should have the
   // created/createdCallback distinction. See post here:
   // https://groups.google.com/d/msg/polymer-dev/W0ZUpU5caIM/v5itFnvnehEJ
   // Same issue with inserted and removed.
-  void created() {
+  void initialize() {
     if (document.window != null || alwaysPrepare || _preparingElements > 0) {
       prepareElement();
     }
   }
 
   void prepareElement() {
     // Dart note: get the _declaration, which also marks _elementPrepared
-    _declaration = _getDeclaration(reflect(this).type);
+    _declaration = _getDeclaration(this.runtimeType);
     // do this first so we can observe changes during initialization
     observeProperties();
     // install boilerplate attributes
     copyInstanceAttributes();
     // process input attributes
     takeAttributes();
     // add event listeners
     addHostListeners();
     // guarantees that while preparing, any sub-elements will also be prepared
     _preparingElements++;
     // process declarative resources
     parseDeclarations(_declaration);
     _preparingElements--;
     // user entry point
     ready();
   }
 
   /** Called when [prepareElement] is finished. */
   void ready() {}
 
-  void inserted() {
+  void enteredView() {
     if (!_elementPrepared) {
       prepareElement();
     }
     cancelUnbindAll(preventCascade: true);
   }
 
-  void removed() {
+  void leftView() {
     asyncUnbindAll();
   }
 
   /** Recursive ancestral <element> initialization, oldest first. */
   void parseDeclarations(PolymerDeclaration declaration) {
     if (declaration != null) {
       parseDeclarations(declaration.superDeclaration);
-      parseDeclaration(declaration.host);
+      parseDeclaration(declaration);
     }
   }
 
   /**
    * Parse input `<polymer-element>` as needed, override for custom behavior.
    */
   void parseDeclaration(Element elementElement) {
     var root = shadowFromTemplate(fetchTemplate(elementElement));
 
     // Dart note: this is extra code compared to Polymer to support
@@ skipping 11 matching lines @@
   Element fetchTemplate(Element elementElement) =>
       elementElement.query('template');
 
   /** Utility function that creates a shadow root from a `<template>`. */
   ShadowRoot shadowFromTemplate(Element template) {
     if (template == null) return null;
     // cache elder shadow root (if any)
     var elderRoot = this.shadowRoot;
     // make a shadow root
     var root = createShadowRoot();
+
+    // Provides ability to traverse from ShadowRoot to the host.
+    // TODO(jmessery): remove once we have this ability on the DOM.
+    _shadowHost[root] = this;
+
     // migrate flag(s)(
     root.applyAuthorStyles = applyAuthorStyles;
     root.resetStyleInheritance = resetStyleInheritance;
     // stamp template
     // which includes parsing and applying MDV bindings before being
     // inserted (to avoid {{}} in attribute values)
     // e.g. to prevent <img src="images/{{icon}}"> from generating a 404.
     var dom = instanceTemplate(template);
     // append to shadow dom
     root.append(dom);
@@ skipping 14 matching lines @@
   }
 
   /** Locate nodes with id and store references to them in [$] hash. */
   void marshalNodeReferences(ShadowRoot root) {
     if (root == null) return;
     for (var n in root.queryAll('[id]')) {
       $[n.id] = n;
     }
   }
 
-  void attributeChanged(String name, String oldValue) {
+  void attributeChanged(String name, String oldValue, String newValue) {

[blois, 2013/10/11 22:40:12]

Note that this is a new breaking change for Polymer as well.

     if (name != 'class' && name != 'style') {
-      attributeToProperty(name, attributes[name]);
+      attributeToProperty(name, newValue);
     }
   }
 
   // TODO(jmesserly): use stream or future here?
   /**
    * Run the `listener` callback *once*
    * when `node` changes, or when its children or subtree changes.
-   * 
+   *
    *
    * See [MutationObserver] if you want to listen to a stream of
    * changes.
    */
   void onMutation(Node node, void listener(MutationObserver obs)) {
     new MutationObserver((records, MutationObserver observer) {
       listener(observer);
       observer.disconnect();
     })..observe(node, childList: true, subtree: true);
   }
@@ skipping 118 matching lines @@
     if (property != null) {
       unbind(name);
       // use n-way Polymer binding
       var observer = bindProperty(property.simpleName, model, path);
       // reflect bound property to attribute when binding
       // to ensure binding is not left on attribute if property
       // does not update due to not changing.
       reflectPropertyToAttribute(name);
       return bindings[name] = observer;
     } else {
-      return super.bind(name, model, path);
+      // Cannot call super.bind because of
+      // https://code.google.com/p/dart/issues/detail?id=13156
+      // https://code.google.com/p/dart/issues/detail?id=12456
+      return TemplateElement.mdvPackage(this).bind(name, model, path);
     }
   }
 
   void asyncUnbindAll() {
     if (_unbound == true) return;
     _unbindLog.info('[$localName] asyncUnbindAll');
     _unbindAllJob = job(_unbindAllJob, unbindAll, const Duration(seconds: 0));
   }
 
   void unbindAll() {
     if (_unbound == true) return;
 
     unbindAllProperties();
-    super.unbindAll();
+    // Cannot call super.bind because of
+    // https://code.google.com/p/dart/issues/detail?id=13156
+    // https://code.google.com/p/dart/issues/detail?id=12456
+    TemplateElement.mdvPackage(this).unbindAll();
+
     _unbindNodeTree(shadowRoot);
     // TODO(sjmiles): must also unbind inherited shadow roots
     _unbound = true;
   }
 
   void cancelUnbindAll({bool preventCascade}) {
     if (_unbound == true) {
       _unbindLog.warning(
           '[$localName] already unbound, cannot cancel unbindAll');
       return;
@@ skipping 235 matching lines @@
     }
     self.invoke(methodName, args);
 
     if (log) _eventsLog.info('<<< [$localName]: dispatch $methodName');
 
     // TODO(jmesserly): workaround for HTML events not supporting zones.
     performMicrotaskCheckpoint();
   }
 
   void instanceEventListener(Event event) {
-    _listenLocal(host, event);
+    _listenLocal(this, event);
   }
 
   // TODO(sjmiles): much of the below privatized only because of the vague
   // notion this code is too fiddly and we need to revisit the core feature
-  void _listenLocal(Element host, Event event) {
+  void _listenLocal(Polymer host, Event event) {
     // TODO(jmesserly): do we need this check? It was using cancelBubble, see:
     // https://github.com/Polymer/polymer/issues/292
     if (!event.bubbles) return;
 
     bool log = _eventsLog.isLoggable(Level.INFO);
     if (log) _eventsLog.info('>>> [$localName]: listenLocal [${event.type}]');
 
     final eventOn = '$_EVENT_PREFIX${_eventNameFromType(event.type)}';
     if (event.path == null) {
       _listenLocalNoEventPath(host, event, eventOn);
     } else {
       _listenLocalEventPath(host, event, eventOn);
     }
 
     if (log) _eventsLog.info('<<< [$localName]: listenLocal [${event.type}]');
   }
 
-  static void _listenLocalEventPath(Element host, Event event, String eventOn) {
+  static void _listenLocalEventPath(Polymer host, Event event, String eventOn) {
     var c = null;
     for (var target in event.path) {
       // if we hit host, stop
       if (identical(target, host)) return;
 
       // find a controller for the target, unless we already found `host`
       // as a controller
       c = identical(c, host) ? c : _findController(target);
 
       // if we have a controller, dispatch the event, and stop if the handler
       // returns true
       if (c != null && _handleEvent(c, target, event, eventOn)) {
         return;
       }
     }
   }
 
   // TODO(sorvell): remove when ShadowDOM polyfill supports event path.
   // Note that _findController will not return the expected controller when the
   // event target is a distributed node.  This is because we cannot traverse
   // from a composed node to a node in shadowRoot.
   // This will be addressed via an event path api
   // https://www.w3.org/Bugs/Public/show_bug.cgi?id=21066
-  static void _listenLocalNoEventPath(Element host, Event event,
+  static void _listenLocalNoEventPath(Polymer host, Event event,
       String eventOn) {
 
     if (_eventsLog.isLoggable(Level.INFO)) {
       _eventsLog.info('event.path() not supported for ${event.type}');
     }
 
     var target = event.target;
     var c = null;
     // if we hit dirt or host, stop
     while (target != null && target != host) {
       // find a controller for target `t`, unless we already found `host`
       // as a controller
       c = identical(c, host) ? c : _findController(target);
 
       // if we have a controller, dispatch the event, return 'true' if
       // handler returns true
       if (c != null && _handleEvent(c, target, event, eventOn)) {
         return;
       }
       target = target.parent;
     }
   }
 
   // TODO(jmesserly): this won't find the correct host unless the ShadowRoot
   // was created on a PolymerElement.
-  static Element _findController(Node node) {
+  static Polymer _findController(Node node) {
     while (node.parentNode != null) {
       node = node.parentNode;
     }
     return _shadowHost[node];
   }
 
-  static bool _handleEvent(Element ctrlr, Node node, Event event,
+  static bool _handleEvent(Polymer ctrlr, Node node, Event event,
       String eventOn) {
 
     // Note: local events are listened only in the shadow root. This dynamic
     // lookup is used to distinguish determine whether the target actually has a
     // listener, and if so, to determine lazily what's the target method.
     var name = node is Element ? (node as Element).attributes[eventOn] : null;
     if (name != null && _handleIfNotHandled(node, event)) {
       if (_eventsLog.isLoggable(Level.INFO)) {
         _eventsLog.info('[${ctrlr.localName}] found handler name [$name]');
       }
       var detail = event is CustomEvent ?
           (event as CustomEvent).detail : null;
 
       if (node != null) {
         // TODO(jmesserly): cache symbols?
-        ctrlr.xtag.dispatchMethod(new Symbol(name), [event, detail, node]);
+        ctrlr.dispatchMethod(new Symbol(name), [event, detail, node]);
       }
     }
 
     // TODO(jmesserly): do we need this? It was using cancelBubble, see:
     // https://github.com/Polymer/polymer/issues/292
     return !event.bubbles;
   }
 
   // TODO(jmesserly): I don't understand this bit. It seems to be a duplicate
   // delivery prevention mechanism?
@@ skipping 140 matching lines @@
     }
   }
   return type;
 }
 
 final Logger _observeLog = new Logger('polymer.observe');
 final Logger _eventsLog = new Logger('polymer.events');
 final Logger _unbindLog = new Logger('polymer.unbind');
 final Logger _bindLog = new Logger('polymer.bind');
 
-final Expando _shadowHost = new Expando<Element>();
+final Expando _shadowHost = new Expando<Polymer>();
 
 final Expando _eventHandledTable = new Expando<Set<Node>>();
+
+/**
+ * Base class for PolymerElements deriving from HtmlElement.
+ *
+ * See [Polymer].
+ */
+class PolymerElement extends HtmlElement with Polymer, ObservableMixin {
+  PolymerElement.created() : super.created() {
+    initialize();
+  }
+}