fix #136, support watch exprs and two way bindings for component fields

lib/src/emitters.dart

 // Copyright (c) 2012, 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.
 
 /** Collects several code emitters for the template tool. */
 // TODO(sigmund): add visitor that applies all emitters on a component
 // TODO(sigmund): add support for conditionals, so context is changed at that
 // point.
 library emitters;
 
@@ skipping 164 matching lines @@
 /** Generates a field for any data-bound content node. */
 class ContentFieldEmitter extends Emitter<TextInfo> {
   ContentFieldEmitter(TextInfo info) : super(info);
 
   void emitDeclarations(Context context) {
     context.declarations.add('var ${info.identifier};');
   }
 
   void emitCreated(Context context) {
     context.createdMethod.add(
-        '${info.identifier} = autogenerated.nodeForBinding(${info.binding});');
+        "${info.identifier} = new autogenerated.Text('');");
   }
 
   void emitRemoved(Context context) {
     context.removedMethod.add("${info.identifier} = null;");
   }
 }
 
 
 /**
  * Generates event listeners attached to a node and code that attaches/detaches
@@ skipping 123 matching lines @@
   void _emitStyleAttributeInserted(
       String stoppers, AttributeInfo attr, CodePrinter printer) {
     var id = info.identifier;
     var binding = attr.boundValue;
     printer.add('$stoppers.add(autogenerated.bindStyle($id, () => $binding));');
   }
 
   void _emitSimpleAttributeInserted(
       String stoppers, String name, AttributeInfo attr, CodePrinter printer) {
     var binding = attr.boundValue;
-    var setter = _findDomSetter(info.node, name);
+    var field = _findDomField(info, name);
     printer.add('$stoppers.add(autogenerated.watchAndInvoke(() => $binding, '
-        '(__e) { ${info.identifier}.$setter = __e.newValue; }));');
+        '(__e) { ${info.identifier}.$field = __e.newValue; }));');
+
+    if (attr.customTwoWayBinding) {
+      printer.add('$stoppers.add(autogenerated.watchAndInvoke(')
+             .add('() => ${info.identifier}.$field, ')
+             .add('(__e) { $binding = __e.newValue; }));');
+    }
   }
 
   void _emitTextAttributeInserted(
       String stoppers, String name, AttributeInfo attr, CodePrinter printer) {
     var textContent = attr.textContent.map(escapeDartString);
-    var setter = _findDomSetter(info.node, name);
+    var setter = _findDomField(info, name);
     var content = new StringBuffer();
     var binding;
     if (attr.bindings.length == 1) {
       binding = attr.boundValue;
       content.add(textContent[0]);
       content.add('\${__e.newValue}');
       content.add(textContent[1]);
     } else {
       // TODO(jmesserly): we could probably do something faster than a list
       // for watching on multiple bindings.
@@ skipping 34 matching lines @@
  *
  * And the component has been defined as:
  *
  *    <element name="x-hello" extends="div" constructor="HelloComponent">
  *      <template>Hello, <content>!</template>
  *      <script type="application/dart"></script>
  *    </element>
  *
  * This will ensure that the Dart HelloComponent for `x-hello` is created and
  * attached to the appropriate DOM node.
- *
- * Also, this copies values from the scope into the object at component creation
- * time, for example:
- *
- *     <x-foo data-value="bar:baz">
- *
- * This will set the "bar" property of FooComponent to be "baz".
  */
 class ComponentInstanceEmitter extends Emitter<ElementInfo> {
   ComponentInstanceEmitter(ElementInfo info) : super(info);
 
   void emitCreated(Context context) {
     var component = info.component;
     if (component == null) return;
 
     var id = info.identifier;
-    context.createdMethod.add(
-        'var component$id = new ${component.constructor}.forElement($id);');
+    context.createdMethod.add('new ${component.constructor}.forElement($id)');
 
+    // Note: this feature is deprecated and will be removed.
     info.values.forEach((name, value) {
-      context.createdMethod.add('component$id.$name = $value;');
+      context.createdMethod.add('..$name = $value');
     });
 
-    context.createdMethod.add('component$id.created_autogenerated();')
-                         .add('component$id.created();')
-                         .add('component$id.composeChildren();');
+    context.createdMethod.add('..created_autogenerated()')
+                         .add('..created()')
+                         .add('..composeChildren();');
   }
 
   void emitInserted(Context context) {
     if (info.component == null) return;
 
     // Note: watchers are intentionally hooked up after inserted() has run,
     // in case it makes any changes to the data.
     var id = info.identifier;
-    context.insertedMethod.add('$id.xtag.inserted();')
-                          .add('$id.xtag.inserted_autogenerated();');
+    context.insertedMethod.add('$id.xtag..inserted()')
+                          .add('..inserted_autogenerated();');
   }
 
   void emitRemoved(Context context) {
     if (info.component == null) return;
 
     var id = info.identifier;
-    context.removedMethod.add('$id.xtag.removed_autogenerated();')
-                         .add('$id.xtag.removed();');
+    context.removedMethod.add('$id.xtag..removed_autogenerated()')
+                         .add('..removed();');
   }
 }
 
 /**
  * Emitter of template conditionals like `<template instantiate="if test">` or
  * `<td template instantiate="if test">`.
  *
  * For a template element, we leave the (childless) template element in the
  * tree and use it as a reference point for child insertion. This matches
  * native MDV behavior.
@@ skipping 465 matching lines @@
   }
   return 'new autogenerated.$constructor';
 }
 
 /**
  * Finds the correct expression to set an HTML attribute through the DOM.
  * It is important for correctness to use the DOM setter if it is available.
  * Otherwise changes will not be applied. This is most easily observed with
  * "InputElement.value", ".checked", etc.
  */
-String _findDomSetter(Element node, String name) {
-  var typeName = typeForHtmlTag(node.tagName);
+String _findDomField(ElementInfo info, String name) {
+  var typeName = typeForHtmlTag(info.baseTagName);
   while (typeName != null) {
     var fields = htmlElementFields[typeName];
     if (fields != null) {
-      var setter = fields[name];
-      if (setter != null) return setter;
+      var field = fields[name];
+      if (field != null) return field;
     }
     typeName = htmlElementExtends[typeName];
   }
-  // If we didn't find a DOM setter, use the attributes map instead.
-  return 'attributes["$name"]';
+  // If we didn't find a DOM setter, and this is a component, set a property on
+  // the component.
+  if (info.component != null && !name.startsWith('data-')) {
+    return 'xtag.$name';
+  }
+  return "attributes['$name']";
 }