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

fix(ivy): ensure interpolated style/classes do not cause tracking issues for bindings (#28190)

Browse Source 
With the refactoring or how styles/classes are implmented in Ivy,
interpolation has caused the binding code to mess up since interpolation
itself takes up its own slot in Ivy's memory management code. This patch
makes sure that interpolation works as expected with class and style
bindings.

Jira issue: FW-944

PR Close #28190
This commit is contained in:
Matias Niemelä
2019-01-16 11:11:33 -08:00
committed by Alex Rickabaugh
parent 896cf35afb
commit 0d6913f037
8 changed files with 252 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
View File

@ -1270,12 +1270,10 @@ describe('i18n support in the view compiler', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "span", $_c0$);
$r3$.ɵi18nStart(1, $MSG_EXTERNAL_5295701706185791735$$APP_SPEC_TS_0$);
$r3$.ɵi18nEnd();
$r3$.ɵi18n(1, $MSG_EXTERNAL_5295701706185791735$$APP_SPEC_TS_0$);
$r3$.ɵelementEnd();
$r3$.ɵelementStart(2, "span", $_c1$);
$r3$.ɵi18nStart(3, $MSG_EXTERNAL_4722270221386399294$$APP_SPEC_TS_2$);
$r3$.ɵi18nEnd();
$r3$.ɵi18n(3, $MSG_EXTERNAL_4722270221386399294$$APP_SPEC_TS_2$);
$r3$.ɵelementEnd();
}
}

96
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -395,6 +395,99 @@ describe('compiler compliance: styling', () => {
expectEmit(result.source, template, 'Incorrect template');
});
it('should correctly count the total slots required when style/class bindings include interpolation',
() => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component-with-interpolation',
template: \`
<div class="foo foo-{{ fooId }}"></div>
\`
})
export class MyComponentWithInterpolation {
fooId = '123';
}
@Component({
selector: 'my-component-with-muchos-interpolation',
template: \`
<div class="foo foo-{{ fooId }}-{{ fooUsername }}"></div>
\`
})
export class MyComponentWithMuchosInterpolation {
fooId = '123';
fooUsername = 'superfoo';
}
@Component({
selector: 'my-component-without-interpolation',
template: \`
<div [class]="exp"></div>
\`
})
export class MyComponentWithoutInterpolation {
exp = 'bar';
}
@NgModule({declarations: [MyComponentWithInterpolation, MyComponentWithMuchosInterpolation, MyComponentWithoutInterpolation]})
export class MyModule {}
`
}
};
const template = `
…
consts: 1,
vars: 1,
template: function MyComponentWithInterpolation_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling();
$r3$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementStylingMap(0, $r3$.ɵinterpolation1("foo foo-", $ctx$.fooId, ""));
$r3$.ɵelementStylingApply(0);
}
}
…
consts: 1,
vars: 2,
template: function MyComponentWithMuchosInterpolation_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling();
$r3$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementStylingMap(0, $r3$.ɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
$r3$.ɵelementStylingApply(0);
}
}
…
consts: 1,
vars: 0,
template: function MyComponentWithoutInterpolation_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling();
$r3$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementStylingMap(0, $ctx$.exp);
$r3$.ɵelementStylingApply(0);
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should place initial, multi, singular and application followed by attribute style instructions in the template code in that order',
() => {
const files = {
@ -688,8 +781,7 @@ describe('compiler compliance: styling', () => {
vars: 2,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div", $e0_attrs$);
$r3$.ɵelementEnd();
$r3$.ɵelement(0, "div", $e0_attrs$);
}
if (rf & 2) {
$r3$.ɵelementAttribute(0, "class", $r3$.ɵbind("round"));