feat(Directive): Have a single Directive.host which mimics HTML

fixes #2268 BREAKING CHANGE: Before @directive({ hostListeners: {'event': 'statement'}, hostProperties: {'expression': 'hostProp'}, hostAttributes: {'attr': 'value'}, hostActions: {'action': 'statement'} }) After @directive({ host: { '(event)': 'statement', '[hostProp]': 'expression' // k & v swapped 'attr': 'value', '@action': 'statement' } })
angular · Jun 11, 2015 · f3b4937 · f3b4937
1 parent 47b6b05
commit f3b4937
Show file tree

Hide file tree

Showing 32 changed files with 316 additions and 242 deletions.
diff --git a/modules/angular2/src/core/annotations_impl/annotations.ts b/modules/angular2/src/core/annotations_impl/annotations.ts
@@ -585,6 +585,8 @@ export class Directive extends Injectable {
    */
   events: List<string>;
 
+  // TODO(vicb): doc
+
   /**
    * Specifies which DOM hostListeners a directive listens to.
    *
@@ -643,9 +645,6 @@ export class Directive extends Injectable {
    * 'change' event.
    *
    */
-  hostListeners: StringMap<string, string>;
-
-
   /**
    * Specifies which DOM properties a directives updates.
    *
@@ -667,8 +666,6 @@ export class Directive extends Injectable {
    * the host element.
    * ```
    */
-  hostProperties: StringMap<string, string>;
-
   /**
    * Specifies static attributes that should be propagated to a host element. Attributes specified
    * in `hostAttributes`
@@ -691,8 +688,6 @@ export class Directive extends Injectable {
    * will ensure that this element will get the "button" role.
    * ```
    */
-  hostAttributes: StringMap<string, string>;
-
   /**
    * Specifies which DOM methods a directive can invoke.
    *
@@ -719,7 +714,8 @@ export class Directive extends Injectable {
    * element.
    * ```
    */
-  hostActions: StringMap<string, string>;
+
+  host: StringMap<string, string>;
 
   /**
    * Specifies which lifecycle should be notified to the directive.
@@ -795,16 +791,13 @@ export class Directive extends Injectable {
   exportAs: string;
 
   constructor({
-                  selector, properties, events, hostListeners, hostProperties, hostAttributes,
-                  hostActions, lifecycle, hostInjector, exportAs, compileChildren = true,
+                  selector, properties, events, host, lifecycle, hostInjector, exportAs,
+                  compileChildren = true,
               }: {
     selector?: string,
     properties?: List<string>,
     events?: List<string>,
-    hostListeners?: StringMap<string, string>,
-    hostProperties?: StringMap<string, string>,
-    hostAttributes?: StringMap<string, string>,
-    hostActions?: StringMap<string, string>,
+    host?: StringMap<string, string>,
     lifecycle?: List<LifecycleEvent>,
     hostInjector?: List<any>,
     exportAs?: string,
@@ -814,10 +807,7 @@ export class Directive extends Injectable {
     this.selector = selector;
     this.properties = properties;
     this.events = events;
-    this.hostListeners = hostListeners;
-    this.hostProperties = hostProperties;
-    this.hostAttributes = hostAttributes;
-    this.hostActions = hostActions;
+    this.host = host;
     this.exportAs = exportAs;
     this.lifecycle = lifecycle;
     this.compileChildren = compileChildren;
@@ -1022,16 +1012,12 @@ export class Component extends Directive {
    */
   viewInjector: List<any>;
 
-  constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
-               hostActions, exportAs, appInjector, lifecycle, hostInjector, viewInjector,
-               changeDetection = DEFAULT, compileChildren = true}: {
+  constructor({selector, properties, events, host, exportAs, appInjector, lifecycle, hostInjector,
+               viewInjector, changeDetection = DEFAULT, compileChildren = true}: {
     selector?: string,
     properties?: List<string>,
     events?: List<string>,
-    hostListeners?: StringMap<string, string>,
-    hostProperties?: StringMap<string, string>,
-    hostAttributes?: StringMap<string, string>,
-    hostActions?: StringMap<string, string>,
+    host?: StringMap<string, string>,
     exportAs?: string,
     appInjector?: List<any>,
     lifecycle?: List<LifecycleEvent>,
@@ -1044,10 +1030,7 @@ export class Component extends Directive {
       selector: selector,
       properties: properties,
       events: events,
-      hostListeners: hostListeners,
-      hostProperties: hostProperties,
-      hostAttributes: hostAttributes,
-      hostActions: hostActions,
+      host: host,
       exportAs: exportAs,
       hostInjector: hostInjector,
       lifecycle: lifecycle,

diff --git a/modules/angular2/src/core/compiler/element_injector.ts b/modules/angular2/src/core/compiler/element_injector.ts
@@ -293,21 +293,14 @@ export class DirectiveBinding extends ResolvedBinding {
     var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ?
                                                      resolveBindings(ann.viewInjector) :
                                                      [];
-    var metadata = new DirectiveMetadata({
+    var metadata = DirectiveMetadata.create({
       id: stringify(rb.key.token),
       type: ann instanceof
           Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE,
       selector: ann.selector,
       compileChildren: ann.compileChildren,
       events: ann.events,
-      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,
+      host: isPresent(ann.host) ? MapWrapper.createFromStringMap(ann.host) : null,
       properties: ann.properties,
       readAttributes: DirectiveBinding._readAttributes(deps),
 

diff --git a/modules/angular2/src/forms/directives/checkbox_value_accessor.ts b/modules/angular2/src/forms/directives/checkbox_value_accessor.ts
@@ -16,15 +16,16 @@ import {ControlValueAccessor} from './control_value_accessor';
 @Directive({
   selector:
       'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
-  hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
-  hostProperties: {
-    'checked': 'checked',
-    'cd.control?.untouched == true': 'class.ng-untouched',
-    'cd.control?.touched == true': 'class.ng-touched',
-    'cd.control?.pristine == true': 'class.ng-pristine',
-    'cd.control?.dirty == true': 'class.ng-dirty',
-    'cd.control?.valid == true': 'class.ng-valid',
-    'cd.control?.valid == false': 'class.ng-invalid'
+  host: {
+    '(change)': 'onChange($event.target.checked)',
+    '(blur)': 'onTouched()',
+    '[checked]': 'checked',
+    '[class.ng-untouched]': 'cd.control?.untouched == true',
+    '[class.ng-touched]': 'cd.control?.touched == true',
+    '[class.ng-pristine]': 'cd.control?.pristine == true',
+    '[class.ng-dirty]': 'cd.control?.dirty == true',
+    '[class.ng-valid]': 'cd.control?.valid == true',
+    '[class.ng-invalid]': 'cd.control?.valid == false'
   }
 })
 export class CheckboxControlValueAccessor implements ControlValueAccessor {
@@ -42,4 +43,4 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }
-}
+}
diff --git a/modules/angular2/src/forms/directives/default_value_accessor.ts b/modules/angular2/src/forms/directives/default_value_accessor.ts
@@ -19,19 +19,17 @@ import {isBlank} from 'angular2/src/facade/lang';
 @Directive({
   selector:
       'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]',
-  hostListeners: {
-    'change': 'onChange($event.target.value)',
-    'input': 'onChange($event.target.value)',
-    'blur': 'onTouched()'
-  },
-  hostProperties: {
-    'value': 'value',
-    'cd.control?.untouched == true': 'class.ng-untouched',
-    'cd.control?.touched == true': 'class.ng-touched',
-    'cd.control?.pristine == true': 'class.ng-pristine',
-    'cd.control?.dirty == true': 'class.ng-dirty',
-    'cd.control?.valid == true': 'class.ng-valid',
-    'cd.control?.valid == false': 'class.ng-invalid'
+  host: {
+    '(change)': 'onChange($event.target.value)',
+    '(input)': 'onChange($event.target.value)',
+    '(blur)': 'onTouched()',
+    '[value]': 'value',
+    '[class.ng-untouched]': 'cd.control?.untouched == true',
+    '[class.ng-touched]': 'cd.control?.touched == true',
+    '[class.ng-pristine]': 'cd.control?.pristine == true',
+    '[class.ng-dirty]': 'cd.control?.dirty == true',
+    '[class.ng-valid]': 'cd.control?.valid == true',
+    '[class.ng-invalid]': 'cd.control?.valid == false'
   }
 })
 export class DefaultValueAccessor implements ControlValueAccessor {
@@ -50,4 +48,4 @@ export class DefaultValueAccessor implements ControlValueAccessor {
   registerOnChange(fn): void { this.onChange = fn; }
 
   registerOnTouched(fn): void { this.onTouched = fn; }
-}
+}
diff --git a/modules/angular2/src/forms/directives/form_model_directive.ts b/modules/angular2/src/forms/directives/form_model_directive.ts
@@ -60,8 +60,8 @@ const formDirectiveBinding = CONST_EXPR(
   hostInjector: [formDirectiveBinding],
   properties: ['form: ng-form-model'],
   lifecycle: [onChange],
-  hostListeners: {
-    'submit': 'onSubmit()',
+  host: {
+    '(submit)': 'onSubmit()',
   },
   events: ['ngSubmit'],
   exportAs: 'form'
@@ -113,4 +113,4 @@ export class FormModelDirective extends ControlContainerDirective implements For
       dir.valueAccessor.writeValue(c.value);
     });
   }
-}
+}
diff --git a/modules/angular2/src/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/forms/directives/select_control_value_accessor.ts
@@ -17,19 +17,17 @@ import {ControlValueAccessor} from './control_value_accessor';
  */
 @Directive({
   selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
-  hostListeners: {
-    'change': 'onChange($event.target.value)',
-    'input': 'onChange($event.target.value)',
-    'blur': 'onTouched()'
-  },
-  hostProperties: {
-    'value': 'value',
-    'cd.control?.untouched == true': 'class.ng-untouched',
-    'cd.control?.touched == true': 'class.ng-touched',
-    'cd.control?.pristine == true': 'class.ng-pristine',
-    'cd.control?.dirty == true': 'class.ng-dirty',
-    'cd.control?.valid == true': 'class.ng-valid',
-    'cd.control?.valid == false': 'class.ng-invalid'
+  host: {
+    '(change)': 'onChange($event.target.value)',
+    '(input)': 'onChange($event.target.value)',
+    '(blur)': 'onTouched()',
+    '[value]': 'value',
+    '[class.ng-untouched]': 'cd.control?.untouched == true',
+    '[class.ng-touched]': 'cd.control?.touched == true',
+    '[class.ng-pristine]': 'cd.control?.pristine == true',
+    '[class.ng-dirty]': 'cd.control?.dirty == true',
+    '[class.ng-valid]': 'cd.control?.valid == true',
+    '[class.ng-invalid]': 'cd.control?.valid == false'
   }
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
@@ -48,4 +46,4 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }
-}
+}
diff --git a/modules/angular2/src/forms/directives/template_driven_form_directive.ts b/modules/angular2/src/forms/directives/template_driven_form_directive.ts
@@ -16,8 +16,8 @@ const formDirectiveBinding = CONST_EXPR(new Binding(
 @Directive({
   selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
   hostInjector: [formDirectiveBinding],
-  hostListeners: {
-    'submit': 'onSubmit()',
+  host: {
+    '(submit)': 'onSubmit()',
   },
   events: ['ngSubmit'],
   exportAs: 'form'