Skip to content

Commit 8714daf

Browse files
matskomatsko
committed
fix(ivy): introduce host-specific styling instructions (angular#29292)
This patch is the first of a few patches which separates the styling logic between template bindings (e.g. <div [style]) from host bindings (e.g. @HostBinding('style')). This patch in particular introduces a series of host-specific styling instructions and changes the existing set of template styling instructions not to accept directives. The underyling code (which communicates with the styling algorithm) still works as it did before. This PR also separates the styling instruction code into a separate file and moves over all other instructions into an dedicated instructions directory. PR Close angular#29292
1 parent d5e3f2c commit 8714daf

23 files changed

+733
-429
lines changed

‎integration/_payload-limits.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"master": {
1313
"uncompressed": {
1414
"runtime": 1440,
15-
"main": 13921,
15+
"main": 14106,
1616
"polyfills": 38390
1717
}
1818
}

‎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, ɵelementStyling, ɵelementStylingApply, ɵelementStylingMap} from '@angular/core';
8+
import {Directive, DoCheck, Input, ɵRenderFlags, ɵdefineDirective, ɵelementHostStyling, ɵelementHostStylingApply, ɵelementHostStylingMap} 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(null, null, null, ctx);
38+
ɵelementHostStyling();
3939
}
4040
if (rf & ɵRenderFlags.Update) {
41-
ɵelementStylingMap(elIndex, ctx.getValue(), null, ctx);
42-
ɵelementStylingApply(elIndex, ctx);
41+
ɵelementHostStylingMap(ctx.getValue());
42+
ɵelementHostStylingApply();
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, ɵelementStyling, ɵelementStylingApply, ɵelementStylingMap} from '@angular/core';
8+
import {Directive, DoCheck, Input, ɵRenderFlags, ɵdefineDirective, ɵelementHostStyling, ɵelementHostStylingApply, ɵelementHostStylingMap} 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(null, null, null, ctx);
38+
ɵelementHostStyling();
3939
}
4040
if (rf & ɵRenderFlags.Update) {
41-
ɵelementStylingMap(elIndex, null, ctx.getValue(), ctx);
42-
ɵelementStylingApply(elIndex, ctx);
41+
ɵelementHostStylingMap(null, ctx.getValue());
42+
ɵelementHostStylingApply();
4343
}
4444
}
4545
});

