iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ivy): drop `element` prefixes for all styling-related instructions (#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 #30318
This commit is contained in:
Matias Niemelä 2019-05-08 11:26:40 -07:00 committed by Alex Rickabaugh
parent c016e2c4ec
commit d8665e639b
25 changed files with 386 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/benchmarks/src/tree/render3_function/index.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵtext, ɵɵtextBinding} from '@angular/core';
import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵtext, ɵɵtextBinding} from '@angular/core';
import {bindAction, profile} from '../../util';
import {createDom, destroyDom, detectChanges} from '../render3/tree';
@ -38,7 +38,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
ɵɵelementStart(0, 'tree');
{
ɵɵelementStart(1, 'span');
ɵɵelementStyling(null, c1);
ɵɵstyling(null, c1);
{ ɵɵtext(2); }
ɵɵelementEnd();
ɵɵcontainer(3);
@ -48,8 +48,8 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
}
if (rf & ɵRenderFlags.Update) {
ɵɵselect(1);
ɵɵelementStyleProp(0, ctx.depth % 2 ? '' : 'grey');
ɵɵelementStyling();
ɵɵstyleProp(0, ctx.depth % 2 ? '' : 'grey');
ɵɵstyling();
ɵɵselect(2);
ɵɵtextBinding(2, ɵɵinterpolation1(' ', ctx.value, ' '));
ɵɵcontainerRefreshStart(3);

8
packages/common/src/directives/ng_class.ts
View File

@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵclassMap, ɵɵdefineDirective, ɵɵstyling, ɵɵstylingApply} from '@angular/core';
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
@ -35,11 +35,11 @@ export const ngClassDirectiveDef__POST_R3__ = ɵɵdefineDirective({
factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) {
ɵɵelementStyling();
ɵɵstyling();
}
if (rf & ɵRenderFlags.Update) {
ɵɵelementClassMap(ctx.getValue());
ɵɵelementStylingApply();
ɵɵclassMap(ctx.getValue());
ɵɵstylingApply();
}
}
});

8
packages/common/src/directives/ng_style.ts
View File

@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementStyleMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵstyleMap, ɵɵstyling, ɵɵstylingApply} from '@angular/core';
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
@ -35,11 +35,11 @@ export const ngStyleDirectiveDef__POST_R3__ = ɵɵdefineDirective({
factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) {
ɵɵelementStyling();
ɵɵstyling();
}
if (rf & ɵRenderFlags.Update) {
ɵɵelementStyleMap(ctx.getValue());
ɵɵelementStylingApply();
ɵɵstyleMap(ctx.getValue());
ɵɵstylingApply();
}
}
});

8
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -502,14 +502,14 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf,ctx){
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$);
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleProp(0, ctx.color);
$r3$.ɵɵelementClassProp(0, ctx.error);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, ctx.color);
$r3$.ɵɵclassProp(0, ctx.error);
$r3$.ɵɵstylingApply();
}
},
encapsulation: 2

2
packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
View File

@ -2715,7 +2715,7 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵɵi18nStart(1, $I18N_0$);
$r3$.ɵɵelement(2, "b");
$r3$.ɵɵelementStart(3, "div");
$r3$.ɵɵelementStyling($_c2$);
$r3$.ɵɵstyling($_c2$);
$r3$.ɵɵelement(4, "i");
$r3$.ɵɵelementEnd();
$r3$.ɵɵi18nEnd();

