From 7c8a62d64d1f020b2fd2ece506b96fafb9df56c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Tue, 7 May 2019 14:02:11 -0700 Subject: [PATCH] refactor(ivy): remove elementIndex param from all element-level styling instructions (#30313) This patch is one commit of many patches that will unify all styling instructions across both template-level bindings and host-level bindings. This patch in particular removes the `elementIndex` param because it is already set prior to each styling instruction via the `select(n)` instruction. PR Close #30313 --- .../src/tree/render3_function/index.ts | 7 +- .../compliance/r3_compiler_compliance_spec.ts | 6 +- .../r3_view_compiler_styling_spec.ts | 94 +++++++++---------- .../src/render3/view/styling_builder.ts | 34 ++----- .../core/src/render3/instructions/styling.ts | 25 +++-- .../core/test/render3/discovery_utils_spec.ts | 5 +- .../core/test/render3/instructions_spec.ts | 35 ++++--- .../core/test/render3/integration_spec.ts | 68 ++++++++------ .../styling/class_and_style_bindings_spec.ts | 52 +++++----- .../core/test/render3/styling/players_spec.ts | 5 +- tools/public_api_guard/core/core.d.ts | 10 +- 11 files changed, 174 insertions(+), 167 deletions(-) diff --git a/modules/benchmarks/src/tree/render3_function/index.ts b/modules/benchmarks/src/tree/render3_function/index.ts index 8f221cbc29..0299cb5410 100644 --- a/modules/benchmarks/src/tree/render3_function/index.ts +++ b/modules/benchmarks/src/tree/render3_function/index.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵtext, ɵɵtextBinding} from '@angular/core'; +import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵtext, ɵɵtextBinding} from '@angular/core'; import {bindAction, profile} from '../../util'; import {createDom, destroyDom, detectChanges} from '../render3/tree'; @@ -47,7 +47,10 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) { ɵɵelementEnd(); } if (rf & ɵRenderFlags.Update) { - ɵɵelementStyleProp(1, 0, ctx.depth % 2 ? '' : 'grey'); + ɵɵselect(1); + ɵɵelementStyleProp(0, ctx.depth % 2 ? '' : 'grey'); + ɵɵelementStyling(); + ɵɵselect(2); ɵɵtextBinding(2, ɵɵinterpolation1(' ', ctx.value, ' ')); ɵɵcontainerRefreshStart(3); { diff --git a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts index c69f86a36e..a00dce7407 100644 --- a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts @@ -507,9 +507,9 @@ describe('compiler compliance', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleProp(0, 0, ctx.color); - $r3$.ɵɵelementClassProp(0, 0, ctx.error); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleProp(0, ctx.color); + $r3$.ɵɵelementClassProp(0, ctx.error); + $r3$.ɵɵelementStylingApply(); } }, encapsulation: 2 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 11bc7f1c4b..25775b26a3 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 @@ -390,8 +390,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleMap(0, $ctx$.myStyleExp); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleMap($ctx$.myStyleExp); + $r3$.ɵɵelementStylingApply(); } } `; @@ -456,8 +456,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementClassMap(0, $r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, "")); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementClassMap($r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, "")); + $r3$.ɵɵelementStylingApply(); } } … @@ -471,8 +471,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementClassMap(0, $r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, "")); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementClassMap($r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, "")); + $r3$.ɵɵelementStylingApply(); } } … @@ -486,8 +486,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementClassMap(0, $ctx$.exp); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementClassMap($ctx$.exp); + $r3$.ɵɵelementStylingApply(); } } `; @@ -543,10 +543,10 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleMap(0, $ctx$.myStyleExp); - $r3$.ɵɵelementStyleProp(0, 0, $ctx$.myWidth); - $r3$.ɵɵelementStyleProp(0, 1, $ctx$.myHeight); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleMap($ctx$.myStyleExp); + $r3$.ɵɵelementStyleProp(0, $ctx$.myWidth); + $r3$.ɵɵelementStyleProp(1, $ctx$.myHeight); + $r3$.ɵɵelementStylingApply(); $r3$.ɵɵelementAttribute(0, "style", $r3$.ɵɵbind("border-width: 10px"), $r3$.ɵɵsanitizeStyle); } }, @@ -603,8 +603,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleProp(0, 0, ctx.myImage); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleProp(0, ctx.myImage); + $r3$.ɵɵelementStylingApply(); } }, encapsulation: 2 @@ -645,8 +645,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleProp(0, 0, 12, "px"); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleProp(0, 12, "px"); + $r3$.ɵɵelementStylingApply(); } } `; @@ -711,8 +711,8 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementClassMap(0,$ctx$.myClassExp); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementClassMap($ctx$.myClassExp); + $r3$.ɵɵelementStylingApply(); } } `; @@ -768,10 +768,10 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementClassMap(0, $ctx$.myClassExp); - $r3$.ɵɵelementClassProp(0, 0, $ctx$.yesToApple); - $r3$.ɵɵelementClassProp(0, 1, $ctx$.yesToOrange); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementClassMap($ctx$.myClassExp); + $r3$.ɵɵelementClassProp(0, $ctx$.yesToApple); + $r3$.ɵɵelementClassProp(1, $ctx$.yesToOrange); + $r3$.ɵɵelementStylingApply(); $r3$.ɵɵelementAttribute(0, "class", $r3$.ɵɵbind("banana")); } }, @@ -890,9 +890,9 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleMap(0, $ctx$.myStyleExp); - $r3$.ɵɵelementClassMap(0, $ctx$.myClassExp); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleMap($ctx$.myStyleExp); + $r3$.ɵɵelementClassMap($ctx$.myClassExp); + $r3$.ɵɵelementStylingApply(); } } `; @@ -934,9 +934,9 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleMap(0, $r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp)); - $r3$.ɵɵelementClassMap(0, $r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp)); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleMap($r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp)); + $r3$.ɵɵelementClassMap($r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp)); + $r3$.ɵɵelementStylingApply(); } } `; @@ -992,12 +992,12 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleMap(0, $r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000)); - $r3$.ɵɵelementClassMap(0, $e2_styling$); - $r3$.ɵɵelementStyleProp(0, 0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000)); - $r3$.ɵɵelementStyleProp(0, 1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000)); - $r3$.ɵɵelementClassProp(0, 0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000)); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleMap($r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000)); + $r3$.ɵɵelementClassMap($e2_styling$); + $r3$.ɵɵelementStyleProp(0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000)); + $r3$.ɵɵelementStyleProp(1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000)); + $r3$.ɵɵelementClassProp(0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000)); + $r3$.ɵɵelementStylingApply(); $r3$.ɵɵselect(5); $r3$.ɵɵtextBinding(5, $r3$.ɵɵinterpolation1(" ", $ctx$.item, "")); } @@ -1042,17 +1042,17 @@ describe('compiler compliance: styling', () => { … if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleProp(0, 0, $ctx$.w1); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleProp(0, $ctx$.w1); + $r3$.ɵɵelementStylingApply(); $r3$.ɵɵselect(1); - $r3$.ɵɵelementStyleProp(1, 0, $ctx$.h1); - $r3$.ɵɵelementStylingApply(1); + $r3$.ɵɵelementStyleProp(0, $ctx$.h1); + $r3$.ɵɵelementStylingApply(); $r3$.ɵɵselect(2); - $r3$.ɵɵelementClassProp(2, 0, $ctx$.a1); - $r3$.ɵɵelementStylingApply(2); + $r3$.ɵɵelementClassProp(0, $ctx$.a1); + $r3$.ɵɵelementStylingApply(); $r3$.ɵɵselect(3); - $r3$.ɵɵelementClassProp(3, 0, $ctx$.r1); - $r3$.ɵɵelementStylingApply(3); + $r3$.ɵɵelementClassProp(0, $ctx$.r1); + $r3$.ɵɵelementStylingApply(); } } `; @@ -1235,11 +1235,11 @@ describe('compiler compliance: styling', () => { } if (rf & 2) { $r3$.ɵɵselect(0); - $r3$.ɵɵelementStyleMap(0, ctx.myStyleExp); - $r3$.ɵɵelementClassMap(0, ctx.myClassExp); - $r3$.ɵɵelementStyleProp(0, 0, ctx.myHeightExp, null, true); - $r3$.ɵɵelementClassProp(0, 0, ctx.myBarClassExp, true); - $r3$.ɵɵelementStylingApply(0); + $r3$.ɵɵelementStyleMap(ctx.myStyleExp); + $r3$.ɵɵelementClassMap(ctx.myClassExp); + $r3$.ɵɵelementStyleProp(0, ctx.myHeightExp, null, true); + $r3$.ɵɵelementClassProp(0, ctx.myBarClassExp, true); + $r3$.ɵɵelementStylingApply(); } }, `; diff --git a/packages/compiler/src/render3/view/styling_builder.ts b/packages/compiler/src/render3/view/styling_builder.ts index a0815c19e1..280b64245c 100644 --- a/packages/compiler/src/render3/view/styling_builder.ts +++ b/packages/compiler/src/render3/view/styling_builder.ts @@ -389,22 +389,13 @@ export class StylingBuilder { sourceSpan: stylingInput.sourceSpan, reference, allocateBindingSlots: totalBindingSlotsRequired, - buildParams: (convertFn: (value: any) => o.Expression) => { - const params: o.Expression[] = []; - if (!isHostBinding) { - params.push(this._elementIndexExpr); - } - - params.push(convertFn(mapValue)); - return params; - } + buildParams: (convertFn: (value: any) => o.Expression) => { return [convertFn(mapValue)]; } }; } private _buildSingleInputs( - reference: o.ExternalReference, isHostBinding: boolean, inputs: BoundStylingEntry[], - mapIndex: Map, allowUnits: boolean, - valueConverter: ValueConverter): Instruction[] { + reference: o.ExternalReference, inputs: BoundStylingEntry[], mapIndex: Map, + allowUnits: boolean, valueConverter: ValueConverter): Instruction[] { let totalBindingSlotsRequired = 0; return inputs.map(input => { const bindingIndex: number = mapIndex.get(input.name !) !; @@ -421,11 +412,6 @@ export class StylingBuilder { // min params => elementStylingProp(elmIndex, bindingIndex, value) // max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag) const params: o.Expression[] = []; - - if (!isHostBinding) { - params.push(this._elementIndexExpr); - } - params.push(o.literal(bindingIndex)); params.push(convertFn(value)); @@ -452,8 +438,7 @@ export class StylingBuilder { const isHostBinding = !!this._directiveExpr; const reference = isHostBinding ? R3.elementHostClassProp : R3.elementClassProp; return this._buildSingleInputs( - reference, isHostBinding, this._singleClassInputs, this._classesIndex, false, - valueConverter); + reference, this._singleClassInputs, this._classesIndex, false, valueConverter); } return []; } @@ -463,8 +448,7 @@ export class StylingBuilder { const isHostBinding = !!this._directiveExpr; const reference = isHostBinding ? R3.elementHostStyleProp : R3.elementStyleProp; return this._buildSingleInputs( - reference, isHostBinding, this._singleStyleInputs, this._stylesIndex, true, - valueConverter); + reference, this._singleStyleInputs, this._stylesIndex, true, valueConverter); } return []; } @@ -476,13 +460,7 @@ export class StylingBuilder { sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null, reference, allocateBindingSlots: 0, - buildParams: () => { - // HOST: - // params => elementHostStylingApply() - // Template: - // params => elementStylingApply(elmIndex) - return isHostBinding ? [] : [this._elementIndexExpr]; - } + buildParams: () => { return []; } }; } diff --git a/packages/core/src/render3/instructions/styling.ts b/packages/core/src/render3/instructions/styling.ts index 0ec94635aa..3884b9efb5 100644 --- a/packages/core/src/render3/instructions/styling.ts +++ b/packages/core/src/render3/instructions/styling.ts @@ -154,7 +154,6 @@ function initElementStyling( * * Note that the styling element is updated as part of `elementStylingApply`. * - * @param index Index of the element's with which styling is associated. * @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`. @@ -171,8 +170,9 @@ function initElementStyling( * @codeGenApi */ export function ɵɵelementStyleProp( - index: number, styleIndex: number, value: string | number | String | PlayerFactory | null, + styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void { + const index = getSelectedIndex(); const valueToAdd = resolveStylePropValue(value, suffix); const stylingContext = getStylingContext(index, getLView()); updateElementStyleProp( @@ -244,7 +244,6 @@ function resolveStylePropValue( * therefore, the class binding itself must already be allocated using * `elementStyling` within the creation block. * - * @param index Index of the element's with which styling is associated. * @param classIndex Index of class to toggle. This index value refers to the * index of the class in the class bindings array that was passed into * `elementStyling` (which is meant to be called before this @@ -256,8 +255,8 @@ function resolveStylePropValue( * @codeGenApi */ export function ɵɵelementClassProp( - index: number, classIndex: number, value: boolean | PlayerFactory, - forceOverride?: boolean): void { + classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void { + const index = getSelectedIndex(); const input = (value instanceof BoundPlayerFactory) ? (value as BoundPlayerFactory) : booleanOrNull(value); @@ -316,15 +315,14 @@ function booleanOrNull(value: any): boolean|null { * * Note that the styling instruction will not be applied until `elementStylingApply` is called. * - * @param index Index of the element's with which styling is associated. * @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 ɵɵelementStyleMap( - index: number, styles: {[styleName: string]: any} | NO_CHANGE | null): void { +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); @@ -354,15 +352,15 @@ export function ɵɵelementStyleMap( * * Note that the styling instruction will not be applied until `elementStylingApply` is called. * - * @param index Index of the element's with which styling is associated. * @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 ɵɵelementClassMap( - index: number, classes: {[styleName: string]: any} | NO_CHANGE | string | null): void { +export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null): + void { + const index = getSelectedIndex(); const lView = getLView(); const stylingContext = getStylingContext(index, lView); const tNode = getTNode(index, lView); @@ -442,11 +440,10 @@ export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string | * `elementStyleProp` or `elementClassProp` instructions have been run and will * only apply styling to the element if any styling bindings have been updated. * - * @param index Index of the element's with which styling is associated. - * * @codeGenApi */ -export function ɵɵelementStylingApply(index: number): void { +export function ɵɵelementStylingApply(): void { + const index = getSelectedIndex(); elementStylingApplyInternal(DEFAULT_TEMPLATE_DIRECTIVE_INDEX, index); } diff --git a/packages/core/test/render3/discovery_utils_spec.ts b/packages/core/test/render3/discovery_utils_spec.ts index dee57144f3..188c11d6e6 100644 --- a/packages/core/test/render3/discovery_utils_spec.ts +++ b/packages/core/test/render3/discovery_utils_spec.ts @@ -7,7 +7,7 @@ */ import {StaticInjector} from '../../src/di/injector'; import {createInjector} from '../../src/di/r3_injector'; -import {AttributeMarker, RenderFlags, getHostElement, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵi18n, ɵɵi18nApply, ɵɵi18nExp} from '../../src/render3/index'; +import {AttributeMarker, RenderFlags, getHostElement, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵi18n, ɵɵi18nApply, ɵɵi18nExp, ɵɵselect} from '../../src/render3/index'; import {markDirty, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵlistener, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all'; import {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils'; @@ -556,7 +556,8 @@ describe('discovery utils deprecated', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStylingApply(); } } }); diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts index c366fa0b78..82425505f7 100644 --- a/packages/core/test/render3/instructions_spec.ts +++ b/packages/core/test/render3/instructions_spec.ts @@ -1016,15 +1016,17 @@ describe('instructions', () => { return createDiv(null, null, null, ['background-image'], ɵɵdefaultStyleSanitizer); }, () => {}, 1); t.update(() => { - ɵɵelementStyleProp(0, 0, 'url("http://server")'); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, 'url("http://server")'); + ɵɵelementStylingApply(); }); // nothing is set because sanitizer suppresses it. expect(t.html).toEqual('
'); t.update(() => { - ɵɵelementStyleProp(0, 0, bypassSanitizationTrustStyle('url("http://server2")')); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('url("http://server2")')); + ɵɵelementStylingApply(); }); expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image')) .toEqual('url("http://server2")'); @@ -1038,16 +1040,18 @@ describe('instructions', () => { 1, sanitizerInterceptor); t.update(() => { - ɵɵelementStyleProp(0, 0, bypassSanitizationTrustStyle('apple')); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple')); + ɵɵelementStylingApply(); }); expect(sanitizerInterceptor.lastValue !).toEqual('apple'); sanitizerInterceptor.lastValue = null; t.update(() => { - ɵɵelementStyleProp(0, 0, bypassSanitizationTrustStyle('apple')); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple')); + ɵɵelementStylingApply(); }); expect(sanitizerInterceptor.lastValue).toEqual(null); }); @@ -1063,8 +1067,9 @@ describe('instructions', () => { it('should add style', () => { const fixture = new TemplateFixture(createDivWithStyle, () => {}, 1); fixture.update(() => { - ɵɵelementStyleMap(0, {'background-color': 'red'}); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleMap({'background-color': 'red'}); + ɵɵelementStylingApply(); }); expect(fixture.html).toEqual('
'); }); @@ -1078,7 +1083,8 @@ describe('instructions', () => { sanitizerInterceptor); fixture.update(() => { - ɵɵelementStyleMap(0, { + ɵɵselect(0); + ɵɵelementStyleMap({ 'background-image': 'background-image', 'background': 'background', 'border-image': 'border-image', @@ -1087,7 +1093,7 @@ describe('instructions', () => { 'filter': 'filter', 'width': 'width' }); - ɵɵelementStylingApply(0); + ɵɵelementStylingApply(); }); const props = detectedValues.sort(); @@ -1107,8 +1113,9 @@ describe('instructions', () => { it('should add class', () => { const fixture = new TemplateFixture(createDivWithStyling, () => {}, 1); fixture.update(() => { - ɵɵelementClassMap(0, 'multiple classes'); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementClassMap('multiple classes'); + ɵɵelementStylingApply(); }); expect(fixture.html).toEqual('
'); }); diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 7f52454a6a..cdc5cc9dca 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -11,7 +11,7 @@ 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, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all'; +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 {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'; @@ -1425,8 +1425,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleProp(0, 0, ctx.color); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, ctx.color); + ɵɵelementStylingApply(); } }, 1); @@ -1452,8 +1453,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleProp(0, 0, ctx.time, 'px'); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, ctx.time, 'px'); + ɵɵelementStylingApply(); } }, 1); @@ -1486,8 +1488,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementClassProp(0, 0, ctx.class); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementClassProp(0, ctx.class); + ɵɵelementStylingApply(); } }, 1); @@ -1527,8 +1530,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementClassProp(0, 1, ctx.class); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementClassProp(1, ctx.class); + ɵɵelementStylingApply(); } }, 1); @@ -1559,8 +1563,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementClassProp(0, 0, ctx.class); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementClassProp(0, ctx.class); + ɵɵelementStylingApply(); } }, 1, 0, [MyComp]); @@ -1622,8 +1627,9 @@ describe('render3 integration test', () => { } if (rf & RenderFlags.Update) { const foo = ɵɵreference(1) as any; - ɵɵelementClassProp(2, 0, ctx.class); - ɵɵelementStylingApply(2); + ɵɵselect(2); + ɵɵelementClassProp(0, ctx.class); + ɵɵelementStylingApply(); ɵɵelementProperty(2, 'tmp', ɵɵbind(foo)); } }, 3, 1, [StructuralComp]); @@ -1685,7 +1691,8 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStylingApply(); } }, 1, 0, [DirWithClassDirective]); @@ -1707,7 +1714,8 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStylingApply(); } }, 1, 0, [DirWithStyleDirective]); @@ -1727,8 +1735,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementClassMap(0, 'cucumber grape'); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementClassMap('cucumber grape'); + ɵɵelementStylingApply(); } }, 1, 0, [DirWithClassDirective]); @@ -1748,8 +1757,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleMap(0, {width: '200px', height: '500px'}); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleMap({width: '200px', height: '500px'}); + ɵɵelementStylingApply(); } }, 1, 0, [DirWithStyleDirective]); @@ -1939,8 +1949,9 @@ describe('render3 integration test', () => { ɵɵelementStyling(null, ['width']); } if (rf & RenderFlags.Update) { - ɵɵelementStyleProp(0, 0, ctx.width); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, ctx.width); + ɵɵelementStylingApply(); } }, 1, 0, [Dir1WithStyle, Dir2WithStyle]); @@ -2040,9 +2051,10 @@ describe('render3 integration test', () => { ɵɵelementStyling(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleMap(0, ctx.stylesExp); - ɵɵelementClassMap(0, ctx.classesExp); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleMap(ctx.stylesExp); + ɵɵelementClassMap(ctx.classesExp); + ɵɵelementStylingApply(); } }, 1, 0, [Dir1WithStyling, Dir2WithStyling]); @@ -2118,8 +2130,9 @@ describe('render3 integration test', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementClassMap(0, ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-')); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementClassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-')); + ɵɵelementStylingApply(); } }, 1, 2); @@ -2618,7 +2631,8 @@ describe('element discovery', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵ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 1f4b5687dc..aed92cc106 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} from '../../../src/render3/index'; +import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementHostClassProp, ɵɵelementHostStyleProp, ɵɵelementHostStyling, ɵɵelementHostStylingApply, ɵɵ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'; @@ -396,9 +396,10 @@ describe('style and class based bindings', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleMap(0, ctx.myStyles); - ɵɵelementStyleProp(0, 0, ctx.myWidth); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleMap(ctx.myStyles); + ɵɵelementStyleProp(0, ctx.myWidth); + ɵɵelementStylingApply(); } } @@ -434,9 +435,10 @@ describe('style and class based bindings', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleProp(0, 0, ctx.diameter, 'px'); - ɵɵelementStyleProp(0, 1, ctx.diameter, 'px'); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, ctx.diameter, 'px'); + ɵɵelementStyleProp(1, ctx.diameter, 'px'); + ɵɵelementStylingApply(); } } }); @@ -473,9 +475,10 @@ describe('style and class based bindings', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleProp(0, 0, ctx.borderWidth); - ɵɵelementStyleProp(0, 1, ctx.borderColor); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, ctx.borderWidth); + ɵɵelementStyleProp(1, ctx.borderColor); + ɵɵelementStylingApply(); } } }); @@ -3110,11 +3113,12 @@ describe('style and class based bindings', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleMap(0, styleMapFactory); - ɵɵelementClassMap(0, classMapFactory); - ɵɵelementStyleProp(0, 0, widthFactory); - ɵɵelementClassProp(0, 0, fooFactory); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleMap(styleMapFactory); + ɵɵelementClassMap(classMapFactory); + ɵɵelementStyleProp(0, widthFactory); + ɵɵelementClassProp(0, fooFactory); + ɵɵelementStylingApply(); } } }); @@ -3184,11 +3188,12 @@ describe('style and class based bindings', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleMap(0, styleMapFactory); - ɵɵelementClassMap(0, classMapFactory); - ɵɵelementStyleProp(0, 0, widthFactory); - ɵɵelementClassProp(0, 0, fooFactory); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleMap(styleMapFactory); + ɵɵelementClassMap(classMapFactory); + ɵɵelementStyleProp(0, widthFactory); + ɵɵelementClassProp(0, fooFactory); + ɵɵelementStylingApply(); } } }); @@ -3281,9 +3286,10 @@ describe('style and class based bindings', () => { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStyleProp(0, 0, ctx.widthFactory); - ɵɵelementClassProp(0, 0, ctx.fooFactory); - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStyleProp(0, ctx.widthFactory); + ɵɵelementClassProp(0, ctx.fooFactory); + ɵɵelementStylingApply(); } } }); diff --git a/packages/core/test/render3/styling/players_spec.ts b/packages/core/test/render3/styling/players_spec.ts index f92b65d141..bc490633a5 100644 --- a/packages/core/test/render3/styling/players_spec.ts +++ b/packages/core/test/render3/styling/players_spec.ts @@ -9,7 +9,7 @@ import {QueryList} from '@angular/core'; import {RenderFlags} from '@angular/core/src/render3'; import {getHostElement, ɵɵdefineComponent, ɵɵloadViewQuery, ɵɵviewQuery} from '../../../src/render3/index'; -import {markDirty, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply} from '../../../src/render3/instructions/all'; +import {markDirty, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵselect} from '../../../src/render3/instructions/all'; import {PlayState, Player, PlayerHandler} from '../../../src/render3/interfaces/player'; import {RElement} from '../../../src/render3/interfaces/renderer'; import {addPlayer, getPlayers} from '../../../src/render3/players'; @@ -262,7 +262,8 @@ class CompWithStyling { ɵɵelementEnd(); } if (rf & RenderFlags.Update) { - ɵɵelementStylingApply(0); + ɵɵselect(0); + ɵɵelementStylingApply(); } } }); diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts index 12109c6af9..b020d582a1 100644 --- a/tools/public_api_guard/core/core.d.ts +++ b/tools/public_api_guard/core/core.d.ts @@ -795,11 +795,11 @@ export declare function ɵɵelement(index: number, name: string, attrs?: TAttrib export declare function ɵɵelementAttribute(index: number, name: string, value: any, sanitizer?: SanitizerFn | null, namespace?: string): void; -export declare function ɵɵelementClassMap(index: number, classes: { +export declare function ɵɵelementClassMap(classes: { [styleName: string]: any; } | NO_CHANGE | string | null): void; -export declare function ɵɵelementClassProp(index: number, classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void; +export declare function ɵɵelementClassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void; export declare function ɵɵelementContainerEnd(): void; @@ -829,15 +829,15 @@ export declare function ɵɵelementProperty(index: number, propName: string, export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void; -export declare function ɵɵelementStyleMap(index: number, styles: { +export declare function ɵɵelementStyleMap(styles: { [styleName: string]: any; } | NO_CHANGE | null): void; -export declare function ɵɵelementStyleProp(index: number, styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void; +export declare function ɵɵelementStyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void; export declare function ɵɵelementStyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void; -export declare function ɵɵelementStylingApply(index: number): void; +export declare function ɵɵelementStylingApply(): void; export declare function ɵɵembeddedViewEnd(): void;