Skip to content

Commit d8665e6

Browse files
matskoalxhub
authored andcommitted
refactor(ivy): drop element prefixes for all styling-related instructions (angular#30318)
This is the final patch to migrate the Angular styling code to have a smaller instruction set in preparation for the runtime refactor. All styling-related instructions now work both in template and hostBindings functions and do not use `element` as a prefix for their names: BEFORE: elementStyling() elementStyleProp() elementClassProp() elementStyleMap() elementClassMap() elementStylingApply() AFTER: styling() styleProp() classProp() styleMap() classMap() stylingApply() PR Close angular#30318
1 parent c016e2c commit d8665e6

25 files changed

+386
-391
lines changed

modules/benchmarks/src/tree/render3_function/index.ts

Lines changed: 4 additions & 4 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 {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵtext, ɵɵtextBinding} from '@angular/core';
9+
import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵtext, ɵɵtextBinding} from '@angular/core';
1010

1111
import {bindAction, profile} from '../../util';
1212
import {createDom, destroyDom, detectChanges} from '../render3/tree';
@@ -38,7 +38,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
3838
ɵɵelementStart(0, 'tree');
3939
{
4040
ɵɵelementStart(1, 'span');
41-
ɵɵelementStyling(null, c1);
41+
ɵɵstyling(null, c1);
4242
{ ɵɵtext(2); }
4343
ɵɵelementEnd();
4444
ɵɵcontainer(3);
@@ -48,8 +48,8 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
4848
}
4949
if (rf & ɵRenderFlags.Update) {
5050
ɵɵselect(1);
51-
ɵɵelementStyleProp(0, ctx.depth % 2 ? '' : 'grey');
52-
ɵɵelementStyling();
51+
ɵɵstyleProp(0, ctx.depth % 2 ? '' : 'grey');
52+
ɵɵstyling();
5353
ɵɵselect(2);
5454
ɵɵtextBinding(2, ɵɵinterpolation1(' ', ctx.value, ' '));
5555
ɵɵcontainerRefreshStart(3);

packages/common/src/directives/ng_class.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
8+
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵclassMap, ɵɵdefineDirective, ɵɵstyling, ɵɵstylingApply} from '@angular/core';
99

1010
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
1111

@@ -35,11 +35,11 @@ export const ngClassDirectiveDef__POST_R3__ = ɵɵdefineDirective({
3535
factory: () => {},
3636
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
3737
if (rf & ɵRenderFlags.Create) {
38-
ɵɵelementStyling();
38+
ɵɵstyling();
3939
}
4040
if (rf & ɵRenderFlags.Update) {
41-
ɵɵelementClassMap(ctx.getValue());
42-
ɵɵelementStylingApply();
41+
ɵɵclassMap(ctx.getValue());
42+
ɵɵstylingApply();
4343
}
4444
}
4545
});

packages/common/src/directives/ng_style.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementStyleMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
8+
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵstyleMap, ɵɵstyling, ɵɵstylingApply} from '@angular/core';
99

1010
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
1111

@@ -35,11 +35,11 @@ export const ngStyleDirectiveDef__POST_R3__ = ɵɵdefineDirective({
3535
factory: () => {},
3636
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
3737
if (rf & ɵRenderFlags.Create) {
38-
ɵɵelementStyling();
38+
ɵɵstyling();
3939
}
4040
if (rf & ɵRenderFlags.Update) {
41-
ɵɵelementStyleMap(ctx.getValue());
42-
ɵɵelementStylingApply();
41+
ɵɵstyleMap(ctx.getValue());
42+
ɵɵstylingApply();
4343
}
4444
}
4545
});

packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -502,14 +502,14 @@ describe('compiler compliance', () => {
502502
template: function MyComponent_Template(rf,ctx){
503503
if (rf & 1) {
504504
$r3$.ɵɵelementStart(0, "div");
505-
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$);
505+
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$);
506506
$r3$.ɵɵelementEnd();
507507
}
508508
if (rf & 2) {
509509
$r3$.ɵɵselect(0);
510-
$r3$.ɵɵelementStyleProp(0, ctx.color);
511-
$r3$.ɵɵelementClassProp(0, ctx.error);
512-
$r3$.ɵɵelementStylingApply();
510+
$r3$.ɵɵstyleProp(0, ctx.color);
511+
$r3$.ɵɵclassProp(0, ctx.error);
512+
$r3$.ɵɵstylingApply();
513513
}
514514
},
515515
encapsulation: 2

packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2715,7 +2715,7 @@ describe('i18n support in the view compiler', () => {
27152715
$r3$.ɵɵi18nStart(1, $I18N_0$);
27162716
$r3$.ɵɵelement(2, "b");
27172717
$r3$.ɵɵelementStart(3, "div");
2718-
$r3$.ɵɵelementStyling($_c2$);
2718+
$r3$.ɵɵstyling($_c2$);
27192719
$r3$.ɵɵelement(4, "i");
27202720
$r3$.ɵɵelementEnd();
27212721
$r3$.ɵɵi18nEnd();

0 commit comments

Comments
 (0)