refactor(ivy): break apart stylingMap into styleMap and classMap instructions (#30293)
This patch breaks up the existing `elementStylingMap` into `elementClassMap` and `elementStyleMap` instructions. It also breaks apart `hostStlyingMap` into `hostClassMap` and `hostStyleMap` instructions. This change allows for better tree-shaking and reduces the complexity of the styling algorithm code for `[style]` and `[class]` bindings. PR Close #30293
This commit is contained in:

committed by
Kara Erickson

parent
98a38ec98b
commit
be8fbac942
@ -389,7 +389,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, null, $ctx$.myStyleExp);
|
||||
$r3$.ɵɵelementStyleMap(0, $ctx$.myStyleExp);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -454,7 +454,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, ""));
|
||||
$r3$.ɵɵelementClassMap(0, $r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, ""));
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -468,7 +468,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
|
||||
$r3$.ɵɵelementClassMap(0, $r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -482,7 +482,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $ctx$.exp);
|
||||
$r3$.ɵɵelementClassMap(0, $ctx$.exp);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -538,7 +538,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, null, $ctx$.myStyleExp);
|
||||
$r3$.ɵɵelementStyleMap(0, $ctx$.myStyleExp);
|
||||
$r3$.ɵɵelementStyleProp(0, 0, $ctx$.myWidth);
|
||||
$r3$.ɵɵelementStyleProp(0, 1, $ctx$.myHeight);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
@ -704,7 +704,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0,$ctx$.myClassExp);
|
||||
$r3$.ɵɵelementClassMap(0,$ctx$.myClassExp);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -760,7 +760,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $ctx$.myClassExp);
|
||||
$r3$.ɵɵelementClassMap(0, $ctx$.myClassExp);
|
||||
$r3$.ɵɵelementClassProp(0, 0, $ctx$.yesToApple);
|
||||
$r3$.ɵɵelementClassProp(0, 1, $ctx$.yesToOrange);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
@ -882,7 +882,8 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $ctx$.myClassExp, $ctx$.myStyleExp);
|
||||
$r3$.ɵɵelementStyleMap(0, $ctx$.myStyleExp);
|
||||
$r3$.ɵɵelementClassMap(0, $ctx$.myClassExp);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -919,12 +920,13 @@ describe('compiler compliance: styling', () => {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵɵelementStart(0, "div");
|
||||
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
||||
$r3$.ɵɵpipe(1, "classPipe");
|
||||
$r3$.ɵɵpipe(2, "stylePipe");
|
||||
$r3$.ɵɵpipe(1, "stylePipe");
|
||||
$r3$.ɵɵpipe(2, "classPipe");
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $r3$.ɵɵpipeBind1(1, 0, $ctx$.myClassExp), $r3$.ɵɵpipeBind1(2, 2, $ctx$.myStyleExp));
|
||||
$r3$.ɵɵelementStyleMap(0, $r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp));
|
||||
$r3$.ɵɵelementClassMap(0, $r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp));
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
}
|
||||
}
|
||||
@ -980,7 +982,8 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, $e2_styling$, $r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
|
||||
$r3$.ɵɵelementStyleMap(0, $r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
|
||||
$r3$.ɵɵelementClassMap(0, $e2_styling$);
|
||||
$r3$.ɵɵelementStyleProp(0, 0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000));
|
||||
$r3$.ɵɵelementStyleProp(0, 1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
|
||||
$r3$.ɵɵelementClassProp(0, 0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
|
||||
@ -1042,7 +1045,8 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementHostStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementHostStylingMap(ctx.myClass, ctx.myStyle);
|
||||
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
|
||||
$r3$.ɵɵelementHostClassMap(ctx.myClass);
|
||||
$r3$.ɵɵelementHostStyleProp(0, ctx.myColorProp);
|
||||
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
|
||||
$r3$.ɵɵelementHostStylingApply();
|
||||
@ -1102,7 +1106,8 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementHostStylingMap(ctx.myClasses, ctx.myStyle);
|
||||
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
|
||||
$r3$.ɵɵelementHostClassMap(ctx.myClasses);
|
||||
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeightProp, "pt");
|
||||
$r3$.ɵɵelementHostStyleProp(1, ctx.myWidthProp);
|
||||
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass);
|
||||
@ -1166,7 +1171,8 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementEnd();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementStylingMap(0, ctx.myClassExp, ctx.myStyleExp);
|
||||
$r3$.ɵɵelementStyleMap(0, ctx.myStyleExp);
|
||||
$r3$.ɵɵelementClassMap(0, ctx.myClassExp);
|
||||
$r3$.ɵɵelementStyleProp(0, 0, ctx.myHeightExp, null, true);
|
||||
$r3$.ɵɵelementClassProp(0, 0, ctx.myBarClassExp, true);
|
||||
$r3$.ɵɵelementStylingApply(0);
|
||||
@ -1183,7 +1189,8 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementHostStylingMap(ctx.myClassExp, ctx.myStyleExp);
|
||||
$r3$.ɵɵelementHostStyleMap(ctx.myStyleExp);
|
||||
$r3$.ɵɵelementHostClassMap(ctx.myClassExp);
|
||||
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidthExp, null, true);
|
||||
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClassExp, true);
|
||||
$r3$.ɵɵelementHostStylingApply();
|
||||
@ -1251,7 +1258,7 @@ describe('compiler compliance: styling', () => {
|
||||
$r3$.ɵɵelementHostStyling();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵelementHostStylingMap(ctx.myClassMap);
|
||||
$r3$.ɵɵelementHostClassMap(ctx.myClassMap);
|
||||
$r3$.ɵɵelementHostStylingApply();
|
||||
}
|
||||
}
|
||||
@ -1335,7 +1342,8 @@ describe('compiler compliance: styling', () => {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵɵproperty("id", ctx.id, null, true);
|
||||
$r3$.ɵɵproperty("title", ctx.title, null, true);
|
||||
$r3$.ɵɵelementHostStylingMap(ctx.myClass, ctx.myStyle);
|
||||
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
|
||||
$r3$.ɵɵelementHostClassMap(ctx.myClass);
|
||||
$r3$.ɵɵelementHostStylingApply();
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user