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