Add support for custom elements to MDV

sdk/lib/html/dart2js/html_dart2js.dart

 /// The Dart HTML library.
 library dart.dom.html;
 
 import 'dart:async';
 import 'dart:collection';
 import 'dart:_collection-dev' hide Symbol;
 import 'dart:html_common';
 import 'dart:indexed_db';
 import 'dart:isolate';
 import 'dart:json' as json;
@@ skipping 7368 matching lines @@
     return e is Element && !(e is UnknownElement);
   }
 
   /**
    * Called by the DOM when this element has been instantiated.
    */
   @Experimental
   void onCreated() {}
 
   // Hooks to support custom WebComponents.
+
+  @Creates('Null')  // Set from Dart code; does not instantiate a native type.
+  Element _xtag;
+
   /**
    * Experimental support for [web components][wc]. This field stores a
    * reference to the component implementation. It was inspired by Mozilla's
    * [x-tags][] project. Please note: in the future it may be possible to
    * `extend Element` from your class, in which case this field will be
-   * deprecated and will simply return this [Element] object.
+   * deprecated.
+   *
+   * If xtag has not been set, it will simply return `this` [Element].
    *
    * [wc]: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html
    * [x-tags]: http://x-tags.org/
    */
-  @Creates('Null')  // Set from Dart code; does not instantiate a native type.
-  var xtag;
+  Element get xtag => _xtag != null ? _xtag : this;
+
+  void set xtag(Element value) {
+    _xtag = value;
+  }
 
   /**
    * Scrolls this element into view.
    *
    * Only one of of the alignment options may be specified at a time.
    *
    * If no options are specified then this will attempt to scroll the minimum
    * amount needed to bring the element into view.
    *
    * Note that alignCenter is currently only supported on WebKit platforms. If
@@ skipping 203 matching lines @@
 
   // TODO(jmesserly): this is static to work around http://dartbug.com/10166
   // Similar issue for unbind/unbindAll below.
   static void _bindElement(Element self, String name, model, String path) {
     if (self._bindTemplate(name, model, path)) return;
 
     if (self._attributeBindings == null) {
       self._attributeBindings = new Map<String, StreamSubscription>();
     }
 
-    self.attributes.remove(name);
+    self.xtag.attributes.remove(name);
 
     var changed;
     if (name.endsWith('?')) {
       name = name.substring(0, name.length - 1);
 
       changed = (value) {
         if (_templateBooleanConversion(value)) {
-          self.attributes[name] = '';
+          self.xtag.attributes[name] = '';
         } else {
-          self.attributes.remove(name);
+          self.xtag.attributes.remove(name);
         }
       };
     } else {
       changed = (value) {
         // TODO(jmesserly): escape value if needed to protect against XSS.
         // See https://github.com/toolkitchen/mdv/issues/58
-        self.attributes[name] = value == null ? '' : '$value';
+        self.xtag.attributes[name] = value == null ? '' : '$value';
       };
     }
 
     self.unbind(name);
 
     self._attributeBindings[name] =
         new PathObserver(model, path).bindSync(changed);
   }
 
   @Experimental
@@ skipping 18820 matching lines @@
         var value = values[i];
         if (value != null) {
           newValue.write(value);
         }
       }
     }
 
     return newValue.toString();
   };
 
-  node.bind(name, replacementBinding, 'value');
+  _nodeOrCustom(node).bind(name, replacementBinding, 'value');
 }
 
 void _bindOrDelegate(node, name, model, String path,
     CustomBindingSyntax syntax) {
 
   if (syntax != null) {
     var delegateBinding = syntax.getBinding(model, path, name, node);
     if (delegateBinding != null) {
       model = delegateBinding;
       path = 'value';
     }
   }
 
-  node.bind(name, model, path);
+  _nodeOrCustom(node).bind(name, model, path);
 }
 
+/**
+ * Gets the [node]'s custom [Element.xtag] if present, otherwise returns
+ * the node. This is used so nodes can override [Node.bind], [Node.unbind],
+ * and [Node.unbindAll] like

[Siggi Cherem (dart-lang), 2013/05/13 16:42:13]

like ... ?

[Jennifer Messerly, 2013/05/13 19:42:41]

hah, not sure what happened. Fixed :)

+ */
+// TODO(jmesserly): remove this when we can extend Element for real.
+_nodeOrCustom(node) => node is Element ? node.xtag : node;

[blois, 2013/05/13 17:45:13]

Can this have a return type?

Also, possibly make it a static method somewhere? Since this is in a ginormous
library it's nice to avoid library functions when possible- they tend to get
lost.

[Jennifer Messerly, 2013/05/13 19:42:41]

It cannot, unless the type is Object :). I had "Node" there but sometimes
"CustomBinding" is used. :(

One thing I'd like to fix (at some point) is to either not use CustomBinding
like that, or at least create an interface with bind/unbind/unbindAll.
All methods in this file are top-level, so I presume you mean convert the entire
file? :)

Although it technically violates rule #1 of the Dart style guide :), I'm
sympathetic that dart:html has special constraints. Here's a proposal: after
this CL lands I move all top-levels in TemplateBindings to be static methods on
some class ("_Bindings"?). Sound good?

[Jennifer Messerly, 2013/05/13 20:24:36]

follow up on static methods:
https://codereview.chromium.org/14634011/

+
 class _BindingToken {
   final String value;
   final bool isBinding;
 
   _BindingToken(this.value, {this.isBinding: false});
 
   bool get isText => !isBinding;
 }
 
 List<_BindingToken> _parseMustacheTokens(String s) {
@@ skipping 39 matching lines @@
       fragment.$dom_firstChild, fragment.$dom_lastChild, model);
 
   var node = instanceRecord.firstNode;
   while (node != null) {
     node._templateInstance = instanceRecord;
     node = node.nextNode;
   }
 }
 
 void _removeAllBindingsRecursively(Node node) {
-  node.unbindAll();
+  _nodeOrCustom(node).unbindAll();
   for (var c = node.$dom_firstChild; c != null; c = c.nextNode) {
     _removeAllBindingsRecursively(c);
   }
 }
 
 void _removeTemplateChild(Node parent, Node child) {
   child._templateInstance = null;
   if (child is Element && child.isTemplate) {
     // Make sure we stop observing when we remove an element.
     var templateIterator = child._templateIterator;
@@ skipping 1382 matching lines @@
       _position = nextPosition;
       return true;
     }
     _current = null;
     _position = _array.length;
     return false;
   }
 
   T get current => _current;
 }