From c016e2c4ecf7529f08fae4ca0f5c8b0170c6b51c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 8 May 2019 10:18:33 -0700 Subject: [PATCH] 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 --- packages/common/src/directives/ng_class.ts | 8 +- packages/common/src/directives/ng_style.ts | 8 +- .../r3_view_compiler_styling_spec.ts | 78 ++--- .../compiler-cli/test/ngtsc/ngtsc_spec.ts | 6 +- .../compiler/src/render3/r3_identifiers.ts | 17 - .../src/render3/view/styling_builder.ts | 44 +-- .../core/src/core_render3_private_export.ts | 7 - packages/core/src/render3/component.ts | 5 + packages/core/src/render3/index.ts | 6 - .../core/src/render3/instructions/shared.ts | 1 + .../core/src/render3/instructions/styling.ts | 328 +++++------------- packages/core/src/render3/jit/environment.ts | 6 - packages/core/src/render3/state.ts | 2 +- .../bundling/todo/bundle.golden_symbols.json | 29 +- .../core/test/render3/integration_spec.ts | 40 +-- .../styling/class_and_style_bindings_spec.ts | 10 +- tools/public_api_guard/core/core.d.ts | 16 - 17 files changed, 212 insertions(+), 399 deletions(-) diff --git a/packages/common/src/directives/ng_class.ts b/packages/common/src/directives/ng_class.ts index da43e03965..a51cdf36c8 100644 --- a/packages/common/src/directives/ng_class.ts +++ b/packages/common/src/directives/ng_class.ts @@ -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, ɵɵ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'; @@ -35,11 +35,11 @@ export const ngClassDirectiveDef__POST_R3__ = ɵɵdefineDirective({ factory: () => {}, hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) { if (rf & ɵRenderFlags.Create) { - ɵɵelementHostStyling(); + ɵɵelementStyling(); } if (rf & ɵRenderFlags.Update) { - ɵɵelementHostClassMap(ctx.getValue()); - ɵɵelementHostStylingApply(); + ɵɵelementClassMap(ctx.getValue()); + ɵɵelementStylingApply(); } } }); diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts index a5e5c96b31..e24a8c1830 100644 --- a/packages/common/src/directives/ng_style.ts +++ b/packages/common/src/directives/ng_style.ts @@ -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, ɵɵ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'; @@ -35,11 +35,11 @@ export const ngStyleDirectiveDef__POST_R3__ = ɵɵdefineDirective({ factory: () => {}, hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) { if (rf & ɵRenderFlags.Create) { - ɵɵelementHostStyling(); + ɵɵelementStyling(); } if (rf & ɵRenderFlags.Update) { - ɵɵelementHostStyleMap(ctx.getValue()); - ɵɵelementHostStylingApply(); + ɵɵelementStyleMap(ctx.getValue()); + ɵɵelementStylingApply(); } } }); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts index 25775b26a3..811030a0bb 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts @@ -1105,14 +1105,14 @@ describe('compiler compliance: styling', () => { hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) { if (rf & 1) { $r3$.ɵɵelementHostAttrs($e0_attrs$); - $r3$.ɵɵelementHostStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer); + $r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer); } if (rf & 2) { - $r3$.ɵɵelementHostStyleMap(ctx.myStyle); - $r3$.ɵɵelementHostClassMap(ctx.myClass); - $r3$.ɵɵelementHostStyleProp(0, ctx.myColorProp); - $r3$.ɵɵelementHostClassProp(0, ctx.myFooClass); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementStyleMap(ctx.myStyle); + $r3$.ɵɵelementClassMap(ctx.myClass); + $r3$.ɵɵelementStyleProp(0, ctx.myColorProp); + $r3$.ɵɵelementClassProp(0, ctx.myFooClass); + $r3$.ɵɵelementStylingApply(); } }, consts: 0, @@ -1166,16 +1166,16 @@ describe('compiler compliance: styling', () => { … hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) { if (rf & 1) { - $r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer); + $r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer); } if (rf & 2) { - $r3$.ɵɵelementHostStyleMap(ctx.myStyle); - $r3$.ɵɵelementHostClassMap(ctx.myClasses); - $r3$.ɵɵelementHostStyleProp(0, ctx.myHeightProp, "pt"); - $r3$.ɵɵelementHostStyleProp(1, ctx.myWidthProp); - $r3$.ɵɵelementHostClassProp(0, ctx.myBarClass); - $r3$.ɵɵelementHostClassProp(1, ctx.myFooClass); - $r3$.ɵɵelementHostStylingApply(); + $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(); } }, consts: 0, @@ -1250,14 +1250,14 @@ describe('compiler compliance: styling', () => { … hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) { if (rf & 1) { - $r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer); + $r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer); } if (rf & 2) { - $r3$.ɵɵelementHostStyleMap(ctx.myStyleExp); - $r3$.ɵɵelementHostClassMap(ctx.myClassExp); - $r3$.ɵɵelementHostStyleProp(0, ctx.myWidthExp, null, true); - $r3$.ɵɵelementHostClassProp(0, ctx.myFooClassExp, true); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementStyleMap(ctx.myStyleExp); + $r3$.ɵɵelementClassMap(ctx.myClassExp); + $r3$.ɵɵelementStyleProp(0, ctx.myWidthExp, null, true); + $r3$.ɵɵelementClassProp(0, ctx.myFooClassExp, true); + $r3$.ɵɵelementStylingApply(); } }, `; @@ -1319,33 +1319,33 @@ describe('compiler compliance: styling', () => { … function ClassDirective_HostBindings(rf, ctx, elIndex) { if (rf & 1) { - $r3$.ɵɵelementHostStyling(); + $r3$.ɵɵelementStyling(); } if (rf & 2) { - $r3$.ɵɵelementHostClassMap(ctx.myClassMap); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementClassMap(ctx.myClassMap); + $r3$.ɵɵelementStylingApply(); } } … function WidthDirective_HostBindings(rf, ctx, elIndex) { if (rf & 1) { - $r3$.ɵɵelementHostStyling($widthDir_classes$, $widthDir_styles$); + $r3$.ɵɵelementStyling($widthDir_classes$, $widthDir_styles$); } if (rf & 2) { - $r3$.ɵɵelementHostStyleProp(0, ctx.myWidth); - $r3$.ɵɵelementHostClassProp(0, ctx.myFooClass); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementStyleProp(0, ctx.myWidth); + $r3$.ɵɵelementClassProp(0, ctx.myFooClass); + $r3$.ɵɵelementStylingApply(); } } … function HeightDirective_HostBindings(rf, ctx, elIndex) { if (rf & 1) { - $r3$.ɵɵelementHostStyling($heightDir_classes$, $heightDir_styles$); + $r3$.ɵɵelementStyling($heightDir_classes$, $heightDir_styles$); } if (rf & 2) { - $r3$.ɵɵelementHostStyleProp(0, ctx.myHeight); - $r3$.ɵɵelementHostClassProp(0, ctx.myBarClass); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementStyleProp(0, ctx.myHeight); + $r3$.ɵɵelementClassProp(0, ctx.myBarClass); + $r3$.ɵɵelementStylingApply(); } } … @@ -1401,14 +1401,14 @@ describe('compiler compliance: styling', () => { if (rf & 1) { $r3$.ɵɵallocHostVars(2); $r3$.ɵɵelementHostAttrs($_c0$); - $r3$.ɵɵelementHostStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer); + $r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer); } if (rf & 2) { $r3$.ɵɵproperty("id", ctx.id, null, true); $r3$.ɵɵproperty("title", ctx.title, null, true); - $r3$.ɵɵelementHostStyleMap(ctx.myStyle); - $r3$.ɵɵelementHostClassMap(ctx.myClass); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementStyleMap(ctx.myStyle); + $r3$.ɵɵelementClassMap(ctx.myClass); + $r3$.ɵɵelementStylingApply(); } } `; @@ -1448,14 +1448,14 @@ describe('compiler compliance: styling', () => { hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) { if (rf & 1) { $r3$.ɵɵallocHostVars(2); - $r3$.ɵɵelementHostStyling($_c0$, $_c1$); + $r3$.ɵɵelementStyling($_c0$, $_c1$); } if (rf & 2) { $r3$.ɵɵproperty("id", ctx.id, null, true); $r3$.ɵɵproperty("title", ctx.title, null, true); - $r3$.ɵɵelementHostStyleProp(0, ctx.myWidth); - $r3$.ɵɵelementHostClassProp(0, ctx.myFooClass); - $r3$.ɵɵelementHostStylingApply(); + $r3$.ɵɵelementStyleProp(0, ctx.myWidth); + $r3$.ɵɵelementClassProp(0, ctx.myFooClass); + $r3$.ɵɵelementStylingApply(); } } `; diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts index f445dc845e..d24bbeaea5 100644 --- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts +++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts @@ -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\u0275elementHostStyling(_c0); + i0.\u0275\u0275elementStyling(_c0); } if (rf & 2) { i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo)); i0.\u0275\u0275property("prop", ctx.bar, null, true); - i0.\u0275\u0275elementHostClassProp(0, ctx.someClass); - i0.\u0275\u0275elementHostStylingApply(); + i0.\u0275\u0275elementClassProp(0, ctx.someClass); + i0.\u0275\u0275elementStylingApply(); } } `; diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts index 5ef035aef0..562e62ab6d 100644 --- a/packages/compiler/src/render3/r3_identifiers.ts +++ b/packages/compiler/src/render3/r3_identifiers.ts @@ -62,23 +62,6 @@ export class Identifiers { 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 nextContext: o.ExternalReference = {name: 'ɵɵnextContext', moduleName: CORE}; diff --git a/packages/compiler/src/render3/view/styling_builder.ts b/packages/compiler/src/render3/view/styling_builder.ts index 16f7b43e87..3f4d7348bb 100644 --- a/packages/compiler/src/render3/view/styling_builder.ts +++ b/packages/compiler/src/render3/view/styling_builder.ts @@ -264,7 +264,7 @@ export class StylingBuilder { reference: R3.elementHostAttrs, allocateBindingSlots: 0, buildParams: () => { - // params => elementHostAttrs(agetDirectiveContext()ttrs) + // params => elementHostAttrs(attrs) this.populateInitialStylingAttrs(attrs); const attrArray = !attrs.some(attr => attr instanceof o.WrappedNodeExpr) ? getConstantLiteralFromArray(constantPool, attrs) : @@ -284,11 +284,11 @@ export class StylingBuilder { */ buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool): Instruction|null { - const reference = this._directiveExpr ? R3.elementHostStyling : R3.elementStyling; if (this.hasBindings) { return { sourceSpan, - allocateBindingSlots: 0, reference, + allocateBindingSlots: 0, + reference: R3.elementStyling, buildParams: () => { // a string array of every style-based binding const styleBindingProps = @@ -303,13 +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. // - // HOST: - // min params => elementHostStyling() - // max params => elementHostStyling(classBindings, styleBindings, sanitizer) - // - // Template: - // min params => elementStyling() - // max params => elementStyling(classBindings, styleBindings, sanitizer) + // min params => elementStyling() + // max params => elementStyling(classBindings, styleBindings, sanitizer) // const params: o.Expression[] = []; let expectedNumberOfArgs = 0; @@ -377,14 +372,7 @@ export class StylingBuilder { totalBindingSlotsRequired += mapValue.expressions.length; } - const isHostBinding = this._directiveExpr; - let reference: o.ExternalReference; - if (isClassBased) { - reference = isHostBinding ? R3.elementHostClassMap : R3.elementClassMap; - } else { - reference = isHostBinding ? R3.elementHostStyleMap : R3.elementStyleMap; - } - + const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap; return { sourceSpan: stylingInput.sourceSpan, reference, @@ -405,12 +393,8 @@ export class StylingBuilder { sourceSpan: input.sourceSpan, allocateBindingSlots: totalBindingSlotsRequired, reference, buildParams: (convertFn: (value: any) => o.Expression) => { - // HOST: - // min params => elementHostStylingProp(bindingIndex, value) - // max params => elementHostStylingProp(bindingIndex, value, overrideFlag) - // Template: - // min params => elementStylingProp(elmIndex, bindingIndex, value) - // max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag) + // min params => elementStylingProp(elmIndex, bindingIndex, value) + // max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag) const params: o.Expression[] = []; params.push(o.literal(bindingIndex)); params.push(convertFn(value)); @@ -435,30 +419,24 @@ export class StylingBuilder { private _buildClassInputs(valueConverter: ValueConverter): Instruction[] { if (this._singleClassInputs) { - const isHostBinding = !!this._directiveExpr; - const reference = isHostBinding ? R3.elementHostClassProp : R3.elementClassProp; return this._buildSingleInputs( - reference, this._singleClassInputs, this._classesIndex, false, valueConverter); + R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter); } return []; } private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] { if (this._singleStyleInputs) { - const isHostBinding = !!this._directiveExpr; - const reference = isHostBinding ? R3.elementHostStyleProp : R3.elementStyleProp; return this._buildSingleInputs( - reference, this._singleStyleInputs, this._stylesIndex, true, valueConverter); + R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter); } return []; } private _buildApplyFn(): Instruction { - const isHostBinding = this._directiveExpr; - const reference = isHostBinding ? R3.elementHostStylingApply : R3.elementStylingApply; return { sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null, - reference, + reference: R3.elementStylingApply, allocateBindingSlots: 0, buildParams: () => { return []; } }; diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts index 565a137cfd..a21b5145dc 100644 --- a/packages/core/src/core_render3_private_export.ts +++ b/packages/core/src/core_render3_private_export.ts @@ -116,14 +116,7 @@ export { ɵɵelementStyleProp, ɵɵelementStylingApply, ɵɵelementClassProp, - ɵɵelementHostAttrs, - ɵɵelementHostClassMap, - ɵɵelementHostStyleMap, - ɵɵelementHostStyling, - ɵɵelementHostStyleProp, - ɵɵelementHostClassProp, - ɵɵelementHostStylingApply, ɵɵselect, ɵɵtextBinding, diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index 6239d1ce53..ea31239937 100644 --- a/packages/core/src/render3/component.ts +++ b/packages/core/src/render3/component.ts @@ -111,6 +111,11 @@ export function renderComponent( opts: CreateComponentOptions = {}): T { ngDevMode && publishDefaultGlobalUtils(); 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 sanitizer = opts.sanitizer || null; const componentDef = getComponentDef(componentType) !; diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts index 857723275c..f36607f4b1 100644 --- a/packages/core/src/render3/index.ts +++ b/packages/core/src/render3/index.ts @@ -42,12 +42,6 @@ export { ɵɵelementEnd, ɵɵelementHostAttrs, - ɵɵelementHostClassMap, - ɵɵelementHostClassProp, - ɵɵelementHostStyleMap, - ɵɵelementHostStyleProp, - ɵɵelementHostStyling, - ɵɵelementHostStylingApply, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleMap, diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts index 1a28666b42..ce2a8c1a29 100644 --- a/packages/core/src/render3/instructions/shared.ts +++ b/packages/core/src/render3/instructions/shared.ts @@ -560,6 +560,7 @@ export function createDirectivesAndLocals( instantiateAllDirectives(tView, lView, previousOrParentTNode); invokeDirectivesHostBindings(tView, lView, previousOrParentTNode); saveResolvedLocalsInData(lView, previousOrParentTNode, localRefExtractor); + setActiveHostElement(null); } /** diff --git a/packages/core/src/render3/instructions/styling.ts b/packages/core/src/render3/instructions/styling.ts index 3884b9efb5..32f3084a21 100644 --- a/packages/core/src/render3/instructions/styling.ts +++ b/packages/core/src/render3/instructions/styling.ts @@ -39,14 +39,6 @@ import {scheduleTick, setInputsForProperty} from './shared'; * - elementStyleProp * - elementClassProp * - 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 * 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 */ export function ɵɵelementStyling( @@ -76,62 +71,31 @@ export function ɵɵelementStyling( 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(); + 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 - // 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); - - const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || []; - fns.push(() => { + const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || []; + fns.push(() => { + initElementStyling( + tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex); + registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex); + }); + } else { + // 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, directiveStylingIndex); - registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex); - }); + tNode, classBindingNames, styleBindingNames, styleSanitizer, + DEFAULT_TEMPLATE_DIRECTIVE_INDEX); + } } function initElementStyling( @@ -157,16 +121,16 @@ function initElementStyling( * @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`. - * @param value New value to write (falsy to remove). Note that if a directive also - * 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 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 * be ignored. * @param forceOverride Whether or not to update the styling value immediately * (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 */ export function ɵɵelementStyleProp( @@ -175,46 +139,15 @@ export function ɵɵelementStyleProp( const index = getSelectedIndex(); const valueToAdd = resolveStylePropValue(value, suffix); 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 hostElementIndex = getSelectedIndex(); - - const stylingContext = getStylingContext(hostElementIndex, getLView()); - const valueToAdd = resolveStylePropValue(value, suffix); - const args: ParamsOf = - [stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride]; - enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args); + if (directiveStylingIndex) { + const args: ParamsOf = + [stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride]; + enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args); + } else { + updateElementStyleProp( + stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride); + } } function resolveStylePropValue( @@ -252,6 +185,9 @@ function resolveStylePropValue( * @param forceOverride Whether or not this value will be applied regardless * 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 */ export function ɵɵelementClassProp( @@ -260,45 +196,19 @@ export function ɵɵelementClassProp( const input = (value instanceof BoundPlayerFactory) ? (value as BoundPlayerFactory) : 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 hostElementIndex = getSelectedIndex(); - const stylingContext = getStylingContext(hostElementIndex, getLView()); - - const input = (value instanceof BoundPlayerFactory) ? - (value as BoundPlayerFactory) : - booleanOrNull(value); - - const args: ParamsOf = - [stylingContext, classIndex, input, directiveStylingIndex, forceOverride]; - enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args); + const stylingContext = getStylingContext(index, getLView()); + if (directiveStylingIndex) { + const args: ParamsOf = + [stylingContext, classIndex, input, directiveStylingIndex, forceOverride]; + enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args); + } else { + updateElementClassProp( + stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride); + } } + function booleanOrNull(value: any): boolean|null { if (typeof value === 'boolean') return value; 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 * 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 */ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void { const index = getSelectedIndex(); const lView = getLView(); const stylingContext = getStylingContext(index, lView); - const tNode = getTNode(index, lView); + const directiveStylingIndex = getActiveDirectiveStylingIndex(); + if (directiveStylingIndex) { + const args: ParamsOf = [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, - // there should not be a situation where a directive host bindings function - // evaluates the inputs (this should only happen in the template function) - if (hasStyleInput(tNode) && styles !== NO_CHANGE) { - const initialStyles = getInitialClassNameValue(stylingContext); - const styleInputVal = - (initialStyles.length ? (initialStyles + ' ') : '') + forceStylesAsString(styles); - setInputsForProperty(lView, tNode.inputs !['style'] !, styleInputVal); - styles = NO_CHANGE; + // inputs are only evaluated from a template binding into a directive, therefore, + // there should not be a situation where a directive host bindings function + // evaluates the inputs (this should only happen in the template function) + if (hasStyleInput(tNode) && styles !== NO_CHANGE) { + const initialStyles = getInitialClassNameValue(stylingContext); + const styleInputVal = + (initialStyles.length ? (initialStyles + ' ') : '') + forceStylesAsString(styles); + setInputsForProperty(lView, tNode.inputs !['style'] !, styleInputVal); + 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. * * 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 * 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 lView = getLView(); const stylingContext = getStylingContext(index, lView); - const tNode = getTNode(index, lView); - // inputs are only evaluated from a template binding into a directive, therefore, - // there should not be a situation where a directive host bindings function - // evaluates the inputs (this should only happen in the template function) - 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; + const directiveStylingIndex = getActiveDirectiveStylingIndex(); + if (directiveStylingIndex) { + const args: ParamsOf = [stylingContext, classes, directiveStylingIndex]; + enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args); + } else { + const tNode = getTNode(index, lView); + // inputs are only evaluated from a template binding into a directive, therefore, + // there should not be a situation where a directive host bindings function + // evaluates the inputs (this should only happen in the template function) + 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 = [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 = [stylingContext, classes, directiveStylingIndex]; - enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args); } /** @@ -444,24 +314,8 @@ export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string | */ export function ɵɵelementStylingApply(): void { const index = getSelectedIndex(); - elementStylingApplyInternal(DEFAULT_TEMPLATE_DIRECTIVE_INDEX, 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 directiveStylingIndex = + getActiveDirectiveStylingIndex() || DEFAULT_TEMPLATE_DIRECTIVE_INDEX; const lView = getLView(); const tNode = getTNode(index, lView); diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts index 6a9a0d8dd4..0d12e9cceb 100644 --- a/packages/core/src/render3/jit/environment.ts +++ b/packages/core/src/render3/jit/environment.ts @@ -112,12 +112,6 @@ export const angularCoreEnv: {[name: string]: Function} = { 'ɵɵelementStyleProp': r3.ɵɵelementStyleProp, 'ɵɵelementStylingApply': r3.ɵɵelementStylingApply, 'ɵɵelementClassProp': r3.ɵɵelementClassProp, - 'ɵɵelementHostClassMap': r3.ɵɵelementHostClassMap, - 'ɵɵelementHostStyling': r3.ɵɵelementHostStyling, - 'ɵɵelementHostStyleMap': r3.ɵɵelementHostStyleMap, - 'ɵɵelementHostStyleProp': r3.ɵɵelementHostStyleProp, - 'ɵɵelementHostStylingApply': r3.ɵɵelementHostStylingApply, - 'ɵɵelementHostClassProp': r3.ɵɵelementHostClassProp, 'ɵɵselect': r3.ɵɵselect, 'ɵɵtemplate': r3.ɵɵtemplate, 'ɵɵtext': r3.ɵɵtext, diff --git a/packages/core/src/render3/state.ts b/packages/core/src/render3/state.ts index 43cd0988d0..a0ecfa2b76 100644 --- a/packages/core/src/render3/state.ts +++ b/packages/core/src/render3/state.ts @@ -167,7 +167,7 @@ let activeDirectiveSuperClassHeight = 0; export function setActiveHostElement(elementIndex: number | null = null) { if (_selectedIndex !== elementIndex) { setSelectedIndex(elementIndex == null ? -1 : elementIndex); - activeDirectiveId = MIN_DIRECTIVE_ID; + activeDirectiveId = elementIndex == null ? 0 : MIN_DIRECTIVE_ID; activeDirectiveSuperClassDepthPosition = 0; activeDirectiveSuperClassHeight = 0; } diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json index d989dfe68d..99d56fdfb5 100644 --- a/packages/core/test/bundling/todo/bundle.golden_symbols.json +++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json @@ -110,6 +110,9 @@ { "name": "IterableDiffers" }, + { + "name": "MIN_DIRECTIVE_ID" + }, { "name": "MONKEY_PATCH_KEY_NAME" }, @@ -380,6 +383,15 @@ { "name": "_symbolIterator" }, + { + "name": "activeDirectiveId" + }, + { + "name": "activeDirectiveSuperClassDepthPosition" + }, + { + "name": "activeDirectiveSuperClassHeight" + }, { "name": "addComponentLogic" }, @@ -570,7 +582,7 @@ "name": "elementPropertyInternal" }, { - "name": "elementStylingApplyInternal" + "name": "enqueueHostInstruction" }, { "name": "enterView" @@ -620,6 +632,9 @@ { "name": "findExistingListener" }, + { + "name": "findNextInsertionIndex" + }, { "name": "findOrPatchDirectiveIntoRegistry" }, @@ -641,6 +656,15 @@ { "name": "generatePropertyAliases" }, + { + "name": "getActiveDirectiveId" + }, + { + "name": "getActiveDirectiveStylingIndex" + }, + { + "name": "getActiveDirectiveSuperClassDepth" + }, { "name": "getBeforeNodeForView" }, @@ -1124,6 +1148,9 @@ { "name": "refreshDynamicEmbeddedViews" }, + { + "name": "registerHostDirective" + }, { "name": "registerMultiMapEntry" }, diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index cdc5cc9dca..9e354f66a5 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -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, ɵɵelementHostClassMap, ɵɵelementHostStyleMap, ɵɵ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 {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 {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'; @@ -1830,13 +1830,13 @@ describe('render3 integration test', () => { if (rf & RenderFlags.Create) { ɵɵelementHostAttrs( [AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']); - ɵɵelementHostStyling(['xyz'], ['width', 'height']); + ɵɵelementStyling(['xyz'], ['width', 'height']); } if (rf & RenderFlags.Update) { - ɵɵelementHostStyleProp(0, ctx.width); - ɵɵelementHostStyleProp(1, ctx.height); - ɵɵelementHostClassProp(0, ctx.activateXYZClass); - ɵɵelementHostStylingApply(); + ɵɵelementStyleProp(0, ctx.width); + ɵɵelementStyleProp(1, ctx.height); + ɵɵelementClassProp(0, ctx.activateXYZClass); + ɵɵelementStylingApply(); } } }); @@ -1903,11 +1903,11 @@ describe('render3 integration test', () => { factory: () => dir1Instance = new Dir1WithStyle(), hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) { if (rf & RenderFlags.Create) { - ɵɵelementHostStyling(null, ['width']); + ɵɵelementStyling(null, ['width']); } if (rf & RenderFlags.Update) { - ɵɵelementHostStyleProp(0, ctx.width); - ɵɵelementHostStylingApply(); + ɵɵelementStyleProp(0, ctx.width); + ɵɵelementStylingApply(); } } }); @@ -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']); - ɵɵelementHostStyling(null, ['width']); + ɵɵelementStyling(null, ['width']); } if (rf & RenderFlags.Update) { - ɵɵelementHostStyleProp(0, ctx.width); - ɵɵelementHostStylingApply(); + ɵɵelementStyleProp(0, ctx.width); + ɵɵelementStylingApply(); } } }); @@ -2001,12 +2001,12 @@ describe('render3 integration test', () => { factory: () => dir1Instance = new Dir1WithStyling(), hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) { if (rf & RenderFlags.Create) { - ɵɵelementHostStyling(); + ɵɵelementStyling(); } if (rf & RenderFlags.Update) { - ɵɵelementHostStyleMap(ctx.stylesExp); - ɵɵelementHostClassMap(ctx.classesExp); - ɵɵelementHostStylingApply(); + ɵɵelementStyleMap(ctx.stylesExp); + ɵɵelementClassMap(ctx.classesExp); + ɵɵelementStylingApply(); } } }); @@ -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']); - ɵɵelementHostStyling(); + ɵɵelementStyling(); } if (rf & RenderFlags.Update) { - ɵɵelementHostStyleMap(ctx.stylesExp); - ɵɵelementHostStylingApply(); + ɵɵelementStyleMap(ctx.stylesExp); + ɵɵelementStylingApply(); } } }); diff --git a/packages/core/test/render3/styling/class_and_style_bindings_spec.ts b/packages/core/test/render3/styling/class_and_style_bindings_spec.ts index aed92cc106..c14230947a 100644 --- a/packages/core/test/render3/styling/class_and_style_bindings_spec.ts +++ b/packages/core/test/render3/styling/class_and_style_bindings_spec.ts @@ -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, ɵɵ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 {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node'; 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(), hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) { if (rf & RenderFlags.Create) { - ɵɵelementHostStyling(['foo'], ['width']); + ɵɵelementStyling(['foo'], ['width']); } if (rf & RenderFlags.Update) { - ɵɵelementHostStyleProp(0, ctx.widthFactory); - ɵɵelementHostClassProp(0, ctx.fooFactory); - ɵɵelementHostStylingApply(); + ɵɵelementStyleProp(0, ctx.widthFactory); + ɵɵelementClassProp(0, ctx.fooFactory); + ɵɵelementStylingApply(); } } }); diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts index b020d582a1..84058ee6de 100644 --- a/tools/public_api_guard/core/core.d.ts +++ b/tools/public_api_guard/core/core.d.ts @@ -809,22 +809,6 @@ export declare function ɵɵelementEnd(): 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(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;