fix(compiler): update compiler to flatten nested template fns (#24943)
PR Close #24943
This commit is contained in:
Kara Erickson
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,22 +1602,20 @@ describe('compiler compliance', () => {
|
|||
|
||||
const MyComponentDefinition = `
|
||||
const $c1$ = ["for", "", "forOf", ""];
|
||||
…
|
||||
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
selectors: [["my-component"]],
|
||||
factory: function MyComponent_Factory() { return new MyComponent(); },
|
||||
template: function MyComponent_Template(rf, ctx) {
|
||||
function MyComponent_li_li_Template_4(rf, ctx1, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "ul");
|
||||
$r3$.ɵC(1, MyComponent_li_Template_1, null, $c1$);
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵp(1, "forOf", $r3$.ɵb(ctx.items));
|
||||
const $item$ = ctx0.$implicit;
|
||||
const $info$ = ctx1.$implicit;
|
||||
$r3$.ɵt(1, $r3$.ɵi2(" ", $item$.name, ": ", $info$.description, " "));
|
||||
}
|
||||
}
|
||||
|
||||
function MyComponent_li_Template_1(rf, ctx0) {
|
||||
function MyComponent_li_Template_1(rf, ctx0, ctx) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, "li");
|
||||
$r3$.ɵE(1, "div");
|
||||
|
|
@ -1543,19 +1631,21 @@ describe('compiler compliance', () => {
|
|||
$r3$.ɵt(2, $r3$.ɵi1("", IDENT.name, ""));
|
||||
$r3$.ɵp(4, "forOf", $r3$.ɵb(IDENT.infos));
|
||||
}
|
||||
}
|
||||
|
||||
function MyComponent_li_li_Template_4(rf, ctx1) {
|
||||
…
|
||||
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$.ɵE(0, "li");
|
||||
$r3$.ɵT(1);
|
||||
$r3$.ɵE(0, "ul");
|
||||
$r3$.ɵC(1, MyComponent_li_Template_1, null, $c1$);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
const $item$ = ctx0.$implicit;
|
||||
const $info$ = ctx1.$implicit;
|
||||
$r3$.ɵt(1, $r3$.ɵi2(" ", $item$.name, ": ", $info$.description, " "));
|
||||
}
|
||||
}
|
||||
$r3$.ɵp(1, "forOf", $r3$.ɵb(ctx.items));
|
||||
}
|
||||
},
|
||||
directives: [ForOfDirective]
|
||||
|
|
|
|||
|
|
@ -52,35 +52,7 @@ 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",""];
|
||||
// ...
|
||||
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));
|
||||
}
|
||||
|
||||
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$) {
|
||||
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){
|
||||
|
|
@ -100,7 +72,36 @@ describe('compiler compliance: template', () => {
|
|||
$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) {
|
||||
$i0$.ɵC(0, MyComponent_ul_Template_0, null, _c0);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$i0$.ɵp(0, "ngForOf", $i0$.ɵb($ctx$.items));
|
||||
}
|
||||
}`;
|
||||
|
||||
|
|
|
|||
|
|
@ -87,6 +87,8 @@ export class Identifiers {
|
|||
static projection: o.ExternalReference = {name: 'ɵP', moduleName: CORE};
|
||||
static projectionDef: o.ExternalReference = {name: 'ɵpD', moduleName: CORE};
|
||||
|
||||
static reference: o.ExternalReference = {name: 'ɵr', moduleName: CORE};
|
||||
|
||||
static inject: o.ExternalReference = {name: 'inject', moduleName: CORE};
|
||||
|
||||
static injectAttribute: o.ExternalReference = {name: 'ɵinjectAttribute', moduleName: CORE};
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
private _prefixCode: o.Statement[] = [];
|
||||
private _creationCode: o.Statement[] = [];
|
||||
private _variableCode: o.Statement[] = [];
|
||||
private _bindingCode: o.Statement[] = [];
|
||||
private _postfixCode: o.Statement[] = [];
|
||||
private _bindingCode: (() => o.Statement)[] = [];
|
||||
private _nestedTemplates: (() => void)[] = [];
|
||||
private _valueConverter: ValueConverter;
|
||||
private _unsupported = unsupported;
|
||||
private _bindingScope: BindingScope;
|
||||
|
|
@ -84,9 +84,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
// function)
|
||||
this._dataIndex = viewQueries.length;
|
||||
this._bindingScope =
|
||||
parentBindingScope.nestedScope((lhsVar: o.ReadVarExpr, expression: o.Expression) => {
|
||||
this._bindingCode.push(
|
||||
lhsVar.set(expression).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
|
||||
parentBindingScope.nestedScope(level, (lhsVar: o.ReadVarExpr, rhsExpr: o.Expression) => {
|
||||
this._variableCode.push(
|
||||
lhsVar.set(rhsExpr).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
|
||||
});
|
||||
this._valueConverter = new ValueConverter(
|
||||
constantPool, () => this.allocateDataSlot(),
|
||||
|
|
@ -106,7 +106,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
nodes: t.Node[], variables: t.Variable[], hasNgContent: boolean = false,
|
||||
ngContentSelectors: string[] = []): o.FunctionExpr {
|
||||
if (this._namespace !== R3.namespaceHTML) {
|
||||
this.instruction(this._creationCode, null, this._namespace);
|
||||
this.creationInstruction(null, this._namespace);
|
||||
}
|
||||
|
||||
// Create variable bindings
|
||||
|
|
@ -132,24 +132,24 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
parameters.push(parsed, unParsed);
|
||||
}
|
||||
|
||||
this.instruction(this._creationCode, null, R3.projectionDef, ...parameters);
|
||||
this.creationInstruction(null, R3.projectionDef, ...parameters);
|
||||
}
|
||||
|
||||
t.visitAll(this, nodes);
|
||||
|
||||
if (this._pureFunctionSlots > 0) {
|
||||
this.instruction(
|
||||
this._creationCode, null, R3.reserveSlots, o.literal(this._pureFunctionSlots));
|
||||
}
|
||||
|
||||
const creationCode = this._creationCode.length > 0 ?
|
||||
[renderFlagCheckIfStmt(core.RenderFlags.Create, this._creationCode)] :
|
||||
[];
|
||||
|
||||
const updateCode = this._bindingCode.length > 0 ?
|
||||
[renderFlagCheckIfStmt(core.RenderFlags.Update, this._bindingCode)] :
|
||||
[renderFlagCheckIfStmt(core.RenderFlags.Update, this._variableCode.concat(
|
||||
this._variableCode.concat(this._bindingCode.map((fn: () => o.Statement) => fn()))))] :
|
||||
[];
|
||||
|
||||
if (this._pureFunctionSlots > 0) {
|
||||
this.creationInstruction(null, R3.reserveSlots, o.literal(this._pureFunctionSlots));
|
||||
}
|
||||
|
||||
// Generate maps of placeholder name to node indexes
|
||||
// TODO(vicb): This is a WIP, not fully supported yet
|
||||
for (const phToNodeIdx of this._phToNodeIdxes) {
|
||||
|
|
@ -163,19 +163,21 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
}
|
||||
}
|
||||
|
||||
this._nestedTemplates.forEach(buildTemplateFn => buildTemplateFn());
|
||||
|
||||
return o.fn(
|
||||
[new o.FnParam(RENDER_FLAGS, o.NUMBER_TYPE), new o.FnParam(this.contextParameter, null)],
|
||||
// i.e. (rf: RenderFlags, ctx0: any, ctx: any)
|
||||
[
|
||||
new o.FnParam(RENDER_FLAGS, o.NUMBER_TYPE), ...this.getNestedContexts(),
|
||||
new o.FnParam(CONTEXT_NAME, null)
|
||||
],
|
||||
[
|
||||
// Temporary variable declarations for query refresh (i.e. let _t: any;)
|
||||
...this._prefixCode,
|
||||
// Creating mode (i.e. if (rf & RenderFlags.Create) { ... })
|
||||
...creationCode,
|
||||
// Temporary variable declarations for local refs (i.e. const tmp = ld(1) as any)
|
||||
...this._variableCode,
|
||||
// Binding and refresh mode (i.e. if (rf & RenderFlags.Update) {...})
|
||||
...updateCode,
|
||||
// Nested templates (i.e. function CompTemplate() {})
|
||||
...this._postfixCode
|
||||
],
|
||||
o.INFERRED_TYPE, null, this.templateName);
|
||||
}
|
||||
|
|
@ -203,7 +205,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
parameters.push(o.literal(selectorIndex));
|
||||
}
|
||||
|
||||
this.instruction(this._creationCode, ngContent.sourceSpan, R3.projection, ...parameters);
|
||||
this.creationInstruction(ngContent.sourceSpan, R3.projection, ...parameters);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -220,12 +222,23 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
|
||||
addNamespaceInstruction(nsInstruction: o.ExternalReference, element: t.Element) {
|
||||
this._namespace = nsInstruction;
|
||||
this.instruction(this._creationCode, element.sourceSpan, nsInstruction);
|
||||
this.creationInstruction(element.sourceSpan, nsInstruction);
|
||||
}
|
||||
|
||||
getNestedContexts(): o.FnParam[] {
|
||||
const nestedContexts = [];
|
||||
let nestingLevel = this.level - 1;
|
||||
|
||||
while (nestingLevel >= 0) {
|
||||
nestedContexts.push(new o.FnParam(`ctx${nestingLevel}`, null));
|
||||
nestingLevel--;
|
||||
}
|
||||
|
||||
return nestedContexts;
|
||||
}
|
||||
|
||||
visitElement(element: t.Element) {
|
||||
const elementIndex = this.allocateDataSlot();
|
||||
const referenceDataSlots = new Map<string, number>();
|
||||
const wasInI18nSection = this._inI18nSection;
|
||||
|
||||
const outputAttrs: {[name: string]: string} = {};
|
||||
|
|
@ -412,13 +425,19 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
if (element.references && element.references.length > 0) {
|
||||
const references = flatten(element.references.map(reference => {
|
||||
const slot = this.allocateDataSlot();
|
||||
referenceDataSlots.set(reference.name, slot);
|
||||
// Generate the update temporary.
|
||||
const variableName = this._bindingScope.freshReferenceName();
|
||||
this._variableCode.push(o.variable(variableName, o.INFERRED_TYPE)
|
||||
.set(o.importExpr(R3.load).callFn([o.literal(slot)]))
|
||||
.toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
|
||||
this._bindingScope.set(reference.name, o.variable(variableName));
|
||||
// When the ref's binding is processed, we'll either generate a load() or a reference()
|
||||
// instruction depending on the nesting level of the binding relative to the reference def.
|
||||
const refLevel = this.level;
|
||||
this._bindingScope.set(
|
||||
reference.name, o.variable(variableName), undefined, (bindingLevel: number) => {
|
||||
return bindingLevel === refLevel ?
|
||||
o.importExpr(R3.load).callFn([o.literal(slot)]) :
|
||||
o.importExpr(R3.reference).callFn([
|
||||
o.literal(bindingLevel - refLevel), o.literal(slot)
|
||||
]);
|
||||
});
|
||||
return [reference.name, reference.value];
|
||||
}));
|
||||
parameters.push(this.constantPool.getConstLiteral(asLiteral(references), true));
|
||||
|
|
@ -446,16 +465,14 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
!hasStylingInstructions && element.children.length === 0 && element.outputs.length === 0;
|
||||
|
||||
if (createSelfClosingInstruction) {
|
||||
this.instruction(
|
||||
this._creationCode, element.sourceSpan, R3.element, ...trimTrailingNulls(parameters));
|
||||
this.creationInstruction(element.sourceSpan, R3.element, ...trimTrailingNulls(parameters));
|
||||
} else {
|
||||
// Generate the instruction create element instruction
|
||||
if (i18nMessages.length > 0) {
|
||||
this._creationCode.push(...i18nMessages);
|
||||
}
|
||||
this.instruction(
|
||||
this._creationCode, element.sourceSpan, R3.elementStart,
|
||||
...trimTrailingNulls(parameters));
|
||||
this.creationInstruction(
|
||||
element.sourceSpan, R3.elementStart, ...trimTrailingNulls(parameters));
|
||||
|
||||
// initial styling for static style="..." attributes
|
||||
if (hasStylingInstructions) {
|
||||
|
|
@ -499,8 +516,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
const evName = sanitizeIdentifier(outputAst.name);
|
||||
const functionName = `${this.templateName}_${elName}_${evName}_listener`;
|
||||
const localVars: o.Statement[] = [];
|
||||
const bindingScope =
|
||||
this._bindingScope.nestedScope((lhsVar: o.ReadVarExpr, rhsExpression: o.Expression) => {
|
||||
const bindingScope = this._bindingScope.nestedScope(
|
||||
this.level + 1, (lhsVar: o.ReadVarExpr, rhsExpression: o.Expression) => {
|
||||
localVars.push(
|
||||
lhsVar.set(rhsExpression).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
|
||||
});
|
||||
|
|
@ -510,9 +527,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
const handler = o.fn(
|
||||
[new o.FnParam('$event', o.DYNAMIC_TYPE)], [...localVars, ...bindingExpr.render3Stmts],
|
||||
o.INFERRED_TYPE, null, functionName);
|
||||
this.instruction(
|
||||
this._creationCode, outputAst.sourceSpan, R3.listener, o.literal(outputAst.name),
|
||||
handler);
|
||||
this.creationInstruction(
|
||||
outputAst.sourceSpan, R3.listener, o.literal(outputAst.name), handler);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -528,17 +544,21 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
const stylingInput = mapBasedStyleInput || mapBasedClassInput;
|
||||
if (stylingInput) {
|
||||
const params: o.Expression[] = [];
|
||||
let value: AST;
|
||||
if (mapBasedClassInput) {
|
||||
params.push(this.convertPropertyBinding(implicit, mapBasedClassInput.value, true));
|
||||
value = mapBasedClassInput.value.visit(this._valueConverter);
|
||||
} else if (mapBasedStyleInput) {
|
||||
params.push(o.NULL_EXPR);
|
||||
}
|
||||
|
||||
if (mapBasedStyleInput) {
|
||||
params.push(this.convertPropertyBinding(implicit, mapBasedStyleInput.value, true));
|
||||
value = mapBasedStyleInput.value.visit(this._valueConverter);
|
||||
}
|
||||
this.instruction(
|
||||
this._bindingCode, stylingInput.sourceSpan, R3.elementStylingMap, indexLiteral,
|
||||
...params);
|
||||
|
||||
this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
|
||||
params.push(this.convertPropertyBinding(implicit, value, true));
|
||||
return [indexLiteral, ...params];
|
||||
});
|
||||
}
|
||||
|
||||
let lastInputCommand: t.BoundAttribute|null = null;
|
||||
|
|
@ -546,18 +566,19 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
let i = mapBasedStyleInput ? 1 : 0;
|
||||
for (i; i < styleInputs.length; i++) {
|
||||
const input = styleInputs[i];
|
||||
const convertedBinding = this.convertPropertyBinding(implicit, input.value, true);
|
||||
const params = [convertedBinding];
|
||||
const params: any[] = [];
|
||||
const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
|
||||
if (sanitizationRef) {
|
||||
params.push(sanitizationRef);
|
||||
}
|
||||
if (sanitizationRef) params.push(sanitizationRef);
|
||||
|
||||
const key = input.name;
|
||||
const styleIndex: number = stylesIndexMap[key] !;
|
||||
this.instruction(
|
||||
this._bindingCode, input.sourceSpan, R3.elementStyleProp, indexLiteral,
|
||||
o.literal(styleIndex), ...params);
|
||||
const value = input.value.visit(this._valueConverter);
|
||||
this.updateInstruction(input.sourceSpan, R3.elementStyleProp, () => {
|
||||
return [
|
||||
indexLiteral, o.literal(styleIndex),
|
||||
this.convertPropertyBinding(implicit, value, true), ...params
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
lastInputCommand = styleInputs[styleInputs.length - 1];
|
||||
|
|
@ -567,25 +588,26 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
let i = mapBasedClassInput ? 1 : 0;
|
||||
for (i; i < classInputs.length; i++) {
|
||||
const input = classInputs[i];
|
||||
const convertedBinding = this.convertPropertyBinding(implicit, input.value, true);
|
||||
const params = [convertedBinding];
|
||||
const params: any[] = [];
|
||||
const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
|
||||
if (sanitizationRef) {
|
||||
params.push(sanitizationRef);
|
||||
}
|
||||
if (sanitizationRef) params.push(sanitizationRef);
|
||||
|
||||
const key = input.name;
|
||||
const classIndex: number = classesIndexMap[key] !;
|
||||
this.instruction(
|
||||
this._bindingCode, input.sourceSpan, R3.elementClassProp, indexLiteral,
|
||||
o.literal(classIndex), ...params);
|
||||
const value = input.value.visit(this._valueConverter);
|
||||
this.updateInstruction(input.sourceSpan, R3.elementClassProp, () => {
|
||||
return [
|
||||
indexLiteral, o.literal(classIndex),
|
||||
this.convertPropertyBinding(implicit, value, true), ...params
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
lastInputCommand = classInputs[classInputs.length - 1];
|
||||
}
|
||||
|
||||
this.instruction(
|
||||
this._bindingCode, lastInputCommand !.sourceSpan, R3.elementStylingApply, indexLiteral);
|
||||
this.updateInstruction(
|
||||
lastInputCommand !.sourceSpan, R3.elementStylingApply, () => [indexLiteral]);
|
||||
}
|
||||
|
||||
// Generate element input bindings
|
||||
|
|
@ -595,20 +617,20 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
return;
|
||||
}
|
||||
|
||||
const convertedBinding = this.convertPropertyBinding(implicit, input.value);
|
||||
|
||||
const instruction = mapBindingToInstruction(input.type);
|
||||
if (instruction) {
|
||||
const params = [convertedBinding];
|
||||
const params: any[] = [];
|
||||
const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
|
||||
if (sanitizationRef) {
|
||||
params.push(sanitizationRef);
|
||||
}
|
||||
if (sanitizationRef) params.push(sanitizationRef);
|
||||
|
||||
// TODO(chuckj): runtime: security context?
|
||||
this.instruction(
|
||||
this._bindingCode, input.sourceSpan, instruction, o.literal(elementIndex),
|
||||
o.literal(input.name), ...params);
|
||||
const value = input.value.visit(this._valueConverter);
|
||||
this.updateInstruction(input.sourceSpan, instruction, () => {
|
||||
return [
|
||||
o.literal(elementIndex), o.literal(input.name),
|
||||
this.convertPropertyBinding(implicit, value), ...params
|
||||
];
|
||||
});
|
||||
} else {
|
||||
this._unsupported(`binding type ${input.type}`);
|
||||
}
|
||||
|
|
@ -625,8 +647,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
|
||||
if (!createSelfClosingInstruction) {
|
||||
// Finish element construction mode.
|
||||
this.instruction(
|
||||
this._creationCode, element.endSourceSpan || element.sourceSpan, R3.elementEnd);
|
||||
this.creationInstruction(element.endSourceSpan || element.sourceSpan, R3.elementEnd);
|
||||
}
|
||||
|
||||
// Restore the state before exiting this node
|
||||
|
|
@ -675,17 +696,19 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
}
|
||||
|
||||
// e.g. C(1, C1Template)
|
||||
this.instruction(
|
||||
this._creationCode, template.sourceSpan, R3.containerCreate,
|
||||
...trimTrailingNulls(parameters));
|
||||
this.creationInstruction(
|
||||
template.sourceSpan, R3.containerCreate, ...trimTrailingNulls(parameters));
|
||||
|
||||
// e.g. p(1, 'forOf', ɵb(ctx.items));
|
||||
const context = o.variable(CONTEXT_NAME);
|
||||
template.inputs.forEach(input => {
|
||||
const convertedBinding = this.convertPropertyBinding(context, input.value);
|
||||
this.instruction(
|
||||
this._bindingCode, template.sourceSpan, R3.elementProperty, o.literal(templateIndex),
|
||||
o.literal(input.name), convertedBinding);
|
||||
const value = input.value.visit(this._valueConverter);
|
||||
this.updateInstruction(template.sourceSpan, R3.elementProperty, () => {
|
||||
return [
|
||||
o.literal(templateIndex), o.literal(input.name),
|
||||
this.convertPropertyBinding(context, value)
|
||||
];
|
||||
});
|
||||
});
|
||||
|
||||
// Create the template function
|
||||
|
|
@ -693,9 +716,16 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
this.constantPool, templateContext, this._bindingScope, this.level + 1, contextName,
|
||||
templateName, [], this.directiveMatcher, this.directives, this.pipeTypeByName, this.pipes,
|
||||
this._namespace);
|
||||
|
||||
// Nested templates must not be visited until after their parent templates have completed
|
||||
// processing, so they are queued here until after the initial pass. Otherwise, we wouldn't
|
||||
// be able to support bindings in nested templates to local refs that occur after the
|
||||
// template definition. e.g. <div *ngIf="showing"> {{ foo }} </div> <div #foo></div>
|
||||
this._nestedTemplates.push(() => {
|
||||
const templateFunctionExpr =
|
||||
templateVisitor.buildTemplateFunction(template.children, template.variables);
|
||||
this._postfixCode.push(templateFunctionExpr.toDeclStmt(templateName, null));
|
||||
this.constantPool.statements.push(templateFunctionExpr.toDeclStmt(templateName, null));
|
||||
});
|
||||
}
|
||||
|
||||
// These should be handled in the template or element directly.
|
||||
|
|
@ -708,17 +738,17 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
visitBoundText(text: t.BoundText) {
|
||||
const nodeIndex = this.allocateDataSlot();
|
||||
|
||||
this.instruction(this._creationCode, text.sourceSpan, R3.text, o.literal(nodeIndex));
|
||||
this.creationInstruction(text.sourceSpan, R3.text, o.literal(nodeIndex));
|
||||
|
||||
this.instruction(
|
||||
this._bindingCode, text.sourceSpan, R3.textBinding, o.literal(nodeIndex),
|
||||
this.convertPropertyBinding(o.variable(CONTEXT_NAME), text.value));
|
||||
const value = text.value.visit(this._valueConverter);
|
||||
this.updateInstruction(
|
||||
text.sourceSpan, R3.textBinding,
|
||||
() => [o.literal(nodeIndex), this.convertPropertyBinding(o.variable(CONTEXT_NAME), value)]);
|
||||
}
|
||||
|
||||
visitText(text: t.Text) {
|
||||
this.instruction(
|
||||
this._creationCode, text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()),
|
||||
o.literal(text.value));
|
||||
this.creationInstruction(
|
||||
text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()), o.literal(text.value));
|
||||
}
|
||||
|
||||
// When the content of the element is a single text node the translation can be inlined:
|
||||
|
|
@ -736,36 +766,45 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
visitSingleI18nTextChild(text: t.Text, i18nMeta: string) {
|
||||
const meta = parseI18nMeta(i18nMeta);
|
||||
const variable = this.constantPool.getTranslation(text.value, meta);
|
||||
this.instruction(
|
||||
this._creationCode, text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()), variable);
|
||||
this.creationInstruction(
|
||||
text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()), variable);
|
||||
}
|
||||
|
||||
private allocateDataSlot() { return this._dataIndex++; }
|
||||
private bindingContext() { return `${this._bindingContext++}`; }
|
||||
|
||||
private instruction(
|
||||
statements: o.Statement[], span: ParseSourceSpan|null, reference: o.ExternalReference,
|
||||
...params: o.Expression[]) {
|
||||
statements.push(o.importExpr(reference, null, span).callFn(params, span).toStmt());
|
||||
span: ParseSourceSpan|null, reference: o.ExternalReference,
|
||||
params: o.Expression[]): o.Statement {
|
||||
return o.importExpr(reference, null, span).callFn(params, span).toStmt();
|
||||
}
|
||||
|
||||
private creationInstruction(
|
||||
span: ParseSourceSpan|null, reference: o.ExternalReference, ...params: o.Expression[]) {
|
||||
this._creationCode.push(this.instruction(span, reference, params));
|
||||
}
|
||||
|
||||
// Bindings must only be resolved after all local refs have been visited, so update mode
|
||||
// instructions are queued in callbacks that execute once the initial pass has completed.
|
||||
// Otherwise, we wouldn't be able to support local refs that are defined after their
|
||||
// bindings. e.g. {{ foo }} <div #foo></div>
|
||||
private updateInstruction(
|
||||
span: ParseSourceSpan|null, reference: o.ExternalReference, paramsFn: () => o.Expression[]) {
|
||||
this._bindingCode.push(() => { return this.instruction(span, reference, paramsFn()); });
|
||||
}
|
||||
|
||||
private convertPropertyBinding(implicit: o.Expression, value: AST, skipBindFn?: boolean):
|
||||
o.Expression {
|
||||
const pipesConvertedValue = value.visit(this._valueConverter);
|
||||
if (pipesConvertedValue instanceof Interpolation) {
|
||||
const interpolationFn =
|
||||
value instanceof Interpolation ? interpolate : () => error('Unexpected interpolation');
|
||||
|
||||
const convertedPropertyBinding = convertPropertyBinding(
|
||||
this, implicit, pipesConvertedValue, this.bindingContext(), BindingForm.TrySimple,
|
||||
interpolate);
|
||||
this._bindingCode.push(...convertedPropertyBinding.stmts);
|
||||
return convertedPropertyBinding.currValExpr;
|
||||
} else {
|
||||
const convertedPropertyBinding = convertPropertyBinding(
|
||||
this, implicit, pipesConvertedValue, this.bindingContext(), BindingForm.TrySimple,
|
||||
() => error('Unexpected interpolation'));
|
||||
this._bindingCode.push(...convertedPropertyBinding.stmts);
|
||||
this, implicit, value, this.bindingContext(), BindingForm.TrySimple, interpolationFn);
|
||||
this._variableCode.push(...convertedPropertyBinding.stmts);
|
||||
|
||||
const valExpr = convertedPropertyBinding.currValExpr;
|
||||
return skipBindFn ? valExpr : o.importExpr(R3.bind).callFn([valExpr]);
|
||||
}
|
||||
return value instanceof Interpolation || skipBindFn ? valExpr :
|
||||
o.importExpr(R3.bind).callFn([valExpr]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -897,6 +936,7 @@ export class BindingScope implements LocalResolver {
|
|||
lhs: o.ReadVarExpr;
|
||||
rhs: o.Expression|undefined;
|
||||
declared: boolean;
|
||||
rhsCallback?: (level: number) => o.Expression;
|
||||
}
|
||||
> ();
|
||||
private referenceNameIndex = 0;
|
||||
|
|
@ -904,7 +944,7 @@ export class BindingScope implements LocalResolver {
|
|||
static ROOT_SCOPE = new BindingScope().set('$event', o.variable('$event'));
|
||||
|
||||
private constructor(
|
||||
private parent: BindingScope|null = null,
|
||||
private level: number = 0, private parent: BindingScope|null = null,
|
||||
private declareLocalVarCallback: DeclareLocalVarCallback = noop) {}
|
||||
|
||||
get(name: string): o.Expression|null {
|
||||
|
|
@ -914,14 +954,15 @@ export class BindingScope implements LocalResolver {
|
|||
if (value != null) {
|
||||
if (current !== this) {
|
||||
// make a local copy and reset the `declared` state.
|
||||
value = {lhs: value.lhs, rhs: value.rhs, declared: false};
|
||||
value = {lhs: value.lhs, rhs: value.rhs, rhsCallback: value.rhsCallback, declared: false};
|
||||
// Cache the value locally.
|
||||
this.map.set(name, value);
|
||||
}
|
||||
if (value.rhs && !value.declared) {
|
||||
const rhs = value.rhs || value.rhsCallback && value.rhsCallback(this.level);
|
||||
if (rhs && !value.declared) {
|
||||
// if it is first time we are referencing the variable in the scope
|
||||
// than invoke the callback to insert variable declaration.
|
||||
this.declareLocalVarCallback(value.lhs, value.rhs);
|
||||
// then invoke the callback to insert variable declaration.
|
||||
this.declareLocalVarCallback(value.lhs, rhs);
|
||||
value.declared = true;
|
||||
}
|
||||
return value.lhs;
|
||||
|
|
@ -940,17 +981,18 @@ export class BindingScope implements LocalResolver {
|
|||
* `undefined` for variable that are ambient such as `$event` and which don't have `rhs`
|
||||
* declaration.
|
||||
*/
|
||||
set(name: string, lhs: o.ReadVarExpr, rhs?: o.Expression): BindingScope {
|
||||
set(name: string, lhs: o.ReadVarExpr, rhs?: o.Expression,
|
||||
rhsCallback?: (level: number) => o.Expression): BindingScope {
|
||||
!this.map.has(name) ||
|
||||
error(`The name ${name} is already defined in scope to be ${this.map.get(name)}`);
|
||||
this.map.set(name, {lhs: lhs, rhs: rhs, declared: false});
|
||||
this.map.set(name, {lhs: lhs, rhs: rhs, declared: false, rhsCallback: rhsCallback});
|
||||
return this;
|
||||
}
|
||||
|
||||
getLocal(name: string): (o.Expression|null) { return this.get(name); }
|
||||
|
||||
nestedScope(declareCallback: DeclareLocalVarCallback): BindingScope {
|
||||
return new BindingScope(this, declareCallback);
|
||||
nestedScope(level: number, declareCallback: DeclareLocalVarCallback): BindingScope {
|
||||
return new BindingScope(level, this, declareCallback);
|
||||
}
|
||||
|
||||
freshReferenceName(): string {
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ export {
|
|||
e as ɵe,
|
||||
p as ɵp,
|
||||
pD as ɵpD,
|
||||
r as ɵr,
|
||||
rS as ɵrS,
|
||||
a as ɵa,
|
||||
s as ɵs,
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import {LInjector} from './interfaces/injector';
|
|||
import {AttributeMarker, LContainerNode, LElementNode, LNode, LViewNode, TContainerNode, TElementNode, TNodeFlags, TNodeType} from './interfaces/node';
|
||||
import {LQueries, QueryReadType} from './interfaces/query';
|
||||
import {Renderer3} from './interfaces/renderer';
|
||||
import {DECLARATION_PARENT, DIRECTIVES, HOST_NODE, INJECTOR, LViewData, QUERIES, RENDERER, TVIEW, TView} from './interfaces/view';
|
||||
import {DECLARATION_VIEW, DIRECTIVES, HOST_NODE, INJECTOR, LViewData, QUERIES, RENDERER, TVIEW, TView} from './interfaces/view';
|
||||
import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
|
||||
import {addRemoveViewFromContainer, appendChild, detachView, getChildLNode, getParentLNode, insertView, removeView} from './node_manipulation';
|
||||
import {ViewRef} from './view_ref';
|
||||
|
|
|
|||
|
|
@ -76,6 +76,8 @@ export {
|
|||
text as T,
|
||||
textBinding as t,
|
||||
|
||||
reference as r,
|
||||
|
||||
reserveSlots as rS,
|
||||
|
||||
embeddedViewStart as V,
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ import {assertDefined, assertEqual, assertLessThan, assertNotDefined, assertNotE
|
|||
import {throwCyclicDependencyError, throwErrorIfNoChangesMode, throwMultipleComponentError} from './errors';
|
||||
import {executeHooks, executeInitHooks, queueInitHooks, queueLifecycleHooks} from './hooks';
|
||||
import {ACTIVE_INDEX, LContainer, RENDER_PARENT, VIEWS} from './interfaces/container';
|
||||
import {ComponentDefInternal, ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefListOrFactory, InitialStylingFlags, PipeDefListOrFactory, RenderFlags} from './interfaces/definition';
|
||||
import {ComponentDefInternal, ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefListOrFactory, EmbeddedTemplate, InitialStylingFlags, PipeDefListOrFactory, RenderFlags} from './interfaces/definition';
|
||||
import {LInjector} from './interfaces/injector';
|
||||
import {AttributeMarker, InitialInputData, InitialInputs, LContainerNode, LElementNode, LNode, LProjectionNode, LTextNode, LViewNode, PropertyAliasValue, PropertyAliases, TAttributes, TContainerNode, TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
|
||||
import {CssSelectorList, NG_PROJECT_AS_ATTR_NAME} from './interfaces/projection';
|
||||
import {LQueries} from './interfaces/query';
|
||||
import {ProceduralRenderer3, RComment, RElement, RText, Renderer3, RendererFactory3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
|
||||
import {BINDING_INDEX, CLEANUP, CONTAINER_INDEX, CONTENT_QUERIES, CONTEXT, CurrentMatchesList, DECLARATION_PARENT, DIRECTIVES, FLAGS, HEADER_OFFSET, HOST_NODE, INJECTOR, LViewData, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RootContext, SANITIZER, TAIL, TData, TVIEW, TView} from './interfaces/view';
|
||||
import {BINDING_INDEX, CLEANUP, CONTAINER_INDEX, CONTENT_QUERIES, CONTEXT, CurrentMatchesList, DECLARATION_VIEW, DIRECTIVES, FLAGS, HEADER_OFFSET, HOST_NODE, INJECTOR, LViewData, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RootContext, SANITIZER, TAIL, TData, TVIEW, TView} from './interfaces/view';
|
||||
import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
|
||||
import {appendChild, appendProjectedNode, canInsertNativeNode, createTextNode, findComponentHost, getChildLNode, getLViewChild, getNextLNode, getParentLNode, insertView, removeView} from './node_manipulation';
|
||||
import {isNodeMatchingSelectorList, matchingSelectorIndex} from './node_selector_matcher';
|
||||
|
|
@ -334,7 +334,7 @@ export function createLViewData<T>(
|
|||
null, // tail
|
||||
-1, // containerIndex
|
||||
null, // contentQueries
|
||||
null // declarationParent
|
||||
null // declarationView
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -500,7 +500,7 @@ export function renderTemplate<T>(
|
|||
* Such lViewNode will then be renderer with renderEmbeddedTemplate() (see below).
|
||||
*/
|
||||
export function createEmbeddedViewNode<T>(
|
||||
tView: TView, context: T, declarationParent: LViewData, renderer: Renderer3,
|
||||
tView: TView, context: T, declarationView: LViewData, renderer: Renderer3,
|
||||
queries?: LQueries | null): LViewNode {
|
||||
const _isParent = isParent;
|
||||
const _previousOrParentNode = previousOrParentNode;
|
||||
|
|
@ -509,7 +509,7 @@ export function createEmbeddedViewNode<T>(
|
|||
|
||||
const lView =
|
||||
createLViewData(renderer, tView, context, LViewFlags.CheckAlways, getCurrentSanitizer());
|
||||
lView[DECLARATION_PARENT] = declarationParent;
|
||||
lView[DECLARATION_VIEW] = declarationView;
|
||||
|
||||
if (queries) {
|
||||
lView[QUERIES] = queries.createView();
|
||||
|
|
@ -547,7 +547,7 @@ export function renderEmbeddedTemplate<T>(
|
|||
|
||||
oldView = enterView(viewNode.data !, viewNode);
|
||||
namespaceHTML();
|
||||
callTemplateWithContexts(rf, context, tView.template !, viewNode.data ![DECLARATION_PARENT] !);
|
||||
callTemplateWithContexts(rf, context, tView.template !, viewNode.data ![DECLARATION_VIEW] !);
|
||||
if (rf & RenderFlags.Update) {
|
||||
refreshDescendantViews();
|
||||
} else {
|
||||
|
|
@ -577,11 +577,14 @@ export function renderEmbeddedTemplate<T>(
|
|||
* <li *ngFor="let item of list"> {{ item }} </li>
|
||||
* </ul>
|
||||
*
|
||||
* function AppComponentTemplate(rf, ctx) {
|
||||
* // instructions
|
||||
* function ulTemplate(rf, ulCtx, appCtx) {...}
|
||||
* function liTemplate(rf, liCtx, ulCtx, appCtx) {...}
|
||||
* }
|
||||
*
|
||||
* class AppComponent {...}
|
||||
* AppComponent.ngComponentDef = defineComponent({
|
||||
* template: function AppComponentTemplate(rf, ctx) {...}
|
||||
* });
|
||||
*
|
||||
*
|
||||
* The ul view's template must be called with its own context and its declaration
|
||||
* parent, AppComponent. The li view's template must be called with its own context, its
|
||||
|
|
@ -591,71 +594,85 @@ export function renderEmbeddedTemplate<T>(
|
|||
* can be declared in different views than they are used.
|
||||
*
|
||||
* @param rf The RenderFlags for this template invocation
|
||||
* @param context The context for this template
|
||||
* @param currentContext The context for this template
|
||||
* @param template The template function to call
|
||||
* @param parent1 The declaration parent of the dynamic view
|
||||
* @param parentView The declaration view of the dynamic view
|
||||
*/
|
||||
function callTemplateWithContexts(
|
||||
rf: RenderFlags, context: any, template: ComponentTemplate<any>, parent1: LViewData): void {
|
||||
const parent2 = parent1[DECLARATION_PARENT];
|
||||
function callTemplateWithContexts<T>(
|
||||
rf: RenderFlags, currentContext: T, template: EmbeddedTemplate<T>,
|
||||
parentView: LViewData): void {
|
||||
const parentContext = parentView[CONTEXT];
|
||||
const parentView2 = parentView[DECLARATION_VIEW];
|
||||
|
||||
// Calling a function with extra arguments has a VM cost, so only call with necessary args
|
||||
if (!parent2) return template(rf, context, parent1[CONTEXT]);
|
||||
|
||||
const parent3 = parent2[DECLARATION_PARENT];
|
||||
if (!parent3) return template(rf, context, parent1[CONTEXT], parent2[CONTEXT]);
|
||||
|
||||
const parent4 = parent3[DECLARATION_PARENT];
|
||||
if (!parent4) {
|
||||
return template(rf, context, parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT]);
|
||||
if (parentView2 === null) {
|
||||
return template(rf, currentContext, parentContext);
|
||||
}
|
||||
|
||||
const parent5 = parent4[DECLARATION_PARENT];
|
||||
if (!parent5) {
|
||||
return template(
|
||||
rf, context, parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT], parent4[CONTEXT]);
|
||||
const parentContext2 = parentView2[CONTEXT];
|
||||
const parentView3 = parentView2[DECLARATION_VIEW];
|
||||
if (parentView3 === null) {
|
||||
return template(rf, currentContext, parentContext, parentContext2);
|
||||
}
|
||||
|
||||
const parent6 = parent5[DECLARATION_PARENT];
|
||||
if (!parent6) {
|
||||
return template(
|
||||
rf, context, parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT], parent4[CONTEXT],
|
||||
parent5[CONTEXT]);
|
||||
const parentContext3 = parentView3[CONTEXT];
|
||||
const parentView4 = parentView3[DECLARATION_VIEW];
|
||||
if (parentView4 === null) {
|
||||
return template(rf, currentContext, parentContext, parentContext2, parentContext3);
|
||||
}
|
||||
|
||||
const parent7 = parent6[DECLARATION_PARENT];
|
||||
if (!parent7) {
|
||||
const parentContext4 = parentView4[CONTEXT];
|
||||
const parentView5 = parentView4[DECLARATION_VIEW];
|
||||
if (parentView5 === null) {
|
||||
return template(
|
||||
rf, context, parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT], parent4[CONTEXT],
|
||||
parent5[CONTEXT], parent6[CONTEXT]);
|
||||
rf, currentContext, parentContext, parentContext2, parentContext3, parentContext4);
|
||||
}
|
||||
|
||||
const parent8 = parent7[DECLARATION_PARENT];
|
||||
if (!parent8) {
|
||||
const parentContext5 = parentView5[CONTEXT];
|
||||
const parentView6 = parentView5[DECLARATION_VIEW];
|
||||
if (parentView6 === null) {
|
||||
return template(
|
||||
rf, context, parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT], parent4[CONTEXT],
|
||||
parent5[CONTEXT], parent6[CONTEXT], parent7[CONTEXT]);
|
||||
rf, currentContext, parentContext, parentContext2, parentContext3, parentContext4,
|
||||
parentContext5);
|
||||
}
|
||||
|
||||
const parent9 = parent8[DECLARATION_PARENT];
|
||||
if (!parent9) {
|
||||
const parentContext6 = parentView6[CONTEXT];
|
||||
const parentView7 = parentView6[DECLARATION_VIEW];
|
||||
if (parentView7 === null) {
|
||||
return template(
|
||||
rf, context, parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT], parent4[CONTEXT],
|
||||
parent5[CONTEXT], parent6[CONTEXT], parent7[CONTEXT], parent8[CONTEXT]);
|
||||
rf, currentContext, parentContext, parentContext2, parentContext3, parentContext4,
|
||||
parentContext5, parentContext6);
|
||||
}
|
||||
|
||||
const parentContext7 = parentView7[CONTEXT];
|
||||
const parentView8 = parentView7[DECLARATION_VIEW];
|
||||
if (parentView8 === null) {
|
||||
return template(
|
||||
rf, currentContext, parentContext, parentContext2, parentContext3, parentContext4,
|
||||
parentContext5, parentContext6, parentContext7);
|
||||
}
|
||||
|
||||
const parentContext8 = parentView8[CONTEXT];
|
||||
const parentView9 = parentView8[DECLARATION_VIEW];
|
||||
if (parentView9 === null) {
|
||||
return template(
|
||||
rf, currentContext, parentContext, parentContext2, parentContext3, parentContext4,
|
||||
parentContext5, parentContext6, parentContext7, parentContext8);
|
||||
}
|
||||
|
||||
// We support up to 8 nesting levels in embedded views before we give up and call apply()
|
||||
const contexts = [
|
||||
parent1[CONTEXT], parent2[CONTEXT], parent3[CONTEXT], parent4[CONTEXT], parent5[CONTEXT],
|
||||
parent6[CONTEXT], parent7[CONTEXT], parent8[CONTEXT], parent9[CONTEXT]
|
||||
const templateArgs = [
|
||||
rf, currentContext, parentContext, parentContext2, parentContext3, parentContext4,
|
||||
parentContext5, parentContext6, parentContext7, parentContext8, parentView9[CONTEXT]
|
||||
];
|
||||
|
||||
let currentView: LViewData = parent9;
|
||||
while (currentView[DECLARATION_PARENT]) {
|
||||
contexts.push(currentView[DECLARATION_PARENT] ![CONTEXT]);
|
||||
currentView = currentView[DECLARATION_PARENT] !;
|
||||
let currentDeclarationView: LViewData|null = parentView9[DECLARATION_VIEW];
|
||||
while (currentDeclarationView) {
|
||||
templateArgs.push(currentDeclarationView[CONTEXT]);
|
||||
currentDeclarationView = currentDeclarationView[DECLARATION_VIEW] !;
|
||||
}
|
||||
|
||||
tView.template !(rf, context, ...contexts);
|
||||
template.apply(null, templateArgs);
|
||||
}
|
||||
|
||||
export function renderComponentOrTemplate<T>(
|
||||
|
|
@ -990,7 +1007,7 @@ function getOrCreateTView(
|
|||
* @param pipes Registry of pipes for this view
|
||||
*/
|
||||
export function createTView(
|
||||
viewIndex: number, template: ComponentTemplate<any>| null,
|
||||
viewIndex: number, template: ComponentTemplate<any>| EmbeddedTemplate<any>| null,
|
||||
directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
|
||||
viewQuery: ComponentQuery<any>| null): TView {
|
||||
ngDevMode && ngDevMode.tView++;
|
||||
|
|
@ -1811,7 +1828,7 @@ export function createLContainer(
|
|||
* @param localRefs A set of local reference bindings on the element.
|
||||
*/
|
||||
export function container(
|
||||
index: number, template?: ComponentTemplate<any>, tagName?: string | null, attrs?: TAttributes,
|
||||
index: number, template?: EmbeddedTemplate<any>, tagName?: string | null, attrs?: TAttributes,
|
||||
localRefs?: string[] | null): void {
|
||||
ngDevMode &&
|
||||
assertEqual(
|
||||
|
|
@ -2636,6 +2653,20 @@ export function store<T>(index: number, value: T): void {
|
|||
viewData[adjustedIndex] = value;
|
||||
}
|
||||
|
||||
/** Retrieves a value from an LViewData at the given nesting level. */
|
||||
export function reference<T>(nestingLevel: number, index: number) {
|
||||
let currentView = viewData;
|
||||
while (nestingLevel > 0) {
|
||||
ngDevMode && assertDefined(
|
||||
currentView[DECLARATION_VIEW],
|
||||
'Declaration view should be defined if nesting level is greater than 0.');
|
||||
currentView = currentView[DECLARATION_VIEW] !;
|
||||
nestingLevel--;
|
||||
}
|
||||
|
||||
return loadInternal<T>(index, currentView);
|
||||
}
|
||||
|
||||
/** Retrieves a value from the `directives` array. */
|
||||
export function loadDirective<T>(index: number): T {
|
||||
ngDevMode && assertDefined(directives, 'Directives array should be defined if reading a dir.');
|
||||
|
|
|
|||
|
|
@ -11,11 +11,19 @@ import {RendererType2} from '../../render/api';
|
|||
import {Type} from '../../type';
|
||||
import {CssSelectorList} from './projection';
|
||||
|
||||
|
||||
/**
|
||||
* Definition of what a template rendering function should look like.
|
||||
* Definition of what a template rendering function should look like for a component.
|
||||
*/
|
||||
export type ComponentTemplate<T> = {
|
||||
(rf: RenderFlags, ctx: T, ...parentCtx: ({} | null)[]): void; ngPrivateData?: never;
|
||||
(rf: RenderFlags, ctx: T): void; ngPrivateData?: never;
|
||||
};
|
||||
|
||||
/**
|
||||
* Definition of what a template rendering function should look like for an embedded view.
|
||||
*/
|
||||
export type EmbeddedTemplate<T> = {
|
||||
(rf: RenderFlags, ctx: T, ...parentCtx: any[]): void;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const SANITIZER = 12;
|
|||
export const TAIL = 13;
|
||||
export const CONTAINER_INDEX = 14;
|
||||
export const CONTENT_QUERIES = 15;
|
||||
export const DECLARATION_PARENT = 16;
|
||||
export const DECLARATION_VIEW = 16;
|
||||
|
||||
/**
|
||||
* `LViewData` stores all of the information needed to process the instructions as
|
||||
|
|
@ -63,7 +63,7 @@ export interface LViewData extends Array<any> {
|
|||
* `LViewData`. Without this, the render method would have to keep a stack of
|
||||
* views as it is recursively rendering templates.
|
||||
*
|
||||
* This is also the "insertion" parent for embedded views. This allows us to properly
|
||||
* This is the "insertion" view for embedded views. This allows us to properly
|
||||
* destroy embedded views.
|
||||
*/
|
||||
[PARENT]: LViewData|null;
|
||||
|
|
@ -167,16 +167,16 @@ export interface LViewData extends Array<any> {
|
|||
[CONTENT_QUERIES]: QueryList<any>[]|null;
|
||||
|
||||
/**
|
||||
* Parent view where this view's template was declared.
|
||||
* View where this view's template was declared.
|
||||
*
|
||||
* Only applicable for dynamically created views. Will be null for inline/component views.
|
||||
*
|
||||
* The template for a dynamically created view may be declared in a different view than
|
||||
* it is inserted. We already track the "insertion parent" (view where the template was
|
||||
* inserted) in LViewData[PARENT], but we also need access to the "declaration parent"
|
||||
* it is inserted. We already track the "insertion view" (view where the template was
|
||||
* inserted) in LViewData[PARENT], but we also need access to the "declaration view"
|
||||
* (view where the template was declared). Otherwise, we wouldn't be able to call the
|
||||
* view's template function with the proper contexts. Context should be inherited from
|
||||
* the declaration parent tree, not the insertion parent tree.
|
||||
* the declaration view tree, not the insertion view tree.
|
||||
*
|
||||
* Example (AppComponent template):
|
||||
*
|
||||
|
|
@ -184,13 +184,13 @@ export interface LViewData extends Array<any> {
|
|||
* <some-comp [tpl]="foo"></some-comp> <-- inserted inside this component -->
|
||||
*
|
||||
* The <ng-template> above is declared in the AppComponent template, but it will be passed into
|
||||
* SomeComp and inserted there. In this case, the declaration parent would be the AppComponent,
|
||||
* but the insertion parent would be SomeComp. When we are removing views, we would want to
|
||||
* traverse through the insertion parent to clean up listeners. When we are calling the
|
||||
* template function during change detection, we need the declaration parent to get inherited
|
||||
* SomeComp and inserted there. In this case, the declaration view would be the AppComponent,
|
||||
* but the insertion view would be SomeComp. When we are removing views, we would want to
|
||||
* traverse through the insertion view to clean up listeners. When we are calling the
|
||||
* template function during change detection, we need the declaration view to get inherited
|
||||
* context.
|
||||
*/
|
||||
[DECLARATION_PARENT]: LViewData|null;
|
||||
[DECLARATION_VIEW]: LViewData|null;
|
||||
}
|
||||
|
||||
/** Flags associated with an LView (saved in LViewData[FLAGS]) */
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ export const angularCoreEnv: {[name: string]: Function} = {
|
|||
'ɵqR': r3.qR,
|
||||
'ɵQr': r3.Qr,
|
||||
'ɵrS': r3.rS,
|
||||
'ɵr': r3.r,
|
||||
'ɵs': r3.s,
|
||||
'ɵsm': r3.sm,
|
||||
'ɵsp': r3.sp,
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_co
|
|||
import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, InternalViewRef as viewEngine_InternalViewRef} from '../linker/view_ref';
|
||||
|
||||
import {checkNoChanges, detectChanges, markViewDirty, storeCleanupFn, viewAttached} from './instructions';
|
||||
import {EmbeddedTemplate} from './interfaces/definition';
|
||||
import {LViewNode} from './interfaces/node';
|
||||
import {FLAGS, LViewData, LViewFlags} from './interfaces/view';
|
||||
import {destroyLView} from './node_manipulation';
|
||||
|
|
@ -243,3 +244,30 @@ export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_Int
|
|||
|
||||
attachToAppRef(appRef: ApplicationRef) { this._appRef = appRef; }
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
|
||||
|
||||
export class EmbeddedViewRef<T> extends ViewRef<T> {
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
_lViewNode: LViewNode;
|
||||
private _viewContainerRef: viewEngine_ViewContainerRef|null = null;
|
||||
|
||||
constructor(viewNode: LViewNode, template: EmbeddedTemplate<T>, context: T) {
|
||||
super(viewNode.data, context);
|
||||
this._lViewNode = viewNode;
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
if (this._viewContainerRef && viewAttached(this._view)) {
|
||||
this._viewContainerRef.detach(this._viewContainerRef.indexOf(this));
|
||||
this._viewContainerRef = null;
|
||||
}
|
||||
super.destroy();
|
||||
}
|
||||
|
||||
attachToViewContainerRef(vcRef: viewEngine_ViewContainerRef) { this._viewContainerRef = vcRef; }
|
||||
}
|
||||
>>>>>>> fixup! fix(ivy): flatten template fns for nested views
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
{
|
||||
"name": "ChangeDetectionStrategy"
|
||||
},
|
||||
{
|
||||
"name": "DECLARATION_VIEW"
|
||||
},
|
||||
{
|
||||
"name": "DIRECTIVES"
|
||||
},
|
||||
|
|
@ -98,6 +101,9 @@
|
|||
{
|
||||
"name": "callHooks"
|
||||
},
|
||||
{
|
||||
"name": "callTemplateWithContexts"
|
||||
},
|
||||
{
|
||||
"name": "canInsertNativeNode"
|
||||
},
|
||||
|
|
@ -210,10 +216,10 @@
|
|||
"name": "refreshContentQueries"
|
||||
},
|
||||
{
|
||||
"name": "refreshDynamicEmbeddedViews"
|
||||
"name": "refreshDescendantViews"
|
||||
},
|
||||
{
|
||||
"name": "refreshView"
|
||||
"name": "refreshDynamicEmbeddedViews"
|
||||
},
|
||||
{
|
||||
"name": "renderComponent"
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@
|
|||
{
|
||||
"name": "ChangeDetectionStrategy"
|
||||
},
|
||||
{
|
||||
"name": "DECLARATION_VIEW"
|
||||
},
|
||||
{
|
||||
"name": "DIRECTIVES"
|
||||
},
|
||||
|
|
@ -137,6 +140,24 @@
|
|||
{
|
||||
"name": "TemplateRef$1"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_footer_Template_6"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_footer_button_Template_5"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_Template_5"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_input_Template_1"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_li_Template_3"
|
||||
},
|
||||
{
|
||||
"name": "ToDoAppComponent_section_li_input_Template_6"
|
||||
},
|
||||
{
|
||||
"name": "Todo"
|
||||
},
|
||||
|
|
@ -305,6 +326,9 @@
|
|||
{
|
||||
"name": "callHooks"
|
||||
},
|
||||
{
|
||||
"name": "callTemplateWithContexts"
|
||||
},
|
||||
{
|
||||
"name": "canInsertNativeNode"
|
||||
},
|
||||
|
|
@ -701,6 +725,9 @@
|
|||
{
|
||||
"name": "readElementValue"
|
||||
},
|
||||
{
|
||||
"name": "reference"
|
||||
},
|
||||
{
|
||||
"name": "refreshChildComponents"
|
||||
},
|
||||
|
|
@ -708,10 +735,10 @@
|
|||
"name": "refreshContentQueries"
|
||||
},
|
||||
{
|
||||
"name": "refreshDynamicEmbeddedViews"
|
||||
"name": "refreshDescendantViews"
|
||||
},
|
||||
{
|
||||
"name": "refreshView"
|
||||
"name": "refreshDynamicEmbeddedViews"
|
||||
},
|
||||
{
|
||||
"name": "removeListeners"
|
||||
|
|
|
|||
|
|
@ -226,6 +226,11 @@ describe('@angular/common integration', () => {
|
|||
elementProperty(1, 'ngForOf', bind(myApp.items));
|
||||
}
|
||||
|
||||
},
|
||||
directives: () => [NgForOf]
|
||||
});
|
||||
}
|
||||
|
||||
function liTemplate(rf1: RenderFlags, row: any, myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'li');
|
||||
|
|
@ -249,10 +254,6 @@ describe('@angular/common integration', () => {
|
|||
1, interpolation2('', cell.$implicit, ' - ', (row.$implicit as any).value, ''));
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: () => [NgForOf]
|
||||
});
|
||||
}
|
||||
|
||||
const fixture = new ComponentFixture(MyApp);
|
||||
|
||||
|
|
@ -392,6 +393,11 @@ describe('@angular/common integration', () => {
|
|||
elementProperty(0, 'ngForOf', bind(myApp.items));
|
||||
}
|
||||
|
||||
},
|
||||
directives: () => [NgForOf]
|
||||
});
|
||||
}
|
||||
|
||||
function itemTemplate0(rf1: RenderFlags, item0: any, myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'span');
|
||||
|
|
@ -416,8 +422,7 @@ describe('@angular/common integration', () => {
|
|||
}
|
||||
}
|
||||
|
||||
function itemTemplate2(
|
||||
rf1: RenderFlags, item2: any, item1: any, item0: any, myApp: MyApp) {
|
||||
function itemTemplate2(rf1: RenderFlags, item2: any, item1: any, item0: any, myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'span');
|
||||
{ container(1, itemTemplate3, null, ['ngForOf', '']); }
|
||||
|
|
@ -457,8 +462,8 @@ describe('@angular/common integration', () => {
|
|||
}
|
||||
|
||||
function itemTemplate5(
|
||||
rf1: RenderFlags, item5: any, item4: any, item3: any, item2: any, item1: any,
|
||||
item0: any, myApp: MyApp) {
|
||||
rf1: RenderFlags, item5: any, item4: any, item3: any, item2: any, item1: any, item0: any,
|
||||
myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'span');
|
||||
{ container(1, itemTemplate6, null, ['ngForOf', '']); }
|
||||
|
|
@ -471,8 +476,8 @@ describe('@angular/common integration', () => {
|
|||
}
|
||||
|
||||
function itemTemplate6(
|
||||
rf1: RenderFlags, item6: any, item5: any, item4: any, item3: any, item2: any,
|
||||
item1: any, item0: any, myApp: MyApp) {
|
||||
rf1: RenderFlags, item6: any, item5: any, item4: any, item3: any, item2: any, item1: any,
|
||||
item0: any, myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'span');
|
||||
{ container(1, itemTemplate7, null, ['ngForOf', '']); }
|
||||
|
|
@ -485,8 +490,8 @@ describe('@angular/common integration', () => {
|
|||
}
|
||||
|
||||
function itemTemplate7(
|
||||
rf1: RenderFlags, item7: any, item6: any, item5: any, item4: any, item3: any,
|
||||
item2: any, item1: any, item0: any, myApp: MyApp) {
|
||||
rf1: RenderFlags, item7: any, item6: any, item5: any, item4: any, item3: any, item2: any,
|
||||
item1: any, item0: any, myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'span');
|
||||
{ container(1, itemTemplate8, null, ['ngForOf', '']); }
|
||||
|
|
@ -499,8 +504,8 @@ describe('@angular/common integration', () => {
|
|||
}
|
||||
|
||||
function itemTemplate8(
|
||||
rf1: RenderFlags, item8: any, item7: any, item6: any, item5: any, item4: any,
|
||||
item3: any, item2: any, item1: any, item0: any, myApp: MyApp) {
|
||||
rf1: RenderFlags, item8: any, item7: any, item6: any, item5: any, item4: any, item3: any,
|
||||
item2: any, item1: any, item0: any, myApp: MyApp) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'span');
|
||||
{ text(1); }
|
||||
|
|
@ -508,20 +513,15 @@ describe('@angular/common integration', () => {
|
|||
}
|
||||
|
||||
if (rf1 & RenderFlags.Update) {
|
||||
textBinding(1, interpolationV([
|
||||
'', item8.$implicit, '.', item7.$implicit.value,
|
||||
'.', item6.$implicit.value, '.', item5.$implicit.value,
|
||||
'.', item4.$implicit.value, '.', item3.$implicit.value,
|
||||
'.', item2.$implicit.value, '.', item1.$implicit.value,
|
||||
'.', item0.$implicit.value, '.', myApp.value,
|
||||
''
|
||||
textBinding(
|
||||
1, interpolationV([
|
||||
'', item8.$implicit, '.', item7.$implicit.value, '.', item6.$implicit.value,
|
||||
'.', item5.$implicit.value, '.', item4.$implicit.value, '.', item3.$implicit.value,
|
||||
'.', item2.$implicit.value, '.', item1.$implicit.value, '.', item0.$implicit.value,
|
||||
'.', myApp.value, ''
|
||||
]));
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: () => [NgForOf]
|
||||
});
|
||||
}
|
||||
|
||||
const fixture = new ComponentFixture(MyApp);
|
||||
|
||||
|
|
@ -564,7 +564,12 @@ describe('@angular/common integration', () => {
|
|||
elementProperty(1, 'ngIf', bind(myApp.showing));
|
||||
}
|
||||
|
||||
function templateOne(rf: RenderFlags, ctx: any, parent: MyApp) {
|
||||
},
|
||||
directives: () => [NgIf]
|
||||
});
|
||||
}
|
||||
|
||||
function templateOne(rf: RenderFlags, ctx: any, myApp: MyApp) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'div');
|
||||
{ text(1); }
|
||||
|
|
@ -574,7 +579,8 @@ describe('@angular/common integration', () => {
|
|||
textBinding(1, bind(myApp.valueOne));
|
||||
}
|
||||
}
|
||||
function templateTwo(rf: RenderFlags, ctx: any, parent: MyApp) {
|
||||
|
||||
function templateTwo(rf: RenderFlags, ctx: any, myApp: MyApp) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'div');
|
||||
{ text(1); }
|
||||
|
|
@ -584,10 +590,6 @@ describe('@angular/common integration', () => {
|
|||
textBinding(1, bind(myApp.valueTwo));
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: () => [NgIf]
|
||||
});
|
||||
}
|
||||
|
||||
const fixture = new ComponentFixture(MyApp);
|
||||
expect(fixture.html).toEqual('<div>one</div><div>two</div>');
|
||||
|
|
|
|||
|
|
@ -389,6 +389,11 @@ describe('recursive components', () => {
|
|||
elementProperty(2, 'ngIf', bind(ctx.data.right));
|
||||
}
|
||||
|
||||
},
|
||||
inputs: {data: 'data'},
|
||||
});
|
||||
}
|
||||
|
||||
function IfTemplate(rf1: RenderFlags, left: any, parent: NgIfTree) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'ng-if-tree');
|
||||
|
|
@ -398,6 +403,7 @@ describe('recursive components', () => {
|
|||
elementProperty(0, 'data', bind(parent.data.left));
|
||||
}
|
||||
}
|
||||
|
||||
function IfTemplate2(rf1: RenderFlags, right: any, parent: NgIfTree) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'ng-if-tree');
|
||||
|
|
@ -407,10 +413,7 @@ describe('recursive components', () => {
|
|||
elementProperty(0, 'data', bind(parent.data.right));
|
||||
}
|
||||
}
|
||||
},
|
||||
inputs: {data: 'data'},
|
||||
});
|
||||
}
|
||||
|
||||
(NgIfTree.ngComponentDef as ComponentDefInternal<NgIfTree>).directiveDefs =
|
||||
() => [NgIfTree.ngComponentDef, NgIf.ngDirectiveDef];
|
||||
|
||||
|
|
|
|||
|
|
@ -823,13 +823,14 @@ describe('content projection', () => {
|
|||
elementProperty(1, 'ngIf', bind(ctx.showing));
|
||||
}
|
||||
|
||||
function IfTemplate(rf1: RenderFlags, ctx1: any, child: any) {
|
||||
}, [NgIf]);
|
||||
|
||||
function IfTemplate(rf1: RenderFlags, ctx: any, child: any) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
projectionDef();
|
||||
projection(0);
|
||||
}
|
||||
}
|
||||
}, [NgIf]);
|
||||
|
||||
let child: {showing: boolean};
|
||||
/**
|
||||
|
|
@ -887,13 +888,14 @@ describe('content projection', () => {
|
|||
elementProperty(1, 'ngIf', bind(ctx.showing));
|
||||
}
|
||||
|
||||
function IfTemplate(rf1: RenderFlags, ctx1: any, child: any) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
}, [NgIf]);
|
||||
|
||||
function IfTemplate(rf: RenderFlags, ctx: any, child: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
projectionDef();
|
||||
projection(0);
|
||||
}
|
||||
}
|
||||
}, [NgIf]);
|
||||
|
||||
let child: {showing: boolean};
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {defineComponent, defineDirective} from '../../src/render3/index';
|
||||
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, load, text, textBinding} from '../../src/render3/instructions';
|
||||
import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
|
||||
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation2, load, reference, text, textBinding} from '../../src/render3/instructions';
|
||||
import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition';
|
||||
|
||||
import {NgIf} from './common_with_def';
|
||||
import {ComponentFixture, createComponent, renderToHtml} from './render_util';
|
||||
|
||||
describe('exports', () => {
|
||||
|
|
@ -21,9 +22,8 @@ describe('exports', () => {
|
|||
element(0, 'input', ['value', 'one'], ['myInput', '']);
|
||||
text(2);
|
||||
}
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
tmp = load(1);
|
||||
const tmp = load(1) as any;
|
||||
textBinding(2, tmp.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -39,9 +39,8 @@ describe('exports', () => {
|
|||
element(0, 'comp', null, ['myComp', '']);
|
||||
text(2);
|
||||
}
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
tmp = load(1);
|
||||
const tmp = load(1) as any;
|
||||
textBinding(2, tmp.name);
|
||||
}
|
||||
}
|
||||
|
|
@ -94,9 +93,8 @@ describe('exports', () => {
|
|||
element(0, 'comp', null, ['myComp', '']);
|
||||
element(2, 'div', ['myDir', '']);
|
||||
}
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
tmp = load(1);
|
||||
const tmp = load(1) as any;
|
||||
elementProperty(2, 'myDir', bind(tmp));
|
||||
}
|
||||
}
|
||||
|
|
@ -113,9 +111,8 @@ describe('exports', () => {
|
|||
element(0, 'div', ['someDir', ''], ['myDir', 'someDir']);
|
||||
text(2);
|
||||
}
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
tmp = load(1);
|
||||
const tmp = load(1) as any;
|
||||
textBinding(2, tmp.name);
|
||||
}
|
||||
}
|
||||
|
|
@ -155,8 +152,8 @@ describe('exports', () => {
|
|||
text(0);
|
||||
element(1, 'input', ['value', 'one'], ['myInput', '']);
|
||||
}
|
||||
const tmp = load(2) as any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
const tmp = load(2) as any;
|
||||
textBinding(0, bind(tmp.value));
|
||||
}
|
||||
}
|
||||
|
|
@ -172,8 +169,8 @@ describe('exports', () => {
|
|||
element(0, 'div');
|
||||
element(1, 'input', ['value', 'one'], ['myInput', '']);
|
||||
}
|
||||
const tmp = load(2) as any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
const tmp = load(2) as any;
|
||||
elementProperty(0, 'title', bind(tmp.value));
|
||||
}
|
||||
}
|
||||
|
|
@ -188,8 +185,8 @@ describe('exports', () => {
|
|||
element(0, 'div');
|
||||
element(1, 'input', ['value', 'one'], ['myInput', '']);
|
||||
}
|
||||
const tmp = load(2) as any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
const tmp = load(2) as any;
|
||||
elementAttribute(0, 'aria-label', bind(tmp.value));
|
||||
}
|
||||
}
|
||||
|
|
@ -206,8 +203,8 @@ describe('exports', () => {
|
|||
elementEnd();
|
||||
element(1, 'input', ['type', 'checkbox', 'checked', 'true'], ['myInput', '']);
|
||||
}
|
||||
const tmp = load(2) as any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
const tmp = load(2) as any;
|
||||
elementClassProp(0, 0, tmp.checked);
|
||||
elementStylingApply(0);
|
||||
}
|
||||
|
|
@ -253,9 +250,8 @@ describe('exports', () => {
|
|||
element(0, 'div', ['myDir', '']);
|
||||
element(1, 'comp', null, ['myComp', '']);
|
||||
}
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
tmp = load(2) as any;
|
||||
const tmp = load(2) as any;
|
||||
elementProperty(0, 'myDir', bind(tmp));
|
||||
}
|
||||
}
|
||||
|
|
@ -274,11 +270,9 @@ describe('exports', () => {
|
|||
element(2, 'comp', null, ['myComp', '']);
|
||||
element(4, 'input', ['value', 'one'], ['myInput', '']);
|
||||
}
|
||||
let tmp1: any;
|
||||
let tmp2: any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
tmp1 = load(3) as any;
|
||||
tmp2 = load(5) as any;
|
||||
const tmp1 = load(3) as any;
|
||||
const tmp2 = load(5) as any;
|
||||
textBinding(0, bind(tmp2.value));
|
||||
textBinding(1, bind(tmp1.name));
|
||||
}
|
||||
|
|
@ -315,13 +309,12 @@ describe('exports', () => {
|
|||
if (ctx.condition) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
let tmp: any;
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
text(0);
|
||||
element(1, 'input', ['value', 'one'], ['myInput', '']);
|
||||
}
|
||||
if (rf1 & RenderFlags.Update) {
|
||||
tmp = load(2);
|
||||
const tmp = load(2) as any;
|
||||
textBinding(0, bind(tmp.value));
|
||||
}
|
||||
}
|
||||
|
|
@ -337,5 +330,71 @@ describe('exports', () => {
|
|||
})).toEqual('<div>one<input value="one"></div>');
|
||||
expect(renderToHtml(Template, {condition: false})).toEqual('<div></div>');
|
||||
});
|
||||
|
||||
it('should support local refs in nested dynamic views', () => {
|
||||
/**
|
||||
* <input value="one" #outerInput>
|
||||
* <div *ngIf="outer">
|
||||
* {{ outerInput.value }}
|
||||
*
|
||||
* <input value = "two" #innerInput>
|
||||
*
|
||||
* <div *ngIf="inner">
|
||||
* {{ outerInput.value }} - {{ innerInput.value}}
|
||||
* </div>
|
||||
* </div>
|
||||
*/
|
||||
const App = createComponent('app', function(rf: RenderFlags, app: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
|
||||
elementEnd();
|
||||
container(2, outerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
elementProperty(2, 'ngIf', bind(app.outer));
|
||||
}
|
||||
}, [NgIf]);
|
||||
|
||||
function outerTemplate(rf: RenderFlags, outer: any, app: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'div');
|
||||
{
|
||||
text(1);
|
||||
elementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
|
||||
elementEnd();
|
||||
container(4, innerTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
|
||||
}
|
||||
elementEnd();
|
||||
}
|
||||
|
||||
const outerInput = reference(1, 1) as any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
textBinding(1, bind(outerInput.value));
|
||||
elementProperty(4, 'ngIf', bind(app.inner));
|
||||
}
|
||||
}
|
||||
|
||||
function innerTemplate(rf: RenderFlags, inner: any, outer: any, app: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'div');
|
||||
{ text(1); }
|
||||
elementEnd();
|
||||
}
|
||||
|
||||
const outerInput = reference(2, 1) as any;
|
||||
const innerInput = reference(1, 3) as any;
|
||||
if (rf & RenderFlags.Update) {
|
||||
textBinding(1, interpolation2('', outerInput.value, ' - ', innerInput.value, ''));
|
||||
}
|
||||
}
|
||||
|
||||
const fixture = new ComponentFixture(App);
|
||||
fixture.component.outer = true;
|
||||
fixture.component.inner = true;
|
||||
fixture.update();
|
||||
expect(fixture.html)
|
||||
.toEqual(`<input value="one"><div>one<input value="two"><div>one - two</div></div>`);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -506,9 +506,9 @@ describe('ViewContainerRef', () => {
|
|||
*
|
||||
* <child [tpl]="foo"></child> <-- template insertion inside
|
||||
*/
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
container(0, template);
|
||||
container(0, fooTemplate);
|
||||
elementStart(1, 'child');
|
||||
elementEnd();
|
||||
}
|
||||
|
|
@ -519,7 +519,9 @@ describe('ViewContainerRef', () => {
|
|||
elementProperty(1, 'tpl', bind(tplRef));
|
||||
}
|
||||
|
||||
function template(rf1: RenderFlags, ctx1: any, parent: any) {
|
||||
}, [Child]);
|
||||
|
||||
function fooTemplate(rf1: RenderFlags, ctx: any, parent: any) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'div');
|
||||
{ text(1); }
|
||||
|
|
@ -530,7 +532,6 @@ describe('ViewContainerRef', () => {
|
|||
textBinding(1, bind(parent.name));
|
||||
}
|
||||
}
|
||||
}, [Child]);
|
||||
|
||||
const fixture = new ComponentFixture(Parent);
|
||||
fixture.component.name = 'Parent';
|
||||
|
|
@ -609,6 +610,8 @@ describe('ViewContainerRef', () => {
|
|||
elementProperty(1, 'rows', bind(parent.rows));
|
||||
}
|
||||
|
||||
}, [LoopComp]);
|
||||
|
||||
function rowTemplate(rf1: RenderFlags, row: any, parent: any) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
container(0, cellTemplate);
|
||||
|
|
@ -618,8 +621,7 @@ describe('ViewContainerRef', () => {
|
|||
|
||||
if (rf1 & RenderFlags.Update) {
|
||||
// Hack until we have local refs for templates
|
||||
const cellTemplateRef =
|
||||
getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
|
||||
const cellTemplateRef = getOrCreateTemplateRef(getOrCreateNodeInjectorForNode(load(0)));
|
||||
elementProperty(1, 'tpl', bind(cellTemplateRef));
|
||||
elementProperty(1, 'rows', bind(row.$implicit.data));
|
||||
}
|
||||
|
|
@ -638,7 +640,6 @@ describe('ViewContainerRef', () => {
|
|||
'', cell.$implicit, ' - ', row.$implicit.value, ' - ', parent.name, ''));
|
||||
}
|
||||
}
|
||||
}, [LoopComp]);
|
||||
|
||||
const fixture = new ComponentFixture(Parent);
|
||||
fixture.component.name = 'Parent';
|
||||
|
|
|
|||
Loading…
Reference in New Issue