202
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -385,13 +385,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleMap($ctx$.myStyleExp);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap($ctx$.myStyleExp);
$r3$.ɵɵstylingApply();
}
}
`;
@ -451,13 +451,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponentWithInterpolation_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling();
$r3$.ɵɵstyling();
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementClassMap($r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, ""));
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassMap($r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, ""));
$r3$.ɵɵstylingApply();
}
}
…
@ -466,13 +466,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponentWithMuchosInterpolation_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling();
$r3$.ɵɵstyling();
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementClassMap($r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassMap($r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
$r3$.ɵɵstylingApply();
}
}
…
@ -481,13 +481,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponentWithoutInterpolation_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling();
$r3$.ɵɵstyling();
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementClassMap($ctx$.exp);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassMap($ctx$.exp);
$r3$.ɵɵstylingApply();
}
}
`;
@ -538,15 +538,15 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div", $_c0$);
$r3$.ɵɵelementStyling(null, $_c1$, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(null, $_c1$, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleMap($ctx$.myStyleExp);
$r3$.ɵɵelementStyleProp(0, $ctx$.myWidth);
$r3$.ɵɵelementStyleProp(1, $ctx$.myHeight);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap($ctx$.myStyleExp);
$r3$.ɵɵstyleProp(0, $ctx$.myWidth);
$r3$.ɵɵstyleProp(1, $ctx$.myHeight);
$r3$.ɵɵstylingApply();
$r3$.ɵɵelementAttribute(0, "style", $r3$.ɵɵbind("border-width: 10px"), $r3$.ɵɵsanitizeStyle);
}
},
@ -598,13 +598,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling(null, _c0, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(null, _c0, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleProp(0, ctx.myImage);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, ctx.myImage);
$r3$.ɵɵstylingApply();
}
},
encapsulation: 2
@ -640,13 +640,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling(null, _c0);
$r3$.ɵɵstyling(null, _c0);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleProp(0, 12, "px");
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, 12, "px");
$r3$.ɵɵstylingApply();
}
}
`;
@ -676,7 +676,7 @@ describe('compiler compliance: styling', () => {
};
const result = compile(files, angularFiles);
expect(result.source).not.toContain('elementStyling');
expect(result.source).not.toContain('styling');
});
});
@ -706,13 +706,13 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling();
$r3$.ɵɵstyling();
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementClassMap($ctx$.myClassExp);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassMap($ctx$.myClassExp);
$r3$.ɵɵstylingApply();
}
}
`;
@ -763,15 +763,15 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div", $e0_attrs$);
$r3$.ɵɵelementStyling($e0_bindings$);
$r3$.ɵɵstyling($e0_bindings$);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementClassMap($ctx$.myClassExp);
$r3$.ɵɵelementClassProp(0, $ctx$.yesToApple);
$r3$.ɵɵelementClassProp(1, $ctx$.yesToOrange);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassMap($ctx$.myClassExp);
$r3$.ɵɵclassProp(0, $ctx$.yesToApple);
$r3$.ɵɵclassProp(1, $ctx$.yesToOrange);
$r3$.ɵɵstylingApply();
$r3$.ɵɵelementAttribute(0, "class", $r3$.ɵɵbind("banana"));
}
},
@ -854,7 +854,7 @@ describe('compiler compliance: styling', () => {
};
const result = compile(files, angularFiles);
expect(result.source).not.toContain('elementStyling');
expect(result.source).not.toContain('styling');
});
});
@ -885,14 +885,14 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleMap($ctx$.myStyleExp);
$r3$.ɵɵelementClassMap($ctx$.myClassExp);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap($ctx$.myStyleExp);
$r3$.ɵɵclassMap($ctx$.myClassExp);
$r3$.ɵɵstylingApply();
}
}
`;
@ -927,16 +927,16 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵpipe(1, "stylePipe");
$r3$.ɵɵpipe(2, "classPipe");
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleMap($r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp));
$r3$.ɵɵelementClassMap($r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp));
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap($r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp));
$r3$.ɵɵclassMap($r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp));
$r3$.ɵɵstylingApply();
}
}
`;
@ -982,7 +982,7 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵpipe(1, "pipe");
$r3$.ɵɵpipe(2, "pipe");
$r3$.ɵɵpipe(3, "pipe");
@ -992,12 +992,12 @@ describe('compiler compliance: styling', () => {
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleMap($r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
$r3$.ɵɵelementClassMap($e2_styling$);
$r3$.ɵɵelementStyleProp(0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000));
$r3$.ɵɵelementStyleProp(1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
$r3$.ɵɵelementClassProp(0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap($r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
$r3$.ɵɵclassMap($e2_styling$);
$r3$.ɵɵstyleProp(0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000));
$r3$.ɵɵstyleProp(1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
$r3$.ɵɵclassProp(0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
$r3$.ɵɵstylingApply();
$r3$.ɵɵselect(5);
$r3$.ɵɵtextBinding(5, $r3$.ɵɵinterpolation1(" ", $ctx$.item, ""));
}
@ -1042,17 +1042,17 @@ describe('compiler compliance: styling', () => {
…
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleProp(0, $ctx$.w1);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, $ctx$.w1);
$r3$.ɵɵstylingApply();
$r3$.ɵɵselect(1);
$r3$.ɵɵelementStyleProp(0, $ctx$.h1);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, $ctx$.h1);
$r3$.ɵɵstylingApply();
$r3$.ɵɵselect(2);
$r3$.ɵɵelementClassProp(0, $ctx$.a1);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassProp(0, $ctx$.a1);
$r3$.ɵɵstylingApply();
$r3$.ɵɵselect(3);
$r3$.ɵɵelementClassProp(0, $ctx$.r1);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassProp(0, $ctx$.r1);
$r3$.ɵɵstylingApply();
}
}
`;
@ -1105,14 +1105,14 @@ describe('compiler compliance: styling', () => {
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostAttrs($e0_attrs$);
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementClassMap(ctx.myClass);
$r3$.ɵɵelementStyleProp(0, ctx.myColorProp);
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap(ctx.myStyle);
$r3$.ɵɵclassMap(ctx.myClass);
$r3$.ɵɵstyleProp(0, ctx.myColorProp);
$r3$.ɵɵclassProp(0, ctx.myFooClass);
$r3$.ɵɵstylingApply();
}
},
consts: 0,
@ -1166,16 +1166,16 @@ describe('compiler compliance: styling', () => {
…
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementClassMap(ctx.myClasses);
$r3$.ɵɵelementStyleProp(0, ctx.myHeightProp, "pt");
$r3$.ɵɵelementStyleProp(1, ctx.myWidthProp);
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementClassProp(1, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap(ctx.myStyle);
$r3$.ɵɵclassMap(ctx.myClasses);
$r3$.ɵɵstyleProp(0, ctx.myHeightProp, "pt");
$r3$.ɵɵstyleProp(1, ctx.myWidthProp);
$r3$.ɵɵclassProp(0, ctx.myBarClass);
$r3$.ɵɵclassProp(1, ctx.myFooClass);
$r3$.ɵɵstylingApply();
}
},
consts: 0,
@ -1230,16 +1230,16 @@ describe('compiler compliance: styling', () => {
function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵelementStyling(_c2, _c3, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(_c2, _c3, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵselect(0);
$r3$.ɵɵelementStyleMap(ctx.myStyleExp);
$r3$.ɵɵelementClassMap(ctx.myClassExp);
$r3$.ɵɵelementStyleProp(0, ctx.myHeightExp, null, true);
$r3$.ɵɵelementClassProp(0, ctx.myBarClassExp, true);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap(ctx.myStyleExp);
$r3$.ɵɵclassMap(ctx.myClassExp);
$r3$.ɵɵstyleProp(0, ctx.myHeightExp, null, true);
$r3$.ɵɵclassProp(0, ctx.myBarClassExp, true);
$r3$.ɵɵstylingApply();
}
},
`;
@ -1250,14 +1250,14 @@ describe('compiler compliance: styling', () => {
…
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵelementStyleMap(ctx.myStyleExp);
$r3$.ɵɵelementClassMap(ctx.myClassExp);
$r3$.ɵɵelementStyleProp(0, ctx.myWidthExp, null, true);
$r3$.ɵɵelementClassProp(0, ctx.myFooClassExp, true);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap(ctx.myStyleExp);
$r3$.ɵɵclassMap(ctx.myClassExp);
$r3$.ɵɵstyleProp(0, ctx.myWidthExp, null, true);
$r3$.ɵɵclassProp(0, ctx.myFooClassExp, true);
$r3$.ɵɵstylingApply();
}
},
`;
@ -1319,33 +1319,33 @@ describe('compiler compliance: styling', () => {
…
function ClassDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementStyling();
$r3$.ɵɵstyling();
}
if (rf & 2) {
$r3$.ɵɵelementClassMap(ctx.myClassMap);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵclassMap(ctx.myClassMap);
$r3$.ɵɵstylingApply();
}
}
…
function WidthDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementStyling($widthDir_classes$, $widthDir_styles$);
$r3$.ɵɵstyling($widthDir_classes$, $widthDir_styles$);
}
if (rf & 2) {
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, ctx.myWidth);
$r3$.ɵɵclassProp(0, ctx.myFooClass);
$r3$.ɵɵstylingApply();
}
}
…
function HeightDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementStyling($heightDir_classes$, $heightDir_styles$);
$r3$.ɵɵstyling($heightDir_classes$, $heightDir_styles$);
}
if (rf & 2) {
$r3$.ɵɵelementStyleProp(0, ctx.myHeight);
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, ctx.myHeight);
$r3$.ɵɵclassProp(0, ctx.myBarClass);
$r3$.ɵɵstylingApply();
}
}
…
@ -1401,14 +1401,14 @@ describe('compiler compliance: styling', () => {
if (rf & 1) {
$r3$.ɵɵallocHostVars(2);
$r3$.ɵɵelementHostAttrs($_c0$);
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵproperty("id", ctx.id, null, true);
$r3$.ɵɵproperty("title", ctx.title, null, true);
$r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementClassMap(ctx.myClass);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleMap(ctx.myStyle);
$r3$.ɵɵclassMap(ctx.myClass);
$r3$.ɵɵstylingApply();
}
}
`;
@ -1448,14 +1448,14 @@ describe('compiler compliance: styling', () => {
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵallocHostVars(2);
$r3$.ɵɵelementStyling($_c0$, $_c1$);
$r3$.ɵɵstyling($_c0$, $_c1$);
}
if (rf & 2) {
$r3$.ɵɵproperty("id", ctx.id, null, true);
$r3$.ɵɵproperty("title", ctx.title, null, true);
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
$r3$.ɵɵstyleProp(0, ctx.myWidth);
$r3$.ɵɵclassProp(0, ctx.myFooClass);
$r3$.ɵɵstylingApply();
}
}
`;

6
packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
View File

@ -1777,13 +1777,13 @@ describe('ngtsc behavioral tests', () => {
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.\u0275\u0275resolveBody);
i0.\u0275\u0275listener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
i0.\u0275\u0275elementStyling(_c0);
i0.\u0275\u0275styling(_c0);
}
if (rf & 2) {
i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo));
i0.\u0275\u0275property("prop", ctx.bar, null, true);
i0.\u0275\u0275elementClassProp(0, ctx.someClass);
i0.\u0275\u0275elementStylingApply();
i0.\u0275\u0275classProp(0, ctx.someClass);
i0.\u0275\u0275stylingApply();
}
}
`;

13
packages/compiler/src/render3/r3_identifiers.ts
View File

@ -41,7 +41,7 @@ export class Identifiers {
static elementAttribute: o.ExternalReference = {name: 'ɵɵelementAttribute', moduleName: CORE};
static elementClassProp: o.ExternalReference = {name: 'ɵɵelementClassProp', moduleName: CORE};
static classProp: o.ExternalReference = {name: 'ɵɵclassProp', moduleName: CORE};
static elementContainerStart:
o.ExternalReference = {name: 'ɵɵelementContainerStart', moduleName: CORE};
@ -49,16 +49,15 @@ export class Identifiers {
static elementContainerEnd:
o.ExternalReference = {name: 'ɵɵelementContainerEnd', moduleName: CORE};
static elementStyling: o.ExternalReference = {name: 'ɵɵelementStyling', moduleName: CORE};
static styling: o.ExternalReference = {name: 'ɵɵstyling', moduleName: CORE};
static elementStyleMap: o.ExternalReference = {name: 'ɵɵelementStyleMap', moduleName: CORE};
static styleMap: o.ExternalReference = {name: 'ɵɵstyleMap', moduleName: CORE};
static elementClassMap: o.ExternalReference = {name: 'ɵɵelementClassMap', moduleName: CORE};
static classMap: o.ExternalReference = {name: 'ɵɵclassMap', moduleName: CORE};
static elementStyleProp: o.ExternalReference = {name: 'ɵɵelementStyleProp', moduleName: CORE};
static styleProp: o.ExternalReference = {name: 'ɵɵstyleProp', moduleName: CORE};
static elementStylingApply:
o.ExternalReference = {name: 'ɵɵelementStylingApply', moduleName: CORE};
static stylingApply: o.ExternalReference = {name: 'ɵɵstylingApply', moduleName: CORE};
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};

10
packages/compiler/src/render3/view/compiler.ts
View File

@ -715,12 +715,10 @@ function createHostBindingsFunction(
// MUST be registered on a given element within the component/directive
// templateFn/hostBindingsFn functions. The instruction below will figure out
// what all the bindings are and then generate the statements required to register
// those bindings to the element via `elementStyling`.
const elementStylingInstruction =
styleBuilder.buildElementStylingInstruction(null, constantPool);
if (elementStylingInstruction) {
createStatements.push(
createStylingStmt(elementStylingInstruction, bindingContext, bindingFn));
// those bindings to the element via `styling`.
const stylingInstruction = styleBuilder.buildStylingInstruction(null, constantPool);
if (stylingInstruction) {
createStatements.push(createStylingStmt(stylingInstruction, bindingContext, bindingFn));
}
// finally each binding that was registered in the statement above will need to be added to

52
packages/compiler/src/render3/view/styling_builder.ts
View File

@ -58,14 +58,14 @@ interface BoundStylingEntry {
* order which these must be generated is as follows:
*
* if (createMode) {
* elementStyling(...)
* styling(...)
* }
* if (updateMode) {
* elementStyleMap(...)
* elementClassMap(...)
* elementStyleProp(...)
* elementClassProp(...)
* elementStylingApp(...)
* styleMap(...)
* classMap(...)
* styleProp(...)
* classProp(...)
* stylingApp(...)
* }
*
* The creation/update methods within the builder class produce these instructions.
@ -277,18 +277,18 @@ export class StylingBuilder {
}
/**
* Builds an instruction with all the expressions and parameters for `elementStyling`.
* Builds an instruction with all the expressions and parameters for `styling`.
*
* The instruction generation code below is used for producing the AOT statement code which is
* responsible for registering style/class bindings to an element.
*/
buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool):
Instruction|null {
buildStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool): Instruction
|null {
if (this.hasBindings) {
return {
sourceSpan,
allocateBindingSlots: 0,
reference: R3.elementStyling,
reference: R3.styling,
buildParams: () => {
// a string array of every style-based binding
const styleBindingProps =
@ -303,8 +303,8 @@ export class StylingBuilder {
// (otherwise a shorter amount of params will be filled). The code below helps
// determine how many params are required in the expression code.
//
// min params => elementStyling()
// max params => elementStyling(classBindings, styleBindings, sanitizer)
// min params => styling()
// max params => styling(classBindings, styleBindings, sanitizer)
//
const params: o.Expression[] = [];
let expectedNumberOfArgs = 0;
@ -335,12 +335,12 @@ export class StylingBuilder {
}
/**
* Builds an instruction with all the expressions and parameters for `elementClassMap`.
* Builds an instruction with all the expressions and parameters for `classMap`.
*
* The instruction data will contain all expressions for `elementClassMap` to function
* The instruction data will contain all expressions for `classMap` to function
* which includes the `[class]` expression params.
*/
buildElementClassMapInstruction(valueConverter: ValueConverter): Instruction|null {
buildClassMapInstruction(valueConverter: ValueConverter): Instruction|null {
if (this._classMapInput) {
return this._buildMapBasedInstruction(valueConverter, true, this._classMapInput);
}
@ -348,12 +348,12 @@ export class StylingBuilder {
}
/**
* Builds an instruction with all the expressions and parameters for `elementStyleMap`.
* Builds an instruction with all the expressions and parameters for `styleMap`.
*
* The instruction data will contain all expressions for `elementStyleMap` to function
* The instruction data will contain all expressions for `styleMap` to function
* which includes the `[style]` expression params.
*/
buildElementStyleMapInstruction(valueConverter: ValueConverter): Instruction|null {
buildStyleMapInstruction(valueConverter: ValueConverter): Instruction|null {
if (this._styleMapInput) {
return this._buildMapBasedInstruction(valueConverter, false, this._styleMapInput);
}
@ -372,7 +372,7 @@ export class StylingBuilder {
totalBindingSlotsRequired += mapValue.expressions.length;
}
const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap;
const reference = isClassBased ? R3.classMap : R3.styleMap;
return {
sourceSpan: stylingInput.sourceSpan,
reference,
@ -393,8 +393,8 @@ export class StylingBuilder {
sourceSpan: input.sourceSpan,
allocateBindingSlots: totalBindingSlotsRequired, reference,
buildParams: (convertFn: (value: any) => o.Expression) => {
// min params => elementStylingProp(elmIndex, bindingIndex, value)
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
// min params => stylingProp(elmIndex, bindingIndex, value)
// max params => stylingProp(elmIndex, bindingIndex, value, overrideFlag)
const params: o.Expression[] = [];
params.push(o.literal(bindingIndex));
params.push(convertFn(value));
@ -420,7 +420,7 @@ export class StylingBuilder {
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleClassInputs) {
return this._buildSingleInputs(
R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
R3.classProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
}
return [];
}
@ -428,7 +428,7 @@ export class StylingBuilder {
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleStyleInputs) {
return this._buildSingleInputs(
R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
R3.styleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
}
return [];
}
@ -436,7 +436,7 @@ export class StylingBuilder {
private _buildApplyFn(): Instruction {
return {
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
reference: R3.elementStylingApply,
reference: R3.stylingApply,
allocateBindingSlots: 0,
buildParams: () => { return []; }
};
@ -449,11 +449,11 @@ export class StylingBuilder {
buildUpdateLevelInstructions(valueConverter: ValueConverter) {
const instructions: Instruction[] = [];
if (this.hasBindings) {
const styleMapInstruction = this.buildElementStyleMapInstruction(valueConverter);
const styleMapInstruction = this.buildStyleMapInstruction(valueConverter);
if (styleMapInstruction) {
instructions.push(styleMapInstruction);
}
const classMapInstruction = this.buildElementClassMapInstruction(valueConverter);
const classMapInstruction = this.buildClassMapInstruction(valueConverter);
if (classMapInstruction) {
instructions.push(classMapInstruction);
}

15
packages/compiler/src/render3/view/template.ts
View File

@ -660,15 +660,14 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
}
// The style bindings code is placed into two distinct blocks within the template function AOT
// code: creation and update. The creation code contains the `elementStyling` instructions
// which will apply the collected binding values to the element. `elementStyling` is
// code: creation and update. The creation code contains the `styling` instructions
// which will apply the collected binding values to the element. `styling` is
// designed to run inside of `elementStart` and `elementEnd`. The update instructions
// (things like `elementStyleProp`, `elementClassProp`, etc..) are applied later on in this
// (things like `styleProp`, `classProp`, etc..) are applied later on in this
// file
this.processStylingInstruction(
elementIndex, implicit,
stylingBuilder.buildElementStylingInstruction(element.sourceSpan, this.constantPool),
true);
stylingBuilder.buildStylingInstruction(element.sourceSpan, this.constantPool), true);
// Generate Listeners (outputs)
element.outputs.forEach((outputAst: t.BoundEvent) => {
@ -685,8 +684,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
}
// the code here will collect all update-level styling instructions and add them to the
// update block of the template function AOT code. Instructions like `elementStyleProp`,
// `elementStyleMap`, `elementClassMap`, `elementClassProp` and `elementStylingApply`
// update block of the template function AOT code. Instructions like `styleProp`,
// `styleMap`, `classMap`, `classProp` and `stylingApply`
// are all generated and assigned in the code below.
const stylingInstructions = stylingBuilder.buildUpdateLevelInstructions(this._valueConverter);
const limit = stylingInstructions.length - 1;
@ -772,7 +771,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
let instruction: any;
if (inputType === BindingType.Class) {
instruction = R3.elementClassProp;
instruction = R3.classProp;
} else {
instruction = R3.elementAttribute;
}

12
packages/core/src/core_render3_private_export.ts
View File

@ -110,12 +110,12 @@ export {
ɵɵelementAttribute,
ɵɵelementContainerStart,
ɵɵelementContainerEnd,
ɵɵelementStyling,
ɵɵelementStyleMap,
ɵɵelementClassMap,
ɵɵelementStyleProp,
ɵɵelementStylingApply,
ɵɵelementClassProp,
ɵɵstyling,
ɵɵstyleMap,
ɵɵclassMap,
ɵɵstyleProp,
ɵɵstylingApply,
ɵɵclassProp,
ɵɵelementHostAttrs,
ɵɵselect,

12
packages/core/src/render3/index.ts
View File

@ -23,6 +23,8 @@ export {
tick,
ɵɵallocHostVars,
ɵɵbind,
ɵɵclassMap,
ɵɵclassProp,
ɵɵcomponentHostSyntheticListener,
ɵɵcomponentHostSyntheticProperty,
@ -34,8 +36,6 @@ export {
ɵɵelement,
ɵɵelementAttribute,
ɵɵelementClassMap,
ɵɵelementClassProp,
ɵɵelementContainerEnd,
ɵɵelementContainerStart,
@ -44,10 +44,6 @@ export {
ɵɵelementHostAttrs,
ɵɵelementProperty,
ɵɵelementStart,
ɵɵelementStyleMap,
ɵɵelementStyleProp,
ɵɵelementStyling,
ɵɵelementStylingApply,
ɵɵembeddedViewEnd,
ɵɵembeddedViewStart,
@ -91,6 +87,10 @@ export {
ɵɵreference,
ɵɵselect,
ɵɵstyleMap,
ɵɵstyleProp,
ɵɵstyling,
ɵɵstylingApply,
ɵɵtemplate,
ɵɵtext,

73
packages/core/src/render3/instructions/styling.ts
View File

@ -11,7 +11,7 @@ import {TNode, TNodeType} from '../interfaces/node';
import {PlayerFactory} from '../interfaces/player';
import {FLAGS, HEADER_OFFSET, LView, LViewFlags, RENDERER, RootContextFlags} from '../interfaces/view';
import {getActiveDirectiveId, getActiveDirectiveSuperClassDepth, getLView, getPreviousOrParentTNode, getSelectedIndex} from '../state';
import {getInitialClassNameValue, renderStyling, updateClassMap, updateClassProp as updateElementClassProp, updateContextWithBindings, updateStyleMap, updateStyleProp as updateElementStyleProp} from '../styling/class_and_style_bindings';
import {getInitialClassNameValue, renderStyling, updateClassMap, updateClassProp as updateclassProp, updateContextWithBindings, updateStyleMap, updateStyleProp as updatestyleProp} from '../styling/class_and_style_bindings';
import {ParamsOf, enqueueHostInstruction, registerHostDirective} from '../styling/host_instructions_queue';
import {BoundPlayerFactory} from '../styling/player_factory';
import {DEFAULT_TEMPLATE_DIRECTIVE_INDEX} from '../styling/shared';
@ -33,12 +33,12 @@ import {scheduleTick, setInputsForProperty} from './shared';
* The instructions present in this file are:
*
* Template level styling instructions:
* - elementStyling
* - elementStyleMap
* - elementClassMap
* - elementStyleProp
* - elementClassProp
* - elementStylingApply
* - styling
* - styleMap
* - classMap
* - styleProp
* - classProp
* - stylingApply
*/
/**
@ -50,10 +50,10 @@ import {scheduleTick, setInputsForProperty} from './shared';
* values to an element).
*
* @param classBindingNames An array containing bindable class names.
* The `elementClassProp` instruction refers to the class name by index in
* The `classProp` instruction refers to the class name by index in
* this array (i.e. `['foo', 'bar']` means `foo=0` and `bar=1`).
* @param styleBindingNames An array containing bindable style properties.
* The `elementStyleProp` instruction refers to the class name by index in
* The `styleProp` instruction refers to the class name by index in
* this array (i.e. `['width', 'height']` means `width=0` and `height=1`).
* @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
* style values that are applied to the element (during rendering).
@ -63,7 +63,7 @@ import {scheduleTick, setInputsForProperty} from './shared';
*
* @codeGenApi
*/
export function ɵɵelementStyling(
export function ɵɵstyling(
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
styleSanitizer?: StyleSanitizeFn | null): void {
const tNode = getPreviousOrParentTNode();
@ -81,7 +81,7 @@ export function ɵɵelementStyling(
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
fns.push(() => {
initElementStyling(
initstyling(
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
});
@ -92,13 +92,13 @@ export function ɵɵelementStyling(
// components) then they will be applied at the end of the `elementEnd`
// instruction (because directives are created first before styling is
// executed for a new element).
initElementStyling(
initstyling(
tNode, classBindingNames, styleBindingNames, styleSanitizer,
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
}
}
function initElementStyling(
function initstyling(
tNode: TNode, classBindingNames: string[] | null | undefined,
styleBindingNames: string[] | null | undefined,
styleSanitizer: StyleSanitizeFn | null | undefined, directiveStylingIndex: number): void {
@ -113,14 +113,14 @@ function initElementStyling(
*
* If the style value is falsy then it will be removed from the element
* (or assigned a different value depending if there are any styles placed
* on the element with `elementStyleMap` or any static styles that are
* present from when the element was created with `elementStyling`).
* on the element with `styleMap` or any static styles that are
* present from when the element was created with `styling`).
*
* Note that the styling element is updated as part of `elementStylingApply`.
* Note that the styling element is updated as part of `stylingApply`.
*
* @param styleIndex Index of style to update. This index value refers to the
* index of the style in the style bindings array that was passed into
* `elementStyling`.
* `styling`.
* @param value New value to write (falsy to remove).
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
* Note that when a suffix is provided then the underlying sanitizer will
@ -133,7 +133,7 @@ function initElementStyling(
*
* @codeGenApi
*/
export function ɵɵelementStyleProp(
export function ɵɵstyleProp(
styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string | null, forceOverride?: boolean): void {
const index = getSelectedIndex();
@ -141,11 +141,11 @@ export function ɵɵelementStyleProp(
const stylingContext = getStylingContext(index, getLView());
const directiveStylingIndex = getActiveDirectiveStylingIndex();
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementStyleProp> =
const args: ParamsOf<typeof updatestyleProp> =
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
enqueueHostInstruction(stylingContext, directiveStylingIndex, updatestyleProp, args);
} else {
updateElementStyleProp(
updatestyleProp(
stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
}
@ -175,11 +175,11 @@ function resolveStylePropValue(
*
* This instruction is meant to handle the `[class.foo]="exp"` case and,
* therefore, the class binding itself must already be allocated using
* `elementStyling` within the creation block.
* `styling` within the creation block.
*
* @param classIndex Index of class to toggle. This index value refers to the
* index of the class in the class bindings array that was passed into
* `elementStyling` (which is meant to be called before this
* `styling` (which is meant to be called before this
* function is).
* @param value A true/false value which will turn the class on or off.
* @param forceOverride Whether or not this value will be applied regardless
@ -190,7 +190,7 @@ function resolveStylePropValue(
*
* @codeGenApi
*/
export function ɵɵelementClassProp(
export function ɵɵclassProp(
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
const index = getSelectedIndex();
const input = (value instanceof BoundPlayerFactory) ?
@ -199,11 +199,11 @@ export function ɵɵelementClassProp(
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const stylingContext = getStylingContext(index, getLView());
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementClassProp> =
const args: ParamsOf<typeof updateclassProp> =
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateclassProp, args);
} else {
updateElementClassProp(
updateclassProp(
stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
}
@ -220,10 +220,10 @@ function booleanOrNull(value: any): boolean|null {
*
* This instruction is meant to apply styling via the `[style]="exp"` template bindings.
* When styles are applied to the element they will then be updated with respect to
* any styles/classes set via `elementStyleProp`. If any styles are set to falsy
* any styles/classes set via `styleProp`. If any styles are set to falsy
* then they will be removed from the element.
*
* Note that the styling instruction will not be applied until `elementStylingApply` is called.
* Note that the styling instruction will not be applied until `stylingApply` is called.
*
* @param styles A key/value style map of the styles that will be applied to the given element.
* Any missing styles (that have already been applied to the element beforehand) will be
@ -234,7 +234,7 @@ function booleanOrNull(value: any): boolean|null {
*
* @codeGenApi
*/
export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
export function ɵɵstyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
const index = getSelectedIndex();
const lView = getLView();
const stylingContext = getStylingContext(index, lView);
@ -265,10 +265,10 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
*
* This instruction is meant to apply styling via the `[class]="exp"` template bindings.
* When classes are applied to the element they will then be updated with
* respect to any styles/classes set via `elementClassProp`. If any
* respect to any styles/classes set via `classProp`. If any
* classes are set to falsy then they will be removed from the element.
*
* Note that the styling instruction will not be applied until `elementStylingApply` is called.
* Note that the styling instruction will not be applied until `stylingApply` is called.
* Note that this will the provided classMap value to the host element if this function is called
* within a host binding.
*
@ -278,8 +278,7 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
*
* @codeGenApi
*/
export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null):
void {
export function ɵɵclassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null): void {
const index = getSelectedIndex();
const lView = getLView();
const stylingContext = getStylingContext(index, lView);
@ -306,13 +305,13 @@ export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHA
/**
* Apply all style and class binding values to the element.
*
* This instruction is meant to be run after `elementStyleMap`, `elementClassMap`,
* `elementStyleProp` or `elementClassProp` instructions have been run and will
* This instruction is meant to be run after `styleMap`, `classMap`,
* `styleProp` or `classProp` instructions have been run and will
* only apply styling to the element if any styling bindings have been updated.
*
* @codeGenApi
*/
export function ɵɵelementStylingApply(): void {
export function ɵɵstylingApply(): void {
const index = getSelectedIndex();
const directiveStylingIndex =
getActiveDirectiveStylingIndex() || DEFAULT_TEMPLATE_DIRECTIVE_INDEX;

36
packages/core/src/render3/interfaces/styling.ts
View File

@ -51,7 +51,7 @@ import {LView} from './view';
* Once the styling context is created then single and multi properties can be stored within it.
* For this to happen, the following function needs to be called:
*
* `elementStyling` (called with style properties, class properties and a sanitizer + a directive
* `styling` (called with style properties, class properties and a sanitizer + a directive
* instance).
*
* When this instruction is called it will populate the styling context with the provided style
@ -122,8 +122,8 @@ import {LView} from './view';
* values are and how they work.
*
* Each time a binding property is updated (whether it be through a single
* property instruction like `elementStyleProp`, `elementClassProp`,
* `elementStyleMap` or `elementClassMap`) then the values in the context will be updated as
* property instruction like `styleProp`, `classProp`,
* `styleMap` or `classMap`) then the values in the context will be updated as
* well.
*
* If for example `[style.width]` updates to `555px` then its value will be reflected
@ -142,9 +142,9 @@ import {LView} from './view';
*
* Despite the context being updated, nothing has been rendered on screen (not styles or
* classes have been set on the element). To kick off rendering for an element the following
* function needs to be run `elementStylingApply`.
* function needs to be run `stylingApply`.
*
* `elementStylingApply` will run through the context and find each dirty value and render them onto
* `stylingApply` will run through the context and find each dirty value and render them onto
* the element. Once complete, all styles/classes will be set to clean. Because of this, the render
* function will now know not to rerun itself again if called again unless new style/class values
* have changed.
@ -158,12 +158,12 @@ import {LView} from './view';
* Each of the following instructions supports accepting a directive instance as an input parameter:
*
* - `elementHostAttrs`
* - `elementStyling`
* - `elementStyleProp`
* - `elementClassProp`
* - `elementStyleMap`
* - `elementClassMap`
* - `elementStylingApply`
* - `styling`
* - `styleProp`
* - `classProp`
* - `styleMap`
* - `classMap`
* - `stylingApply`
*
* Each time a directive value is passed in, it will be converted into an index by examining the
* directive registry (which lives in the context configuration area). The index is then used
@ -257,7 +257,7 @@ import {LView} from './view';
*
* ## Rendering
* The rendering mechanism (when the styling data is applied on screen) occurs via the
* `elementStylingApply` function and is designed to run after **all** styling functions have been
* `stylingApply` function and is designed to run after **all** styling functions have been
* evaluated. The rendering algorithm will loop over the context and only apply the styles that are
* flagged as dirty (either because they are new, updated or have been removed via multi or
* single bindings).
@ -293,19 +293,19 @@ export interface StylingContext extends
/**
* A numeric value representing the class index offset value. Whenever a single class is
* applied (using `elementClassProp`) it should have an styling index value that doesn't
* applied (using `classProp`) it should have an styling index value that doesn't
* need to take into account any style values that exist in the context.
*/
[StylingIndex.SinglePropOffsetPositions]: SinglePropOffsetValues;
/**
* The last class value that was interpreted by `elementStyleMap`. This is cached
* The last class value that was interpreted by `styleMap`. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.CachedMultiClasses]: any|MapBasedOffsetValues;
/**
* The last style value that was interpreted by `elementClassMap`. This is cached
* The last style value that was interpreted by `classMap`. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.CachedMultiStyles]: any|MapBasedOffsetValues;
@ -319,7 +319,7 @@ export interface StylingContext extends
* standard angular instructions, they are not designed to immediately apply
* their values to the styling context when executed. What happens instead is
* a queue is constructed and each instruction is populated into the queue.
* Then, once the style/class values are set to flush (via `elementStylingApply` or
* Then, once the style/class values are set to flush (via `stylingApply` or
* `hostStylingApply`), the queue is flushed and the values are rendered onto
* the host element.
*/
@ -337,7 +337,7 @@ export interface StylingContext extends
* the styling is applied).
*
* This queue is used when any `hostStyling` instructions are executed from the `hostBindings`
* function. Template-level styling functions (e.g. `elementStyleMap` and `elementClassProp`)
* function. Template-level styling functions (e.g. `styleMap` and `classProp`)
* do not make use of this queue (they are applied to the styling context immediately).
*
* Due to the nature of how components/directives are evaluated, directives (both parent and
@ -371,7 +371,7 @@ export interface StylingContext extends
* inside of `renderStyling`).
*
* Right now each directive's hostBindings function, as well the template function, both
* call `elementStylingApply()` and `hostStylingApply()`. The fact that this is called
* call `stylingApply()` and `hostStylingApply()`. The fact that this is called
* multiple times for the same element (b/c of change detection) causes some issues. To avoid
* having styling code be rendered on an element multiple times, the `HostInstructionsQueue`
* reserves a slot for a reference pointing to the very last directive that was registered and

12
packages/core/src/render3/jit/environment.ts
View File

@ -106,12 +106,12 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵɵloadContentQuery': r3.ɵɵloadContentQuery,
'ɵɵreference': r3.ɵɵreference,
'ɵɵelementHostAttrs': r3.ɵɵelementHostAttrs,
'ɵɵelementClassMap': r3.ɵɵelementClassMap,
'ɵɵelementStyling': r3.ɵɵelementStyling,
'ɵɵelementStyleMap': r3.ɵɵelementStyleMap,
'ɵɵelementStyleProp': r3.ɵɵelementStyleProp,
'ɵɵelementStylingApply': r3.ɵɵelementStylingApply,
'ɵɵelementClassProp': r3.ɵɵelementClassProp,
'ɵɵclassMap': r3.ɵɵclassMap,
'ɵɵstyling': r3.ɵɵstyling,
'ɵɵstyleMap': r3.ɵɵstyleMap,
'ɵɵstyleProp': r3.ɵɵstyleProp,
'ɵɵstylingApply': r3.ɵɵstylingApply,
'ɵɵclassProp': r3.ɵɵclassProp,
'ɵɵselect': r3.ɵɵselect,
'ɵɵtemplate': r3.ɵɵtemplate,
'ɵɵtext': r3.ɵɵtext,

4
packages/core/src/render3/styling/class_and_style_bindings.ts
View File

@ -235,8 +235,8 @@ export function updateContextWithBindings(
// because we're inserting more bindings into the context, this means that the
// binding values need to be referenced the singlePropOffsetValues array so that
// the template/directive can easily find them inside of the `elementStyleProp`
// and the `elementClassProp` functions without iterating through the entire context.
// the template/directive can easily find them inside of the `styleProp`
// and the `classProp` functions without iterating through the entire context.
// The first step to setting up these reference points is to mark how many bindings
// are being added. Even if these bindings already exist in the context, the directive
// or template code will still call them unknowingly. Therefore the total values need

2
packages/core/src/render3/styling/util.ts
View File

@ -121,7 +121,7 @@ export function allocStylingContext(
* every style declaration such as `<div style="color: red">` would result `StyleContext`
* which would create unnecessary memory pressure.
*
* @param index Index of the style allocation. See: `elementStyling`.
* @param index Index of the style allocation. See: `styling`.
* @param viewData The view to search for the styling context
*/
export function getStylingContextFromLView(index: number, viewData: LView): StylingContext {

24
packages/core/test/bundling/todo/bundle.golden_symbols.json
View File

@ -920,9 +920,6 @@
{
"name": "incrementActiveDirectiveId"
},
{
"name": "initElementStyling"
},
{
"name": "initNodeFlags"
},
@ -932,6 +929,9 @@
{
"name": "initializeTNodeInputs"
},
{
"name": "initstyling"
},
{
"name": "injectElementRef"
},
@ -1364,6 +1364,9 @@
{
"name": "ɵɵbind"
},
{
"name": "ɵɵclassProp"
},
{
"name": "ɵɵdefineComponent"
},
@ -1376,21 +1379,12 @@
{
"name": "ɵɵdirectiveInject"
},
{
"name": "ɵɵelementClassProp"
},
{
"name": "ɵɵelementEnd"
},
{
"name": "ɵɵelementStart"
},
{
"name": "ɵɵelementStyling"
},
{
"name": "ɵɵelementStylingApply"
},
{
"name": "ɵɵgetCurrentView"
},
@ -1421,6 +1415,12 @@
{
"name": "ɵɵselect"
},
{
"name": "ɵɵstyling"
},
{
"name": "ɵɵstylingApply"
},
{
"name": "ɵɵtemplate"
},

4
packages/core/test/render3/discovery_utils_spec.ts
View File

@ -8,7 +8,7 @@
import {StaticInjector} from '../../src/di/injector';
import {createInjector} from '../../src/di/r3_injector';
import {AttributeMarker, RenderFlags, getHostElement, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵi18n, ɵɵi18nApply, ɵɵi18nExp, ɵɵselect} from '../../src/render3/index';
import {markDirty, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵlistener, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
import {markDirty, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵlistener, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
import {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
import {NgIf} from './common_with_def';
@ -557,7 +557,7 @@ describe('discovery utils deprecated', () => {
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStylingApply();
ɵɵstylingApply();
}
}
});

42
packages/core/test/render3/instructions_spec.ts
View File

@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
import {ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV} from '@angular/core/src/render3/instructions/all';
import {ɵɵdefineComponent} from '../../src/render3/definition';
import {RenderFlags, ɵɵbind, ɵɵelement, ɵɵelementAttribute, ɵɵelementClassMap, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
import {RenderFlags, ɵɵbind, ɵɵclassMap, ɵɵelement, ɵɵelementAttribute, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
import {AttributeMarker} from '../../src/render3/interfaces/node';
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
import {ɵɵdefaultStyleSanitizer, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl} from '../../src/sanitization/sanitization';
@ -23,7 +23,7 @@ import {ComponentFixture, TemplateFixture} from './render_util';
describe('instructions', () => {
function createAnchor() {
ɵɵelementStart(0, 'a');
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
@ -39,7 +39,7 @@ describe('instructions', () => {
attrs.push(AttributeMarker.Styles, ...initialStyles);
}
ɵɵelementStart(0, 'div', attrs);
ɵɵelementStyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
ɵɵstyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
ɵɵelementEnd();
}
@ -1010,23 +1010,23 @@ describe('instructions', () => {
});
});
describe('elementStyleProp', () => {
describe('styleProp', () => {
it('should automatically sanitize unless a bypass operation is applied', () => {
const t = new TemplateFixture(() => {
return createDiv(null, null, null, ['background-image'], ɵɵdefaultStyleSanitizer);
}, () => {}, 1);
t.update(() => {
ɵɵselect(0);
ɵɵelementStyleProp(0, 'url("http://server")');
ɵɵelementStylingApply();
ɵɵstyleProp(0, 'url("http://server")');
ɵɵstylingApply();
});
// nothing is set because sanitizer suppresses it.
expect(t.html).toEqual('<div></div>');
t.update(() => {
ɵɵselect(0);
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('url("http://server2")'));
ɵɵelementStylingApply();
ɵɵstyleProp(0, bypassSanitizationTrustStyle('url("http://server2")'));
ɵɵstylingApply();
});
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))
.toEqual('url("http://server2")');
@ -1041,8 +1041,8 @@ describe('instructions', () => {
t.update(() => {
ɵɵselect(0);
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple'));
ɵɵelementStylingApply();
ɵɵstyleProp(0, bypassSanitizationTrustStyle('apple'));
ɵɵstylingApply();
});
expect(sanitizerInterceptor.lastValue !).toEqual('apple');
@ -1050,17 +1050,17 @@ describe('instructions', () => {
t.update(() => {
ɵɵselect(0);
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple'));
ɵɵelementStylingApply();
ɵɵstyleProp(0, bypassSanitizationTrustStyle('apple'));
ɵɵstylingApply();
});
expect(sanitizerInterceptor.lastValue).toEqual(null);
});
});
describe('elementStyleMap', () => {
describe('styleMap', () => {
function createDivWithStyle() {
ɵɵelementStart(0, 'div', [AttributeMarker.Styles, 'height', '10px']);
ɵɵelementStyling([], ['height']);
ɵɵstyling([], ['height']);
ɵɵelementEnd();
}
@ -1068,8 +1068,8 @@ describe('instructions', () => {
const fixture = new TemplateFixture(createDivWithStyle, () => {}, 1);
fixture.update(() => {
ɵɵselect(0);
ɵɵelementStyleMap({'background-color': 'red'});
ɵɵelementStylingApply();
ɵɵstyleMap({'background-color': 'red'});
ɵɵstylingApply();
});
expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
});
@ -1084,7 +1084,7 @@ describe('instructions', () => {
fixture.update(() => {
ɵɵselect(0);
ɵɵelementStyleMap({
ɵɵstyleMap({
'background-image': 'background-image',
'background': 'background',
'border-image': 'border-image',
@ -1093,7 +1093,7 @@ describe('instructions', () => {
'filter': 'filter',
'width': 'width'
});
ɵɵelementStylingApply();
ɵɵstylingApply();
});
const props = detectedValues.sort();
@ -1106,7 +1106,7 @@ describe('instructions', () => {
describe('elementClass', () => {
function createDivWithStyling() {
ɵɵelementStart(0, 'div');
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
@ -1114,8 +1114,8 @@ describe('instructions', () => {
const fixture = new TemplateFixture(createDivWithStyling, () => {}, 1);
fixture.update(() => {
ɵɵselect(0);
ɵɵelementClassMap('multiple classes');
ɵɵelementStylingApply();
ɵɵclassMap('multiple classes');
ɵɵstylingApply();
});
expect(fixture.html).toEqual('<div class="multiple classes"></div>');
});

120
packages/core/test/render3/integration_spec.ts
View File

@ -10,8 +10,8 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
import {RendererType2} from '../../src/render/api';
import {getLContext} from '../../src/render3/context_discovery';
import {AttributeMarker, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
import {ɵɵallocHostVars, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdirectiveInject, ɵɵelement, ɵɵelementAttribute, ɵɵelementClassProp, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementHostAttrs, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
import {AttributeMarker, ɵɵclassMap, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵstyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
import {ɵɵallocHostVars, ɵɵbind, ɵɵclassProp, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdirectiveInject, ɵɵelement, ɵɵelementAttribute, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementHostAttrs, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
import {MONKEY_PATCH_KEY_NAME} from '../../src/render3/interfaces/context';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
@ -1421,13 +1421,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'span');
ɵɵelementStyling(null, ['border-color']);
ɵɵstyling(null, ['border-color']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleProp(0, ctx.color);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.color);
ɵɵstylingApply();
}
}, 1);
@ -1449,13 +1449,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'span');
ɵɵelementStyling(null, ['font-size']);
ɵɵstyling(null, ['font-size']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleProp(0, ctx.time, 'px');
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.time, 'px');
ɵɵstylingApply();
}
}, 1);
@ -1484,13 +1484,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'span');
ɵɵelementStyling(['active']);
ɵɵstyling(['active']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementClassProp(0, ctx.class);
ɵɵelementStylingApply();
ɵɵclassProp(0, ctx.class);
ɵɵstylingApply();
}
}, 1);
@ -1526,13 +1526,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'span', [AttributeMarker.Classes, 'existing']);
ɵɵelementStyling(['existing', 'active']);
ɵɵstyling(['existing', 'active']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementClassProp(1, ctx.class);
ɵɵelementStylingApply();
ɵɵclassProp(1, ctx.class);
ɵɵstylingApply();
}
}, 1);
@ -1559,13 +1559,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'my-comp');
ɵɵelementStyling(['active']);
ɵɵstyling(['active']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementClassProp(0, ctx.class);
ɵɵelementStylingApply();
ɵɵclassProp(0, ctx.class);
ɵɵstylingApply();
}
}, 1, 0, [MyComp]);
@ -1622,14 +1622,14 @@ describe('render3 integration test', () => {
ɵɵtemplate(
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], ɵɵtemplateRefExtractor);
ɵɵelementStart(2, 'structural-comp');
ɵɵelementStyling(['active']);
ɵɵstyling(['active']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
const foo = ɵɵreference(1) as any;
ɵɵselect(2);
ɵɵelementClassProp(0, ctx.class);
ɵɵelementStylingApply();
ɵɵclassProp(0, ctx.class);
ɵɵstylingApply();
ɵɵelementProperty(2, 'tmp', ɵɵbind(foo));
}
}, 3, 1, [StructuralComp]);
@ -1687,12 +1687,12 @@ describe('render3 integration test', () => {
ɵɵelementStart(
0, 'div',
['DirWithClass', '', AttributeMarker.Classes, 'apple', 'orange', 'banana']);
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStylingApply();
ɵɵstylingApply();
}
}, 1, 0, [DirWithClassDirective]);
@ -1710,12 +1710,12 @@ describe('render3 integration test', () => {
ɵɵelementStart(0, 'div', [
'DirWithStyle', '', AttributeMarker.Styles, 'width', '100px', 'height', '200px'
]);
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStylingApply();
ɵɵstylingApply();
}
}, 1, 0, [DirWithStyleDirective]);
@ -1731,13 +1731,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div', ['DirWithClass']);
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementClassMap('cucumber grape');
ɵɵelementStylingApply();
ɵɵclassMap('cucumber grape');
ɵɵstylingApply();
}
}, 1, 0, [DirWithClassDirective]);
@ -1753,13 +1753,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div', ['DirWithStyle']);
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleMap({width: '200px', height: '500px'});
ɵɵelementStylingApply();
ɵɵstyleMap({width: '200px', height: '500px'});
ɵɵstylingApply();
}
}, 1, 0, [DirWithStyleDirective]);
@ -1830,13 +1830,13 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs(
[AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']);
ɵɵelementStyling(['xyz'], ['width', 'height']);
ɵɵstyling(['xyz'], ['width', 'height']);
}
if (rf & RenderFlags.Update) {
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStyleProp(1, ctx.height);
ɵɵelementClassProp(0, ctx.activateXYZClass);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.width);
ɵɵstyleProp(1, ctx.height);
ɵɵclassProp(0, ctx.activateXYZClass);
ɵɵstylingApply();
}
}
});
@ -1903,11 +1903,11 @@ describe('render3 integration test', () => {
factory: () => dir1Instance = new Dir1WithStyle(),
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementStyling(null, ['width']);
ɵɵstyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.width);
ɵɵstylingApply();
}
}
});
@ -1928,11 +1928,11 @@ describe('render3 integration test', () => {
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
ɵɵelementStyling(null, ['width']);
ɵɵstyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.width);
ɵɵstylingApply();
}
}
});
@ -1946,12 +1946,12 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelement(0, 'div', ['Dir1WithStyle', '', 'Dir2WithStyle', '']);
ɵɵelementStyling(null, ['width']);
ɵɵstyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.width);
ɵɵstylingApply();
}
}, 1, 0, [Dir1WithStyle, Dir2WithStyle]);
@ -2001,12 +2001,12 @@ describe('render3 integration test', () => {
factory: () => dir1Instance = new Dir1WithStyling(),
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementStyling();
ɵɵstyling();
}
if (rf & RenderFlags.Update) {
ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementClassMap(ctx.classesExp);
ɵɵelementStylingApply();
ɵɵstyleMap(ctx.stylesExp);
ɵɵclassMap(ctx.classesExp);
ɵɵstylingApply();
}
}
});
@ -2029,11 +2029,11 @@ describe('render3 integration test', () => {
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
ɵɵelementStyling();
ɵɵstyling();
}
if (rf & RenderFlags.Update) {
ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementStylingApply();
ɵɵstyleMap(ctx.stylesExp);
ɵɵstylingApply();
}
}
});
@ -2048,13 +2048,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelement(0, 'div', ['Dir1WithStyling', '', 'Dir2WithStyling', '']);
ɵɵelementStyling();
ɵɵstyling();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementClassMap(ctx.classesExp);
ɵɵelementStylingApply();
ɵɵstyleMap(ctx.stylesExp);
ɵɵclassMap(ctx.classesExp);
ɵɵstylingApply();
}
}, 1, 0, [Dir1WithStyling, Dir2WithStyling]);
@ -2126,13 +2126,13 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div');
ɵɵelementStyling();
ɵɵstyling();
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementClassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-'));
ɵɵelementStylingApply();
ɵɵclassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-'));
ɵɵstylingApply();
}
}, 1, 2);
@ -2627,12 +2627,12 @@ describe('element discovery', () => {
template: (rf: RenderFlags, ctx: StructuredComp) => {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'section');
ɵɵelementStyling(['class-foo']);
ɵɵstyling(['class-foo']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStylingApply();
ɵɵstylingApply();
}
}
});

66
packages/core/test/render3/styling/class_and_style_bindings_spec.ts
View File

@ -9,7 +9,7 @@ import {createLView, createTView} from '@angular/core/src/render3/instructions/s
import {createRootContext} from '../../../src/render3/component';
import {getLContext} from '../../../src/render3/context_discovery';
import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵnamespaceSVG, ɵɵselect} from '../../../src/render3/index';
import {ɵɵclassMap, ɵɵclassProp, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementEnd, ɵɵelementStart, ɵɵnamespaceSVG, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply} from '../../../src/render3/index';
import {RenderFlags} from '../../../src/render3/interfaces/definition';
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
@ -392,14 +392,14 @@ describe('style and class based bindings', () => {
'opacity',
'0.5',
]);
ɵɵelementStyling(null, ['width']);
ɵɵstyling(null, ['width']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleMap(ctx.myStyles);
ɵɵelementStyleProp(0, ctx.myWidth);
ɵɵelementStylingApply();
ɵɵstyleMap(ctx.myStyles);
ɵɵstyleProp(0, ctx.myWidth);
ɵɵstylingApply();
}
}
@ -429,16 +429,16 @@ describe('style and class based bindings', () => {
if (rf & RenderFlags.Create) {
ɵɵnamespaceSVG();
ɵɵelementStart(0, 'svg');
ɵɵelementStyling(null, ['width', 'height']);
ɵɵstyling(null, ['width', 'height']);
ɵɵelementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
ɵɵelementEnd();
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleProp(0, ctx.diameter, 'px');
ɵɵelementStyleProp(1, ctx.diameter, 'px');
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.diameter, 'px');
ɵɵstyleProp(1, ctx.diameter, 'px');
ɵɵstylingApply();
}
}
});
@ -471,14 +471,14 @@ describe('style and class based bindings', () => {
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div');
ɵɵelementStyling(null, ['borderWidth', 'border-color']);
ɵɵstyling(null, ['borderWidth', 'border-color']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleProp(0, ctx.borderWidth);
ɵɵelementStyleProp(1, ctx.borderColor);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.borderWidth);
ɵɵstyleProp(1, ctx.borderColor);
ɵɵstylingApply();
}
}
});
@ -3109,16 +3109,16 @@ describe('style and class based bindings', () => {
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div');
ɵɵelementStyling(['foo'], ['width']);
ɵɵstyling(['foo'], ['width']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleMap(styleMapFactory);
ɵɵelementClassMap(classMapFactory);
ɵɵelementStyleProp(0, widthFactory);
ɵɵelementClassProp(0, fooFactory);
ɵɵelementStylingApply();
ɵɵstyleMap(styleMapFactory);
ɵɵclassMap(classMapFactory);
ɵɵstyleProp(0, widthFactory);
ɵɵclassProp(0, fooFactory);
ɵɵstylingApply();
}
}
});
@ -3184,16 +3184,16 @@ describe('style and class based bindings', () => {
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div');
ɵɵelementStyling(['foo'], ['width']);
ɵɵstyling(['foo'], ['width']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleMap(styleMapFactory);
ɵɵelementClassMap(classMapFactory);
ɵɵelementStyleProp(0, widthFactory);
ɵɵelementClassProp(0, fooFactory);
ɵɵelementStylingApply();
ɵɵstyleMap(styleMapFactory);
ɵɵclassMap(classMapFactory);
ɵɵstyleProp(0, widthFactory);
ɵɵclassProp(0, fooFactory);
ɵɵstylingApply();
}
}
});
@ -3257,12 +3257,12 @@ describe('style and class based bindings', () => {
factory: () => new MyDir(),
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementStyling(['foo'], ['width']);
ɵɵstyling(['foo'], ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵelementStyleProp(0, ctx.widthFactory);
ɵɵelementClassProp(0, ctx.fooFactory);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.widthFactory);
ɵɵclassProp(0, ctx.fooFactory);
ɵɵstylingApply();
}
}
});
@ -3282,14 +3282,14 @@ describe('style and class based bindings', () => {
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div', ['my-dir', '']);
ɵɵelementStyling(['foo'], ['width']);
ɵɵstyling(['foo'], ['width']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStyleProp(0, ctx.widthFactory);
ɵɵelementClassProp(0, ctx.fooFactory);
ɵɵelementStylingApply();
ɵɵstyleProp(0, ctx.widthFactory);
ɵɵclassProp(0, ctx.fooFactory);
ɵɵstylingApply();
}
}
});

6
packages/core/test/render3/styling/players_spec.ts
View File

@ -9,7 +9,7 @@ import {QueryList} from '@angular/core';
import {RenderFlags} from '@angular/core/src/render3';
import {getHostElement, ɵɵdefineComponent, ɵɵloadViewQuery, ɵɵviewQuery} from '../../../src/render3/index';
import {markDirty, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵselect} from '../../../src/render3/instructions/all';
import {markDirty, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵselect, ɵɵstyling, ɵɵstylingApply} from '../../../src/render3/instructions/all';
import {PlayState, Player, PlayerHandler} from '../../../src/render3/interfaces/player';
import {RElement} from '../../../src/render3/interfaces/renderer';
import {addPlayer, getPlayers} from '../../../src/render3/players';
@ -258,12 +258,12 @@ class CompWithStyling {
template: (rf: RenderFlags, ctx: CompWithStyling) => {
if (rf & RenderFlags.Create) {
ɵɵelementStart(0, 'div');
ɵɵelementStyling(['fooClass']);
ɵɵstyling(['fooClass']);
ɵɵelementEnd();
}
if (rf & RenderFlags.Update) {
ɵɵselect(0);
ɵɵelementStylingApply();
ɵɵstylingApply();
}
}
});

32
tools/public_api_guard/core/core.d.ts vendored
View File

@ -678,6 +678,12 @@ export interface ɵɵBaseDef<T> {
export declare function ɵɵbind<T>(value: T): T | NO_CHANGE;
export declare function ɵɵclassMap(classes: {
[styleName: string]: any;
} | NO_CHANGE | string | null): void;
export declare function ɵɵclassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void;
export declare type ɵɵComponentDefWithMeta<T, Selector extends String, ExportAs extends string[], InputMap extends {
[key: string]: string;
}, OutputMap extends {
@ -795,12 +801,6 @@ export declare function ɵɵelement(index: number, name: string, attrs?: TAttrib
export declare function ɵɵelementAttribute(index: number, name: string, value: any, sanitizer?: SanitizerFn | null, namespace?: string): void;
export declare function ɵɵelementClassMap(classes: {
[styleName: string]: any;
} | NO_CHANGE | string | null): void;
export declare function ɵɵelementClassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void;
export declare function ɵɵelementContainerEnd(): void;
export declare function ɵɵelementContainerStart(index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void;
@ -813,16 +813,6 @@ export declare function ɵɵelementProperty<T>(index: number, propName: string,
export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void;
export declare function ɵɵelementStyleMap(styles: {
[styleName: string]: any;
} | NO_CHANGE | null): void;
export declare function ɵɵelementStyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void;
export declare function ɵɵelementStyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void;
export declare function ɵɵelementStylingApply(): void;
export declare function ɵɵembeddedViewEnd(): void;
export declare function ɵɵembeddedViewStart(viewBlockId: number, consts: number, vars: number): RenderFlags;
@ -1028,6 +1018,16 @@ export declare function ɵɵstaticContentQuery<T>(directiveIndex: number, predic
export declare function ɵɵstaticViewQuery<T>(predicate: Type<any> | string[], descend: boolean, read: any): void;
export declare function ɵɵstyleMap(styles: {
[styleName: string]: any;
} | NO_CHANGE | null): void;
export declare function ɵɵstyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void;
export declare function ɵɵstyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void;
export declare function ɵɵstylingApply(): void;
export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate<any> | null, consts: number, vars: number, tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null, localRefExtractor?: LocalRefExtractor): void;
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: LView): ViewEngine_TemplateRef<{}> | null;