cargdev/angular
1
0
Fork 0
Code Issues 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

13
packages/compiler/src/render3/r3_identifiers.ts
View File

@ -41,7 +41,7 @@ export class Identifiers {
static elementAttribute: o.ExternalReference = {name: 'ɵɵelementAttribute', moduleName: CORE};
static elementClassProp: o.ExternalReference = {name: 'ɵɵelementClassProp', moduleName: CORE};
static classProp: o.ExternalReference = {name: 'ɵɵclassProp', moduleName: CORE};
static elementContainerStart:
o.ExternalReference = {name: 'ɵɵelementContainerStart', moduleName: CORE};
@ -49,16 +49,15 @@ export class Identifiers {
static elementContainerEnd:
o.ExternalReference = {name: 'ɵɵelementContainerEnd', moduleName: CORE};
static elementStyling: o.ExternalReference = {name: 'ɵɵelementStyling', moduleName: CORE};
static styling: o.ExternalReference = {name: 'ɵɵstyling', moduleName: CORE};
static elementStyleMap: o.ExternalReference = {name: 'ɵɵelementStyleMap', moduleName: CORE};
static styleMap: o.ExternalReference = {name: 'ɵɵstyleMap', moduleName: CORE};
static elementClassMap: o.ExternalReference = {name: 'ɵɵelementClassMap', moduleName: CORE};
static classMap: o.ExternalReference = {name: 'ɵɵclassMap', moduleName: CORE};
static elementStyleProp: o.ExternalReference = {name: 'ɵɵelementStyleProp', moduleName: CORE};
static styleProp: o.ExternalReference = {name: 'ɵɵstyleProp', moduleName: CORE};
static elementStylingApply:
o.ExternalReference = {name: 'ɵɵelementStylingApply', moduleName: CORE};
static stylingApply: o.ExternalReference = {name: 'ɵɵstylingApply', moduleName: CORE};
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};

10
packages/compiler/src/render3/view/compiler.ts
View File

@ -715,12 +715,10 @@ function createHostBindingsFunction(
// MUST be registered on a given element within the component/directive
// templateFn/hostBindingsFn functions. The instruction below will figure out
// what all the bindings are and then generate the statements required to register
// those bindings to the element via `elementStyling`.
const elementStylingInstruction =
styleBuilder.buildElementStylingInstruction(null, constantPool);
if (elementStylingInstruction) {
createStatements.push(
createStylingStmt(elementStylingInstruction, bindingContext, bindingFn));
// those bindings to the element via `styling`.
const stylingInstruction = styleBuilder.buildStylingInstruction(null, constantPool);
if (stylingInstruction) {
createStatements.push(createStylingStmt(stylingInstruction, bindingContext, bindingFn));
}
// finally each binding that was registered in the statement above will need to be added to

52
packages/compiler/src/render3/view/styling_builder.ts
View File

@ -58,14 +58,14 @@ interface BoundStylingEntry {
* order which these must be generated is as follows:
*
* if (createMode) {
* elementStyling(...)
* styling(...)
* }
* if (updateMode) {
* elementStyleMap(...)
* elementClassMap(...)
* elementStyleProp(...)
* elementClassProp(...)
* elementStylingApp(...)
* styleMap(...)
* classMap(...)
* styleProp(...)
* classProp(...)
* stylingApp(...)
* }
*
* The creation/update methods within the builder class produce these instructions.
@ -277,18 +277,18 @@ export class StylingBuilder {
}
/**
* Builds an instruction with all the expressions and parameters for `elementStyling`.
* Builds an instruction with all the expressions and parameters for `styling`.
*
* The instruction generation code below is used for producing the AOT statement code which is
* responsible for registering style/class bindings to an element.
*/
buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool):
Instruction|null {
buildStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool): Instruction
|null {
if (this.hasBindings) {
return {
sourceSpan,
allocateBindingSlots: 0,
reference: R3.elementStyling,
reference: R3.styling,
buildParams: () => {
// a string array of every style-based binding
const styleBindingProps =
@ -303,8 +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.
//
// min params => elementStyling()
// max params => elementStyling(classBindings, styleBindings, sanitizer)
// min params => styling()
// max params => styling(classBindings, styleBindings, sanitizer)
//
const params: o.Expression[] = [];
let expectedNumberOfArgs = 0;
@ -335,12 +335,12 @@ export class StylingBuilder {
}
/**
* Builds an instruction with all the expressions and parameters for `elementClassMap`.
* Builds an instruction with all the expressions and parameters for `classMap`.
*
* The instruction data will contain all expressions for `elementClassMap` to function
* The instruction data will contain all expressions for `classMap` to function
* which includes the `[class]` expression params.
*/
buildElementClassMapInstruction(valueConverter: ValueConverter): Instruction|null {
buildClassMapInstruction(valueConverter: ValueConverter): Instruction|null {
if (this._classMapInput) {
return this._buildMapBasedInstruction(valueConverter, true, this._classMapInput);
}
@ -348,12 +348,12 @@ export class StylingBuilder {
}
/**
* Builds an instruction with all the expressions and parameters for `elementStyleMap`.
* Builds an instruction with all the expressions and parameters for `styleMap`.
*
* The instruction data will contain all expressions for `elementStyleMap` to function
* The instruction data will contain all expressions for `styleMap` to function
* which includes the `[style]` expression params.
*/
buildElementStyleMapInstruction(valueConverter: ValueConverter): Instruction|null {
buildStyleMapInstruction(valueConverter: ValueConverter): Instruction|null {
if (this._styleMapInput) {
return this._buildMapBasedInstruction(valueConverter, false, this._styleMapInput);
}
@ -372,7 +372,7 @@ export class StylingBuilder {
totalBindingSlotsRequired += mapValue.expressions.length;
}
const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap;
const reference = isClassBased ? R3.classMap : R3.styleMap;
return {
sourceSpan: stylingInput.sourceSpan,
reference,
@ -393,8 +393,8 @@ export class StylingBuilder {
sourceSpan: input.sourceSpan,
allocateBindingSlots: totalBindingSlotsRequired, reference,
buildParams: (convertFn: (value: any) => o.Expression) => {
// min params => elementStylingProp(elmIndex, bindingIndex, value)
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
// min params => stylingProp(elmIndex, bindingIndex, value)
// max params => stylingProp(elmIndex, bindingIndex, value, overrideFlag)
const params: o.Expression[] = [];
params.push(o.literal(bindingIndex));
params.push(convertFn(value));
@ -420,7 +420,7 @@ export class StylingBuilder {
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleClassInputs) {
return this._buildSingleInputs(
R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
R3.classProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
}
return [];
}
@ -428,7 +428,7 @@ export class StylingBuilder {
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleStyleInputs) {
return this._buildSingleInputs(
R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
R3.styleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
}
return [];
}
@ -436,7 +436,7 @@ export class StylingBuilder {
private _buildApplyFn(): Instruction {
return {
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
reference: R3.elementStylingApply,
reference: R3.stylingApply,
allocateBindingSlots: 0,
buildParams: () => { return []; }
};
@ -449,11 +449,11 @@ export class StylingBuilder {
buildUpdateLevelInstructions(valueConverter: ValueConverter) {
const instructions: Instruction[] = [];
if (this.hasBindings) {
const styleMapInstruction = this.buildElementStyleMapInstruction(valueConverter);
const styleMapInstruction = this.buildStyleMapInstruction(valueConverter);
if (styleMapInstruction) {
instructions.push(styleMapInstruction);
}
const classMapInstruction = this.buildElementClassMapInstruction(valueConverter);
const classMapInstruction = this.buildClassMapInstruction(valueConverter);
if (classMapInstruction) {
instructions.push(classMapInstruction);
}

15
packages/compiler/src/render3/view/template.ts
View File

@ -660,15 +660,14 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
}
// The style bindings code is placed into two distinct blocks within the template function AOT
// code: creation and update. The creation code contains the `elementStyling` instructions
// which will apply the collected binding values to the element. `elementStyling` is
// code: creation and update. The creation code contains the `styling` instructions
// which will apply the collected binding values to the element. `styling` is
// designed to run inside of `elementStart` and `elementEnd`. The update instructions
// (things like `elementStyleProp`, `elementClassProp`, etc..) are applied later on in this
// (things like `styleProp`, `classProp`, etc..) are applied later on in this
// file
this.processStylingInstruction(
elementIndex, implicit,
stylingBuilder.buildElementStylingInstruction(element.sourceSpan, this.constantPool),
true);
stylingBuilder.buildStylingInstruction(element.sourceSpan, this.constantPool), true);
// Generate Listeners (outputs)
element.outputs.forEach((outputAst: t.BoundEvent) => {
@ -685,8 +684,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
}
// the code here will collect all update-level styling instructions and add them to the
// update block of the template function AOT code. Instructions like `elementStyleProp`,
// `elementStyleMap`, `elementClassMap`, `elementClassProp` and `elementStylingApply`
// update block of the template function AOT code. Instructions like `styleProp`,
// `styleMap`, `classMap`, `classProp` and `stylingApply`
// are all generated and assigned in the code below.
const stylingInstructions = stylingBuilder.buildUpdateLevelInstructions(this._valueConverter);
const limit = stylingInstructions.length - 1;
@ -772,7 +771,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
let instruction: any;
if (inputType === BindingType.Class) {
instruction = R3.elementClassProp;
instruction = R3.classProp;
} else {
instruction = R3.elementAttribute;
}