build: add ng_benchmark macro to run perf benchmarks (#33389)

this makes running and profiling tests much easier. Example usage:

```
yarn bazel run --define=compile=aot //packages/core/test/render3/perf:noop_change_detection
```

See README.md update for more info.

PS: I considered moving the ng_rollup bundle into the macro but I didn't want to make
  too many changes in this PR. If we find running benchmarks in this way useful, we
  should refactor the build file more, and move the ng_rollup_bundle targets into the
  macro.

PR Close #33389

packages/core/test/render3/perf/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility = ["//visibility:private"])
 
-load("//tools:defaults.bzl", "jasmine_node_test", "ng_rollup_bundle", "ts_library")
+load("//tools:defaults.bzl", "jasmine_node_test", "ng_benchmark", "ng_rollup_bundle", "ts_library")
 
 ts_library(
     name = "perf_lib",
@@ -22,89 +22,144 @@ jasmine_node_test(
 )
 
 ng_rollup_bundle(
-    name = "class_binding",
+    name = "class_binding_lib",
     entry_point = ":class_binding/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "class_binding",
+    bundle = ":class_binding_lib",
+)
+
 ng_rollup_bundle(
-    name = "directive_instantiate",
+    name = "directive_instantiate_lib",
     entry_point = ":directive_instantiate/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "directive_instantiate",
+    bundle = ":directive_instantiate_lib",
+)
+
 ng_rollup_bundle(
-    name = "element_text_create",
+    name = "element_text_create_lib",
     entry_point = ":element_text_create/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "element_text_create",
+    bundle = ":element_text_create_lib",
+)
+
 ng_rollup_bundle(
-    name = "interpolation",
+    name = "interpolation_lib",
     entry_point = ":interpolation/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "interpolation",
+    bundle = ":interpolation_lib",
+)
+
 ng_rollup_bundle(
-    name = "listeners",
+    name = "listeners_lib",
     entry_point = ":listeners/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "listeners",
+    bundle = ":listeners_lib",
+)
+
 ng_rollup_bundle(
-    name = "noop_change_detection",
+    name = "noop_change_detection_lib",
     entry_point = ":noop_change_detection/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "noop_change_detection",
+    bundle = ":noop_change_detection_lib",
+)
+
 ng_rollup_bundle(
-    name = "property_binding",
+    name = "property_binding_lib",
     entry_point = ":property_binding/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "property_binding",
+    bundle = ":property_binding_lib",
+)
+
 ng_rollup_bundle(
-    name = "property_binding_update",
+    name = "property_binding_update_lib",
     entry_point = ":property_binding_update/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "property_binding_update",
+    bundle = ":property_binding_update_lib",
+)
+
 ng_rollup_bundle(
-    name = "style_binding",
+    name = "style_binding_lib",
     entry_point = ":style_binding/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "style_binding",
+    bundle = ":style_binding_lib",
+)
+
 ng_rollup_bundle(
-    name = "style_and_class_bindings",
+    name = "style_and_class_bindings_lib",
     entry_point = ":style_and_class_bindings/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
 
+ng_benchmark(
+    name = "style_and_class_bindings",
+    bundle = ":style_and_class_bindings_lib",
+)
+
 ng_rollup_bundle(
-    name = "map_based_style_and_class_bindings",
+    name = "map_based_style_and_class_bindings_lib",
     entry_point = ":map_based_style_and_class_bindings/index.ts",
     deps = [
         ":perf_lib",
     ],
 )
+
+ng_benchmark(
+    name = "map_based_style_and_class_bindings",
+    bundle = ":map_based_style_and_class_bindings_lib",
+)

packages/core/test/render3/perf/README.md

@@ -71,8 +71,10 @@ The resulting output should look something like this:
 
 ### Notes
 
-In all the above commands `${BENCHMARK}` should be replaced with the actual benchmark (folder) name, ex.:
-- build: `yarn bazel build //packages/core/test/render3/perf:noop_change_detection.min_debug.es2015.js --define=compile=aot`
-- run: `time node dist/bin/packages/core/test/render3/perf/noop_change_detection.min_debug.es2015.js`
-- profile: `node --no-turbo-inlining --inspect-brk dist/bin/packages/core/test/render3/perf/noop_change_detection.min_debug.es2015.js profile`
-- experimenting `BENCHMARK=noop_change_detection; yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.es2015.js --define=compile=aot && node dist/bin/packages/core/test/render3/perf/${BENCHMARK}.min_debug.es2015.js`
+To run the benchmark use `bazel run <benchmark_target>`, example:
+- `yarn bazel run --define=compile=aot //packages/core/test/render3/perf:noop_change_detection`
+
+To profile, append `_profile` to the target name and attach a debugger via chrome://inspect, example:
+- `yarn bazel run --define=compile=aot //packages/core/test/render3/perf:noop_change_detection_profile`
+
+To interactively edit/rerun benchmarks use `ibazel` instead of `bazel`.

tools/defaults.bzl

@@ -6,6 +6,7 @@ load("@npm_bazel_karma//:index.bzl", _karma_web_test = "karma_web_test", _karma_
 load("@npm_bazel_typescript//:index.bzl", _ts_library = "ts_library")
 load("//packages/bazel:index.bzl", _ng_module = "ng_module", _ng_package = "ng_package")
 load("//packages/bazel/src:ng_rollup_bundle.bzl", _ng_rollup_bundle = "ng_rollup_bundle")
+load("//tools:ng_benchmark.bzl", _ng_benchmark = "ng_benchmark")
 
 _DEFAULT_TSCONFIG_TEST = "//packages:tsconfig-test"
 _INTERNAL_NG_MODULE_API_EXTRACTOR = "//packages/bazel/src/api-extractor:api_extractor"
@@ -271,6 +272,10 @@ def karma_web_test_suite(bootstrap = [], deps = [], **kwargs):
         **kwargs
     )
 
+def ng_benchmark(**kwargs):
+    """Default values for ng_benchmark"""
+    _ng_benchmark(**kwargs)
+
 def nodejs_binary(data = [], **kwargs):
     """Default values for nodejs_binary"""
     _nodejs_binary(

tools/ng_benchmark.bzl

@@ -0,0 +1,32 @@
+# 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
+"""Bazel macro for running Angular benchmarks"""
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+
+def ng_benchmark(name, bundle):
+    """
+
+    This macro creates two targets, one that is runnable and prints results and one that can be used for profiling via chrome://inspect.
+
+    Args:
+      name: name of the runnable rule to create
+      bundle: label of the ng_rollup_bundle to run
+    """
+
+    nodejs_binary(
+        name = name,
+        data = [bundle],
+        entry_point = bundle + ".min_debug.es2015.js",
+        tags = ["local"],
+    )
+
+    nodejs_binary(
+        name = name + "_profile",
+        data = [bundle],
+        entry_point = bundle + ".min_debug.es2015.js",
+        args = ["--node_options=--no-turbo-inlining --node_options=--inspect-brk"],
+        tags = ["local"],
+    )