From 8968b206b4a946b7c9a2b0ec3fd035713e47f750 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 18 Mar 2020 09:01:41 -0700 Subject: [PATCH] feat(benchpress): create component_benchmark macro (#35692) * Create component_benchmark macro * Change class_bindings benchmark to use component_benchmark PR Close #35692 --- .pullapprove.yml | 1 + .../benchmarks/src/class_bindings/BUILD.bazel | 67 +++------ .../src/class_bindings/app.component.ts | 4 +- .../benchmarks/src/class_bindings/index.html | 27 ---- .../benchmarks/src/class_bindings/styles.scss | 7 + tools/components/BUILD.bazel | 4 + tools/components/component_benchmark.bzl | 141 ++++++++++++++++++ tools/components/defaults/BUILD.bazel | 7 + tools/components/defaults/index.html | 14 ++ .../components/defaults/index.ts | 6 +- tools/components/defaults/styles.css | 7 + 11 files changed, 209 insertions(+), 76 deletions(-) delete mode 100644 modules/benchmarks/src/class_bindings/index.html create mode 100644 modules/benchmarks/src/class_bindings/styles.scss create mode 100644 tools/components/BUILD.bazel create mode 100644 tools/components/component_benchmark.bzl create mode 100644 tools/components/defaults/BUILD.bazel create mode 100644 tools/components/defaults/index.html rename modules/benchmarks/src/class_bindings/index_aot.ts => tools/components/defaults/index.ts (81%) create mode 100644 tools/components/defaults/styles.css diff --git a/.pullapprove.yml b/.pullapprove.yml index 0828850b08..480e472bab 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -952,6 +952,7 @@ groups: 'tools/build/**', 'tools/circular_dependency_test/**', 'tools/contributing-stats/**', + 'tools/components/**' 'tools/gulp-tasks/**', 'tools/ng_rollup_bundle/**', 'tools/ngcontainer/**', diff --git a/modules/benchmarks/src/class_bindings/BUILD.bazel b/modules/benchmarks/src/class_bindings/BUILD.bazel index 3f69c4c2e8..dbf1d0b038 100644 --- a/modules/benchmarks/src/class_bindings/BUILD.bazel +++ b/modules/benchmarks/src/class_bindings/BUILD.bazel @@ -1,56 +1,31 @@ package(default_visibility = ["//modules/benchmarks:__subpackages__"]) -load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver", "ts_library") -load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test") +load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary") +load("//tools/components:component_benchmark.bzl", "component_benchmark") -ng_module( - name = "application_lib", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.perf-spec.ts"], - ), - generate_ve_shims = True, - deps = [ +sass_binary( + name = "class_bindings_styles", + src = ":styles.scss", +) + +component_benchmark( + name = "benchmark", + driver = ":class_bindings.perf-spec.ts", + driver_deps = [ + "//modules/e2e_util", + "@npm//protractor", + ], + ng_deps = [ "//packages:types", "//packages/common", "//packages/core", "//packages/platform-browser", "@npm//rxjs", ], -) - -ts_library( - name = "perf_lib", - testonly = 1, - srcs = ["class_bindings.perf-spec.ts"], - tsconfig = "//modules/benchmarks:tsconfig-e2e.json", - deps = [ - "//modules/e2e_util", - "@npm//protractor", - ], -) - -ng_rollup_bundle( - name = "bundle", - entry_point = ":index_aot.ts", - deps = [ - ":application_lib", - "@npm//rxjs", - ], -) - -ts_devserver( - name = "prodserver", - bootstrap = ["//packages/zone.js/dist:zone.js"], - port = 4200, - static_files = ["index.html"], - deps = [":bundle.min_debug.es2015.js"], -) - -benchmark_test( - name = "perf", - server = ":prodserver", - deps = [ - ":perf_lib", - ], + ng_srcs = glob( + ["**/*.ts"], + exclude = ["**/*.perf-spec.ts"], + ), + prefix = "", + styles = [":class_bindings_styles"], ) diff --git a/modules/benchmarks/src/class_bindings/app.component.ts b/modules/benchmarks/src/class_bindings/app.component.ts index 168a945fea..73ffcaae3b 100644 --- a/modules/benchmarks/src/class_bindings/app.component.ts +++ b/modules/benchmarks/src/class_bindings/app.component.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; @Component({ - selector: 'app-component', + selector: 'app-root', template: ` @@ -35,4 +35,4 @@ export class AppComponent { } destroy() { this.show = false; } -} \ No newline at end of file +} diff --git a/modules/benchmarks/src/class_bindings/index.html b/modules/benchmarks/src/class_bindings/index.html deleted file mode 100644 index 841c08971b..0000000000 --- a/modules/benchmarks/src/class_bindings/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - -

Class Binding Benchmark

- Loading... - - - - - - \ No newline at end of file diff --git a/modules/benchmarks/src/class_bindings/styles.scss b/modules/benchmarks/src/class_bindings/styles.scss new file mode 100644 index 0000000000..bf7b4b9857 --- /dev/null +++ b/modules/benchmarks/src/class_bindings/styles.scss @@ -0,0 +1,7 @@ +.hello { + color: red; +} + +.bye { + color: blue; +} diff --git a/tools/components/BUILD.bazel b/tools/components/BUILD.bazel new file mode 100644 index 0000000000..af563485d7 --- /dev/null +++ b/tools/components/BUILD.bazel @@ -0,0 +1,4 @@ +# This BUILD file exists to mark //tools/components as a package. +# +# Without this, using component_benchmark.bzl would throw an error saying: +# Label '//tools/components:component_benchmark.bzl' is invalid because 'tools/components' is not a package diff --git a/tools/components/component_benchmark.bzl b/tools/components/component_benchmark.bzl new file mode 100644 index 0000000000..40f8788d44 --- /dev/null +++ b/tools/components/component_benchmark.bzl @@ -0,0 +1,141 @@ +load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver", "ts_library") +load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test") + +def copy_default_file(origin, destination): + """ + Copies a file from tools/components/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 = ["//tools/components/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, + ) + + # 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 = "//modules/benchmarks: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 = ["tools/components/defaults"], + ) + + # Runs a protractor test that's set up to use @angular/benchpress. + benchmark_test( + name = name, + server = ":" + server, + deps = [":" + benchmark_driver], + ) diff --git a/tools/components/defaults/BUILD.bazel b/tools/components/defaults/BUILD.bazel new file mode 100644 index 0000000000..3445ea83fe --- /dev/null +++ b/tools/components/defaults/BUILD.bazel @@ -0,0 +1,7 @@ +package(default_visibility = ["//visibility:public"]) + +exports_files([ + "index.html", + "index.ts", + "styles.css", +]) diff --git a/tools/components/defaults/index.html b/tools/components/defaults/index.html new file mode 100644 index 0000000000..f1fdc71047 --- /dev/null +++ b/tools/components/defaults/index.html @@ -0,0 +1,14 @@ + + + + + Benchmark Test + + + + + + Loading... + + + diff --git a/modules/benchmarks/src/class_bindings/index_aot.ts b/tools/components/defaults/index.ts similarity index 81% rename from modules/benchmarks/src/class_bindings/index_aot.ts rename to tools/components/defaults/index.ts index 3e57cacf09..18da743e3e 100644 --- a/modules/benchmarks/src/class_bindings/index_aot.ts +++ b/tools/components/defaults/index.ts @@ -5,11 +5,15 @@ * 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); diff --git a/tools/components/defaults/styles.css b/tools/components/defaults/styles.css new file mode 100644 index 0000000000..04bd77b44b --- /dev/null +++ b/tools/components/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. + */