test(ivy): add expanding_rows performance benchmark which runs in Vie…

…wEngine and Ivy (angular#30449)

PR Close angular#30449

modules/benchmarks/src/expanding_rows/BUILD.bazel

@@ -0,0 +1,74 @@
+package(default_visibility = ["//modules/benchmarks:__subpackages__"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle")
+load("@npm_bazel_typescript//:index.bzl", "ts_devserver")
+load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
+
+ng_module(
+    name = "application_lib",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_spec.ts"],
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/core",
+        "//packages/platform-browser",
+        "@npm//rxjs",
+    ],
+)
+
+ng_module(
+    name = "application_spec",
+    srcs = glob(["**/*_spec.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/core",
+        "@npm//reflect-metadata",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    entry_point = "modules/benchmarks/src/expanding_rows/index.js",
+    deps = [
+        ":application_lib",
+        "@npm//rxjs",
+    ],
+)
+
+ts_devserver(
+    name = "prodserver",
+    static_files = [
+        ":bundle.min_debug.js",
+        ":bundle.min.js",
+        "@npm//node_modules/zone.js:dist/zone.js",
+        "index.html",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    entry_module = "angular/modules/benchmarks/src/expanding_rows/index",
+    index_html = "index.html",
+    scripts = [
+        "@npm//node_modules/tslib:tslib.js",
+        "//tools/rxjs:rxjs_umd_modules",
+    ],
+    serving_path = "/index.js",
+    static_files = [
+        "@npm//node_modules/zone.js:dist/zone.js",
+        "index.html",
+    ],
+    deps = [":application_lib"],
+)
+
+benchmark_test(
+    name = "perf",
+    server = ":prodserver",
+    deps = [
+        ":application_spec",
+    ],
+)

modules/benchmarks/src/expanding_rows/benchmark.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {CommonModule} from '@angular/common';
+import {AfterViewInit, Component, NgModule, ViewChild, ViewEncapsulation} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {BenchmarkModule} from './benchmark_module';
+import {BenchmarkableExpandingRow} from './benchmarkable_expanding_row';
+import {BenchmarkableExpandingRowModule} from './benchmarkable_expanding_row_module';
+
+@Component({
+  selector: 'benchmark-root',
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <h2>cfc-expanding-row initialization benchmark</h2>
+
+    <section>
+      <button id="reset" (click)="reset()">Reset</button>
+      <button (click)="handleInitClick()">Init</button>
+      <button id="run" (click)="runAll()">Run All</button>
+    </section>
+
+    <benchmark-area>
+      <benchmarkable-expanding-row></benchmarkable-expanding-row>
+    </benchmark-area>`,
+})
+export class InitializationRoot implements AfterViewInit {
+  @ViewChild(BenchmarkableExpandingRow, {static: true})
+  expandingRow !: BenchmarkableExpandingRow;
+
+  ngAfterViewInit() {}
+
+  reset() { this.expandingRow.reset(); }
+
+  async runAll() {
+    await execTimed('initialization_benchmark', async() => { await this.doInit(); });
+  }
+
+  async handleInitClick() { await this.doInit(); }
+
+  private async doInit() {
+    await execTimed('initial_load', async() => { this.expandingRow.init(); });
+  }
+}
+
+@NgModule({
+  declarations: [InitializationRoot],
+  exports: [InitializationRoot],
+  imports: [
+    CommonModule,
+    BenchmarkableExpandingRowModule,
+    BenchmarkModule,
+    BrowserModule,
+  ],
+  bootstrap: [InitializationRoot],
+})
+// Component benchmarks must export a BenchmarkModule.
+export class ExpandingRowBenchmarkModule {
+}
+
+export async function execTimed(description: string, func: () => Promise<void>) {
+  console.time(description);
+  await func();
+  await nextTick(200);
+  console.timeEnd(description);
+}
+
+export async function nextTick(delay = 1) {
+  return new Promise((res, rej) => { setTimeout(() => { res(); }, delay); });
+}

modules/benchmarks/src/expanding_rows/benchmark_module.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {ErrorHandler} from '@angular/core';
+import {Component, Injectable, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'benchmark-area',
+  template: '<ng-content></ng-content>',
+  styles: [`
+    :host {
+      padding: 1;
+      margin: 1;
+      background-color: white;
+      width: 1000px;
+      display: block;
+    }`],
+  host: {
+    'class': 'cfc-ng2-region',
+  }
+})
+export class BenchmarkArea {
+}
+
+declare interface ExtendedWindow extends Window {
+  benchmarkErrors?: string[];
+}
+const extendedWindow = window as ExtendedWindow;
+
+@Injectable({providedIn: 'root'})
+export class BenchmarkErrorHandler implements ErrorHandler {
+  handleError(error: Error) {
+    if (!extendedWindow.benchmarkErrors) {
+      extendedWindow.benchmarkErrors = [];
+    }
+    extendedWindow.benchmarkErrors.push(error.message);
+    console.error(error);
+  }
+}
+
+@NgModule({
+  declarations: [BenchmarkArea],
+  exports: [BenchmarkArea],
+  providers: [
+    {provide: ErrorHandler, useClass: BenchmarkErrorHandler},
+  ]
+})
+export class BenchmarkModule {
+}

modules/benchmarks/src/expanding_rows/benchmark_spec.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {$} from 'protractor';
+import {openTreeBenchmark, runTreeBenchmark} from './tree_perf_test_utils';
+
+describe('benchmarks', () => {
+
+  it('should work for createOnly', done => {
+    runTreeBenchmark({
+      // This cannot be called "createOnly" because the actual destroy benchmark
+      // has the "createOnly" id already. See: https://github.com/angular/angular/pull/21503
+      id: 'createOnlyForReal',
+      prepare: () => $('#destroyDom').click(),
+      work: () => $('#createDom').click()
+    }).then(done, done.fail);
+  });
+
+});

modules/benchmarks/src/expanding_rows/benchmarkable_expanding_row.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {Component} from '@angular/core';
+
+export interface MlbTeam {
+  name: string;
+  id: number;
+  division: string;
+  stadium: string;
+  projection: string;
+}
+
+@Component({
+  selector: 'benchmarkable-expanding-row',
+  template: `
+    <cfc-expanding-row-host *ngIf="showExpandingRow">
+    <cfc-expanding-row *ngFor="let team of teams" [rowId]="$any(team.id)">
+      <cfc-expanding-row-summary>
+        Team {{team.id}}
+      </cfc-expanding-row-summary>
+      <cfc-expanding-row-details-caption>
+        {{team.name}}
+        <a href="https://www.google.com" class="cfc-demo-expanding-row-caption-link">
+          {{team.id}}
+        </a>
+      </cfc-expanding-row-details-caption>
+      <cfc-expanding-row-details-content>
+        <ul ace-list>
+          <li>Division: {{team.division}}</li>
+          <li>
+            <a href="https://www.google.com">{{team.stadium}}</a>
+          </li>
+          <li>Projected Record: {{team.projection}}</li>
+        </ul>
+      </cfc-expanding-row-details-content>
+    </cfc-expanding-row>
+  </cfc-expanding-row-host>`,
+})
+export class BenchmarkableExpandingRow {
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  showExpandingRow!: boolean;
+
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  teams!: MlbTeam[];
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  private fakeTeams!: MlbTeam[];
+
+  init(): void {
+    this.teams = this.fakeTeams;
+    this.showExpandingRow = true;
+  }
+
+  reset(numItems = 5000): void {
+    this.showExpandingRow = false;
+
+    this.fakeTeams = [];
+    for (let i = 0; i < numItems; i++) {
+      this.fakeTeams.push({
+        name: `name ${i}`,
+        id: i,
+        division: `division ${i}`,
+        stadium: `stadium ${i}`,
+        projection: `projection ${i}`,
+      });
+    }
+  }
+}

modules/benchmarks/src/expanding_rows/benchmarkable_expanding_row_module.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ExpandingRowModule} from './expanding_row_module';
+
+import {BenchmarkableExpandingRow} from './benchmarkable_expanding_row';
+
+@NgModule({
+  declarations: [BenchmarkableExpandingRow],
+  exports: [BenchmarkableExpandingRow],
+  imports: [
+    CommonModule,
+    ExpandingRowModule,
+  ],
+})
+export class BenchmarkableExpandingRowModule {
+}
+