fix(compiler): changed the compiler to set up event listeners and host properties on host view elements

Closes #1584

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

@@ -2,8 +2,9 @@ import {Injectable} from 'angular2/di';
 
 import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
 import {BaseException} from 'angular2/src/facade/lang';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {ViewDefinition, ProtoViewDto} from '../../api';
+import {ViewDefinition, ProtoViewDto, DirectiveMetadata} from '../../api';
 import {CompilePipeline} from './compile_pipeline';
 import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
 import {CompileStepFactory, DefaultStepFactory} from './compile_step_factory';
@@ -32,12 +33,21 @@ export class Compiler {
     );
   }
 
-  _compileTemplate(template: ViewDefinition, tplElement):Promise<ProtoViewDto> {
-    var subTaskPromises = [];
-    var pipeline = new CompilePipeline(this._stepFactory.createSteps(template, subTaskPromises));
-    var compileElements;
+  compileHost(directiveMetadata: DirectiveMetadata):Promise<ProtoViewDto> {
+    var hostViewDef = new ViewDefinition({
+      componentId: directiveMetadata.id,
+      absUrl: null,
+      template: null,
+      directives: [directiveMetadata]
+    });
+    var element = DOM.createElement(directiveMetadata.selector);
+    return this._compileTemplate(hostViewDef, element);
+  }
 
-    compileElements = pipeline.process(tplElement, template.componentId);
+  _compileTemplate(viewDef: ViewDefinition, tplElement):Promise<ProtoViewDto> {
+    var subTaskPromises = [];
+    var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef, subTaskPromises));
+    var compileElements = pipeline.process(tplElement, viewDef.componentId);
 
     var protoView = compileElements[0].inheritedProtoView.build();
 

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

@@ -27,11 +27,20 @@ export class DirectiveParser extends CompileStep {
     this._selectorMatcher = new SelectorMatcher();
     this._directives = directives;
     for (var i=0; i<directives.length; i++) {
-      var selector = CssSelector.parse(directives[i].selector);
+      var directive = directives[i];
+      var selector = CssSelector.parse(directive.selector);
+      this._ensureComponentOnlyHasElementSelector(selector, directive);
       this._selectorMatcher.addSelectables(selector, i);
     }
   }
 
+  _ensureComponentOnlyHasElementSelector(selector, directive) {
+    var isElementSelector = selector.length === 1 && selector[0].isElementSelector();
+    if (! isElementSelector &&  directive.type === DirectiveMetadata.COMPONENT_TYPE) {
+      throw new BaseException(`Component '${directive.id}' can only have an element selector, but had '${directive.selector}'`);
+    }
+  }
+
   process(parent:CompileElement, current:CompileElement, control:CompileControl) {
     var attrs = current.attrs();
     var classList = current.classList();

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

@@ -69,6 +69,13 @@ export class CssSelector {
     this.notSelector = null;
   }
 
+  isElementSelector():boolean {
+    return isPresent(this.element) &&
+      ListWrapper.isEmpty(this.classNames) &&
+      ListWrapper.isEmpty(this.attrs) &&
+      isBlank(this.notSelector);
+  }
+
   setElement(element:string = null) {
     if (isPresent(element)) {
       element = element.toLowerCase();