mhevery · pkozlowski-opensource · Dec 6, 2019 · Nov 23, 2019 · Dec 12, 2019 · Jan 8, 2020
diff --git a/aio/scripts/_payload-limits.json b/aio/scripts/_payload-limits.json
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 461697,
+        "main-es2015": 456258,
         "polyfills-es2015": 52503
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3097,
-        "main-es2015": 439352,
+        "main-es2015": 425216,
         "polyfills-es2015": 52503
       }
     }

diff --git a/integration/_payload-limits.json b/integration/_payload-limits.json
@@ -3,7 +3,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 141476,
+        "main-es2015": 141855,
         "polyfills-es2015": 36808
       }
     }
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 15783,
+        "main-es2015": 16763,
         "polyfills-es2015": 36808
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 147610,
+        "main-es2015": 147954,
         "polyfills-es2015": 36808
       }
     }
@@ -30,7 +30,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 136594,
+        "main-es2015": 137100,
         "polyfills-es2015": 37494
       }
     }
@@ -39,7 +39,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 266648,
+        "main-es2015": 254288,
         "polyfills-es2015": 36808,
         "5-es2015": 751
       }
@@ -49,7 +49,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 225787,
+        "main-es2015": 226399,
         "polyfills-es2015": 36808,
         "5-es2015": 779
       }
@@ -60,7 +60,7 @@
       "uncompressed": {
         "bundle": "TODO(i): temporarily increase the payload size limit from 105779 - this is due to a closure issue related to ESM reexports that still needs to be investigated",
         "bundle": "TODO(i): we should define ngDevMode to false in Closure, but --define only works in the global scope.",
-        "bundle": 176433
+        "bundle": 175498
       }
     }
   }

diff --git a/modules/benchmarks/src/styling/BUILD.bazel b/modules/benchmarks/src/styling/BUILD.bazel
@@ -0,0 +1 @@
+package(default_visibility = ["//visibility:public"])
diff --git a/modules/benchmarks/src/styling/ng2/BUILD.bazel b/modules/benchmarks/src/styling/ng2/BUILD.bazel
@@ -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"],
+)
diff --git a/modules/benchmarks/src/styling/ng2/index.html b/modules/benchmarks/src/styling/ng2/index.html
@@ -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>
diff --git a/modules/benchmarks/src/styling/ng2/index_aot.ts b/modules/benchmarks/src/styling/ng2/index_aot.ts
@@ -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);
diff --git a/modules/benchmarks/src/styling/ng2/init.ts b/modules/benchmarks/src/styling/ng2/init.ts
@@ -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);
+}
diff --git a/modules/benchmarks/src/styling/ng2/styling.ts b/modules/benchmarks/src/styling/ng2/styling.ts
@@ -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 == 'bar' ? 'yellow': 'red'"></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 {
+}
diff --git a/modules/benchmarks/src/tree/render3_function/index.ts b/modules/benchmarks/src/tree/render3_function/index.ts
@@ -25,7 +25,7 @@ export class TreeFunction {
     type: TreeFunction,
     selectors: [['tree']],
     decls: 5,
-    vars: 1,
+    vars: 2,
     template: function(rf: ɵRenderFlags, ctx: TreeFunction) {
       // bit of a hack
       TreeTpl(rf, ctx.data);
@@ -34,6 +34,7 @@ export class TreeFunction {
   });
 }
 
+const TreeFunctionCmpDef = TreeFunction.ɵcmp as{decls: number, vars: number};
 export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
   if (rf & ɵRenderFlags.Create) {
     ɵɵelementStart(0, 'tree');
@@ -54,7 +55,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
     ɵɵcontainerRefreshStart(3);
     {
       if (ctx.left != null) {
-        let rf0 = ɵɵembeddedViewStart(0, 5, 1);
+        let rf0 = ɵɵembeddedViewStart(0, 5, 2);
         { TreeTpl(rf0, ctx.left); }
         ɵɵembeddedViewEnd();
       }
@@ -63,7 +64,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
     ɵɵcontainerRefreshStart(4);
     {
       if (ctx.right != null) {
-        let rf0 = ɵɵembeddedViewStart(0, 5, 1);
+        let rf0 = ɵɵembeddedViewStart(0, TreeFunctionCmpDef.decls, TreeFunctionCmpDef.vars);
         { TreeTpl(rf0, ctx.right); }
         ɵɵembeddedViewEnd();
       }

diff --git a/packages/common/src/common.ts b/packages/common/src/common.ts
@@ -20,7 +20,7 @@ export {registerLocaleData} from './i18n/locale_data';
 export {Plural, NumberFormatStyle, FormStyle, Time, TranslationWidth, FormatWidth, NumberSymbol, WeekDay, getNumberOfCurrencyDigits, getCurrencySymbol, getLocaleDayPeriods, getLocaleDayNames, getLocaleMonthNames, getLocaleId, getLocaleEraNames, getLocaleWeekEndRange, getLocaleFirstDayOfWeek, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocalePluralCase, getLocaleTimeFormat, getLocaleNumberSymbol, getLocaleNumberFormat, getLocaleCurrencyName, getLocaleCurrencySymbol, getLocaleDirection} from './i18n/locale_data_api';
 export {parseCookieValue as ɵparseCookieValue} from './cookie';
 export {CommonModule} from './common_module';
-export {NgClass, NgClassBase, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgStyleBase, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
+export {NgClass, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
 export {DOCUMENT} from './dom_tokens';
 export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe, KeyValuePipe, KeyValue} from './pipes/index';
 export {PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, PLATFORM_WORKER_APP_ID as ɵPLATFORM_WORKER_APP_ID, PLATFORM_WORKER_UI_ID as ɵPLATFORM_WORKER_UI_ID, isPlatformBrowser, isPlatformServer, isPlatformWorkerApp, isPlatformWorkerUi} from './platform_id';

diff --git a/packages/common/src/directives/index.ts b/packages/common/src/directives/index.ts
@@ -7,18 +7,17 @@
  */
 
 import {Provider} from '@angular/core';
-import {NgClass, NgClassBase} from './ng_class';
+import {NgClass} from './ng_class';
 import {NgComponentOutlet} from './ng_component_outlet';
 import {NgForOf, NgForOfContext} from './ng_for_of';
 import {NgIf, NgIfContext} from './ng_if';
 import {NgPlural, NgPluralCase} from './ng_plural';
-import {NgStyle, NgStyleBase} from './ng_style';
+import {NgStyle} from './ng_style';
 import {NgSwitch, NgSwitchCase, NgSwitchDefault} from './ng_switch';
 import {NgTemplateOutlet} from './ng_template_outlet';
 
 export {
   NgClass,
-  NgClassBase,
   NgComponentOutlet,
   NgForOf,
   NgForOfContext,
@@ -27,7 +26,6 @@ export {
   NgPlural,
   NgPluralCase,
   NgStyle,
-  NgStyleBase,
   NgSwitch,
   NgSwitchCase,
   NgSwitchDefault,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		package(default_visibility = ["//visibility:public"])