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

refactor(ivy): migrate all host-specific styling instructions to element-level styling instructions (#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 #30336
This commit is contained in:
Matias Niemelä 2019-05-08 10:18:33 -07:00 committed by Alex Rickabaugh
parent 452f121486
commit c016e2c4ec
17 changed files with 212 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 * 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 * found in the LICENSE file at https://angular.io/license
*/ */
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementHostClassMap, ɵɵelementHostStyling, ɵɵelementHostStylingApply} from '@angular/core'; import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl'; import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
@ -35,11 +35,11 @@ export const ngClassDirectiveDef__POST_R3__ = ɵɵdefineDirective({
factory: () => {}, factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) { hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) { if (rf & ɵRenderFlags.Create) {
ɵɵelementHostStyling(); ɵɵelementStyling();
} }
if (rf & ɵRenderFlags.Update) { if (rf & ɵRenderFlags.Update) {
ɵɵelementHostClassMap(ctx.getValue()); ɵɵelementClassMap(ctx.getValue());
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });

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 * 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 * found in the LICENSE file at https://angular.io/license
*/ */
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementHostStyleMap, ɵɵelementHostStyling, ɵɵelementHostStylingApply} from '@angular/core'; import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementStyleMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl'; import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
@ -35,11 +35,11 @@ export const ngStyleDirectiveDef__POST_R3__ = ɵɵdefineDirective({
factory: () => {}, factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) { hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) { if (rf & ɵRenderFlags.Create) {
ɵɵelementHostStyling(); ɵɵelementStyling();
} }
if (rf & ɵRenderFlags.Update) { if (rf & ɵRenderFlags.Update) {
ɵɵelementHostStyleMap(ctx.getValue()); ɵɵelementStyleMap(ctx.getValue());
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });

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

@ -1105,14 +1105,14 @@ describe('compiler compliance: styling', () => {
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) { hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵelementHostAttrs($e0_attrs$); $r3$.ɵɵelementHostAttrs($e0_attrs$);
$r3$.ɵɵelementHostStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer); $r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵelementHostStyleMap(ctx.myStyle); $r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementHostClassMap(ctx.myClass); $r3$.ɵɵelementClassMap(ctx.myClass);
$r3$.ɵɵelementHostStyleProp(0, ctx.myColorProp); $r3$.ɵɵelementStyleProp(0, ctx.myColorProp);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass); $r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
}, },
consts: 0, consts: 0,
@ -1166,16 +1166,16 @@ describe('compiler compliance: styling', () => {
… …
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) { hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer); $r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵelementHostStyleMap(ctx.myStyle); $r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementHostClassMap(ctx.myClasses); $r3$.ɵɵelementClassMap(ctx.myClasses);
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeightProp, "pt"); $r3$.ɵɵelementStyleProp(0, ctx.myHeightProp, "pt");
$r3$.ɵɵelementHostStyleProp(1, ctx.myWidthProp); $r3$.ɵɵelementStyleProp(1, ctx.myWidthProp);
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass); $r3$.ɵɵelementClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementHostClassProp(1, ctx.myFooClass); $r3$.ɵɵelementClassProp(1, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
}, },
consts: 0, consts: 0,
@ -1250,14 +1250,14 @@ describe('compiler compliance: styling', () => {
… …
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) { hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer); $r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵelementHostStyleMap(ctx.myStyleExp); $r3$.ɵɵelementStyleMap(ctx.myStyleExp);
$r3$.ɵɵelementHostClassMap(ctx.myClassExp); $r3$.ɵɵelementClassMap(ctx.myClassExp);
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidthExp, null, true); $r3$.ɵɵelementStyleProp(0, ctx.myWidthExp, null, true);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClassExp, true); $r3$.ɵɵelementClassProp(0, ctx.myFooClassExp, true);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
}, },
`; `;
@ -1319,33 +1319,33 @@ describe('compiler compliance: styling', () => {
… …
function ClassDirective_HostBindings(rf, ctx, elIndex) { function ClassDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵelementHostStyling(); $r3$.ɵɵelementStyling();
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵelementHostClassMap(ctx.myClassMap); $r3$.ɵɵelementClassMap(ctx.myClassMap);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
} }
… …
function WidthDirective_HostBindings(rf, ctx, elIndex) { function WidthDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵelementHostStyling($widthDir_classes$, $widthDir_styles$); $r3$.ɵɵelementStyling($widthDir_classes$, $widthDir_styles$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidth); $r3$.ɵɵelementStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass); $r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
} }
… …
function HeightDirective_HostBindings(rf, ctx, elIndex) { function HeightDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵelementHostStyling($heightDir_classes$, $heightDir_styles$); $r3$.ɵɵelementStyling($heightDir_classes$, $heightDir_styles$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeight); $r3$.ɵɵelementStyleProp(0, ctx.myHeight);
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass); $r3$.ɵɵelementClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
} }
… …
@ -1401,14 +1401,14 @@ describe('compiler compliance: styling', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵallocHostVars(2); $r3$.ɵɵallocHostVars(2);
$r3$.ɵɵelementHostAttrs($_c0$); $r3$.ɵɵelementHostAttrs($_c0$);
$r3$.ɵɵelementHostStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer); $r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵproperty("id", ctx.id, null, true); $r3$.ɵɵproperty("id", ctx.id, null, true);
$r3$.ɵɵproperty("title", ctx.title, null, true); $r3$.ɵɵproperty("title", ctx.title, null, true);
$r3$.ɵɵelementHostStyleMap(ctx.myStyle); $r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementHostClassMap(ctx.myClass); $r3$.ɵɵelementClassMap(ctx.myClass);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
} }
`; `;
@ -1448,14 +1448,14 @@ describe('compiler compliance: styling', () => {
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) { hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵɵallocHostVars(2); $r3$.ɵɵallocHostVars(2);
$r3$.ɵɵelementHostStyling($_c0$, $_c1$); $r3$.ɵɵelementStyling($_c0$, $_c1$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵɵproperty("id", ctx.id, null, true); $r3$.ɵɵproperty("id", ctx.id, null, true);
$r3$.ɵɵproperty("title", ctx.title, null, true); $r3$.ɵɵproperty("title", ctx.title, null, true);
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidth); $r3$.ɵɵelementStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass); $r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply(); $r3$.ɵɵelementStylingApply();
} }
} }
`; `;

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.onClick($event); });
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.\u0275\u0275resolveBody); 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\u0275listener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
i0.\u0275\u0275elementHostStyling(_c0); i0.\u0275\u0275elementStyling(_c0);
} }
if (rf & 2) { if (rf & 2) {
i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo)); i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo));
i0.\u0275\u0275property("prop", ctx.bar, null, true); i0.\u0275\u0275property("prop", ctx.bar, null, true);
i0.\u0275\u0275elementHostClassProp(0, ctx.someClass); i0.\u0275\u0275elementClassProp(0, ctx.someClass);
i0.\u0275\u0275elementHostStylingApply(); i0.\u0275\u0275elementStylingApply();
} }
} }
`; `;

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

