refactor(core): use flags in Renderer2.setStyle instead of booleans (#15045)

BREAKING CHANGE: (since v4 rc.1)
- `Renderer2.setStyle` no longer takes booleans but rather a
  bit mask of flags.

packages/core/src/render.ts

@@ -7,4 +7,4 @@
  */
 
 // Public API for render
-export {RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer} from './render/api';
+export {RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from './render/api';

packages/core/src/render/api.ts

@@ -129,6 +129,14 @@ export abstract class RendererFactory2 {
   abstract createRenderer(hostElement: any, type: RendererType2): Renderer2;
 }
 
+/**
+ * @experimental
+ */
+export enum RendererStyleFlags2 {
+  Important = 1 << 0,
+  DashCase = 1 << 1
+}
+
 /**
  * @experimental
  */
@@ -169,9 +177,8 @@ export abstract class Renderer2 {
   abstract removeAttribute(el: any, name: string, namespace?: string): void;
   abstract addClass(el: any, name: string): void;
   abstract removeClass(el: any, name: string): void;
-  abstract setStyle(
+  abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
-      el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean): void;
+  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
-  abstract removeStyle(el: any, style: string, hasVendorPrefix: boolean): void;
   abstract setProperty(el: any, name: string, value: any): void;
   abstract setValue(node: any, value: string): void;
   abstract listen(

packages/core/src/view/element.ts

@@ -299,9 +299,9 @@ function setElementStyle(
   }
   const renderer = view.renderer;
   if (renderValue != null) {
-    renderer.setStyle(renderNode, name, renderValue, false, false);
+    renderer.setStyle(renderNode, name, renderValue);
   } else {
-    renderer.removeStyle(renderNode, name, false);
+    renderer.removeStyle(renderNode, name);
   }
 }
 

packages/core/src/view/refs.ts

@@ -386,9 +386,9 @@ class RendererAdapter implements RendererV1 {
 
   setElementStyle(renderElement: HTMLElement, styleName: string, styleValue: string): void {
     if (styleValue != null) {
-      this.delegate.setStyle(renderElement, styleName, styleValue, false, false);
+      this.delegate.setStyle(renderElement, styleName, styleValue);
     } else {
-      this.delegate.removeStyle(renderElement, styleName, false);
+      this.delegate.removeStyle(renderElement, styleName);
     }
   }
 

packages/core/src/view/services.ts

@@ -9,7 +9,7 @@
 import {isDevMode} from '../application_ref';
 import {DebugElement, DebugNode, EventListener, getDebugNode, indexDebugNode, removeDebugNodeFromIndex} from '../debug/debug_node';
 import {Injector} from '../di';
-import {Renderer2, RendererFactory2, RendererType2} from '../render/api';
+import {Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '../render/api';
 import {Sanitizer, SecurityContext} from '../security';
 
 import {isViewDebugError, viewDestroyedError, viewWrappedDebugError} from './errors';
@@ -539,21 +539,20 @@ class DebugRenderer2 implements Renderer2 {
     this.delegate.removeClass(el, name);
   }
 
-  setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
-      void {
     const debugEl = getDebugNode(el);
     if (debugEl && debugEl instanceof DebugElement) {
       debugEl.styles[style] = value;
     }
-    this.delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant);
+    this.delegate.setStyle(el, style, value, flags);
   }
 
-  removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
     const debugEl = getDebugNode(el);
     if (debugEl && debugEl instanceof DebugElement) {
       debugEl.styles[style] = null;
     }
-    this.delegate.removeStyle(el, style, hasVendorPrefix);
+    this.delegate.removeStyle(el, style, flags);
   }
 
   setProperty(el: any, name: string, value: any): void {

packages/platform-browser/animations/src/render/animation_renderer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {AnimationEvent, AnimationTriggerMetadata} from '@angular/animations';
-import {Injectable, NgZone, Renderer2, RendererFactory2, RendererType2} from '@angular/core';
+import {Injectable, NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
 
 import {AnimationEngine} from '../animation_engine';
 
@@ -70,13 +70,12 @@ export class AnimationRenderer implements Renderer2 {
 
   removeClass(el: any, name: string): void { this.delegate.removeClass(el, name); }
 
-  setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
-      void {
+    this.delegate.setStyle(el, style, value, flags);
-    this.delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant);
   }
 
-  removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
-    this.delegate.removeStyle(el, style, hasVendorPrefix);
+    this.delegate.removeStyle(el, style, flags);
   }
 
   setValue(node: any, value: string): void { this.delegate.setValue(node, value); }

packages/platform-browser/src/dom/dom_renderer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {APP_ID, Inject, Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
+import {APP_ID, Inject, Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
 
 import {EventManager} from './events/event_manager';
 import {DomSharedStylesHost} from './shared_styles_host';
@@ -164,17 +164,17 @@ class DefaultDomRenderer2 implements Renderer2 {
 
   removeClass(el: any, name: string): void { el.classList.remove(name); }
 
-  setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
-      void {
+    if (flags & RendererStyleFlags2.DashCase) {
-    if (hasVendorPrefix || hasImportant) {
+      el.style.setProperty(
-      el.style.setProperty(style, value, hasImportant ? 'important' : '');
+          style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : '');
     } else {
       el.style[style] = value;
     }
   }
 
-  removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
-    if (hasVendorPrefix) {
+    if (flags & RendererStyleFlags2.DashCase) {
       el.style.removeProperty(style);
     } else {
       // IE requires '' instead of null

packages/platform-server/src/server_renderer.ts

@@ -7,7 +7,7 @@
  */
 
 import {DomElementSchemaRegistry} from '@angular/compiler';
-import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
+import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
 import {DOCUMENT, ɵNAMESPACE_URIS as NAMESPACE_URIS, ɵSharedStylesHost as SharedStylesHost, ɵflattenStyles as flattenStyles, ɵgetDOM as getDOM, ɵshimContentAttribute as shimContentAttribute, ɵshimHostAttribute as shimHostAttribute} from '@angular/platform-browser';
 
 const EMPTY_ARRAY: any[] = [];
@@ -127,12 +127,11 @@ class DefaultServerRenderer2 implements Renderer2 {
 
   removeClass(el: any, name: string): void { getDOM().removeClass(el, name); }
 
-  setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
-      void {
     getDOM().setStyle(el, style, value);
   }
 
-  removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
     getDOM().removeStyle(el, style);
   }
 

packages/platform-webworker/src/web_workers/ui/renderer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer} from '@angular/core';
+import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from '@angular/core';
 
 import {MessageBus} from '../shared/message_bus';
 import {EVENT_2_CHANNEL, RENDERER_2_CHANNEL} from '../shared/messaging_api';
@@ -48,7 +48,7 @@ export class MessageBasedRenderer2 {
       ['setAttribute', this.setAttribute, RSO, RSO, P, P, P],
       ['removeAttribute', this.removeAttribute, RSO, RSO, P, P],
       ['addClass', this.addClass, RSO, RSO, P], ['removeClass', this.removeClass, RSO, RSO, P],
-      ['setStyle', this.setStyle, RSO, RSO, P, P, P, P],
+      ['setStyle', this.setStyle, RSO, RSO, P, P, P],
       ['removeStyle', this.removeStyle, RSO, RSO, P, P],
       ['setProperty', this.setProperty, RSO, RSO, P, P], ['setValue', this.setValue, RSO, RSO, P],
       ['listen', this.listen, RSO, RSO, P, P, P], ['unlisten', this.unlisten, RSO, RSO],
@@ -118,14 +118,12 @@ export class MessageBasedRenderer2 {
 
   private removeClass(r: Renderer2, el: any, name: string) { r.removeClass(el, name); }
 
-  private setStyle(
+  private setStyle(r: Renderer2, el: any, style: string, value: any, flags: RendererStyleFlags2) {
-      r: Renderer2, el: any, style: string, value: any, hasVendorPrefix: boolean,
+    r.setStyle(el, style, value, flags);
-      hasImportant: boolean) {
-    r.setStyle(el, style, value, hasVendorPrefix, hasImportant);
   }
 
-  private removeStyle(r: Renderer2, el: any, style: string, hasVendorPrefix: boolean) {
+  private removeStyle(r: Renderer2, el: any, style: string, flags: RendererStyleFlags2) {
-    r.removeStyle(el, style, hasVendorPrefix);
+    r.removeStyle(el, style, flags);
   }
 
   private setProperty(r: Renderer2, el: any, name: string, value: any) {

packages/platform-webworker/src/web_workers/worker/renderer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
+import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
 
 import {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from '../shared/client_message_broker';
 import {MessageBus} from '../shared/message_bus';
@@ -240,22 +240,20 @@ export class WebWorkerRenderer2 implements Renderer2 {
     ]);
   }
 
-  setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
+  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
-      void {
     this.callUIWithRenderer('setStyle', [
       new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
       new FnArg(style),
       new FnArg(value),
-      new FnArg(hasVendorPrefix),
+      new FnArg(flags),
-      new FnArg(hasImportant),
     ]);
   }
 
-  removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
+  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
     this.callUIWithRenderer('removeStyle', [
       new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
       new FnArg(style),
-      new FnArg(hasVendorPrefix),
+      new FnArg(flags),
     ]);
   }
 

packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts

@@ -106,10 +106,10 @@ export function main() {
            lastCreatedRenderer.removeClass(workerEl, 'a');
            expect(getDOM().hasClass(el, 'a')).toBe(false);
 
-           lastCreatedRenderer.setStyle(workerEl, 'width', '10px', false, false);
+           lastCreatedRenderer.setStyle(workerEl, 'width', '10px');
            expect(getDOM().getStyle(el, 'width')).toEqual('10px');
 
-           lastCreatedRenderer.removeStyle(workerEl, 'width', false);
+           lastCreatedRenderer.removeStyle(workerEl, 'width');
            expect(getDOM().getStyle(el, 'width')).toEqual('');
 
            lastCreatedRenderer.setAttribute(workerEl, 'someattr', 'someValue');

tools/public_api_guard/core/typings/core.d.ts

@@ -825,11 +825,11 @@ export declare abstract class Renderer2 {
     abstract removeAttribute(el: any, name: string, namespace?: string): void;
     abstract removeChild(parent: any, oldChild: any): void;
     abstract removeClass(el: any, name: string): void;
-    abstract removeStyle(el: any, style: string, hasVendorPrefix: boolean): void;
+    abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
     abstract selectRootElement(selectorOrNode: string | any): any;
     abstract setAttribute(el: any, name: string, value: string, namespace?: string): void;
     abstract setProperty(el: any, name: string, value: any): void;
-    abstract setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean): void;
+    abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
     abstract setValue(node: any, value: string): void;
 }
 
@@ -838,6 +838,12 @@ export declare abstract class RendererFactory2 {
     abstract createRenderer(hostElement: any, type: RendererType2): Renderer2;
 }
 
+/** @experimental */
+export declare enum RendererStyleFlags2 {
+    Important = 1,
+    DashCase = 2,
+}
+
 /** @experimental */
 export interface RendererType2 {
     data: {