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

refactor(ivy): move classMap interpolation logic internally (#31211)

Browse Source 
Adds the new `classMapInterpolate1` through `classMapInterpolate8` instructions which handle interpolations inside the `class` attribute and moves the interpolation logic internally. This allows us to remove the `interpolationX` instructions in a follow-up PR.

These changes also add an error if an interpolation is encountered inside a `style` tag (e.g. `style="width: {{value}}"`). Up until now this would actually generate valid instructions, because `styleMap` goes through the same code path as `classMap` which does support interpolation. At runtime, however, `styleMap` would set invalid styles that look like `<div style="0:w;1:i;2:d;3:t;4:h;5::;7:1;">`. In `ViewEngine` interpolations inside `style` weren't supported either, however there we'd output invalid styles like `<div style="unsafe">`, even if the content was trusted.

PR Close #31211
This commit is contained in:
crisbeto
2019-06-27 18:57:09 +02:00
committed by Alex Rickabaugh
parent dca713c087
commit 02491a6ce8
15 changed files with 1469 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,7 +130,25 @@ export {
ɵɵstyling,
ɵɵstyleMap,
ɵɵclassMap,
ɵɵclassMapInterpolate1,
ɵɵclassMapInterpolate2,
ɵɵclassMapInterpolate3,
ɵɵclassMapInterpolate4,
ɵɵclassMapInterpolate5,
ɵɵclassMapInterpolate6,
ɵɵclassMapInterpolate7,
ɵɵclassMapInterpolate8,
ɵɵclassMapInterpolateV,
ɵɵstyleProp,
ɵɵstylePropInterpolate1,
ɵɵstylePropInterpolate2,
ɵɵstylePropInterpolate3,
ɵɵstylePropInterpolate4,
ɵɵstylePropInterpolate5,
ɵɵstylePropInterpolate6,
ɵɵstylePropInterpolate7,
ɵɵstylePropInterpolate8,
ɵɵstylePropInterpolateV,
ɵɵstylingApply,
ɵɵclassProp,
ɵɵelementHostAttrs,

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

@ -36,6 +36,16 @@ export {
ɵɵattributeInterpolateV,
ɵɵclassMap,
ɵɵclassMapInterpolate1,
ɵɵclassMapInterpolate2,
ɵɵclassMapInterpolate3,
ɵɵclassMapInterpolate4,
ɵɵclassMapInterpolate5,
ɵɵclassMapInterpolate6,
ɵɵclassMapInterpolate7,
ɵɵclassMapInterpolate8,
ɵɵclassMapInterpolateV,
ɵɵclassProp,
ɵɵcomponentHostSyntheticListener,
@ -97,7 +107,18 @@ export {
ɵɵselect,
ɵɵstyleMap,
ɵɵstyleProp,
ɵɵstylePropInterpolate1,
ɵɵstylePropInterpolate2,
ɵɵstylePropInterpolate3,
ɵɵstylePropInterpolate4,
ɵɵstylePropInterpolate5,
ɵɵstylePropInterpolate6,
ɵɵstylePropInterpolate7,
ɵɵstylePropInterpolate8,
ɵɵstylePropInterpolateV,
ɵɵstyleSanitizer,
ɵɵstyling,
ɵɵstylingApply,

2
packages/core/src/render3/instructions/all.ts
View File

@ -48,3 +48,5 @@ export * from './styling';
export {styleSanitizer as ɵɵstyleSanitizer} from '../styling_next/instructions';
export * from './text';
export * from './text_interpolation';
export * from './class_map_interpolation';
export * from './style_prop_interpolation';

353
packages/core/src/render3/instructions/class_map_interpolation.ts Normal file
View File

@ -0,0 +1,353 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {NO_CHANGE} from '../tokens';
import {ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV} from './interpolation';
import {ɵɵclassMap} from './styling';
/**
*
* Update an interpolated class on an element with single bound value surrounded by text.
*
* Used when the value passed to a property has 1 interpolated value in it:
*
* ```html
* <div class="prefix{{v0}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate1('prefix', v0, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate1(prefix: string, v0: any, suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation1(prefix, v0, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 2 bound values surrounded by text.
*
* Used when the value passed to a property has 2 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate2('prefix', v0, '-', v1, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate2(
prefix: string, v0: any, i0: string, v1: any, suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation2(prefix, v0, i0, v1, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 3 bound values surrounded by text.
*
* Used when the value passed to a property has 3 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate3(
* 'prefix', v0, '-', v1, '-', v2, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate3(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation3(prefix, v0, i0, v1, i1, v2, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 4 bound values surrounded by text.
*
* Used when the value passed to a property has 4 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate4(
* 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate4(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 5 bound values surrounded by text.
*
* Used when the value passed to a property has 5 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate5(
* 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate5(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 6 bound values surrounded by text.
*
* Used when the value passed to a property has 6 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate6(
* 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate6(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue =
ɵɵinterpolation6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 7 bound values surrounded by text.
*
* Used when the value passed to a property has 7 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate7(
* 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param i5 Static value used for concatenation only.
* @param v6 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate7(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue =
ɵɵinterpolation7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
*
* Update an interpolated class on an element with 8 bound values surrounded by text.
*
* Used when the value passed to a property has 8 interpolated values in it:
*
* ```html
* <div class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolate8(
* 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param i5 Static value used for concatenation only.
* @param v6 Value checked for change.
* @param i6 Static value used for concatenation only.
* @param v7 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵclassMapInterpolate8(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
suffix: string): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue =
ɵɵinterpolation8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}
/**
* Update an interpolated class on an element with 8 or more bound values surrounded by text.
*
* Used when the number of interpolated values exceeds 7.
*
* ```html
* <div
* class="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵclassMapInterpolateV(
* ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,
* 'suffix']);
* ```
*.
* @param values The a collection of values and the strings in-between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
* @codeGenApi
*/
export function ɵɵclassMapInterpolateV(values: any[]): void {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolationV(values);
if (interpolatedValue !== NO_CHANGE) {
ɵɵclassMap(interpolatedValue);
}
}

425
packages/core/src/render3/instructions/style_prop_interpolation.ts Normal file
View File

@ -0,0 +1,425 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {NO_CHANGE} from '../tokens';
import {ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV} from './interpolation';
import {TsickleIssue1009} from './shared';
import {ɵɵstyleProp} from './styling';
/**
*
* Update an interpolated style property on an element with single bound value surrounded by text.
*
* Used when the value passed to a property has 1 interpolated value in it:
*
* ```html
* <div style.color="prefix{{v0}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate1(0, 'prefix', v0, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate1(
styleIndex: number, prefix: string, v0: any, suffix: string, valueSuffix?: string | null,
forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation1(prefix, v0, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate1;
}
/**
*
* Update an interpolated style property on an element with 2 bound values surrounded by text.
*
* Used when the value passed to a property has 2 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate2(0, 'prefix', v0, '-', v1, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate2(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, suffix: string,
valueSuffix?: string | null, forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation2(prefix, v0, i0, v1, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate2;
}
/**
*
* Update an interpolated style property on an element with 3 bound values surrounded by text.
*
* Used when the value passed to a property has 3 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}-{{v2}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate3(0, 'prefix', v0, '-', v1, '-', v2, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate3(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
suffix: string, valueSuffix?: string | null, forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation3(prefix, v0, i0, v1, i1, v2, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate3;
}
/**
*
* Update an interpolated style property on an element with 4 bound values surrounded by text.
*
* Used when the value passed to a property has 4 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate4(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate4(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
i2: string, v3: any, suffix: string, valueSuffix?: string | null,
forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate4;
}
/**
*
* Update an interpolated style property on an element with 5 bound values surrounded by text.
*
* Used when the value passed to a property has 5 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate5(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate5(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
i2: string, v3: any, i3: string, v4: any, suffix: string, valueSuffix?: string | null,
forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue = ɵɵinterpolation5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate5;
}
/**
*
* Update an interpolated style property on an element with 6 bound values surrounded by text.
*
* Used when the value passed to a property has 6 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate6(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate6(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, suffix: string,
valueSuffix?: string | null, forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue =
ɵɵinterpolation6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate6;
}
/**
*
* Update an interpolated style property on an element with 7 bound values surrounded by text.
*
* Used when the value passed to a property has 7 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate7(
* 0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param i5 Static value used for concatenation only.
* @param v6 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate7(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any,
suffix: string, valueSuffix?: string | null, forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue =
ɵɵinterpolation7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate7;
}
/**
*
* Update an interpolated style property on an element with 8 bound values surrounded by text.
*
* Used when the value passed to a property has 8 interpolated values in it:
*
* ```html
* <div style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolate8(0, 'prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6,
* '-', v7, 'suffix');
* ```
*
* @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
* `styling`.
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param i5 Static value used for concatenation only.
* @param v6 Value checked for change.
* @param i6 Static value used for concatenation only.
* @param v7 Value checked for change.
* @param suffix Static value used for concatenation only.
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolate8(
styleIndex: number, prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
i2: string, v3: any, i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string,
v7: any, suffix: string, valueSuffix?: string | null,
forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolatedValue =
ɵɵinterpolation8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
if (interpolatedValue !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolatedValue as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolate8;
}
/**
* Update an interpolated style property on an element with 8 or more bound values surrounded by
* text.
*
* Used when the number of interpolated values exceeds 7.
*
* ```html
* <div
* style.color="prefix{{v0}}-{{v1}}-{{v2}}-{{v3}}-{{v4}}-{{v5}}-{{v6}}-{{v7}}-{{v8}}-{{v9}}suffix">
* </div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstylePropInterpolateV(
* 0, ['prefix', v0, '-', v1, '-', v2, '-', v3, '-', v4, '-', v5, '-', v6, '-', v7, '-', v9,
* 'suffix']);
* ```
*
* @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
* `styling`..
* @param values The a collection of values and the strings in-between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.
* @param forceOverride Whether or not to update the styling value immediately.
* @returns itself, so that it may be chained.
* @codeGenApi
*/
export function ɵɵstylePropInterpolateV(
styleIndex: number, values: any[], valueSuffix?: string | null,
forceOverride?: boolean): TsickleIssue1009 {
// TODO(FW-1340): Refactor to remove the use of other instructions here.
const interpolated = ɵɵinterpolationV(values);
if (interpolated !== NO_CHANGE) {
ɵɵstyleProp(styleIndex, interpolated as string, valueSuffix, forceOverride);
}
return ɵɵstylePropInterpolateV;
}

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

@ -310,7 +310,7 @@ export function ɵɵstyleMap(styles: {[styleName: string]: any} | NO_CHANGE | nu
*
* @codeGenApi
*/
export function ɵɵclassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null): void {
export function ɵɵclassMap(classes: {[styleName: string]: any} | string | null): void {
const index = getSelectedIndex();
const lView = getLView();
const stylingContext = getStylingContext(index, lView);
@ -323,7 +323,7 @@ export function ɵɵclassMap(classes: {[styleName: string]: any} | NO_CHANGE | s
// 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) {
if (hasClassInput(tNode)) {
const initialClasses = getInitialClassNameValue(stylingContext);
const classInputVal =
(initialClasses.length ? (initialClasses + ' ') : '') + forceClassesAsString(classes);

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

@ -115,9 +115,27 @@ export const angularCoreEnv: {[name: string]: Function} =
'ɵɵreference': r3.ɵɵreference,
'ɵɵelementHostAttrs': r3.ɵɵelementHostAttrs,
'ɵɵclassMap': r3.ɵɵclassMap,
'ɵɵclassMapInterpolate1': r3.ɵɵclassMapInterpolate1,
'ɵɵclassMapInterpolate2': r3.ɵɵclassMapInterpolate2,
'ɵɵclassMapInterpolate3': r3.ɵɵclassMapInterpolate3,
'ɵɵclassMapInterpolate4': r3.ɵɵclassMapInterpolate4,
'ɵɵclassMapInterpolate5': r3.ɵɵclassMapInterpolate5,
'ɵɵclassMapInterpolate6': r3.ɵɵclassMapInterpolate6,
'ɵɵclassMapInterpolate7': r3.ɵɵclassMapInterpolate7,
'ɵɵclassMapInterpolate8': r3.ɵɵclassMapInterpolate8,
'ɵɵclassMapInterpolateV': r3.ɵɵclassMapInterpolateV,
'ɵɵstyling': r3.ɵɵstyling,
'ɵɵstyleMap': r3.ɵɵstyleMap,
'ɵɵstyleProp': r3.ɵɵstyleProp,
'ɵɵstylePropInterpolate1': r3.ɵɵstylePropInterpolate1,
'ɵɵstylePropInterpolate2': r3.ɵɵstylePropInterpolate2,
'ɵɵstylePropInterpolate3': r3.ɵɵstylePropInterpolate3,
'ɵɵstylePropInterpolate4': r3.ɵɵstylePropInterpolate4,
'ɵɵstylePropInterpolate5': r3.ɵɵstylePropInterpolate5,
'ɵɵstylePropInterpolate6': r3.ɵɵstylePropInterpolate6,
'ɵɵstylePropInterpolate7': r3.ɵɵstylePropInterpolate7,
'ɵɵstylePropInterpolate8': r3.ɵɵstylePropInterpolate8,
'ɵɵstylePropInterpolateV': r3.ɵɵstylePropInterpolateV,
'ɵɵstyleSanitizer': r3.ɵɵstyleSanitizer,
'ɵɵstylingApply': r3.ɵɵstylingApply,
'ɵɵclassProp': r3.ɵɵclassProp,