@ -62,23 +62,6 @@ export class Identifiers {
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE}; static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};
static elementHostStyling: o.ExternalReference = {name: 'ɵɵelementHostStyling', moduleName: CORE};
static elementHostStyleMap:
o.ExternalReference = {name: 'ɵɵelementHostStyleMap', moduleName: CORE};
static elementHostClassMap:
o.ExternalReference = {name: 'ɵɵelementHostClassMap', moduleName: CORE};
static elementHostStyleProp:
o.ExternalReference = {name: 'ɵɵelementHostStyleProp', moduleName: CORE};
static elementHostClassProp:
o.ExternalReference = {name: 'ɵɵelementHostClassProp', moduleName: CORE};
static elementHostStylingApply:
o.ExternalReference = {name: 'ɵɵelementHostStylingApply', moduleName: CORE};
static containerCreate: o.ExternalReference = {name: 'ɵɵcontainer', moduleName: CORE}; static containerCreate: o.ExternalReference = {name: 'ɵɵcontainer', moduleName: CORE};
static nextContext: o.ExternalReference = {name: 'ɵɵnextContext', moduleName: CORE}; static nextContext: o.ExternalReference = {name: 'ɵɵnextContext', moduleName: CORE};

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

@ -264,7 +264,7 @@ export class StylingBuilder {
reference: R3.elementHostAttrs, reference: R3.elementHostAttrs,
allocateBindingSlots: 0, allocateBindingSlots: 0,
buildParams: () => { buildParams: () => {
// params => elementHostAttrs(agetDirectiveContext()ttrs) // params => elementHostAttrs(attrs)
this.populateInitialStylingAttrs(attrs); this.populateInitialStylingAttrs(attrs);
const attrArray = !attrs.some(attr => attr instanceof o.WrappedNodeExpr) ? const attrArray = !attrs.some(attr => attr instanceof o.WrappedNodeExpr) ?
getConstantLiteralFromArray(constantPool, attrs) : getConstantLiteralFromArray(constantPool, attrs) :
@ -284,11 +284,11 @@ export class StylingBuilder {
*/ */
buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool): buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool):
Instruction|null { Instruction|null {
const reference = this._directiveExpr ? R3.elementHostStyling : R3.elementStyling;
if (this.hasBindings) { if (this.hasBindings) {
return { return {
sourceSpan, sourceSpan,
allocateBindingSlots: 0, reference, allocateBindingSlots: 0,
reference: R3.elementStyling,
buildParams: () => { buildParams: () => {
// a string array of every style-based binding // a string array of every style-based binding
const styleBindingProps = const styleBindingProps =
@ -303,13 +303,8 @@ export class StylingBuilder {
// (otherwise a shorter amount of params will be filled). The code below helps // (otherwise a shorter amount of params will be filled). The code below helps
// determine how many params are required in the expression code. // determine how many params are required in the expression code.
// //
// HOST: // min params => elementStyling()
// min params => elementHostStyling() // max params => elementStyling(classBindings, styleBindings, sanitizer)
// max params => elementHostStyling(classBindings, styleBindings, sanitizer)
//
// Template:
// min params => elementStyling()
// max params => elementStyling(classBindings, styleBindings, sanitizer)
// //
const params: o.Expression[] = []; const params: o.Expression[] = [];
let expectedNumberOfArgs = 0; let expectedNumberOfArgs = 0;
@ -377,14 +372,7 @@ export class StylingBuilder {
totalBindingSlotsRequired += mapValue.expressions.length; totalBindingSlotsRequired += mapValue.expressions.length;
} }
const isHostBinding = this._directiveExpr; const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap;
let reference: o.ExternalReference;
if (isClassBased) {
reference = isHostBinding ? R3.elementHostClassMap : R3.elementClassMap;
} else {
reference = isHostBinding ? R3.elementHostStyleMap : R3.elementStyleMap;
}
return { return {
sourceSpan: stylingInput.sourceSpan, sourceSpan: stylingInput.sourceSpan,
reference, reference,
@ -405,12 +393,8 @@ export class StylingBuilder {
sourceSpan: input.sourceSpan, sourceSpan: input.sourceSpan,
allocateBindingSlots: totalBindingSlotsRequired, reference, allocateBindingSlots: totalBindingSlotsRequired, reference,
buildParams: (convertFn: (value: any) => o.Expression) => { buildParams: (convertFn: (value: any) => o.Expression) => {
// HOST: // min params => elementStylingProp(elmIndex, bindingIndex, value)
// min params => elementHostStylingProp(bindingIndex, value) // max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
// max params => elementHostStylingProp(bindingIndex, value, overrideFlag)
// Template:
// min params => elementStylingProp(elmIndex, bindingIndex, value)
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
const params: o.Expression[] = []; const params: o.Expression[] = [];
params.push(o.literal(bindingIndex)); params.push(o.literal(bindingIndex));
params.push(convertFn(value)); params.push(convertFn(value));
@ -435,30 +419,24 @@ export class StylingBuilder {
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] { private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleClassInputs) { if (this._singleClassInputs) {
const isHostBinding = !!this._directiveExpr;
const reference = isHostBinding ? R3.elementHostClassProp : R3.elementClassProp;
return this._buildSingleInputs( return this._buildSingleInputs(
reference, this._singleClassInputs, this._classesIndex, false, valueConverter); R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
} }
return []; return [];
} }
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] { private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleStyleInputs) { if (this._singleStyleInputs) {
const isHostBinding = !!this._directiveExpr;
const reference = isHostBinding ? R3.elementHostStyleProp : R3.elementStyleProp;
return this._buildSingleInputs( return this._buildSingleInputs(
reference, this._singleStyleInputs, this._stylesIndex, true, valueConverter); R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
} }
return []; return [];
} }
private _buildApplyFn(): Instruction { private _buildApplyFn(): Instruction {
const isHostBinding = this._directiveExpr;
const reference = isHostBinding ? R3.elementHostStylingApply : R3.elementStylingApply;
return { return {
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null, sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
reference, reference: R3.elementStylingApply,
allocateBindingSlots: 0, allocateBindingSlots: 0,
buildParams: () => { return []; } buildParams: () => { return []; }
}; };

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

@ -116,14 +116,7 @@ export {
ɵɵelementStyleProp, ɵɵelementStyleProp,
ɵɵelementStylingApply, ɵɵelementStylingApply,
ɵɵelementClassProp, ɵɵelementClassProp,
ɵɵelementHostAttrs, ɵɵelementHostAttrs,
ɵɵelementHostClassMap,
ɵɵelementHostStyleMap,
ɵɵelementHostStyling,
ɵɵelementHostStyleProp,
ɵɵelementHostClassProp,
ɵɵelementHostStylingApply,
ɵɵselect, ɵɵselect,
ɵɵtextBinding, ɵɵtextBinding,

5
packages/core/src/render3/component.ts
View File

@ -111,6 +111,11 @@ export function renderComponent<T>(
opts: CreateComponentOptions = {}): T { opts: CreateComponentOptions = {}): T {
ngDevMode && publishDefaultGlobalUtils(); ngDevMode && publishDefaultGlobalUtils();
ngDevMode && assertComponentType(componentType); ngDevMode && assertComponentType(componentType);
// this is preemptively set to avoid having test and debug code accidentally
// read data from a previous application state...
setActiveHostElement(null);
const rendererFactory = opts.rendererFactory || domRendererFactory3; const rendererFactory = opts.rendererFactory || domRendererFactory3;
const sanitizer = opts.sanitizer || null; const sanitizer = opts.sanitizer || null;
const componentDef = getComponentDef<T>(componentType) !; const componentDef = getComponentDef<T>(componentType) !;

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

@ -42,12 +42,6 @@ export {
ɵɵelementEnd, ɵɵelementEnd,
ɵɵelementHostAttrs, ɵɵelementHostAttrs,
ɵɵelementHostClassMap,
ɵɵelementHostClassProp,
ɵɵelementHostStyleMap,
ɵɵelementHostStyleProp,
ɵɵelementHostStyling,
ɵɵelementHostStylingApply,
ɵɵelementProperty, ɵɵelementProperty,
ɵɵelementStart, ɵɵelementStart,
ɵɵelementStyleMap, ɵɵelementStyleMap,

1
packages/core/src/render3/instructions/shared.ts
View File

@ -560,6 +560,7 @@ export function createDirectivesAndLocals(
instantiateAllDirectives(tView, lView, previousOrParentTNode); instantiateAllDirectives(tView, lView, previousOrParentTNode);
invokeDirectivesHostBindings(tView, lView, previousOrParentTNode); invokeDirectivesHostBindings(tView, lView, previousOrParentTNode);
saveResolvedLocalsInData(lView, previousOrParentTNode, localRefExtractor); saveResolvedLocalsInData(lView, previousOrParentTNode, localRefExtractor);
setActiveHostElement(null);
} }
/** /**

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

@ -39,14 +39,6 @@ import {scheduleTick, setInputsForProperty} from './shared';
* - elementStyleProp * - elementStyleProp
* - elementClassProp * - elementClassProp
* - elementStylingApply * - elementStylingApply
*
* Host bindings level styling instructions:
* - elementHostStyling
* - elementHostStyleMap
* - elementHostClassMap
* - elementHostStyleProp
* - elementHostClassProp
* - elementHostStylingApply
*/ */
/** /**
@ -66,6 +58,9 @@ import {scheduleTick, setInputsForProperty} from './shared';
* @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS * @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
* style values that are applied to the element (during rendering). * style values that are applied to the element (during rendering).
* *
* Note that this will allocate the provided style/class bindings to the host element if
* this function is called within a host binding.
*
* @codeGenApi * @codeGenApi
*/ */
export function ɵɵelementStyling( export function ɵɵelementStyling(
@ -76,62 +71,31 @@ export function ɵɵelementStyling(
tNode.stylingTemplate = createEmptyStylingContext(); tNode.stylingTemplate = createEmptyStylingContext();
} }
// calling the function below ensures that the template's binding values
// are applied as the first set of bindings into the context. If any other
// styling bindings are set on the same element (by directives and/or
// 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(
tNode, classBindingNames, styleBindingNames, styleSanitizer,
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
}
/**
* Allocates style and class binding properties on the host element during creation mode
* within the host bindings function of a directive or component.
*
* This instruction is meant to be called during creation mode to register all
* dynamic style and class host bindings on the host element of a directive or
* component. Note that this is only used for binding values (see `elementHostAttrs`
* to learn how to assign static styling values to the host element).
*
* @param classBindingNames An array containing bindable class names.
* The `elementHostClassProp` 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 `elementHostStyleProp` 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).
* Note that the sanitizer instance itself is tied to the provided `directive` and
* will not be used if the same property is assigned in another directive or
* on the element directly.
*
* @codeGenApi
*/
export function ɵɵelementHostStyling(
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
styleSanitizer?: StyleSanitizeFn | null): void {
const tNode = getPreviousOrParentTNode();
if (!tNode.stylingTemplate) {
tNode.stylingTemplate = createEmptyStylingContext();
}
const directiveStylingIndex = getActiveDirectiveStylingIndex(); const directiveStylingIndex = getActiveDirectiveStylingIndex();
if (directiveStylingIndex) {
// despite the binding being applied in a queue (below), the allocation
// of the directive into the context happens right away. The reason for
// this is to retain the ordering of the directives (which is important
// for the prioritization of bindings).
allocateOrUpdateDirectiveIntoContext(tNode.stylingTemplate, directiveStylingIndex);
// despite the binding being applied in a queue (below), the allocation const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
// of the directive into the context happens right away. The reason for fns.push(() => {
// this is to retain the ordering of the directives (which is important initElementStyling(
// for the prioritization of bindings). tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
allocateOrUpdateDirectiveIntoContext(tNode.stylingTemplate, directiveStylingIndex); registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
});
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || []; } else {
fns.push(() => { // calling the function below ensures that the template's binding values
// are applied as the first set of bindings into the context. If any other
// styling bindings are set on the same element (by directives and/or
// 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( initElementStyling(
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex); tNode, classBindingNames, styleBindingNames, styleSanitizer,
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex); DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
}); }
} }
function initElementStyling( function initElementStyling(
@ -157,16 +121,16 @@ function initElementStyling(
* @param styleIndex Index of style to update. This index value refers to the * @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 * index of the style in the style bindings array that was passed into
* `elementStyling`. * `elementStyling`.
* @param value New value to write (falsy to remove). Note that if a directive also * @param value New value to write (falsy to remove).
* attempts to write to the same binding value (via `elementHostStyleProp`)
* then it will only be able to do so if the binding value assigned via
* `elementStyleProp` is falsy (or doesn't exist at all).
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`. * @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 * Note that when a suffix is provided then the underlying sanitizer will
* be ignored. * be ignored.
* @param forceOverride Whether or not to update the styling value immediately * @param forceOverride Whether or not to update the styling value immediately
* (despite the other bindings possibly having priority) * (despite the other bindings possibly having priority)
* *
* Note that this will apply the provided style value to the host element if this function is called
* within a host binding.
*
* @codeGenApi * @codeGenApi
*/ */
export function ɵɵelementStyleProp( export function ɵɵelementStyleProp(
@ -175,46 +139,15 @@ export function ɵɵelementStyleProp(
const index = getSelectedIndex(); const index = getSelectedIndex();
const valueToAdd = resolveStylePropValue(value, suffix); const valueToAdd = resolveStylePropValue(value, suffix);
const stylingContext = getStylingContext(index, getLView()); const stylingContext = getStylingContext(index, getLView());
updateElementStyleProp(
stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
/**
* Update a host style binding value on the host element within a component/directive.
*
* If the style value is falsy then it will be removed from the host element
* (or assigned a different value depending if there are any styles placed
* on the same element with `elementHostStyleMap` or any static styles that
* are present from when the element was patched with `elementHostStyling`).
*
* Note that the styling applied to the host element once
* `elementHostStylingApply` is called.
*
* @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
* `elementHostStyling`.
* @param value New value to write (falsy to remove). The value may or may not
* be applied to the element depending on the template/component/directive
* prioritization (see `interfaces/styling.ts`)
* @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
* be ignored.
* @param forceOverride Whether or not to update the styling value immediately
* (despite the other bindings possibly having priority)
*
* @codeGenApi
*/
export function ɵɵelementHostStyleProp(
styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string | null, forceOverride?: boolean): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex(); const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex(); if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementStyleProp> =
const stylingContext = getStylingContext(hostElementIndex, getLView()); [stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
const valueToAdd = resolveStylePropValue(value, suffix); enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
const args: ParamsOf<typeof updateElementStyleProp> = } else {
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride]; updateElementStyleProp(
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args); stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
} }
function resolveStylePropValue( function resolveStylePropValue(
@ -252,6 +185,9 @@ function resolveStylePropValue(
* @param forceOverride Whether or not this value will be applied regardless * @param forceOverride Whether or not this value will be applied regardless
* of where it is being set within the styling priority structure. * of where it is being set within the styling priority structure.
* *
* Note that this will apply the provided class value to the host element if this function
* is called within a host binding.
*
* @codeGenApi * @codeGenApi
*/ */
export function ɵɵelementClassProp( export function ɵɵelementClassProp(
@ -260,45 +196,19 @@ export function ɵɵelementClassProp(
const input = (value instanceof BoundPlayerFactory) ? const input = (value instanceof BoundPlayerFactory) ?
(value as BoundPlayerFactory<boolean|null>) : (value as BoundPlayerFactory<boolean|null>) :
booleanOrNull(value); booleanOrNull(value);
const stylingContext = getStylingContext(index, getLView());
updateElementClassProp(
stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
/**
* Update a class host binding for a directive's/component's host element within
* the host bindings function.
*
* This instruction is meant to handle the `@HostBinding('class.foo')` case and,
* therefore, the class binding itself must already be allocated using
* `elementHostStyling` 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
* `elementHostStlying` (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
* of where it is being set within the stylings priority structure.
*
* @codeGenApi
*/
export function ɵɵelementHostClassProp(
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex(); const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex(); const stylingContext = getStylingContext(index, getLView());
const stylingContext = getStylingContext(hostElementIndex, getLView()); if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementClassProp> =
const input = (value instanceof BoundPlayerFactory) ? [stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
(value as BoundPlayerFactory<boolean|null>) : enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
booleanOrNull(value); } else {
updateElementClassProp(
const args: ParamsOf<typeof updateElementClassProp> = stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride]; }
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
} }
function booleanOrNull(value: any): boolean|null { function booleanOrNull(value: any): boolean|null {
if (typeof value === 'boolean') return value; if (typeof value === 'boolean') return value;
return value ? true : null; return value ? true : null;
@ -319,26 +229,34 @@ function booleanOrNull(value: any): boolean|null {
* Any missing styles (that have already been applied to the element beforehand) will be * Any missing styles (that have already been applied to the element beforehand) will be
* removed (unset) from the element's styling. * removed (unset) from the element's styling.
* *
* Note that this will apply the provided styleMap value to the host element if this function
* is called within a host binding.
*
* @codeGenApi * @codeGenApi
*/ */
export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void { export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
const index = getSelectedIndex(); const index = getSelectedIndex();
const lView = getLView(); const lView = getLView();
const stylingContext = getStylingContext(index, lView); const stylingContext = getStylingContext(index, lView);
const tNode = getTNode(index, lView); const directiveStylingIndex = getActiveDirectiveStylingIndex();
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateStyleMap> = [stylingContext, styles, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateStyleMap, args);
} else {
const tNode = getTNode(index, lView);
// inputs are only evaluated from a template binding into a directive, therefore, // inputs are only evaluated from a template binding into a directive, therefore,
// there should not be a situation where a directive host bindings function // there should not be a situation where a directive host bindings function
// evaluates the inputs (this should only happen in the template function) // evaluates the inputs (this should only happen in the template function)
if (hasStyleInput(tNode) && styles !== NO_CHANGE) { if (hasStyleInput(tNode) && styles !== NO_CHANGE) {
const initialStyles = getInitialClassNameValue(stylingContext); const initialStyles = getInitialClassNameValue(stylingContext);
const styleInputVal = const styleInputVal =
(initialStyles.length ? (initialStyles + ' ') : '') + forceStylesAsString(styles); (initialStyles.length ? (initialStyles + ' ') : '') + forceStylesAsString(styles);
setInputsForProperty(lView, tNode.inputs !['style'] !, styleInputVal); setInputsForProperty(lView, tNode.inputs !['style'] !, styleInputVal);
styles = NO_CHANGE; styles = NO_CHANGE;
}
updateStyleMap(stylingContext, styles);
} }
updateStyleMap(stylingContext, styles);
} }
@ -351,6 +269,8 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
* classes are set to falsy then they will be removed from the element. * 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 `elementStylingApply` is called.
* Note that this will the provided classMap value to the host element if this function is called
* within a host binding.
* *
* @param classes A key/value map or string of CSS classes that will be added to the * @param classes A key/value map or string of CSS classes that will be added to the
* given element. Any missing classes (that have already been applied to the element * given element. Any missing classes (that have already been applied to the element
@ -363,74 +283,24 @@ export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHA
const index = getSelectedIndex(); const index = getSelectedIndex();
const lView = getLView(); const lView = getLView();
const stylingContext = getStylingContext(index, lView); const stylingContext = getStylingContext(index, lView);
const tNode = getTNode(index, lView); const directiveStylingIndex = getActiveDirectiveStylingIndex();
// inputs are only evaluated from a template binding into a directive, therefore, if (directiveStylingIndex) {
// there should not be a situation where a directive host bindings function const args: ParamsOf<typeof updateClassMap> = [stylingContext, classes, directiveStylingIndex];
// evaluates the inputs (this should only happen in the template function) enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args);
if (hasClassInput(tNode) && classes !== NO_CHANGE) { } else {
const initialClasses = getInitialClassNameValue(stylingContext); const tNode = getTNode(index, lView);
const classInputVal = // inputs are only evaluated from a template binding into a directive, therefore,
(initialClasses.length ? (initialClasses + ' ') : '') + forceClassesAsString(classes); // there should not be a situation where a directive host bindings function
setInputsForProperty(lView, tNode.inputs !['class'] !, classInputVal); // evaluates the inputs (this should only happen in the template function)
classes = NO_CHANGE; if (hasClassInput(tNode) && classes !== NO_CHANGE) {
const initialClasses = getInitialClassNameValue(stylingContext);
const classInputVal =
(initialClasses.length ? (initialClasses + ' ') : '') + forceClassesAsString(classes);
setInputsForProperty(lView, tNode.inputs !['class'] !, classInputVal);
classes = NO_CHANGE;
}
updateClassMap(stylingContext, classes);
} }
updateClassMap(stylingContext, classes);
}
/**
* Update style host bindings using object literals on an element within the host
* bindings function for a directive/component.
*
* This instruction is meant to apply styling via the `@HostBinding('style')`
* host bindings for a component's or directive's host element.
* When styles are applied to the host element they will then be updated
* with respect to any other styles set with `elementHostStyleProp`. If
* 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
* `elementHostStylingApply` 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
* removed (unset) from the element's styling.
*
* @codeGenApi
*/
export function ɵɵelementHostStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const args: ParamsOf<typeof updateStyleMap> = [stylingContext, styles, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateStyleMap, args);
}
/**
* Update class host bindings using object literals on an element within the host
* bindings function for a directive/component.
*
* This instruction is meant to apply styling via the `@HostBinding('class')`
* host bindings for a component's or directive's host element.
* When classes are applied to the host element they will then be updated
* with respect to any other classes set with `elementHostClassProp`. 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
* `elementHostStylingApply` is called.
*
* @param classes A key/value map or string of CSS classes that will be added to the
* given element. Any missing classes (that have already been applied to the element
* beforehand) will be removed (unset) from the element's list of CSS classes.
*
* @codeGenApi
*/
export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string | NO_CHANGE | null):
void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const args: ParamsOf<typeof updateClassMap> = [stylingContext, classes, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args);
} }
/** /**
@ -444,24 +314,8 @@ export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string |
*/ */
export function ɵɵelementStylingApply(): void { export function ɵɵelementStylingApply(): void {
const index = getSelectedIndex(); const index = getSelectedIndex();
elementStylingApplyInternal(DEFAULT_TEMPLATE_DIRECTIVE_INDEX, index); const directiveStylingIndex =
} getActiveDirectiveStylingIndex() || DEFAULT_TEMPLATE_DIRECTIVE_INDEX;
/**
* Apply all style and class host binding values to the element.
*
* This instruction is meant to be run after both `elementHostStyleMap`
* `elementHostClassMap`, `elementHostStyleProp` or `elementHostClassProp`
* instructions have been run and will only apply styling to the host
* element if any styling bindings have been updated.
*
* @codeGenApi
*/
export function ɵɵelementHostStylingApply(): void {
elementStylingApplyInternal(getActiveDirectiveStylingIndex(), getSelectedIndex());
}
export function elementStylingApplyInternal(directiveStylingIndex: number, index: number): void {
const lView = getLView(); const lView = getLView();
const tNode = getTNode(index, lView); const tNode = getTNode(index, lView);

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

@ -112,12 +112,6 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵɵelementStyleProp': r3.ɵɵelementStyleProp, 'ɵɵelementStyleProp': r3.ɵɵelementStyleProp,
'ɵɵelementStylingApply': r3.ɵɵelementStylingApply, 'ɵɵelementStylingApply': r3.ɵɵelementStylingApply,
'ɵɵelementClassProp': r3.ɵɵelementClassProp, 'ɵɵelementClassProp': r3.ɵɵelementClassProp,
'ɵɵelementHostClassMap': r3.ɵɵelementHostClassMap,
'ɵɵelementHostStyling': r3.ɵɵelementHostStyling,
'ɵɵelementHostStyleMap': r3.ɵɵelementHostStyleMap,
'ɵɵelementHostStyleProp': r3.ɵɵelementHostStyleProp,
'ɵɵelementHostStylingApply': r3.ɵɵelementHostStylingApply,
'ɵɵelementHostClassProp': r3.ɵɵelementHostClassProp,
'ɵɵselect': r3.ɵɵselect, 'ɵɵselect': r3.ɵɵselect,
'ɵɵtemplate': r3.ɵɵtemplate, 'ɵɵtemplate': r3.ɵɵtemplate,
'ɵɵtext': r3.ɵɵtext, 'ɵɵtext': r3.ɵɵtext,

2
packages/core/src/render3/state.ts
View File

@ -167,7 +167,7 @@ let activeDirectiveSuperClassHeight = 0;
export function setActiveHostElement(elementIndex: number | null = null) { export function setActiveHostElement(elementIndex: number | null = null) {
if (_selectedIndex !== elementIndex) { if (_selectedIndex !== elementIndex) {
setSelectedIndex(elementIndex == null ? -1 : elementIndex); setSelectedIndex(elementIndex == null ? -1 : elementIndex);
activeDirectiveId = MIN_DIRECTIVE_ID; activeDirectiveId = elementIndex == null ? 0 : MIN_DIRECTIVE_ID;
activeDirectiveSuperClassDepthPosition = 0; activeDirectiveSuperClassDepthPosition = 0;
activeDirectiveSuperClassHeight = 0; activeDirectiveSuperClassHeight = 0;
} }

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

@ -110,6 +110,9 @@
{ {
"name": "IterableDiffers" "name": "IterableDiffers"
}, },
{
"name": "MIN_DIRECTIVE_ID"
},
{ {
"name": "MONKEY_PATCH_KEY_NAME" "name": "MONKEY_PATCH_KEY_NAME"
}, },
@ -380,6 +383,15 @@
{ {
"name": "_symbolIterator" "name": "_symbolIterator"
}, },
{
"name": "activeDirectiveId"
},
{
"name": "activeDirectiveSuperClassDepthPosition"
},
{
"name": "activeDirectiveSuperClassHeight"
},
{ {
"name": "addComponentLogic" "name": "addComponentLogic"
}, },
@ -570,7 +582,7 @@
"name": "elementPropertyInternal" "name": "elementPropertyInternal"
}, },
{ {
"name": "elementStylingApplyInternal" "name": "enqueueHostInstruction"
}, },
{ {
"name": "enterView" "name": "enterView"
@ -620,6 +632,9 @@
{ {
"name": "findExistingListener" "name": "findExistingListener"
}, },
{
"name": "findNextInsertionIndex"
},
{ {
"name": "findOrPatchDirectiveIntoRegistry" "name": "findOrPatchDirectiveIntoRegistry"
}, },
@ -641,6 +656,15 @@
{ {
"name": "generatePropertyAliases" "name": "generatePropertyAliases"
}, },
{
"name": "getActiveDirectiveId"
},
{
"name": "getActiveDirectiveStylingIndex"
},
{
"name": "getActiveDirectiveSuperClassDepth"
},
{ {
"name": "getBeforeNodeForView" "name": "getBeforeNodeForView"
}, },
@ -1124,6 +1148,9 @@
{ {
"name": "refreshDynamicEmbeddedViews" "name": "refreshDynamicEmbeddedViews"
}, },
{
"name": "registerHostDirective"
},
{ {
"name": "registerMultiMapEntry" "name": "registerMultiMapEntry"
}, },

40
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 {RendererType2} from '../../src/render/api';
import {getLContext} from '../../src/render3/context_discovery'; import {getLContext} from '../../src/render3/context_discovery';
import {AttributeMarker, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementHostClassMap, ɵɵelementHostStyleMap, ɵɵelementStyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index'; 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, ɵɵelementHostClassProp, ɵɵelementHostStyleProp, ɵɵelementHostStyling, ɵɵelementHostStylingApply, ɵɵ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 {ɵɵ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 {MONKEY_PATCH_KEY_NAME} from '../../src/render3/interfaces/context'; import {MONKEY_PATCH_KEY_NAME} from '../../src/render3/interfaces/context';
import {RenderFlags} from '../../src/render3/interfaces/definition'; import {RenderFlags} from '../../src/render3/interfaces/definition';
import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer'; import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
@ -1830,13 +1830,13 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs( ɵɵelementHostAttrs(
[AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']); [AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']);
ɵɵelementHostStyling(['xyz'], ['width', 'height']); ɵɵelementStyling(['xyz'], ['width', 'height']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.width); ɵɵelementStyleProp(0, ctx.width);
ɵɵelementHostStyleProp(1, ctx.height); ɵɵelementStyleProp(1, ctx.height);
ɵɵelementHostClassProp(0, ctx.activateXYZClass); ɵɵelementClassProp(0, ctx.activateXYZClass);
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });
@ -1903,11 +1903,11 @@ describe('render3 integration test', () => {
factory: () => dir1Instance = new Dir1WithStyle(), factory: () => dir1Instance = new Dir1WithStyle(),
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) { hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
ɵɵelementHostStyling(null, ['width']); ɵɵelementStyling(null, ['width']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.width); ɵɵelementStyleProp(0, ctx.width);
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });
@ -1928,11 +1928,11 @@ describe('render3 integration test', () => {
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) { hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']); ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
ɵɵelementHostStyling(null, ['width']); ɵɵelementStyling(null, ['width']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.width); ɵɵelementStyleProp(0, ctx.width);
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });
@ -2001,12 +2001,12 @@ describe('render3 integration test', () => {
factory: () => dir1Instance = new Dir1WithStyling(), factory: () => dir1Instance = new Dir1WithStyling(),
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) { hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
ɵɵelementHostStyling(); ɵɵelementStyling();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
ɵɵelementHostStyleMap(ctx.stylesExp); ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementHostClassMap(ctx.classesExp); ɵɵelementClassMap(ctx.classesExp);
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });
@ -2029,11 +2029,11 @@ describe('render3 integration test', () => {
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) { hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']); ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
ɵɵelementHostStyling(); ɵɵelementStyling();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
ɵɵelementHostStyleMap(ctx.stylesExp); ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });

10
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 {createRootContext} from '../../../src/render3/component';
import {getLContext} from '../../../src/render3/context_discovery'; import {getLContext} from '../../../src/render3/context_discovery';
import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementHostClassProp, ɵɵelementHostStyleProp, ɵɵelementHostStyling, ɵɵelementHostStylingApply, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵnamespaceSVG, ɵɵselect} from '../../../src/render3/index'; import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵnamespaceSVG, ɵɵselect} from '../../../src/render3/index';
import {RenderFlags} from '../../../src/render3/interfaces/definition'; import {RenderFlags} from '../../../src/render3/interfaces/definition';
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node'; import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player'; import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
@ -3257,12 +3257,12 @@ describe('style and class based bindings', () => {
factory: () => new MyDir(), factory: () => new MyDir(),
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) { hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
ɵɵelementHostStyling(['foo'], ['width']); ɵɵelementStyling(['foo'], ['width']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.widthFactory); ɵɵelementStyleProp(0, ctx.widthFactory);
ɵɵelementHostClassProp(0, ctx.fooFactory); ɵɵelementClassProp(0, ctx.fooFactory);
ɵɵelementHostStylingApply(); ɵɵelementStylingApply();
} }
} }
}); });

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

@ -809,22 +809,6 @@ export declare function ɵɵelementEnd(): void;
export declare function ɵɵelementHostAttrs(attrs: TAttributes): void; export declare function ɵɵelementHostAttrs(attrs: TAttributes): void;
export declare function ɵɵelementHostClassMap(classes: {
[key: string]: any;
} | string | NO_CHANGE | null): void;
export declare function ɵɵelementHostClassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void;
export declare function ɵɵelementHostStyleMap(styles: {
[styleName: string]: any;
} | NO_CHANGE | null): void;
export declare function ɵɵelementHostStyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void;
export declare function ɵɵelementHostStyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void;
export declare function ɵɵelementHostStylingApply(): void;
export declare function ɵɵelementProperty<T>(index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null, nativeOnly?: boolean): void; export declare function ɵɵelementProperty<T>(index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null, nativeOnly?: boolean): void;
export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void; export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void;