refactor(benchmarks): Update compile benchmarks

Update the compile benchmark to allow the Dart transformer to properly
generate the getters, setters, & methods needed.

This also improves the method of duplicating the source templates,
further decreasing runtime from ~5s to ~2s.

Author: Tim Blasi

modules/benchmarks/src/compiler/compiler_benchmark.html

@@ -15,39 +15,7 @@ <h2>Actions</h2>
   <button id="compileWithBindings">CompileWithBindings</button>
   <button id="compileNoBindings">CompileNoBindings</button>
 </p>
-
-<template id="templateNoBindings">
-  <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-    <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-      <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-        <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-          <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<template id="templateWithBindings">
-  <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-    {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-    <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-      {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-      <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-        {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-        <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-          {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-          <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
-            {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 $SCRIPTS$
 
 </body>
-</html>
+</html>

modules/benchmarks/src/compiler/compiler_benchmark.js

@@ -1,7 +1,7 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
 import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {Type} from 'angular2/src/facade/lang';
-import {document} from 'angular2/src/facade/browser';
+import {PromiseWrapper} from 'angular2/src/facade/async';
+import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {DateWrapper, Type, print} from 'angular2/src/facade/lang';
 import {NativeShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
 
 import {Parser, Lexer, DynamicChangeDetection} from 'angular2/change_detection';
@@ -25,41 +25,15 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
 import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
 import * as rc from 'angular2/src/render/dom/compiler/compiler';
 
-function setupReflector() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-
-  reflector.registerGetters({
-    "inter0": (a) => a.inter0, "inter1": (a) => a.inter1,
-    "inter2": (a) => a.inter2, "inter3": (a) => a.inter3, "inter4": (a) => a.inter4,
-
-    "value0": (a) => a.value0, "value1": (a) => a.value1,
-    "value2": (a) => a.value2, "value3": (a) => a.value3, "value4": (a) => a.value4,
-
-    "prop" : (a) => a.prop
-  });
-
-  reflector.registerSetters({
-    "inter0": (a,v) => a.inter0 = v, "inter1": (a,v) => a.inter1 = v,
-    "inter2": (a,v) => a.inter2 = v, "inter3": (a,v) => a.inter3 = v, "inter4": (a,v) => a.inter4 = v,
-
-    "value0": (a,v) => a.value0 = v, "value1": (a,v) => a.value1 = v,
-    "value2": (a,v) => a.value2 = v, "value3": (a,v) => a.value3 = v, "value4": (a,v) => a.value4 = v,
-
-    "attr0": (a,v) => a.attr0 = v, "attr1": (a,v) => a.attr1 = v,
-    "attr2": (a,v) => a.attr2 = v, "attr3": (a,v) => a.attr3 = v, "attr4": (a,v) => a.attr4 = v,
-
-    "prop": (a,v) => a.prop = v
-  });
-}
-
 export function main() {
   BrowserDomAdapter.makeCurrent();
   var count = getIntParameter('elements');
 
-  setupReflector();
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
   var reader = new DirectiveResolver();
   var cache = new CompilerCache();
-  var templateResolver = new FakeTemplateResolver();
+  var templateResolver = new MultipleTemplateResolver(
+      count, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]);
   var urlResolver = new UrlResolver();
   var styleUrlResolver = new StyleUrlResolver(urlResolver);
   var shadowDomStrategy = new NativeShadowDomStrategy(styleUrlResolver);
@@ -75,33 +49,34 @@ export function main() {
     renderCompiler,
     new ProtoViewFactory(new DynamicChangeDetection(null))
   );
-  var templateNoBindings = createTemplateHtml('templateNoBindings', count);
-  var templateWithBindings = createTemplateHtml('templateWithBindings', count);
+
+  function measureWrapper(func, desc) {
+    return function() {
+      var begin = DateWrapper.now();
+      print(`[${desc}] Begin...`);
+      var onSuccess = function(_) {
+        var elapsedMs = DateWrapper.toMillis(
+            DateWrapper.now()) - DateWrapper.toMillis(begin);
+        print(`[${desc}] ...done, took ${elapsedMs} ms`);
+      };
+      PromiseWrapper.then(func(), onSuccess, null);
+    };
+  }
 
   function compileNoBindings() {
-    templateResolver.setTemplateHtml(templateNoBindings);
     cache.clear();
-    compiler.compile(BenchmarkComponent);
+    return compiler.compile(BenchmarkComponentNoBindings);
   }
 
   function compileWithBindings() {
-    templateResolver.setTemplateHtml(templateWithBindings);
     cache.clear();
-    compiler.compile(BenchmarkComponent);
+    return compiler.compile(BenchmarkComponentWithBindings);
   }
 
-  bindAction('#compileNoBindings', compileNoBindings);
-  bindAction('#compileWithBindings', compileWithBindings);
-}
-
-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 result;
+  bindAction('#compileNoBindings',
+      measureWrapper(compileNoBindings, 'No Bindings'));
+  bindAction('#compileWithBindings',
+      measureWrapper(compileWithBindings, 'With Bindings'));
 }
 
 @Directive({
@@ -152,24 +127,71 @@ class Dir4 {
   constructor(dir3:Dir3) {}
 }
 
-@Component()
-class BenchmarkComponent {}
+class MultipleTemplateResolver extends TemplateResolver {
+  _multiple: num;
+  _cache: Map;
 
-class FakeTemplateResolver extends TemplateResolver {
-  _template: View;
-
-  constructor() {
+  constructor(multiple: num, components: List) {
     super();
+    this._multiple = multiple;
+    this._cache = MapWrapper.create();
+    ListWrapper.forEach(components, (c) => this._warmUp(c));
   }
 
-  setTemplateHtml(html: string) {
-    this._template = new View({
-      template: html,
-      directives: [Dir0, Dir1, Dir2, Dir3, Dir4]
-    });
+  _warmUp(component: Type) {
+    var view = super.resolve(component);
+    var multiplier = ListWrapper.createFixedSize(this._multiple);
+    for (var i = 0; i < this._multiple; ++i) {
+      multiplier[i] = view.template;
+    }
+    MapWrapper.set(this._cache, component, ListWrapper.join(multiplier, ''));
   }
 
   resolve(component: Type): View {
-    return this._template;
+    var view = super.resolve(component);
+    var myView = new View({
+      template: MapWrapper.get(this._cache, component),
+      directives: view.directives
+    });
+    return myView;
   }
 }
+
+@Component()
+@View({
+  directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
+  template: `
+<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+  <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+    <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+      <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+        <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`
+})
+class BenchmarkComponentNoBindings {}
+
+@Component()
+@View({
+  directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
+  template: `
+<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+  {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+  <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+    {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+    <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+      {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+      <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+        {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+        <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
+          {{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`
+})
+class BenchmarkComponentWithBindings {}