Skip to content

Commit ff71eff

Browse files
tboschchuckjaz
tbosch
authored and
chuckjaz
committed
refactor(core): use flags in Renderer2.setStyle instead of booleans (angular#15045)
BREAKING CHANGE: (since v4 rc.1) - `Renderer2.setStyle` no longer takes booleans but rather a bit mask of flags.
1 parent fa1920a commit ff71eff

File tree

12 files changed

+56
-50
lines changed

12 files changed

+56
-50
lines changed

‎packages/core/src/render.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
*/
88

99
// Public API for render
10-
export {RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer} from './render/api';
10+
export {RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from './render/api';

‎packages/core/src/render/api.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,14 @@ export abstract class RendererFactory2 {
129129
abstract createRenderer(hostElement: any, type: RendererType2): Renderer2;
130130
}
131131

132+
/**
133+
* @experimental
134+
*/
135+
export enum RendererStyleFlags2 {
136+
Important = 1 << 0,
137+
DashCase = 1 << 1
138+
}
139+
132140
/**
133141
* @experimental
134142
*/
@@ -169,9 +177,8 @@ export abstract class Renderer2 {
169177
abstract removeAttribute(el: any, name: string, namespace?: string): void;
170178
abstract addClass(el: any, name: string): void;
171179
abstract removeClass(el: any, name: string): void;
172-
abstract setStyle(
173-
el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean): void;
174-
abstract removeStyle(el: any, style: string, hasVendorPrefix: boolean): void;
180+
abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
181+
abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
175182
abstract setProperty(el: any, name: string, value: any): void;
176183
abstract setValue(node: any, value: string): void;
177184
abstract listen(

‎packages/core/src/view/element.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,9 +299,9 @@ function setElementStyle(
299299
}
300300
const renderer = view.renderer;
301301
if (renderValue != null) {
302-
renderer.setStyle(renderNode, name, renderValue, false, false);
302+
renderer.setStyle(renderNode, name, renderValue);
303303
} else {
304-
renderer.removeStyle(renderNode, name, false);
304+
renderer.removeStyle(renderNode, name);
305305
}
306306
}
307307

‎packages/core/src/view/refs.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,9 +386,9 @@ class RendererAdapter implements RendererV1 {
386386

387387
setElementStyle(renderElement: HTMLElement, styleName: string, styleValue: string): void {
388388
if (styleValue != null) {
389-
this.delegate.setStyle(renderElement, styleName, styleValue, false, false);
389+
this.delegate.setStyle(renderElement, styleName, styleValue);
390390
} else {
391-
this.delegate.removeStyle(renderElement, styleName, false);
391+
this.delegate.removeStyle(renderElement, styleName);
392392
}
393393
}
394394

‎packages/core/src/view/services.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {isDevMode} from '../application_ref';
1010
import {DebugElement, DebugNode, EventListener, getDebugNode, indexDebugNode, removeDebugNodeFromIndex} from '../debug/debug_node';
1111
import {Injector} from '../di';
12-
import {Renderer2, RendererFactory2, RendererType2} from '../render/api';
12+
import {Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '../render/api';
1313
import {Sanitizer, SecurityContext} from '../security';
1414

1515
import {isViewDebugError, viewDestroyedError, viewWrappedDebugError} from './errors';
@@ -539,21 +539,20 @@ class DebugRenderer2 implements Renderer2 {
539539
this.delegate.removeClass(el, name);
540540
}
541541

542-
setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
543-
void {
542+
setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
544543
const debugEl = getDebugNode(el);
545544
if (debugEl && debugEl instanceof DebugElement) {
546545
debugEl.styles[style] = value;
547546
}
548-
this.delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant);
547+
this.delegate.setStyle(el, style, value, flags);
549548
}
550549

551-
removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
550+
removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
552551
const debugEl = getDebugNode(el);
553552
if (debugEl && debugEl instanceof DebugElement) {
554553
debugEl.styles[style] = null;
555554
}
556-
this.delegate.removeStyle(el, style, hasVendorPrefix);
555+
this.delegate.removeStyle(el, style, flags);
557556
}
558557

559558
setProperty(el: any, name: string, value: any): void {

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import {AnimationEvent, AnimationTriggerMetadata} from '@angular/animations';
9-
import {Injectable, NgZone, Renderer2, RendererFactory2, RendererType2} from '@angular/core';
9+
import {Injectable, NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
1010

1111
import {AnimationEngine} from '../animation_engine';
1212

@@ -70,13 +70,12 @@ export class AnimationRenderer implements Renderer2 {
7070

7171
removeClass(el: any, name: string): void { this.delegate.removeClass(el, name); }
7272

73-
setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
74-
void {
75-
this.delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant);
73+
setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
74+
this.delegate.setStyle(el, style, value, flags);
7675
}
7776

78-
removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
79-
this.delegate.removeStyle(el, style, hasVendorPrefix);
77+
removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
78+
this.delegate.removeStyle(el, style, flags);
8079
}
8180

8281
setValue(node: any, value: string): void { this.delegate.setValue(node, value); }

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {APP_ID, Inject, Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
9+
import {APP_ID, Inject, Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
1010

1111
import {EventManager} from './events/event_manager';
1212
import {DomSharedStylesHost} from './shared_styles_host';
@@ -164,17 +164,17 @@ class DefaultDomRenderer2 implements Renderer2 {
164164

165165
removeClass(el: any, name: string): void { el.classList.remove(name); }
166166

167-
setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
168-
void {
169-
if (hasVendorPrefix || hasImportant) {
170-
el.style.setProperty(style, value, hasImportant ? 'important' : '');
167+
setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
168+
if (flags & RendererStyleFlags2.DashCase) {
169+
el.style.setProperty(
170+
style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : '');
171171
} else {
172172
el.style[style] = value;
173173
}
174174
}
175175

176-
removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
177-
if (hasVendorPrefix) {
176+
removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
177+
if (flags & RendererStyleFlags2.DashCase) {
178178
el.style.removeProperty(style);
179179
} else {
180180
// IE requires '' instead of null

‎packages/platform-server/src/server_renderer.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {DomElementSchemaRegistry} from '@angular/compiler';
10-
import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
10+
import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
1111
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';
1212

1313
const EMPTY_ARRAY: any[] = [];
@@ -127,12 +127,11 @@ class DefaultServerRenderer2 implements Renderer2 {
127127

128128
removeClass(el: any, name: string): void { getDOM().removeClass(el, name); }
129129

130-
setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
131-
void {
130+
setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
132131
getDOM().setStyle(el, style, value);
133132
}
134133

135-
removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
134+
removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
136135
getDOM().removeStyle(el, style);
137136
}
138137

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer} from '@angular/core';
9+
import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from '@angular/core';
1010

1111
import {MessageBus} from '../shared/message_bus';
1212
import {EVENT_2_CHANNEL, RENDERER_2_CHANNEL} from '../shared/messaging_api';
@@ -48,7 +48,7 @@ export class MessageBasedRenderer2 {
4848
['setAttribute', this.setAttribute, RSO, RSO, P, P, P],
4949
['removeAttribute', this.removeAttribute, RSO, RSO, P, P],
5050
['addClass', this.addClass, RSO, RSO, P], ['removeClass', this.removeClass, RSO, RSO, P],
51-
['setStyle', this.setStyle, RSO, RSO, P, P, P, P],
51+
['setStyle', this.setStyle, RSO, RSO, P, P, P],
5252
['removeStyle', this.removeStyle, RSO, RSO, P, P],
5353
['setProperty', this.setProperty, RSO, RSO, P, P], ['setValue', this.setValue, RSO, RSO, P],
5454
['listen', this.listen, RSO, RSO, P, P, P], ['unlisten', this.unlisten, RSO, RSO],
@@ -118,14 +118,12 @@ export class MessageBasedRenderer2 {
118118

119119
private removeClass(r: Renderer2, el: any, name: string) { r.removeClass(el, name); }
120120

121-
private setStyle(
122-
r: Renderer2, el: any, style: string, value: any, hasVendorPrefix: boolean,
123-
hasImportant: boolean) {
124-
r.setStyle(el, style, value, hasVendorPrefix, hasImportant);
121+
private setStyle(r: Renderer2, el: any, style: string, value: any, flags: RendererStyleFlags2) {
122+
r.setStyle(el, style, value, flags);
125123
}
126124

127-
private removeStyle(r: Renderer2, el: any, style: string, hasVendorPrefix: boolean) {
128-
r.removeStyle(el, style, hasVendorPrefix);
125+
private removeStyle(r: Renderer2, el: any, style: string, flags: RendererStyleFlags2) {
126+
r.removeStyle(el, style, flags);
129127
}
130128

131129
private setProperty(r: Renderer2, el: any, name: string, value: any) {

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
9+
import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
1010

1111
import {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from '../shared/client_message_broker';
1212
import {MessageBus} from '../shared/message_bus';
@@ -240,22 +240,20 @@ export class WebWorkerRenderer2 implements Renderer2 {
240240
]);
241241
}
242242

243-
setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
244-
void {
243+
setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
245244
this.callUIWithRenderer('setStyle', [
246245
new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
247246
new FnArg(style),
248247
new FnArg(value),
249-
new FnArg(hasVendorPrefix),
250-
new FnArg(hasImportant),
248+
new FnArg(flags),
251249
]);
252250
}
253251

254-
removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
252+
removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
255253
this.callUIWithRenderer('removeStyle', [
256254
new FnArg(el, SerializerTypes.RENDER_STORE_OBJECT),
257255
new FnArg(style),
258-
new FnArg(hasVendorPrefix),
256+
new FnArg(flags),
259257
]);
260258
}
261259

0 commit comments

Comments
 (0)