fix(ivy): update largetable benchmark to use ngFor (angular#26604)

PR Close angular#26604

Author: kara

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}`,

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',

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',

modules/benchmarks/src/largetable/render3/BUILD.bazel

@@ -1,29 +1,31 @@
 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(
         [
             "**/*.ts",
         ],
         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",
     ],

modules/benchmarks/src/largetable/render3/index.html

@@ -28,15 +28,9 @@ <h2>Render3 Largetable Benchmark</h2>
   <script>
     // TODO(mlaval): remove once we have a proper solution
     ngDevMode = false;
-    var isBazel = location.pathname.indexOf('/all/') !== 0;
-    // isBazel needed while 'scripts/ci/test-e2e.sh test.e2e.protractor-e2e' is run
-    // on Travis
-    // TODO: port remaining protractor e2e tests to bazel protractor_web_test_suite rule
     var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
-    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
-      || '../../bootstrap_ng2.js';
-    document.write('<script src="' + (isBazel ? bazelBundle : mainUrl) + '">\u003c/script>');
+    document.write('<script src="' + bazelBundle + '">\u003c/script>');
   </script>
 </body>
 
-</html>
+</html>

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';

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: `
+    <table>
+      <tbody>
+        <tr *ngFor="let row of data; trackBy: trackByIndex">
+          <td *ngFor="let cell of row; trackBy: trackByIndex" [style.background-color]="getColor(cell.row)">
+            {{cell.value}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+})
 export class LargeTableComponent {
+  @Input()
   data: TableCell[][] = emptyTable;
 
-  /** @nocollapse */
-  static ngComponentDef: ComponentDef<LargeTableComponent> = ɵ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);

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({