feat(Compiler): Multiple template per component

fixes #596

- TemplateConfig becomes Template
- introduce a TemplateResolver to pick the cmp template,
- @Component and @Template are disociated

modules/angular2/test/directives/foreach_spec.js

@@ -1,6 +1,8 @@
 import {describe, xit, it, expect, beforeEach, ddescribe, iit, el} from 'angular2/test_lib';
 
 import {DOM} from 'angular2/src/facade/dom';
+import {Map, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
+import {Type, isPresent} from 'angular2/src/facade/lang';
 
 import {Injector} from 'angular2/di';
 import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
@@ -8,20 +10,23 @@ import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/ch
 import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
+import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 
 import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
-import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
+import {Template} from 'angular2/src/core/annotations/template';
 
 import {ViewContainer} from 'angular2/src/core/compiler/view_container';
-import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
 import {Foreach} from 'angular2/src/directives/foreach';
 
 export function main() {
   describe('foreach', () => {
-    var view, cd, compiler, component;
+    var view, cd, compiler, component, tplResolver;
     beforeEach(() => {
-      compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
-        new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
+      tplResolver = new FakeTemplateResolver();
+      compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(null),
+        new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(),
+        new NativeShadowDomStrategy(), tplResolver);
     });
 
     function createView(pv) {
@@ -31,8 +36,13 @@ export function main() {
       cd = view.changeDetector;
     }
 
-    function compileWithTemplate(template) {
-      return compiler.compile(TestComponent, el(template));
+    function compileWithTemplate(html) {
+      var template = new Template({
+        inline: html,
+        directives: [Foreach]
+      });
+      tplResolver.setTemplate(TestComponent, template);
+      return compiler.compile(TestComponent);
     }
 
     var TEMPLATE = '<div><copy-me template="foreach #item in items">{{item.toString()}};</copy-me></div>';
@@ -217,13 +227,7 @@ class Foo {
   }
 }
 
-@Component({
-  selector: 'test-cmp',
-  template: new TemplateConfig({
-    inline: '',  // each test swaps with a custom template.
-    directives: [Foreach]
-  })
-})
+@Component({selector: 'test-cmp'})
 class TestComponent {
   items: any;
   item: any;
@@ -231,3 +235,26 @@ class TestComponent {
     this.items = [1, 2];
   }
 }
+
+class FakeTemplateResolver extends TemplateResolver {
+  _cmpTemplates: Map;
+
+  constructor() {
+    super();
+    this._cmpTemplates = MapWrapper.create();
+  }
+
+  setTemplate(component: Type, template: Template) {
+    MapWrapper.set(this._cmpTemplates, component, template);
+  }
+
+  resolve(component: Type): Template {
+    var override = MapWrapper.get(this._cmpTemplates, component);
+
+    if (isPresent(override)) {
+      return override;
+    }
+
+    return super.resolve(component);
+  }
+}

modules/angular2/test/directives/if_spec.js

@@ -1,6 +1,8 @@
 import {describe, xit, it, expect, beforeEach, ddescribe, iit, el, IS_DARTIUM} from 'angular2/test_lib';
 
 import {DOM} from 'angular2/src/facade/dom';
+import {Map, MapWrapper} from 'angular2/src/facade/collection';
+import {Type, isPresent} from 'angular2/src/facade/lang';
 
 import {Injector} from 'angular2/di';
 import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
@@ -8,18 +10,23 @@ import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/ch
 import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
+import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 
 import {Component} from 'angular2/src/core/annotations/annotations';
-import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
+import {Template} from 'angular2/src/core/annotations/template';
 
 import {If} from 'angular2/src/directives/if';
 
 export function main() {
   describe('if directive', () => {
-    var view, cd, compiler, component;
+    var view, cd, compiler, component, tplResolver;
+
     beforeEach(() => {
-      compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
-        new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
+      tplResolver = new FakeTemplateResolver();
+      compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(null),
+        new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(),
+        new NativeShadowDomStrategy(), tplResolver);
     });
 
     function createView(pv) {
@@ -29,8 +36,13 @@ export function main() {
       cd = view.changeDetector;
     }
 
-    function compileWithTemplate(template) {
-      return compiler.compile(TestComponent, el(template));
+    function compileWithTemplate(html) {
+      var template = new Template({
+        inline: html,
+        directives: [If]
+      });
+      tplResolver.setTemplate(TestComponent, template);
+      return compiler.compile(TestComponent);
     }
 
     it('should work in a template attribute', (done) => {
@@ -188,13 +200,7 @@ export function main() {
   });
 }
 
-@Component({
-  selector: 'test-cmp',
-  template: new TemplateConfig({
-    inline: '',  // each test swaps with a custom template.
-    directives: [If]
-  })
-})
+@Component({selector: 'test-cmp'})
 class TestComponent {
   booleanCondition: boolean;
   numberCondition: number;
@@ -213,3 +219,26 @@ class TestComponent {
     this.nullCondition = null;
   }
 }
+
+class FakeTemplateResolver extends TemplateResolver {
+  _cmpTemplates: Map;
+
+  constructor() {
+    super();
+    this._cmpTemplates = MapWrapper.create();
+  }
+
+  setTemplate(component: Type, template: Template) {
+    MapWrapper.set(this._cmpTemplates, component, template);
+  }
+
+  resolve(component: Type): Template {
+    var override = MapWrapper.get(this._cmpTemplates, component);
+
+    if (isPresent(override)) {
+      return override;
+    }
+
+    return super.resolve(component);
+  }
+}

modules/angular2/test/directives/non_bindable_spec.js

@@ -1,21 +1,27 @@
 import {describe, xit, it, expect, beforeEach, ddescribe, iit, el} from 'angular2/test_lib';
 import {DOM} from 'angular2/src/facade/dom';
+import {Map, MapWrapper} from 'angular2/src/facade/collection';
+import {Type, isPresent} from 'angular2/src/facade/lang';
 import {Injector} from 'angular2/di';
 import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
 import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
-import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
+import {Template} from 'angular2/src/core/annotations/template';
+import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 import {NgElement} from 'angular2/src/core/dom/element';
 import {NonBindable} from 'angular2/src/directives/non_bindable';
 
 export function main() {
   describe('non-bindable', () => {
-    var view, cd, compiler, component;
+    var view, cd, compiler, component, tplResolver;
     beforeEach(() => {
-      compiler = new Compiler(dynamicChangeDetection,
-        null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
+      tplResolver = new FakeTemplateResolver();
+      compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(null),
+        new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(),
+        new NativeShadowDomStrategy(), tplResolver);
     });
 
     function createView(pv) {
@@ -25,8 +31,13 @@ export function main() {
       cd = view.changeDetector;
     }
 
-    function compileWithTemplate(template) {
-      return compiler.compile(TestComponent, el(template));
+    function compileWithTemplate(html) {
+      var template = new Template({
+        inline: html,
+        directives: [NonBindable, TestDecorator]
+      });
+      tplResolver.setTemplate(TestComponent, template);
+      return compiler.compile(TestComponent);
     }
 
     it('should not interpolate children', (done) => {
@@ -63,13 +74,7 @@ export function main() {
   })
 }
 
-@Component({
-  selector: 'test-cmp',
-  template: new TemplateConfig({
-    inline: '',  // each test swaps with a custom template.
-    directives: [NonBindable, TestDecorator]
-  })
-})
+@Component({selector: 'test-cmp'})
 class TestComponent {
   text: string;
   constructor() {
@@ -85,3 +90,26 @@ class TestDecorator {
     DOM.addClass(el.domElement, 'compiled');
   }
 }
+
+class FakeTemplateResolver extends TemplateResolver {
+  _cmpTemplates: Map;
+
+  constructor() {
+    super();
+    this._cmpTemplates = MapWrapper.create();
+  }
+
+  setTemplate(component: Type, template: Template) {
+    MapWrapper.set(this._cmpTemplates, component, template);
+  }
+
+  resolve(component: Type): Template {
+    var override = MapWrapper.get(this._cmpTemplates, component);
+
+    if (isPresent(override)) {
+      return override;
+    }
+
+    return super.resolve(component);
+  }
+}

modules/angular2/test/directives/switch_spec.js

@@ -1,20 +1,26 @@
 import {describe, xit, it, expect, beforeEach, ddescribe, iit, el} from 'angular2/test_lib';
 import {DOM} from 'angular2/src/facade/dom';
+import {Map, MapWrapper} from 'angular2/src/facade/collection';
+import {Type, isPresent} from 'angular2/src/facade/lang';
 import {Injector} from 'angular2/di';
 import {Lexer, Parser, dynamicChangeDetection} from 'angular2/change_detection';
 import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {Component} from 'angular2/src/core/annotations/annotations';
-import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
+import {Template} from 'angular2/src/core/annotations/template';
+import {TemplateLoader} from 'angular2/core';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
 
 export function main() {
   describe('switch', () => {
-    var view, cd, compiler, component;
+    var view, cd, compiler, component, tplResolver;
     beforeEach(() => {
-      compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
-        new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
+      tplResolver = new FakeTemplateResolver();
+      compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(null),
+        new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(),
+        new NativeShadowDomStrategy(), tplResolver);
     });
 
     function createView(pv) {
@@ -24,8 +30,13 @@ export function main() {
       cd = view.changeDetector;
     }
 
-    function compileWithTemplate(template) {
-      return compiler.compile(TestComponent, el(template));
+    function compileWithTemplate(html) {
+      var template = new Template({
+        inline: html,
+        directives: [Switch, SwitchWhen, SwitchDefault]
+      });
+      tplResolver.setTemplate(TestComponent, template);
+      return compiler.compile(TestComponent);
     }
 
     describe('switch value changes', () => {
@@ -143,13 +154,7 @@ export function main() {
   });
 }
 
-@Component({
-  selector: 'test-cmp',
-  template: new TemplateConfig({
-    inline: '',  // each test swaps with a custom template.
-    directives: [Switch, SwitchWhen, SwitchDefault]
-  })
-})
+@Component({selector: 'test-cmp'})
 class TestComponent {
   switchValue: any;
   when1: any;
@@ -161,3 +166,26 @@ class TestComponent {
     this.when2 = null;
   }
 }
+
+class FakeTemplateResolver extends TemplateResolver {
+  _cmpTemplates: Map;
+
+  constructor() {
+    super();
+    this._cmpTemplates = MapWrapper.create();
+  }
+
+  setTemplate(component: Type, template: Template) {
+    MapWrapper.set(this._cmpTemplates, component, template);
+  }
+
+  resolve(component: Type): Template {
+    var override = MapWrapper.get(this._cmpTemplates, component);
+
+    if (isPresent(override)) {
+      return override;
+    }
+
+    return super.resolve(component);
+  }
+}