feat(compiler): added the DynamicComponent annotation

Author: vsavkin

modules/angular2/src/core/annotations/annotations.js

@@ -233,6 +233,40 @@ export class Component extends Directive {
   }
 }
 
+/**
+ * @publicModule angular2/angular2
+ */
+export class DynamicComponent extends Directive {
+  services:any; //List;
+
+  @CONST()
+  constructor({
+    selector,
+    bind,
+    events,
+    services,
+    implementsTypes,
+    lifecycle
+    }:{
+      selector:string,
+      bind:any,
+      events:any,
+      services:List,
+      implementsTypes:List,
+      lifecycle:List
+    }={}) {
+    super({
+      selector: selector,
+      bind: bind,
+      events: events,
+      implementsTypes: implementsTypes,
+      lifecycle: lifecycle
+    });
+
+    this.services = services;
+  }
+}
+
 /**
  * @publicModule angular2/angular2
  */

modules/angular2/src/core/compiler/compiler.js

@@ -163,7 +163,7 @@ export class Compiler {
     var nestedPVPromises = [];
     for (var i = 0; i < compileElements.length; i++) {
       var ce = compileElements[i];
-      if (isPresent(ce.componentDirective)) {
+      if (ce.hasNestedView) {
         this._compileNestedProtoView(ce, nestedPVPromises);
       }
     }

modules/angular2/src/core/compiler/pipeline/compile_element.js

@@ -2,7 +2,7 @@ import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {int, isBlank, isPresent, Type, StringJoiner, assertionsEnabled} from 'angular2/src/facade/lang';
 import {DirectiveMetadata} from '../directive_metadata';
-import {Decorator, Component, Viewport} from '../../annotations/annotations';
+import {Decorator, Component, Viewport, DynamicComponent} from '../../annotations/annotations';
 import {ElementBinder} from '../element_binder';
 import {ProtoElementInjector} from '../element_injector';
 import {ProtoView} from '../view';
@@ -30,6 +30,7 @@ export class CompileElement {
   decoratorDirectives:List<DirectiveMetadata>;
   viewportDirective:DirectiveMetadata;
   componentDirective:DirectiveMetadata;
+  hasNestedView:boolean;
   _allDirectives:List<DirectiveMetadata>;
   isViewRoot:boolean;
   hasBindings:boolean;
@@ -54,6 +55,7 @@ export class CompileElement {
     this.decoratorDirectives = null;
     this.viewportDirective = null;
     this.componentDirective = null;
+    this.hasNestedView = false;
     this._allDirectives = null;
     this.isViewRoot = false;
     this.hasBindings = false;
@@ -157,6 +159,9 @@ export class CompileElement {
       this.viewportDirective = directive;
     } else if (annotation instanceof Component) {
       this.componentDirective = directive;
+      this.hasNestedView = true;
+    } else if (annotation instanceof DynamicComponent) {
+      this.componentDirective = directive;
     }
   }
 

modules/angular2/src/core/compiler/pipeline/directive_parser.js

@@ -5,7 +5,7 @@ import {SelectorMatcher} from '../selector';
 import {CssSelector} from '../selector';
 
 import {DirectiveMetadata} from '../directive_metadata';
-import {Component, Viewport} from '../../annotations/annotations';
+import {DynamicComponent, Component, Viewport} from '../../annotations/annotations';
 import {CompileStep} from './compile_step';
 import {CompileElement} from './compile_element';
 import {CompileControl} from './compile_control';
@@ -109,6 +109,9 @@ function updateMatchedProperties(matchedProperties, selector, directive) {
 
 // check if the directive is compatible with the current element
 function checkDirectiveValidity(directive, current, isTemplateElement) {
+  var isComponent = directive.annotation instanceof Component || directive.annotation instanceof DynamicComponent;
+  var alreadyHasComponent = isPresent(current.componentDirective);
+
   if (directive.annotation instanceof Viewport) {
     if (!isTemplateElement) {
       throw new BaseException(`Viewport directives need to be placed on <template> elements or elements ` +
@@ -118,7 +121,8 @@ function checkDirectiveValidity(directive, current, isTemplateElement) {
     }
   } else if (isTemplateElement) {
     throw new BaseException(`Only template directives are allowed on template elements - check ${current.elementDescription}`);
-  } else if ((directive.annotation instanceof Component) && isPresent(current.componentDirective)) {
+
+  } else if (isComponent && alreadyHasComponent) {
     throw new BaseException(`Multiple component directives not allowed on the same element - check ${current.elementDescription}`);
   }
 }

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

@@ -171,7 +171,7 @@ export class View {
         }
       }
 
-      if (isPresent(componentDirective)) {
+      if (isPresent(binders[i].nestedProtoView) && isPresent(componentDirective)) {
         this.componentChildViews[componentChildViewIndex++].hydrate(shadowDomAppInjector,
           elementInjector, this.lightDoms[i], elementInjector.getComponent(), null);
       }
@@ -441,7 +441,7 @@ export class ProtoView {
       // componentChildViews
       var lightDom = null;
       var bindingPropagationConfig = null;
-      if (isPresent(binder.componentDirective)) {
+      if (isPresent(binder.nestedProtoView) && isPresent(binder.componentDirective)) {
         var strategy = this.shadowDomStrategy;
         var childView = binder.nestedProtoView.instantiate(elementInjector, eventManager);
         changeDetector.addChild(childView.changeDetector);

modules/angular2/test/core/compiler/compiler_common_tests.js

@@ -114,6 +114,7 @@ export function runCompilerCommonTests() {
           var compiler = createCompiler( (parent, current, control) => {
             if (DOM.hasClass(current.element, 'nested')) {
               current.componentDirective = reader.read(NestedComponent);
+              current.hasNestedView = true;
               current.inheritedProtoView = parent.inheritedProtoView;
               current.inheritedElementBinder = current.inheritedProtoView.bindElement(null, 0, null);
             } else {
@@ -163,6 +164,7 @@ export function runCompilerCommonTests() {
 
         it('should allow recursive components', inject([AsyncTestCompleter], (async) => {
           var compiler = createCompiler( (parent, current, control) => {
+            current.hasNestedView = true;
             current.inheritedProtoView = new ProtoView(current.element, null, null);
             current.inheritedElementBinder = current.inheritedProtoView.bindElement(null, 0, null);
             current.componentDirective = reader.read(RecursiveComponent);
@@ -191,6 +193,7 @@ export function runCompilerCommonTests() {
 
           var compiler = createCompiler((parent, current, control) => {
             if (DOM.hasClass(current.element, 'parent')) {
+              current.hasNestedView = true;
               current.componentDirective = reader.read(NestedComponent);
               current.inheritedProtoView = parent.inheritedProtoView;
               current.inheritedElementBinder = current.inheritedProtoView.bindElement(null, 0, null);

modules/angular2/test/core/compiler/pipeline/directive_parser_spec.js

@@ -1,12 +1,12 @@
-import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
+import {describe, beforeEach, it, xit, expect, iit, ddescribe, el} from 'angular2/test_lib';
 import {isPresent, assertionsEnabled} from 'angular2/src/facade/lang';
 import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
 import {DirectiveParser} from 'angular2/src/core/compiler/pipeline/directive_parser';
 import {CompilePipeline} from 'angular2/src/core/compiler/pipeline/compile_pipeline';
 import {CompileStep} from 'angular2/src/core/compiler/pipeline/compile_step';
 import {CompileElement} from 'angular2/src/core/compiler/pipeline/compile_element';
 import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
-import {Component, Decorator, Viewport} from 'angular2/src/core/annotations/annotations';
+import {Component, DynamicComponent, Decorator, Viewport} from 'angular2/src/core/annotations/annotations';
 import {Template} from 'angular2/src/core/annotations/template';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {Lexer, Parser} from 'angular2/change_detection';
@@ -24,7 +24,9 @@ export function main() {
         SomeViewport,
         SomeViewport2,
         SomeComponent,
-        SomeComponent2
+        SomeComponent2,
+        SomeDynamicComponent,
+        SomeDynamicComponent2
       ];
     });
 
@@ -105,6 +107,29 @@ export function main() {
        });
     });
 
+    describe("dynamic component directives", () => {
+      it('should detect dynamic component', () => {
+        var results = createPipeline().process(el('<div some-dynamic-comp></div>'));
+        expect(results[0].componentDirective).toEqual(reader.read(SomeDynamicComponent));
+      });
+
+      it('should not allow multiple dynamic component directives on the same element', () => {
+        expect( () => {
+          createPipeline().process(
+            el('<div some-dynamic-comp some-dynamic-comp2></div>')
+          );
+        }).toThrowError(new RegExp('Multiple component directives not allowed on the same element'));
+      });
+
+      it('should not allow component and dynamic directives on the same element', () => {
+        expect( () => {
+          createPipeline().process(
+            el('<div some-dynamic-comp some-comp></div>')
+          );
+        }).toThrowError(new RegExp('Multiple component directives not allowed on the same element'));
+      });
+    });
+
     describe('viewport directives', () => {
       it('should detect them in attributes', () => {
         var results = createPipeline().process(el('<template some-templ></template>'));
@@ -236,8 +261,17 @@ class SomeComponent {}
 @Component({selector: '[some-comp2]'})
 class SomeComponent2 {}
 
+@DynamicComponent({selector: '[some-dynamic-comp]'})
+class SomeDynamicComponent {}
+
+@DynamicComponent({selector: '[some-dynamic-comp2]'})
+class SomeDynamicComponent2 {}
+
 @Component()
 @Template({
-    directives: [SomeDecorator, SomeViewport, SomeViewport2, SomeComponent, SomeComponent2]
+    directives: [SomeDecorator, SomeViewport, SomeViewport2,
+      SomeComponent, SomeComponent2,
+      SomeDynamicComponent, SomeDynamicComponent2
+    ]
 })
 class MyComp {}

modules/angular2/test/core/compiler/pipeline/element_binding_marker_spec.js

@@ -101,7 +101,6 @@ export function main() {
       }).process(el('<div></div>'));
       assertBinding(results[0], true);
     });
-
   });
 }