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/benchmarks/src/naive_infinite_scroll/app.js

@@ -1,7 +1,7 @@
 import {int, isPresent} from 'angular2/src/facade/lang';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {bootstrap, Component, Viewport, TemplateConfig, ViewContainer, Compiler}
+import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler}
     from 'angular2/angular2';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
@@ -83,26 +83,23 @@ export function setupReflectorForApp() {
     'factory': () => { return new App(); },
     'parameters': [],
     'annotations': [
-      new Component({
-        selector: 'scroll-app',
-        template: new TemplateConfig({
-          directives: [ScrollAreaComponent, If, Foreach],
-          inline: `
-            <div>
-              <div style="display: flex">
-                <scroll-area id="testArea"></scroll-area>
-                <div style="padding-left: 20px">
-                  <button id="run-btn">Run</button>
-                  <button id="reset-btn">Reset</button>
-                </div>
+      new Component({selector: 'scroll-app'}),
+      new Template({
+        directives: [ScrollAreaComponent, If, Foreach],
+        inline: `
+          <div>
+            <div style="display: flex">
+              <scroll-area id="testArea"></scroll-area>
+              <div style="padding-left: 20px">
+                <button id="run-btn">Run</button>
+                <button id="reset-btn">Reset</button>
               </div>
-              <div template="if scrollAreas.length > 0">
-                <p>Following tables are only here to add weight to the UI:</p>
-                <scroll-area template="foreach #scrollArea in scrollAreas"></scroll-area>
-              </div>
-            </div>`
-        })
-      })
-    ]
+            </div>
+            <div template="if scrollAreas.length > 0">
+              <p>Following tables are only here to add weight to the UI:</p>
+              <scroll-area template="foreach #scrollArea in scrollAreas"></scroll-area>
+            </div>
+          </div>`
+      })]
   });
 }

modules/benchmarks/src/naive_infinite_scroll/cells.js

@@ -1,7 +1,7 @@
 import {int} from 'angular2/src/facade/lang';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {bootstrap, Component, Viewport, TemplateConfig, ViewContainer, Compiler}
+import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler}
     from 'angular2/angular2';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@@ -103,14 +103,14 @@ export function setupReflectorForCells() {
     'annotations': [
       new Component({
         selector: 'company-name',
-        template: new TemplateConfig({
-            directives: [],
-            inline: `<div [style]="style">{{company.name}}</div>`
-        }),
         bind: {
           'cell-width': 'width',
           'company': 'company'
         }
+      }),
+      new Template({
+          directives: [],
+          inline: `<div [style]="style">{{company.name}}</div>`
       })
     ]
   });
@@ -121,14 +121,14 @@ export function setupReflectorForCells() {
     'annotations': [
       new Component({
         selector: 'opportunity-name',
-        template: new TemplateConfig({
-            directives: [],
-            inline: `<div [style]="style">{{opportunity.name}}</div>`
-        }),
         bind: {
           'cell-width': 'width',
           'opportunity': 'opportunity'
         }
+      }),
+      new Template({
+          directives: [],
+          inline: `<div [style]="style">{{opportunity.name}}</div>`
       })
     ]
   });
@@ -139,14 +139,14 @@ export function setupReflectorForCells() {
     'annotations': [
       new Component({
         selector: 'offering-name',
-        template: new TemplateConfig({
-            directives: [],
-            inline: `<div [style]="style">{{offering.name}}</div>`
-        }),
         bind: {
           'cell-width': 'width',
           'offering': 'offering'
         }
+      }),
+      new Template({
+          directives: [],
+          inline: `<div [style]="style">{{offering.name}}</div>`
       })
     ]
   });
@@ -157,22 +157,22 @@ export function setupReflectorForCells() {
     'annotations': [
       new Component({
         selector: 'stage-buttons',
-        template: new TemplateConfig({
-            directives: [Foreach],
-            inline: `
-              <div [style]="style">
-                  <button template="foreach #stage in stages"
-                          [disabled]="stage.isDisabled"
-                          [style]="stage.style"
-                          on-click="setStage(stage)">
-                    {{stage.name}}
-                  </button>
-              </div>`
-        }),
         bind: {
           'cell-width': 'width',
           'offering': 'offering'
         }
+      }),
+      new Template({
+          directives: [Foreach],
+          inline: `
+            <div [style]="style">
+                <button template="foreach #stage in stages"
+                        [disabled]="stage.isDisabled"
+                        [style]="stage.style"
+                        on-click="setStage(stage)">
+                  {{stage.name}}
+                </button>
+            </div>`
       })
     ]
   });