‎packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ describe('compiler compliance: bindings', () => {
347347
factory: function HostAttributeDir_Factory(t) { return new (t || HostAttributeDir)(); },
348348
hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
349349
if (rf & 1) {
350-
$r3$.ɵelementHostAttrs(ctx, $c0$);
350+
$r3$.ɵelementHostAttrs($c0$);
351351
}
352352
}
353353
});
@@ -405,7 +405,7 @@ describe('compiler compliance: bindings', () => {
405405
factory: function HostAttributeComp_Factory(t) { return new (t || HostAttributeComp)(); },
406406
hostBindings: function HostAttributeComp_HostBindings(rf, ctx, elIndex) {
407407
if (rf & 1) {
408-
$r3$.ɵelementHostAttrs(ctx, $c0$);
408+
$r3$.ɵelementHostAttrs($c0$);
409409
…
410410
}
411411
…
@@ -417,7 +417,7 @@ describe('compiler compliance: bindings', () => {
417417
factory: function HostAttributeDir_Factory(t) { return new (t || HostAttributeDir)(); },
418418
hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
419419
if (rf & 1) {
420-
$r3$.ɵelementHostAttrs(ctx, $c1$);
420+
$r3$.ɵelementHostAttrs($c1$);
421421
…
422422
}
423423
…

‎packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -985,14 +985,14 @@ describe('compiler compliance: styling', () => {
985985
…
986986
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
987987
if (rf & 1) {
988-
$r3$.ɵelementHostAttrs(ctx, $e0_attrs$);
989-
$r3$.ɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵdefaultStyleSanitizer, ctx);
988+
$r3$.ɵelementHostAttrs($e0_attrs$);
989+
$r3$.ɵelementHostStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵdefaultStyleSanitizer);
990990
}
991991
if (rf & 2) {
992-
$r3$.ɵelementStylingMap(elIndex, ctx.myClass, ctx.myStyle, ctx);
993-
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myColorProp, null, ctx);
994-
$r3$.ɵelementClassProp(elIndex, 0, ctx.myFooClass, ctx);
995-
$r3$.ɵelementStylingApply(elIndex, ctx);
992+
$r3$.ɵelementHostStylingMap(ctx.myClass, ctx.myStyle);
993+
$r3$.ɵelementHostStyleProp(0, ctx.myColorProp);
994+
$r3$.ɵelementHostClassProp(0, ctx.myFooClass);
995+
$r3$.ɵelementHostStylingApply();
996996
}
997997
},
998998
consts: 0,
@@ -1046,15 +1046,15 @@ describe('compiler compliance: styling', () => {
10461046
…
10471047
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
10481048
if (rf & 1) {
1049-
$r3$.ɵelementStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer, ctx);
1049+
$r3$.ɵelementHostStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer);
10501050
}
10511051
if (rf & 2) {
1052-
$r3$.ɵelementStylingMap(elIndex, ctx.myClasses, ctx.myStyle, ctx);
1053-
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myHeightProp, "pt", ctx);
1054-
$r3$.ɵelementStyleProp(elIndex, 1, ctx.myWidthProp, null, ctx);
1055-
$r3$.ɵelementClassProp(elIndex, 0, ctx.myBarClass, ctx);
1056-
$r3$.ɵelementClassProp(elIndex, 1, ctx.myFooClass, ctx);
1057-
$r3$.ɵelementStylingApply(elIndex, ctx);
1052+
$r3$.ɵelementHostStylingMap(ctx.myClasses, ctx.myStyle);
1053+
$r3$.ɵelementHostStyleProp(0, ctx.myHeightProp, "pt");
1054+
$r3$.ɵelementHostStyleProp(1, ctx.myWidthProp);
1055+
$r3$.ɵelementHostClassProp(0, ctx.myBarClass);
1056+
$r3$.ɵelementHostClassProp(1, ctx.myFooClass);
1057+
$r3$.ɵelementHostStylingApply();
10581058
}
10591059
},
10601060
consts: 0,
@@ -1115,7 +1115,7 @@ describe('compiler compliance: styling', () => {
11151115
if (rf & 2) {
11161116
$r3$.ɵelementStylingMap(0, ctx.myClassExp, ctx.myStyleExp);
11171117
$r3$.ɵelementStyleProp(0, 0, ctx.myHeightExp, null, true);
1118-
$r3$.ɵelementClassProp(0, 0, ctx.myBarClassExp, null, true);
1118+
$r3$.ɵelementClassProp(0, 0, ctx.myBarClassExp, true);
11191119
$r3$.ɵelementStylingApply(0);
11201120
}
11211121
},
@@ -1127,13 +1127,13 @@ describe('compiler compliance: styling', () => {
11271127
…
11281128
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
11291129
if (rf & 1) {
1130-
$r3$.ɵelementStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer, ctx);
1130+
$r3$.ɵelementHostStyling(_c0, _c1, $r3$.ɵdefaultStyleSanitizer);
11311131
}
11321132
if (rf & 2) {
1133-
$r3$.ɵelementStylingMap(elIndex, ctx.myClassExp, ctx.myStyleExp, ctx);
1134-
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myWidthExp, null, ctx, true);
1135-
$r3$.ɵelementClassProp(elIndex, 0, ctx.myFooClassExp, ctx, true);
1136-
$r3$.ɵelementStylingApply(elIndex, ctx);
1133+
$r3$.ɵelementHostStylingMap(ctx.myClassExp, ctx.myStyleExp);
1134+
$r3$.ɵelementHostStyleProp(0, ctx.myWidthExp, null, true);
1135+
$r3$.ɵelementHostClassProp(0, ctx.myFooClassExp, true);
1136+
$r3$.ɵelementHostStylingApply();
11371137
}
11381138
},
11391139
`;
@@ -1195,33 +1195,33 @@ describe('compiler compliance: styling', () => {
11951195
…
11961196
function ClassDirective_HostBindings(rf, ctx, elIndex) {
11971197
if (rf & 1) {
1198-
$r3$.ɵelementStyling(null, null, null, ctx);
1198+
$r3$.ɵelementHostStyling();
11991199
}
12001200
if (rf & 2) {
1201-
$r3$.ɵelementStylingMap(elIndex, ctx.myClassMap, null, ctx);
1202-
$r3$.ɵelementStylingApply(elIndex, ctx);
1201+
$r3$.ɵelementHostStylingMap(ctx.myClassMap);
1202+
$r3$.ɵelementHostStylingApply();
12031203
}
12041204
}
12051205
…
12061206
function WidthDirective_HostBindings(rf, ctx, elIndex) {
12071207
if (rf & 1) {
1208-
$r3$.ɵelementStyling($widthDir_classes$, $widthDir_styles$, null, ctx);
1208+
$r3$.ɵelementHostStyling($widthDir_classes$, $widthDir_styles$);
12091209
}
12101210
if (rf & 2) {
1211-
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myWidth, null, ctx);
1212-
$r3$.ɵelementClassProp(elIndex, 0, ctx.myFooClass, ctx);
1213-
$r3$.ɵelementStylingApply(elIndex, ctx);
1211+
$r3$.ɵelementHostStyleProp(0, ctx.myWidth);
1212+
$r3$.ɵelementHostClassProp(0, ctx.myFooClass);
1213+
$r3$.ɵelementHostStylingApply();
12141214
}
12151215
}
12161216
…
12171217
function HeightDirective_HostBindings(rf, ctx, elIndex) {
12181218
if (rf & 1) {
1219-
$r3$.ɵelementStyling($heightDir_classes$, $heightDir_styles$, null, ctx);
1219+
$r3$.ɵelementHostStyling($heightDir_classes$, $heightDir_styles$);
12201220
}
12211221
if (rf & 2) {
1222-
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myHeight, null, ctx);
1223-
$r3$.ɵelementClassProp(elIndex, 0, ctx.myBarClass, ctx);
1224-
$r3$.ɵelementStylingApply(elIndex, ctx);
1222+
$r3$.ɵelementHostStyleProp(0, ctx.myHeight);
1223+
$r3$.ɵelementHostClassProp(0, ctx.myBarClass);
1224+
$r3$.ɵelementHostStylingApply();
12251225
}
12261226
}
12271227
…
@@ -1276,14 +1276,14 @@ describe('compiler compliance: styling', () => {
12761276
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
12771277
if (rf & 1) {
12781278
$r3$.ɵallocHostVars(2);
1279-
$r3$.ɵelementHostAttrs(ctx, $_c0$);
1280-
$r3$.ɵelementStyling(null, null, $r3$.ɵdefaultStyleSanitizer, ctx);
1279+
$r3$.ɵelementHostAttrs($_c0$);
1280+
$r3$.ɵelementHostStyling(null, null, $r3$.ɵdefaultStyleSanitizer);
12811281
}
12821282
if (rf & 2) {
12831283
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind(ctx.id), null, true);
12841284
$r3$.ɵelementProperty(elIndex, "title", $r3$.ɵbind(ctx.title), null, true);
1285-
$r3$.ɵelementStylingMap(elIndex, ctx.myClass, ctx.myStyle, ctx);
1286-
$r3$.ɵelementStylingApply(elIndex, ctx);
1285+
$r3$.ɵelementHostStylingMap(ctx.myClass, ctx.myStyle);
1286+
$r3$.ɵelementHostStylingApply();
12871287
}
12881288
}
12891289
`;
@@ -1323,14 +1323,14 @@ describe('compiler compliance: styling', () => {
13231323
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
13241324
if (rf & 1) {
13251325
$r3$.ɵallocHostVars(2);
1326-
$r3$.ɵelementStyling($_c0$, $_c1$, null, ctx);
1326+
$r3$.ɵelementHostStyling($_c0$, $_c1$);
13271327
}
13281328
if (rf & 2) {
13291329
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind(ctx.id), null, true);
13301330
$r3$.ɵelementProperty(elIndex, "title", $r3$.ɵbind(ctx.title), null, true);
1331-
$r3$.ɵelementStyleProp(elIndex, 0, ctx.myWidth, null, ctx);
1332-
$r3$.ɵelementClassProp(elIndex, 0, ctx.myFooClass, ctx);
1333-
$r3$.ɵelementStylingApply(elIndex, ctx);
1331+
$r3$.ɵelementHostStyleProp(0, ctx.myWidth);
1332+
$r3$.ɵelementHostClassProp(0, ctx.myFooClass);
1333+
$r3$.ɵelementHostStylingApply();
13341334
}
13351335
}
13361336
`;

‎packages/compiler-cli/test/ngtsc/ngtsc_spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1594,13 +1594,13 @@ describe('ngtsc behavioral tests', () => {
15941594
i0.ɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
15951595
i0.ɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.ɵresolveBody);
15961596
i0.ɵlistener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
1597-
i0.ɵelementStyling(_c0, null, null, ctx);
1597+
i0.ɵelementHostStyling(_c0);
15981598
}
15991599
if (rf & 2) {
16001600
i0.ɵelementAttribute(elIndex, "hello", i0.ɵbind(ctx.foo));
16011601
i0.ɵelementProperty(elIndex, "prop", i0.ɵbind(ctx.bar), null, true);
1602-
i0.ɵelementClassProp(elIndex, 0, ctx.someClass, ctx);
1603-
i0.ɵelementStylingApply(elIndex, ctx);
1602+
i0.ɵelementHostClassProp(0, ctx.someClass);
1603+
i0.ɵelementHostStylingApply();
16041604
}
16051605
}
16061606
`;
@@ -1629,7 +1629,7 @@ describe('ngtsc behavioral tests', () => {
16291629
`);
16301630
env.driveMain();
16311631
const jsContents = env.getContents('test.js');
1632-
expect(jsContents).toContain('i0.ɵelementHostAttrs(ctx, ["test", test])');
1632+
expect(jsContents).toContain('i0.ɵelementHostAttrs(["test", test])');
16331633
});
16341634

16351635
it('should accept enum values as host bindings', () => {
@@ -3107,8 +3107,8 @@ describe('ngtsc behavioral tests', () => {
31073107
describe('listLazyRoutes()', () => {
31083108
// clang-format off
31093109
const lazyRouteMatching = (
3110-
route: string, fromModulePath: RegExp, fromModuleName: string, toModulePath: RegExp,
3111-
toModuleName: string) => {
3110+
route: string, fromModulePath: RegExp, fromModuleName: string, toModulePath: RegExp,
3111+
toModuleName: string) => {
31123112
return {
31133113
route,
31143114
module: jasmine.objectContaining({

‎packages/compiler/src/render3/r3_identifiers.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,29 @@ export class Identifiers {
5151

5252
static elementStyling: o.ExternalReference = {name: 'ɵelementStyling', moduleName: CORE};
5353

54-
static elementHostAttrs: o.ExternalReference = {name: 'ɵelementHostAttrs', moduleName: CORE};
55-
5654
static elementStylingMap: o.ExternalReference = {name: 'ɵelementStylingMap', moduleName: CORE};
5755

5856
static elementStyleProp: o.ExternalReference = {name: 'ɵelementStyleProp', moduleName: CORE};
5957

6058
static elementStylingApply:
6159
o.ExternalReference = {name: 'ɵelementStylingApply', moduleName: CORE};
6260

61+
static elementHostAttrs: o.ExternalReference = {name: 'ɵelementHostAttrs', moduleName: CORE};
62+
63+
static elementHostStyling: o.ExternalReference = {name: 'ɵelementHostStyling', moduleName: CORE};
64+
65+
static elementHostStylingMap:
66+
o.ExternalReference = {name: 'ɵelementHostStylingMap', moduleName: CORE};
67+
68+
static elementHostStyleProp:
69+
o.ExternalReference = {name: 'ɵelementHostStyleProp', moduleName: CORE};
70+
71+
static elementHostClassProp:
72+
o.ExternalReference = {name: 'ɵelementHostClassProp', moduleName: CORE};
73+
74+
static elementHostStylingApply:
75+
o.ExternalReference = {name: 'ɵelementHostStylingApply', moduleName: CORE};
76+
6377
static containerCreate: o.ExternalReference = {name: 'ɵcontainer', moduleName: CORE};
6478

6579
static nextContext: o.ExternalReference = {name: 'ɵnextContext', moduleName: CORE};

0 commit comments

Comments
 (0)