cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(benchpress): create component_benchmark macro (#35692)

Browse Source 
* Create component_benchmark macro
* Change class_bindings benchmark to use component_benchmark

PR Close #35692
This commit is contained in:
Wagner Maciel 2020-03-18 09:01:41 -07:00 committed by Misko Hevery
parent df890d7629
commit 8968b206b4
11 changed files with 209 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.pullapprove.yml
View File

@ -952,6 +952,7 @@ groups:
'tools/build/**', 'tools/build/**',
'tools/circular_dependency_test/**', 'tools/circular_dependency_test/**',
'tools/contributing-stats/**', 'tools/contributing-stats/**',
'tools/components/**'
'tools/gulp-tasks/**', 'tools/gulp-tasks/**',
'tools/ng_rollup_bundle/**', 'tools/ng_rollup_bundle/**',
'tools/ngcontainer/**', 'tools/ngcontainer/**',

67
modules/benchmarks/src/class_bindings/BUILD.bazel
View File

@ -1,56 +1,31 @@
package(default_visibility = ["//modules/benchmarks:__subpackages__"]) package(default_visibility = ["//modules/benchmarks:__subpackages__"])
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver", "ts_library") load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test") load("//tools/components:component_benchmark.bzl", "component_benchmark")
ng_module( sass_binary(
name = "application_lib", name = "class_bindings_styles",
srcs = glob( src = ":styles.scss",
["**/*.ts"], )
exclude = ["**/*.perf-spec.ts"],
), component_benchmark(
generate_ve_shims = True, name = "benchmark",
deps = [ driver = ":class_bindings.perf-spec.ts",
driver_deps = [
"//modules/e2e_util",
"@npm//protractor",
],
ng_deps = [
"//packages:types", "//packages:types",
"//packages/common", "//packages/common",
"//packages/core", "//packages/core",
"//packages/platform-browser", "//packages/platform-browser",
"@npm//rxjs", "@npm//rxjs",
], ],
) ng_srcs = glob(
["**/*.ts"],
ts_library( exclude = ["**/*.perf-spec.ts"],
name = "perf_lib", ),
testonly = 1, prefix = "",
srcs = ["class_bindings.perf-spec.ts"], styles = [":class_bindings_styles"],
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",
],
) )

2
modules/benchmarks/src/class_bindings/app.component.ts
View File

@ -8,7 +8,7 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
@Component({ @Component({
selector: 'app-component', selector: 'app-root',
template: ` template: `
<button id="create" (click)="create()">Create</button> <button id="create" (click)="create()">Create</button>
<button id="update" (click)="update()">Update</button> <button id="update" (click)="update()">Update</button>

27
modules/benchmarks/src/class_bindings/index.html
View File

@ -1,27 +0,0 @@
<!doctype html>
<html>
<head>
<!-- Prevent the browser from requesting any favicon. -->
<link rel="icon" href="data:,">
<style>
.hello {
color: red;
}
.bye {
color: blue;
}
</style>
</head>
<body>
<h1>Class Binding Benchmark</h1>
<app-component>Loading...</app-component>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

7
modules/benchmarks/src/class_bindings/styles.scss Normal file
View File

@ -0,0 +1,7 @@
.hello {
color: red;
}
.bye {
color: blue;
}

4
tools/components/BUILD.bazel Normal file
View File

@ -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

141
tools/components/component_benchmark.bzl Normal file
View File

@ -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],
)

7
tools/components/defaults/BUILD.bazel Normal file
View File

@ -0,0 +1,7 @@
package(default_visibility = ["//visibility:public"])
exports_files([
"index.html",
"index.ts",
"styles.css",
])

14
tools/components/defaults/index.html Normal file
View File

@ -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>

6
modules/benchmarks/src/class_bindings/index_aot.ts → tools/components/defaults/index.ts
View File

@ -5,11 +5,15 @@
* Use of this source code is governed by an MIT-style license that can be * 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 * found in the LICENSE file at https://angular.io/license
*/ */
// @ts-ignore Cannot find module
import {enableProdMode} from '@angular/core'; import {enableProdMode} from '@angular/core';
// @ts-ignore Cannot find module
import {platformBrowser} from '@angular/platform-browser'; import {platformBrowser} from '@angular/platform-browser';
// @ts-ignore Cannot find module
import {AppModuleNgFactory} from './app.module.ngfactory'; import {AppModuleNgFactory} from './app.module.ngfactory';
enableProdMode(); enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

7
tools/components/defaults/styles.css Normal file
View File

@ -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.
*/