cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ivy): migrate all host-specific styling instructions to element-level styling instructions (#30336)

Browse Source 
This patch removes all host-specific styling instructions in favor of
using element-level instructions instead. Because of the previous
patches that made sure `select(n)` worked between styling calls, all
host level instructions are not needed anymore. This patch changes each
of those instruction calls to use any of the `elementStyling*`,
`elementStyle*` and `elementClass*` styling instructions instead.

PR Close #30336
This commit is contained in:
Matias Niemelä
2019-05-08 10:18:33 -07:00
committed by Alex Rickabaugh
parent 452f121486
commit c016e2c4ec
17 changed files with 212 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -111,6 +111,11 @@ export function renderComponent<T>(
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<T>(componentType) !;

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

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

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

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

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

@ -39,14 +39,6 @@ import {scheduleTick, setInputsForProperty} from './shared';
* - elementStyleProp
* - 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<typeof updateElementStyleProp> =
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementStyleProp> =
[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<boolean|null>) :
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<boolean|null>) :
booleanOrNull(value);
const args: ParamsOf<typeof updateElementClassProp> =
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
const stylingContext = getStylingContext(index, getLView());
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementClassProp> =
[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<typeof updateStyleMap> = [stylingContext, styles, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateStyleMap, args);
} else {
const tNode = getTNode(index, lView);
// inputs are only evaluated from a template binding into a directive, therefore,
// 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<typeof updateClassMap> = [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<typeof updateStyleMap> = [stylingContext, styles, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateStyleMap, args);
}
/**
* Update class host bindings using object literals on an element within the host
* bindings function for a directive/component.
*
* This instruction is meant to apply styling via the `@HostBinding('class')`
* host bindings for a component's or directive's host element.
* When classes are applied to the host element they will then be updated
* with respect to any other classes set with `elementHostClassProp`. If
* any classes are set to falsy then they will be removed from the element.
*
* Note that the styling instruction will not be applied until
* `elementHostStylingApply` is called.
*
* @param classes A key/value map or string of CSS classes that will be added to the
* given element. Any missing classes (that have already been applied to the element
* beforehand) will be removed (unset) from the element's list of CSS classes.
*
* @codeGenApi
*/
export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string | NO_CHANGE | null):
void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const args: ParamsOf<typeof updateClassMap> = [stylingContext, classes, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args);
}
/**
@ -444,24 +314,8 @@ export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string |
*/
export function ɵɵelementStylingApply(): void {
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);

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

@ -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,

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

@ -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;
}