feat(Directive): convert properties to an array

fixes #2013

BREAKING CHANGE:

Before

    @directive(properties: {
      'sameName': 'sameName',
      'directiveProp': 'elProp | pipe'
    })

After

    @directive(properties: [
      'sameName',
      'directiveProp: elProp | pipe'
    ])

Author: vicb

modules/angular2/docs/core/02_directives.md

@@ -63,9 +63,9 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
 ```
 @Directive({
   selector: '[tooltip]',     | CSS Selector which triggers the decorator
-  properties: {              | List which properties need to be bound
-    text: 'tooltip'          |  - DOM element tooltip property should be
-  },                         |    mapped to the directive text property.
+  properties: [              | List which properties need to be bound
+    'text: tooltip'          |  - DOM element tooltip property should be
+  ],                         |    mapped to the directive text property.
   hostListeners: {           | List which events need to be mapped.
     mouseover: 'show'        |  - Invoke the show() method every time
   }                          |    the mouseover event is fired.
@@ -108,10 +108,10 @@ Example of a component:
 ```
 @Component({                      | Component annotation
   selector: 'pane',               | CSS selector on <pane> element
-  properties: {                   | List which property need to be bound
-    'title': 'title',             |  - title mapped to component title
-    'open': 'open'                |  - open attribute mapped to component's open property
-  },                              |
+  properties: [                   | List which property need to be bound
+    'title',                      |  - title mapped to component title
+    'open'                        |  - open attribute mapped to component's open property
+  ],                              |
 })                                |
 @View({                           | View annotation
   templateUrl: 'pane.html'        |  - URL of template HTML
@@ -173,9 +173,9 @@ Directives that use a ViewContainer can control instantiation of child views whi
 ```
 @Directive({
   selector: '[if]',
-  properties: {
-    'condition': 'if'
-  }
+  properties: [
+    'condition: if'
+  ]
 })
 export class If {
   viewContainer: ViewContainerRef;

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

@@ -103,9 +103,9 @@ import {DEFAULT} from 'angular2/change_detection';
  *
  * @Directive({
  *   selector: '[dependency]',
- *   properties: {
- *     'id':'dependency'
- *   }
+ *   properties: [
+ *     'id: dependency'
+ *   ]
  * })
  * class Dependency {
  *   id:string;
@@ -275,9 +275,9 @@ import {DEFAULT} from 'angular2/change_detection';
  * ```
  * @Directive({
  *   selector: '[tooltip]',
- *   properties: {
- *     'text': 'tooltip'
- *   },
+ *   properties: [
+ *     'text: tooltip'
+ *   ],
  *   hostListeners: {
  *     'onmouseenter': 'onMouseEnter()',
  *     'onmouseleave': 'onMouseLeave()'
@@ -361,9 +361,7 @@ import {DEFAULT} from 'angular2/change_detection';
  * ```
  * @Directive({
  *   selector: '[unless]',
- *   properties: {
- *     'unless': 'unless'
- *   }
+ *   properties: ['unless']
  * })
  * export class Unless {
  *   viewContainer: ViewContainerRef;
@@ -453,52 +451,53 @@ export class Directive extends Injectable {
    * Enumerates the set of properties that accept data binding for a directive.
    *
    * The `properties` property defines a set of `directiveProperty` to `bindingProperty`
-   * key-value pairs:
+   * configuration:
    *
    * - `directiveProperty` specifies the component property where the value is written.
    * - `bindingProperty` specifies the DOM property where the value is read from.
    *
    * You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data
-   * transformation and structural
-   * change detection of the value. These pipes will be evaluated in the context of this component.
-   *
+   * transformation and structural change detection of the value. These pipes will be evaluated in
+   * the context of this component.
    *
    * ## Syntax
    *
+   * There is no need to specify both `directiveProperty` and `bindingProperty` when they both have
+   * the same value.
+   *
    * ```
    * @Directive({
-   *   properties: {
-   *     'directiveProperty1': 'bindingProperty1',
-   *     'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
+   *   properties: [
+   *     'propertyName', // shorthand notation for 'propertyName: propertyName'
+   *     'directiveProperty1: bindingProperty1',
+   *     'directiveProperty2: bindingProperty2 | pipe1 | ...',
    *     ...
-   *   }
+   *   ]
    * }
    * ```
    *
    *
    * ## Basic Property Binding
    *
    * We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
-   * be used in templates
-   * with standard Angular syntax. For example:
+   * be used in templates with standard Angular syntax. For example:
    *
    * ```
    * @Directive({
    *   selector: '[tooltip]',
-   *   properties: {
-   *     'text': 'tooltip'
-   *   }
+   *   properties: [
+   *     'text: tooltip'
+   *   ]
    * })
    * class Tooltip {
-   *   set text(text) {
-   *     // This will get called every time the 'tooltip' binding changes with the new value.
+   *   set text(value: string) {
+   *     // This will get called every time with the new value when the 'tooltip' property changes
    *   }
    * }
    * ```
    *
    * We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
-   * string literal, as
-   * shown in the HTML template below:
+   * string literal, as shown in the HTML template below:
    *
    * ```html
    * <div [tooltip]="someExpression">...</div>
@@ -508,27 +507,24 @@ export class Directive extends Injectable {
    * Whenever the `someExpression` expression changes, the `properties` declaration instructs
    * Angular to update the `Tooltip`'s `text` property.
    *
-   *
-   *
    * ## Bindings With Pipes
    *
    * You can also use pipes when writing binding definitions for a directive.
    *
    * For example, we could write a binding that updates the directive on structural changes, rather
-   * than on reference
-   * changes, as normally occurs in change detection.
+   * than on reference changes, as normally occurs in change detection.
    *
    * See {@link Pipe} and {@link keyValDiff} documentation for more details.
    *
    * ```
    * @Directive({
    *   selector: '[class-set]',
-   *   properties: {
-   *     'classChanges': 'classSet | keyValDiff'
-   *   }
+   *   properties: [
+   *     'classChanges: classSet | keyValDiff'
+   *   ]
    * })
    * class ClassSet {
-   *   set classChanges(changes:KeyValueChanges) {
+   *   set classChanges(changes: KeyValueChanges) {
    *     // This will get called every time the `class-set` expressions changes its structure.
    *   }
    * }
@@ -544,7 +540,7 @@ export class Directive extends Injectable {
    * keyValDiff`.
    *
    */
-  properties: StringMap<string, string>;
+  properties: List<string>;
 
   /**
    * Enumerates the set of emitted events.
@@ -756,7 +752,7 @@ export class Directive extends Injectable {
                   hostActions, lifecycle, hostInjector, compileChildren = true,
               }: {
     selector?: string,
-    properties?: any,
+    properties?: List<string>,
     events?: List<string>,
     hostListeners?: StringMap<string, string>,
     hostProperties?: StringMap<string, string>,
@@ -981,7 +977,7 @@ export class Component extends Directive {
                hostActions, appInjector, lifecycle, hostInjector, viewInjector,
                changeDetection = DEFAULT, compileChildren = true}: {
     selector?: string,
-    properties?: Object,
+    properties?: List<string>,
     events?: List<string>,
     hostListeners?: Map<string, string>,
     hostProperties?: any,
@@ -1053,10 +1049,10 @@ export const onDestroy = CONST_EXPR(new LifecycleEvent("onDestroy"));
  * ```
  * @Directive({
  *   selector: '[class-set]',
- *   properties: {
- *     'propA': 'propA'
- *     'propB': 'propB'
- *   },
+ *   properties: [
+ *     'propA',
+ *     'propB'
+ *   ],
  *   lifecycle: [onChange]
  * })
  * class ClassSet {

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

@@ -21,9 +21,9 @@ export class Visibility extends DependencyAnnotation {
  * ```
  * @Directive({
  *   selector: '[dependency]',
- *   properties: {
- *     'id':'dependency'
- *   }
+ *   properties: [
+ *     'id: dependency'
+ *   ]
  * })
  * class Dependency {
  *   id:string;
@@ -66,9 +66,9 @@ export var self = new Self();
  * ```
  * @Directive({
  *   selector: '[dependency]',
- *   properties: {
- *     'id':'dependency'
- *   }
+ *   properties: [
+ *     'id: dependency'
+ *   ]
  * })
  * class Dependency {
  *   id:string;
@@ -118,9 +118,9 @@ export class Parent extends Visibility {
  * ```
  * @Directive({
  *   selector: '[dependency]',
- *   properties: {
- *     'id':'dependency'
- *   }
+ *   properties: [
+ *     'id: dependency'
+ *   ]
  * })
  * class Dependency {
  *   id:string;
@@ -178,9 +178,9 @@ export class Ancestor extends Visibility {
  * ```
  * @Directive({
  *   selector: '[dependency]',
- *   properties: {
- *     'id':'dependency'
- *   }
+ *   properties: [
+ *     'id: dependency'
+ *   ]
  * })
  * class Dependency {
  *   id:string;

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

@@ -300,7 +300,7 @@ export class DirectiveBinding extends ResolvedBinding {
           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,
+      properties: ann.properties,
       readAttributes: DirectiveBinding._readAttributes(deps),
 
       callOnDestroy: hasLifecycleHook(onDestroy, rb.key.token, ann),

modules/angular2/src/directives/class.ts

@@ -4,7 +4,7 @@ import {ElementRef} from 'angular2/core';
 import {isPresent} from 'angular2/src/facade/lang';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-@Directive({selector: '[class]', properties: {'iterableChanges': 'class | keyValDiff'}})
+@Directive({selector: '[class]', properties: ['iterableChanges: class | keyValDiff']})
 export class CSSClass {
   _domEl;
   constructor(ngEl: ElementRef) { this._domEl = ngEl.domElement; }

modules/angular2/src/directives/ng_for.ts

@@ -36,7 +36,7 @@ import {ListWrapper} from 'angular2/src/facade/collection';
  * @exportedAs angular2/directives
  */
 @Directive(
-    {selector: '[ng-for][ng-for-of]', properties: {'iterableChanges': 'ngForOf | iterableDiff'}})
+    {selector: '[ng-for][ng-for-of]', properties: ['iterableChanges: ngForOf | iterableDiff']})
 export class NgFor {
   viewContainer: ViewContainerRef;
   protoViewRef: ProtoViewRef;

modules/angular2/src/directives/ng_if.ts

@@ -27,7 +27,7 @@ import {isBlank} from 'angular2/src/facade/lang';
  *
  * @exportedAs angular2/directives
  */
-@Directive({selector: '[ng-if]', properties: {'ngIf': 'ngIf'}})
+@Directive({selector: '[ng-if]', properties: ['ngIf']})
 export class NgIf {
   viewContainer: ViewContainerRef;
   protoViewRef: ProtoViewRef;

modules/angular2/src/directives/ng_switch.ts

@@ -44,7 +44,7 @@ export class SwitchView {
  *
  * @exportedAs angular2/directives
  */
-@Directive({selector: '[ng-switch]', properties: {'ngSwitch': 'ngSwitch'}})
+@Directive({selector: '[ng-switch]', properties: ['ngSwitch']})
 export class NgSwitch {
   _switchValue: any;
   _useDefault: boolean;
@@ -153,7 +153,7 @@ export class NgSwitch {
  *
  * @exportedAs angular2/directives
  */
-@Directive({selector: '[ng-switch-when]', properties: {'ngSwitchWhen': 'ngSwitchWhen'}})
+@Directive({selector: '[ng-switch-when]', properties: ['ngSwitchWhen']})
 export class NgSwitchWhen {
   _value: any;
   _switch: NgSwitch;

modules/angular2/src/forms/directives.ts

@@ -73,7 +73,7 @@ function _lookupControl(groupDirective: ControlGroupDirective, controlOrName: an
  *
  * @exportedAs angular2/forms
  */
-@Directive({selector: '[control-group]', properties: {'controlOrName': 'control-group'}})
+@Directive({selector: '[control-group]', properties: ['controlOrName: control-group']})
 export class ControlGroupDirective {
   _groupDirective: ControlGroupDirective;
   _directives: List<ControlDirective>;
@@ -133,7 +133,7 @@ export class ControlGroupDirective {
  *
  * @exportedAs angular2/forms
  */
-@Directive({selector: '[control]', properties: {'controlOrName': 'control'}})
+@Directive({selector: '[control]', properties: ['controlOrName: control']})
 export class ControlDirective {
   _groupDirective: ControlGroupDirective;
 

modules/angular2/src/render/api.ts

@@ -133,7 +133,7 @@ export class DirectiveMetadata {
   hostProperties: Map<string, string>;
   hostAttributes: Map<string, string>;
   hostActions: Map<string, string>;
-  properties: Map<string, string>;
+  properties: List<string>;
   readAttributes: List<string>;
   type: number;
   callOnDestroy: boolean;
@@ -153,7 +153,7 @@ export class DirectiveMetadata {
     hostProperties?: Map<string, string>,
     hostAttributes?: Map<string, string>,
     hostActions?: Map<string, string>,
-    properties?: Map<string, string>,
+    properties?: List<string>,
     readAttributes?: List<string>,
     type?: number,
     callOnDestroy?: boolean,