Pawel Kozlowski
atscott
parent
afc88074cd
commit
3dee2244da
|
|
@ -0,0 +1 @@
|
||||||
|
package(default_visibility = ["//visibility:public"])
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
|
||||||
|
|
||||||
|
package(default_visibility = ["//modules/benchmarks:__subpackages__"])
|
||||||
|
|
||||||
|
ng_module(
|
||||||
|
name = "ng2",
|
||||||
|
srcs = glob(["*.ts"]),
|
||||||
|
generate_ve_shims = True,
|
||||||
|
tsconfig = "//modules/benchmarks:tsconfig-build.json",
|
||||||
|
deps = [
|
||||||
|
"//modules/benchmarks/src:util_lib",
|
||||||
|
"//packages/core",
|
||||||
|
"//packages/platform-browser",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
ng_rollup_bundle(
|
||||||
|
name = "bundle",
|
||||||
|
entry_point = ":index_aot.ts",
|
||||||
|
deps = [
|
||||||
|
":ng2",
|
||||||
|
"@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"],
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Prevent the browser from requesting any favicon. -->
|
||||||
|
<link rel="icon" href="data:,">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Styling bindings benchmark</h2>
|
||||||
|
<p>
|
||||||
|
<select id="scenario-select">
|
||||||
|
<option value="0">(0) [title]="exp" (no styling involved)</option>
|
||||||
|
<option value="1">(1) class="foo" (static class)</option>
|
||||||
|
<option value="2">(2) class="foo {{exp}}" (className binding)</option>
|
||||||
|
<option value="3">(3) [class.foo]="boolExp" binding</option>
|
||||||
|
<option value="4">(4) class="foo" [class.bar]="boolExp" (mix of static and class. bindings</option>
|
||||||
|
<option value="5">(5) class="foo" [ngClass]="{bar: boolExp}" (mix of static class and ngClass binding)</option>
|
||||||
|
<option value="6">(6) class="foo" [ngStyle]="{width: 10px}" [style.background-color]="exp" (Sierpinski's triangle)
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button id="create">create</button>
|
||||||
|
<button id="detectChanges">detect changes</button>
|
||||||
|
<button id="destroy">destroy</button>
|
||||||
|
<button id="profile">profile detect changes</button>
|
||||||
|
<button id="modify">modify externally</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<styling-bindings id="root">Loading...</styling-bindings>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--load location for ts_devserver-->
|
||||||
|
<script src="/app_bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* @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
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {enableProdMode} from '@angular/core';
|
||||||
|
import {platformBrowser} from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import {init} from './init';
|
||||||
|
import {StylingModuleNgFactory} from './styling.ngfactory';
|
||||||
|
|
||||||
|
enableProdMode();
|
||||||
|
platformBrowser().bootstrapModuleFactory(StylingModuleNgFactory).then(init);
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
/**
|
||||||
|
* @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
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {ApplicationRef, NgModuleRef} from '@angular/core';
|
||||||
|
import {bindAction, profile} from '../../util';
|
||||||
|
import {StylingModule} from './styling';
|
||||||
|
|
||||||
|
const empty = [];
|
||||||
|
const items = [];
|
||||||
|
for (let i = 0; i < 2000; i++) {
|
||||||
|
items.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function init(moduleRef: NgModuleRef<StylingModule>) {
|
||||||
|
const injector = moduleRef.injector;
|
||||||
|
const appRef = injector.get(ApplicationRef);
|
||||||
|
const componentRef = appRef.components[0];
|
||||||
|
const component = componentRef.instance;
|
||||||
|
const componentHostEl = componentRef.location.nativeElement;
|
||||||
|
const select = document.querySelector('#scenario-select') !as HTMLSelectElement;
|
||||||
|
|
||||||
|
function create(tplRefIdx: number) {
|
||||||
|
component.tplRefIdx = tplRefIdx;
|
||||||
|
component.data = items;
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function destroy() {
|
||||||
|
component.data = empty;
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function detectChanges() {
|
||||||
|
component.exp = component.exp === 'bar' ? 'baz' : 'bar';
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function modifyExternally() {
|
||||||
|
const buttonEls = componentHostEl.querySelectorAll('button') as HTMLButtonElement[];
|
||||||
|
buttonEls.forEach((buttonEl: HTMLButtonElement) => {
|
||||||
|
const cl = buttonEl.classList;
|
||||||
|
if (cl.contains('external')) {
|
||||||
|
cl.remove('external');
|
||||||
|
} else {
|
||||||
|
cl.add('external');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
bindAction('#create', () => create(select.selectedIndex));
|
||||||
|
bindAction('#detectChanges', detectChanges);
|
||||||
|
bindAction('#destroy', destroy);
|
||||||
|
bindAction('#profile', profile(() => {
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
detectChanges();
|
||||||
|
}
|
||||||
|
}, () => {}, 'detect changes'));
|
||||||
|
bindAction('#modify', modifyExternally);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
/**
|
||||||
|
* @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
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {Component, NgModule, TemplateRef} from '@angular/core';
|
||||||
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'styling-bindings',
|
||||||
|
template: `
|
||||||
|
<ng-template #t0><button [title]="exp"></button></ng-template>
|
||||||
|
<ng-template #t1><button class="static"></button></ng-template>
|
||||||
|
<ng-template #t2><button class="foo {{exp}}"></button></ng-template>
|
||||||
|
<ng-template #t3><button [class.bar]="exp ==='bar'"></button></ng-template>
|
||||||
|
<ng-template #t4><button class="foo" [class.bar]="exp ==='bar'"></button></ng-template>
|
||||||
|
<ng-template #t5><button class="foo" [ngClass]="{bar: exp ==='bar'}"></button></ng-template>
|
||||||
|
<ng-template #t6><button class="foo" [ngStyle]="staticStyle" [style.background-color]="exp"></button></ng-template>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ng-template ngFor [ngForOf]="data" [ngForTemplate]="getTplRef(t0, t1, t2, t3, t4, t5, t6)"></ng-template>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
export class StylingComponent {
|
||||||
|
data: number[] = [];
|
||||||
|
exp: string = 'bar';
|
||||||
|
tplRefIdx: number = 0;
|
||||||
|
staticStyle = {width: '10px'};
|
||||||
|
|
||||||
|
getTplRef(...tplRefs): TemplateRef<any> { return tplRefs[this.tplRefIdx]; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [BrowserModule],
|
||||||
|
declarations: [StylingComponent],
|
||||||
|
bootstrap: [StylingComponent],
|
||||||
|
})
|
||||||
|
export class StylingModule {
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue