revert: "revert: "feat(dev-infra): exposed new rule 'component_benchmark' via dev_infra (#36434)" (#36798)" (#36800)

This reverts commit ad8c4cdd75.

PR Close #36800

dev-infra/benchmark/component_benchmark/BUILD.bazel

@@ -0,0 +1,12 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files([
+    "protractor-perf.conf.js",
+    "start-server.js",
+])
+
+# Make source files available for distribution via pkg_npm
+filegroup(
+    name = "files",
+    srcs = glob(["*"]) + ["//dev-infra/benchmark/component_benchmark/defaults:files"],
+)

dev-infra/benchmark/component_benchmark/benchmark_test.bzl

@@ -0,0 +1,27 @@
+load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
+
+"""
+  Macro that can be used to define a benchmark test. This differentiates from
+  a normal Protractor test suite because we specify a custom "perf" configuration
+  that sets up "@angular/benchpress". Benchmark test targets will not run on CI
+  unless explicitly requested.
+"""
+
+def benchmark_test(name, server, tags = [], **kwargs):
+    protractor_web_test_suite(
+        name = name,
+        browsers = ["//dev-infra/benchmark/browsers:chromium"],
+        configuration = "//dev-infra/benchmark/component_benchmark:protractor-perf.conf.js",
+        on_prepare = "//dev-infra/benchmark/component_benchmark:start-server.js",
+        server = server,
+        # Benchmark targets should not run on CI by default.
+        tags = tags + [
+            "manual",
+            "no-remote-exec",
+        ],
+        test_suite_tags = [
+            "manual",
+            "no-remote-exec",
+        ],
+        **kwargs
+    )

dev-infra/benchmark/component_benchmark/component_benchmark.bzl

@@ -0,0 +1,145 @@
+load("//dev-infra/benchmark/ng_rollup_bundle:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("//tools:defaults.bzl", "ng_module")
+load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
+load(":benchmark_test.bzl", "benchmark_test")
+
+def copy_default_file(origin, destination):
+    """
+    Copies a file from /defaults to the destination.
+
+    Args:
+        origin: The name of a file in benchpress/defaults to be copied.
+        destination: Where the original file will be clopied to.
+    """
+    native.genrule(
+        name = "copy_default_" + origin + "_file_genrule",
+        srcs = ["//dev-infra/benchmark/component_benchmark/defaults:" + origin],
+        outs = [destination],
+        cmd = "cat $(SRCS) >> $@",
+    )
+
+def component_benchmark(
+        name,
+        prefix,
+        driver,
+        driver_deps,
+        ng_srcs,
+        ng_deps,
+        assets = None,
+        styles = None,
+        entry_point = None,
+        entry_point_deps = [
+            "//packages/core",
+            "//packages/platform-browser",
+        ]):
+    """
+    Runs a benchmark test against the given angular app using the given driver.
+
+    This rule was created with the intention of reducing the amount of
+    duplicate/boilderplate code, while also allowing you to be as verbose with
+    your app as you'd like. The goal being that if you just want to test a
+    simple component, the only thing you'd need to provide are the component
+    (via ng_srcs) and driver.
+
+    ** USAGE NOTES **
+
+    (assets/styles): The default index.html imports a stylesheet named
+    "styles.css". This allows the use of the default index.html with a custom
+    stylesheet through the styles arg by providing either a styles.css in the
+    prefix directory or by providing a css binary named styles.css.
+
+    (assets): The default index.html expects that the root selector for
+    the benchmark app is "app-root".
+
+    (entry_point): The default entry_point expects a file named "app.module" to export
+    the root NgModule for the benchmark application. It also expects that the
+    root NgModule is named "AppModule".
+
+    TIP: The server is named `name + "_server"` so that you can view/debug the
+    app.
+
+    Args:
+      name: The name of the benchmark_test to be run
+      prefix: The relative path to the root directory of the benchmark app
+      driver: The ts driver for running the benchmark
+      driver_deps: Driver's dependencies
+      ng_srcs: All of the ts srcs for the angular app
+      ng_deps: Dependencies for the angular app
+      assets: Static files
+      styles: Stylesheets
+      entry_point: Main entry point for the angular app
+      entry_point_deps: Entry point's dependencies
+    """
+    app_lib = name + "_app_lib"
+    app_main = name + "_app_main"
+    benchmark_driver = name + "_driver"
+    server = name + "_server"
+
+    # If the user doesn't provide assets, entry_point, or styles, we use a
+    # default version.
+    # Note that we copy the default files to the same directory as what is used
+    # by the app for three reasons:
+    # 1. To avoid having the entry point be defined in a different package from
+    # where this macro is called.
+    # 2. So that we can use relative paths for imports in entry point.
+    # 3. To make using default static files as seamless as possible.
+
+    if not entry_point:
+        entry_point = prefix + "default_index.ts"
+        ng_srcs.append(entry_point)
+        copy_default_file("index.ts", entry_point)
+
+    if not assets:
+        html = prefix + "index.html"
+        assets = [html]
+        copy_default_file("index.html", html)
+
+    if not styles:
+        css = prefix + "styles.css"
+        styles = [css]
+        copy_default_file("styles.css", css)
+
+    # Bootstraps the application and creates
+    # additional files to be imported by the entry_point file.
+    ng_module(
+        name = app_lib,
+        srcs = ng_srcs,
+        # Creates ngFactory and ngSummary to be imported by the app's entry point.
+        generate_ve_shims = True,
+        deps = ng_deps,
+        tsconfig = "//dev-infra/benchmark/component_benchmark:tsconfig-e2e.json",
+    )
+
+    # Bundle the application (needed by ts_devserver).
+    ng_rollup_bundle(
+        name = app_main,
+        entry_point = entry_point,
+        deps = [":" + app_lib] + entry_point_deps,
+    )
+
+    # The ts_library for the driver that runs tests against the benchmark app.
+    ts_library(
+        name = benchmark_driver,
+        tsconfig = "//dev-infra/benchmark/component_benchmark:tsconfig-e2e.json",
+        testonly = True,
+        srcs = [driver],
+        deps = driver_deps,
+    )
+
+    # The server for our application.
+    ts_devserver(
+        name = server,
+        bootstrap = ["//packages/zone.js/dist:zone.js"],
+        port = 4200,
+        static_files = assets + styles,
+        deps = [":" + app_main + ".min_debug.es2015.js"],
+        additional_root_paths = ["//dev-infra/benchmark/component_benchmark/defaults"],
+        serving_path = "/app_bundle.js",
+    )
+
+    # Runs a protractor test that's set up to use @angular/benchpress.
+    benchmark_test(
+        name = name,
+        server = ":" + server,
+        deps = [":" + benchmark_driver],
+    )

dev-infra/benchmark/component_benchmark/defaults/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+# Make source files available for distribution via pkg_npm
+filegroup(
+    name = "files",
+    srcs = glob(["*"]),
+)
+
+exports_files([
+    "index.html",
+    "index.ts",
+    "styles.css",
+])

dev-infra/benchmark/component_benchmark/defaults/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Benchmark Test</title>
+    <!-- Prevent favicon.ico requests -->
+    <link rel="icon" href="data:,">
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <app-root id="root">Loading...</app-root>
+    <script src="/app_bundle.js"></script>
+  </body>
+</html>

dev-infra/benchmark/component_benchmark/defaults/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+
+// @ts-ignore Cannot find module
+import {enableProdMode} from '@angular/core';
+
+// @ts-ignore Cannot find module
+import {platformBrowser} from '@angular/platform-browser';
+
+// @ts-ignore Cannot find module
+import {AppModuleNgFactory} from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

dev-infra/benchmark/component_benchmark/defaults/styles.css

@@ -0,0 +1,7 @@
+/*
+ * This file exists so that if the default index.html is used a 404 will not
+ * throw.
+ *
+ * We leave an import for "styles.css" in the default index.html for the case
+ * where someone wants to use index.html and provide their own styles.
+ */

dev-infra/benchmark/component_benchmark/protractor-perf.conf.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google LLC 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 CHROME_OPTIONS = {
+  'args': ['--js-flags=--expose-gc', '--no-sandbox', '--headless', '--disable-dev-shm-usage'],
+  'perfLoggingPrefs': {
+    'traceCategories':
+        'v8,blink.console,devtools.timeline,disabled-by-default-devtools.timeline,blink.user_timing'
+  }
+};
+
+exports.config = {
+  onPrepare: function() {
+    beforeEach(function() {
+      browser.ignoreSynchronization = false;
+    });
+  },
+  restartBrowserBetweenTests: true,
+  allScriptsTimeout: 11000,
+  capabilities: {
+    'browserName': 'chrome',
+    chromeOptions: CHROME_OPTIONS,
+    loggingPrefs: {
+      performance: 'ALL',
+      browser: 'ALL',
+    }
+  },
+  directConnect: true,
+  framework: 'jasmine2',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 90000,
+    print: function(msg) {
+      console.log(msg);
+    },
+  },
+  useAllAngular2AppRoots: true
+};

dev-infra/benchmark/component_benchmark/start-server.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC 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('@bazel/protractor/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = async function(config) {
+  const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
+  const processedConfig = await protractor.browser.getProcessedConfig();
+  const serverUrl = `http://localhost:${port}`;
+
+  return processedConfig.baseUrl = protractor.browser.baseUrl = serverUrl;
+};

dev-infra/benchmark/component_benchmark/tsconfig-e2e.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "types": ["node", "jasmine"]
+  }
+}