From 0602f68ae3318822dcab8b9f520cb65a8efb64a6 Mon Sep 17 00:00:00 2001 From: Ian Riley Date: Sat, 30 May 2015 08:17:27 -0700 Subject: [PATCH] refactor (angular2/test_lib): ts'ifying last of test_lib Translates last .es6 files in angular2/src/test_lib to TypeScript. --- .../{perf_utils.dart => perf_util.dart} | 2 +- modules/angular2/src/test_lib/perf_util.es6 | 72 ---------- modules/angular2/src/test_lib/perf_util.ts | 70 +++++++++ .../angular2/src/test_lib/shims_for_IE.dart | 1 + .../angular2/src/test_lib/shims_for_IE.es6 | 13 -- modules/angular2/src/test_lib/shims_for_IE.ts | 13 ++ .../e2e_test/change_detection_perf.ts | 133 ++++++++---------- modules/benchmarks/e2e_test/compiler_perf.ts | 46 +++--- modules/benchmarks/e2e_test/costs_perf.ts | 46 +++--- modules/benchmarks/e2e_test/di_perf.ts | 97 ++++++------- .../e2e_test/element_injector_perf.ts | 37 +++-- .../benchmarks/e2e_test/largetable_perf.ts | 49 +++---- .../e2e_test/naive_infinite_scroll_perf.ts | 43 +++--- .../e2e_test/naive_infinite_scroll_spec.ts | 22 ++- modules/benchmarks/e2e_test/selector_perf.ts | 46 +++--- modules/benchmarks/e2e_test/tree_perf.ts | 75 +++++----- .../src/compiler/compiler_benchmark.ts | 7 +- modules/benchmarks/src/costs/index.ts | 37 ++--- .../src/largetable/largetable_benchmark.ts | 61 ++++---- modules/benchmarks/src/tree/tree_benchmark.ts | 36 ++--- 20 files changed, 424 insertions(+), 482 deletions(-) rename modules/angular2/src/test_lib/{perf_utils.dart => perf_util.dart} (68%) delete mode 100644 modules/angular2/src/test_lib/perf_util.es6 create mode 100644 modules/angular2/src/test_lib/perf_util.ts create mode 100644 modules/angular2/src/test_lib/shims_for_IE.dart delete mode 100644 modules/angular2/src/test_lib/shims_for_IE.es6 create mode 100644 modules/angular2/src/test_lib/shims_for_IE.ts diff --git a/modules/angular2/src/test_lib/perf_utils.dart b/modules/angular2/src/test_lib/perf_util.dart similarity index 68% rename from modules/angular2/src/test_lib/perf_utils.dart rename to modules/angular2/src/test_lib/perf_util.dart index 48627b21ab..80f7b422f0 100644 --- a/modules/angular2/src/test_lib/perf_utils.dart +++ b/modules/angular2/src/test_lib/perf_util.dart @@ -1,3 +1,3 @@ -library angular2.perf_util; +library angular2.test_lib.perf_util; // empty as this file is node.js specific and should not be transpiled to dart diff --git a/modules/angular2/src/test_lib/perf_util.es6 b/modules/angular2/src/test_lib/perf_util.es6 deleted file mode 100644 index ea683f5c8a..0000000000 --- a/modules/angular2/src/test_lib/perf_util.es6 +++ /dev/null @@ -1,72 +0,0 @@ -var testUtil = require('./e2e_util'); - -var benchpress = require('benchpress/benchpress'); - -module.exports = { - runClickBenchmark: runClickBenchmark, - runBenchmark: runBenchmark, - verifyNoBrowserErrors: testUtil.verifyNoBrowserErrors -}; - -function runClickBenchmark(config) { - var buttons = config.buttons.map(function(selector) { - return $(selector); - }); - config.work = function() { - buttons.forEach(function(button) { - button.click(); - }); - } - return runBenchmark(config); -} - -function runBenchmark(config) { - return getScaleFactor(browser.params.benchmark.scaling).then(function(scaleFactor) { - var description = {}; - var urlParams = []; - if (config.params) { - config.params.forEach(function(param) { - var name = param.name; - var value = applyScaleFactor(param.value, scaleFactor, param.scale); - urlParams.push(name + '=' + value); - description[name] = value; - }); - } - var url = encodeURI(config.url + '?' + urlParams.join('&')); - return browser.get(url).then(function() { - return benchpressRunner.sample({ - id: config.id, - execute: config.work, - prepare: config.prepare, - microMetrics: config.microMetrics, - bindings: [ - benchpress.bind(benchpress.Options.SAMPLE_DESCRIPTION).toValue(description) - ] - }); - }); - }); -} - -function getScaleFactor(possibleScalings) { - return browser.executeScript('return navigator.userAgent').then(function(userAgent:string) { - var scaleFactor = 1; - possibleScalings.forEach(function(entry) { - if (userAgent.match(entry.userAgent)) { - scaleFactor = entry.value; - } - }); - return scaleFactor; - }); -} - -function applyScaleFactor(value, scaleFactor, method) { - if (method === 'log2') { - return value + Math.log(scaleFactor) / Math.LN2; - } else if (method === 'sqrt') { - return value * Math.sqrt(scaleFactor); - } else if (method === 'linear') { - return value * scaleFactor; - } else { - return value; - } -} \ No newline at end of file diff --git a/modules/angular2/src/test_lib/perf_util.ts b/modules/angular2/src/test_lib/perf_util.ts new file mode 100644 index 0000000000..296d0f5137 --- /dev/null +++ b/modules/angular2/src/test_lib/perf_util.ts @@ -0,0 +1,70 @@ +/// +/// + +var testUtil = require('./e2e_util'); + +var benchpress = require('benchpress/benchpress'); + +module.exports = { + runClickBenchmark: runClickBenchmark, + runBenchmark: runBenchmark, + verifyNoBrowserErrors: testUtil.verifyNoBrowserErrors +}; + +function runClickBenchmark(config) { + var buttons = config.buttons.map(function(selector) { return $(selector); }); + config.work = function() { buttons.forEach(function(button) { button.click(); }); }; + return runBenchmark(config); +} + +function runBenchmark(config) { + return getScaleFactor(browser.params.benchmark.scaling) + .then(function(scaleFactor) { + var description = {}; + var urlParams = []; + if (config.params) { + config.params.forEach(function(param) { + var name = param.name; + var value = applyScaleFactor(param.value, scaleFactor, param.scale); + urlParams.push(name + '=' + value); + description[name] = value; + }); + } + var url = encodeURI(config.url + '?' + urlParams.join('&')); + return browser.get(url).then(function() { + return new benchpress.Runner().sample({ + id: config.id, + execute: config.work, + prepare: config.prepare, + microMetrics: config.microMetrics, + bindings: + [benchpress.bind(benchpress.Options.SAMPLE_DESCRIPTION).toValue(description)] + }); + }); + }); +} + +function getScaleFactor(possibleScalings) { + return browser.executeScript('return navigator.userAgent') + .then(function(userAgent: string) { + var scaleFactor = 1; + possibleScalings.forEach(function(entry) { + if (userAgent.match(entry.userAgent)) { + scaleFactor = entry.value; + } + }); + return scaleFactor; + }); +} + +function applyScaleFactor(value, scaleFactor, method) { + if (method === 'log2') { + return value + Math.log(scaleFactor) / Math.LN2; + } else if (method === 'sqrt') { + return value * Math.sqrt(scaleFactor); + } else if (method === 'linear') { + return value * scaleFactor; + } else { + return value; + } +} diff --git a/modules/angular2/src/test_lib/shims_for_IE.dart b/modules/angular2/src/test_lib/shims_for_IE.dart new file mode 100644 index 0000000000..a70b4cf718 --- /dev/null +++ b/modules/angular2/src/test_lib/shims_for_IE.dart @@ -0,0 +1 @@ +library angular2.test_lib.shims_for_ie; diff --git a/modules/angular2/src/test_lib/shims_for_IE.es6 b/modules/angular2/src/test_lib/shims_for_IE.es6 deleted file mode 100644 index 94117011ff..0000000000 --- a/modules/angular2/src/test_lib/shims_for_IE.es6 +++ /dev/null @@ -1,13 +0,0 @@ -//function.name -/*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/ -if (!(function f() {}).name) { - Object.defineProperty(Function.prototype, 'name', { - get: function() { - var name = this.toString().match(/^\s*function\s*(\S*)\s*\(/)[1]; - // For better performance only parse once, and then cache the - // result through a new accessor for repeated access. - Object.defineProperty(this, 'name', { value: name }); - return name; - } - }); -} diff --git a/modules/angular2/src/test_lib/shims_for_IE.ts b/modules/angular2/src/test_lib/shims_for_IE.ts new file mode 100644 index 0000000000..adb0720eca --- /dev/null +++ b/modules/angular2/src/test_lib/shims_for_IE.ts @@ -0,0 +1,13 @@ +// function.name +/*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/ +if (!Object.hasOwnProperty('name')) { + Object.defineProperty(Function.prototype, 'name', { + get: function() { + var name = this.toString().match(/^\s*function\s*(\S*)\s*\(/)[1]; + // For better performance only parse once, and then cache the + // result through a new accessor for repeated access. + Object.defineProperty(this, 'name', {value: name}); + return name; + } + }); +} diff --git a/modules/benchmarks/e2e_test/change_detection_perf.ts b/modules/benchmarks/e2e_test/change_detection_perf.ts index 7c8b920e08..e9e01de873 100644 --- a/modules/benchmarks/e2e_test/change_detection_perf.ts +++ b/modules/benchmarks/e2e_test/change_detection_perf.ts @@ -1,96 +1,87 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from '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); + afterEach(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); + 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); + 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); + 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); + 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); + 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); + 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.ts b/modules/benchmarks/e2e_test/compiler_perf.ts index 69a2054b90..61e642f720 100644 --- a/modules/benchmarks/e2e_test/compiler_perf.ts +++ b/modules/benchmarks/e2e_test/compiler_perf.ts @@ -1,39 +1,33 @@ -/// -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util'; describe('ng2 compiler benchmark', function() { var URL = 'benchmarks/src/compiler/compiler_benchmark.html'; - afterEach(perfUtil.verifyNoBrowserErrors); + afterEach(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); + 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); + 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.ts b/modules/benchmarks/e2e_test/costs_perf.ts index ce6bc29dff..649b6be9e4 100644 --- a/modules/benchmarks/e2e_test/costs_perf.ts +++ b/modules/benchmarks/e2e_test/costs_perf.ts @@ -1,7 +1,4 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util'; describe('ng2 cost benchmark', function() { @@ -10,35 +7,32 @@ describe('ng2 cost benchmark', function() { // Number of components to create in a single iteration var benchmarkSize = 200; - afterEach(perfUtil.verifyNoBrowserErrors); + afterEach(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); + 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); + 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); + 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.ts b/modules/benchmarks/e2e_test/di_perf.ts index 69f583cb69..1db7084026 100644 --- a/modules/benchmarks/e2e_test/di_perf.ts +++ b/modules/benchmarks/e2e_test/di_perf.ts @@ -1,56 +1,49 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util'; describe('ng2 di benchmark', function() { var URL = 'benchmarks/src/di/di_benchmark.html'; - afterEach(perfUtil.verifyNoBrowserErrors); + afterEach(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); + 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); + 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); + 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); + 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); }); /** @@ -58,28 +51,26 @@ describe('ng2 di benchmark', function() { * 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); + 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); + 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.ts b/modules/benchmarks/e2e_test/element_injector_perf.ts index a7d6324c33..a82fb28349 100644 --- a/modules/benchmarks/e2e_test/element_injector_perf.ts +++ b/modules/benchmarks/e2e_test/element_injector_perf.ts @@ -1,34 +1,29 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from '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); + afterEach(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); + 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); + 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.ts b/modules/benchmarks/e2e_test/largetable_perf.ts index e1dd51f995..6f5b54f2ba 100644 --- a/modules/benchmarks/e2e_test/largetable_perf.ts +++ b/modules/benchmarks/e2e_test/largetable_perf.ts @@ -1,13 +1,10 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util'; describe('ng2 largetable benchmark', function() { var URL = 'benchmarks/src/largetable/largetable_benchmark.html'; - afterEach(perfUtil.verifyNoBrowserErrors); + afterEach(verifyNoBrowserErrors); // Not yet implemented: // 'ngBind', @@ -19,33 +16,31 @@ describe('ng2 largetable benchmark', function() { ['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); + 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); + 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.ts b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts index f8d2c2e94c..b5184ac38b 100644 --- a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts +++ b/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts @@ -1,35 +1,30 @@ -/// -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runBenchmark, verifyNoBrowserErrors} from '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); + afterEach(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); + 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.ts b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts index d1a76ef855..2f91e611a0 100644 --- a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts +++ b/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts @@ -1,14 +1,10 @@ -/// -/// -import {afterEach, describe, expect, it} from 'angular2/test_lib'; - -var testUtil = require('angular2/src/test_lib/e2e_util'); +import {verifyNoBrowserErrors} from '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); + afterEach(verifyNoBrowserErrors); it('should not throw errors', function() { browser.get(URL); @@ -20,7 +16,8 @@ describe('ng2 naive infinite scroll benchmark', function() { var count = function(selector) { - return browser.executeScript(`return document.querySelectorAll("${ selector }").length;`); + return browser.executeScript(`return ` + + `document.querySelectorAll("${ selector }").length;`); } var clickFirstOf = @@ -30,24 +27,25 @@ describe('ng2 naive infinite scroll benchmark', function() { var firstTextOf = function(selector) { - return browser.executeScript(`return document.querySelector("${ selector }").innerText;`); + return browser.executeScript(`return ` + + `document.querySelector("${ selector }").innerText;`); } // Make sure rows are rendered count(allScrollItems) - .then(function(c) { expect(c).toBe(expectedRowCount); }); + .then(function(c) { expect(c).toEqual(expectedRowCount); }); // Make sure cells are rendered - count(cells).then(function(c) { expect(c).toBe(expectedRowCount * expectedCellsPerRow); }); + count(cells).then(function(c) { expect(c).toEqual(expectedRowCount * expectedCellsPerRow); }); // Click on first enabled button and verify stage changes firstTextOf(`${ stageButtons }:enabled`) .then(function(text) { - expect(text).toBe('Pitched'); + expect(text).toEqual('Pitched'); clickFirstOf(`${ stageButtons }:enabled`) .then(function() { firstTextOf(`${ stageButtons }:enabled`) - .then(function(text) { expect(text).toBe('Won'); }) + .then(function(text) { expect(text).toEqual('Won'); }) }); }) diff --git a/modules/benchmarks/e2e_test/selector_perf.ts b/modules/benchmarks/e2e_test/selector_perf.ts index 8b9cfb88eb..2ba41763ac 100644 --- a/modules/benchmarks/e2e_test/selector_perf.ts +++ b/modules/benchmarks/e2e_test/selector_perf.ts @@ -1,42 +1,36 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util'; describe('ng2 selector benchmark', function() { var URL = 'benchmarks/src/compiler/selector_benchmark.html'; - afterEach(perfUtil.verifyNoBrowserErrors); + afterEach(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); + 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); + 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); + 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.ts b/modules/benchmarks/e2e_test/tree_perf.ts index 48230a82df..52f1c379b3 100644 --- a/modules/benchmarks/e2e_test/tree_perf.ts +++ b/modules/benchmarks/e2e_test/tree_perf.ts @@ -1,65 +1,54 @@ -/// -import {afterEach, describe, it} from 'angular2/test_lib'; - -var perfUtil = require('angular2/src/test_lib/perf_util'); +import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util'; describe('ng2 tree benchmark', function() { var URL = 'benchmarks/src/tree/tree_benchmark.html'; - afterEach(perfUtil.verifyNoBrowserErrors); + afterEach(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); + 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); + 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); + 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); + 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); + 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/compiler/compiler_benchmark.ts b/modules/benchmarks/src/compiler/compiler_benchmark.ts index 506e2a5c76..d27f3ec64e 100644 --- a/modules/benchmarks/src/compiler/compiler_benchmark.ts +++ b/modules/benchmarks/src/compiler/compiler_benchmark.ts @@ -11,6 +11,7 @@ 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 * as viewModule 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'; @@ -113,10 +114,10 @@ class MultipleTemplateResolver extends TemplateResolver { MapWrapper.set(this._cache, component, ListWrapper.join(multiplier, '')); } - resolve(component: Type): View { + resolve(component: Type): viewModule.View { var view = super.resolve(component); - var myView = - new View({template: MapWrapper.get(this._cache, component), directives: view.directives}); + var myView = new viewModule.View( + {template:MapWrapper.get(this._cache, component), directives: view.directives}); return myView; } } diff --git a/modules/benchmarks/src/costs/index.ts b/modules/benchmarks/src/costs/index.ts index 3a1f9fd243..74ec569f2f 100644 --- a/modules/benchmarks/src/costs/index.ts +++ b/modules/benchmarks/src/costs/index.ts @@ -51,6 +51,23 @@ export function main() { }); } + +@Component({selector: 'dummy'}) +@View({template: `
`}) +class DummyComponent { +} + +@Directive({selector: '[dummy-decorator]'}) +class DummyDirective { +} + +@Component({selector: 'dynamic-dummy'}) +class DynamicDummy { + constructor(loader: DynamicComponentLoader, location: ElementRef) { + loader.loadIntoExistingLocation(DummyComponent, location); + } +} + @Component({selector: 'app'}) @View({ directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy], @@ -60,7 +77,7 @@ export function main() {
- +
@@ -69,7 +86,7 @@ export function main() { ` }) class AppComponent { - list: List; + list: List; testingPlainComponents: boolean; testingWithDirectives: boolean; testingDynamicComponents: boolean; @@ -98,19 +115,3 @@ class AppComponent { this.testingDynamicComponents = true; } } - -@Component({selector: 'dummy'}) -@View({template: `
`}) -class DummyComponent { -} - -@Directive({selector: '[dummy-decorator]'}) -class DummyDirective { -} - -@Component({selector: 'dynamic-dummy'}) -class DynamicDummy { - constructor(loader: DynamicComponentLoader, location: ElementRef) { - loader.loadIntoExistingLocation(DummyComponent, location); - } -} diff --git a/modules/benchmarks/src/largetable/largetable_benchmark.ts b/modules/benchmarks/src/largetable/largetable_benchmark.ts index ee3d96ec8f..6e08671004 100644 --- a/modules/benchmarks/src/largetable/largetable_benchmark.ts +++ b/modules/benchmarks/src/largetable/largetable_benchmark.ts @@ -9,7 +9,9 @@ import {window, document, gc} from 'angular2/src/facade/browser'; import { getIntParameter, getStringParameter, - bindAction + bindAction, + windowProfile, + windowProfileEnd } from 'angular2/src/test_lib/benchmark_util'; import {NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives'; @@ -18,7 +20,7 @@ import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; import {ListWrapper} from 'angular2/src/facade/collection'; import {bind} from 'angular2/di'; -import {Inject} from 'angular2/src/di/annotations_impl'; +import {Inject} from 'angular2/src/di/decorators'; export const BENCHMARK_TYPE = 'LargetableComponent.benchmarkType'; export const LARGETABLE_ROWS = 'LargetableComponent.rows'; @@ -73,7 +75,7 @@ export function main() { function profile(create, destroy, name) { return function() { - window.console.profile(name + ' w GC'); + windowProfile(name + ' w GC'); var duration = 0; var count = 0; while (count++ < 150) { @@ -83,10 +85,10 @@ export function main() { duration += window.performance.now() - start; destroy(); } - window.console.profileEnd(name + ' w GC'); + windowProfileEnd(name + ' w GC'); window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`); - window.console.profile(name + ' w/o GC'); + windowProfile(name + ' w/o GC'); duration = 0; count = 0; while (count++ < 150) { @@ -95,7 +97,7 @@ export function main() { duration += window.performance.now() - start; destroy(); } - window.console.profileEnd(name + ' w/o GC'); + windowProfileEnd(name + ' w/o GC'); window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`); }; } @@ -187,7 +189,8 @@ class BaseLineLargetableComponent { 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'); @@ -212,43 +215,33 @@ class CellData { iFn() { return this.i; } } -@Component({selector: 'app'}) -@View({ - directives: [LargetableComponent], - template: `` -}) -class AppComponent { - data; - benchmarkType: string; -} - @Component({selector: 'largetable', properties: ['data', 'benchmarkType']}) @View({ directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault], template: ` - - - + + - - - + + - - - + + - +
+
{{column.i}}:{{column.j}}|
+
i,j attrs
+
{{column.iFn()}}:{{column.jFn()}}|
{{benchmarkType}} not yet implemented @@ -262,10 +255,20 @@ class LargetableComponent { benchmarkType: string; rows: number; columns: number; - constructor(@Inject(BENCHMARK_TYPE) benchmarkType: BENCHMARK_TYPE, - @Inject(LARGETABLE_ROWS) rows: LARGETABLE_ROWS, @Inject(LARGETABLE_COLS) columns) { + constructor(@Inject(BENCHMARK_TYPE) benchmarkType, @Inject(LARGETABLE_ROWS) rows, + @Inject(LARGETABLE_COLS) columns) { this.benchmarkType = benchmarkType; this.rows = rows; this.columns = columns; } } + +@Component({selector: 'app'}) +@View({ + directives: [LargetableComponent], + template: `` +}) +class AppComponent { + data; + benchmarkType: string; +} diff --git a/modules/benchmarks/src/tree/tree_benchmark.ts b/modules/benchmarks/src/tree/tree_benchmark.ts index 97f079323e..a0252e6782 100644 --- a/modules/benchmarks/src/tree/tree_benchmark.ts +++ b/modules/benchmarks/src/tree/tree_benchmark.ts @@ -10,14 +10,16 @@ import {window, document, gc} from 'angular2/src/facade/browser'; import { getIntParameter, getStringParameter, - bindAction + bindAction, + windowProfile, + windowProfileEnd } 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'; +import {bind, Binding} from 'angular2/di'; -function createBindings(): List { +function createBindings(): List { var viewCacheCapacity = getStringParameter('viewcache') == 'true' ? 10000 : 1; return [bind(APP_VIEW_POOL_CAPACITY).toValue(viewCacheCapacity)]; } @@ -53,7 +55,7 @@ export function main() { function profile(create, destroy, name) { return function() { - window.console.profile(name + ' w GC'); + windowProfile(name + ' w GC'); var duration = 0; var count = 0; while (count++ < 150) { @@ -63,10 +65,10 @@ export function main() { duration += window.performance.now() - start; destroy(); } - window.console.profileEnd(name + ' w GC'); + windowProfileEnd(name + ' w GC'); window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`); - window.console.profile(name + ' w/o GC'); + windowProfile(name + ' w/o GC'); duration = 0; count = 0; while (count++ < 150) { @@ -75,7 +77,7 @@ export function main() { duration += window.performance.now() - start; destroy(); } - window.console.profileEnd(name + ' w/o GC'); + windowProfileEnd(name + ' w/o GC'); window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`); }; } @@ -218,6 +220,16 @@ class BaseLineIf { } } +@Component({selector: 'tree', properties: ['data']}) +@View({ + directives: [TreeComponent, NgIf], + template: + ` {{data.value}} ` +}) +class TreeComponent { + data: TreeNode; +} + @Component({selector: 'app'}) @View({directives: [TreeComponent], template: ``}) class AppComponent { @@ -228,13 +240,3 @@ class AppComponent { this.initData = new TreeNode('', null, null); } } - -@Component({selector: 'tree', properties: ['data']}) -@View({ - directives: [TreeComponent, NgIf], - template: - ` {{data.value}} ` -}) -class TreeComponent { - data: TreeNode; -}