Skip to content

Commit c016e2c

Browse files
matskoalxhub
matsko
authored and
alxhub
committed
refactor(ivy): migrate all host-specific styling instructions to element-level styling instructions (angular#30336)
This patch removes all host-specific styling instructions in favor of using element-level instructions instead. Because of the previous patches that made sure `select(n)` worked between styling calls, all host level instructions are not needed anymore. This patch changes each of those instruction calls to use any of the `elementStyling*`, `elementStyle*` and `elementClass*` styling instructions instead. PR Close angular#30336
1 parent 452f121 commit c016e2c

File tree

17 files changed

+213
-400
lines changed

17 files changed

+213
-400
lines changed

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

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

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1105,14 +1105,14 @@ describe('compiler compliance: styling', () => {
11051105
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
11061106
if (rf & 1) {
11071107
$r3$.ɵɵelementHostAttrs($e0_attrs$);
1108-
$r3$.ɵɵelementHostStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
1108+
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
11091109
}
11101110
if (rf & 2) {
1111-
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
1112-
$r3$.ɵɵelementHostClassMap(ctx.myClass);
1113-
$r3$.ɵɵelementHostStyleProp(0, ctx.myColorProp);
1114-
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
1115-
$r3$.ɵɵelementHostStylingApply();
1111+
$r3$.ɵɵelementStyleMap(ctx.myStyle);
1112+
$r3$.ɵɵelementClassMap(ctx.myClass);
1113+
$r3$.ɵɵelementStyleProp(0, ctx.myColorProp);
1114+
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
1115+
$r3$.ɵɵelementStylingApply();
11161116
}
11171117
},
11181118
consts: 0,
@@ -1166,16 +1166,16 @@ describe('compiler compliance: styling', () => {
11661166
…
11671167
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
11681168
if (rf & 1) {
1169-
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
1169+
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
11701170
}
11711171
if (rf & 2) {
1172-
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
1173-
$r3$.ɵɵelementHostClassMap(ctx.myClasses);
1174-
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeightProp, "pt");
1175-
$r3$.ɵɵelementHostStyleProp(1, ctx.myWidthProp);
1176-
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass);
1177-
$r3$.ɵɵelementHostClassProp(1, ctx.myFooClass);
1178-
$r3$.ɵɵelementHostStylingApply();
1172+
$r3$.ɵɵelementStyleMap(ctx.myStyle);
1173+
$r3$.ɵɵelementClassMap(ctx.myClasses);
1174+
$r3$.ɵɵelementStyleProp(0, ctx.myHeightProp, "pt");
1175+
$r3$.ɵɵelementStyleProp(1, ctx.myWidthProp);
1176+
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
1177+
$r3$.ɵɵelementClassProp(1, ctx.myFooClass);
1178+
$r3$.ɵɵelementStylingApply();
11791179
}
11801180
},
11811181
consts: 0,
@@ -1250,14 +1250,14 @@ describe('compiler compliance: styling', () => {
12501250
…
12511251
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
12521252
if (rf & 1) {
1253-
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
1253+
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
12541254
}
12551255
if (rf & 2) {
1256-
$r3$.ɵɵelementHostStyleMap(ctx.myStyleExp);
1257-
$r3$.ɵɵelementHostClassMap(ctx.myClassExp);
1258-
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidthExp, null, true);
1259-
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClassExp, true);
1260-
$r3$.ɵɵelementHostStylingApply();
1256+
$r3$.ɵɵelementStyleMap(ctx.myStyleExp);
1257+
$r3$.ɵɵelementClassMap(ctx.myClassExp);
1258+
$r3$.ɵɵelementStyleProp(0, ctx.myWidthExp, null, true);
1259+
$r3$.ɵɵelementClassProp(0, ctx.myFooClassExp, true);
1260+
$r3$.ɵɵelementStylingApply();
12611261
}
12621262
},
12631263
`;
@@ -1319,33 +1319,33 @@ describe('compiler compliance: styling', () => {
13191319
…
13201320
function ClassDirective_HostBindings(rf, ctx, elIndex) {
13211321
if (rf & 1) {
1322-
$r3$.ɵɵelementHostStyling();
1322+
$r3$.ɵɵelementStyling();
13231323
}
13241324
if (rf & 2) {
1325-
$r3$.ɵɵelementHostClassMap(ctx.myClassMap);
1326-
$r3$.ɵɵelementHostStylingApply();
1325+
$r3$.ɵɵelementClassMap(ctx.myClassMap);
1326+
$r3$.ɵɵelementStylingApply();
13271327
}
13281328
}
13291329
…
13301330
function WidthDirective_HostBindings(rf, ctx, elIndex) {
13311331
if (rf & 1) {
1332-
$r3$.ɵɵelementHostStyling($widthDir_classes$, $widthDir_styles$);
1332+
$r3$.ɵɵelementStyling($widthDir_classes$, $widthDir_styles$);
13331333
}
13341334
if (rf & 2) {
1335-
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidth);
1336-
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
1337-
$r3$.ɵɵelementHostStylingApply();
1335+
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
1336+
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
1337+
$r3$.ɵɵelementStylingApply();
13381338
}
13391339
}
13401340
…
13411341
function HeightDirective_HostBindings(rf, ctx, elIndex) {
13421342
if (rf & 1) {
1343-
$r3$.ɵɵelementHostStyling($heightDir_classes$, $heightDir_styles$);
1343+
$r3$.ɵɵelementStyling($heightDir_classes$, $heightDir_styles$);
13441344
}
13451345
if (rf & 2) {
1346-
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeight);
1347-
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass);
1348-
$r3$.ɵɵelementHostStylingApply();
1346+
$r3$.ɵɵelementStyleProp(0, ctx.myHeight);
1347+
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
1348+
$r3$.ɵɵelementStylingApply();
13491349
}
13501350
}
13511351
…
@@ -1401,14 +1401,14 @@ describe('compiler compliance: styling', () => {
14011401
if (rf & 1) {
14021402
$r3$.ɵɵallocHostVars(2);
14031403
$r3$.ɵɵelementHostAttrs($_c0$);
1404-
$r3$.ɵɵelementHostStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
1404+
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
14051405
}
14061406
if (rf & 2) {
14071407
$r3$.ɵɵproperty("id", ctx.id, null, true);
14081408
$r3$.ɵɵproperty("title", ctx.title, null, true);
1409-
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
1410-
$r3$.ɵɵelementHostClassMap(ctx.myClass);
1411-
$r3$.ɵɵelementHostStylingApply();
1409+
$r3$.ɵɵelementStyleMap(ctx.myStyle);
1410+
$r3$.ɵɵelementClassMap(ctx.myClass);
1411+
$r3$.ɵɵelementStylingApply();
14121412
}
14131413
}
14141414
`;
@@ -1448,14 +1448,14 @@ describe('compiler compliance: styling', () => {
14481448
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
14491449
if (rf & 1) {
14501450
$r3$.ɵɵallocHostVars(2);
1451-
$r3$.ɵɵelementHostStyling($_c0$, $_c1$);
1451+
$r3$.ɵɵelementStyling($_c0$, $_c1$);
14521452
}
14531453
if (rf & 2) {
14541454
$r3$.ɵɵproperty("id", ctx.id, null, true);
14551455
$r3$.ɵɵproperty("title", ctx.title, null, true);
1456-
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidth);
1457-
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
1458-
$r3$.ɵɵelementHostStylingApply();
1456+
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
1457+
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
1458+
$r3$.ɵɵelementStylingApply();
14591459
}
14601460
}
14611461
`;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1777,13 +1777,13 @@ describe('ngtsc behavioral tests', () => {
17771777
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
17781778
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.\u0275\u0275resolveBody);
17791779
i0.\u0275\u0275listener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
1780-
i0.\u0275\u0275elementHostStyling(_c0);
1780+
i0.\u0275\u0275elementStyling(_c0);
17811781
}
17821782
if (rf & 2) {
17831783
i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo));
17841784
i0.\u0275\u0275property("prop", ctx.bar, null, true);
1785-
i0.\u0275\u0275elementHostClassProp(0, ctx.someClass);
1786-
i0.\u0275\u0275elementHostStylingApply();
1785+
i0.\u0275\u0275elementClassProp(0, ctx.someClass);
1786+
i0.\u0275\u0275elementStylingApply();
17871787
}
17881788
}
17891789
`;

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

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -62,23 +62,6 @@ export class Identifiers {
6262

6363
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};
6464

