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

fix(ivy): convert context code into a tree-shakable instruction (#24943)

Browse Source 
PR Close #24943
This commit is contained in:
Kara Erickson
2018-07-25 17:25:22 -07:00
committed by Igor Minar
parent fe14f180a6
commit 2ef777b0b2
24 changed files with 1058 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/compiler-cli/test/compliance/README.md
View File

@ -1 +1,3 @@
Tests in this directory are excluded from running in the browser and only run in node.
Tests in this directory should be run with:
bazel test --define=compile=local packages/compiler-cli/test/compliance:compliance

115
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -541,15 +541,16 @@ describe('compiler compliance', () => {
const MyComponentDefinition = `
const $c1$ = ["foo", ""];
const $c2$ = ["if", ""];
function MyComponent_li_Template_2(rf, ctx0, ctx) {
function MyComponent_li_Template_2(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "li");
$r3$.ɵT(1);
$r3$.ɵe();
}
if (rf & 2) {
const $foo$ = $r3$.ɵr(1, 1);
$r3$.ɵt(1, $r3$.ɵi2("", ctx.salutation, " ", $foo$, ""));
const $myComp$ = $r3$.ɵx();
const $foo$ = $r3$.ɵr(1);
$r3$.ɵt(1, $r3$.ɵi2("", $myComp$.salutation, " ", $foo$, ""));
}
}
…
@ -1174,7 +1175,7 @@ describe('compiler compliance', () => {
$r3$.ɵT(2);
}
if (rf & 2) {
const $user$ = $r3$.ɵld(1);
const $user$ = $r3$.ɵr(1);
$r3$.ɵt(2, $r3$.ɵi1("Hello ", $user$.value, "!"));
}
}
@ -1224,20 +1225,22 @@ describe('compiler compliance', () => {
const $c2$ = ["if", ""];
const $c3$ = ["baz", ""];
const $c4$ = ["bar", ""];
function MyComponent_div_span_Template_2(rf, ctx1, ctx0, ctx) {
function MyComponent_div_span_Template_2(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "span");
$r3$.ɵT(1);
$r3$.ɵe();
}
if (rf & 2) {
const $foo$ = $r3$.ɵr(2, 1);
const $bar$ = $r3$.ɵr(1, 4);
const $baz$ = $r3$.ɵr(2, 5);
$r3$.ɵx();
const $bar$ = $r3$.ɵr(4);
$r3$.ɵx();
const $foo$ = $r3$.ɵr(1);
const $baz$ = $r3$.ɵr(5);
$r3$.ɵt(1, $r3$.ɵi3("", $foo$, "-", $bar$, "-", $baz$, ""));
}
}
function MyComponent_div_Template_3(rf, ctx0, ctx) {
function MyComponent_div_Template_3(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "div");
$r3$.ɵT(1);
@ -1246,8 +1249,9 @@ describe('compiler compliance', () => {
$r3$.ɵe();
}
if (rf & 2) {
const $foo$ = $r3$.ɵr(1, 1);
const $bar$ = $r3$.ɵld(4);
const $bar$ = $r3$.ɵr(4);
$r3$.ɵx();
const $foo$ = $r3$.ɵr(1);
$r3$.ɵt(1, $r3$.ɵi2(" ", $foo$, "-", $bar$, " "));
}
}
@ -1264,7 +1268,7 @@ describe('compiler compliance', () => {
$r3$.ɵEe(4, "div", null, $c3$);
}
if (rf & 2) {
const $foo$ = $r3$.ɵld(1);
const $foo$ = $r3$.ɵr(1);
$r3$.ɵt(2, $r3$.ɵi1(" ", $foo$, " "));
}
},
@ -1278,6 +1282,77 @@ describe('compiler compliance', () => {
});
it('should support local refs mixed with context assignments', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
selector: 'my-component',
template: \`
<div *ngFor="let item of items">
<div #foo></div>
<span *ngIf="showing">
{{ foo }} - {{ item }}
</span>
</div>\`
})
export class MyComponent {}
@NgModule({declarations: [MyComponent], imports: [CommonModule]})
export class MyModule {}
`
}
};
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
const $c1$ = ["foo", ""];
const $c2$ = ["ngIf",""];
function MyComponent_div_span_Template_3(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "span");
$i0$.ɵT(1);
$i0$.ɵe();
}
if (rf & 2) {
const $item$ = $i0$.ɵx().$implicit;
const $foo$ = $i0$.ɵr(2);
$i0$.ɵt(1, $i0$.ɵi2(" ", $foo$, " - ", $item$, " "));
}
}
function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "div");
$i0$.ɵEe(1, "div", null, $c1$);
$i0$.ɵC(3, MyComponent_div_span_Template_3, null, $c2$);
$i0$.ɵe();
}
if (rf & 2) {
const $app$ = $i0$.ɵx();
$i0$.ɵp(3, "ngIf", $i0$.ɵb($app$.showing));
}
}
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵC(0, MyComponent_div_Template_0, null, $c0$);
}
if (rf & 2) {
$i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
}
}`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
describe('lifecycle hooks', () => {
const files = {
app: {
@ -1452,7 +1527,7 @@ describe('compiler compliance', () => {
const MyComponentDefinition = `
const $_c0$ = ["for","","forOf",""];
function MyComponent__svg_g_Template_1(rf, ctx0, ctx) {
function MyComponent__svg_g_Template_1(rf, ctx) {
if (rf & 1) {
$r3$.ɵNS();
$r3$.ɵE(0,"g");
@ -1525,14 +1600,14 @@ describe('compiler compliance', () => {
const MyComponentDefinition = `
const $_c0$ = ["for","","forOf",""];
function MyComponent_li_Template_1(rf, ctx0, ctx) {
function MyComponent_li_Template_1(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "li");
$r3$.ɵT(1);
$r3$.ɵe();
}
if (rf & 2) {
const $item$ = ctx0.$implicit;
const $item$ = ctx.$implicit;
$r3$.ɵt(1, $r3$.ɵi1("", $item$.name, ""));
}
}
@ -1602,20 +1677,20 @@ describe('compiler compliance', () => {
const MyComponentDefinition = `
const $c1$ = ["for", "", "forOf", ""];
function MyComponent_li_li_Template_4(rf, ctx1, ctx0, ctx) {
function MyComponent_li_li_Template_4(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "li");
$r3$.ɵT(1);
$r3$.ɵe();
}
if (rf & 2) {
const $item$ = ctx0.$implicit;
const $info$ = ctx1.$implicit;
const $info$ = ctx.$implicit;
const $item$ = $r3$.ɵx().$implicit;
$r3$.ɵt(1, $r3$.ɵi2(" ", $item$.name, ": ", $info$.description, " "));
}
}
function MyComponent_li_Template_1(rf, ctx0, ctx) {
function MyComponent_li_Template_1(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "li");
$r3$.ɵE(1, "div");
@ -1627,7 +1702,7 @@ describe('compiler compliance', () => {
$r3$.ɵe();
}
if (rf & 2) {
const $item$ = ctx0.$implicit;
const $item$ = ctx.$implicit;
$r3$.ɵt(2, $r3$.ɵi1("", IDENT.name, ""));
$r3$.ɵp(4, "forOf", $r3$.ɵb(IDENT.infos));
}

240
packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts
View File

@ -52,56 +52,262 @@ describe('compiler compliance: template', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
function MyComponent_ul_li_div_Template_1(rf, $ctx2$, $ctx1$, $ctx0$, $ctx$) {
function MyComponent_ul_li_div_Template_1(rf, ctx) {
if (rf & 1) {
const $inner$ = ctx.$implicit;
const $middle$ = $i0$.ɵx().$implicit;
const $outer$ = $i0$.ɵx().$implicit;
const $myComp$ = $i0$.ɵx();
$i0$.ɵE(0, "div");
$i0$.ɵL("click", function MyComponent_ul_li_div_Template_1_div_click_listener($event){
const $outer$ = $ctx0$.$implicit;
const $middle$ = $ctx1$.$implicit;
const $inner$ = $ctx2$.$implicit;
return ctx.onClick($outer$, $middle$, $inner$);
return $myComp$.onClick($outer$, $middle$, $inner$);
});
$i0$.ɵT(1);
$i0$.ɵe();
}
if (rf & 2) {
const $outer$ = $ctx0$.$implicit;
const $middle$ = $ctx1$.$implicit;
const $inner$ = $ctx2$.$implicit;
$i0$.ɵp(0, "title", $i0$.ɵb(ctx.format($outer$, $middle$, $inner$, $ctx$.component)));
$i0$.ɵt(1, $i0$.ɵi1(" ", ctx.format($outer$, $middle$, $inner$, $ctx$.component), " "));
const $inner1$ = ctx.$implicit;
const $middle1$ = $i0$.ɵx().$implicit;
const $outer1$ = $i0$.ɵx().$implicit;
const $myComp1$ = $i0$.ɵx();
$i0$.ɵp(0, "title", $i0$.ɵb($myComp1$.format($outer1$, $middle1$, $inner1$, $myComp1$.component)));
$i0$.ɵt(1, $i0$.ɵi1(" ", $myComp1$.format($outer1$, $middle1$, $inner1$, $myComp1$.component), " "));
}
}
function MyComponent_ul_li_Template_1(rf, $ctx1$, $ctx0$, $ctx$) {
function MyComponent_ul_li_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "li");
$i0$.ɵC(1, MyComponent_ul_li_div_Template_1, null, _c0);
$i0$.ɵe();
}
if (rf & 2) {
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($ctx$.items));
const $myComp2$ = $i0$.ɵx(2);
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($myComp2$.items));
}
}
function MyComponent_ul_Template_0(rf, $ctx0$, $ctx$) {
function MyComponent_ul_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "ul");
$i0$.ɵC(1, MyComponent_ul_li_Template_1, null, _c0);
$i0$.ɵe();
}
if (rf & 2) {
const $outer$ = $ctx0$.$implicit;
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($outer$.items));
const $outer2$ = ctx.$implicit;
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($outer2$.items));
}
}
// ...
template:function MyComponent_Template(rf, $ctx$){
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵC(0, MyComponent_ul_Template_0, null, _c0);
}
if (rf & 2) {
$i0$.ɵp(0, "ngForOf", $i0$.ɵb($ctx$.items));
$i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
}
}`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should support ngFor context variables', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
selector: 'my-component',
template: \`
<span *ngFor="let item of items; index as i">
{{ i }} - {{ item }}
</span>\`
})
export class MyComponent {}
@NgModule({declarations: [MyComponent], imports: [CommonModule]})
export class MyModule {}
`
}
};
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
function MyComponent_span_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "span");
$i0$.ɵT(1);
$i0$.ɵe();
}
if (rf & 2) {
const $item$ = ctx.$implicit;
const $i$ = ctx.index;
$i0$.ɵt(1, $i0$.ɵi2(" ", $i$, " - ", $item$, " "));
}
}
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵC(0, MyComponent_span_Template_0, null, _c0);
}
if (rf & 2) {
$i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
}
}`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should support ngFor context variables in parent views', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
selector: 'my-component',
template: \`
<div *ngFor="let item of items; index as i">
<span *ngIf="showing">
{{ i }} - {{ item }}
</span>
</div>\`
})
export class MyComponent {}
@NgModule({declarations: [MyComponent], imports: [CommonModule]})
export class MyModule {}
`
}
};
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
const $c1$ = ["ngIf",""];
function MyComponent_div_span_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "span");
$i0$.ɵT(1);
$i0$.ɵe();
}
if (rf & 2) {
const $div$ = $i0$.ɵx();
const $i$ = $div$.index;
const $item$ = $div$.$implicit;
$i0$.ɵt(1, $i0$.ɵi2(" ", $i$, " - ", $item$, " "));
}
}
function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "div");
$i0$.ɵC(1, MyComponent_div_span_Template_1, null, $c1$);
$i0$.ɵe();
}
if (rf & 2) {
const $app$ = $i0$.ɵx();
$i0$.ɵp(1, "ngIf", $i0$.ɵb($app$.showing));
}
}
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵC(0, MyComponent_div_Template_0, null, $c0$);
}
if (rf & 2) {
$i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
}
}`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should correctly skip contexts as needed', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
selector: 'my-component',
template: \`
<div *ngFor="let outer of items">
<div *ngFor="let middle of outer.items">
<div *ngFor="let inner of middle.items">
{{ middle.value }} - {{ name }}
</div>
</div>
</div>\`
})
export class MyComponent {}
@NgModule({declarations: [MyComponent], imports: [CommonModule]})
export class MyModule {}
`
}
};
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c0$ = ["ngFor","","ngForOf",""];
function MyComponent_div_div_div_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "div");
$i0$.ɵT(1);
$i0$.ɵe();
}
if (rf & 2) {
const $middle$ = $i0$.ɵx().$implicit;
const $myComp$ = $i0$.ɵx(2);
$i0$.ɵt(1, $i0$.ɵi2(" ", $middle$.value, " - ", $myComp$.name, " "));
}
}
function MyComponent_div_div_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "div");
$i0$.ɵC(1, MyComponent_div_div_div_Template_1, null, _c0);
$i0$.ɵe();
}
if (rf & 2) {
const $middle$ = ctx.$implicit;
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($middle$.items));
}
}
function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵE(0, "div");
$i0$.ɵC(1, MyComponent_div_div_Template_1, null, _c0);
$i0$.ɵe();
}
if (rf & 2) {
const $outer$ = ctx.$implicit;
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($outer$.items));
}
}
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵC(0, MyComponent_div_Template_0, null, _c0);
}
if (rf & 2) {
$i0$.ɵp(0, "ngForOf", $i0$.ɵb(ctx.items));
}
}`;