fix(compiler): update compiler to flatten nested template fns (#24943)
PR Close #24943
This commit is contained in:
Kara Erickson
committed by
Igor Minar
Igor Minar
parent
87419097da
commit
fe14f180a6
@ -541,6 +541,17 @@ describe('compiler compliance', () => {
|
||||
const MyComponentDefinition = `
|
||||
const $c1$ = ["foo", ""];
|
||||
const $c2$ = ["if", ""];
|
||||
function MyComponent_li_Template_2(rf, ctx0, 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$, ""));
|
||||
}
|
||||
}
|
||||
…
|
||||
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
@ -552,17 +563,6 @@ describe('compiler compliance', () => {
|
||||
$r3$.ɵC(2, MyComponent_li_Template_2, null, $c2$);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
const $foo$ = $r3$.ɵld(1);
|
||||
function MyComponent_li_Template_2(rf, ctx0) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵt(1, $r3$.ɵi2("", ctx.salutation, " ", $foo$, ""));
|
||||
}
|
||||
}
|
||||
},
|
||||
directives:[IfDirective]
|
||||
});`;
|
||||
@ -1173,8 +1173,8 @@ describe('compiler compliance', () => {
|
||||
$r3$.ɵEe(0, "input", null, $c1$);
|
||||
$r3$.ɵT(2);
|
||||
}
|
||||
const $user$ = $r3$.ɵld(1);
|
||||
if (rf & 2) {
|
||||
const $user$ = $r3$.ɵld(1);
|
||||
$r3$.ɵt(2, $r3$.ɵi1("Hello ", $user$.value, "!"));
|
||||
}
|
||||
}
|
||||
@ -1187,6 +1187,97 @@ describe('compiler compliance', () => {
|
||||
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef');
|
||||
});
|
||||
|
||||
it('local references in nested views', () => {
|
||||
const files = {
|
||||
app: {
|
||||
'spec.ts': `
|
||||
import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({selector: '[if]'})
|
||||
export class IfDirective {
|
||||
constructor(template: TemplateRef<any>) { }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'my-component',
|
||||
template: \`
|
||||
<div #foo></div>
|
||||
{{foo}}
|
||||
<div *if>
|
||||
{{foo}}-{{bar}}
|
||||
<span *if>{{foo}}-{{bar}}-{{baz}}</span>
|
||||
<span #bar></span>
|
||||
</div>
|
||||
<div #baz></div>
|
||||
\`
|
||||
})
|
||||
export class MyComponent {}
|
||||
|
||||
@NgModule({declarations: [IfDirective, MyComponent]})
|
||||
export class MyModule {}
|
||||
`
|
||||
}
|
||||
};
|
||||
|
||||
const MyComponentDefinition = `
|
||||
const $c1$ = ["foo", ""];
|
||||
const $c2$ = ["if", ""];
|
||||
const $c3$ = ["baz", ""];
|
||||
const $c4$ = ["bar", ""];
|
||||
function MyComponent_div_span_Template_2(rf, ctx1, ctx0, 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$.ɵt(1, $r3$.ɵi3("", $foo$, "-", $bar$, "-", $baz$, ""));
|
||||
}
|
||||
}
|
||||
function MyComponent_div_Template_3(rf, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "div");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵC(2, MyComponent_div_span_Template_2, null, $c2$);
|
||||
$r3$.ɵEe(3, "span", null, $c4$);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $foo$ = $r3$.ɵr(1, 1);
|
||||
const $bar$ = $r3$.ɵld(4);
|
||||
$r3$.ɵt(1, $r3$.ɵi2(" ", $foo$, "-", $bar$, " "));
|
||||
}
|
||||
}
|
||||
…
|
||||
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
selectors: [["my-component"]],
|
||||
factory: function MyComponent_Factory() { return new MyComponent(); },
|
||||
template: function MyComponent_Template(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵEe(0, "div", null, $c1$);
|
||||
$r3$.ɵT(2);
|
||||
$r3$.ɵC(3, MyComponent_div_Template_3, null, $c2$);
|
||||
$r3$.ɵEe(4, "div", null, $c3$);
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $foo$ = $r3$.ɵld(1);
|
||||
$r3$.ɵt(2, $r3$.ɵi1(" ", $foo$, " "));
|
||||
}
|
||||
},
|
||||
directives:[IfDirective]
|
||||
});`;
|
||||
|
||||
const result = compile(files, angularFiles);
|
||||
const source = result.source;
|
||||
|
||||
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef');
|
||||
|
||||
});
|
||||
|
||||
describe('lifecycle hooks', () => {
|
||||
const files = {
|
||||
app: {
|
||||
@ -1361,6 +1452,14 @@ describe('compiler compliance', () => {
|
||||
|
||||
const MyComponentDefinition = `
|
||||
const $_c0$ = ["for","","forOf",""];
|
||||
function MyComponent__svg_g_Template_1(rf, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵNS();
|
||||
$r3$.ɵE(0,"g");
|
||||
$r3$.ɵEe(1,"circle");
|
||||
$r3$.ɵe();
|
||||
}
|
||||
}
|
||||
…
|
||||
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
@ -1374,14 +1473,6 @@ describe('compiler compliance', () => {
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) { $r3$.ɵp(1,"forOf",$r3$.ɵb(ctx.items)); }
|
||||
function MyComponent__svg_g_Template_1(rf, ctx0) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵNS();
|
||||
$r3$.ɵE(0,"g");
|
||||
$r3$.ɵEe(1,"circle");
|
||||
$r3$.ɵe();
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: [ForOfDirective]
|
||||
});
|
||||
@ -1434,6 +1525,17 @@ describe('compiler compliance', () => {
|
||||
|
||||
const MyComponentDefinition = `
|
||||
const $_c0$ = ["for","","forOf",""];
|
||||
function MyComponent_li_Template_1(rf, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
$r3$.ɵt(1, $r3$.ɵi1("", $item$.name, ""));
|
||||
}
|
||||
}
|
||||
…
|
||||
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
@ -1448,18 +1550,6 @@ describe('compiler compliance', () => {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵp(1, "forOf", $r3$.ɵb(ctx.items));
|
||||
}
|
||||
|
||||
function MyComponent_li_Template_1(rf, ctx0) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
$r3$.ɵt(1, $r3$.ɵi1("", $item$.name, ""));
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: [ForOfDirective]
|
||||
});
|
||||
@ -1512,6 +1602,37 @@ describe('compiler compliance', () => {
|
||||
|
||||
const MyComponentDefinition = `
|
||||
const $c1$ = ["for", "", "forOf", ""];
|
||||
function MyComponent_li_li_Template_4(rf, ctx1, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
const $info$ = ctx1.$implicit;
|
||||
$r3$.ɵt(1, $r3$.ɵi2(" ", $item$.name, ": ", $info$.description, " "));
|
||||
}
|
||||
}
|
||||
|
||||
function MyComponent_li_Template_1(rf, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵE(1, "div");
|
||||
$r3$.ɵT(2);
|
||||
$r3$.ɵe();
|
||||
$r3$.ɵE(3, "ul");
|
||||
$r3$.ɵC(4, MyComponent_li_li_Template_4, null, $c1$);
|
||||
$r3$.ɵe();
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
$r3$.ɵt(2, $r3$.ɵi1("", IDENT.name, ""));
|
||||
$r3$.ɵp(4, "forOf", $r3$.ɵb(IDENT.infos));
|
||||
}
|
||||
}
|
||||
|
||||
…
|
||||
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
@ -1526,37 +1647,6 @@ describe('compiler compliance', () => {
|
||||
if (rf & 2) {
|
||||
$r3$.ɵp(1, "forOf", $r3$.ɵb(ctx.items));
|
||||
}
|
||||
|
||||
function MyComponent_li_Template_1(rf, ctx0) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵE(1, "div");
|
||||
$r3$.ɵT(2);
|
||||
$r3$.ɵe();
|
||||
$r3$.ɵE(3, "ul");
|
||||
$r3$.ɵC(4, MyComponent_li_li_Template_4, null, $c1$);
|
||||
$r3$.ɵe();
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
$r3$.ɵt(2, $r3$.ɵi1("", IDENT.name, ""));
|
||||
$r3$.ɵp(4, "forOf", $r3$.ɵb(IDENT.infos));
|
||||
}
|
||||
|
||||
function MyComponent_li_li_Template_4(rf, ctx1) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
const $info$ = ctx1.$implicit;
|
||||
$r3$.ɵt(1, $r3$.ɵi2(" ", $item$.name, ": ", $info$.description, " "));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: [ForOfDirective]
|
||||
});`;
|
||||
|
||||
@ -52,6 +52,49 @@ 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$) {
|
||||
if (rf & 1) {
|
||||
$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$);
|
||||
});
|
||||
$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), " "));
|
||||
}
|
||||
}
|
||||
|
||||
function MyComponent_ul_li_Template_1(rf, $ctx1$, $ctx0$, $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));
|
||||
}
|
||||
}
|
||||
|
||||
function MyComponent_ul_Template_0(rf, $ctx0$, $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));
|
||||
}
|
||||
}
|
||||
// ...
|
||||
template:function MyComponent_Template(rf, $ctx$){
|
||||
if (rf & 1) {
|
||||
@ -60,48 +103,6 @@ describe('compiler compliance: template', () => {
|
||||
if (rf & 2) {
|
||||
$i0$.ɵp(0, "ngForOf", $i0$.ɵb($ctx$.items));
|
||||
}
|
||||
|
||||
function MyComponent_ul_Template_0(rf, $ctx0$) {
|
||||
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));
|
||||
}
|
||||
function MyComponent_ul_li_Template_1(rf, $ctx1$) {
|
||||
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));
|
||||
}
|
||||
function MyComponent_ul_li_div_Template_1(rf, $ctx2$) {
|
||||
if (rf & 1) {
|
||||
$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$);
|
||||
});
|
||||
$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 result = compile(files, angularFiles);
|
||||
|
||||
Reference in New Issue
Block a user