diff --git a/modules/benchmarks/e2e_test/largetable_perf.ts b/modules/benchmarks/e2e_test/largetable_perf.ts index 2cfabb9634..95448da26a 100644 --- a/modules/benchmarks/e2e_test/largetable_perf.ts +++ b/modules/benchmarks/e2e_test/largetable_perf.ts @@ -56,15 +56,6 @@ describe('largetable benchmark perf', () => { }).then(done, done.fail); }); - it('should run for render3', done => { - runTableBenchmark({ - id: `largeTable.render3.${worker.id}`, - url: 'all/benchmarks/src/largetable/render3/index.html', - ignoreBrowserSynchronization: true, - worker: worker - }).then(done, done.fail); - }); - it('should run for iv', done => { runTableBenchmark({ id: `largeTable.iv.${worker.id}`, diff --git a/modules/benchmarks/e2e_test/largetable_spec.ts b/modules/benchmarks/e2e_test/largetable_spec.ts index 5ac6d94380..52f0395b74 100644 --- a/modules/benchmarks/e2e_test/largetable_spec.ts +++ b/modules/benchmarks/e2e_test/largetable_spec.ts @@ -25,13 +25,6 @@ describe('largetable benchmark spec', () => { }); }); - it('should work for render3', () => { - testTableBenchmark({ - url: 'all/benchmarks/src/largetable/render3/index.html', - ignoreBrowserSynchronization: true, - }); - }); - it('should work for iv', () => { testTableBenchmark({ url: 'all/benchmarks/src/largetable/iv/index.html', diff --git a/modules/benchmarks/src/largetable/largetable_perf.spec.ts b/modules/benchmarks/src/largetable/largetable_perf.spec.ts index 29408c1ffd..71552f688b 100644 --- a/modules/benchmarks/src/largetable/largetable_perf.spec.ts +++ b/modules/benchmarks/src/largetable/largetable_perf.spec.ts @@ -8,6 +8,7 @@ import {$} from 'protractor'; +import {openBrowser} from '../../../e2e_util/e2e_util'; import {runBenchmark, verifyNoBrowserErrors} from '../../../e2e_util/perf_util'; interface Worker { @@ -39,9 +40,23 @@ describe('largetable benchmark perf', () => { afterEach(verifyNoBrowserErrors); + it('should render the table for render3', () => { + openBrowser({ + url: '', + ignoreBrowserSynchronization: true, + params: [{name: 'cols', value: 5}, {name: 'rows', value: 5}], + }); + $('#createDom').click(); + expect($('#root').getText()).toContain('0/0'); + $('#createDom').click(); + expect($('#root').getText()).toContain('A/A'); + $('#destroyDom').click(); + expect($('#root').getText() as any).toEqual(''); + }); + [CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => { describe(worker.id, () => { - it('should run for render3', done => { + it('should run benchmark for render3', done => { runTableBenchmark({ id: `largeTable.render3.${worker.id}`, url: 'index.html', diff --git a/modules/benchmarks/src/largetable/render3/BUILD.bazel b/modules/benchmarks/src/largetable/render3/BUILD.bazel index a130cdba02..776f12259b 100644 --- a/modules/benchmarks/src/largetable/render3/BUILD.bazel +++ b/modules/benchmarks/src/largetable/render3/BUILD.bazel @@ -1,10 +1,10 @@ package(default_visibility = ["//visibility:public"]) -load("//tools:defaults.bzl", "ng_rollup_bundle", "ts_library") +load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle") load("//packages/bazel:index.bzl", "protractor_web_test") load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver") -ts_library( +ng_module( name = "largetable_lib", srcs = glob( [ @@ -12,18 +12,20 @@ ts_library( ], exclude = ["protractor.on-prepare.ts"], ), + tags = ["ivy-only"], deps = [ "//modules/benchmarks/src:util_lib", "//modules/benchmarks/src/largetable:util_lib", "//packages:types", + "//packages/common", "//packages/core", - "@rxjs", ], ) ng_rollup_bundle( name = "bundle", entry_point = "modules/benchmarks/src/largetable/render3/index.js", + tags = ["ivy-only"], deps = [ ":largetable_lib", ], @@ -44,6 +46,7 @@ ts_devserver( "index.html", ":favicon", ], + tags = ["ivy-only"], ) protractor_web_test( @@ -59,7 +62,7 @@ protractor_web_test( ], on_prepare = ":protractor.on-prepare.js", server = ":devserver", - tags = ["manual"], + tags = ["ivy-only"], deps = [ "//modules/benchmarks/src/largetable:perf_lib", ], diff --git a/modules/benchmarks/src/largetable/render3/index.html b/modules/benchmarks/src/largetable/render3/index.html index 85dcfbb742..87de79a691 100644 --- a/modules/benchmarks/src/largetable/render3/index.html +++ b/modules/benchmarks/src/largetable/render3/index.html @@ -28,15 +28,9 @@ - \ No newline at end of file + diff --git a/modules/benchmarks/src/largetable/render3/index.ts b/modules/benchmarks/src/largetable/render3/index.ts index c8d774dbfe..bcecbc0fdf 100644 --- a/modules/benchmarks/src/largetable/render3/index.ts +++ b/modules/benchmarks/src/largetable/render3/index.ts @@ -5,7 +5,7 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ - +import 'reflect-metadata'; import {ɵrenderComponent as renderComponent} from '@angular/core'; import {bindAction, profile} from '../../util'; diff --git a/modules/benchmarks/src/largetable/render3/table.ts b/modules/benchmarks/src/largetable/render3/table.ts index a9420c96d8..bc420183a6 100644 --- a/modules/benchmarks/src/largetable/render3/table.ts +++ b/modules/benchmarks/src/largetable/render3/table.ts @@ -6,76 +6,39 @@ * found in the LICENSE file at https://angular.io/license */ -import {ɵRenderFlags, ɵbind, ɵcontainer, ɵcontainerRefreshEnd, ɵcontainerRefreshStart, ɵdefineComponent, ɵdetectChanges, ɵelementEnd, ɵelementStart, ɵelementStyleProp, ɵelementStyling, ɵembeddedViewEnd, ɵembeddedViewStart, ɵtext, ɵtextBinding as ɵtextBinding} from '@angular/core'; -import {ComponentDef} from '@angular/core/src/render3/interfaces/definition'; +import {CommonModule} from '@angular/common'; +import {Component, Input, NgModule, ɵdetectChanges} from '@angular/core'; import {TableCell, buildTable, emptyTable} from '../util'; -const c0 = ['background-color']; +@Component({ + selector: 'largetable', + template: ` + + + + + + +
+ {{cell.value}} +
+ `, +}) export class LargeTableComponent { + @Input() data: TableCell[][] = emptyTable; - /** @nocollapse */ - static ngComponentDef: ComponentDef = ɵdefineComponent({ - type: LargeTableComponent, - selectors: [['largetable']], - consts: 3, - vars: 0, - template: function(rf: ɵRenderFlags, ctx: LargeTableComponent) { - if (rf & ɵRenderFlags.Create) { - ɵelementStart(0, 'table'); - { - ɵelementStart(1, 'tbody'); - { ɵcontainer(2); } - ɵelementEnd(); - } - ɵelementEnd(); - } - if (rf & ɵRenderFlags.Update) { - ɵcontainerRefreshStart(2); - { - for (let row of ctx.data) { - let rf1 = ɵembeddedViewStart(1, 2, 0); - { - if (rf1 & ɵRenderFlags.Create) { - ɵelementStart(0, 'tr'); - ɵcontainer(1); - ɵelementEnd(); - } - if (rf1 & ɵRenderFlags.Update) { - ɵcontainerRefreshStart(1); - { - for (let cell of row) { - let rf2 = ɵembeddedViewStart(2, 2, 1); - { - if (rf2 & ɵRenderFlags.Create) { - ɵelementStart(0, 'td'); - ɵelementStyling(null, c0); - { ɵtext(1); } - ɵelementEnd(); - } - if (rf2 & ɵRenderFlags.Update) { - ɵelementStyleProp(0, 0, null, cell.row % 2 ? '' : 'grey'); - ɵtextBinding(1, ɵbind(cell.value)); - } - } - ɵembeddedViewEnd(); - } - } - ɵcontainerRefreshEnd(); - } - } - ɵembeddedViewEnd(); - } - } - ɵcontainerRefreshEnd(); - } - }, - factory: () => new LargeTableComponent(), - inputs: {data: 'data'} - }); + trackByIndex(index: number, item: any) { return index; } + + getColor(row: number) { return row % 2 ? '' : 'grey'; } } +@NgModule({declarations: [LargeTableComponent], imports: [CommonModule]}) +class TableModule { +} + + export function destroyDom(component: LargeTableComponent) { component.data = emptyTable; ɵdetectChanges(component); diff --git a/modules/e2e_util/perf_util.ts b/modules/e2e_util/perf_util.ts index c128c924ba..2b6b85ee6a 100644 --- a/modules/e2e_util/perf_util.ts +++ b/modules/e2e_util/perf_util.ts @@ -40,6 +40,7 @@ export function runBenchmark(config: { if (config.setup) { config.setup(); } + if (!cmdArgs) readCommandLine(); const description: {[key: string]: any} = {'bundles': cmdArgs.bundles}; config.params.forEach((param) => { description[param.name] = param.value; }); return runner.sample({