@@ -183,19 +183,19 @@ export function setupReflectorForCells() {
     'annotations': [
       new Component({
         selector: 'account-cell',
-        template: new TemplateConfig({
-            directives: [],
-            inline: `
-              <div [style]="style">
-                <a href="/account/{{account.accountId}}">
-                  {{account.accountId}}
-                </a>
-              </div>`
-        }),
         bind: {
           'cell-width': 'width',
           'account': 'account'
         }
+      }),
+      new Template({
+          directives: [],
+          inline: `
+            <div [style]="style">
+              <a href="/account/{{account.accountId}}">
+                {{account.accountId}}
+              </a>
+            </div>`
       })
     ]
   });
@@ -206,14 +206,14 @@ export function setupReflectorForCells() {
     'annotations': [
       new Component({
         selector: 'formatted-cell',
-        template: new TemplateConfig({
-            directives: [],
-            inline: `<div [style]="style">{{formattedValue}}</div>`
-        }),
         bind: {
           'cell-width': 'width',
           'value': 'value'
         }
+      }),
+      new Template({
+          directives: [],
+          inline: `<div [style]="style">{{formattedValue}}</div>`
       })
     ]
   });

modules/benchmarks/src/naive_infinite_scroll/index.js

@@ -4,13 +4,14 @@ import {MapWrapper} from 'angular2/src/facade/collection';
 
 import {Parser, Lexer, ChangeDetector, ChangeDetection}
     from 'angular2/change_detection';
-import {bootstrap, Component, Viewport, TemplateConfig, ViewContainer, Compiler}
+import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler}
     from 'angular2/angular2';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {ShadowDomStrategy, 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 {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
 import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
 import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
@@ -172,10 +173,12 @@ export function setupReflectorForAngular() {
   });
 
   reflector.registerType(Compiler, {
-    "factory": (changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy) =>
-      new Compiler(changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy),
+    "factory": (changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy,
+      resolver) =>
+      new Compiler(changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy,
+        resolver),
     "parameters": [[ChangeDetection], [TemplateLoader], [DirectiveMetadataReader], [Parser],
-                   [CompilerCache], [ShadowDomStrategy]],
+                   [CompilerCache], [ShadowDomStrategy], [TemplateResolver]],
     "annotations": []
   });
 
@@ -197,6 +200,12 @@ export function setupReflectorForAngular() {
     "annotations": []
   });
 
