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

refactor(ivy): drop element prefixes for all styling-related instructions (#30318)

Browse Source 
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ä
2019-05-08 11:26:40 -07:00
committed by Alex Rickabaugh
parent c016e2c4ec
commit d8665e639b
25 changed files with 386 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,12 +110,12 @@ export {
ɵɵelementAttribute,
ɵɵelementContainerStart,
ɵɵelementContainerEnd,
ɵɵelementStyling,
ɵɵelementStyleMap,
ɵɵelementClassMap,
ɵɵelementStyleProp,
ɵɵelementStylingApply,
ɵɵelementClassProp,
ɵɵstyling,
ɵɵstyleMap,
ɵɵclassMap,
ɵɵstyleProp,
ɵɵstylingApply,
ɵɵclassProp,
ɵɵelementHostAttrs,
ɵɵselect,

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

@ -23,6 +23,8 @@ export {
tick,
ɵɵallocHostVars,
ɵɵbind,
ɵɵclassMap,
ɵɵclassProp,
ɵɵcomponentHostSyntheticListener,
ɵɵcomponentHostSyntheticProperty,
@ -34,8 +36,6 @@ export {
ɵɵelement,
ɵɵelementAttribute,
ɵɵelementClassMap,
ɵɵelementClassProp,
ɵɵelementContainerEnd,
ɵɵelementContainerStart,
@ -44,10 +44,6 @@ export {
ɵɵelementHostAttrs,
ɵɵelementProperty,
ɵɵelementStart,
ɵɵelementStyleMap,
ɵɵelementStyleProp,
ɵɵelementStyling,
ɵɵelementStylingApply,
ɵɵembeddedViewEnd,
ɵɵembeddedViewStart,
@ -91,6 +87,10 @@ export {
ɵɵreference,
ɵɵselect,
ɵɵstyleMap,
ɵɵstyleProp,
ɵɵstyling,
ɵɵstylingApply,
ɵɵtemplate,
ɵɵtext,

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

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

36
packages/core/src/render3/interfaces/styling.ts
View File

@ -51,7 +51,7 @@ import {LView} from './view';
* Once the styling context is created then single and multi properties can be stored within it.
* For this to happen, the following function needs to be called:
*
* `elementStyling` (called with style properties, class properties and a sanitizer + a directive
* `styling` (called with style properties, class properties and a sanitizer + a directive
* instance).
*
* When this instruction is called it will populate the styling context with the provided style
@ -122,8 +122,8 @@ import {LView} from './view';
* values are and how they work.
*
* Each time a binding property is updated (whether it be through a single
* property instruction like `elementStyleProp`, `elementClassProp`,
* `elementStyleMap` or `elementClassMap`) then the values in the context will be updated as
* property instruction like `styleProp`, `classProp`,
* `styleMap` or `classMap`) then the values in the context will be updated as
* well.
*
* If for example `[style.width]` updates to `555px` then its value will be reflected
@ -142,9 +142,9 @@ import {LView} from './view';
*
* Despite the context being updated, nothing has been rendered on screen (not styles or
* classes have been set on the element). To kick off rendering for an element the following
* function needs to be run `elementStylingApply`.
* function needs to be run `stylingApply`.
*
* `elementStylingApply` will run through the context and find each dirty value and render them onto
* `stylingApply` will run through the context and find each dirty value and render them onto
* the element. Once complete, all styles/classes will be set to clean. Because of this, the render
* function will now know not to rerun itself again if called again unless new style/class values
* have changed.
@ -158,12 +158,12 @@ import {LView} from './view';
* Each of the following instructions supports accepting a directive instance as an input parameter:
*
* - `elementHostAttrs`
* - `elementStyling`
* - `elementStyleProp`
* - `elementClassProp`
* - `elementStyleMap`
* - `elementClassMap`
* - `elementStylingApply`
* - `styling`
* - `styleProp`
* - `classProp`
* - `styleMap`
* - `classMap`
* - `stylingApply`
*
* Each time a directive value is passed in, it will be converted into an index by examining the
* directive registry (which lives in the context configuration area). The index is then used
@ -257,7 +257,7 @@ import {LView} from './view';
*
* ## Rendering
* The rendering mechanism (when the styling data is applied on screen) occurs via the
* `elementStylingApply` function and is designed to run after **all** styling functions have been
* `stylingApply` function and is designed to run after **all** styling functions have been
* evaluated. The rendering algorithm will loop over the context and only apply the styles that are
* flagged as dirty (either because they are new, updated or have been removed via multi or
* single bindings).
@ -293,19 +293,19 @@ export interface StylingContext extends
/**
* A numeric value representing the class index offset value. Whenever a single class is
* applied (using `elementClassProp`) it should have an styling index value that doesn't
* applied (using `classProp`) it should have an styling index value that doesn't
* need to take into account any style values that exist in the context.
*/
[StylingIndex.SinglePropOffsetPositions]: SinglePropOffsetValues;
/**
* The last class value that was interpreted by `elementStyleMap`. This is cached
* The last class value that was interpreted by `styleMap`. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.CachedMultiClasses]: any|MapBasedOffsetValues;
/**
* The last style value that was interpreted by `elementClassMap`. This is cached
* The last style value that was interpreted by `classMap`. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.CachedMultiStyles]: any|MapBasedOffsetValues;
@ -319,7 +319,7 @@ export interface StylingContext extends
* standard angular instructions, they are not designed to immediately apply
* their values to the styling context when executed. What happens instead is
* a queue is constructed and each instruction is populated into the queue.
* Then, once the style/class values are set to flush (via `elementStylingApply` or
* Then, once the style/class values are set to flush (via `stylingApply` or
* `hostStylingApply`), the queue is flushed and the values are rendered onto
* the host element.
*/
@ -337,7 +337,7 @@ export interface StylingContext extends
* the styling is applied).
*
* This queue is used when any `hostStyling` instructions are executed from the `hostBindings`
* function. Template-level styling functions (e.g. `elementStyleMap` and `elementClassProp`)
* function. Template-level styling functions (e.g. `styleMap` and `classProp`)
* do not make use of this queue (they are applied to the styling context immediately).
*
* Due to the nature of how components/directives are evaluated, directives (both parent and
@ -371,7 +371,7 @@ export interface StylingContext extends
* inside of `renderStyling`).
*
* Right now each directive's hostBindings function, as well the template function, both
* call `elementStylingApply()` and `hostStylingApply()`. The fact that this is called
* call `stylingApply()` and `hostStylingApply()`. The fact that this is called
* multiple times for the same element (b/c of change detection) causes some issues. To avoid
* having styling code be rendered on an element multiple times, the `HostInstructionsQueue`
* reserves a slot for a reference pointing to the very last directive that was registered and

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

@ -106,12 +106,12 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵɵloadContentQuery': r3.ɵɵloadContentQuery,
'ɵɵreference': r3.ɵɵreference,
'ɵɵelementHostAttrs': r3.ɵɵelementHostAttrs,
'ɵɵelementClassMap': r3.ɵɵelementClassMap,
'ɵɵelementStyling': r3.ɵɵelementStyling,
'ɵɵelementStyleMap': r3.ɵɵelementStyleMap,
'ɵɵelementStyleProp': r3.ɵɵelementStyleProp,
'ɵɵelementStylingApply': r3.ɵɵelementStylingApply,
'ɵɵelementClassProp': r3.ɵɵelementClassProp,
'ɵɵclassMap': r3.ɵɵclassMap,
'ɵɵstyling': r3.ɵɵstyling,
'ɵɵstyleMap': r3.ɵɵstyleMap,
'ɵɵstyleProp': r3.ɵɵstyleProp,
'ɵɵstylingApply': r3.ɵɵstylingApply,
'ɵɵclassProp': r3.ɵɵclassProp,
'ɵɵselect': r3.ɵɵselect,
'ɵɵtemplate': r3.ɵɵtemplate,
'ɵɵtext': r3.ɵɵtext,

4
packages/core/src/render3/styling/class_and_style_bindings.ts
View File

@ -235,8 +235,8 @@ export function updateContextWithBindings(
// because we're inserting more bindings into the context, this means that the
// binding values need to be referenced the singlePropOffsetValues array so that
// the template/directive can easily find them inside of the `elementStyleProp`
// and the `elementClassProp` functions without iterating through the entire context.
// the template/directive can easily find them inside of the `styleProp`
// and the `classProp` functions without iterating through the entire context.
// The first step to setting up these reference points is to mark how many bindings
// are being added. Even if these bindings already exist in the context, the directive
// or template code will still call them unknowingly. Therefore the total values need

2
packages/core/src/render3/styling/util.ts
View File

@ -121,7 +121,7 @@ export function allocStylingContext(
* every style declaration such as `<div style="color: red">` would result `StyleContext`
* which would create unnecessary memory pressure.
*
* @param index Index of the style allocation. See: `elementStyling`.
* @param index Index of the style allocation. See: `styling`.
* @param viewData The view to search for the styling context
*/
export function getStylingContextFromLView(index: number, viewData: LView): StylingContext {