feat(view): added support for exportAs, so any directive can be assigned to a variable

Author: vsavkin

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

@@ -746,9 +746,35 @@ export class Directive extends Injectable {
    */
   hostInjector: List<any>;
 
+  /**
+   * Defines the name that can be used in the template to assign this directive to a variable.
+   *
+   * ## Simple Example
+   *
+   * @Directive({
+   *   selector: 'child-dir',
+   *   exportAs: 'child'
+   * })
+   * class ChildDir {
+   * }
+   *
+   * @Component({
+   *   selector: 'main',
+   * })
+   * @View({
+   *   template: `<child-dir #c="child"></child-dir>`,
+   *   directives: [ChildDir]
+   * })
+   * class MainComponent {
+   * }
+   *
+   * ```
+   */
+  exportAs: string;
+
   constructor({
                   selector, properties, events, hostListeners, hostProperties, hostAttributes,
-                  hostActions, lifecycle, hostInjector, compileChildren = true,
+                  hostActions, lifecycle, hostInjector, exportAs, compileChildren = true,
               }: {
     selector?: string,
     properties?: List<string>,
@@ -759,6 +785,7 @@ export class Directive extends Injectable {
     hostActions?: StringMap<string, string>,
     lifecycle?: List<LifecycleEvent>,
     hostInjector?: List<any>,
+    exportAs?: string,
     compileChildren?: boolean
   } = {}) {
     super();
@@ -769,6 +796,7 @@ export class Directive extends Injectable {
     this.hostProperties = hostProperties;
     this.hostAttributes = hostAttributes;
     this.hostActions = hostActions;
+    this.exportAs = exportAs;
     this.lifecycle = lifecycle;
     this.compileChildren = compileChildren;
     this.hostInjector = hostInjector;
@@ -973,7 +1001,7 @@ export class Component extends Directive {
   viewInjector: List<any>;
 
   constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
-               hostActions, appInjector, lifecycle, hostInjector, viewInjector,
+               hostActions, exportAs, appInjector, lifecycle, hostInjector, viewInjector,
                changeDetection = DEFAULT, compileChildren = true}: {
     selector?: string,
     properties?: List<string>,
@@ -982,6 +1010,7 @@ export class Component extends Directive {
     hostProperties?: StringMap<string, string>,
     hostAttributes?: StringMap<string, string>,
     hostActions?: StringMap<string, string>,
+    exportAs?: string,
     appInjector?: List<any>,
     lifecycle?: List<LifecycleEvent>,
     hostInjector?: List<any>,
@@ -997,6 +1026,7 @@ export class Component extends Directive {
       hostProperties: hostProperties,
       hostAttributes: hostAttributes,
       hostActions: hostActions,
+      exportAs: exportAs,
       hostInjector: hostInjector,
       lifecycle: lifecycle,
       compileChildren: compileChildren

modules/angular2/src/core/compiler/element_binder.ts

@@ -8,8 +8,10 @@ import * as viewModule from './view';
 export class ElementBinder {
   nestedProtoView: viewModule.AppProtoView;
   hostListeners: StringMap<string, Map<number, AST>>;
+
   constructor(public index: int, public parent: ElementBinder, public distanceToParent: int,
               public protoElementInjector: eiModule.ProtoElementInjector,
+              public directiveVariableBindings: Map<string, number>,
               public componentDirective: DirectiveBinding) {
     if (isBlank(index)) {
       throw new BaseException('null index not allowed.');

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

@@ -317,7 +317,9 @@ export class DirectiveBinding extends ResolvedBinding {
       callOnAllChangesDone: hasLifecycleHook(onAllChangesDone, rb.key.token, ann),
 
       changeDetection: ann instanceof
-          Component ? ann.changeDetection : null
+          Component ? ann.changeDetection : null,
+
+      exportAs: ann.exportAs
     });
     return new DirectiveBinding(rb.key, rb.factory, deps, rb.providedAsPromise,
                                 resolvedAppInjectables, resolvedHostInjectables,
@@ -422,15 +424,6 @@ export class ProtoElementInjector {
   eventEmitterAccessors: List<List<EventEmitterAccessor>>;
   hostActionAccessors: List<List<HostActionAccessor>>;
 
-  /** Whether the element is exported as $implicit. */
-  exportElement: boolean;
-
-  /** Whether the component instance is exported as $implicit. */
-  exportComponent: boolean;
-
-  /** The variable name that will be set to $implicit for the element. */
-  exportImplicitName: string;
-
   _strategy: _ProtoElementInjectorStrategy;
 
   static create(parent: ProtoElementInjector, index: number, bindings: List<ResolvedBinding>,
@@ -483,9 +476,6 @@ export class ProtoElementInjector {
 
   constructor(public parent: ProtoElementInjector, public index: int, bd: List<BindingData>,
               public distanceToParent: number, public _firstBindingIsComponent: boolean) {
-    this.exportComponent = false;
-    this.exportElement = false;
-
     var length = bd.length;
     this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
     this.hostActionAccessors = ListWrapper.createFixedSize(length);
@@ -1164,15 +1154,6 @@ export class ElementInjector extends TreeNode<ElementInjector> {
 
   hasInstances(): boolean { return this._constructionCounter > 0; }
 
-  /** Gets whether this element is exporting a component instance as $implicit. */
-  isExportingComponent(): boolean { return this._proto.exportComponent; }
-
-  /** Gets whether this element is exporting its element as $implicit. */
-  isExportingElement(): boolean { return this._proto.exportElement; }
-
-  /** Get the name to which this element's $implicit is to be assigned. */
-  getExportImplicitName(): string { return this._proto.exportImplicitName; }
-
   getLightDomAppInjector(): Injector { return this._lightDomAppInjector; }
 
   getShadowDomAppInjector(): Injector { return this._shadowDomAppInjector; }

modules/angular2/src/core/compiler/proto_view_factory.ts

@@ -1,7 +1,7 @@
 import {Injectable} from 'angular2/di';
 
 import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
+import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
 import {reflector} from 'angular2/src/reflection/reflection';
 
 import {
@@ -309,7 +309,7 @@ function _createElementBinders(protoView, elementBinders, allDirectiveBindings)
                                     componentDirectiveBinding, directiveBindings);
 
     _createElementBinder(protoView, i, renderElementBinder, protoElementInjector,
-                         componentDirectiveBinding);
+                         componentDirectiveBinding, directiveBindings);
   }
 }
 
@@ -343,28 +343,20 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
         parentPeiWithDistance.protoElementInjector, binderIndex, directiveBindings,
         isPresent(componentDirectiveBinding), parentPeiWithDistance.distance);
     protoElementInjector.attributes = renderElementBinder.readAttributes;
-    if (hasVariables) {
-      protoElementInjector.exportComponent = isPresent(componentDirectiveBinding);
-      protoElementInjector.exportElement = isBlank(componentDirectiveBinding);
-
-      // experiment
-      var exportImplicitName = MapWrapper.get(renderElementBinder.variableBindings, '\$implicit');
-      if (isPresent(exportImplicitName)) {
-        protoElementInjector.exportImplicitName = exportImplicitName;
-      }
-    }
   }
   return protoElementInjector;
 }
 
 function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
-                              protoElementInjector, componentDirectiveBinding): ElementBinder {
+                              protoElementInjector, componentDirectiveBinding, directiveBindings): ElementBinder {
   var parent = null;
   if (renderElementBinder.parentIndex !== -1) {
     parent = protoView.elementBinders[renderElementBinder.parentIndex];
   }
+
+  var directiveVariableBindings = createDirectiveVariableBindings(renderElementBinder, directiveBindings);
   var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
-                                       protoElementInjector, componentDirectiveBinding);
+                                       protoElementInjector, directiveVariableBindings, componentDirectiveBinding);
   protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
   // variables
   // The view's locals needs to have a full set of variable names at construction time
@@ -377,6 +369,49 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
   return elBinder;
 }
 
+export function createDirectiveVariableBindings(renderElementBinder:renderApi.ElementBinder,
+                                         directiveBindings:List<DirectiveBinding>): Map<String, number> {
+  var directiveVariableBindings = MapWrapper.create();
+  MapWrapper.forEach(renderElementBinder.variableBindings, (templateName, exportAs) => {
+    var dirIndex = _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs);
+    MapWrapper.set(directiveVariableBindings, templateName, dirIndex);
+  });
+  return directiveVariableBindings;
+}
+
+function _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs) {
+  var matchedDirectiveIndex = null;
+  var matchedDirective;
+
+  for (var i = 0; i < directiveBindings.length; ++i) {
+    var directive = directiveBindings[i];
+
+    if (_directiveExportAs(directive) == exportAs) {
+      if (isPresent(matchedDirective)) {
+        throw new BaseException(`More than one directive have exportAs = '${exportAs}'. Directives: [${matchedDirective.displayName}, ${directive.displayName}]`);
+      }
+
+      matchedDirectiveIndex = i;
+      matchedDirective = directive;
+    }
+  }
+
+  if (isBlank(matchedDirective) && exportAs !== "$implicit") {
+    throw new BaseException(`Cannot find directive with exportAs = '${exportAs}'`);
+  }
+
+  return matchedDirectiveIndex;
+}
+
+function _directiveExportAs(directive):string {
+  var directiveExportAs = directive.metadata.exportAs;
+  if (isBlank(directiveExportAs) && directive.metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
+    return "$implicit";
+  } else {
+    return directiveExportAs;
+  }
+}
+
 function _bindDirectiveEvents(protoView, elementBinders: List<renderApi.ElementBinder>) {
   for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; ++boundElementIndex) {
     var dirs = elementBinders[boundElementIndex].directives;

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

@@ -183,9 +183,12 @@ export class AppProtoView {
 
   bindElement(parent: ElementBinder, distanceToParent: int,
               protoElementInjector: ProtoElementInjector,
+              directiveVariableBindings: Map<string, number>,
               componentDirective: DirectiveBinding = null): ElementBinder {
-    var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
-                                     protoElementInjector, componentDirective);
+    var elBinder =
+        new ElementBinder(this.elementBinders.length, parent, distanceToParent,
+                          protoElementInjector, directiveVariableBindings, componentDirective);
+
     ListWrapper.push(this.elementBinders, elBinder);
     return elBinder;
   }

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

@@ -206,20 +206,22 @@ export class AppViewManagerUtils {
 
     var binders = view.proto.elementBinders;
     for (var i = 0; i < binders.length; ++i) {
+      var binder = binders[i];
       var elementInjector = view.elementInjectors[i];
+
       if (isPresent(elementInjector)) {
         elementInjector.hydrate(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
-        // name.
-        var exportImplicitName = elementInjector.getExportImplicitName();
-        if (elementInjector.isExportingComponent()) {
-          view.locals.set(exportImplicitName, elementInjector.getComponent());
-        } else if (elementInjector.isExportingElement()) {
-          view.locals.set(exportImplicitName, elementInjector.getElementRef().domElement);
+        if (isPresent(binder.directiveVariableBindings)) {
+          MapWrapper.forEach(binder.directiveVariableBindings, (directiveIndex, name) => {
+            if (isBlank(directiveIndex)) {
+              view.locals.set(name, elementInjector.getElementRef().domElement);
+            } else {
+              view.locals.set(name, elementInjector.getDirectiveAtIndex(directiveIndex));
+            }
+          });
         }
       }
     }

modules/angular2/src/render/api.ts

@@ -36,7 +36,7 @@ export class ElementBinder {
   directives: List<DirectiveBinder>;
   nestedProtoView: ProtoViewDto;
   propertyBindings: Map<string, ASTWithSource>;
-  variableBindings: Map<string, ASTWithSource>;
+  variableBindings: Map<string, string>;
   // Note: this contains a preprocessed AST
   // that replaced the values that should be extracted from the element
   // with a local name
@@ -52,7 +52,7 @@ export class ElementBinder {
     directives?: List<DirectiveBinder>,
     nestedProtoView?: ProtoViewDto,
     propertyBindings?: Map<string, ASTWithSource>,
-    variableBindings?: Map<string, ASTWithSource>,
+    variableBindings?: Map<string, string>,
     eventBindings?: List<EventBinding>,
     textBindings?: List<ASTWithSource>,
     readAttributes?: Map<string, string>
@@ -142,9 +142,10 @@ export class DirectiveMetadata {
   callOnInit: boolean;
   callOnAllChangesDone: boolean;
   changeDetection: string;
+  exportAs: string;
   constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
                hostActions, properties, readAttributes, type, callOnDestroy, callOnChange,
-               callOnCheck, callOnInit, callOnAllChangesDone, changeDetection}: {
+               callOnCheck, callOnInit, callOnAllChangesDone, changeDetection, exportAs}: {
     id?: string,
     selector?: string,
     compileChildren?: boolean,
@@ -161,7 +162,8 @@ export class DirectiveMetadata {
     callOnCheck?: boolean,
     callOnInit?: boolean,
     callOnAllChangesDone?: boolean,
-    changeDetection?: string
+    changeDetection?: string,
+    exportAs?: string
   }) {
     this.id = id;
     this.selector = selector;
@@ -180,6 +182,7 @@ export class DirectiveMetadata {
     this.callOnInit = callOnInit;
     this.callOnAllChangesDone = callOnAllChangesDone;
     this.changeDetection = changeDetection;
+    this.exportAs = exportAs;
   }
 }
 

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

@@ -18,6 +18,7 @@ export function directiveMetadataToMap(meta: DirectiveMetadata): Map<string, any
     ['properties', _cloneIfPresent(meta.properties)],
     ['readAttributes', _cloneIfPresent(meta.readAttributes)],
     ['type', meta.type],
+    ['exportAs', meta.exportAs],
     ['callOnDestroy', meta.callOnDestroy],
     ['callOnCheck', meta.callOnCheck],
     ['callOnInit', meta.callOnInit],
@@ -44,6 +45,7 @@ export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetada
     properties:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'properties')),
     readAttributes:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'readAttributes')),
     type:<number>MapWrapper.get(map, 'type'),
+    exportAs:<string>MapWrapper.get(map, 'exportAs'),
     callOnDestroy:<boolean>MapWrapper.get(map, 'callOnDestroy'),
     callOnCheck:<boolean>MapWrapper.get(map, 'callOnCheck'),
     callOnChange:<boolean>MapWrapper.get(map, 'callOnChange'),

modules/angular2/test/core/compiler/compiler_spec.ts

@@ -420,11 +420,11 @@ function createProtoView(elementBinders = null) {
 
 function createComponentElementBinder(directiveResolver, type) {
   var binding = createDirectiveBinding(directiveResolver, type);
-  return new ElementBinder(0, null, 0, null, binding);
+  return new ElementBinder(0, null, 0, null, null, binding);
 }
 
 function createViewportElementBinder(nestedProtoView) {
-  var elBinder = new ElementBinder(0, null, 0, null, null);
+  var elBinder = new ElementBinder(0, null, 0, null, null, null);
   elBinder.nestedProtoView = nestedProtoView;
   return elBinder;
 }