+  reflector.registerType(TemplateResolver, {
+    "factory": () => new TemplateResolver(),
+    "parameters": [],
+    "annotations": []
+  });
+
   reflector.registerType(XHR, {
     "factory": () => new XHRImpl(),
     "parameters": [],

modules/benchmarks/src/naive_infinite_scroll/scroll_area.js

@@ -1,7 +1,7 @@
 import {int, FINAL} from 'angular2/src/facade/lang';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {Component, Viewport, TemplateConfig, ViewContainer, Compiler}
+import {Component, Viewport, Template, ViewContainer, Compiler}
     from 'angular2/angular2';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@@ -67,23 +67,23 @@ export function setupReflectorForScrollArea() {
     'annotations': [
       new Component({
         selector: 'scroll-area',
-        template: new TemplateConfig({
-            directives: [ScrollItemComponent, Foreach],
-            inline: `
-              <div>
-                  <div id="scrollDiv"
-                       [style]="scrollDivStyle"
-                       on-scroll="onScroll($event)">
-                      <div id="padding"></div>
-                      <div id="inner">
-                          <scroll-item
-                              template="foreach #item in visibleItems"
-                              [offering]="item">
-                          </scroll-item>
-                      </div>
+      }),
+      new Template({
+        directives: [ScrollItemComponent, Foreach],
+        inline: `
+          <div>
+              <div id="scrollDiv"
+                   [style]="scrollDivStyle"
+                   on-scroll="onScroll($event)">
+                  <div id="padding"></div>
+                  <div id="inner">
+                      <scroll-item
+                          template="foreach #item in visibleItems"
+                          [offering]="item">
+                      </scroll-item>
                   </div>
-              </div>`
-        })
+              </div>
+          </div>`
       })
     ]
   });

modules/benchmarks/src/naive_infinite_scroll/scroll_item.js

@@ -1,6 +1,6 @@
 import {int} from 'angular2/src/facade/lang';
 import {reflector} from 'angular2/src/reflection/reflection';
-import {Component, Viewport, TemplateConfig, ViewContainer, Compiler}
+import {Component, Viewport, Template, ViewContainer, Compiler}
     from 'angular2/angular2';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@@ -51,55 +51,55 @@ export function setupReflectorForScrollItem() {
     'annotations': [
       new Component({
         selector: 'scroll-item',
-        template: new TemplateConfig({
-          directives: [
-            CompanyNameComponent,
-            OpportunityNameComponent,
-            OfferingNameComponent,
-            StageButtonsComponent,
-            AccountCellComponent,
-            FormattedCellComponent
-          ],
-          inline: `
-            <div [style]="itemStyle">
-                <company-name [company]="offering.company"
-                              [cell-width]="companyNameWidth">
-                </company-name>
-                <opportunity-name [opportunity]="offering.opportunity"
-                                  [cell-width]="opportunityNameWidth">
-                </opportunity-name>
-                <offering-name [offering]="offering"
-                               [cell-width]="offeringNameWidth">
-                </offering-name>
-                <account-cell [account]="offering.account"
-                              [cell-width]="accountCellWidth">
-                </account-cell>
-                <formatted-cell [value]="offering.basePoints"
-                                [cell-width]="basePointsWidth">
-                </formatted-cell>
-                <formatted-cell [value]="offering.kickerPoints"
-                                [cell-width]="kickerPointsWidth">
-                </formatted-cell>
-                <stage-buttons [offering]="offering"
-                               [cell-width]="stageButtonsWidth">
-                </stage-buttons>
-                <formatted-cell [value]="offering.bundles"
-                                [cell-width]="bundlesWidth">
-                </formatted-cell>
-                <formatted-cell [value]="offering.dueDate"
-                                [cell-width]="dueDateWidth">
-                </formatted-cell>
-                <formatted-cell [value]="offering.endDate"
-                                [cell-width]="endDateWidth">
-                </formatted-cell>
-                <formatted-cell [value]="offering.aatStatus"
-                                [cell-width]="aatStatusWidth">
-                </formatted-cell>
-            </div>`
-        }),
         bind: {
           'offering': 'offering'
         }
+      }),
+      new Template({
+        directives: [
+          CompanyNameComponent,
+          OpportunityNameComponent,
+          OfferingNameComponent,
+          StageButtonsComponent,
+          AccountCellComponent,
+          FormattedCellComponent
+        ],
+        inline: `
+          <div [style]="itemStyle">
+              <company-name [company]="offering.company"
+                            [cell-width]="companyNameWidth">
+              </company-name>
+              <opportunity-name [opportunity]="offering.opportunity"
+                                [cell-width]="opportunityNameWidth">
+              </opportunity-name>
+              <offering-name [offering]="offering"
+                             [cell-width]="offeringNameWidth">
+              </offering-name>
+              <account-cell [account]="offering.account"
+                            [cell-width]="accountCellWidth">
+              </account-cell>
+              <formatted-cell [value]="offering.basePoints"
+                              [cell-width]="basePointsWidth">
+              </formatted-cell>
+              <formatted-cell [value]="offering.kickerPoints"
+                              [cell-width]="kickerPointsWidth">
+              </formatted-cell>
+              <stage-buttons [offering]="offering"
+                             [cell-width]="stageButtonsWidth">
+              </stage-buttons>
+              <formatted-cell [value]="offering.bundles"
+                              [cell-width]="bundlesWidth">
+              </formatted-cell>
+              <formatted-cell [value]="offering.dueDate"
+                              [cell-width]="dueDateWidth">
+              </formatted-cell>
+              <formatted-cell [value]="offering.endDate"
+                              [cell-width]="endDateWidth">
+              </formatted-cell>
+              <formatted-cell [value]="offering.aatStatus"
+                              [cell-width]="aatStatusWidth">
+              </formatted-cell>
+          </div>`
       })
     ]
   });