feat(compiler): added support for host actions

modules/angular2/src/core/annotations_impl/annotations.js

@@ -620,6 +620,33 @@ export class Directive extends Injectable {
    */
   hostAttributes:any; // String map
 
+  /**
+   * Specifies which DOM methods a directive can invoke.
+   *
+   * ## Syntax
+   *
+   * ```
+   * @Directive({
+   *   selector: 'input',
+   *   hostActions: {
+   *     'emitFocus': 'focus()'
+   *   }
+   * })
+   * class InputDirective {
+   *   constructor() {
+   *     this.emitFocus = new EventEmitter();
+   *   }
+   *
+   *   focus() {
+   *     this.emitFocus.next();
+   *   }
+   * }
+   *
+   * In this example calling focus on InputDirective will result in calling focus on the DOM element.
+   * ```
+   */
+  hostActions:any; // String map
+
   /**
    * Specifies a set of lifecycle hostListeners in which the directive participates.
    *
@@ -641,6 +668,7 @@ export class Directive extends Injectable {
       hostListeners,
       hostProperties,
       hostAttributes,
+      hostActions,
       lifecycle,
       compileChildren = true,
     }:{
@@ -650,6 +678,7 @@ export class Directive extends Injectable {
       hostListeners: any,
       hostProperties: any,
       hostAttributes: any,
+      hostActions: any,
       lifecycle:List,
       compileChildren:boolean
     }={})
@@ -661,6 +690,7 @@ export class Directive extends Injectable {
     this.hostListeners = hostListeners;
     this.hostProperties = hostProperties;
     this.hostAttributes = hostAttributes;
+    this.hostActions = hostActions;
     this.lifecycle = lifecycle;
     this.compileChildren = compileChildren;
   }
@@ -858,6 +888,7 @@ export class Component extends Directive {
       hostListeners,
       hostProperties,
       hostAttributes,
+      hostActions,
       injectables,
       lifecycle,
       changeDetection = DEFAULT,
@@ -870,6 +901,7 @@ export class Component extends Directive {
       hostListeners:any,
       hostProperties:any,
       hostAttributes:any,
+      hostActions:any,
       injectables:List,
       lifecycle:List,
       changeDetection:string,
@@ -884,6 +916,7 @@ export class Component extends Directive {
       hostListeners: hostListeners,
       hostProperties: hostProperties,
       hostAttributes: hostAttributes,
+      hostActions: hostActions,
       lifecycle: lifecycle,
       compileChildren: compileChildren
     });

modules/angular2/src/core/compiler/compiler.js

@@ -233,6 +233,7 @@ export class Compiler {
       hostListeners: isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
       hostProperties: isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null,
       hostAttributes: isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
+      hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) : null,
       properties: isPresent(ann.properties) ? MapWrapper.createFromStringMap(ann.properties) : null,
       readAttributes: readAttributes
     });

modules/angular2/src/core/compiler/element_injector.js

@@ -1,7 +1,7 @@
-import {isPresent, isBlank, Type, int, BaseException} from 'angular2/src/facade/lang';
+import {isPresent, isBlank, Type, int, BaseException, stringify} from 'angular2/src/facade/lang';
 import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
 import {Math} from 'angular2/src/facade/math';
-import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
 import {Injector, Key, Dependency, bind, Binding, ResolvedBinding, NoBindingError,
   AbstractBindingError, CyclicDependencyError} from 'angular2/di';
 import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
@@ -248,6 +248,10 @@ export class DirectiveBinding extends ResolvedBinding {
     return isPresent(this.annotation) && isPresent(this.annotation.events) ? this.annotation.events : [];
   }
 
+  get hostActions() { //StringMap
+    return isPresent(this.annotation) && isPresent(this.annotation.hostActions) ? this.annotation.hostActions : {};
+  }
+
   get changeDetection() {
     if (this.annotation instanceof Component) {
       var c:Component = this.annotation;
@@ -297,6 +301,22 @@ class EventEmitterAccessor {
   }
 }
 
+class HostActionAccessor {
+  actionExpression:string;
+  getter:Function;
+
+  constructor(actionExpression:string, getter:Function) {
+    this.actionExpression = actionExpression;
+    this.getter = getter;
+  }
+
+  subscribe(view:viewModule.AppView, boundElementIndex:number, directive:Object) {
+    var eventEmitter = this.getter(directive);
+    return ObservableWrapper.subscribe(eventEmitter,
+        actionObj => view.callAction(boundElementIndex, this.actionExpression, actionObj));
+  }
+}
+
 /**
 
 Difference between di.Injector and ElementInjector
@@ -346,6 +366,7 @@ export class ProtoElementInjector  {
   distanceToParent:number;
   attributes:Map;
   eventEmitterAccessors:List<List<EventEmitterAccessor>>;
+  hostActionAccessors:List<List<HostActionAccessor>>;
 
   numberOfDirectives:number;
 
@@ -380,56 +401,67 @@ export class ProtoElementInjector  {
     this.numberOfDirectives = bindings.length;
     var length = bindings.length;
     this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
+    this.hostActionAccessors = ListWrapper.createFixedSize(length);
 
     if (length > 0) {
       this._binding0 = this._createBinding(bindings[0]);
       this._keyId0 = this._binding0.key.id;
       this.eventEmitterAccessors[0] = this._createEventEmitterAccessors(this._binding0);
+      this.hostActionAccessors[0] = this._createHostActionAccessors(this._binding0);
     }
     if (length > 1) {
       this._binding1 = this._createBinding(bindings[1]);
       this._keyId1 = this._binding1.key.id;
       this.eventEmitterAccessors[1] = this._createEventEmitterAccessors(this._binding1);
+      this.hostActionAccessors[1] = this._createHostActionAccessors(this._binding1);
     }
     if (length > 2) {
       this._binding2 = this._createBinding(bindings[2]);
       this._keyId2 = this._binding2.key.id;
       this.eventEmitterAccessors[2] = this._createEventEmitterAccessors(this._binding2);
+      this.hostActionAccessors[2] = this._createHostActionAccessors(this._binding2);
     }
     if (length > 3) {
       this._binding3 = this._createBinding(bindings[3]);
       this._keyId3 = this._binding3.key.id;
       this.eventEmitterAccessors[3] = this._createEventEmitterAccessors(this._binding3);
+      this.hostActionAccessors[3] = this._createHostActionAccessors(this._binding3);
     }
     if (length > 4) {
       this._binding4 = this._createBinding(bindings[4]);
       this._keyId4 = this._binding4.key.id;
       this.eventEmitterAccessors[4] = this._createEventEmitterAccessors(this._binding4);
+      this.hostActionAccessors[4] = this._createHostActionAccessors(this._binding4);
     }
     if (length > 5) {
       this._binding5 = this._createBinding(bindings[5]);
       this._keyId5 = this._binding5.key.id;
       this.eventEmitterAccessors[5] = this._createEventEmitterAccessors(this._binding5);
+      this.hostActionAccessors[5] = this._createHostActionAccessors(this._binding5);
     }
     if (length > 6) {
       this._binding6 = this._createBinding(bindings[6]);
       this._keyId6 = this._binding6.key.id;
       this.eventEmitterAccessors[6] = this._createEventEmitterAccessors(this._binding6);
+      this.hostActionAccessors[6] = this._createHostActionAccessors(this._binding6);
     }
     if (length > 7) {
       this._binding7 = this._createBinding(bindings[7]);
       this._keyId7 = this._binding7.key.id;
       this.eventEmitterAccessors[7] = this._createEventEmitterAccessors(this._binding7);
+      this.hostActionAccessors[7] = this._createHostActionAccessors(this._binding7);
     }
     if (length > 8) {
       this._binding8 = this._createBinding(bindings[8]);
       this._keyId8 = this._binding8.key.id;
       this.eventEmitterAccessors[8] = this._createEventEmitterAccessors(this._binding8);
+      this.hostActionAccessors[8] = this._createHostActionAccessors(this._binding8);
     }
     if (length > 9) {
       this._binding9 = this._createBinding(bindings[9]);
       this._keyId9 = this._binding9.key.id;
       this.eventEmitterAccessors[9] = this._createEventEmitterAccessors(this._binding9);
+      this.hostActionAccessors[9] = this._createHostActionAccessors(this._binding9);
     }
     if (length > 10) {
       throw 'Maximum number of directives per element has been reached.';
@@ -442,6 +474,14 @@ export class ProtoElementInjector  {
     );
   }
 
+  _createHostActionAccessors(b:DirectiveBinding) {
+    var res = [];
+    StringMapWrapper.forEach(b.hostActions, (actionExpression, actionName) => {
+      ListWrapper.push(res, new HostActionAccessor(actionExpression, reflector.getter(actionName)))
+    });
+    return res;
+  }
+
   instantiate(parent:ElementInjector):ElementInjector {
     return new ElementInjector(this, parent);
   }
@@ -661,6 +701,10 @@ export class ElementInjector extends TreeNode {
     return this._proto.eventEmitterAccessors;
   }
 
+  getHostActionAccessors() {
+    return this._proto.hostActionAccessors;
+  }
+
   getComponent() {
     if (this._proto._binding0IsComponent) {
       return this._obj0;

modules/angular2/src/core/compiler/view.js

@@ -126,6 +126,10 @@ export class AppView {
     return isPresent(childView) ? childView.changeDetector : null;
   }
 
+  callAction(elementIndex:number, actionExpression:string, action:Object) {
+    this.renderer.callAction(this.render, elementIndex, actionExpression, action);
+  }
+
   // implementation of EventDispatcher#dispatchEvent
   // returns false if preventDefault must be applied to the DOM event
   dispatchEvent(elementIndex:number, eventName:string, locals:Map<string, any>): boolean {

modules/angular2/src/core/compiler/view_manager_utils.js

@@ -192,6 +192,7 @@ export class AppViewManagerUtils {
       if (isPresent(elementInjector)) {
         elementInjector.instantiateDirectives(appInjector, hostElementInjector, view.preBuiltObjects[i]);
         this._setUpEventEmitters(view, elementInjector, i);
+        this._setUpHostActions(view, elementInjector, i);
 
         // The exporting of $implicit is a special case. Since multiple elements will all export
         // the different values as $implicit, directly assign $implicit bindings to the variable
@@ -220,6 +221,19 @@ export class AppViewManagerUtils {
     }
   }
 
+  _setUpHostActions(view:viewModule.AppView, elementInjector:eli.ElementInjector, boundElementIndex:number) {
+    var hostActions = elementInjector.getHostActionAccessors();
+    for (var directiveIndex = 0; directiveIndex < hostActions.length; ++directiveIndex) {
+      var directiveHostActions = hostActions[directiveIndex];
+      var directive = elementInjector.getDirectiveAtIndex(directiveIndex);
+
+      for (var index = 0; index < directiveHostActions.length; ++index) {
+        var hostActionAccessor = directiveHostActions[index];
+        hostActionAccessor.subscribe(view, boundElementIndex, directive);
+      }
+    }
+  }
+
   dehydrateView(view:viewModule.AppView) {
     var binders = view.proto.elementBinders;
     for (var i = 0; i < binders.length; ++i) {

modules/angular2/src/facade/collection.dart

@@ -82,6 +82,9 @@ class StringMapWrapper {
     }
     return m;
   }
+  static List<String> keys(Map<String,dynamic> a) {
+    return a.keys.toList();
+  }
   static bool isEmpty(Map m) => m.isEmpty;
 }
 

modules/angular2/src/facade/collection.ts

@@ -53,6 +53,7 @@ export class StringMapWrapper {
   static contains(map, key) { return map.hasOwnProperty(key); }
   static get(map, key) { return map.hasOwnProperty(key) ? map[key] : undefined; }
   static set(map, key, value) { map[key] = value; }
+  static keys(map) { return Object.keys(map); }
   static isEmpty(map) {
     for (var prop in map) {
       return false;

modules/angular2/src/render/api.js

@@ -117,16 +117,18 @@ export class DirectiveMetadata {
   hostListeners:Map<string, string>;
   hostProperties:Map<string, string>;
   hostAttributes:Map<string, string>;
+  hostActions:Map<string, string>;
   properties:Map<string, string>;
   readAttributes:List<string>;
   type:number;
-  constructor({id, selector, compileChildren, hostListeners, hostProperties, hostAttributes, properties, readAttributes, type}) {
+  constructor({id, selector, compileChildren, hostListeners, hostProperties, hostAttributes, hostActions, properties, readAttributes, type}) {
     this.id = id;
     this.selector = selector;
     this.compileChildren = isPresent(compileChildren) ? compileChildren : true;
     this.hostListeners = hostListeners;
     this.hostProperties = hostProperties;
     this.hostAttributes = hostAttributes;
+    this.hostActions = hostActions;
     this.properties = properties;
     this.readAttributes = readAttributes;
     this.type = type;
@@ -228,7 +230,7 @@ export class Renderer {
   /**
    * Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views inside of the view pool.
    */
-  hydrateView(hviewRef:RenderViewRef) {
+  hydrateView(viewRef:RenderViewRef) {
   }
 
   /**
@@ -238,14 +240,22 @@ export class Renderer {
   }
 
   /**
-   * Sets a porperty on an element.
+   * Sets a property on an element.
    * Note: This will fail if the property was not mentioned previously as a host property
    * in the ProtoView
    */
   setElementProperty(viewRef:RenderViewRef, elementIndex:number, propertyName:string, propertyValue:any):void {
   }
 
-  /*
+  /**
+   * Calls an action.
+   * Note: This will fail if the action was not mentioned previously as a host action
+   * in the ProtoView
+   */
+  callAction(viewRef:RenderViewRef, elementIndex:number, actionExpression:string, actionArgs:any):void {
+  }
+
+  /**
    * Sets the value of a text node.
    */
   setText(viewRef:RenderViewRef, textNodeIndex:number, text:string):void {

modules/angular2/src/render/dom/compiler/directive_parser.js

@@ -73,6 +73,11 @@ export class DirectiveParser extends CompileStep {
           this._bindDirectiveEvent(eventName, action, current, directiveBinderBuilder);
         });
       }
+      if (isPresent(directive.hostActions)) {
+        MapWrapper.forEach(directive.hostActions, (action, actionName) => {
+          this._bindHostAction(actionName, action, current, directiveBinderBuilder);
+        });
+      }
       if (isPresent(directive.hostProperties)) {
         MapWrapper.forEach(directive.hostProperties, (hostPropertyName, directivePropertyName) => {
           this._bindHostProperty(hostPropertyName, directivePropertyName, current, directiveBinderBuilder);
@@ -136,7 +141,11 @@ export class DirectiveParser extends CompileStep {
     } else {
       directiveBinderBuilder.bindEvent(eventName, ast);
     }
+  }
 
+  _bindHostAction(actionName, actionExpression, compileElement, directiveBinderBuilder) {
+    var ast = this._parser.parseAction(actionExpression, compileElement.elementDescription);
+    directiveBinderBuilder.bindHostAction(actionName, actionExpression, ast);
   }
 
   _bindHostProperty(hostPropertyName, directivePropertyName, compileElement, directiveBinderBuilder) {

modules/angular2/src/render/dom/convert.js

@@ -14,6 +14,7 @@ export function directiveMetadataToMap(meta: DirectiveMetadata): Map {
     ['hostListeners', _cloneIfPresent(meta.hostListeners)],
     ['hostProperties', _cloneIfPresent(meta.hostProperties)],
     ['hostAttributes', _cloneIfPresent(meta.hostAttributes)],
+    ['hostActions', _cloneIfPresent(meta.hostActions)],
     ['properties', _cloneIfPresent(meta.properties)],
     ['readAttributes', _cloneIfPresent(meta.readAttributes)],
     ['type', meta.type],
@@ -33,6 +34,7 @@ export function directiveMetadataFromMap(map: Map): DirectiveMetadata {
     compileChildren: MapWrapper.get(map, 'compileChildren'),
     hostListeners: _cloneIfPresent(MapWrapper.get(map, 'hostListeners')),
     hostProperties: _cloneIfPresent(MapWrapper.get(map, 'hostProperties')),
+    hostActions: _cloneIfPresent(MapWrapper.get(map, 'hostActions')),
     hostAttributes: _cloneIfPresent(MapWrapper.get(map, 'hostAttributes')),
     properties: _cloneIfPresent(MapWrapper.get(map, 'properties')),
     readAttributes: _cloneIfPresent(MapWrapper.get(map, 'readAttributes')),

modules/angular2/src/render/dom/dom_renderer.js

@@ -192,6 +192,11 @@ export class DomRenderer extends Renderer {
     view.setElementProperty(elementIndex, propertyName, propertyValue);
   }
 
+  callAction(viewRef:RenderViewRef, elementIndex:number, actionExpression:string, actionArgs:any):void {
+    var view = resolveInternalDomView(viewRef);
+    view.callAction(elementIndex, actionExpression, actionArgs);
+  }
+
   setText(viewRef:RenderViewRef, textNodeIndex:number, text:string):void {
     var view = resolveInternalDomView(viewRef);
     DOM.setText(view.boundTextNodes[textNodeIndex], text);

modules/angular2/src/render/dom/util.js

@@ -18,4 +18,4 @@ export function dashCaseToCamelCase(input:string) {
   return StringWrapper.replaceAllMapped(input, DASH_CASE_REGEXP, (m) => {
     return m[1].toUpperCase();
   });
-}
+}

modules/angular2/src/render/dom/view/element_binder.js

@@ -14,6 +14,7 @@ export class ElementBinder {
   parentIndex:number;
   distanceToParent:number;
   propertySetters: Map<string, SetterFn>;
+  hostActions: Map<string, AST>;
 
   constructor({
     textNodeIndices,
@@ -23,6 +24,7 @@ export class ElementBinder {
     eventLocals,
     localEvents,
     globalEvents,
+    hostActions,
     parentIndex,
     distanceToParent,
     propertySetters
@@ -34,6 +36,7 @@ export class ElementBinder {
     this.eventLocals = eventLocals;
     this.localEvents = localEvents;
     this.globalEvents = globalEvents;
+    this.hostActions = hostActions;
     this.parentIndex = parentIndex;
     this.distanceToParent = distanceToParent;
     this.propertySetters = propertySetters;
@@ -51,3 +54,15 @@ export class Event {
     this.fullName = fullName;
   }
 }
+
+export class HostAction {
+  actionName: string;
+  actionExpression: string;
+  expression: AST;
+
+  constructor(actionName: string, actionExpression: string, expression: AST) {
+    this.actionName = actionName;
+    this.actionExpression = actionExpression;
+    this.expression = expression;
+  }
+}

modules/angular2/src/render/dom/view/proto_view_builder.js

@@ -7,7 +7,7 @@ import {
 } from 'angular2/change_detection';
 
 import {DomProtoView, DomProtoViewRef, resolveInternalDomProtoView} from './proto_view';
-import {ElementBinder, Event} from './element_binder';
+import {ElementBinder, Event, HostAction} from './element_binder';
 import {setterFactory} from './property_setter_factory';
 
 import * as api from '../../api';
@@ -48,6 +48,7 @@ export class ProtoViewBuilder {
     var apiElementBinders = [];
     ListWrapper.forEach(this.elements, (ebb) => {
       var propertySetters = MapWrapper.create();
+      var hostActions = MapWrapper.create();
 
       var apiDirectiveBinders = ListWrapper.map(ebb.directives, (dbb) => {
         ebb.eventBuilder.merge(dbb.eventBuilder);
@@ -56,6 +57,10 @@ export class ProtoViewBuilder {
           MapWrapper.set(propertySetters, hostPropertyName, setterFactory(hostPropertyName));
         });
 
+        ListWrapper.forEach(dbb.hostActions, (hostAction) => {
+          MapWrapper.set(hostActions, hostAction.actionExpression, hostAction.expression);
+        });
+
         return new api.DirectiveBinder({
           directiveIndex: dbb.directiveIndex,
           propertyBindings: dbb.propertyBindings,
@@ -90,6 +95,7 @@ export class ProtoViewBuilder {
         eventLocals: new LiteralArray(ebb.eventBuilder.buildEventLocals()),
         localEvents: ebb.eventBuilder.buildLocalEvents(),
         globalEvents: ebb.eventBuilder.buildGlobalEvents(),
+        hostActions: hostActions,
         propertySetters: propertySetters
       }));
     });
@@ -213,6 +219,7 @@ export class DirectiveBuilder {
   directiveIndex:number;
   propertyBindings: Map<string, ASTWithSource>;
   hostPropertyBindings: Map<string, ASTWithSource>;
+  hostActions: List<HostAction>;
   eventBindings: List<api.EventBinding>;
   eventBuilder: EventBuilder;
 
@@ -220,6 +227,7 @@ export class DirectiveBuilder {
     this.directiveIndex = directiveIndex;
     this.propertyBindings = MapWrapper.create();
     this.hostPropertyBindings = MapWrapper.create();
+    this.hostActions = ListWrapper.create();
     this.eventBindings = ListWrapper.create();
     this.eventBuilder = new EventBuilder();
   }
@@ -232,6 +240,10 @@ export class DirectiveBuilder {
     MapWrapper.set(this.hostPropertyBindings, name, expression);
   }
 
+  bindHostAction(actionName:string, actionExpression:string, expression:ASTWithSource) {
+    ListWrapper.push(this.hostActions, new HostAction(actionName, actionExpression, expression));
+  }
+
   bindEvent(name, expression, target = null) {
     ListWrapper.push(this.eventBindings, this.eventBuilder.add(name, expression, target));
   }

modules/angular2/src/render/dom/view/view.js

@@ -1,5 +1,6 @@
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
+import {Locals} from 'angular2/change_detection';
 import {int, isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
 
 import {DomViewContainer} from './view_container';
@@ -80,6 +81,18 @@ export class DomView {
     setter(this.boundElements[elementIndex], value);
   }
 
+  callAction(elementIndex:number, actionExpression:string, actionArgs:any) {
+    var binder = this.proto.elementBinders[elementIndex];
+    var hostAction = MapWrapper.get(binder.hostActions, actionExpression);
+    hostAction.eval(this.boundElements[elementIndex], this._localsWithAction(actionArgs));
+  }
+
+  _localsWithAction(action:Object):Locals {
+    var map = MapWrapper.create();
+    MapWrapper.set(map, '$action', action);
+    return new Locals(null, map);
+  }
+
   setText(textIndex:number, value:string) {
     DOM.setText(this.boundTextNodes[textIndex], value);
   }