fix(ivy): update largetable benchmark to use ngFor

angular · Oct 19, 2018 · ccd7162 · ccd7162
1 parent 665627e
commit ccd7162
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 75 deletions.
diff --git 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/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(
         [
@@ -16,8 +16,8 @@ ts_library(
         "//modules/benchmarks/src:util_lib",
         "//modules/benchmarks/src/largetable:util_lib",
         "//packages:types",
+        "//packages/common",
         "//packages/core",
-        "@rxjs",
     ],
 )
 

diff --git 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
@@ -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 {Input, ɵdetectChanges, Component, NgModule} from '@angular/core';
 
 import {TableCell, buildTable, emptyTable} from '../util';
+import {CommonModule} from '@angular/common';
 
-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);

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