diff --git a/modules/benchmarks/e2e_test/change_detection_perf.dart b/modules/benchmarks/e2e_test/change_detection_perf.dart new file mode 100644 index 0000000000..89306a9d5d --- /dev/null +++ b/modules/benchmarks/e2e_test/change_detection_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.change_detection_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/change_detection_perf.es6 b/modules/benchmarks/e2e_test/change_detection_perf.es6 deleted file mode 100644 index 66fa5986cd..0000000000 --- a/modules/benchmarks/e2e_test/change_detection_perf.es6 +++ /dev/null @@ -1,99 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 change detection benchmark', function () { - - var URL = 'benchmarks/src/change_detection/change_detection_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log ng stats (dynamic, reads)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2ChangeDetectionDynamicReads'], - id: 'ng2.changeDetection.dynamic.reads', - params: [ - {name: 'numberOfChecks', value: 900000}, - {name: 'iterations', value: 20, scale: 'linear'} - ], - microMetrics: { - 'detectChangesAvg': 'avg time to detect changes (ms)' - } - }).then(done, done.fail); - }); - - it('should log ng stats (dynamic, writes)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2ChangeDetectionDynamicWrites'], - id: 'ng2.changeDetection.dynamic.writes', - params: [ - {name: 'numberOfChecks', value: 900000}, - {name: 'iterations', value: 20, scale: 'linear'} - ], - microMetrics: { - 'detectChangesAvg': 'avg time to detect changes (ms)' - } - }).then(done, done.fail); - }); - - it('should log ng stats (jit, reads)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2ChangeDetectionJitReads'], - id: 'ng2.changeDetection.jit.reads', - params: [ - {name: 'numberOfChecks', value: 900000}, - {name: 'iterations', value: 20, scale: 'linear'} - ], - microMetrics: { - 'detectChangesAvg': 'avg time to detect changes (ms)' - } - }).then(done, done.fail); - }); - - it('should log ng stats (jit, writes)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2ChangeDetectionJitWrites'], - id: 'ng2.changeDetection.jit.writes', - params: [ - {name: 'numberOfChecks', value: 900000}, - {name: 'iterations', value: 20, scale: 'linear'} - ], - microMetrics: { - 'detectChangesAvg': 'avg time to detect changes (ms)' - } - }).then(done, done.fail); - }); - - it('should log baseline stats (create)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#baselineChangeDetectionReads'], - id: 'baseline.changeDetection.reads', - params: [ - {name: 'numberOfChecks', value: 900000}, - {name: 'iterations', value: 20, scale: 'linear'} - ], - microMetrics: { - 'detectChangesAvg': 'avg time to detect changes (ms)' - } - }).then(done, done.fail); - }); - - it('should log baseline stats (update)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#baselineChangeDetectionWrites'], - id: 'baseline.changeDetection.writes', - params: [ - {name: 'numberOfChecks', value: 900000}, - {name: 'iterations', value: 20, scale: 'linear'} - ], - microMetrics: { - 'detectChangesAvg': 'avg time to detect changes (ms)' - } - }).then(done, done.fail); - }); - -}); diff --git a/modules/benchmarks/e2e_test/change_detection_perf.ts b/modules/benchmarks/e2e_test/change_detection_perf.ts new file mode 100644 index 0000000000..7c8b920e08 --- /dev/null +++ b/modules/benchmarks/e2e_test/change_detection_perf.ts @@ -0,0 +1,96 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 change detection benchmark', function() { + + var URL = 'benchmarks/src/change_detection/change_detection_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log ng stats (dynamic, reads)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#ng2ChangeDetectionDynamicReads'], + id: 'ng2.changeDetection.dynamic.reads', + params: [ + {name: 'numberOfChecks', value: 900000}, + {name: 'iterations', value: 20, scale: 'linear'} + ], + microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'} + }) + .then(done, done.fail); + }); + + it('should log ng stats (dynamic, writes)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#ng2ChangeDetectionDynamicWrites'], + id: 'ng2.changeDetection.dynamic.writes', + params: [ + {name: 'numberOfChecks', value: 900000}, + {name: 'iterations', value: 20, scale: 'linear'} + ], + microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'} + }) + .then(done, done.fail); + }); + + it('should log ng stats (jit, reads)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#ng2ChangeDetectionJitReads'], + id: 'ng2.changeDetection.jit.reads', + params: [ + {name: 'numberOfChecks', value: 900000}, + {name: 'iterations', value: 20, scale: 'linear'} + ], + microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'} + }) + .then(done, done.fail); + }); + + it('should log ng stats (jit, writes)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#ng2ChangeDetectionJitWrites'], + id: 'ng2.changeDetection.jit.writes', + params: [ + {name: 'numberOfChecks', value: 900000}, + {name: 'iterations', value: 20, scale: 'linear'} + ], + microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'} + }) + .then(done, done.fail); + }); + + it('should log baseline stats (create)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#baselineChangeDetectionReads'], + id: 'baseline.changeDetection.reads', + params: [ + {name: 'numberOfChecks', value: 900000}, + {name: 'iterations', value: 20, scale: 'linear'} + ], + microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'} + }) + .then(done, done.fail); + }); + + it('should log baseline stats (update)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#baselineChangeDetectionWrites'], + id: 'baseline.changeDetection.writes', + params: [ + {name: 'numberOfChecks', value: 900000}, + {name: 'iterations', value: 20, scale: 'linear'} + ], + microMetrics: {'detectChangesAvg': 'avg time to detect changes (ms)'} + }) + .then(done, done.fail); + }); + +}); diff --git a/modules/benchmarks/e2e_test/compiler_perf.dart b/modules/benchmarks/e2e_test/compiler_perf.dart new file mode 100644 index 0000000000..73c9ef9d56 --- /dev/null +++ b/modules/benchmarks/e2e_test/compiler_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.compiler_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/compiler_perf.es6 b/modules/benchmarks/e2e_test/compiler_perf.es6 deleted file mode 100644 index 218e3b8c4e..0000000000 --- a/modules/benchmarks/e2e_test/compiler_perf.es6 +++ /dev/null @@ -1,37 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 compiler benchmark', function () { - - var URL = 'benchmarks/src/compiler/compiler_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log withBindings stats', function(done) { - perfUtil.runBenchmark({ - url: URL, - id: 'ng2.compile.withBindings', - params: [{ - name: 'elements', value: 150, scale: 'linear' - }], - work: function() { - browser.executeScript('document.querySelector("#compileWithBindings").click()'); - browser.sleep(500); - } - }).then(done, done.fail); - }); - - it('should log noBindings stats', function(done) { - perfUtil.runBenchmark({ - url: URL, - id: 'ng2.compile.noBindings', - params: [{ - name: 'elements', value: 150, scale: 'linear' - }], - work: function() { - browser.executeScript('document.querySelector("#compileNoBindings").click()'); - browser.sleep(500); - } - }).then(done, done.fail); - }); - -}); diff --git a/modules/benchmarks/e2e_test/compiler_perf.ts b/modules/benchmarks/e2e_test/compiler_perf.ts new file mode 100644 index 0000000000..69a2054b90 --- /dev/null +++ b/modules/benchmarks/e2e_test/compiler_perf.ts @@ -0,0 +1,39 @@ +/// +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 compiler benchmark', function() { + + var URL = 'benchmarks/src/compiler/compiler_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log withBindings stats', function(done) { + perfUtil.runBenchmark({ + url: URL, + id: 'ng2.compile.withBindings', + params: [{name: 'elements', value: 150, scale: 'linear'}], + work: function() { + browser.executeScript('document.querySelector("#compileWithBindings").click()'); + browser.sleep(500); + } + }) + .then(done, done.fail); + }); + + it('should log noBindings stats', function(done) { + perfUtil.runBenchmark({ + url: URL, + id: 'ng2.compile.noBindings', + params: [{name: 'elements', value: 150, scale: 'linear'}], + work: function() { + browser.executeScript('document.querySelector("#compileNoBindings").click()'); + browser.sleep(500); + } + }) + .then(done, done.fail); + }); + +}); diff --git a/modules/benchmarks/e2e_test/costs_perf.dart b/modules/benchmarks/e2e_test/costs_perf.dart new file mode 100644 index 0000000000..80a3168ba6 --- /dev/null +++ b/modules/benchmarks/e2e_test/costs_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.costs_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/costs_perf.es6 b/modules/benchmarks/e2e_test/costs_perf.es6 deleted file mode 100644 index 4c2397da10..0000000000 --- a/modules/benchmarks/e2e_test/costs_perf.es6 +++ /dev/null @@ -1,44 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 cost benchmark', function () { - - var URL = 'benchmarks/src/costs/index.html'; - - // Number of components to create in a single iteration - var benchmarkSize = 200; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log stats for baseline (plain components)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#reset', '#createPlainComponents'], - id: 'ng2.costs.baseline', - params: [{ - name: 'size', value: benchmarkSize, scale: 'linear' - }] - }).then(done, done.fail); - }); - - it('should log stats for components with decorators', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#reset', '#createComponentsWithDirectives'], - id: 'ng2.costs.decorators', - params: [{ - name: 'size', value: benchmarkSize, scale: 'linear' - }] - }).then(done, done.fail); - }); - - it('should log stats for dynamic components', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#reset', '#createDynamicComponents'], - id: 'ng2.costs.dynamic', - params: [{ - name: 'size', value: benchmarkSize, scale: 'linear' - }] - }).then(done, done.fail); - }); -}); diff --git a/modules/benchmarks/e2e_test/costs_perf.ts b/modules/benchmarks/e2e_test/costs_perf.ts new file mode 100644 index 0000000000..ce6bc29dff --- /dev/null +++ b/modules/benchmarks/e2e_test/costs_perf.ts @@ -0,0 +1,44 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 cost benchmark', function() { + + var URL = 'benchmarks/src/costs/index.html'; + + // Number of components to create in a single iteration + var benchmarkSize = 200; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log stats for baseline (plain components)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#reset', '#createPlainComponents'], + id: 'ng2.costs.baseline', + params: [{name: 'size', value: benchmarkSize, scale: 'linear'}] + }) + .then(done, done.fail); + }); + + it('should log stats for components with decorators', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#reset', '#createComponentsWithDirectives'], + id: 'ng2.costs.decorators', + params: [{name: 'size', value: benchmarkSize, scale: 'linear'}] + }) + .then(done, done.fail); + }); + + it('should log stats for dynamic components', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#reset', '#createDynamicComponents'], + id: 'ng2.costs.dynamic', + params: [{name: 'size', value: benchmarkSize, scale: 'linear'}] + }) + .then(done, done.fail); + }); +}); diff --git a/modules/benchmarks/e2e_test/di_perf.dart b/modules/benchmarks/e2e_test/di_perf.dart new file mode 100644 index 0000000000..5471f68264 --- /dev/null +++ b/modules/benchmarks/e2e_test/di_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.di_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/di_perf.es6 b/modules/benchmarks/e2e_test/di_perf.es6 deleted file mode 100644 index 005b9329a9..0000000000 --- a/modules/benchmarks/e2e_test/di_perf.es6 +++ /dev/null @@ -1,100 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 di benchmark', function () { - - var URL = 'benchmarks/src/di/di_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log the stats for getByToken', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#getByToken'], - id: 'ng2.di.getByToken', - params: [{ - name: 'iterations', value: 20000, scale: 'linear' - }], - microMetrics: { - 'injectAvg': 'avg time for injection (in ms)' - } - }).then(done, done.fail); - }); - - it('should log the stats for getByKey', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#getByKey'], - id: 'ng2.di.getByKey', - params: [{ - name: 'iterations', value: 20000, scale: 'linear' - }], - microMetrics: { - 'injectAvg': 'avg time for injection (in ms)' - } - }).then(done, done.fail); - }); - - it('should log the stats for getChild', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#getChild'], - id: 'ng2.di.getChild', - params: [{ - name: 'iterations', value: 20000, scale: 'linear' - }], - microMetrics: { - 'injectAvg': 'avg time for getChild (in ms)' - } - }).then(done, done.fail); - }); - - it('should log the stats for instantiate', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#instantiate'], - id: 'ng2.di.instantiate', - params: [{ - name: 'iterations', value: 10000, scale: 'linear' - }], - microMetrics: { - 'injectAvg': 'avg time for instantiate (in ms)' - } - }).then(done, done.fail); - }); - - /** - * This benchmark measures the cost of creating a new injector with a mix - * of binding types: Type, unresolved, unflattened. - */ - it('should log the stats for createVariety', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#createVariety'], - id: 'ng2.di.createVariety', - params: [{ - name: 'iterations', value: 10000, scale: 'linear' - }], - microMetrics: { - 'injectAvg': 'avg time for createVariety (in ms)' - } - }).then(done, done.fail); - }); - - /** - * Same as 'createVariety' benchmark but operates on fully resolved bindings. - */ - it('should log the stats for createVarietyResolved', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#createVarietyResolved'], - id: 'ng2.di.createVarietyResolved', - params: [{ - name: 'iterations', value: 10000, scale: 'linear' - }], - microMetrics: { - 'injectAvg': 'avg time for createVarietyResolved (in ms)' - } - }).then(done, done.fail); - }); - -}); diff --git a/modules/benchmarks/e2e_test/di_perf.ts b/modules/benchmarks/e2e_test/di_perf.ts new file mode 100644 index 0000000000..69f583cb69 --- /dev/null +++ b/modules/benchmarks/e2e_test/di_perf.ts @@ -0,0 +1,85 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 di benchmark', function() { + + var URL = 'benchmarks/src/di/di_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log the stats for getByToken', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#getByToken'], + id: 'ng2.di.getByToken', + params: [{name: 'iterations', value: 20000, scale: 'linear'}], + microMetrics: {'injectAvg': 'avg time for injection (in ms)'} + }) + .then(done, done.fail); + }); + + it('should log the stats for getByKey', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#getByKey'], + id: 'ng2.di.getByKey', + params: [{name: 'iterations', value: 20000, scale: 'linear'}], + microMetrics: {'injectAvg': 'avg time for injection (in ms)'} + }) + .then(done, done.fail); + }); + + it('should log the stats for getChild', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#getChild'], + id: 'ng2.di.getChild', + params: [{name: 'iterations', value: 20000, scale: 'linear'}], + microMetrics: {'injectAvg': 'avg time for getChild (in ms)'} + }) + .then(done, done.fail); + }); + + it('should log the stats for instantiate', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#instantiate'], + id: 'ng2.di.instantiate', + params: [{name: 'iterations', value: 10000, scale: 'linear'}], + microMetrics: {'injectAvg': 'avg time for instantiate (in ms)'} + }) + .then(done, done.fail); + }); + + /** + * This benchmark measures the cost of creating a new injector with a mix + * of binding types: Type, unresolved, unflattened. + */ + it('should log the stats for createVariety', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#createVariety'], + id: 'ng2.di.createVariety', + params: [{name: 'iterations', value: 10000, scale: 'linear'}], + microMetrics: {'injectAvg': 'avg time for createVariety (in ms)'} + }) + .then(done, done.fail); + }); + + /** + * Same as 'createVariety' benchmark but operates on fully resolved bindings. + */ + it('should log the stats for createVarietyResolved', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#createVarietyResolved'], + id: 'ng2.di.createVarietyResolved', + params: [{name: 'iterations', value: 10000, scale: 'linear'}], + microMetrics: {'injectAvg': 'avg time for createVarietyResolved (in ms)'} + }) + .then(done, done.fail); + }); + +}); diff --git a/modules/benchmarks/e2e_test/element_injector_perf.dart b/modules/benchmarks/e2e_test/element_injector_perf.dart new file mode 100644 index 0000000000..895693f609 --- /dev/null +++ b/modules/benchmarks/e2e_test/element_injector_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.element_injector_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/element_injector_perf.es6 b/modules/benchmarks/e2e_test/element_injector_perf.es6 deleted file mode 100644 index 4e09f7e9fc..0000000000 --- a/modules/benchmarks/e2e_test/element_injector_perf.es6 +++ /dev/null @@ -1,37 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 element injector benchmark', function () { - - var URL = 'benchmarks/src/element_injector/element_injector_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log the stats for instantiate', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#instantiate'], - id: 'ng2.elementInjector.instantiate', - params: [{ - name: 'iterations', value: 20000, scale: 'linear' - }], - microMetrics: { - 'instantiateAvg': 'avg time for injection (in ms)' - } - }).then(done, done.fail); - }); - - it('should log the stats for hydrate', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#hydrate'], - id: 'ng2.elementInjector.hydrate', - params: [{ - name: 'iterations', value: 20000, scale: 'linear' - }], - microMetrics: { - 'instantiateAvg': 'avg time for injection (in ms)' - } - }).then(done, done.fail); - }); - -}); diff --git a/modules/benchmarks/e2e_test/element_injector_perf.ts b/modules/benchmarks/e2e_test/element_injector_perf.ts new file mode 100644 index 0000000000..a7d6324c33 --- /dev/null +++ b/modules/benchmarks/e2e_test/element_injector_perf.ts @@ -0,0 +1,34 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 element injector benchmark', function() { + + var URL = 'benchmarks/src/element_injector/element_injector_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log the stats for instantiate', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#instantiate'], + id: 'ng2.elementInjector.instantiate', + params: [{name: 'iterations', value: 20000, scale: 'linear'}], + microMetrics: {'instantiateAvg': 'avg time for injection (in ms)'} + }) + .then(done, done.fail); + }); + + it('should log the stats for hydrate', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#hydrate'], + id: 'ng2.elementInjector.hydrate', + params: [{name: 'iterations', value: 20000, scale: 'linear'}], + microMetrics: {'instantiateAvg': 'avg time for injection (in ms)'} + }) + .then(done, done.fail); + }); + +}); diff --git a/modules/benchmarks/e2e_test/largetable_perf.dart b/modules/benchmarks/e2e_test/largetable_perf.dart new file mode 100644 index 0000000000..503a391411 --- /dev/null +++ b/modules/benchmarks/e2e_test/largetable_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.largetable_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/largetable_perf.es6 b/modules/benchmarks/e2e_test/largetable_perf.es6 deleted file mode 100644 index 6b0cd673fd..0000000000 --- a/modules/benchmarks/e2e_test/largetable_perf.es6 +++ /dev/null @@ -1,64 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 largetable benchmark', function () { - - var URL = 'benchmarks/src/largetable/largetable_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - // Not yet implemented: - // 'ngBind', - // 'ngBindOnce', - // 'ngBindFn', - // 'ngBindFilter', - // 'interpolationFilter' - - [ - 'interpolation', - 'interpolationAttr', - 'interpolationFn' - ].forEach(function(benchmarkType) { - it('should log the ng stats with: ' + benchmarkType, function(done) { - console.log('executing for type', benchmarkType); - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2DestroyDom', '#ng2CreateDom'], - id: 'ng2.largetable.' + benchmarkType, - params: [{ - name: 'rows', - value: 20, - scale: 'sqrt' - },{ - name: 'columns', - value: 20, - scale: 'sqrt' - },{ - name: 'benchmarkType', - value: benchmarkType - }] - }).then(done, done.fail); - }); - }); - - - it('should log the baseline stats', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#baselineDestroyDom', '#baselineCreateDom'], - id: 'baseline.largetable', - params: [{ - name: 'rows', - value: 100, - scale: 'sqrt' - },{ - name: 'columns', - value: 20, - scale: 'sqrt' - },{ - name: 'benchmarkType', - value: 'baseline' - }] - }).then(done, done.fail);; - }); - -}); diff --git a/modules/benchmarks/e2e_test/largetable_perf.ts b/modules/benchmarks/e2e_test/largetable_perf.ts new file mode 100644 index 0000000000..e1dd51f995 --- /dev/null +++ b/modules/benchmarks/e2e_test/largetable_perf.ts @@ -0,0 +1,52 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 largetable benchmark', function() { + + var URL = 'benchmarks/src/largetable/largetable_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + // Not yet implemented: + // 'ngBind', + // 'ngBindOnce', + // 'ngBindFn', + // 'ngBindFilter', + // 'interpolationFilter' + + ['interpolation', 'interpolationAttr', 'interpolationFn'].forEach(function(benchmarkType) { + it('should log the ng stats with: ' + benchmarkType, function(done) { + console.log('executing for type', benchmarkType); + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#ng2DestroyDom', '#ng2CreateDom'], + id: 'ng2.largetable.' + benchmarkType, + params: [ + {name: 'rows', value: 20, scale: 'sqrt'}, + {name: 'columns', value: 20, scale: 'sqrt'}, + {name: 'benchmarkType', value: benchmarkType} + ] + }) + .then(done, done.fail); + }); + }); + + + it('should log the baseline stats', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#baselineDestroyDom', '#baselineCreateDom'], + id: 'baseline.largetable', + params: [ + {name: 'rows', value: 100, scale: 'sqrt'}, + {name: 'columns', value: 20, scale: 'sqrt'}, + {name: 'benchmarkType', value: 'baseline'} + ] + }) + .then(done, done.fail); + ; + }); + +}); diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.dart b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.dart new file mode 100644 index 0000000000..6e76e34c72 --- /dev/null +++ b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.naive_infinite_scroll_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.es6 b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.es6 deleted file mode 100644 index 80d9fb4f30..0000000000 --- a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.es6 +++ /dev/null @@ -1,35 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 naive infinite scroll benchmark', function () { - - var URL = 'benchmarks/src/naive_infinite_scroll/index.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - [1, 2, 4].forEach(function(appSize) { - it('should run scroll benchmark and collect stats for appSize = ' + - appSize, function(done) { - perfUtil.runBenchmark({ - url: URL, - id: 'ng2.naive_infinite_scroll', - work: function() { - $('#reset-btn').click(); - $('#run-btn').click(); - browser.wait(() => { - return $('#done').getText().then( - function() { return true; }, - function() { return false; }); - }, 10000); - }, - params: [{ - name: 'appSize', value: appSize - }, { - name: 'iterationCount', value: 20, scale: 'linear' - }, { - name: 'scrollIncrement', value: 40 - }] - }).then(done, done.fail); - }); - }); - -}); diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts new file mode 100644 index 0000000000..f8d2c2e94c --- /dev/null +++ b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts @@ -0,0 +1,36 @@ +/// +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 naive infinite scroll benchmark', function() { + + var URL = 'benchmarks/src/naive_infinite_scroll/index.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + [1, 2, 4].forEach(function(appSize) { + it('should run scroll benchmark and collect stats for appSize = ' + appSize, function(done) { + perfUtil.runBenchmark({ + url: URL, + id: 'ng2.naive_infinite_scroll', + work: function() { + $('#reset-btn').click(); + $('#run-btn').click(); + browser.wait(() => { + return $('#done').getText().then(function() { return true; }, + function() { return false; }); + }, 10000); + }, + params: [ + {name: 'appSize', value: appSize}, + {name: 'iterationCount', value: 20, scale: 'linear'}, + {name: 'scrollIncrement', value: 40} + ] + }) + .then(done, done.fail); + }); + }); + +}); diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.dart b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.dart new file mode 100644 index 0000000000..c029906c47 --- /dev/null +++ b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.naive_infinite_scroll_spec; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.es6 b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.es6 deleted file mode 100644 index 7411cee33b..0000000000 --- a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.es6 +++ /dev/null @@ -1,65 +0,0 @@ -var testUtil = require('angular2/src/test_lib/e2e_util'); - -describe('ng2 naive infinite scroll benchmark', function () { - - var URL = 'benchmarks/src/naive_infinite_scroll/index.html?appSize=3'; - - afterEach(testUtil.verifyNoBrowserErrors); - - it('should not throw errors', function() { - browser.get(URL); - var expectedRowCount = 18; - var expectedCellsPerRow = 28; - var allScrollItems = 'scroll-app #testArea scroll-item'; - var cells = `${ allScrollItems } .row *`; - var stageButtons = - `${ allScrollItems } .row stage-buttons button`; - - var count = function(selector) { - return browser.executeScript( - `return document.querySelectorAll("${ selector }").length;` - ); - } - - var clickFirstOf = function(selector) { - return browser.executeScript( - `document.querySelector("${ selector }").click();` - ); - } - - var firstTextOf = function(selector) { - return browser.executeScript( - `return document.querySelector("${ selector }").innerText;` - ); - } - - // Make sure rows are rendered - count(allScrollItems).then(function(c) { - expect(c).toBe(expectedRowCount); - }); - - // Make sure cells are rendered - count(cells).then(function(c) { - expect(c).toBe(expectedRowCount * expectedCellsPerRow); - }); - - // Click on first enabled button and verify stage changes - firstTextOf(`${ stageButtons }:enabled`).then(function(text) { - expect(text).toBe('Pitched'); - clickFirstOf(`${ stageButtons }:enabled`).then(function() { - firstTextOf(`${ stageButtons }:enabled`).then(function(text) { - expect(text).toBe('Won'); - }) - }); - }) - - $("#reset-btn").click(); - $("#run-btn").click(); - browser.wait(() => { - return $('#done').getText().then( - function() { return true; }, - function() { return false; }); - }, 10000); - }); - -}); diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts new file mode 100644 index 0000000000..d1a76ef855 --- /dev/null +++ b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts @@ -0,0 +1,62 @@ +/// +/// +import {afterEach, describe, expect, it} from 'angular2/test_lib'; + +var testUtil = require('angular2/src/test_lib/e2e_util'); + +describe('ng2 naive infinite scroll benchmark', function() { + + var URL = 'benchmarks/src/naive_infinite_scroll/index.html?appSize=3'; + + afterEach(testUtil.verifyNoBrowserErrors); + + it('should not throw errors', function() { + browser.get(URL); + var expectedRowCount = 18; + var expectedCellsPerRow = 28; + var allScrollItems = 'scroll-app #testArea scroll-item'; + var cells = `${ allScrollItems } .row *`; + var stageButtons = `${ allScrollItems } .row stage-buttons button`; + + var count = + function(selector) { + return browser.executeScript(`return document.querySelectorAll("${ selector }").length;`); + } + + var clickFirstOf = + function(selector) { + return browser.executeScript(`document.querySelector("${ selector }").click();`); + } + + var firstTextOf = + function(selector) { + return browser.executeScript(`return document.querySelector("${ selector }").innerText;`); + } + + // Make sure rows are rendered + count(allScrollItems) + .then(function(c) { expect(c).toBe(expectedRowCount); }); + + // Make sure cells are rendered + count(cells).then(function(c) { expect(c).toBe(expectedRowCount * expectedCellsPerRow); }); + + // Click on first enabled button and verify stage changes + firstTextOf(`${ stageButtons }:enabled`) + .then(function(text) { + expect(text).toBe('Pitched'); + clickFirstOf(`${ stageButtons }:enabled`) + .then(function() { + firstTextOf(`${ stageButtons }:enabled`) + .then(function(text) { expect(text).toBe('Won'); }) + }); + }) + + $("#reset-btn") + .click(); + $("#run-btn").click(); + browser.wait(() => { + return $('#done').getText().then(function() { return true; }, function() { return false; }); + }, 10000); + }); + +}); diff --git a/modules/benchmarks/e2e_test/selector_perf.dart b/modules/benchmarks/e2e_test/selector_perf.dart new file mode 100644 index 0000000000..ac9325d390 --- /dev/null +++ b/modules/benchmarks/e2e_test/selector_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.selector_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/selector_perf.es6 b/modules/benchmarks/e2e_test/selector_perf.es6 deleted file mode 100644 index 6238486979..0000000000 --- a/modules/benchmarks/e2e_test/selector_perf.es6 +++ /dev/null @@ -1,42 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 selector benchmark', function () { - - var URL = 'benchmarks/src/compiler/selector_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log parse stats', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#parse'], - id: 'ng2.selector.parse', - params: [{ - name: 'selectors', value: 10000, scale: 'linear' - }] - }).then(done, done.fail); - }); - - it('should log addSelectable stats', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#addSelectable'], - id: 'ng2.selector.addSelectable', - params: [{ - name: 'selectors', value: 10000, scale: 'linear' - }] - }).then(done, done.fail); - }); - - it('should log match stats', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#match'], - id: 'ng2.selector.match', - params: [{ - name: 'selectors', value: 10000, scale: 'linear' - }] - }).then(done, done.fail); - }); - -}); diff --git a/modules/benchmarks/e2e_test/selector_perf.ts b/modules/benchmarks/e2e_test/selector_perf.ts new file mode 100644 index 0000000000..8b9cfb88eb --- /dev/null +++ b/modules/benchmarks/e2e_test/selector_perf.ts @@ -0,0 +1,42 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 selector benchmark', function() { + + var URL = 'benchmarks/src/compiler/selector_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log parse stats', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#parse'], + id: 'ng2.selector.parse', + params: [{name: 'selectors', value: 10000, scale: 'linear'}] + }) + .then(done, done.fail); + }); + + it('should log addSelectable stats', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#addSelectable'], + id: 'ng2.selector.addSelectable', + params: [{name: 'selectors', value: 10000, scale: 'linear'}] + }) + .then(done, done.fail); + }); + + it('should log match stats', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#match'], + id: 'ng2.selector.match', + params: [{name: 'selectors', value: 10000, scale: 'linear'}] + }) + .then(done, done.fail); + }); + +}); diff --git a/modules/benchmarks/e2e_test/tree_perf.dart b/modules/benchmarks/e2e_test/tree_perf.dart new file mode 100644 index 0000000000..afaf29c7d3 --- /dev/null +++ b/modules/benchmarks/e2e_test/tree_perf.dart @@ -0,0 +1,5 @@ +library benchmarks.e2e_test.tree_perf; + +main() { + +} diff --git a/modules/benchmarks/e2e_test/tree_perf.es6 b/modules/benchmarks/e2e_test/tree_perf.es6 deleted file mode 100644 index 50ca4674cb..0000000000 --- a/modules/benchmarks/e2e_test/tree_perf.es6 +++ /dev/null @@ -1,70 +0,0 @@ -var perfUtil = require('angular2/src/test_lib/perf_util'); - -describe('ng2 tree benchmark', function () { - - var URL = 'benchmarks/src/tree/tree_benchmark.html'; - - afterEach(perfUtil.verifyNoBrowserErrors); - - it('should log the ng stats with viewcache', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2DestroyDom', '#ng2CreateDom'], - id: 'ng2.tree.create.viewcache', - params: [{ - name: 'depth', value: 9, scale: 'log2' - },{ - name: 'viewcache', value: 'true' - }] - }).then(done, done.fail); - }); - - it('should log the ng stats without viewcache', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2DestroyDom', '#ng2CreateDom'], - id: 'ng2.tree.create.plain', - params: [{ - name: 'depth', value: 9, scale: 'log2' - },{ - name: 'viewcache', value: 'false' - }] - }).then(done, done.fail); - }); - - it('should log the ng stats (update)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#ng2CreateDom'], - id: 'ng2.tree.update', - params: [{ - name: 'depth', value: 9, scale: 'log2' - },{ - name: 'viewcache', value: 'true' - }] - }).then(done, done.fail); - }); - - it('should log the baseline stats', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#baselineDestroyDom', '#baselineCreateDom'], - id: 'baseline.tree.create', - params: [{ - name: 'depth', value: 9, scale: 'log2' - }] - }).then(done, done.fail); - }); - - it('should log the baseline stats (update)', function(done) { - perfUtil.runClickBenchmark({ - url: URL, - buttons: ['#baselineCreateDom'], - id: 'baseline.tree.update', - params: [{ - name: 'depth', value: 9, scale: 'log2' - }] - }).then(done, done.fail); - }); - -}); diff --git a/modules/benchmarks/e2e_test/tree_perf.ts b/modules/benchmarks/e2e_test/tree_perf.ts new file mode 100644 index 0000000000..48230a82df --- /dev/null +++ b/modules/benchmarks/e2e_test/tree_perf.ts @@ -0,0 +1,65 @@ +/// +import {afterEach, describe, it} from 'angular2/test_lib'; + +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 tree benchmark', function() { + + var URL = 'benchmarks/src/tree/tree_benchmark.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log the ng stats with viewcache', function(done) { + perfUtil + .runClickBenchmark({ + url: URL, + buttons: ['#ng2DestroyDom', '#ng2CreateDom'], + id: 'ng2.tree.create.viewcache', + params: [{name: 'depth', value: 9, scale: 'log2'}, {name: 'viewcache', value: 'true'}] + }) + .then(done, done.fail); + }); + + it('should log the ng stats without viewcache', function(done) { + perfUtil + .runClickBenchmark({ + url: URL, + buttons: ['#ng2DestroyDom', '#ng2CreateDom'], + id: 'ng2.tree.create.plain', + params: [{name: 'depth', value: 9, scale: 'log2'}, {name: 'viewcache', value: 'false'}] + }) + .then(done, done.fail); + }); + + it('should log the ng stats (update)', function(done) { + perfUtil + .runClickBenchmark({ + url: URL, + buttons: ['#ng2CreateDom'], + id: 'ng2.tree.update', + params: [{name: 'depth', value: 9, scale: 'log2'}, {name: 'viewcache', value: 'true'}] + }) + .then(done, done.fail); + }); + + it('should log the baseline stats', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#baselineDestroyDom', '#baselineCreateDom'], + id: 'baseline.tree.create', + params: [{name: 'depth', value: 9, scale: 'log2'}] + }) + .then(done, done.fail); + }); + + it('should log the baseline stats (update)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#baselineCreateDom'], + id: 'baseline.tree.update', + params: [{name: 'depth', value: 9, scale: 'log2'}] + }) + .then(done, done.fail); + }); + +}); diff --git a/modules/benchmarks/src/change_detection/change_detection_benchmark.js b/modules/benchmarks/src/change_detection/change_detection_benchmark.js deleted file mode 100644 index 8954214ae6..0000000000 --- a/modules/benchmarks/src/change_detection/change_detection_benchmark.js +++ /dev/null @@ -1,320 +0,0 @@ -import {reflector} from 'angular2/src/reflection/reflection'; -import {isPresent, isJsObject} from 'angular2/src/facade/lang'; -import {getIntParameter, bindAction, microBenchmark} from 'angular2/src/test_lib/benchmark_util'; -import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; - -import { - Lexer, - Parser, - ChangeDispatcher, - ChangeDetection, - DynamicChangeDetection, - JitChangeDetection, - ChangeDetectorDefinition, - BindingRecord, - DirectiveRecord, - DirectiveIndex, - DEFAULT -} from 'angular2/change_detection'; - - -// ---- SHARED - -class Obj { - field0; - field1; - field2; - field3; - field4; - field5; - field6; - field7; - field8; - field9; - - - setField(index, value) { - switch (index) { - case 0: this.field0 = value; break; - case 1: this.field1 = value; break; - case 2: this.field2 = value; break; - case 3: this.field3 = value; break; - case 4: this.field4 = value; break; - case 5: this.field5 = value; break; - case 6: this.field6 = value; break; - case 7: this.field7 = value; break; - case 8: this.field8 = value; break; - case 9: this.field9 = value; break; - } - } - - getField(index) { - switch (index) { - case 0: return this.field0; - case 1: return this.field1; - case 2: return this.field2; - case 3: return this.field3; - case 4: return this.field4; - case 5: return this.field5; - case 6: return this.field6; - case 7: return this.field7; - case 8: return this.field8; - case 9: return this.field9; - } - } -} - -class Row { - obj; - targetObj; - field0; - field1; - field2; - field3; - field4; - field5; - field6; - field7; - field8; - field9; - - next; -} - -function createObject() { - var obj = new Obj(); - for (var i = 0; i < 10; ++i) { - obj.setField(i, i); - } - return obj; -} - -function changeObject(object) { - for (var i = 0; i < 10; ++i) { - object.setField(i, object.getField(i) + 1); - } -} - -function setUpReflector() { - reflector.registerGetters({ - 'field0': function(obj){return obj.field0}, - 'field1': function(obj){return obj.field1}, - 'field2': function(obj){return obj.field2}, - 'field3': function(obj){return obj.field3}, - 'field4': function(obj){return obj.field4}, - 'field5': function(obj){return obj.field5}, - 'field6': function(obj){return obj.field6}, - 'field7': function(obj){return obj.field7}, - 'field8': function(obj){return obj.field8}, - 'field9': function(obj){return obj.field9} - }); - reflector.registerSetters({ - 'field0': function(obj, v){return obj.field0 = v}, - 'field1': function(obj, v){return obj.field1 = v}, - 'field2': function(obj, v){return obj.field2 = v}, - 'field3': function(obj, v){return obj.field3 = v}, - 'field4': function(obj, v){return obj.field4 = v}, - 'field5': function(obj, v){return obj.field5 = v}, - 'field6': function(obj, v){return obj.field6 = v}, - 'field7': function(obj, v){return obj.field7 = v}, - 'field8': function(obj, v){return obj.field8 = v}, - 'field9': function(obj, v){return obj.field9 = v} - }); -} - - - -// ---- BASELINE - -function setUpBaseline(iterations, object) { - function createRow(i) { - var r = new Row(); - r.obj = object; - r.targetObj = new Obj(); - return r; - } - - var head = createRow(0); - var current = head; - for (var i = 1; i < iterations; i++) { - var newRow = createRow(i); - current.next = newRow; - current = newRow; - } - return head; -} - -function checkBaselineRow(r) { - var obj = r.obj; - - if (obj.field0 !== r.field0) {r.field0 = obj.field0; r.targetObj.field0 = obj.field0; } - if (obj.field1 !== r.field1) {r.field1 = obj.field1; r.targetObj.field1 = obj.field1; } - if (obj.field2 !== r.field2) {r.field2 = obj.field2; r.targetObj.field2 = obj.field2; } - if (obj.field3 !== r.field3) {r.field3 = obj.field3; r.targetObj.field3 = obj.field3; } - if (obj.field4 !== r.field4) {r.field4 = obj.field4; r.targetObj.field4 = obj.field4; } - if (obj.field5 !== r.field5) {r.field5 = obj.field5; r.targetObj.field5 = obj.field5; } - if (obj.field6 !== r.field6) {r.field6 = obj.field6; r.targetObj.field6 = obj.field6; } - if (obj.field7 !== r.field7) {r.field7 = obj.field7; r.targetObj.field7 = obj.field7; } - if (obj.field8 !== r.field8) {r.field8 = obj.field8; r.targetObj.field8 = obj.field8; } - if (obj.field9 !== r.field9) {r.field9 = obj.field9; r.targetObj.field9 = obj.field9; } -} - -function runBaselineChangeDetection(baselineHead){ - var current = baselineHead; - while (isPresent(current)) { - checkBaselineRow(current); - current = current.next; - } -} - -function runBaselineReads(baselineHead, numberOfRuns) { - for (var i = 0; i < numberOfRuns; ++i) { - runBaselineChangeDetection(baselineHead); - } -} - -function runBaselineWrites(baselineHead, numberOfRuns, object) { - for (var i = 0; i < numberOfRuns; ++i) { - changeObject(object); - runBaselineChangeDetection(baselineHead); - } -} - - - -// ---- CHANGE DETECTION - -function setUpChangeDetection(changeDetection:ChangeDetection, iterations, object) { - var dispatcher = new DummyDispatcher(); - var parser = new Parser(new Lexer()); - - var parentProto = changeDetection.createProtoChangeDetector(new ChangeDetectorDefinition('parent', null, [], [], [])); - var parentCd = parentProto.instantiate(dispatcher); - - var directiveRecord = new DirectiveRecord({directiveIndex: new DirectiveIndex(0, 0)}); - var bindings = [ - BindingRecord.createForDirective(parser.parseBinding('field0', null), "field0", reflector.setter("field0"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field1', null), "field1", reflector.setter("field1"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field2', null), "field2", reflector.setter("field2"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field3', null), "field3", reflector.setter("field3"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field4', null), "field4", reflector.setter("field4"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field5', null), "field5", reflector.setter("field5"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field6', null), "field6", reflector.setter("field6"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field7', null), "field7", reflector.setter("field7"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field8', null), "field8", reflector.setter("field8"), directiveRecord), - BindingRecord.createForDirective(parser.parseBinding('field9', null), "field9", reflector.setter("field9"), directiveRecord) - ]; - - var proto = changeDetection.createProtoChangeDetector(new ChangeDetectorDefinition("proto", null, [], bindings, [directiveRecord])); - - var targetObj = new Obj(); - for (var i = 0; i < iterations; ++i) { - var cd = proto.instantiate(dispatcher); - cd.hydrate(object, null, new FakeDirectives(targetObj)); - parentCd.addChild(cd); - } - return parentCd; -} - -function runChangeDetectionReads(changeDetector, numberOfRuns) { - for(var i = 0; i < numberOfRuns; ++i) { - changeDetector.detectChanges(); - } -} - -function runChangeDetectionWrites(changeDetector, numberOfRuns, object) { - for(var i = 0; i < numberOfRuns; ++i) { - changeObject(object); - changeDetector.detectChanges(); - } -} - - - - -export function main () { - BrowserDomAdapter.makeCurrent(); - var numberOfChecks = getIntParameter('numberOfChecks'); - var numberOfRuns = getIntParameter('iterations'); - - var numberOfChecksPerDetector = 10; - var numberOfDetectors = numberOfChecks / numberOfChecksPerDetector / numberOfRuns; - - setUpReflector(); - var object = createObject() - - // -- BASELINE - var baselineHead = setUpBaseline(numberOfDetectors, object); - - runBaselineReads(baselineHead, 1); //warmup - - bindAction( - '#baselineChangeDetectionReads', - () => microBenchmark('detectChangesAvg', numberOfRuns, () => runBaselineReads(baselineHead, numberOfRuns)) - ); - - bindAction( - '#baselineChangeDetectionWrites', - () => microBenchmark('detectChangesAvg', numberOfRuns, () => runBaselineWrites(baselineHead, numberOfRuns, object)) - ); - - - - - // -- DYNAMIC - var ng2DynamicChangeDetector = setUpChangeDetection(new DynamicChangeDetection(null), numberOfDetectors, object); - - runChangeDetectionReads(ng2DynamicChangeDetector, 1); //warmup - - bindAction( - '#ng2ChangeDetectionDynamicReads', - () => microBenchmark('detectChangesAvg', numberOfRuns, () => runChangeDetectionReads(ng2DynamicChangeDetector, numberOfRuns)) - ); - - bindAction( - '#ng2ChangeDetectionDynamicWrites', - () => microBenchmark('detectChangesAvg', numberOfRuns, () => runChangeDetectionWrites(ng2DynamicChangeDetector, numberOfRuns, object)) - ); - - - - - // -- JIT - // Reenable when we have transformers for Dart - if (isJsObject({})) { - var ng2JitChangeDetector = setUpChangeDetection(new JitChangeDetection(null), numberOfDetectors, object); - - runChangeDetectionReads(ng2JitChangeDetector, 1); //warmup - - bindAction( - '#ng2ChangeDetectionJitReads', - () => microBenchmark('detectChangesAvg', numberOfRuns, () => runChangeDetectionReads(ng2JitChangeDetector, numberOfRuns)) - ); - - bindAction( - '#ng2ChangeDetectionJitWrites', - () => microBenchmark('detectChangesAvg', numberOfRuns, () => runChangeDetectionWrites(ng2JitChangeDetector, numberOfRuns, object)) - ); - } else { - bindAction('#ng2ChangeDetectionJitReads', () => {}); - bindAction('#ng2ChangeDetectionJitWrites', () => {}); - } -} - -class FakeDirectives { - targetObj:Obj; - - constructor(targetObj) { - this.targetObj = targetObj; - } - - getDirectiveFor(record) { - return this.targetObj; - } -} - -class DummyDispatcher extends ChangeDispatcher { - notifyOnBinding(bindingRecord, newValue) { - throw "Should not be used"; - } -} diff --git a/modules/benchmarks/src/change_detection/change_detection_benchmark.ts b/modules/benchmarks/src/change_detection/change_detection_benchmark.ts new file mode 100644 index 0000000000..e45b47508a --- /dev/null +++ b/modules/benchmarks/src/change_detection/change_detection_benchmark.ts @@ -0,0 +1,383 @@ +import {reflector} from 'angular2/src/reflection/reflection'; +import {isPresent, isJsObject} from 'angular2/src/facade/lang'; +import {getIntParameter, bindAction, microBenchmark} from 'angular2/src/test_lib/benchmark_util'; +import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; + +import { + Lexer, + Parser, + ChangeDispatcher, + ChangeDetection, + DynamicChangeDetection, + JitChangeDetection, + ChangeDetectorDefinition, + BindingRecord, + DirectiveRecord, + DirectiveIndex, + DEFAULT +} from 'angular2/change_detection'; + + +// ---- SHARED + +class Obj { + field0; + field1; + field2; + field3; + field4; + field5; + field6; + field7; + field8; + field9; + + + setField(index, value) { + switch (index) { + case 0: + this.field0 = value; + break; + case 1: + this.field1 = value; + break; + case 2: + this.field2 = value; + break; + case 3: + this.field3 = value; + break; + case 4: + this.field4 = value; + break; + case 5: + this.field5 = value; + break; + case 6: + this.field6 = value; + break; + case 7: + this.field7 = value; + break; + case 8: + this.field8 = value; + break; + case 9: + this.field9 = value; + break; + } + } + + getField(index) { + switch (index) { + case 0: + return this.field0; + case 1: + return this.field1; + case 2: + return this.field2; + case 3: + return this.field3; + case 4: + return this.field4; + case 5: + return this.field5; + case 6: + return this.field6; + case 7: + return this.field7; + case 8: + return this.field8; + case 9: + return this.field9; + } + } +} + +class Row { + obj; + targetObj; + field0; + field1; + field2; + field3; + field4; + field5; + field6; + field7; + field8; + field9; + + next; +} + +function createObject() { + var obj = new Obj(); + for (var i = 0; i < 10; ++i) { + obj.setField(i, i); + } + return obj; +} + +function changeObject(object) { + for (var i = 0; i < 10; ++i) { + object.setField(i, object.getField(i) + 1); + } +} + +function setUpReflector() { + reflector.registerGetters({ + 'field0': function(obj) { return obj.field0 }, + 'field1': function(obj) { return obj.field1 }, + 'field2': function(obj) { return obj.field2 }, + 'field3': function(obj) { return obj.field3 }, + 'field4': function(obj) { return obj.field4 }, + 'field5': function(obj) { return obj.field5 }, + 'field6': function(obj) { return obj.field6 }, + 'field7': function(obj) { return obj.field7 }, + 'field8': function(obj) { return obj.field8 }, + 'field9': function(obj) { return obj.field9 } + }); + reflector.registerSetters({ + 'field0': function(obj, v) { return obj.field0 = v }, + 'field1': function(obj, v) { return obj.field1 = v }, + 'field2': function(obj, v) { return obj.field2 = v }, + 'field3': function(obj, v) { return obj.field3 = v }, + 'field4': function(obj, v) { return obj.field4 = v }, + 'field5': function(obj, v) { return obj.field5 = v }, + 'field6': function(obj, v) { return obj.field6 = v }, + 'field7': function(obj, v) { return obj.field7 = v }, + 'field8': function(obj, v) { return obj.field8 = v }, + 'field9': function(obj, v) { return obj.field9 = v } + }); +} + + + +// ---- BASELINE + +function setUpBaseline(iterations, object) { + function createRow(i) { + var r = new Row(); + r.obj = object; + r.targetObj = new Obj(); + return r; + } + + var head = createRow(0); + var current = head; + for (var i = 1; i < iterations; i++) { + var newRow = createRow(i); + current.next = newRow; + current = newRow; + } + return head; +} + +function checkBaselineRow(r) { + var obj = r.obj; + + if (obj.field0 !== r.field0) { + r.field0 = obj.field0; + r.targetObj.field0 = obj.field0; + } + if (obj.field1 !== r.field1) { + r.field1 = obj.field1; + r.targetObj.field1 = obj.field1; + } + if (obj.field2 !== r.field2) { + r.field2 = obj.field2; + r.targetObj.field2 = obj.field2; + } + if (obj.field3 !== r.field3) { + r.field3 = obj.field3; + r.targetObj.field3 = obj.field3; + } + if (obj.field4 !== r.field4) { + r.field4 = obj.field4; + r.targetObj.field4 = obj.field4; + } + if (obj.field5 !== r.field5) { + r.field5 = obj.field5; + r.targetObj.field5 = obj.field5; + } + if (obj.field6 !== r.field6) { + r.field6 = obj.field6; + r.targetObj.field6 = obj.field6; + } + if (obj.field7 !== r.field7) { + r.field7 = obj.field7; + r.targetObj.field7 = obj.field7; + } + if (obj.field8 !== r.field8) { + r.field8 = obj.field8; + r.targetObj.field8 = obj.field8; + } + if (obj.field9 !== r.field9) { + r.field9 = obj.field9; + r.targetObj.field9 = obj.field9; + } +} + +function runBaselineChangeDetection(baselineHead) { + var current = baselineHead; + while (isPresent(current)) { + checkBaselineRow(current); + current = current.next; + } +} + +function runBaselineReads(baselineHead, numberOfRuns) { + for (var i = 0; i < numberOfRuns; ++i) { + runBaselineChangeDetection(baselineHead); + } +} + +function runBaselineWrites(baselineHead, numberOfRuns, object) { + for (var i = 0; i < numberOfRuns; ++i) { + changeObject(object); + runBaselineChangeDetection(baselineHead); + } +} + + + +// ---- CHANGE DETECTION + +function setUpChangeDetection(changeDetection: ChangeDetection, iterations, object) { + var dispatcher = new DummyDispatcher(); + var parser = new Parser(new Lexer()); + + var parentProto = changeDetection.createProtoChangeDetector( + new ChangeDetectorDefinition('parent', null, [], [], [])); + var parentCd = parentProto.instantiate(dispatcher); + + var directiveRecord = new DirectiveRecord({directiveIndex: new DirectiveIndex(0, 0)}); + var bindings = [ + BindingRecord.createForDirective(parser.parseBinding('field0', null), "field0", + reflector.setter("field0"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field1', null), "field1", + reflector.setter("field1"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field2', null), "field2", + reflector.setter("field2"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field3', null), "field3", + reflector.setter("field3"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field4', null), "field4", + reflector.setter("field4"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field5', null), "field5", + reflector.setter("field5"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field6', null), "field6", + reflector.setter("field6"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field7', null), "field7", + reflector.setter("field7"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field8', null), "field8", + reflector.setter("field8"), directiveRecord), + BindingRecord.createForDirective(parser.parseBinding('field9', null), "field9", + reflector.setter("field9"), directiveRecord) + ]; + + var proto = changeDetection.createProtoChangeDetector( + new ChangeDetectorDefinition("proto", null, [], bindings, [directiveRecord])); + + var targetObj = new Obj(); + for (var i = 0; i < iterations; ++i) { + var cd = proto.instantiate(dispatcher); + cd.hydrate(object, null, new FakeDirectives(targetObj)); + parentCd.addChild(cd); + } + return parentCd; +} + +function runChangeDetectionReads(changeDetector, numberOfRuns) { + for (var i = 0; i < numberOfRuns; ++i) { + changeDetector.detectChanges(); + } +} + +function runChangeDetectionWrites(changeDetector, numberOfRuns, object) { + for (var i = 0; i < numberOfRuns; ++i) { + changeObject(object); + changeDetector.detectChanges(); + } +} + + + +export function main() { + BrowserDomAdapter.makeCurrent(); + var numberOfChecks = getIntParameter('numberOfChecks'); + var numberOfRuns = getIntParameter('iterations'); + + var numberOfChecksPerDetector = 10; + var numberOfDetectors = numberOfChecks / numberOfChecksPerDetector / numberOfRuns; + + setUpReflector(); + var object = createObject() + + // -- BASELINE + var baselineHead = setUpBaseline(numberOfDetectors, object); + + runBaselineReads(baselineHead, 1); // warmup + + bindAction('#baselineChangeDetectionReads', + () => microBenchmark('detectChangesAvg', numberOfRuns, + () => runBaselineReads(baselineHead, numberOfRuns))); + + bindAction('#baselineChangeDetectionWrites', + () => microBenchmark('detectChangesAvg', numberOfRuns, + () => runBaselineWrites(baselineHead, numberOfRuns, object))); + + + + // -- DYNAMIC + var ng2DynamicChangeDetector = + setUpChangeDetection(new DynamicChangeDetection(null), numberOfDetectors, object); + + runChangeDetectionReads(ng2DynamicChangeDetector, 1); // warmup + + bindAction( + '#ng2ChangeDetectionDynamicReads', + () => microBenchmark('detectChangesAvg', numberOfRuns, + () => runChangeDetectionReads(ng2DynamicChangeDetector, numberOfRuns))); + + bindAction('#ng2ChangeDetectionDynamicWrites', + () => microBenchmark( + 'detectChangesAvg', numberOfRuns, + () => runChangeDetectionWrites(ng2DynamicChangeDetector, numberOfRuns, object))); + + + + // -- JIT + // Reenable when we have transformers for Dart + if (isJsObject({})) { + var ng2JitChangeDetector = + setUpChangeDetection(new JitChangeDetection(null), numberOfDetectors, object); + + runChangeDetectionReads(ng2JitChangeDetector, 1); // warmup + + bindAction( + '#ng2ChangeDetectionJitReads', + () => microBenchmark('detectChangesAvg', numberOfRuns, + () => runChangeDetectionReads(ng2JitChangeDetector, numberOfRuns))); + + bindAction('#ng2ChangeDetectionJitWrites', + () => microBenchmark( + 'detectChangesAvg', numberOfRuns, + () => runChangeDetectionWrites(ng2JitChangeDetector, numberOfRuns, object))); + } else { + bindAction('#ng2ChangeDetectionJitReads', () => {}); + bindAction('#ng2ChangeDetectionJitWrites', () => {}); + } +} + +class FakeDirectives { + targetObj: Obj; + + constructor(targetObj) { this.targetObj = targetObj; } + + getDirectiveFor(record) { return this.targetObj; } +} + +class DummyDispatcher extends ChangeDispatcher { + notifyOnBinding(bindingRecord, newValue) { throw "Should not be used"; } +} diff --git a/modules/benchmarks/src/compiler/compiler_benchmark.js b/modules/benchmarks/src/compiler/compiler_benchmark.ts similarity index 74% rename from modules/benchmarks/src/compiler/compiler_benchmark.js rename to modules/benchmarks/src/compiler/compiler_benchmark.ts index 2b07a74855..506e2a5c76 100644 --- a/modules/benchmarks/src/compiler/compiler_benchmark.js +++ b/modules/benchmarks/src/compiler/compiler_benchmark.ts @@ -1,17 +1,17 @@ import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; import {PromiseWrapper} from 'angular2/src/facade/async'; -import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; +import {List, ListWrapper, Map, 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 { + NativeShadowDomStrategy +} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy'; import {Parser, Lexer, DynamicChangeDetection} from 'angular2/change_detection'; import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler'; import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver'; -import {Component} from 'angular2/src/core/annotations_impl/annotations'; -import {Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {Component, Directive, View} from 'angular2/angular2'; import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader'; import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver'; import {UrlResolver} from 'angular2/src/services/url_resolver'; @@ -37,26 +37,18 @@ export function main() { var urlResolver = new UrlResolver(); var styleUrlResolver = new StyleUrlResolver(urlResolver); var shadowDomStrategy = new NativeShadowDomStrategy(styleUrlResolver); - var renderCompiler = new rc.DefaultDomCompiler( - new Parser(new Lexer()), shadowDomStrategy, new TemplateLoader(null, urlResolver) - ); - var compiler = new Compiler( - reader, - cache, - templateResolver, - new ComponentUrlMapper(), - urlResolver, - renderCompiler, - new ProtoViewFactory(new DynamicChangeDetection(null)) - ); + var renderCompiler = new rc.DefaultDomCompiler(new Parser(new Lexer()), shadowDomStrategy, + new TemplateLoader(null, urlResolver)); + var compiler = + new Compiler(reader, cache, templateResolver, new ComponentUrlMapper(), urlResolver, + renderCompiler, new ProtoViewFactory(new DynamicChangeDetection(null))); 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); + var elapsedMs = DateWrapper.toMillis(DateWrapper.now()) - DateWrapper.toMillis(begin); print(`[${desc}] ...done, took ${elapsedMs} ms`); }; PromiseWrapper.then(func(), onSuccess, null); @@ -73,65 +65,39 @@ export function main() { return compiler.compile(BenchmarkComponentWithBindings); } - bindAction('#compileNoBindings', - measureWrapper(compileNoBindings, 'No Bindings')); - bindAction('#compileWithBindings', - measureWrapper(compileWithBindings, 'With Bindings')); + bindAction('#compileNoBindings', measureWrapper(compileNoBindings, 'No Bindings')); + bindAction('#compileWithBindings', measureWrapper(compileWithBindings, 'With Bindings')); } -@Directive({ - selector: '[dir0]', - properties: [ - 'prop: attr0' - ] -}) -class Dir0 {} +@Directive({selector: '[dir0]', properties: ['prop: attr0']}) +class Dir0 { +} -@Directive({ - selector: '[dir1]', - properties: [ - 'prop: attr1' - ] -}) +@Directive({selector: '[dir1]', properties: ['prop: attr1']}) class Dir1 { - constructor(dir0:Dir0) {} + constructor(dir0: Dir0) {} } -@Directive({ - selector: '[dir2]', - properties: [ - 'prop: attr2' - ] -}) +@Directive({selector: '[dir2]', properties: ['prop: attr2']}) class Dir2 { - constructor(dir1:Dir1) {} + constructor(dir1: Dir1) {} } -@Directive({ - selector: '[dir3]', - properties: [ - 'prop: attr3' - ] -}) +@Directive({selector: '[dir3]', properties: ['prop: attr3']}) class Dir3 { - constructor(dir2:Dir2) {} + constructor(dir2: Dir2) {} } -@Directive({ - selector: '[dir4]', - properties: [ - 'prop: attr4' - ] -}) +@Directive({selector: '[dir4]', properties: ['prop: attr4']}) class Dir4 { - constructor(dir3:Dir3) {} + constructor(dir3: Dir3) {} } class MultipleTemplateResolver extends TemplateResolver { - _multiple: num; - _cache: Map; + _multiple: number; + _cache: Map; - constructor(multiple: num, components: List) { + constructor(multiple: number, components: List) { super(); this._multiple = multiple; this._cache = MapWrapper.create(); @@ -149,10 +115,8 @@ class MultipleTemplateResolver extends TemplateResolver { resolve(component: Type): View { var view = super.resolve(component); - var myView = new View({ - template: MapWrapper.get(this._cache, component), - directives: view.directives - }); + var myView = + new View({template: MapWrapper.get(this._cache, component), directives: view.directives}); return myView; } } @@ -172,7 +136,8 @@ class MultipleTemplateResolver extends TemplateResolver { ` }) -class BenchmarkComponentNoBindings {} +class BenchmarkComponentNoBindings { +} @Component() @View({ @@ -194,4 +159,5 @@ class BenchmarkComponentNoBindings {} ` }) -class BenchmarkComponentWithBindings {} +class BenchmarkComponentWithBindings { +} diff --git a/modules/benchmarks/src/compiler/selector_benchmark.js b/modules/benchmarks/src/compiler/selector_benchmark.ts similarity index 71% rename from modules/benchmarks/src/compiler/selector_benchmark.js rename to modules/benchmarks/src/compiler/selector_benchmark.ts index ebf3664f03..c8ddea8087 100644 --- a/modules/benchmarks/src/compiler/selector_benchmark.js +++ b/modules/benchmarks/src/compiler/selector_benchmark.ts @@ -12,20 +12,20 @@ export function main() { var fixedMatcher; var fixedSelectorStrings = []; var fixedSelectors = []; - for (var i=0; i { - matchCount += selected; - }); + for (var i = 0; i < count; i++) { + fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => { matchCount += selected; }); } return matchCount; } @@ -56,16 +54,16 @@ export function main() { function randomSelector() { var res = randomStr(5); - for (var i=0; i<3; i++) { - res += '.'+randomStr(5); + for (var i = 0; i < 3; i++) { + res += '.' + randomStr(5); } - for (var i=0; i<3; i++) { - res += '['+randomStr(3)+'='+randomStr(6)+']'; + for (var i = 0; i < 3; i++) { + res += '[' + randomStr(3) + '=' + randomStr(6) + ']'; } return res; } -function randomStr(len){ +function randomStr(len) { var s = ''; while (s.length < len) { s += randomChar(); @@ -73,11 +71,11 @@ function randomStr(len){ return s; } -function randomChar(){ +function randomChar() { var n = randomNum(62); - if(n<10) return n.toString(); //1-10 - if(n<36) return StringWrapper.fromCharCode(n+55); //A-Z - return StringWrapper.fromCharCode(n+61); //a-z + if (n < 10) return n.toString(); // 1-10 + if (n < 36) return StringWrapper.fromCharCode(n + 55); // A-Z + return StringWrapper.fromCharCode(n + 61); // a-z } function randomNum(max) { diff --git a/modules/benchmarks/src/costs/index.js b/modules/benchmarks/src/costs/index.ts similarity index 54% rename from modules/benchmarks/src/costs/index.js rename to modules/benchmarks/src/costs/index.ts index ee2eb5fc05..3a1f9fd243 100644 --- a/modules/benchmarks/src/costs/index.js +++ b/modules/benchmarks/src/costs/index.ts @@ -1,8 +1,11 @@ import { bootstrap, + Component, + Directive, DynamicComponentLoader, - ElementRef - } from 'angular2/angular2'; + ElementRef, + View +} from 'angular2/angular2'; import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle'; import {List, ListWrapper} from 'angular2/src/facade/collection'; import {reflector} from 'angular2/src/reflection/reflection'; @@ -10,11 +13,6 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'; import {NgIf, NgFor} from 'angular2/directives'; -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - var testList = null; export function main() { @@ -22,34 +20,35 @@ export function main() { var size = getIntParameter('size'); testList = ListWrapper.createFixedSize(size); - bootstrap(AppComponent).then((ref) => { - var injector = ref.injector; - var app:AppComponent = injector.get(AppComponent); - var lifeCycle = injector.get(LifeCycle); + bootstrap(AppComponent) + .then((ref) => { + var injector = ref.injector; + var app: AppComponent = injector.get(AppComponent); + var lifeCycle = injector.get(LifeCycle); - bindAction('#reset', function() { - app.reset(); - lifeCycle.tick(); - }); + bindAction('#reset', function() { + app.reset(); + lifeCycle.tick(); + }); - // Baseline (plain components) - bindAction('#createPlainComponents', function() { - app.createPlainComponents(); - lifeCycle.tick(); - }); + // Baseline (plain components) + bindAction('#createPlainComponents', function() { + app.createPlainComponents(); + lifeCycle.tick(); + }); - // Components with decorators - bindAction('#createComponentsWithDirectives', function() { - app.createComponentsWithDirectives(); - lifeCycle.tick(); - }); + // Components with decorators + bindAction('#createComponentsWithDirectives', function() { + app.createComponentsWithDirectives(); + lifeCycle.tick(); + }); - // Components with decorators - bindAction('#createDynamicComponents', function() { - app.createDynamicComponents(); - lifeCycle.tick(); - }); - }); + // Components with decorators + bindAction('#createDynamicComponents', function() { + app.createDynamicComponents(); + lifeCycle.tick(); + }); + }); } @Component({selector: 'app'}) @@ -70,33 +69,31 @@ export function main() { ` }) class AppComponent { - list:List; - testingPlainComponents:boolean; - testingWithDirectives:boolean; - testingDynamicComponents:boolean; + list: List; + testingPlainComponents: boolean; + testingWithDirectives: boolean; + testingDynamicComponents: boolean; - constructor() { - this.reset(); - } + constructor() { this.reset(); } - reset():void { + reset(): void { this.list = []; this.testingPlainComponents = false; this.testingWithDirectives = false; this.testingDynamicComponents = false; } - createPlainComponents():void { + createPlainComponents(): void { this.list = testList; this.testingPlainComponents = true; } - createComponentsWithDirectives():void { + createComponentsWithDirectives(): void { this.list = testList; this.testingWithDirectives = true; } - createDynamicComponents():void { + createDynamicComponents(): void { this.list = testList; this.testingDynamicComponents = true; } @@ -104,14 +101,16 @@ class AppComponent { @Component({selector: 'dummy'}) @View({template: `
`}) -class DummyComponent {} +class DummyComponent { +} @Directive({selector: '[dummy-decorator]'}) -class DummyDirective {} +class DummyDirective { +} @Component({selector: 'dynamic-dummy'}) class DynamicDummy { - constructor(loader:DynamicComponentLoader, location:ElementRef) { + constructor(loader: DynamicComponentLoader, location: ElementRef) { loader.loadIntoExistingLocation(DummyComponent, location); } } diff --git a/modules/benchmarks/src/di/di_benchmark.js b/modules/benchmarks/src/di/di_benchmark.ts similarity index 63% rename from modules/benchmarks/src/di/di_benchmark.js rename to modules/benchmarks/src/di/di_benchmark.ts index 41d9738cec..b8bcdace26 100644 --- a/modules/benchmarks/src/di/di_benchmark.js +++ b/modules/benchmarks/src/di/di_benchmark.ts @@ -20,19 +20,13 @@ export function main() { var D_KEY = Key.get(D); var E_KEY = Key.get(E); - var childInjector = injector. - resolveAndCreateChild([]). - resolveAndCreateChild([]). - resolveAndCreateChild([]). - resolveAndCreateChild([]). - resolveAndCreateChild([]); + var childInjector = injector.resolveAndCreateChild([]) + .resolveAndCreateChild([]) + .resolveAndCreateChild([]) + .resolveAndCreateChild([]) + .resolveAndCreateChild([]); - var variousBindings = [ - A, - bind(B).toClass(C), - [D, [E]], - bind(F).toValue(6) - ]; + var variousBindings = [A, bind(B).toClass(C), [D, [E]], bind(F).toValue(6)]; var variousBindingsResolved = Injector.resolve(variousBindings); @@ -81,72 +75,43 @@ export function main() { } } - bindAction( - '#getByToken', - () => microBenchmark('injectAvg', iterations, getByToken) - ); - bindAction( - '#getByKey', - () => microBenchmark('injectAvg', iterations, getByKey) - ); - bindAction( - '#getChild', - () => microBenchmark('injectAvg', iterations, getChild) - ); - bindAction( - '#instantiate', - () => microBenchmark('injectAvg', iterations, instantiate) - ); - bindAction( - '#createVariety', - () => microBenchmark('injectAvg', iterations, createVariety) - ); - bindAction( - '#createVarietyResolved', - () => microBenchmark('injectAvg', iterations, createVarietyResolved) - ); + bindAction('#getByToken', () => microBenchmark('injectAvg', iterations, getByToken)); + bindAction('#getByKey', () => microBenchmark('injectAvg', iterations, getByKey)); + bindAction('#getChild', () => microBenchmark('injectAvg', iterations, getChild)); + bindAction('#instantiate', () => microBenchmark('injectAvg', iterations, instantiate)); + bindAction('#createVariety', () => microBenchmark('injectAvg', iterations, createVariety)); + bindAction('#createVarietyResolved', + () => microBenchmark('injectAvg', iterations, createVarietyResolved)); } @Injectable() class A { - constructor() { - count++; - } + constructor() { count++; } } @Injectable() class B { - constructor(a:A) { - count++; - } + constructor(a: A) { count++; } } @Injectable() class C { - constructor(b:B) { - count++; - } + constructor(b: B) { count++; } } @Injectable() class D { - constructor(c:C, b:B) { - count++; - } + constructor(c: C, b: B) { count++; } } @Injectable() class E { - constructor(d:D, c:C) { - count++; - } + constructor(d: D, c: C) { count++; } } @Injectable() class F { - constructor(e:E, d:D) { - count++; - } + constructor(e: E, d: D) { count++; } } diff --git a/modules/benchmarks/src/element_injector/element_injector_benchmark.js b/modules/benchmarks/src/element_injector/element_injector_benchmark.ts similarity index 78% rename from modules/benchmarks/src/element_injector/element_injector_benchmark.js rename to modules/benchmarks/src/element_injector/element_injector_benchmark.ts index d34ec94cb7..edc65a5465 100644 --- a/modules/benchmarks/src/element_injector/element_injector_benchmark.js +++ b/modules/benchmarks/src/element_injector/element_injector_benchmark.ts @@ -22,47 +22,35 @@ export function main() { var proto = ProtoElementInjector.create(null, 0, bindings, false, 0); var elementInjector = proto.instantiate(null); - function instantiate () { + function instantiate() { for (var i = 0; i < iterations; ++i) { var ei = proto.instantiate(null); ei.hydrate(appInjector, null, null); } } - function hydrate () { + function hydrate() { for (var i = 0; i < iterations; ++i) { elementInjector.dehydrate(); elementInjector.hydrate(appInjector, null, null); } } - bindAction( - '#instantiate', - () => microBenchmark('instantiateAvg', iterations, instantiate) - ); - bindAction( - '#hydrate', - () => microBenchmark('instantiateAvg', iterations, hydrate) - ); + bindAction('#instantiate', () => microBenchmark('instantiateAvg', iterations, instantiate)); + bindAction('#hydrate', () => microBenchmark('instantiateAvg', iterations, hydrate)); } @Injectable() class A { - constructor() { - count++; - } + constructor() { count++; } } @Injectable() class B { - constructor() { - count++; - } + constructor() { count++; } } @Injectable() class C { - constructor(a:A, b:B) { - count++; - } + constructor(a: A, b: B) { count++; } } diff --git a/modules/benchmarks/src/largetable/largetable_benchmark.js b/modules/benchmarks/src/largetable/largetable_benchmark.ts similarity index 74% rename from modules/benchmarks/src/largetable/largetable_benchmark.js rename to modules/benchmarks/src/largetable/largetable_benchmark.ts index a90d6ee859..ee3d96ec8f 100644 --- a/modules/benchmarks/src/largetable/largetable_benchmark.js +++ b/modules/benchmarks/src/largetable/largetable_benchmark.ts @@ -1,9 +1,4 @@ -import {bootstrap} from 'angular2/angular2'; - -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {bootstrap, Component, Directive, View} from 'angular2/angular2'; import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle'; @@ -11,7 +6,11 @@ import {reflector} from 'angular2/src/reflection/reflection'; import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities'; import {DOM} from 'angular2/src/dom/dom_adapter'; import {window, document, gc} from 'angular2/src/facade/browser'; -import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'; +import { + getIntParameter, + getStringParameter, + bindAction +} from 'angular2/src/test_lib/benchmark_util'; import {NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives'; import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; @@ -27,7 +26,8 @@ export const LARGETABLE_COLS = 'LargetableComponent.cols'; function _createBindings() { return [ - bind(BENCHMARK_TYPE).toValue(getStringParameter('benchmarkType')), + bind(BENCHMARK_TYPE) + .toValue(getStringParameter('benchmarkType')), bind(LARGETABLE_ROWS).toValue(getIntParameter('rows')), bind(LARGETABLE_COLS).toValue(getIntParameter('columns')) ]; @@ -55,8 +55,7 @@ export function main() { BrowserDomAdapter.makeCurrent(); var totalRows = getIntParameter('rows'); var totalColumns = getIntParameter('columns'); - BASELINE_LARGETABLE_TEMPLATE = DOM.createTemplate( - '
'); + BASELINE_LARGETABLE_TEMPLATE = DOM.createTemplate('
'); setupReflector(); @@ -77,7 +76,7 @@ export function main() { window.console.profile(name + ' w GC'); var duration = 0; var count = 0; - while(count++ < 150) { + while (count++ < 150) { gc(); var start = window.performance.now(); create(); @@ -90,7 +89,7 @@ export function main() { window.console.profile(name + ' w/o GC'); duration = 0; count = 0; - while(count++ < 150) { + while (count++ < 150) { var start = window.performance.now(); create(); duration += window.performance.now() - start; @@ -104,10 +103,10 @@ export function main() { function ng2CreateDom() { var data = ListWrapper.createFixedSize(totalRows); - for (var i=0; i { - var injector = ref.injector; - app = injector.get(AppComponent); - lifecycle = injector.get(LifeCycle); - bindAction('#ng2DestroyDom', ng2DestroyDom); - bindAction('#ng2CreateDom', ng2CreateDom); - bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update')); - bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create')); - }); + bootstrap(AppComponent, _createBindings()) + .then((ref) => { + var injector = ref.injector; + app = injector.get(AppComponent); + lifecycle = injector.get(LifeCycle); + bindAction('#ng2DestroyDom', ng2DestroyDom); + bindAction('#ng2CreateDom', ng2CreateDom); + bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update')); + bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create')); + }); } - function baselineDestroyDom() { - baselineRootLargetableComponent.update(buildTable(0, 0)); - } + function baselineDestroyDom() { baselineRootLargetableComponent.update(buildTable(0, 0)); } function baselineCreateDom() { baselineRootLargetableComponent.update(buildTable(totalRows, totalColumns)); } function initBaseline() { - baselineRootLargetableComponent = new BaseLineLargetableComponent( DOM.querySelector(document, 'baseline'), getStringParameter('benchmarkType'), getIntParameter('rows'), getIntParameter('columns')); @@ -147,7 +144,8 @@ export function main() { bindAction('#baselineCreateDom', baselineCreateDom); bindAction('#baselineUpdateDomProfile', profile(baselineCreateDom, noop, 'baseline-update')); - bindAction('#baselineCreateDomProfile', profile(baselineCreateDom, baselineDestroyDom, 'baseline-create')); + bindAction('#baselineCreateDomProfile', + profile(baselineCreateDom, baselineDestroyDom, 'baseline-create')); } initNg2(); @@ -157,7 +155,7 @@ export function main() { function buildTable(rows, columns) { var tbody = DOM.createElement('tbody'); var template = DOM.createElement('span'); - var i,j,row,cell; + var i, j, row, cell; DOM.appendChild(template, DOM.createElement('span')); DOM.appendChild(template, DOM.createTextNode(':')); DOM.appendChild(template, DOM.createElement('span')); @@ -180,17 +178,16 @@ function buildTable(rows, columns) { class BaseLineLargetableComponent { element; table; - benchmarkType:string; - rows:number; - columns:number; - constructor(element,benchmarkType,rows:number,columns:number) { + benchmarkType: string; + rows: number; + columns: number; + constructor(element, benchmarkType, rows: number, columns: number) { this.element = element; this.benchmarkType = benchmarkType; this.rows = rows; this.columns = columns; this.table = DOM.clone(BASELINE_LARGETABLE_TEMPLATE.content.firstChild); - var shadowRoot = DOM.createShadowRoot(this.element) - DOM.appendChild(shadowRoot, this.table); + var shadowRoot = DOM.createShadowRoot(this.element) DOM.appendChild(shadowRoot, this.table); } update(tbody) { var oldBody = DOM.querySelector(this.table, 'tbody'); @@ -203,41 +200,29 @@ class BaseLineLargetableComponent { } class CellData { - i:number; - j:number; - constructor(i,j) { + i: number; + j: number; + constructor(i, j) { this.i = i; this.j = j; } - jFn () { - return this.j; - } + jFn() { return this.j; } - iFn () { - return this.i; - } + iFn() { return this.i; } } -@Component({ - selector: 'app' -}) +@Component({selector: 'app'}) @View({ directives: [LargetableComponent], template: `` }) class AppComponent { data; - benchmarkType:string; + benchmarkType: string; } -@Component({ - selector: 'largetable', - properties: [ - 'data', - 'benchmarkType' - ] -}) +@Component({selector: 'largetable', properties: ['data', 'benchmarkType']}) @View({ directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault], template: ` @@ -274,16 +259,13 @@ class AppComponent { }) class LargetableComponent { data; - benchmarkType:string; - rows:number; - columns:number; - constructor( - @Inject(BENCHMARK_TYPE) benchmarkType, - @Inject(LARGETABLE_ROWS) rows, - @Inject(LARGETABLE_COLS) columns) { + benchmarkType: string; + rows: number; + columns: number; + constructor(@Inject(BENCHMARK_TYPE) benchmarkType: BENCHMARK_TYPE, + @Inject(LARGETABLE_ROWS) rows: LARGETABLE_ROWS, @Inject(LARGETABLE_COLS) columns) { this.benchmarkType = benchmarkType; this.rows = rows; this.columns = columns; } } - diff --git a/modules/benchmarks/src/naive_infinite_scroll/app.js b/modules/benchmarks/src/naive_infinite_scroll/app.ts similarity index 75% rename from modules/benchmarks/src/naive_infinite_scroll/app.js rename to modules/benchmarks/src/naive_infinite_scroll/app.ts index 525ed76240..04274052f3 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/app.js +++ b/modules/benchmarks/src/naive_infinite_scroll/app.ts @@ -1,16 +1,14 @@ -import {int, isPresent} from 'angular2/src/facade/lang'; +import {isPresent} from 'angular2/src/facade/lang'; import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'; import {TimerWrapper} from 'angular2/src/facade/async'; -import {ListWrapper} from 'angular2/src/facade/collection'; +import {List, ListWrapper} from 'angular2/src/facade/collection'; import {ScrollAreaComponent} from './scroll_area'; import {NgIf, NgFor} from 'angular2/directives'; import {DOM} from 'angular2/src/dom/dom_adapter'; import {document} from 'angular2/src/facade/browser'; -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {Component, Directive, View} from 'angular2/angular2'; + @Component({selector: 'scroll-app'}) @View({ @@ -27,9 +25,9 @@ import {View} from 'angular2/src/core/annotations_impl/view'; ` }) export class App { - scrollAreas:List; - iterationCount:int; - scrollIncrement:int; + scrollAreas: List; + iterationCount: int; + scrollIncrement: int; constructor() { var appSize = getIntParameter('appSize'); @@ -40,9 +38,7 @@ export class App { for (var i = 0; i < appSize; i++) { ListWrapper.push(this.scrollAreas, i); } - bindAction('#run-btn', () => { - this.runBenchmark(); - }); + bindAction('#run-btn', () => { this.runBenchmark(); }); bindAction('#reset-btn', () => { this._getScrollDiv().scrollTop = 0; var existingMarker = this._locateFinishedMarker(); @@ -54,7 +50,7 @@ export class App { runBenchmark() { var scrollDiv = this._getScrollDiv(); - var n:int = this.iterationCount; + var n: int = this.iterationCount; var scheduleScroll; scheduleScroll = () => { TimerWrapper.setTimeout(() => { @@ -66,7 +62,7 @@ export class App { this._scheduleFinishedMarker(); } }, 0); - } + }; scheduleScroll(); } @@ -85,11 +81,7 @@ export class App { }, 0); } - _locateFinishedMarker() { - return DOM.querySelector(document.body, '#done'); - } + _locateFinishedMarker() { return DOM.querySelector(document.body, '#done'); } - _getScrollDiv() { - return DOM.query('body /deep/ #testArea /deep/ #scrollDiv'); - } + _getScrollDiv() { return DOM.query('body /deep/ #testArea /deep/ #scrollDiv'); } } diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.js b/modules/benchmarks/src/naive_infinite_scroll/cells.js deleted file mode 100644 index cb73db0265..0000000000 --- a/modules/benchmarks/src/naive_infinite_scroll/cells.js +++ /dev/null @@ -1,175 +0,0 @@ -import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; -import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} - from './common'; -import {NgFor} from 'angular2/directives'; - -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - -export class HasStyle { - style:Map; - - constructor() { - this.style = MapWrapper.create(); - } - - set width(w) { - MapWrapper.set(this.style, 'width', w); - } -} - -@Component({ - selector: 'company-name', - properties: [ - 'width: cell-width', - 'company' - ] -}) -@View({ - directives: [], - template: `
{{company.name}}
` -}) -export class CompanyNameComponent extends HasStyle { - company:Company; -} - -@Component({ - selector: 'opportunity-name', - properties: [ - 'width: cell-width', - 'opportunity' - ] -}) -@View({ - directives: [], - template: `
{{opportunity.name}}
` -}) -export class OpportunityNameComponent extends HasStyle { - opportunity:Opportunity; -} - -@Component({ - selector: 'offering-name', - properties: [ - 'width: cell-width', - 'offering' - ] -}) -@View({ - directives: [], - template: `
{{offering.name}}
` -}) -export class OfferingNameComponent extends HasStyle { - offering:Offering; -} - -export class Stage { - name:string; - isDisabled:boolean; - style:Map; - apply:Function; -} - -@Component({ - selector: 'stage-buttons', - properties: [ - 'width: cell-width', - 'offering' - ] -}) -@View({ - directives: [NgFor], - template: ` -
- -
` -}) -export class StageButtonsComponent extends HasStyle { - _offering:Offering; - stages:List; - - get offering():Offering { return this._offering; } - - set offering(offering:Offering) { - this._offering = offering; - this._computeStageButtons(); - } - - setStage(stage:Stage) { - this._offering.status = stage.name; - this._computeStageButtons(); - } - - _computeStageButtons() { - var disabled = true; - this.stages = ListWrapper.clone(STATUS_LIST - .map((status) => { - var isCurrent = this._offering.status == status; - var stage = new Stage(); - stage.name = status; - stage.isDisabled = disabled; - var stageStyle = MapWrapper.create(); - MapWrapper.set(stageStyle, 'background-color', - disabled - ? '#DDD' - : isCurrent - ? '#DDF' - : '#FDD'); - stage.style = stageStyle; - if (isCurrent) { - disabled = false; - } - return stage; - })); - } -} - -@Component({ - selector: 'account-cell', - properties: [ - 'width: cell-width', - 'account' - ] -}) -@View({ - directives: [], - template: ` - ` -}) -export class AccountCellComponent extends HasStyle { - account:Account; -} - -@Component({ - selector: 'formatted-cell', - properties: [ - 'width: cell-width', - 'value' - ] -}) -@View({ - directives: [], - template: `
{{formattedValue}}
` -}) -export class FormattedCellComponent extends HasStyle { - formattedValue:string; - - set value(value) { - if (value instanceof CustomDate) { - this.formattedValue = `${value.month}/${value.day}/${value.year}`; - } else { - this.formattedValue = value.toString(); - } - } -} diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.ts b/modules/benchmarks/src/naive_infinite_scroll/cells.ts new file mode 100644 index 0000000000..709ef38b47 --- /dev/null +++ b/modules/benchmarks/src/naive_infinite_scroll/cells.ts @@ -0,0 +1,114 @@ +import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection'; +import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} from './common'; +import {NgFor} from 'angular2/directives'; + +import {Component, Directive, View} from 'angular2/angular2'; + +export class HasStyle { + style: Map; + + constructor() { this.style = MapWrapper.create(); } + + set width(w) { MapWrapper.set(this.style, 'width', w); } +} + +@Component({selector: 'company-name', properties: ['width: cell-width', 'company']}) +@View({directives: [], template: `
{{company.name}}
`}) +export class CompanyNameComponent extends HasStyle { + company: Company; +} + +@Component({selector: 'opportunity-name', properties: ['width: cell-width', 'opportunity']}) +@View({directives: [], template: `
{{opportunity.name}}
`}) +export class OpportunityNameComponent extends HasStyle { + opportunity: Opportunity; +} + +@Component({selector: 'offering-name', properties: ['width: cell-width', 'offering']}) +@View({directives: [], template: `
{{offering.name}}
`}) +export class OfferingNameComponent extends HasStyle { + offering: Offering; +} + +export class Stage { + name: string; + isDisabled: boolean; + style: Map; + apply: Function; +} + +@Component({selector: 'stage-buttons', properties: ['width: cell-width', 'offering']}) +@View({ + directives: [NgFor], + template: ` +
+ +
` +}) +export class StageButtonsComponent extends HasStyle { + _offering: Offering; + stages: List; + + get offering(): Offering { return this._offering; } + + set offering(offering: Offering) { + this._offering = offering; + this._computeStageButtons(); + } + + setStage(stage: Stage) { + this._offering.status = stage.name; + this._computeStageButtons(); + } + + _computeStageButtons() { + var disabled = true; + this.stages = ListWrapper.clone(STATUS_LIST.map((status) => { + var isCurrent = this._offering.status == status; + var stage = new Stage(); + stage.name = status; + stage.isDisabled = disabled; + var stageStyle = MapWrapper.create(); + MapWrapper.set(stageStyle, 'background-color', + disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD'); + stage.style = stageStyle; + if (isCurrent) { + disabled = false; + } + return stage; + })); + } +} + +@Component({selector: 'account-cell', properties: ['width: cell-width', 'account']}) +@View({ + directives: [], + template: ` + ` +}) +export class AccountCellComponent extends HasStyle { + account: Account; +} + +@Component({selector: 'formatted-cell', properties: ['width: cell-width', 'value']}) +@View({directives: [], template: `
{{formattedValue}}
`}) +export class FormattedCellComponent extends HasStyle { + formattedValue: string; + + set value(value) { + if (value instanceof CustomDate) { + this.formattedValue = `${value.month}/${value.day}/${value.year}`; + } else { + this.formattedValue = value.toString(); + } + } +} diff --git a/modules/benchmarks/src/naive_infinite_scroll/common.js b/modules/benchmarks/src/naive_infinite_scroll/common.js deleted file mode 100644 index 2b4fbb6bb8..0000000000 --- a/modules/benchmarks/src/naive_infinite_scroll/common.js +++ /dev/null @@ -1,203 +0,0 @@ -import {Math} from 'angular2/src/facade/math'; - -import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; - -export var ITEMS = 1000; -export var ITEM_HEIGHT = 40; -export var VISIBLE_ITEMS = 17; - -export var HEIGHT = ITEMS * ITEM_HEIGHT; -export var VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS; - -export var COMPANY_NAME_WIDTH = 100; -export var OPPORTUNITY_NAME_WIDTH = 100; -export var OFFERING_NAME_WIDTH = 100; -export var ACCOUNT_CELL_WIDTH = 50; -export var BASE_POINTS_WIDTH = 50; -export var KICKER_POINTS_WIDTH = 50; -export var STAGE_BUTTONS_WIDTH = 220; -export var BUNDLES_WIDTH = 120; -export var DUE_DATE_WIDTH = 100; -export var END_DATE_WIDTH = 100; -export var AAT_STATUS_WIDTH = 100; -export var ROW_WIDTH = COMPANY_NAME_WIDTH + - OPPORTUNITY_NAME_WIDTH + - OFFERING_NAME_WIDTH + - ACCOUNT_CELL_WIDTH + - BASE_POINTS_WIDTH + - KICKER_POINTS_WIDTH + - STAGE_BUTTONS_WIDTH + - BUNDLES_WIDTH + - DUE_DATE_WIDTH + - END_DATE_WIDTH + - AAT_STATUS_WIDTH; - -export var STATUS_LIST = [ - 'Planned', 'Pitched', 'Won', 'Lost' -]; - -export var AAT_STATUS_LIST = [ - 'Active', 'Passive', 'Abandoned' -]; - -// Imitate Streamy entities. - -// Just a non-trivial object. Nothing fancy or correct. -export class CustomDate { - year:number; - month:number; - day:number; - - constructor(y:number, m:number, d:number) { - this.year = y; - this.month = m; - this.day = d; - } - - addDays(days:number):CustomDate { - var newDay = this.day + days; - var newMonth = this.month + Math.floor(newDay / 30); - newDay = newDay % 30; - var newYear = this.year + Math.floor(newMonth / 12); - return new CustomDate(newYear, newMonth, newDay); - } - - static now():CustomDate { - return new CustomDate(2014, 1, 28); - } -} - -export class RawEntity { - - _data:Map; - - constructor() { - this._data = MapWrapper.create(); - } - - get(key:string) { - if (key.indexOf('.') == -1) { - return this._data[key]; - } - var pieces = key.split('.'); - var last = ListWrapper.last(pieces); - pieces.length = pieces.length - 1; - var target = _resolve(pieces, this); - if (target == null) { - return null; - } - return target[last]; - } - - set(key:string, value) { - if (key.indexOf('.') == -1) { - this._data[key] = value; - return; - } - var pieces = key.split('.'); - var last = ListWrapper.last(pieces); - pieces.length = pieces.length - 1; - var target = _resolve(pieces, this); - target[last] = value; - } - - remove(key:string) { - if (!key.contains('.')) { - return MapWrapper.delete(this._data, key); - } - var pieces = key.split('.'); - var last = ListWrapper.last(pieces); - pieces.length = pieces.length - 1; - var target = _resolve(pieces, this); - return target.remove(last); - } - - _resolve(pieces, start) { - var cur = start; - for (var i = 0; i < pieces.length; i++) { - cur = cur[pieces[i]]; - if (cur == null) { - return null; - } - } - return cur; - } -} - -export class Company extends RawEntity { - get name():string { return this.get('name'); } - set name(val:string) { - this.set('name', val); - } -} - -export class Offering extends RawEntity { - get name():string { return this.get('name'); } - set name(val:string) { - this.set('name', val); - } - - get company():Company { return this.get('company'); } - set company(val:Company) { - this.set('company', val); - } - - get opportunity():Opportunity { return this.get('opportunity'); } - set opportunity(val:Opportunity) { - this.set('opportunity', val); - } - - get account():Account { return this.get('account'); } - set account(val:Account) { - this.set('account', val); - } - - get basePoints():number { return this.get('basePoints'); } - set basePoints(val:number) { - this.set('basePoints', val); - } - - get kickerPoints():number { return this.get('kickerPoints'); } - set kickerPoints(val:number) { - this.set('kickerPoints', val); - } - - get status():string { return this.get('status'); } - set status(val:string) { - this.set('status', val); - } - - get bundles():string { return this.get('bundles'); } - set bundles(val:string) { - this.set('bundles', val); - } - - get dueDate():CustomDate { return this.get('dueDate'); } - set dueDate(val:CustomDate) { - this.set('dueDate', val); - } - - get endDate():CustomDate { return this.get('endDate'); } - set endDate(val:CustomDate) { - this.set('endDate', val); - } - - get aatStatus():string { return this.get('aatStatus'); } - set aatStatus(val:string) { - this.set('aatStatus', val); - } -} - -export class Opportunity extends RawEntity { - get name():string { return this.get('name'); } - set name(val:string) { - this.set('name', val); - } -} - -export class Account extends RawEntity { - get accountId():number { return this.get('accountId'); } - set accountId(val:number) { - this.set('accountId', val); - } -} diff --git a/modules/benchmarks/src/naive_infinite_scroll/common.ts b/modules/benchmarks/src/naive_infinite_scroll/common.ts new file mode 100644 index 0000000000..4ed1c36da1 --- /dev/null +++ b/modules/benchmarks/src/naive_infinite_scroll/common.ts @@ -0,0 +1,159 @@ +import {Math} from 'angular2/src/facade/math'; + +import {ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection'; + +export var ITEMS = 1000; +export var ITEM_HEIGHT = 40; +export var VISIBLE_ITEMS = 17; + +export var HEIGHT = ITEMS * ITEM_HEIGHT; +export var VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS; + +export var COMPANY_NAME_WIDTH = 100; +export var OPPORTUNITY_NAME_WIDTH = 100; +export var OFFERING_NAME_WIDTH = 100; +export var ACCOUNT_CELL_WIDTH = 50; +export var BASE_POINTS_WIDTH = 50; +export var KICKER_POINTS_WIDTH = 50; +export var STAGE_BUTTONS_WIDTH = 220; +export var BUNDLES_WIDTH = 120; +export var DUE_DATE_WIDTH = 100; +export var END_DATE_WIDTH = 100; +export var AAT_STATUS_WIDTH = 100; +export var ROW_WIDTH = COMPANY_NAME_WIDTH + OPPORTUNITY_NAME_WIDTH + OFFERING_NAME_WIDTH + + ACCOUNT_CELL_WIDTH + BASE_POINTS_WIDTH + KICKER_POINTS_WIDTH + + STAGE_BUTTONS_WIDTH + BUNDLES_WIDTH + DUE_DATE_WIDTH + END_DATE_WIDTH + + AAT_STATUS_WIDTH; + +export var STATUS_LIST = ['Planned', 'Pitched', 'Won', 'Lost']; + +export var AAT_STATUS_LIST = ['Active', 'Passive', 'Abandoned']; + +// Imitate Streamy entities. + +// Just a non-trivial object. Nothing fancy or correct. +export class CustomDate { + year: number; + month: number; + day: number; + + constructor(y: number, m: number, d: number) { + this.year = y; + this.month = m; + this.day = d; + } + + addDays(days: number): CustomDate { + var newDay = this.day + days; + var newMonth = this.month + Math.floor(newDay / 30); + newDay = newDay % 30; + var newYear = this.year + Math.floor(newMonth / 12); + return new CustomDate(newYear, newMonth, newDay); + } + + static now(): CustomDate { return new CustomDate(2014, 1, 28); } +} + +export class RawEntity { + _data: Map; + + constructor() { this._data = MapWrapper.create(); } + + get(key: string) { + if (key.indexOf('.') == -1) { + return this._data[key]; + } + var pieces = key.split('.'); + var last = ListWrapper.last(pieces); + pieces.length = pieces.length - 1; + var target = _resolve(pieces, this); + if (target == null) { + return null; + } + return target[last]; + } + + set(key: string, value) { + if (key.indexOf('.') == -1) { + this._data[key] = value; + return; + } + var pieces = key.split('.'); + var last = ListWrapper.last(pieces); + pieces.length = pieces.length - 1; + var target = _resolve(pieces, this); + target[last] = value; + } + + remove(key: string) { + if (!key.contains('.')) { + return MapWrapper.delete(this._data, key); + } + var pieces = key.split('.'); + var last = ListWrapper.last(pieces); + pieces.length = pieces.length - 1; + var target = _resolve(pieces, this); + return target.remove(last); + } + + _resolve(pieces, start) { + var cur = start; + for (var i = 0; i < pieces.length; i++) { + cur = cur[pieces[i]]; + if (cur == null) { + return null; + } + } + return cur; + } +} + +export class Company extends RawEntity { + get name(): string { return this.get('name'); } + set name(val: string) { this.set('name', val); } +} + +export class Offering extends RawEntity { + get name(): string { return this.get('name'); } + set name(val: string) { this.set('name', val); } + + get company(): Company { return this.get('company'); } + set company(val: Company) { this.set('company', val); } + + get opportunity(): Opportunity { return this.get('opportunity'); } + set opportunity(val: Opportunity) { this.set('opportunity', val); } + + get account(): Account { return this.get('account'); } + set account(val: Account) { this.set('account', val); } + + get basePoints(): number { return this.get('basePoints'); } + set basePoints(val: number) { this.set('basePoints', val); } + + get kickerPoints(): number { return this.get('kickerPoints'); } + set kickerPoints(val: number) { this.set('kickerPoints', val); } + + get status(): string { return this.get('status'); } + set status(val: string) { this.set('status', val); } + + get bundles(): string { return this.get('bundles'); } + set bundles(val: string) { this.set('bundles', val); } + + get dueDate(): CustomDate { return this.get('dueDate'); } + set dueDate(val: CustomDate) { this.set('dueDate', val); } + + get endDate(): CustomDate { return this.get('endDate'); } + set endDate(val: CustomDate) { this.set('endDate', val); } + + get aatStatus(): string { return this.get('aatStatus'); } + set aatStatus(val: string) { this.set('aatStatus', val); } +} + +export class Opportunity extends RawEntity { + get name(): string { return this.get('name'); } + set name(val: string) { this.set('name', val); } +} + +export class Account extends RawEntity { + get accountId(): number { return this.get('accountId'); } + set accountId(val: number) { this.set('accountId', val); } +} diff --git a/modules/benchmarks/src/naive_infinite_scroll/index.js b/modules/benchmarks/src/naive_infinite_scroll/index.ts similarity index 67% rename from modules/benchmarks/src/naive_infinite_scroll/index.js rename to modules/benchmarks/src/naive_infinite_scroll/index.ts index 8dee1b8d12..ca2d8c7b90 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/index.js +++ b/modules/benchmarks/src/naive_infinite_scroll/index.ts @@ -1,6 +1,6 @@ import {MapWrapper} from 'angular2/src/facade/collection'; -import {bootstrap} from 'angular2/angular2'; +import {bootstrap} from 'angular2/angular2'; import {reflector} from 'angular2/src/reflection/reflection'; import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities'; @@ -14,7 +14,7 @@ export function main() { bootstrap(App, createBindings()); } -function createBindings():List { +function createBindings(): List { return [bind(APP_VIEW_POOL_CAPACITY).toValue(100000)]; } @@ -23,19 +23,19 @@ export function setupReflector() { // TODO(kegluneq): Generate this. reflector.registerSetters({ - 'style': (o, m) => { - // HACK - MapWrapper.forEach(m, function(v, k) { - o.style.setProperty(k, v); - }); - } + 'style': (o, m) => + { + // HACK + MapWrapper.forEach(m, function(v, k) { o.style.setProperty(k, v); }); + } }); reflector.registerMethods({ - 'onScroll': (o, args) => { - // HACK - o.onScroll(args[0]); - }, + 'onScroll': (o, args) => + { + // HACK + o.onScroll(args[0]); + }, 'setStage': (o, args) => o.setStage(args[0]) }); } diff --git a/modules/benchmarks/src/naive_infinite_scroll/random_data.js b/modules/benchmarks/src/naive_infinite_scroll/random_data.ts similarity index 63% rename from modules/benchmarks/src/naive_infinite_scroll/random_data.js rename to modules/benchmarks/src/naive_infinite_scroll/random_data.ts index e5e119ef83..32e4b8e7e5 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/random_data.js +++ b/modules/benchmarks/src/naive_infinite_scroll/random_data.ts @@ -1,17 +1,24 @@ -import {int, StringWrapper} from 'angular2/src/facade/lang'; +import {StringWrapper} from 'angular2/src/facade/lang'; import {List, ListWrapper} from 'angular2/src/facade/collection'; -import {CustomDate, Offering, Company, Opportunity, Account, STATUS_LIST, - AAT_STATUS_LIST} from './common'; +import { + CustomDate, + Offering, + Company, + Opportunity, + Account, + STATUS_LIST, + AAT_STATUS_LIST +} from './common'; -export function generateOfferings(count:int):List { +export function generateOfferings(count: int): List { var res = []; - for(var i = 0; i < count; i++) { + for (var i = 0; i < count; i++) { ListWrapper.push(res, generateOffering(i)); } return res; } -export function generateOffering(seed:int):Offering { +export function generateOffering(seed: int): Offering { var res = new Offering(); res.name = generateName(seed++); res.company = generateCompany(seed++); @@ -27,36 +34,47 @@ export function generateOffering(seed:int):Offering { return res; } -export function generateCompany(seed:int):Company { +export function generateCompany(seed: int): Company { var res = new Company(); res.name = generateName(seed); return res; } -export function generateOpportunity(seed:int):Opportunity { +export function generateOpportunity(seed: int): Opportunity { var res = new Opportunity(); res.name = generateName(seed); return res; } -export function generateAccount(seed:int):Account { +export function generateAccount(seed: int): Account { var res = new Account(); res.accountId = seed; return res; } var names = [ - 'Foo', 'Bar', 'Baz', 'Qux', 'Quux', 'Garply', 'Waldo', 'Fred', 'Plugh', - 'Xyzzy', 'Thud', 'Cruft', 'Stuff' + 'Foo', + 'Bar', + 'Baz', + 'Qux', + 'Quux', + 'Garply', + 'Waldo', + 'Fred', + 'Plugh', + 'Xyzzy', + 'Thud', + 'Cruft', + 'Stuff' ]; -function generateName(seed:int):string { +function generateName(seed: int): string { return names[seed % names.length]; } var offsets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; -function randomDate(seed:int, minDate:CustomDate = null):CustomDate { +function randomDate(seed: int, minDate: CustomDate = null): CustomDate { if (minDate == null) { minDate = CustomDate.now(); } @@ -67,7 +85,7 @@ function randomDate(seed:int, minDate:CustomDate = null):CustomDate { var stringLengths = [5, 7, 9, 11, 13]; var charCodeOffsets = [0, 1, 2, 3, 4, 5, 6, 7, 8]; -function randomString(seed:int):string { +function randomString(seed: int): string { var len = stringLengths[seed % 5]; var str = ''; for (var i = 0; i < len; i++) { diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts similarity index 82% rename from modules/benchmarks/src/naive_infinite_scroll/scroll_area.js rename to modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts index a7b848f635..92ba8a5205 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js +++ b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts @@ -1,13 +1,17 @@ import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; import {Math} from 'angular2/src/facade/math'; -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {Component, Directive, View} from 'angular2/angular2'; -import {Offering, ITEMS, ITEM_HEIGHT, VISIBLE_ITEMS, VIEW_PORT_HEIGHT, - ROW_WIDTH, HEIGHT} from './common'; +import { + Offering, + ITEMS, + ITEM_HEIGHT, + VISIBLE_ITEMS, + VIEW_PORT_HEIGHT, + ROW_WIDTH, + HEIGHT +} from './common'; import {generateOfferings} from './random_data'; import {ScrollItemComponent} from './scroll_item'; import {NgFor} from 'angular2/directives'; @@ -33,8 +37,8 @@ import {NgFor} from 'angular2/directives'; ` }) export class ScrollAreaComponent { - _fullList:List; - visibleItems:List; + _fullList: List; + visibleItems: List; scrollDivStyle; paddingDiv; diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.js b/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts similarity index 50% rename from modules/benchmarks/src/naive_infinite_scroll/scroll_item.js rename to modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts index cd3bcfa873..2615bc03e6 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.js +++ b/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts @@ -1,24 +1,32 @@ import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; -import {CompanyNameComponent, OpportunityNameComponent, - OfferingNameComponent, StageButtonsComponent, AccountCellComponent, - FormattedCellComponent} from './cells'; +import { + CompanyNameComponent, + OpportunityNameComponent, + OfferingNameComponent, + StageButtonsComponent, + AccountCellComponent, + FormattedCellComponent +} from './cells'; -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {Component, Directive, View} from 'angular2/angular2'; -import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH, - OFFERING_NAME_WIDTH, ACCOUNT_CELL_WIDTH, BASE_POINTS_WIDTH, - KICKER_POINTS_WIDTH, STAGE_BUTTONS_WIDTH, BUNDLES_WIDTH, DUE_DATE_WIDTH, - END_DATE_WIDTH, AAT_STATUS_WIDTH} from './common'; +import { + Offering, + ITEM_HEIGHT, + COMPANY_NAME_WIDTH, + OPPORTUNITY_NAME_WIDTH, + OFFERING_NAME_WIDTH, + ACCOUNT_CELL_WIDTH, + BASE_POINTS_WIDTH, + KICKER_POINTS_WIDTH, + STAGE_BUTTONS_WIDTH, + BUNDLES_WIDTH, + DUE_DATE_WIDTH, + END_DATE_WIDTH, + AAT_STATUS_WIDTH +} from './common'; -@Component({ - selector: 'scroll-item', - properties: [ - 'offering' - ] -}) +@Component({selector: 'scroll-item', properties: ['offering']}) @View({ directives: [ CompanyNameComponent, @@ -66,29 +74,28 @@ import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH, ` }) export class ScrollItemComponent { + offering: Offering; + itemStyle; - offering:Offering; - itemStyle; + constructor() { + this.itemStyle = MapWrapper.createFromPairs([ + ['height', `${ITEM_HEIGHT}px`], + ['line-height', `${ITEM_HEIGHT}px`], + ['font-size', '18px'], + ['display', 'flex'], + ['justify-content', 'space-between'] + ]); + } - constructor() { - this.itemStyle = MapWrapper.createFromPairs([ - ['height', `${ITEM_HEIGHT}px`], - ['line-height', `${ITEM_HEIGHT}px`], - ['font-size', '18px'], - ['display', 'flex'], - ['justify-content', 'space-between'] - ]); - } - - get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; } - get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; } - get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; } - get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; } - get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; } - get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; } - get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; } - get bundlesWidth() { return `${BUNDLES_WIDTH}px`; } - get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; } - get endDateWidth() { return `${END_DATE_WIDTH}px`; } - get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; } + get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; } + get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; } + get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; } + get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; } + get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; } + get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; } + get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; } + get bundlesWidth() { return `${BUNDLES_WIDTH}px`; } + get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; } + get endDateWidth() { return `${END_DATE_WIDTH}px`; } + get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; } } diff --git a/modules/benchmarks/src/tree/tree_benchmark.js b/modules/benchmarks/src/tree/tree_benchmark.ts similarity index 66% rename from modules/benchmarks/src/tree/tree_benchmark.js rename to modules/benchmarks/src/tree/tree_benchmark.ts index c4f7c2048a..97f079323e 100644 --- a/modules/benchmarks/src/tree/tree_benchmark.js +++ b/modules/benchmarks/src/tree/tree_benchmark.ts @@ -1,9 +1,4 @@ -import {bootstrap, ViewContainerRef, Compiler} from 'angular2/angular2'; - -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {bootstrap, Compiler, Component, Directive, View, ViewContainerRef} from 'angular2/angular2'; import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle'; import {reflector} from 'angular2/src/reflection/reflection'; @@ -12,17 +7,19 @@ import {DOM} from 'angular2/src/dom/dom_adapter'; import {isPresent} from 'angular2/src/facade/lang'; import {List} from 'angular2/src/facade/collection'; import {window, document, gc} from 'angular2/src/facade/browser'; -import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'; +import { + getIntParameter, + getStringParameter, + bindAction +} from 'angular2/src/test_lib/benchmark_util'; import {NgIf} from 'angular2/directives'; import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool'; import {bind} from 'angular2/di'; -function createBindings():List { +function createBindings(): List { var viewCacheCapacity = getStringParameter('viewcache') == 'true' ? 10000 : 1; - return [ - bind(APP_VIEW_POOL_CAPACITY).toValue(viewCacheCapacity) - ]; + return [bind(APP_VIEW_POOL_CAPACITY).toValue(viewCacheCapacity)]; } function setupReflector() { @@ -39,9 +36,8 @@ export function main() { setupReflector(); BASELINE_TREE_TEMPLATE = DOM.createTemplate( - '_'); - BASELINE_IF_TEMPLATE = DOM.createTemplate( - ''); + '_'); + BASELINE_IF_TEMPLATE = DOM.createTemplate(''); var app; var lifeCycle; @@ -60,7 +56,7 @@ export function main() { window.console.profile(name + ' w GC'); var duration = 0; var count = 0; - while(count++ < 150) { + while (count++ < 150) { gc(); var start = window.performance.now(); create(); @@ -73,7 +69,7 @@ export function main() { window.console.profile(name + ' w/o GC'); duration = 0; count = 0; - while(count++ < 150) { + while (count++ < 150) { var start = window.performance.now(); create(); duration += window.performance.now() - start; @@ -85,9 +81,8 @@ export function main() { } function ng2CreateDom() { - var values = count++ % 2 == 0 ? - ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] : - ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-']; + var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] : + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-']; app.initData = buildTree(maxDepth, values, 0); lifeCycle.tick(); @@ -96,26 +91,24 @@ export function main() { function noop() {} function initNg2() { - bootstrap(AppComponent, createBindings()).then((ref) => { - var injector = ref.injector; - lifeCycle = injector.get(LifeCycle); + bootstrap(AppComponent, createBindings()) + .then((ref) => { + var injector = ref.injector; + lifeCycle = injector.get(LifeCycle); - app = injector.get(AppComponent); - bindAction('#ng2DestroyDom', ng2DestroyDom); - bindAction('#ng2CreateDom', ng2CreateDom); - bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update')); - bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create')); - }); + app = injector.get(AppComponent); + bindAction('#ng2DestroyDom', ng2DestroyDom); + bindAction('#ng2CreateDom', ng2CreateDom); + bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update')); + bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create')); + }); } - function baselineDestroyDom() { - baselineRootTreeComponent.update(new TreeNode('', null, null)); - } + function baselineDestroyDom() { baselineRootTreeComponent.update(new TreeNode('', null, null)); } function baselineCreateDom() { - var values = count++ % 2 == 0 ? - ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] : - ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-']; + var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] : + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-']; baselineRootTreeComponent.update(buildTree(maxDepth, values, 0)); } @@ -129,7 +122,8 @@ export function main() { bindAction('#baselineCreateDom', baselineCreateDom); bindAction('#baselineUpdateDomProfile', profile(baselineCreateDom, noop, 'baseline-update')); - bindAction('#baselineCreateDomProfile', profile(baselineCreateDom, baselineDestroyDom, 'baseline-create')); + bindAction('#baselineCreateDomProfile', + profile(baselineCreateDom, baselineDestroyDom, 'baseline-create')); } initNg2(); @@ -137,9 +131,9 @@ export function main() { } class TreeNode { - value:string; - left:TreeNode; - right:TreeNode; + value: string; + left: TreeNode; + right: TreeNode; constructor(value, left, right) { this.value = value; this.left = left; @@ -149,19 +143,17 @@ class TreeNode { function buildTree(maxDepth, values, curDepth) { if (maxDepth === curDepth) return new TreeNode('', null, null); - return new TreeNode( - values[curDepth], - buildTree(maxDepth, values, curDepth+1), - buildTree(maxDepth, values, curDepth+1)); + return new TreeNode(values[curDepth], buildTree(maxDepth, values, curDepth + 1), + buildTree(maxDepth, values, curDepth + 1)); } // http://jsperf.com/nextsibling-vs-childnodes class BaseLineTreeComponent { element; - value:BaseLineInterpolation; - left:BaseLineIf; - right:BaseLineIf; + value: BaseLineInterpolation; + left: BaseLineIf; + right: BaseLineIf; constructor(element) { this.element = element; var clone = DOM.clone(BASELINE_TREE_TEMPLATE.content.firstChild); @@ -175,7 +167,7 @@ class BaseLineTreeComponent { child = DOM.nextSibling(child); this.right = new BaseLineIf(child); } - update(value:TreeNode) { + update(value: TreeNode) { this.value.update(value.value); this.left.update(value.left); this.right.update(value.right); @@ -183,13 +175,13 @@ class BaseLineTreeComponent { } class BaseLineInterpolation { - value:string; + value: string; textNode; constructor(textNode) { this.value = null; this.textNode = textNode; } - update(value:string) { + update(value: string) { if (this.value !== value) { this.value = value; DOM.setText(this.textNode, value + ' '); @@ -198,15 +190,15 @@ class BaseLineInterpolation { } class BaseLineIf { - condition:boolean; - component:BaseLineTreeComponent; + condition: boolean; + component: BaseLineTreeComponent; anchor; constructor(anchor) { this.anchor = anchor; this.condition = false; this.component = null; } - update(value:TreeNode) { + update(value: TreeNode) { var newCondition = isPresent(value); if (this.condition !== newCondition) { this.condition = newCondition; @@ -227,12 +219,9 @@ class BaseLineIf { } @Component({selector: 'app'}) -@View({ - directives: [TreeComponent], - template: `` -}) +@View({directives: [TreeComponent], template: ``}) class AppComponent { - initData:TreeNode; + initData: TreeNode; constructor() { // TODO: We need an initial value as otherwise the getter for data.value will fail // --> this should be already caught in change detection! @@ -240,15 +229,12 @@ class AppComponent { } } -@Component({ - selector: 'tree', - properties: ['data'] -}) +@Component({selector: 'tree', properties: ['data']}) @View({ directives: [TreeComponent, NgIf], - template: ` {{data.value}} ` + template: + ` {{data.value}} ` }) class TreeComponent { - data:TreeNode; + data: TreeNode; } -