fix(ivy): update tree benchmark to use ngIf (#26608)

PR Close #26608

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

@@ -1,18 +1,63 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ng_module")
+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")
 
 ng_module(
-    name = "render3_lib",
+    name = "tree_lib",
     srcs = glob(
         [
             "**/*.ts",
         ],
     ),
+    tags = ["ivy-only"],
     deps = [
         "//modules/benchmarks/src/tree:util_lib",
         "//packages:types",
+        "//packages/common",
         "//packages/core",
-        "@rxjs",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    entry_point = "modules/benchmarks/src/tree/render3/index.js",
+    tags = ["ivy-only"],
+    deps = [
+        ":tree_lib",
+    ],
+)
+
+genrule(
+    name = "favicon",
+    srcs = ["//modules/benchmarks:favicon"],
+    outs = ["favicon.ico"],
+    cmd = "cp $< $@",
+)
+
+ts_devserver(
+    name = "devserver",
+    static_files = [
+        ":bundle.min_debug.js",
+        ":bundle.min.js",
+        "index.html",
+        ":favicon",
+    ],
+    tags = ["ivy-only"],
+)
+
+protractor_web_test(
+    name = "perf",
+    configuration = "//:protractor-perf.conf.js",
+    data = [
+        "//packages/bazel/src/protractor/utils",
+        "//packages/benchpress",
+    ],
+    on_prepare = ":protractor.on_prepare.js",
+    server = ":devserver",
+    tags = ["ivy-only"],
+    deps = [
+        "//modules/benchmarks/src/tree:perf_lib",
     ],
 )

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

@@ -30,9 +30,8 @@
   <script>
     // TODO(mlaval): remove once we have a proper solution
     ngDevMode = false;
-    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
-      || '../../bootstrap_ng2.js';
-    document.write('<script src="' + mainUrl + '">\u003c/script>');
+    var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
+    document.write('<script src="' + bazelBundle + '">\u003c/script>');
   </script>
 </body>
 </html>

modules/benchmarks/src/tree/render3/index.ts

@@ -6,6 +6,7 @@
  * 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';
 import {TreeComponent, createDom, destroyDom, detectChanges} from './tree';
@@ -27,3 +28,5 @@ export function main() {
         profile(() => createDom(component), () => destroyDom(component), 'create'));
   }
 }
+
+main();

modules/benchmarks/src/tree/render3/protractor.on_prepare.js

@@ -0,0 +1,22 @@
+/**
+ * @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
+ */
+
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = async function(config) {
+  const serverSpec = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
+
+  const serverUrl = `http://localhost:${serverSpec.port}`;
+  // Since the browser restarts in this benchmark we need to set both the browser.baseUrl
+  // for the first test and the protractor config.baseUrl for the subsequent tests
+  protractor.browser.baseUrl = serverUrl;
+
+  const processedConfig = await protractor.browser.getProcessedConfig();
+  return processedConfig.baseUrl = serverUrl;
+};

modules/benchmarks/src/tree/render3/tree.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵRenderFlags, ɵbind, ɵcontainer, ɵcontainerRefreshEnd, ɵcontainerRefreshStart, ɵdefineComponent, ɵdetectChanges, ɵelementEnd, ɵelementProperty, ɵelementStart, ɵelementStyleProp, ɵelementStyling as s, ɵembeddedViewEnd, ɵembeddedViewStart, ɵinterpolation1, ɵtext, ɵtextBinding as ɵtextBinding} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Component, NgModule, ɵdetectChanges} from '@angular/core';
 
 import {TreeNode, buildTree, emptyTree} from '../util';
 
@@ -30,122 +31,17 @@ export function detectChanges(component: TreeComponent) {
   numberOfChecksEl.textContent = `${detectChangesRuns}`;
 }
 
