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'
    ])

modules/benchmarks/src/compiler/compiler_benchmark.js

@@ -81,17 +81,17 @@ export function main() {
 
 @Directive({
   selector: '[dir0]',
-  properties: {
-    'prop': 'attr0'
-  }
+  properties: [
+    'prop: attr0'
+  ]
 })
 class Dir0 {}
 
 @Directive({
   selector: '[dir1]',
-  properties: {
-    'prop': 'attr1'
-  }
+  properties: [
+    'prop: attr1'
+  ]
 })
 class Dir1 {
   constructor(dir0:Dir0) {}
@@ -99,9 +99,9 @@ class Dir1 {
 
 @Directive({
   selector: '[dir2]',
-  properties: {
-    'prop': 'attr2'
-  }
+  properties: [
+    'prop: attr2'
+  ]
 })
 class Dir2 {
   constructor(dir1:Dir1) {}
@@ -109,9 +109,9 @@ class Dir2 {
 
 @Directive({
   selector: '[dir3]',
-  properties: {
-    'prop': 'attr3'
-  }
+  properties: [
+    'prop: attr3'
+  ]
 })
 class Dir3 {
   constructor(dir2:Dir2) {}
@@ -119,9 +119,9 @@ class Dir3 {
 
 @Directive({
   selector: '[dir4]',
-  properties: {
-    'prop': 'attr4'
-  }
+  properties: [
+    'prop: attr4'
+  ]
 })
 class Dir4 {
   constructor(dir3:Dir3) {}

modules/benchmarks/src/largetable/largetable_benchmark.js

@@ -233,10 +233,10 @@ class AppComponent {
 
 @Component({
   selector: 'largetable',
-  properties: {
-      'data': 'data',
-      'benchmarkType': 'benchmarktype'
-  }
+  properties: [
+      'data',
+      'benchmarkType'
+  ]
 })
 @View({
   directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],

modules/benchmarks/src/naive_infinite_scroll/cells.js

@@ -22,10 +22,10 @@ export class HasStyle {
 
 @Component({
   selector: 'company-name',
-  properties: {
-    'width': 'cell-width',
-    'company': 'company'
-  }
+  properties: [
+    'width: cell-width',
+    'company'
+  ]
 })
 @View({
     directives: [],
@@ -37,10 +37,10 @@ export class CompanyNameComponent extends HasStyle {
 
 @Component({
   selector: 'opportunity-name',
-  properties: {
-    'width': 'cell-width',
-    'opportunity': 'opportunity'
-  }
+  properties: [
+    'width: cell-width',
+    'opportunity'
+  ]
 })
 @View({
     directives: [],
@@ -52,10 +52,10 @@ export class OpportunityNameComponent extends HasStyle {
 
 @Component({
   selector: 'offering-name',
-  properties: {
-    'width': 'cell-width',
-    'offering': 'offering'
-  }
+  properties: [
+    'width: cell-width',
+    'offering'
+  ]
 })
 @View({
     directives: [],
@@ -74,10 +74,10 @@ export class Stage {
 
 @Component({
   selector: 'stage-buttons',
-  properties: {
-    'width': 'cell-width',
-    'offering': 'offering'
-  }
+  properties: [
+    'width: cell-width',
+    'offering'
+  ]
 })
 @View({
     directives: [NgFor],
@@ -133,10 +133,10 @@ export class StageButtonsComponent extends HasStyle {
 
 @Component({
   selector: 'account-cell',
-  properties: {
-    'width': 'cell-width',
-    'account': 'account'
-  }
+  properties: [
+    'width: cell-width',
+    'account'
+  ]
 })
 @View({
     directives: [],
@@ -153,10 +153,10 @@ export class AccountCellComponent extends HasStyle {
 
 @Component({
   selector: 'formatted-cell',
-  properties: {
-    'width': 'cell-width',
-    'value': 'value'
-  }
+  properties: [
+    'width: cell-width',
+    'value'
+  ]
 })
 @View({
     directives: [],

modules/benchmarks/src/naive_infinite_scroll/scroll_item.js

@@ -15,9 +15,9 @@ import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH,
 
 @Component({
   selector: 'scroll-item',
-  properties: {
-    'offering': 'offering'
-  }
+  properties: [
+    'offering'
+  ]
 })
 @View({
   directives: [

modules/benchmarks/src/tree/tree_benchmark.js

@@ -242,7 +242,7 @@ class AppComponent {
 
 @Component({
   selector: 'tree',
-  properties: {'data': 'data'}
+  properties: ['data']
 })
 @View({
   directives: [TreeComponent, NgIf],