feat(compiler): support on- and []

Author: tbosch

modules/core/src/compiler/element_binder.js

@@ -1,5 +1,6 @@
 import {ProtoElementInjector} from './element_injector';
 import {FIELD} from 'facade/lang';
+import {MapWrapper} from 'facade/collection';
 import {AnnotatedType} from './annotated_type';
 // Comment out as dartanalyzer does not look into @FIELD
 // import {List} from 'facade/collection';
@@ -11,12 +12,15 @@ export class ElementBinder {
   @FIELD('final templateDirective:AnnotatedType')
   @FIELD('final textNodeIndices:List<int>')
   @FIELD('hasElementPropertyBindings:bool')
-  constructor(protoElementInjector: ProtoElementInjector, componentDirective:AnnotatedType, templateDirective:AnnotatedType) {
+  constructor(
+    protoElementInjector: ProtoElementInjector, componentDirective:AnnotatedType, templateDirective:AnnotatedType) {
     this.protoElementInjector = protoElementInjector;
     this.componentDirective = componentDirective;
     this.templateDirective = templateDirective;
+    // updated later when events are bound
+    this.events = null;
     // updated later when text nodes are bound
-    this.textNodeIndices = [];
+    this.textNodeIndices = null;
     // updated later when element properties are bound
     this.hasElementPropertyBindings = false;
     // updated later, so we are able to resolve cycles

modules/core/src/compiler/pipeline/compile_element.js

@@ -20,6 +20,7 @@ export class CompileElement {
     this._classList = null;
     this.textNodeBindings = null;
     this.propertyBindings = null;
+    this.eventBindings = null;
     this.variableBindings = null;
     this.decoratorDirectives = null;
     this.templateDirective = null;
@@ -84,6 +85,13 @@ export class CompileElement {
     MapWrapper.set(this.variableBindings, contextName, templateName);
   }
 
+  addEventBinding(eventName:string, expression:ASTWithSource) {
+    if (isBlank(this.eventBindings)) {
+      this.eventBindings = MapWrapper.create();
+    }
+    MapWrapper.set(this.eventBindings, eventName, expression);
+  }
+
   addDirective(directive:AnnotatedType) {
     var annotation = directive.annotation;
     if (annotation instanceof Decorator) {

modules/core/src/compiler/pipeline/element_binder_builder.js

@@ -33,6 +33,7 @@ import {CompileControl} from './compile_control';
  * - CompileElement#inheritedProtoElementInjector
  * - CompileElement#textNodeBindings
  * - CompileElement#propertyBindings
+ * - CompileElement#eventBindings
  * - CompileElement#decoratorDirectives
  * - CompileElement#componentDirective
  * - CompileElement#templateDirective
@@ -60,6 +61,9 @@ export class ElementBinderBuilder extends CompileStep {
       if (isPresent(current.propertyBindings)) {
         this._bindElementProperties(protoView, current);
       }
+      if (isPresent(current.eventBindings)) {
+        this._bindEvents(protoView, current);
+      }
       this._bindDirectiveProperties(this._collectDirectives(current), current);
     } else if (isPresent(parent)) {
       elementBinder = parent.inheritedElementBinder;
@@ -79,6 +83,12 @@ export class ElementBinderBuilder extends CompileStep {
     });
   }
 
+  _bindEvents(protoView, compileElement) {
+    MapWrapper.forEach(compileElement.eventBindings, (expression, eventName) => {
+      protoView.bindEvent(eventName,  expression.ast);
+    });
+  }
+
   _collectDirectives(compileElement) {
     var directives;
     if (isPresent(compileElement.decoratorDirectives)) {

modules/core/src/compiler/pipeline/element_binding_marker.js

@@ -19,6 +19,7 @@ const NG_BINDING_CLASS = 'ng-binding';
  * - CompileElement#textNodeBindings
  * - CompileElement#propertyBindings
  * - CompileElement#variableBindings
+ * - CompileElement#eventBindings
  * - CompileElement#decoratorDirectives
  * - CompileElement#componentDirective
  * - CompileElement#templateDirective
@@ -29,6 +30,7 @@ export class ElementBindingMarker extends CompileStep {
       (isPresent(current.textNodeBindings) && MapWrapper.size(current.textNodeBindings)>0) ||
       (isPresent(current.propertyBindings) && MapWrapper.size(current.propertyBindings)>0) ||
       (isPresent(current.variableBindings) && MapWrapper.size(current.variableBindings)>0) ||
+      (isPresent(current.eventBindings) && MapWrapper.size(current.eventBindings)>0) ||
       (isPresent(current.decoratorDirectives) && current.decoratorDirectives.length > 0) ||
       isPresent(current.templateDirective) ||
       isPresent(current.componentDirective);

modules/core/src/compiler/pipeline/property_binding_parser.js

@@ -12,13 +12,15 @@ import {CompileControl} from './compile_control';
 import {interpolationToExpression} from './text_interpolation_parser';
 
 // TODO(tbosch): Cannot make this const/final right now because of the transpiler...
-var BIND_NAME_REGEXP = RegExpWrapper.create('^(?:(?:(bind)|(let))-(.+))|\\[([^\\]]+)\\]');
+var BIND_NAME_REGEXP = RegExpWrapper.create('^(?:(?:(bind)|(let)|(on))-(.+))|\\[([^\\]]+)\\]|\\(([^\\]]+)\\)');
 
 /**
  * Parses the property bindings on a single element.
  *
  * Fills:
  * - CompileElement#propertyBindings
+ * - CompileElement#eventBindings
+ * - CompileElement#variableBindings
  */
 export class PropertyBindingParser extends CompileStep {
   constructor(parser:Parser) {
@@ -32,18 +34,24 @@ export class PropertyBindingParser extends CompileStep {
       if (isPresent(bindParts)) {
         if (isPresent(bindParts[1])) {
           // match: bind-prop
-          current.addPropertyBinding(bindParts[3], this._parser.parseBinding(attrValue));
+          current.addPropertyBinding(bindParts[4], this._parser.parseBinding(attrValue));
         } else if (isPresent(bindParts[2])) {
           // match: let-prop
           // Note: We assume that the ViewSplitter already did its work, i.e. template directive should
           // only be present on <template> elements any more!
           if (!(current.element instanceof TemplateElement)) {
             throw new BaseException('let-* is only allowed on <template> elements!');
           }
-          current.addVariableBinding(bindParts[3], attrValue);
-        } else if (isPresent(bindParts[4])) {
+          current.addVariableBinding(bindParts[4], attrValue);
+        } else if (isPresent(bindParts[3])) {
+          // match: on-prop
+          current.addEventBinding(bindParts[4], this._parser.parseAction(attrValue));
+        } else if (isPresent(bindParts[5])) {
           // match: [prop]
-          current.addPropertyBinding(bindParts[4], this._parser.parseBinding(attrValue));
+          current.addPropertyBinding(bindParts[5], this._parser.parseBinding(attrValue));
+        } else if (isPresent(bindParts[6])) {
+          // match: (prop)
+          current.addEventBinding(bindParts[6], this._parser.parseBinding(attrValue));
         }
       } else {
         var expression = interpolationToExpression(attrValue);

modules/core/src/compiler/view.js

@@ -141,6 +141,9 @@ export class ProtoView {
    */
   bindTextNode(indexInParent:int, expression:AST) {
     var elBinder = this.elementBinders[this.elementBinders.length-1];
+    if (isBlank(elBinder.textNodeIndices)) {
+      elBinder.textNodeIndices = ListWrapper.create();
+    }
     ListWrapper.push(elBinder.textNodeIndices, indexInParent);
     this.protoWatchGroup.watch(expression, this.textNodesWithBindingCount++);
   }
@@ -162,6 +165,17 @@ export class ProtoView {
     );
   }
 
+  /**
+   * Adds an event binding for the last created ElementBinder via bindElement
+   */
+  bindEvent(eventName:string, expression:AST) {
+    var elBinder = this.elementBinders[this.elementBinders.length-1];
+    if (isBlank(elBinder.events)) {
+      elBinder.events = MapWrapper.create();
+    }
+    MapWrapper.set(elBinder.events, eventName, expression);
+  }
+
   /**
    * Adds a directive property binding for the last created ElementBinder via bindElement
    */
@@ -228,9 +242,11 @@ export class ProtoView {
   }
 
   static _collectTextNodes(allTextNodes, element, indices) {
-    var childNodes = DOM.templateAwareRoot(element).childNodes;
-    for (var i = 0; i < indices.length; ++i) {
-      ListWrapper.push(allTextNodes, childNodes[indices[i]]);
+    if (isPresent(indices)) {
+      var childNodes = DOM.templateAwareRoot(element).childNodes;
+      for (var i = 0; i < indices.length; ++i) {
+        ListWrapper.push(allTextNodes, childNodes[indices[i]]);
+      }
     }
   }
 

modules/core/test/compiler/pipeline/element_binder_builder_spec.js

@@ -27,7 +27,7 @@ export function main() {
   describe('ElementBinderBuilder', () => {
     var evalContext, view, changeDetector;
 
-    function createPipeline({textNodeBindings, propertyBindings, directives, protoElementInjector
+    function createPipeline({textNodeBindings, propertyBindings, eventBindings, directives, protoElementInjector
     }={}) {
       var reflector = new Reflector();
       var closureMap = new ClosureMap();
@@ -55,6 +55,12 @@ export function main() {
               }
               hasBinding = true;
             }
+            if (isPresent(current.element.getAttribute('event-binding'))) {
+              MapWrapper.forEach(eventBindings, (v,k) => {
+                current.addEventBinding(k, parser.parseAction(v));
+              });
+              hasBinding = true;
+            }
             if (isPresent(protoElementInjector)) {
               current.inheritedProtoElementInjector = protoElementInjector;
             }
@@ -172,6 +178,18 @@ export function main() {
       expect(DOM.getProperty(view.nodes[0], 'elprop2')).toEqual('b');
     });
 
+    it('should bind events', () => {
+      var eventBindings = MapWrapper.createFromStringMap({
+        'event1': '1+1'
+      });
+      var pipeline = createPipeline({eventBindings: eventBindings});
+      var results = pipeline.process(createElement('<div viewroot event-binding></div>'));
+      var pv = results[0].inheritedProtoView;
+
+      var ast = MapWrapper.get(pv.elementBinders[0].events, 'event1');
+      expect(ast.eval(null)).toBe(2);
+    });
+
     it('should bind directive properties', () => {
       var propertyBindings = MapWrapper.createFromStringMap({
         'boundprop1': 'prop1',

modules/core/test/compiler/pipeline/element_binding_marker_spec.js

@@ -16,7 +16,7 @@ import {Component} from 'core/annotations/component';
 export function main() {
   describe('ElementBindingMarker', () => {
 
-    function createPipeline({textNodeBindings, propertyBindings, variableBindings, directives}={}) {
+    function createPipeline({textNodeBindings, propertyBindings, variableBindings, eventBindings, directives}={}) {
       var reflector = new Reflector();
       return new CompilePipeline([
         new MockStep((parent, current, control) => {
@@ -29,6 +29,9 @@ export function main() {
             if (isPresent(variableBindings)) {
               current.variableBindings = variableBindings;
             }
+            if (isPresent(eventBindings)) {
+              current.eventBindings = eventBindings;
+            }
             if (isPresent(directives)) {
               for (var i=0; i<directives.length; i++) {
                 current.addDirective(reflector.annotatedType(directives[i]));
@@ -62,6 +65,12 @@ export function main() {
       assertBinding(results[0], true);
     });
 
+    it('should mark elements with event bindings', () => {
+      var eventBindings = MapWrapper.createFromStringMap({'click': 'expr'});
+      var results = createPipeline({eventBindings: eventBindings}).process(createElement('<div></div>'));
+      assertBinding(results[0], true);
+    });
+
     it('should mark elements with decorator directives', () => {
       var results = createPipeline({
         directives: [SomeDecoratorDirective]

modules/core/test/compiler/pipeline/property_binding_parser_spec.js

@@ -41,6 +41,16 @@ export function main() {
         createPipeline().process(createElement('<div let-a="b"></div>'))
       }).toThrowError('let-* is only allowed on <template> elements!');
     });
+
+    it('should detect () syntax', () => {
+      var results = createPipeline().process(createElement('<div (click)="b()"></div>'));
+      expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('b()');
+    });
+
+    it('should detect on- syntax', () => {
+      var results = createPipeline().process(createElement('<div on-click="b()"></div>'));
+      expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('b()');
+    });
   });
 }