65-
static elementHostStyling: o.ExternalReference = {name: 'ɵɵelementHostStyling', moduleName: CORE};
66-
67-
static elementHostStyleMap:
68-
o.ExternalReference = {name: 'ɵɵelementHostStyleMap', moduleName: CORE};
69-
70-
static elementHostClassMap:
71-
o.ExternalReference = {name: 'ɵɵelementHostClassMap', moduleName: CORE};
72-
73-
static elementHostStyleProp:
74-
o.ExternalReference = {name: 'ɵɵelementHostStyleProp', moduleName: CORE};
75-
76-
static elementHostClassProp:
77-
o.ExternalReference = {name: 'ɵɵelementHostClassProp', moduleName: CORE};
78-
79-
static elementHostStylingApply:
80-
o.ExternalReference = {name: 'ɵɵelementHostStylingApply', moduleName: CORE};
81-
8265
static containerCreate: o.ExternalReference = {name: 'ɵɵcontainer', moduleName: CORE};
8366

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

‎packages/compiler/src/render3/view/styling_builder.ts

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ export class StylingBuilder {
264264
reference: R3.elementHostAttrs,
265265
allocateBindingSlots: 0,
266266
buildParams: () => {
267-
// params => elementHostAttrs(agetDirectiveContext()ttrs)
267+
// params => elementHostAttrs(attrs)
268268
this.populateInitialStylingAttrs(attrs);
269269
const attrArray = !attrs.some(attr => attr instanceof o.WrappedNodeExpr) ?
270270
getConstantLiteralFromArray(constantPool, attrs) :
@@ -284,11 +284,11 @@ export class StylingBuilder {
284284
*/
285285
buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool):
286286
Instruction|null {
287-
const reference = this._directiveExpr ? R3.elementHostStyling : R3.elementStyling;
288287
if (this.hasBindings) {
289288
return {
290289
sourceSpan,
291-
allocateBindingSlots: 0, reference,
290+
allocateBindingSlots: 0,
291+
reference: R3.elementStyling,
292292
buildParams: () => {
293293
// a string array of every style-based binding
294294
const styleBindingProps =
@@ -303,13 +303,8 @@ export class StylingBuilder {
303303
// (otherwise a shorter amount of params will be filled). The code below helps
304304
// determine how many params are required in the expression code.
305305
//
306-
// HOST:
307-
// min params => elementHostStyling()
308-
// max params => elementHostStyling(classBindings, styleBindings, sanitizer)
309-
//
310-
// Template:
311-
// min params => elementStyling()
312-
// max params => elementStyling(classBindings, styleBindings, sanitizer)
306+
// min params => elementStyling()
307+
// max params => elementStyling(classBindings, styleBindings, sanitizer)
313308
//
314309
const params: o.Expression[] = [];
315310
let expectedNumberOfArgs = 0;
@@ -377,14 +372,7 @@ export class StylingBuilder {
377372
totalBindingSlotsRequired += mapValue.expressions.length;
378373
}
379374

380-
const isHostBinding = this._directiveExpr;
381-
let reference: o.ExternalReference;
382-
if (isClassBased) {
383-
reference = isHostBinding ? R3.elementHostClassMap : R3.elementClassMap;
384-
} else {
385-
reference = isHostBinding ? R3.elementHostStyleMap : R3.elementStyleMap;
386-
}
387-
375+
const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap;
388376
return {
389377
sourceSpan: stylingInput.sourceSpan,
390378
reference,
@@ -405,12 +393,8 @@ export class StylingBuilder {
405393
sourceSpan: input.sourceSpan,
406394
allocateBindingSlots: totalBindingSlotsRequired, reference,
407395
buildParams: (convertFn: (value: any) => o.Expression) => {
408-
// HOST:
409-
// min params => elementHostStylingProp(bindingIndex, value)
410-
// max params => elementHostStylingProp(bindingIndex, value, overrideFlag)
411-
// Template:
412-
// min params => elementStylingProp(elmIndex, bindingIndex, value)
413-
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
396+
// min params => elementStylingProp(elmIndex, bindingIndex, value)
397+
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
414398
const params: o.Expression[] = [];
415399
params.push(o.literal(bindingIndex));
416400
params.push(convertFn(value));
@@ -435,30 +419,24 @@ export class StylingBuilder {
435419

436420
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
437421
if (this._singleClassInputs) {
438-
const isHostBinding = !!this._directiveExpr;
439-
const reference = isHostBinding ? R3.elementHostClassProp : R3.elementClassProp;
440422
return this._buildSingleInputs(
441-
reference, this._singleClassInputs, this._classesIndex, false, valueConverter);
423+
R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
442424
}
443425
return [];
444426
}
445427

446428
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
447429
if (this._singleStyleInputs) {
448-
const isHostBinding = !!this._directiveExpr;
449-
const reference = isHostBinding ? R3.elementHostStyleProp : R3.elementStyleProp;
450430
return this._buildSingleInputs(
451-
reference, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
431+
R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
452432
}
453433
return [];
454434
}
455435

456436
private _buildApplyFn(): Instruction {
457-
const isHostBinding = this._directiveExpr;
458-
const reference = isHostBinding ? R3.elementHostStylingApply : R3.elementStylingApply;
459437
return {
460438
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
461-
reference,
439+
reference: R3.elementStylingApply,
462440
allocateBindingSlots: 0,
463441
buildParams: () => { return []; }
464442
};

‎packages/core/src/core_render3_private_export.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,7 @@ export {
116116
ɵɵelementStyleProp,
117117
ɵɵelementStylingApply,
118118
ɵɵelementClassProp,
119-
120119
ɵɵelementHostAttrs,
121-
ɵɵelementHostClassMap,
122-
ɵɵelementHostStyleMap,
123-
ɵɵelementHostStyling,
124-
ɵɵelementHostStyleProp,
125-
ɵɵelementHostClassProp,
126-
ɵɵelementHostStylingApply,
127120

128121
ɵɵselect,
129122
ɵɵtextBinding,

‎packages/core/src/render3/component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ export function renderComponent<T>(
111111
opts: CreateComponentOptions = {}): T {
112112
ngDevMode && publishDefaultGlobalUtils();
113113
ngDevMode && assertComponentType(componentType);
114+
115+
// this is preemptively set to avoid having test and debug code accidentally
116+
// read data from a previous application state...
117+
setActiveHostElement(null);
118+
114119
const rendererFactory = opts.rendererFactory || domRendererFactory3;
115120
const sanitizer = opts.sanitizer || null;
116121
const componentDef = getComponentDef<T>(componentType) !;

‎packages/core/src/render3/index.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,6 @@ export {
4242
ɵɵelementEnd,
4343

4444
ɵɵelementHostAttrs,
45-
ɵɵelementHostClassMap,
46-
ɵɵelementHostClassProp,
47-
ɵɵelementHostStyleMap,
48-
ɵɵelementHostStyleProp,
49-
ɵɵelementHostStyling,
50-
ɵɵelementHostStylingApply,
5145
ɵɵelementProperty,
5246
ɵɵelementStart,
5347
ɵɵelementStyleMap,

‎packages/core/src/render3/instructions/shared.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -560,6 +560,7 @@ export function createDirectivesAndLocals(
560560
instantiateAllDirectives(tView, lView, previousOrParentTNode);
561561
invokeDirectivesHostBindings(tView, lView, previousOrParentTNode);
562562
saveResolvedLocalsInData(lView, previousOrParentTNode, localRefExtractor);
563+
setActiveHostElement(null);
563564
}
564565

565566
/**

0 commit comments

Comments
 (0)