feat(Compiler): Multiple template per component

fixes #596 - TemplateConfig becomes Template - introduce a TemplateResolver to pick the cmp template, - @Component and @Template are disociated
2015-02-12 14:44:59 +01:00
parent 52b062621d
commit e6c8bde808
35 changed files with 953 additions and 724 deletions
--- a/modules/benchmarks/src/compiler/compiler_benchmark.js
+++ b/modules/benchmarks/src/compiler/compiler_benchmark.js
@ -11,19 +11,18 @@ import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_meta

 import {Component} from 'angular2/src/core/annotations/annotations';
 import {Decorator} 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 {reflector} from 'angular2/src/reflection/reflection';
 import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';

-import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
-
 function setupReflector() {
  reflector.registerType(BenchmarkComponent, {
    "factory": () => new BenchmarkComponent(),
    "parameters": [],
-    "annotations" : [new Component({template: new TemplateConfig({directives: [Dir0, Dir1, Dir2, Dir3, Dir4]})})]
+    "annotations" : [new Component()]
  });

  reflector.registerType(Dir0, {
@ -83,37 +82,36 @@ export function main() {
  setupReflector();
  var reader = new DirectiveMetadataReader();
  var cache = new CompilerCache();
-  var compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(new XHRImpl()),
-    reader, new Parser(new Lexer()), cache, new NativeShadowDomStrategy());
-  var templateNoBindings = loadTemplate('templateNoBindings', count);
-  var templateWithBindings = loadTemplate('templateWithBindings', count);
+  var templateResolver = new FakeTemplateResolver();
+  var compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(null),
+    reader, new Parser(new Lexer()), cache, new NativeShadowDomStrategy(), templateResolver);
+  var templateNoBindings = createTemplateHtml('templateNoBindings', count);
+  var templateWithBindings = createTemplateHtml('templateWithBindings', count);

  function compileNoBindings() {
-    // Need to clone every time as the compiler might modify the template!
-    var cloned = DOM.clone(templateNoBindings);
+    templateResolver.setTemplateHtml(templateNoBindings);
    cache.clear();
-    compiler.compile(BenchmarkComponent, cloned);
+    compiler.compile(BenchmarkComponent);
  }

  function compileWithBindings() {
-    // Need to clone every time as the compiler might modify the template!
-    var cloned = DOM.clone(templateWithBindings);
+    templateResolver.setTemplateHtml(templateWithBindings);
    cache.clear();
-    compiler.compile(BenchmarkComponent, cloned);
+    compiler.compile(BenchmarkComponent);
  }

  bindAction('#compileNoBindings', compileNoBindings);
  bindAction('#compileWithBindings', compileWithBindings);
 }

-function loadTemplate(templateId, repeatCount) {
+function createTemplateHtml(templateId, repeatCount) {
  var template = DOM.querySelectorAll(document, `#${templateId}`)[0];
  var content = DOM.getInnerHTML(template);
  var result = '';
  for (var i=0; i<repeatCount; i++) {
    result += content;
  }
-  return DOM.createTemplate(result);
+  return result;
 }

@Decorator({
@ -164,10 +162,24 @@ class Dir4 {
  constructor(dir3:Dir3) {}
 }

-@Component({
-  template: new TemplateConfig({
-    directives: [Dir0, Dir1, Dir2, Dir3, Dir4]
-  })
-})
+@Component()
 class BenchmarkComponent {}

+class FakeTemplateResolver extends TemplateResolver {
+  _template: Template;
+
+  constructor() {
+    super();
+  }
+
+  setTemplateHtml(html: string) {
+    this._template = new Template({
+      inline: html,
+      directives: [Dir0, Dir1, Dir2, Dir3, Dir4]
+    });
+  }
+
+  resolve(component: Type): Template {
+    return this._template;
+  }
+}
--- a/modules/benchmarks/src/naive_infinite_scroll/app.js
+++ b/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>`
+      })]
  });
 }
--- a/modules/benchmarks/src/naive_infinite_scroll/cells.js
+++ b/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>`
      })
    ]
  });
--- a/modules/benchmarks/src/naive_infinite_scroll/index.js
+++ b/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": [],
--- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
+++ b/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>`
      })
    ]
  });
--- a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.js
+++ b/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>`
      })
    ]
  });
--- a/modules/benchmarks/src/tree/tree_benchmark.js
+++ b/modules/benchmarks/src/tree/tree_benchmark.js
@ -1,11 +1,12 @@
 import {Parser, Lexer, ChangeDetector, ChangeDetection, jitChangeDetection}
  from 'angular2/change_detection';

-import {bootstrap, Component, Viewport, TemplateConfig, ViewContainer, Compiler} from 'angular2/angular2';
+import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler} from 'angular2/angular2';

 import {CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';

@ -24,28 +25,26 @@ function setupReflector() {
  reflector.registerType(AppComponent, {
    'factory': () => new AppComponent(),
    'parameters': [],
-    'annotations' : [new Component({
-      selector: 'app',
-      template: new TemplateConfig({
+    'annotations' : [
+      new Component({selector: 'app'}),
+      new Template({
        directives: [TreeComponent],
        inline: `<tree [data]='initData'></tree>`
-      })
-    })]
+      })]
  });

  reflector.registerType(TreeComponent, {
    'factory': () => new TreeComponent(),
    'parameters': [],
-    'annotations' : [new Component({
-      selector: 'tree',
-      bind: {
-        'data': 'data'
-      },
-      template: new TemplateConfig({
-          directives: [TreeComponent, NgIf],
-          inline: `<span> {{data.value}} <span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>`
-      })
-    })]
+    'annotations' : [
+      new Component({
+        selector: 'tree',
+        bind: {'data': 'data'}
+      }),
+      new Template({
+        directives: [TreeComponent, NgIf],
+        inline: `<span> {{data.value}} <span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>`
+      })]
  });

  reflector.registerType(NgIf, {
@ -60,9 +59,10 @@ function setupReflector() {
  });

  reflector.registerType(Compiler, {
-    'factory': (cd, templateLoader, reader, parser, compilerCache, strategy) => new Compiler(cd, templateLoader, reader, parser, compilerCache, strategy),
+    'factory': (cd, templateLoader, reader, parser, compilerCache, strategy, resolver) =>
+      new Compiler(cd, templateLoader, reader, parser, compilerCache, strategy, resolver),
    'parameters': [[ChangeDetection], [TemplateLoader], [DirectiveMetadataReader],
-                   [Parser], [CompilerCache], [ShadowDomStrategy]],
+                   [Parser], [CompilerCache], [ShadowDomStrategy], [TemplateResolver]],
    'annotations': []
  });

@ -84,6 +84,12 @@ function setupReflector() {
    'annotations': []
  });

+  reflector.registerType(TemplateResolver, {
+    'factory': () => new TemplateResolver(),
+    'parameters': [],
+    'annotations': []
+  });
+
  reflector.registerType(XHR, {
    'factory': () => new XHRImpl(),
    'parameters': [],