-const c0 = ['background-color'];
+@Component({
+  selector: 'tree',
+  inputs: ['data'],
+  template:
+      `<span [style.backgroundColor]="bgColor"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
+})
 export class TreeComponent {
-  data: TreeNode = emptyTree;
-
-  /** @nocollapse */
-  static ngComponentDef = ɵdefineComponent({
-    type: TreeComponent,
-    selectors: [['tree']],
-    consts: 4,
-    vars: 1,
-    template: function(rf: ɵRenderFlags, ctx: TreeComponent) {
-      if (rf & ɵRenderFlags.Create) {
-        ɵelementStart(0, 'span');
-        s(null, c0);
-        { ɵtext(1); }
-        ɵelementEnd();
-        ɵcontainer(2);
-        ɵcontainer(3);
-      }
-      if (rf & ɵRenderFlags.Update) {
-        ɵelementStyleProp(0, 0, ctx.data.depth % 2 ? '' : 'grey');
-        ɵtextBinding(1, ɵinterpolation1(' ', ctx.data.value, ' '));
-        ɵcontainerRefreshStart(2);
-        {
-          if (ctx.data.left != null) {
-            let rf0 = ɵembeddedViewStart(0, 1, 1);
-            {
-              if (rf0 & ɵRenderFlags.Create) {
-                ɵelementStart(0, 'tree');
-                ɵelementEnd();
-              }
-              if (rf0 & ɵRenderFlags.Update) {
-                ɵelementProperty(0, 'data', ɵbind(ctx.data.left));
-              }
-            }
-            ɵembeddedViewEnd();
-          }
-        }
-        ɵcontainerRefreshEnd();
-        ɵcontainerRefreshStart(3);
-        {
-          if (ctx.data.right != null) {
-            let rf0 = ɵembeddedViewStart(0, 1, 1);
-            {
-              if (rf0 & ɵRenderFlags.Create) {
-                ɵelementStart(0, 'tree');
-                ɵelementEnd();
-              }
-              if (rf0 & ɵRenderFlags.Update) {
-                ɵelementProperty(0, 'data', ɵbind(ctx.data.right));
-              }
-            }
-            ɵembeddedViewEnd();
-          }
-        }
-        ɵcontainerRefreshEnd();
-      }
-    },
-    factory: () => new TreeComponent,
-    inputs: {data: 'data'},
-    directives: () => [TreeComponent]
-  });
+  data: any = emptyTree;
+  get bgColor() { return this.data.depth % 2 ? '' : 'grey'; }
 }
 
-export class TreeFunction {
-  data: TreeNode = emptyTree;
-
-  /** @nocollapse */
-  static ngComponentDef = ɵdefineComponent({
-    type: TreeFunction,
-    selectors: [['tree']],
-    consts: 5,
-    vars: 1,
-    template: function(rf: ɵRenderFlags, ctx: TreeFunction) {
-      // bit of a hack
-      TreeTpl(rf, ctx.data);
-    },
-    factory: () => new TreeFunction,
-    inputs: {data: 'data'}
-  });
-}
-
-const c1 = ['background-color'];
-export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
-  if (rf & ɵRenderFlags.Create) {
-    ɵelementStart(0, 'tree');
-    {
-      ɵelementStart(1, 'span');
-      s(null, c1);
-      { ɵtext(2); }
-      ɵelementEnd();
-      ɵcontainer(3);
-      ɵcontainer(4);
-    }
-    ɵelementEnd();
-  }
-  if (rf & ɵRenderFlags.Update) {
-    ɵelementStyleProp(1, 0, ctx.depth % 2 ? '' : 'grey');
-    ɵtextBinding(2, ɵinterpolation1(' ', ctx.value, ' '));
-    ɵcontainerRefreshStart(3);
-    {
-      if (ctx.left != null) {
-        let rf0 = ɵembeddedViewStart(0, 5, 1);
-        { TreeTpl(rf0, ctx.left); }
-        ɵembeddedViewEnd();
-      }
-    }
-    ɵcontainerRefreshEnd();
-    ɵcontainerRefreshStart(4);
-    {
-      if (ctx.right != null) {
-        let rf0 = ɵembeddedViewStart(0, 5, 1);
-        { TreeTpl(rf0, ctx.right); }
-        ɵembeddedViewEnd();
-      }
-    }
-    ɵcontainerRefreshEnd();
-  }
+@NgModule({declarations: [TreeComponent], imports: [CommonModule]})
+export class TreeModule {
 }