From ff71eff157b1c11f3a0211087c37fda9d32a09fd Mon Sep 17 00:00:00 2001 From: Tobias Bosch Date: Mon, 13 Mar 2017 09:45:04 -0700 Subject: [PATCH] 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 | 2 +- packages/core/src/render/api.ts | 13 ++++++++++--- packages/core/src/view/element.ts | 4 ++-- packages/core/src/view/refs.ts | 4 ++-- packages/core/src/view/services.ts | 11 +++++------ .../animations/src/render/animation_renderer.ts | 11 +++++------ packages/platform-browser/src/dom/dom_renderer.ts | 14 +++++++------- packages/platform-server/src/server_renderer.ts | 7 +++---- .../src/web_workers/ui/renderer.ts | 14 ++++++-------- .../src/web_workers/worker/renderer.ts | 12 +++++------- .../worker/renderer_v2_integration_spec.ts | 4 ++-- tools/public_api_guard/core/typings/core.d.ts | 10 ++++++++-- 12 files changed, 56 insertions(+), 50 deletions(-) diff --git a/packages/core/src/render.ts b/packages/core/src/render.ts index b0c53af9ae..9db56a4848 100644 --- a/packages/core/src/render.ts +++ b/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'; diff --git a/packages/core/src/render/api.ts b/packages/core/src/render/api.ts index 29cd9ddfc7..73764d756d 100644 --- a/packages/core/src/render/api.ts +++ b/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( - el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean): void; - abstract removeStyle(el: any, style: string, hasVendorPrefix: boolean): void; + abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void; + abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void; abstract setProperty(el: any, name: string, value: any): void; abstract setValue(node: any, value: string): void; abstract listen( diff --git a/packages/core/src/view/element.ts b/packages/core/src/view/element.ts index 72b4dc3739..d9eb6996cb 100644 --- a/packages/core/src/view/element.ts +++ b/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); } } diff --git a/packages/core/src/view/refs.ts b/packages/core/src/view/refs.ts index e7e14e8f8a..6eb66f1159 100644 --- a/packages/core/src/view/refs.ts +++ b/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); } } diff --git a/packages/core/src/view/services.ts b/packages/core/src/view/services.ts index b711765983..2b70e7fc1a 100644 --- a/packages/core/src/view/services.ts +++ b/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): - void { + setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): 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 { diff --git a/packages/platform-browser/animations/src/render/animation_renderer.ts b/packages/platform-browser/animations/src/render/animation_renderer.ts index 89836d2753..319501189e 100644 --- a/packages/platform-browser/animations/src/render/animation_renderer.ts +++ b/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): - void { - this.delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant); + setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void { + this.delegate.setStyle(el, style, value, flags); } - removeStyle(el: any, style: string, hasVendorPrefix: boolean): void { - this.delegate.removeStyle(el, style, hasVendorPrefix); + removeStyle(el: any, style: string, flags: RendererStyleFlags2): void { + this.delegate.removeStyle(el, style, flags); } setValue(node: any, value: string): void { this.delegate.setValue(node, value); } diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts index 6e1638d141..ddcb799c79 100644 --- a/packages/platform-browser/src/dom/dom_renderer.ts +++ b/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): - void { - if (hasVendorPrefix || hasImportant) { - el.style.setProperty(style, value, hasImportant ? 'important' : ''); + setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void { + if (flags & RendererStyleFlags2.DashCase) { + el.style.setProperty( + style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : ''); } else { el.style[style] = value; } } - removeStyle(el: any, style: string, hasVendorPrefix: boolean): void { - if (hasVendorPrefix) { + removeStyle(el: any, style: string, flags: RendererStyleFlags2): void { + if (flags & RendererStyleFlags2.DashCase) { el.style.removeProperty(style); } else { // IE requires '' instead of null diff --git a/packages/platform-server/src/server_renderer.ts b/packages/platform-server/src/server_renderer.ts index f08b2c11a1..8bbe0d1a16 100644 --- a/packages/platform-server/src/server_renderer.ts +++ b/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): - void { + setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): 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); } diff --git a/packages/platform-webworker/src/web_workers/ui/renderer.ts b/packages/platform-webworker/src/web_workers/ui/renderer.ts index 56cfad8728..eb318e3592 100644 --- a/packages/platform-webworker/src/web_workers/ui/renderer.ts +++ b/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( - r: Renderer2, el: any, style: string, value: any, hasVendorPrefix: boolean, - hasImportant: boolean) { - r.setStyle(el, style, value, hasVendorPrefix, hasImportant); + private setStyle(r: Renderer2, el: any, style: string, value: any, flags: RendererStyleFlags2) { + r.setStyle(el, style, value, flags); } - private removeStyle(r: Renderer2, el: any, style: string, hasVendorPrefix: boolean) { - r.removeStyle(el, style, hasVendorPrefix); + private removeStyle(r: Renderer2, el: any, style: string, flags: RendererStyleFlags2) { + r.removeStyle(el, style, flags); } private setProperty(r: Renderer2, el: any, name: string, value: any) { diff --git a/packages/platform-webworker/src/web_workers/worker/renderer.ts b/packages/platform-webworker/src/web_workers/worker/renderer.ts index e646c7d5fb..85e668758c 100644 --- a/packages/platform-webworker/src/web_workers/worker/renderer.ts +++ b/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): - void { + setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void { this.callUIWithRenderer('setStyle', [ new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT), new FnArg(style), new FnArg(value), - new FnArg(hasVendorPrefix), - new FnArg(hasImportant), + new FnArg(flags), ]); } - 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), ]); } diff --git a/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts b/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts index cc5dadf37a..c6dd3a3ae6 100644 --- a/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts +++ b/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'); diff --git a/tools/public_api_guard/core/typings/core.d.ts b/tools/public_api_guard/core/typings/core.d.ts index b0fe09b527..5a933270d3 100644 --- a/tools/public_api_guard/core/typings/core.d.ts +++ b/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: {