iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ivy): generate vars in component defs (#25562) 

PR Close #25562
This commit is contained in:
Kara Erickson 2018-08-18 11:14:50 -07:00 committed by Jason Aden
parent d2be3d5775
commit 21a14407f6
48 changed files with 1043 additions and 757 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
modules/benchmarks/src/largetable/render3/table.ts
View File

@ -20,6 +20,7 @@ export class LargeTableComponent {
type: LargeTableComponent,
selectors: [['largetable']],
consts: 3,
vars: 0,
template: function(rf: ɵRenderFlags, ctx: LargeTableComponent) {
if (rf & ɵRenderFlags.Create) {
ɵelementStart(0, 'table');
@ -34,7 +35,7 @@ export class LargeTableComponent {
ɵcontainerRefreshStart(2);
{
for (let row of ctx.data) {
let rf1 = ɵembeddedViewStart(1, 2);
let rf1 = ɵembeddedViewStart(1, 2, 0);
{
if (rf1 & ɵRenderFlags.Create) {
ɵelementStart(0, 'tr');
@ -45,7 +46,7 @@ export class LargeTableComponent {
ɵcontainerRefreshStart(1);
{
for (let cell of row) {
let rf2 = ɵembeddedViewStart(2, 2);
let rf2 = ɵembeddedViewStart(2, 2, 1);
{
if (rf2 & ɵRenderFlags.Create) {
ɵelementStart(0, 'td');

10
modules/benchmarks/src/tree/render3/tree.ts
View File

@ -39,6 +39,7 @@ export class TreeComponent {
type: TreeComponent,
selectors: [['tree']],
consts: 4,
vars: 1,
template: function(rf: ɵRenderFlags, ctx: TreeComponent) {
if (rf & ɵRenderFlags.Create) {
ɵelementStart(0, 'span');
@ -54,7 +55,7 @@ export class TreeComponent {
ɵcontainerRefreshStart(2);
{
if (ctx.data.left != null) {
let rf0 = ɵembeddedViewStart(0, 1);
let rf0 = ɵembeddedViewStart(0, 1, 1);
{
if (rf0 & ɵRenderFlags.Create) {
ɵelementStart(0, 'tree');
@ -71,7 +72,7 @@ export class TreeComponent {
ɵcontainerRefreshStart(3);
{
if (ctx.data.right != null) {
let rf0 = ɵembeddedViewStart(0, 1);
let rf0 = ɵembeddedViewStart(0, 1, 1);
{
if (rf0 & ɵRenderFlags.Create) {
ɵelementStart(0, 'tree');
@ -101,6 +102,7 @@ export class TreeFunction {
type: TreeFunction,
selectors: [['tree']],
consts: 5,
vars: 1,
template: function(rf: ɵRenderFlags, ctx: TreeFunction) {
// bit of a hack
TreeTpl(rf, ctx.data);
@ -130,7 +132,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
ɵcontainerRefreshStart(3);
{
if (ctx.left != null) {
let rf0 = ɵembeddedViewStart(0, 5);
let rf0 = ɵembeddedViewStart(0, 5, 1);
{ TreeTpl(rf0, ctx.left); }
ɵembeddedViewEnd();
}
@ -139,7 +141,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
ɵcontainerRefreshStart(4);
{
if (ctx.right != null) {
let rf0 = ɵembeddedViewStart(0, 5);
let rf0 = ɵembeddedViewStart(0, 5, 1);
{ TreeTpl(rf0, ctx.right); }
ɵembeddedViewEnd();
}

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

@ -415,7 +415,8 @@ describe('compiler compliance', () => {
},
features: [$r3$.ɵPublicFeature],
consts: 1,
template:function MyComponent_Template(rf,ctx){
vars: 0,
template: function MyComponent_Template(rf,ctx){
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(_c0, _c1);
@ -469,7 +470,8 @@ describe('compiler compliance', () => {
factory: function ChildComponent_Factory(t) { return new (t || ChildComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function ChildComponent_Template(rf, ctx) {
vars: 0,
template: function ChildComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtext(0, "child-view");
}
@ -496,7 +498,8 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function MyComponent_Template(rf, ctx) {
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "child", $c1$);
$r3$.ɵtext(1, "!");
@ -649,10 +652,11 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 3,
template: function MyComponent_Template(rf, ctx) {
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "ul", null, $c1$);
$r3$.ɵtemplate(2, MyComponent_li_Template_2, 2, null, $c2$);
$r3$.ɵtemplate(2, MyComponent_li_Template_2, 2, 1, null, $c2$);
$r3$.ɵelementEnd();
}
},
@ -710,7 +714,8 @@ describe('compiler compliance', () => {
factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyApp_Template(rf, ctx) {
vars: 3,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "my-comp");
$r3$.ɵreserveSlots(2);
@ -791,7 +796,8 @@ describe('compiler compliance', () => {
factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyApp_Template(rf, ctx) {
vars: 11,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "my-comp");
$r3$.ɵreserveSlots(10);
@ -854,7 +860,8 @@ describe('compiler compliance', () => {
factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyApp_Template(rf, ctx) {
vars: 3,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "object-comp");
$r3$.ɵreserveSlots(2);
@ -921,7 +928,8 @@ describe('compiler compliance', () => {
factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyApp_Template(rf, ctx) {
vars: 8,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "nested-comp");
$r3$.ɵreserveSlots(7);
@ -980,7 +988,8 @@ describe('compiler compliance', () => {
factory: function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function SimpleComponent_Template(rf, ctx) {
vars: 0,
template: function SimpleComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵprojectionDef();
$r3$.ɵelementStart(0, "div");
@ -1002,7 +1011,8 @@ describe('compiler compliance', () => {
factory: function ComplexComponent_Factory(t) { return new (t || ComplexComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 4,
template: function ComplexComponent_Template(rf, ctx) {
vars: 0,
template: function ComplexComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵprojectionDef($c1$, $c2$);
$r3$.ɵelementStart(0, "div", $c3$);
@ -1078,7 +1088,8 @@ describe('compiler compliance', () => {
}
},
consts: 2,
template: function ViewQueryComponent_Template(rf, ctx) {
vars: 0,
template: function ViewQueryComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(1, "div", $e0_attrs$);
}
@ -1146,7 +1157,8 @@ describe('compiler compliance', () => {
},
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function ContentQueryComponent_Template(rf, ctx) {
vars: 0,
template: function ContentQueryComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵprojectionDef();
$r3$.ɵelementStart(0, "div");
@ -1232,7 +1244,8 @@ describe('compiler compliance', () => {
factory: function MyApp_Factory(t) { return new (t || MyApp)(); },
features: [$r3$.ɵPublicFeature],
consts: 6,
template: function MyApp_Template(rf, ctx) {
vars: 17,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtext(0);
$r3$.ɵpipe(1, "myPurePipe");
@ -1284,7 +1297,8 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 3,
template: function MyComponent_Template(rf, ctx) {
vars: 1,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "input", null, $c1$);
$r3$.ɵtext(2);
@ -1359,7 +1373,7 @@ describe('compiler compliance', () => {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵtext(1);
$r3$.ɵtemplate(2, MyComponent_div_span_Template_2, 2, null, $c2$);
$r3$.ɵtemplate(2, MyComponent_div_span_Template_2, 2, 1, null, $c2$);
$r3$.ɵelement(3, "span", null, $c4$);
$r3$.ɵelementEnd();
}
@ -1377,11 +1391,12 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 6,
template: function MyComponent_Template(rf, ctx) {
vars: 1,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "div", null, $c1$);
$r3$.ɵtext(2);
$r3$.ɵtemplate(3, MyComponent_div_Template_3, 5, null, $c2$);
$r3$.ɵtemplate(3, MyComponent_div_Template_3, 5, 1, null, $c2$);
$r3$.ɵelement(4, "div", null, $c3$);
}
if (rf & 2) {
@ -1445,7 +1460,7 @@ describe('compiler compliance', () => {
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵelement(1, "div", null, $c1$);
$i0$.ɵtemplate(3, MyComponent_div_span_Template_3, 2, null, $c2$);
$i0$.ɵtemplate(3, MyComponent_div_span_Template_3, 2, 1, null, $c2$);
$i0$.ɵelementEnd();
}
if (rf & 2) {
@ -1457,7 +1472,7 @@ describe('compiler compliance', () => {
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 4, null, $c0$);
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 4, 1, null, $c0$);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -1522,7 +1537,8 @@ describe('compiler compliance', () => {
inputs: {nameMin: "name"},
features: [$r3$.ɵPublicFeature, $r3$.ɵNgOnChangesFeature],
consts: 0,
template: function LifecycleComp_Template(rf, ctx) {}
vars: 0,
template: function LifecycleComp_Template(rf, ctx) {}
});`;
const SimpleLayoutDefinition = `
@ -1532,7 +1548,8 @@ describe('compiler compliance', () => {
factory: function SimpleLayout_Factory(t) { return new (t || SimpleLayout)(); },
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function SimpleLayout_Template(rf, ctx) {
vars: 2,
template: function SimpleLayout_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelement(0, "lifecycle-comp");
$r3$.ɵelement(1, "lifecycle-comp");
@ -1661,11 +1678,12 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function MyComponent_Template(rf, ctx){
vars: 1,
template: function MyComponent_Template(rf, ctx){
if (rf & 1) {
$r3$.ɵnamespaceSVG();
$r3$.ɵelementStart(0,"svg");
$r3$.ɵtemplate(1, MyComponent__svg_g_Template_1, 2, null, $_c0$);
$r3$.ɵtemplate(1, MyComponent__svg_g_Template_1, 2, 0, null, $_c0$);
$r3$.ɵelementEnd();
}
if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); }
@ -1739,10 +1757,11 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function MyComponent_Template(rf, ctx) {
vars: 1,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "ul");
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 2, null, $_c0$);
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 2, 1, null, $_c0$);
$r3$.ɵelementEnd();
}
if (rf & 2) {
@ -1820,7 +1839,7 @@ describe('compiler compliance', () => {
$r3$.ɵtext(2);
$r3$.ɵelementEnd();
$r3$.ɵelementStart(3, "ul");
$r3$.ɵtemplate(4, MyComponent_li_li_Template_4, 2, null, $c1$);
$r3$.ɵtemplate(4, MyComponent_li_li_Template_4, 2, 1, null, $c1$);
$r3$.ɵelementEnd();
$r3$.ɵelementEnd();
}
@ -1838,10 +1857,11 @@ describe('compiler compliance', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 2,
template: function MyComponent_Template(rf, ctx) {
vars: 1,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "ul");
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 5, null, $c1$);
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 5, 2, null, $c1$);
$r3$.ɵelementEnd();
}
if (rf & 2) {

5
packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
View File

@ -112,7 +112,7 @@ describe('compiler compliance: listen()', () => {
// ...
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 3, null, $c0$);
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 3, 0, null, $c0$);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "ngIf", $i0$.ɵbind(ctx.showing));
@ -155,7 +155,8 @@ describe('compiler compliance: listen()', () => {
factory: function MyComponent_Factory(t) { return new (t || MyComponent)(); },
features: [$r3$.ɵPublicFeature],
consts: 4,
template: function MyComponent_Template(rf, ctx) {
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "button");
$r3$.ɵlistener("click", function MyComponent_Template_button_click_listener($event) {

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

@ -95,7 +95,8 @@ describe('compiler compliance: styling', () => {
},
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyComponent_Template(rf, $ctx$) {
vars: 1,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(null, _c0, $r3$.ɵzss);
@ -153,7 +154,8 @@ describe('compiler compliance: styling', () => {
},
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyComponent_Template(rf, ctx) {
vars: 0,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(null, _c0, $r3$.ɵzss);
@ -249,7 +251,8 @@ describe('compiler compliance: styling', () => {
},
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyComponent_Template(rf, $ctx$) {
vars: 1,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(_c0);
@ -304,7 +307,8 @@ describe('compiler compliance: styling', () => {
},
features: [$r3$.ɵPublicFeature],
consts: 1,
template: function MyComponent_Template(rf, $ctx$) {
vars: 2,
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵelementStart(0, "div");
$r3$.ɵelementStyling(_c0, _c1);

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

@ -81,7 +81,7 @@ describe('compiler compliance: template', () => {
function MyComponent_ul_li_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵelementStart(0, "li");
$i0$.ɵtemplate(1, MyComponent_ul_li_div_Template_1, 2, null, _c0);
$i0$.ɵtemplate(1, MyComponent_ul_li_div_Template_1, 2, 2, null, _c0);
$i0$.ɵelementEnd();
}
if (rf & 2) {
@ -93,7 +93,7 @@ describe('compiler compliance: template', () => {
function MyComponent_ul_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵelementStart(0, "ul");
$i0$.ɵtemplate(1, MyComponent_ul_li_Template_1, 2, null, _c0);
$i0$.ɵtemplate(1, MyComponent_ul_li_Template_1, 2, 1, null, _c0);
$i0$.ɵelementEnd();
}
if (rf & 2) {
@ -104,7 +104,7 @@ describe('compiler compliance: template', () => {
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_ul_Template_0, 2, null, _c0);
$i0$.ɵtemplate(0, MyComponent_ul_Template_0, 2, 1, null, _c0);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -155,7 +155,7 @@ describe('compiler compliance: template', () => {
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_span_Template_0, 2, null, _c0);
$i0$.ɵtemplate(0, MyComponent_span_Template_0, 2, 1, null, _c0);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -211,7 +211,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵtemplate(1, MyComponent_div_span_Template_1, 2, null, $c1$);
$i0$.ɵtemplate(1, MyComponent_div_span_Template_1, 2, 1, null, $c1$);
$i0$.ɵelementEnd();
}
if (rf & 2) {
@ -223,7 +223,7 @@ describe('compiler compliance: template', () => {
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, null, $c0$);
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, 1, null, $c0$);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -279,7 +279,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_div_Template_1(rf, ctx) {
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵtemplate(1, MyComponent_div_div_div_Template_1, 2, null, _c0);
$i0$.ɵtemplate(1, MyComponent_div_div_div_Template_1, 2, 1, null, _c0);
$i0$.ɵelementEnd();
}
if (rf & 2) {
@ -291,7 +291,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵtemplate(1, MyComponent_div_div_Template_1, 2, null, _c0);
$i0$.ɵtemplate(1, MyComponent_div_div_Template_1, 2, 1, null, _c0);
$i0$.ɵelementEnd();
}
if (rf & 2) {
@ -302,7 +302,7 @@ describe('compiler compliance: template', () => {
// ...
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, null, _c0);
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, 1, null, _c0);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -348,7 +348,7 @@ describe('compiler compliance: template', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵtemplate(0, Template_0, 1, null, $c0$);
$i0$.ɵtemplate(0, Template_0, 1, 0, null, $c0$);
}
if (rf & 2) {
$i0$.ɵelementProperty(0, "boundAttr", $i0$.ɵbind(ctx.b));

5
packages/compiler/src/render3/view/compiler.ts
View File

@ -197,7 +197,10 @@ export function compileComponentFromMetadata(
template.nodes, [], template.hasNgContent, template.ngContentSelectors);
// e.g. `consts: 2`
definitionMap.set('consts', o.literal(templateBuilder.getSlotCount()));
definitionMap.set('consts', o.literal(templateBuilder.getConstCount()));
// e.g. `vars: 2`
definitionMap.set('vars', o.literal(templateBuilder.getVarCount()));
definitionMap.set('template', templateFunctionExpression);

19
packages/compiler/src/render3/view/template.ts
View File

@ -93,6 +93,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// Number of slots to reserve for pureFunctions
private _pureFunctionSlots = 0;
// Number of binding slots
private _bindingSlots = 0;
constructor(
private constantPool: ConstantPool, parentBindingScope: BindingScope, private level = 0,
private contextName: string|null, private templateName: string|null,
@ -175,12 +178,12 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// instructions can be generated with the correct internal const count.
this._nestedTemplateFns.forEach(buildTemplateFn => buildTemplateFn());
// Generate all the creation mode instructions (e.g. resolve bindings in listeners)
const creationStatements = this._creationCodeFns.map((fn: () => o.Statement) => fn());
// Generate all the update mode instructions (e.g. resolve property or text bindings)
const updateStatements = this._updateCodeFns.map((fn: () => o.Statement) => fn());
// Generate all the creation mode instructions (e.g. resolve bindings in listeners)
const creationStatements = this._creationCodeFns.map((fn: () => o.Statement) => fn());
// To count slots for the reserveSlots() instruction, all bindings must have been visited.
if (this._pureFunctionSlots > 0) {
creationStatements.push(
@ -758,7 +761,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
// e.g. template(1, MyComp_Template_1)
this.creationInstruction(template.sourceSpan, R3.templateCreate, () => {
parameters.splice(2, 0, o.literal(templateVisitor.getSlotCount()));
parameters.splice(
2, 0, o.literal(templateVisitor.getConstCount()),
o.literal(templateVisitor.getVarCount()));
return trimTrailingNulls(parameters);
});
}
@ -807,7 +812,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
private allocateDataSlot() { return this._dataIndex++; }
getSlotCount() { return this._dataIndex; }
getConstCount() { return this._dataIndex; }
getVarCount() { return this._bindingSlots + this._pureFunctionSlots; }
private bindingContext() { return `${this._bindingContext++}`; }
@ -838,6 +845,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
private convertPropertyBinding(implicit: o.Expression, value: AST, skipBindFn?: boolean):
o.Expression {
if (!skipBindFn) this._bindingSlots++;
const interpolationFn =
value instanceof Interpolation ? interpolate : () => error('Unexpected interpolation');

2
packages/core/src/render3/component.ts
View File

@ -107,7 +107,7 @@ export function renderComponent<T>(
const rootView: LViewData = createLViewData(
rendererFactory.createRenderer(hostNode, componentDef),
createTView(-1, null, 1, null, null, null), rootContext,
createTView(-1, null, 1, 0, null, null, null), rootContext,
componentDef.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways);
rootView[INJECTOR] = opts.injector || null;

4
packages/core/src/render3/component_ref.ts
View File

@ -121,7 +121,7 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
// Create the root view. Uses empty TView and ContentTemplate.
const rootView: LViewData = createLViewData(
rendererFactory.createRenderer(hostNode, this.componentDef),
createTView(-1, null, 1, null, null, null), rootContext,
createTView(-1, null, 1, 0, null, null, null), rootContext,
this.componentDef.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways);
rootView[INJECTOR] = ngModule && ngModule.injector || null;
@ -226,4 +226,4 @@ export class ComponentRef<T> extends viewEngine_ComponentRef<T> {
ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed');
this.destroyCbs !.push(callback);
}
}
}

9
packages/core/src/render3/definition.ts
View File

@ -62,6 +62,14 @@ export function defineComponent<T>(componentDefinition: {
// TODO(kara): remove queries from this count
consts: number;
/**
* The number of bindings in this component template (including pure fn bindings).
*
* Used to calculate the length of the component's LViewData array, so we
* can pre-fill the array and set the host binding start index.
*/
vars: number;
/**
* Static attributes to set on host element.
*
@ -255,6 +263,7 @@ export function defineComponent<T>(componentDefinition: {
type: type,
diPublic: null,
consts: componentDefinition.consts,
vars: componentDefinition.vars,
factory: componentDefinition.factory,
template: componentDefinition.template || null !,
hostBindings: componentDefinition.hostBindings || null,

40
packages/core/src/render3/instructions.ts
View File

@ -526,14 +526,15 @@ export function resetApplicationState() {
* @param pipes Pipe defs that should be used for matching
*/
export function renderTemplate<T>(
hostNode: RElement, templateFn: ComponentTemplate<T>, consts: number, context: T,
hostNode: RElement, templateFn: ComponentTemplate<T>, consts: number, vars: number, context: T,
providedRendererFactory: RendererFactory3, host: LElementNode | null,
directives?: DirectiveDefListOrFactory | null, pipes?: PipeDefListOrFactory | null,
sanitizer?: Sanitizer | null): LElementNode {
if (host == null) {
resetApplicationState();
rendererFactory = providedRendererFactory;
const tView = getOrCreateTView(templateFn, consts, directives || null, pipes || null, null);
const tView =
getOrCreateTView(templateFn, consts, vars, directives || null, pipes || null, null);
host = createLNode(
-1, TNodeType.Element, hostNode, null, null,
createLViewData(
@ -1005,12 +1006,14 @@ function saveResolvedLocalsInData(
* if it doesn't already exist.
*
* @param templateFn The template from which to get static data
* @param consts The number of nodes, local refs, and pipes in this view
* @param vars The number of bindings and pure function bindings in this view
* @param directives Directive defs that should be saved on TView
* @param pipes Pipe defs that should be saved on TView
* @returns TView
*/
function getOrCreateTView(
templateFn: ComponentTemplate<any>, consts: number,
templateFn: ComponentTemplate<any>, consts: number, vars: number,
directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
viewQuery: ComponentQuery<any>| null): TView {
// TODO(misko): reading `ngPrivateData` here is problematic for two reasons
@ -1022,7 +1025,7 @@ function getOrCreateTView(
return templateFn.ngPrivateData ||
(templateFn.ngPrivateData =
createTView(-1, templateFn, consts, directives, pipes, viewQuery) as never);
createTView(-1, templateFn, consts, vars, directives, pipes, viewQuery) as never);
}
/**
@ -1035,7 +1038,7 @@ function getOrCreateTView(
* @param pipes Registry of pipes for this view
*/
export function createTView(
viewIndex: number, templateFn: ComponentTemplate<any>| null, consts: number,
viewIndex: number, templateFn: ComponentTemplate<any>| null, consts: number, vars: number,
directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
viewQuery: ComponentQuery<any>| null): TView {
ngDevMode && ngDevMode.tView++;
@ -1146,8 +1149,9 @@ export function hostElement(
const node = createLNode(
0, TNodeType.Element, rNode, null, null,
createLViewData(
renderer, getOrCreateTView(
def.template, def.consts, def.directiveDefs, def.pipeDefs, def.viewQuery),
renderer,
getOrCreateTView(
def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery),
null, def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways, sanitizer));
if (firstTemplatePass) {
@ -1678,8 +1682,8 @@ export function directiveCreate<T>(
function addComponentLogic<T>(
directiveIndex: number, instance: T, def: ComponentDefInternal<T>): void {
const tView =
getOrCreateTView(def.template, def.consts, def.directiveDefs, def.pipeDefs, def.viewQuery);
const tView = getOrCreateTView(
def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery);
// Only component views should be added to the view tree directly. Embedded views are
// accessed through their containers because they may be removed / re-added later.
@ -1857,6 +1861,7 @@ export function createLContainer(
* @param index The index of the container in the data array
* @param templateFn Inline template
* @param consts The number of nodes, local refs, and pipes for this template
* @param vars The number of bindings for this template
* @param tagName The name of the container element, if applicable
* @param attrs The attrs attached to the container, if applicable
* @param localRefs A set of local reference bindings on the element.
@ -1864,15 +1869,15 @@ export function createLContainer(
* Defaults to the current element associated with the local-ref.
*/
export function template(
index: number, templateFn: ComponentTemplate<any>| null, consts: number,
index: number, templateFn: ComponentTemplate<any>| null, consts: number, vars: number,
tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null,
localRefExtractor?: LocalRefExtractor) {
// TODO: consider a separate node type for templates
const node = containerInternal(index, tagName || null, attrs || null, localRefs || null);
if (firstTemplatePass) {
node.tNode.tViews =
createTView(-1, templateFn, consts, tView.directiveRegistry, tView.pipeRegistry, null);
node.tNode.tViews = createTView(
-1, templateFn, consts, vars, tView.directiveRegistry, tView.pipeRegistry, null);
}
createDirectivesAndLocals(node, localRefs, localRefExtractor);
@ -2025,7 +2030,7 @@ function scanForView(
* @param viewBlockId The ID of this view
* @return boolean Whether or not this view is in creation mode
*/
export function embeddedViewStart(viewBlockId: number, consts: number): RenderFlags {
export function embeddedViewStart(viewBlockId: number, consts: number, vars: number): RenderFlags {
const container =
(isParent ? previousOrParentNode : getParentLNode(previousOrParentNode)) as LContainerNode;
ngDevMode && assertNodeType(container, TNodeType.Container);
@ -2040,7 +2045,7 @@ export function embeddedViewStart(viewBlockId: number, consts: number): RenderFl
} else {
// When we create a new LView, we always reset the state of the instructions.
const newView = createLViewData(
renderer, getOrCreateEmbeddedTView(viewBlockId, consts, container), null,
renderer, getOrCreateEmbeddedTView(viewBlockId, consts, vars, container), null,
LViewFlags.CheckAlways, getCurrentSanitizer());
if (lContainer[QUERIES]) {
@ -2070,18 +2075,19 @@ export function embeddedViewStart(viewBlockId: number, consts: number): RenderFl
*
* @param viewIndex The index of the TView in TNode.tViews
* @param consts The number of nodes, local refs, and pipes in this template
* @param vars The number of bindings and pure function bindings in this template
* @param parent The parent container in which to look for the view's static data
* @returns TView
*/
function getOrCreateEmbeddedTView(
viewIndex: number, consts: number, parent: LContainerNode): TView {
viewIndex: number, consts: number, vars: number, parent: LContainerNode): TView {
ngDevMode && assertNodeType(parent, TNodeType.Container);
const containerTViews = (parent !.tNode as TContainerNode).tViews as TView[];
ngDevMode && assertDefined(containerTViews, 'TView expected');
ngDevMode && assertEqual(Array.isArray(containerTViews), true, 'TViews should be in an array');
if (viewIndex >= containerTViews.length || containerTViews[viewIndex] == null) {
containerTViews[viewIndex] =
createTView(viewIndex, null, consts, tView.directiveRegistry, tView.pipeRegistry, null);
containerTViews[viewIndex] = createTView(
viewIndex, null, consts, vars, tView.directiveRegistry, tView.pipeRegistry, null);
}
return containerTViews[viewIndex];
}

8
packages/core/src/render3/interfaces/definition.ts
View File

@ -210,6 +210,14 @@ export interface ComponentDef<T, Selector extends string> extends DirectiveDef<T
// TODO(kara): remove queries from this count
consts: number;
/**
* The number of bindings in this component template (including pure fn bindings).
*
* Used to calculate the length of the component's LViewData array, so we
* can pre-fill the array and set the host binding start index.
*/
vars: number;
/**
* Query-related instructions for a component.
*/

1
packages/core/test/render3/Inherit_definition_feature_spec.ts
View File

@ -315,6 +315,7 @@ describe('InheritDefinitionFeature', () => {
template: () => {},
selectors: [['', 'superDir', '']],
consts: 0,
vars: 0,
factory: () => new SuperComponent()
});
}

3
packages/core/test/render3/basic_perf.ts
View File

@ -36,6 +36,7 @@ describe('iv perf test', () => {
type: Component,
selectors: [['div']],
consts: 1,
vars: 0,
template: function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -44,7 +45,7 @@ describe('iv perf test', () => {
containerRefreshStart(0);
{
for (let i = 0; i < count; i++) {
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 0);
{
if (rf0 & RenderFlags.Create) {
elementStart(0, 'div');

39
packages/core/test/render3/change_detection_spec.ts
View File

@ -30,6 +30,7 @@ describe('change detection', () => {
selectors: [['my-comp']],
factory: () => new MyComponent(),
consts: 2,
vars: 1,
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
@ -104,6 +105,7 @@ describe('change detection', () => {
selectors: [['my-comp']],
factory: () => comp = new MyComponent(),
consts: 2,
vars: 1,
/**
* {{ doCheckCount }} - {{ name }}
* <button (click)="onClick()"></button>
@ -117,7 +119,9 @@ describe('change detection', () => {
}
elementEnd();
}
textBinding(0, interpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
if (rf & RenderFlags.Update) {
textBinding(0, interpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
}
},
changeDetection: ChangeDetectionStrategy.OnPush,
inputs: {name: 'name'}
@ -132,6 +136,7 @@ describe('change detection', () => {
selectors: [['my-app']],
factory: () => new MyApp(),
consts: 1,
vars: 1,
/** <my-comp [name]="name"></my-comp> */
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
@ -210,7 +215,7 @@ describe('change detection', () => {
{ listener('click', () => noop()); }
elementEnd();
}
}, 2, [MyComponent]);
}, 2, 0, [MyComponent]);
const buttonParent = renderComponent(ButtonParent);
expect(getRenderedText(buttonParent)).toEqual('1 - Nancy');
@ -233,6 +238,7 @@ describe('change detection', () => {
selectors: [['button-parent']],
factory: () => parent = new ButtonParent(),
consts: 2,
vars: 1,
/** {{ doCheckCount }} - <my-comp></my-comp> */
template: (rf: RenderFlags, ctx: ButtonParent) => {
if (rf & RenderFlags.Create) {
@ -252,7 +258,7 @@ describe('change detection', () => {
if (rf & RenderFlags.Create) {
element(0, 'button-parent');
}
}, 1, [ButtonParent]);
}, 1, 0, [ButtonParent]);
const myButtonApp = renderComponent(MyButtonApp);
expect(parent !.doCheckCount).toEqual(1);
@ -293,6 +299,7 @@ describe('change detection', () => {
selectors: [['my-comp']],
factory: () => myComp = new MyComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
/** {{ name }} */
template: (rf: RenderFlags, ctx: MyComp) => {
if (rf & RenderFlags.Create) {
@ -318,6 +325,7 @@ describe('change detection', () => {
selectors: [['parent-comp']],
factory: () => new ParentComp(injectChangeDetectorRef()),
consts: 2,
vars: 1,
/**
* {{ doCheckCount}} -
* <my-comp></my-comp>
@ -405,7 +413,7 @@ describe('change detection', () => {
if (rf & RenderFlags.Create) {
element(0, 'my-comp', ['dir', '']);
}
}, 1, [MyComp, Dir]);
}, 1, 0, [MyComp, Dir]);
const app = renderComponent(MyApp);
expect(getRenderedText(app)).toEqual('Nancy');
@ -428,7 +436,7 @@ describe('change detection', () => {
if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.value));
}
}, 2, [Dir]);
}, 2, 1, [Dir]);
const app = renderComponent(MyApp);
app.value = 'Frank';
@ -452,6 +460,7 @@ describe('change detection', () => {
selectors: [['my-app']],
factory: () => new MyApp(injectChangeDetectorRef()),
consts: 2,
vars: 1,
/**
* {{ name}}
* % if (showing) {
@ -468,7 +477,7 @@ describe('change detection', () => {
containerRefreshStart(1);
{
if (ctx.showing) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
@ -506,6 +515,7 @@ describe('change detection', () => {
selectors: [['detect-changes-comp']],
factory: () => new DetectChangesComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: DetectChangesComp) => {
if (rf & RenderFlags.Create) {
@ -538,6 +548,7 @@ describe('change detection', () => {
selectors: [['detect-changes-comp']],
factory: () => new DetectChangesComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
/** {{ doCheckCount }} */
template: (rf: RenderFlags, ctx: DetectChangesComp) => {
if (rf & RenderFlags.Create) {
@ -567,6 +578,7 @@ describe('change detection', () => {
selectors: [['my-app']],
factory: () => new MyApp(injectChangeDetectorRef()),
consts: 1,
vars: 0,
/** <detached-comp></detached-comp> */
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
@ -590,6 +602,7 @@ describe('change detection', () => {
selectors: [['detached-comp']],
factory: () => comp = new DetachedComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: DetachedComp) => {
if (rf & RenderFlags.Create) {
@ -690,6 +703,7 @@ describe('change detection', () => {
selectors: [['on-push-comp']],
factory: () => onPushComp = new OnPushComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
@ -712,7 +726,7 @@ describe('change detection', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'value', bind(ctx.value));
}
}, 1, [OnPushComp]);
}, 1, 1, [OnPushComp]);
const app = renderComponent(OnPushApp);
app.value = 'one';
@ -750,6 +764,7 @@ describe('change detection', () => {
selectors: [['on-push-comp']],
factory: () => comp = new OnPushComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: OnPushComp) => {
if (rf & RenderFlags.Create) {
@ -771,6 +786,7 @@ describe('change detection', () => {
selectors: [['on-push-parent']],
factory: () => new OnPushParent(),
consts: 2,
vars: 1,
/**
* {{ value }} -
* <on-push-comp></on-push-comp>
@ -840,6 +856,7 @@ describe('change detection', () => {
selectors: [['embedded-view-parent']],
factory: () => new EmbeddedViewParent(),
consts: 2,
vars: 1,
/**
* {{ value }} -
* % if (ctx.showing) {
@ -856,7 +873,7 @@ describe('change detection', () => {
containerRefreshStart(1);
{
if (ctx.showing) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
element(0, 'on-push-comp');
}
@ -916,6 +933,7 @@ describe('change detection', () => {
selectors: [['no-changes-comp']],
factory: () => comp = new NoChangesComp(injectChangeDetectorRef()),
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: NoChangesComp) => {
if (rf & RenderFlags.Create) {
text(0);
@ -937,6 +955,7 @@ describe('change detection', () => {
selectors: [['app-comp']],
factory: () => new AppComp(injectChangeDetectorRef()),
consts: 2,
vars: 1,
/**
* {{ value }} -
* <no-changes-comp></no-changes-comp>
@ -999,6 +1018,7 @@ describe('change detection', () => {
selectors: [['embedded-view-app']],
factory: () => new EmbeddedViewApp(injectChangeDetectorRef()),
consts: 1,
vars: 0,
/**
* % if (showing) {
* {{ value }}
@ -1012,7 +1032,7 @@ describe('change detection', () => {
containerRefreshStart(0);
{
if (ctx.showing) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
text(0);
}
@ -1083,6 +1103,7 @@ describe('change detection', () => {
selectors: [['my-comp']],
factory: () => new MyComponent(),
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
text(0);

62
packages/core/test/render3/common_integration_spec.ts
View File

@ -39,13 +39,14 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
// <ul>
// <li *ngFor="let item of items">{{item}}</li>
// </ul>
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
{ template(1, liTemplate, 2, undefined, ['ngForOf', '']); }
{ template(1, liTemplate, 2, 1, undefined, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -100,6 +101,7 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
// <ul>
// <li *ngFor="let item of items; index as index; count as count">{{index}} of
// {{count}}: {{item}}</li>
@ -107,7 +109,7 @@ describe('@angular/common integration', () => {
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
{ template(1, liTemplate, 2, undefined, ['ngForOf', '']); }
{ template(1, liTemplate, 2, 1, undefined, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -160,6 +162,7 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 4,
vars: 1,
// <button (click)="toggle()">Toggle List</button>
// <ul>
// <li *ngFor="let item of items">{{index}}</li>
@ -173,7 +176,7 @@ describe('@angular/common integration', () => {
}
elementEnd();
elementStart(2, 'ul');
{ template(3, liTemplate, 2, undefined, ['ngForOf', '']); }
{ template(3, liTemplate, 2, 1, undefined, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -224,10 +227,11 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
{ template(1, liTemplate, 2, null, ['ngForOf', '']); }
{ template(1, liTemplate, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -242,7 +246,7 @@ describe('@angular/common integration', () => {
function liTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'li');
{ template(1, spanTemplate, 2, null, ['ngForOf', '']); }
{ template(1, spanTemplate, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -314,9 +318,10 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, null, ['ngForOf', '']);
template(0, divTemplate, 2, 1, null, ['ngForOf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items));
@ -330,7 +335,7 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, pTemplate, 3, null, ['ngForOf', '']); }
{ template(1, pTemplate, 3, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -407,9 +412,10 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, null, ['ngForOf', '']);
template(0, divTemplate, 2, 1, null, ['ngForOf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items));
@ -423,7 +429,7 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, innerDivTemplate, 2, null, ['ngForOf', '']); }
{ template(1, innerDivTemplate, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -435,7 +441,7 @@ describe('@angular/common integration', () => {
function innerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, spanTemplate, 2, null, ['ngForOf', '']); }
{ template(1, spanTemplate, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -574,9 +580,10 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, itemTemplate0, 2, null, ['ngForOf', '']);
template(0, itemTemplate0, 2, 1, null, ['ngForOf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items));
@ -590,7 +597,7 @@ describe('@angular/common integration', () => {
function itemTemplate0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate1, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate1, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -602,7 +609,7 @@ describe('@angular/common integration', () => {
function itemTemplate1(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate2, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate2, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -614,7 +621,7 @@ describe('@angular/common integration', () => {
function itemTemplate2(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate3, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate3, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -626,7 +633,7 @@ describe('@angular/common integration', () => {
function itemTemplate3(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate4, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate4, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -638,7 +645,7 @@ describe('@angular/common integration', () => {
function itemTemplate4(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate5, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate5, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -650,7 +657,7 @@ describe('@angular/common integration', () => {
function itemTemplate5(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate6, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate6, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -662,7 +669,7 @@ describe('@angular/common integration', () => {
function itemTemplate6(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate7, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate7, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -674,7 +681,7 @@ describe('@angular/common integration', () => {
function itemTemplate7(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ template(1, itemTemplate8, 2, null, ['ngForOf', '']); }
{ template(1, itemTemplate8, 2, 1, null, ['ngForOf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -737,14 +744,15 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 2,
/**
* <div *ngIf="showing">{{ valueOne }}</div>
* <div *ngIf="showing">{{ valueTwo }}</div>
*/
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, templateOne, 2, undefined, ['ngIf', '']);
template(1, templateTwo, 2, undefined, ['ngIf', '']);
template(0, templateOne, 2, 1, undefined, ['ngIf', '']);
template(1, templateTwo, 2, 1, undefined, ['ngIf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
@ -810,9 +818,10 @@ describe('@angular/common integration', () => {
factory: () => new AppComponent(),
selectors: [['my-app']],
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: AppComponent) => {
if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, undefined, ['ngIf', '']);
template(0, divTemplate, 2, 1, undefined, ['ngIf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
@ -826,7 +835,7 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, outerDivTemplate, 2, undefined, ['ngIf', '']); }
{ template(1, outerDivTemplate, 2, 1, undefined, ['ngIf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -838,7 +847,7 @@ describe('@angular/common integration', () => {
function outerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, innerDivTemplate, 2, undefined, ['ngIf', '']); }
{ template(1, innerDivTemplate, 2, 1, undefined, ['ngIf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -880,6 +889,7 @@ describe('@angular/common integration', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 3,
vars: 1,
/**
* <ng-template #tpl>from tpl</ng-template>
* <ng-template [ngTemplateOutlet]="showing ? tpl : null"></ng-template>
@ -890,8 +900,8 @@ describe('@angular/common integration', () => {
if (rf1 & RenderFlags.Create) {
text(0, 'from tpl');
}
}, 1, undefined, undefined, ['tpl', ''], templateRefExtractor);
template(2, null, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
}, 1, 0, undefined, undefined, ['tpl', ''], templateRefExtractor);
template(2, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
}
if (rf & RenderFlags.Update) {
const tplRef = load(1);

37
packages/core/test/render3/compiler_canonical/component_directives_spec.ts
View File

@ -33,6 +33,7 @@ describe('components & directives', () => {
selectors: [['child']],
factory: function ChildComponent_Factory() { return new ChildComponent(); },
consts: 1,
vars: 0,
template: function ChildComponent_Template(rf: $RenderFlags$, ctx: $ChildComponent$) {
if (rf & 1) {
$r3$.ɵtext(0, 'child-view');
@ -69,6 +70,7 @@ describe('components & directives', () => {
selectors: [['my-component']],
factory: () => new MyComponent(),
consts: 2,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelement(0, 'child', $e0_attrs$);
@ -123,6 +125,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 0,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'div', $e0_attrs$);
@ -175,6 +178,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 2,
vars: 0,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'button', $e0_attrs$);
@ -223,6 +227,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 0,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'div', $e0_attrs$);
@ -274,6 +279,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 0,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'div', $e0_attrs$);
@ -311,11 +317,14 @@ describe('components & directives', () => {
selectors: [['my-comp']],
factory: function MyComp_Factory() { return new MyComp(); },
consts: 1,
vars: 1,
template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
if (rf & 1) {
$r3$.ɵtext(0);
}
$r3$.ɵtextBinding(0, $r3$.ɵbind(ctx.name));
if (rf & 2) {
$r3$.ɵtextBinding(0, $r3$.ɵbind(ctx.name));
}
},
inputs: {name: 'name'},
changeDetection: ChangeDetectionStrategy.OnPush
@ -337,6 +346,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 1,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'my-comp');
@ -402,10 +412,11 @@ describe('components & directives', () => {
selectors: [['my-component']],
factory: () => new MyComponent(),
consts: 3,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'ul', null, $e0_locals$);
$r3$.ɵtemplate(2, C1, 2, '', ['if', '']);
$r3$.ɵtemplate(2, C1, 2, 1, '', ['if', '']);
$r3$.ɵelementEnd();
}
}
@ -435,6 +446,7 @@ describe('components & directives', () => {
selectors: [['my-array-comp']],
factory: function MyArrayComp_Factory() { return new MyArrayComp(); },
consts: 1,
vars: 1,
template: function MyArrayComp_Template(rf: $RenderFlags$, ctx: $MyArrayComp$) {
if (rf & 1) {
$r3$.ɵtext(0);
@ -467,6 +479,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 1,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'my-array-comp');
@ -512,6 +525,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 2,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'my-array-comp');
@ -547,6 +561,7 @@ describe('components & directives', () => {
selectors: [['my-comp']],
factory: function MyComp_Factory() { return new MyComp(); },
consts: 1,
vars: 1,
template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
if (rf & 1) {
$r3$.ɵtext(0);
@ -580,6 +595,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 2,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'my-comp');
@ -624,13 +640,14 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 3,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'my-array-comp');
}
if (rf & 2) {
$r3$.ɵelementProperty(
0, 'names', $r3$.ɵbind($r3$.ɵpureFunction1(2, $e0_ff$, ctx.customName)));
0, 'names', $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.customName)));
}
}
});
@ -673,6 +690,7 @@ describe('components & directives', () => {
selectors: [['my-comp']],
factory: function MyComp_Factory() { return new MyComp(); },
consts: 12,
vars: 12,
template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
if (rf & 1) {
$r3$.ɵtext(0);
@ -737,6 +755,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 10,
template: function MyApp_Template(rf: $RenderFlags$, c: $any$) {
if (rf & 1) {
$r3$.ɵelement(0, 'my-comp');
@ -745,7 +764,7 @@ describe('components & directives', () => {
$r3$.ɵelementProperty(
0, 'names',
$r3$.ɵbind($r3$.ɵpureFunctionV(
10, $e0_ff$, [c.n0, c.n1, c.n2, c.n3, c.n4, c.n5, c.n6, c.n7, c.n8])));
1, $e0_ff$, [c.n0, c.n1, c.n2, c.n3, c.n4, c.n5, c.n6, c.n7, c.n8])));
}
}
});
@ -780,6 +799,7 @@ describe('components & directives', () => {
selectors: [['object-comp']],
factory: function ObjectComp_Factory() { return new ObjectComp(); },
consts: 4,
vars: 2,
template: function ObjectComp_Template(rf: $RenderFlags$, ctx: $ObjectComp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'p');
@ -817,13 +837,14 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 3,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'object-comp');
}
if (rf & 2) {
$r3$.ɵelementProperty(
0, 'config', $r3$.ɵbind($r3$.ɵpureFunction1(2, $e0_ff$, ctx.name)));
0, 'config', $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.name)));
}
}
});
@ -859,6 +880,7 @@ describe('components & directives', () => {
selectors: [['nested-comp']],
factory: function NestedComp_Factory() { return new NestedComp(); },
consts: 6,
vars: 3,
template: function NestedComp_Template(rf: $RenderFlags$, ctx: $NestedComp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'p');
@ -905,6 +927,7 @@ describe('components & directives', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 8,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelement(0, 'nested-comp');
@ -913,9 +936,9 @@ describe('components & directives', () => {
$r3$.ɵelementProperty(
0, 'config',
$r3$.ɵbind($r3$.ɵpureFunction2(
7, $e0_ff_2$, ctx.name,
5, $e0_ff_2$, ctx.name,
$r3$.ɵpureFunction1(
4, $e0_ff_1$, $r3$.ɵpureFunction1(2, $e0_ff$, ctx.duration)))));
3, $e0_ff_1$, $r3$.ɵpureFunction1(1, $e0_ff$, ctx.duration)))));
}
}
});

3
packages/core/test/render3/compiler_canonical/content_projection_spec.ts
View File

@ -26,6 +26,7 @@ describe('content projection', () => {
selectors: [['simple']],
factory: () => new SimpleComponent(),
consts: 1,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $SimpleComponent$) {
if (rf & 1) {
$r3$.ɵprojectionDef();
@ -56,6 +57,7 @@ describe('content projection', () => {
selectors: [['complex']],
factory: () => new ComplexComponent(),
consts: 4,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $ComplexComponent$) {
if (rf & 1) {
$r3$.ɵprojectionDef($pD_0P$, $pD_0R$);
@ -80,6 +82,7 @@ describe('content projection', () => {
selectors: [['my-app']],
factory: () => new MyApp(),
consts: 2,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'simple');

16
packages/core/test/render3/compiler_canonical/elements_spec.ts
View File

@ -38,6 +38,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: () => new MyComponent(),
consts: 5,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div', $e0_attrs$);
@ -90,16 +91,15 @@ describe('elements', () => {
selectors: [['local-ref-comp']],
factory: function LocalRefComp_Factory() { return new LocalRefComp(); },
consts: 4,
vars: 1,
template: function LocalRefComp_Template(rf: $RenderFlags$, ctx: $LocalRefComp$) {
let $tmp$: any;
let $tmp_2$: any;
if (rf & 1) {
$r3$.ɵelement(0, 'div', $e0_attrs$, $e0_locals$);
$r3$.ɵtext(3);
}
if (rf & 2) {
$tmp$ = $r3$.ɵload(1);
$tmp_2$ = $r3$.ɵload(2);
const $tmp$ = $r3$.ɵreference(1) as any;
const $tmp_2$ = $r3$.ɵreference(2) as any;
$r3$.ɵtextBinding(
3, $r3$.ɵinterpolation2(' ', $tmp$.value, ' - ', $tmp_2$.tagName, ''));
}
@ -136,6 +136,7 @@ describe('elements', () => {
selectors: [['listener-comp']],
factory: function ListenerComp_Factory() { return new ListenerComp(); },
consts: 1,
vars: 0,
template: function ListenerComp_Template(rf: $RenderFlags$, ctx: $ListenerComp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'button');
@ -192,6 +193,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: () => new MyComponent(),
consts: 5,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div', $e0_attrs$);
@ -225,6 +227,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 1,
vars: 1,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelement(0, 'div');
@ -257,6 +260,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 1,
vars: 1,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelement(0, 'div');
@ -290,6 +294,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 1,
vars: 0,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');
@ -330,6 +335,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 1,
vars: 0,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');
@ -382,6 +388,7 @@ describe('elements', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 1,
vars: 1,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');
@ -421,6 +428,7 @@ describe('elements', () => {
selectors: [['style-comp']],
factory: function StyleComponent_Factory() { return new StyleComponent(); },
consts: 1,
vars: 0,
template: function StyleComponent_Template(rf: $RenderFlags$, ctx: $StyleComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');

6
packages/core/test/render3/compiler_canonical/i18n_spec.ts
View File

@ -27,6 +27,7 @@ describe('i18n', () => {
selectors: [['my-app']],
factory: () => new MyApp(),
consts: 2,
vars: 0,
template: function(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');
@ -53,6 +54,7 @@ describe('i18n', () => {
selectors: [['my-app']],
factory: () => new MyApp(),
consts: 2,
vars: 1,
template: function(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');
@ -81,6 +83,7 @@ describe('i18n', () => {
selectors: [['my-app']],
factory: () => new MyApp(),
consts: 2,
vars: 1,
template: function(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');
@ -125,10 +128,11 @@ describe('i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
template: (rf: $RenderFlags$, myApp: $MyApp$) => {
if (rf & 1) {
$r3$.ɵelementStart(0, 'ul');
$r3$.ɵtemplate(1, liTemplate, 2, null, ['ngForOf', '']);
$r3$.ɵtemplate(1, liTemplate, 2, 1, null, ['ngForOf', '']);
$r3$.ɵelementEnd();
$r3$.ɵi18nApply(1, $i18n_1$[0]);
}

5
packages/core/test/render3/compiler_canonical/injection_spec.ts
View File

@ -35,6 +35,7 @@ describe('injection', () => {
return new MyComp($r3$.ɵinjectChangeDetectorRef());
},
consts: 1,
vars: 1,
template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
if (rf & 1) {
$r3$.ɵtext(0);
@ -53,6 +54,7 @@ describe('injection', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 0,
/** <my-comp></my-comp> */
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
@ -83,6 +85,7 @@ describe('injection', () => {
selectors: [['my-comp']],
factory: function MyComp_Factory() { return new MyComp($r3$.ɵinjectAttribute('title')); },
consts: 1,
vars: 1,
template: function MyComp_Template(rf: $RenderFlags$, ctx: $MyComp$) {
if (rf & 1) {
$r3$.ɵtext(0);
@ -101,6 +104,7 @@ describe('injection', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 1,
vars: 0,
/** <my-comp></my-comp> */
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
@ -154,6 +158,7 @@ describe('injection', () => {
$r3$.ɵdirectiveInject(ServiceA), $r3$.ɵdirectiveInject(ServiceB), inject(INJECTOR));
},
consts: 0,
vars: 0,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {},
providers: [ServiceA],
viewProviders: [ServiceB],

2
packages/core/test/render3/compiler_canonical/life_cycle_spec.ts
View File

@ -47,6 +47,7 @@ describe('lifecycle hooks', () => {
selectors: [['lifecycle-comp']],
factory: function LifecycleComp_Factory() { return new LifecycleComp(); },
consts: 0,
vars: 0,
template: function LifecycleComp_Template(rf: $RenderFlags$, ctx: $LifecycleComp$) {},
inputs: {nameMin: ['name', 'nameMin']},
features: [$r3$.ɵNgOnChangesFeature]
@ -71,6 +72,7 @@ describe('lifecycle hooks', () => {
selectors: [['simple-layout']],
factory: function SimpleLayout_Factory() { return simpleLayout = new SimpleLayout(); },
consts: 2,
vars: 2,
template: function SimpleLayout_Template(rf: $RenderFlags$, ctx: $SimpleLayout$) {
if (rf & 1) {
$r3$.ɵelement(0, 'lifecycle-comp');

5
packages/core/test/render3/compiler_canonical/local_reference_spec.ts
View File

@ -26,6 +26,7 @@ describe('local references', () => {
selectors: [['my-component']],
factory: () => new MyComponent,
consts: 3,
vars: 1,
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
let l1_user: any;
if (rf & 1) {
@ -62,11 +63,13 @@ describe('local references', () => {
selectors: [['my-component']],
factory: () => new MyComponent,
consts: 3,
vars: 1,
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
let l1_tpl: any;
if (rf & 1) {
$r3$.ɵtemplate(
0, MyComponent_Template_0, 0, null, null, ['tpl', ''], $r3$.ɵtemplateRefExtractor);
0, MyComponent_Template_0, 0, 0, null, null, ['tpl', ''],
$r3$.ɵtemplateRefExtractor);
$r3$.ɵtext(2);
}
if (rf & 2) {

10
packages/core/test/render3/compiler_canonical/pipes_spec.ts
View File

@ -84,6 +84,7 @@ describe('pipes', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 3,
vars: 7,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵtext(0);
@ -94,7 +95,7 @@ describe('pipes', () => {
$r3$.ɵtextBinding(
0,
$r3$.ɵinterpolation1(
'', $r3$.ɵpipeBind2(1, 6, $r3$.ɵpipeBind2(2, 3, ctx.name, ctx.size), ctx.size),
'', $r3$.ɵpipeBind2(1, 4, $r3$.ɵpipeBind2(2, 1, ctx.name, ctx.size), ctx.size),
''));
}
}
@ -160,7 +161,7 @@ describe('pipes', () => {
if (rf & 2) {
const $comp$ = $r3$.ɵnextContext();
$r3$.ɵtextBinding(
1, $r3$.ɵinterpolation1('', $r3$.ɵpipeBind2(2, 3, $comp$.name, $comp$.size), ''));
1, $r3$.ɵinterpolation1('', $r3$.ɵpipeBind2(2, 1, $comp$.name, $comp$.size), ''));
}
}
@ -179,13 +180,14 @@ describe('pipes', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 5,
vars: 9,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵtext(0);
$r3$.ɵpipe(1, 'myPurePipe');
$r3$.ɵtext(2);
$r3$.ɵpipe(3, 'myPurePipe');
$r3$.ɵtemplate(4, MyApp_div_Template_4, 3, '', ['oneTimeIf', '']);
$r3$.ɵtemplate(4, MyApp_div_Template_4, 3, 4, '', ['oneTimeIf', '']);
}
if (rf & 2) {
$r3$.ɵtextBinding(
@ -193,8 +195,6 @@ describe('pipes', () => {
$r3$.ɵtextBinding(
2, $r3$.ɵinterpolation1('', $r3$.ɵpipeBind2(3, 6, ctx.name, ctx.size), ''));
$r3$.ɵelementProperty(4, 'oneTimeIf', $r3$.ɵbind(ctx.more));
$r3$.ɵcontainerRefreshStart(4);
$r3$.ɵcontainerRefreshEnd();
}
}
});

3
packages/core/test/render3/compiler_canonical/query_spec.ts
View File

@ -55,6 +55,7 @@ describe('queries', () => {
selectors: [['view-query-component']],
factory: function ViewQueryComponent_Factory() { return new ViewQueryComponent(); },
consts: 3,
vars: 0,
template: function ViewQueryComponent_Template(
rf: $RenderFlags$, ctx: $ViewQueryComponent$) {
if (rf & 1) {
@ -112,6 +113,7 @@ describe('queries', () => {
selectors: [['content-query-component']],
factory: function ContentQueryComponent_Factory() { return new ContentQueryComponent(); },
consts: 2,
vars: 0,
contentQueries: function ContentQueryComponent_ContentQueries() {
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, SomeDirective, false));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, SomeDirective, false));
@ -155,6 +157,7 @@ describe('queries', () => {
selectors: [['my-app']],
factory: function MyApp_Factory() { return new MyApp(); },
consts: 2,
vars: 0,
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'content-query-component');

1
packages/core/test/render3/compiler_canonical/sanitize_spec.ts
View File

@ -42,6 +42,7 @@ describe('compiler sanitization', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 2,
vars: 4,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'div');

4
packages/core/test/render3/compiler_canonical/small_app_spec.ts
View File

@ -78,13 +78,14 @@ class ToDoAppComponent {
return new ToDoAppComponent(r3.directiveInject(AppState));
},
consts: 6,
vars: 1,
template: function ToDoAppComponent_Template(rf: $RenderFlags$, ctx: ToDoAppComponent) {
if (rf & 1) {
r3.elementStart(0, 'h1');
r3.text(1, 'ToDo Application');
r3.elementEnd();
r3.elementStart(2, 'div');
r3.template(3, ToDoAppComponent_NgForOf_Template, 1, '', ['ngForOf', '']);
r3.template(3, ToDoAppComponent_NgForOf_Template, 1, 1, '', ['ngForOf', '']);
r3.elementEnd();
r3.elementStart(4, 'span');
r3.text(5);
@ -135,6 +136,7 @@ class ToDoItemComponent {
selectors: [['todo']],
factory: function ToDoItemComponent_Factory() { return new ToDoItemComponent(); },
consts: 6,
vars: 2,
template: function ToDoItemComponent_Template(rf: $RenderFlags$, ctx: ToDoItemComponent) {
if (rf & 1) {
r3.elementStart(0, 'div');

10
packages/core/test/render3/compiler_canonical/template_variables_spec.ts
View File

@ -110,10 +110,11 @@ describe('template variables', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 2,
vars: 1,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'ul');
$r3$.ɵtemplate(1, MyComponent_ForOfDirective_Template_1, 2, '', ['forOf', '']);
$r3$.ɵtemplate(1, MyComponent_ForOfDirective_Template_1, 2, 1, '', ['forOf', '']);
$r3$.ɵelementEnd();
}
if (rf & 2) {
@ -152,7 +153,7 @@ describe('template variables', () => {
$r3$.ɵelementEnd();
$r3$.ɵelementStart(3, 'ul');
$r3$.ɵtemplate(
4, MyComponent_ForOfDirective_ForOfDirective_Template_3, 2, '', ['forOf', '']);
4, MyComponent_ForOfDirective_ForOfDirective_Template_3, 2, 1, '', ['forOf', '']);
$r3$.ɵelementEnd();
$r3$.ɵelementEnd();
}
@ -203,16 +204,15 @@ describe('template variables', () => {
selectors: [['my-component']],
factory: function MyComponent_Factory() { return new MyComponent(); },
consts: 2,
vars: 1,
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵelementStart(0, 'ul');
$r3$.ɵtemplate(1, MyComponent_ForOfDirective_Template_1, 5, '', ['forOf', '']);
$r3$.ɵtemplate(1, MyComponent_ForOfDirective_Template_1, 5, 2, '', ['forOf', '']);
$r3$.ɵelementEnd();
}
if (rf & 2) {
$r3$.ɵelementProperty(1, 'forOf', $r3$.ɵbind(ctx.items));
$r3$.ɵcontainerRefreshStart(1);
$r3$.ɵcontainerRefreshEnd();
}
}
});

35
packages/core/test/render3/component_spec.ts
View File

@ -28,6 +28,7 @@ describe('component', () => {
type: CounterComponent,
selectors: [['counter']],
consts: 1,
vars: 1,
template: function(rf: RenderFlags, ctx: CounterComponent) {
if (rf & RenderFlags.Create) {
text(0);
@ -74,6 +75,7 @@ describe('component', () => {
selectors: [['my-component']],
factory: () => new MyComponent(directiveInject(MyService)),
consts: 1,
vars: 1,
template: function(fs: RenderFlags, ctx: MyComponent) {
if (fs & RenderFlags.Create) {
text(0);
@ -116,7 +118,7 @@ describe('component with a container', () => {
containerRefreshStart(0);
{
for (const item of ctx.items) {
const rf0 = embeddedViewStart(0, 1);
const rf0 = embeddedViewStart(0, 1, 1);
{
if (rf0 & RenderFlags.Create) {
text(0);
@ -139,6 +141,7 @@ describe('component with a container', () => {
type: WrapperComponent,
selectors: [['wrapper']],
consts: 1,
vars: 0,
template: function ChildComponentTemplate(rf: RenderFlags, ctx: {items: string[]}) {
if (rf & RenderFlags.Create) {
container(0);
@ -146,7 +149,7 @@ describe('component with a container', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
{
const rf0 = embeddedViewStart(0, 1);
const rf0 = embeddedViewStart(0, 1, 0);
{ showItems(rf0, {items: ctx.items}); }
embeddedViewEnd();
}
@ -171,10 +174,10 @@ describe('component with a container', () => {
it('should re-render on input change', () => {
const ctx: {items: string[]} = {items: ['a']};
expect(renderToHtml(template, ctx, 1, defs)).toEqual('<wrapper>a</wrapper>');
expect(renderToHtml(template, ctx, 1, 1, defs)).toEqual('<wrapper>a</wrapper>');
ctx.items = [...ctx.items, 'b'];
expect(renderToHtml(template, ctx, 1, defs)).toEqual('<wrapper>ab</wrapper>');
expect(renderToHtml(template, ctx, 1, 1, defs)).toEqual('<wrapper>ab</wrapper>');
});
});
@ -187,6 +190,7 @@ describe('encapsulation', () => {
type: WrapperComponent,
selectors: [['wrapper']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: WrapperComponent) {
if (rf & RenderFlags.Create) {
element(0, 'encapsulated');
@ -202,6 +206,7 @@ describe('encapsulation', () => {
type: EncapsulatedComponent,
selectors: [['encapsulated']],
consts: 2,
vars: 0,
template: function(rf: RenderFlags, ctx: EncapsulatedComponent) {
if (rf & RenderFlags.Create) {
text(0, 'foo');
@ -221,6 +226,7 @@ describe('encapsulation', () => {
type: LeafComponent,
selectors: [['leaf']],
consts: 2,
vars: 0,
template: function(rf: RenderFlags, ctx: LeafComponent) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
@ -252,6 +258,7 @@ describe('encapsulation', () => {
type: WrapperComponentWith,
selectors: [['wrapper']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: WrapperComponentWith) {
if (rf & RenderFlags.Create) {
element(0, 'leaf');
@ -270,6 +277,7 @@ describe('encapsulation', () => {
type: LeafComponentwith,
selectors: [['leaf']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: LeafComponentwith) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
@ -329,6 +337,7 @@ describe('recursive components', () => {
selectors: [['tree-comp']],
factory: () => new TreeComponent(),
consts: 3,
vars: 1,
template: (rf: RenderFlags, ctx: TreeComponent) => {
if (rf & RenderFlags.Create) {
text(0);
@ -340,7 +349,7 @@ describe('recursive components', () => {
containerRefreshStart(1);
{
if (ctx.data.left != null) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
element(0, 'tree-comp');
}
@ -354,7 +363,7 @@ describe('recursive components', () => {
containerRefreshStart(2);
{
if (ctx.data.right != null) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
element(0, 'tree-comp');
}
@ -389,12 +398,13 @@ describe('recursive components', () => {
selectors: [['ng-if-tree']],
factory: () => new NgIfTree(),
consts: 3,
vars: 3,
template: (rf: RenderFlags, ctx: NgIfTree) => {
if (rf & RenderFlags.Create) {
text(0);
template(1, IfTemplate, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(2, IfTemplate2, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(1, IfTemplate, 1, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(2, IfTemplate2, 1, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.data.value));
@ -463,7 +473,7 @@ describe('recursive components', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
if (!ctx.skipContent) {
const rf0 = embeddedViewStart(0, 1);
const rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'tree-comp');
elementEnd();
@ -472,7 +482,7 @@ describe('recursive components', () => {
}
containerRefreshEnd();
}
}, 1, [TreeComponent]);
}, 1, 0, [TreeComponent]);
const fixture = new ComponentFixture(App);
expect(getRenderedText(fixture.component)).toEqual('6201534');
@ -497,7 +507,7 @@ describe('recursive components', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
if (!ctx.skipContent) {
const rf0 = embeddedViewStart(0, 1);
const rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'ng-if-tree');
elementEnd();
@ -506,7 +516,7 @@ describe('recursive components', () => {
}
containerRefreshEnd();
}
}, 1, [NgIfTree]);
}, 1, 0, [NgIfTree]);
const fixture = new ComponentFixture(App);
expect(getRenderedText(fixture.component)).toEqual('6201534');
@ -527,6 +537,7 @@ describe('recursive components', () => {
selectors: [['test-inputs']],
inputs: {minifiedName: 'unminifiedName'},
consts: 0,
vars: 0,
factory: () => new TestInputsComponent(),
template: function(rf: RenderFlags, ctx: TestInputsComponent): void {
// Template not needed for this test

122
packages/core/test/render3/content_spec.ts
View File

@ -42,7 +42,7 @@ describe('content projection', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
@ -64,7 +64,7 @@ describe('content projection', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>content</child>');
@ -98,7 +98,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child]);
}, 5, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>before<div>content</div>after</child>');
@ -123,7 +123,7 @@ describe('content projection', () => {
{ projection(1); }
elementEnd();
}
}, 2, [GrandChild]);
}, 2, 0, [GrandChild]);
/** <child><b>Hello</b>World!</child> */
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
@ -137,7 +137,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -173,7 +173,7 @@ describe('content projection', () => {
{ element(1, 'projected-comp'); }
elementEnd();
}
}, 2, [Child, ProjectedComp]);
}, 2, 0, [Child, ProjectedComp]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -225,7 +225,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child, ProjectedComp]);
}, 5, 0, [Child, ProjectedComp]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -267,7 +267,7 @@ describe('content projection', () => {
containerRefreshStart(2);
{
if (ctx.value) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
text(0, 'content');
}
@ -276,7 +276,7 @@ describe('content projection', () => {
}
containerRefreshEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
@ -316,7 +316,7 @@ describe('content projection', () => {
containerRefreshStart(1);
{
if (ctx.value) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
text(0, 'content');
}
@ -325,7 +325,7 @@ describe('content projection', () => {
}
containerRefreshEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child></child>');
@ -375,13 +375,13 @@ describe('content projection', () => {
containerRefreshStart(2);
{
if (ctx.value) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
text(0, 'content');
}
embeddedViewEnd();
} else {
if (embeddedViewStart(1, 1)) {
if (embeddedViewStart(1, 1, 0)) {
text(0, 'else');
}
embeddedViewEnd();
@ -389,7 +389,7 @@ describe('content projection', () => {
}
containerRefreshEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>');
@ -424,7 +424,7 @@ describe('content projection', () => {
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 0);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'span');
projection(1);
@ -435,7 +435,7 @@ describe('content projection', () => {
}
containerRefreshEnd();
}
});
}, 2, 0);
/**
* <child>
@ -457,7 +457,7 @@ describe('content projection', () => {
// testing
childCmptInstance = loadDirective(0);
}
}, 4, [Child]);
}, 4, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div><span><div>text</div>content</span></div></child>');
@ -489,7 +489,7 @@ describe('content projection', () => {
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
text(1, 'text');
@ -509,7 +509,7 @@ describe('content projection', () => {
// testing
childCmptInstance = loadDirective(0);
}
}, 1, [Child]);
}, 1, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>text</div></child>');
@ -541,7 +541,7 @@ describe('content projection', () => {
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
}
@ -564,7 +564,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
@ -599,7 +599,7 @@ describe('content projection', () => {
containerRefreshStart(2);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
}
@ -633,7 +633,7 @@ describe('content projection', () => {
containerRefreshStart(2);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
text(0, 'content');
}
@ -642,7 +642,7 @@ describe('content projection', () => {
}
containerRefreshEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
const fixture = new ComponentFixture(Parent);
expect(fixture.html)
@ -675,7 +675,7 @@ describe('content projection', () => {
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
}
@ -710,7 +710,7 @@ describe('content projection', () => {
containerRefreshStart(2);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
}
@ -719,7 +719,7 @@ describe('content projection', () => {
}
containerRefreshEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
let parent: any;
/** <parent><p>text</p></parent> */
@ -735,7 +735,7 @@ describe('content projection', () => {
// testing
parent = loadDirective(0);
}
}, 3, [Parent]);
}, 3, 0, [Parent]);
const fixture = new ComponentFixture(App);
expect(fixture.html)
@ -769,7 +769,7 @@ describe('content projection', () => {
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0, 3);
let rf0 = embeddedViewStart(0, 3, 0);
if (rf0 & RenderFlags.Create) {
text(0, 'before-');
projection(1);
@ -794,7 +794,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>before-content-after</div></child>');
@ -816,14 +816,14 @@ describe('content projection', () => {
if (rf & RenderFlags.Create) {
projectionDef();
text(0, 'Before-');
template(1, IfTemplate, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(1, IfTemplate, 1, 0, '', [AttributeMarker.SelectOnly, 'ngIf']);
text(2, '-After');
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngIf', bind(ctx.showing));
}
}, 3, [NgIf]);
}, 3, 1, [NgIf]);
function IfTemplate(rf1: RenderFlags, ctx: any) {
if (rf1 & RenderFlags.Create) {
@ -853,7 +853,7 @@ describe('content projection', () => {
// testing
child = loadDirective(0);
}
}, 4, [Child]);
}, 4, 0, [Child]);
const fixture = new ComponentFixture(App);
child !.showing = true;
@ -881,14 +881,14 @@ describe('content projection', () => {
if (rf & RenderFlags.Create) {
projectionDef();
text(0, 'Before-');
template(1, IfTemplate, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(1, IfTemplate, 1, 0, '', [AttributeMarker.SelectOnly, 'ngIf']);
text(2, '-After');
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngIf', bind(ctx.showing));
}
}, 3, [NgIf]);
}, 3, 1, [NgIf]);
function IfTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
@ -918,7 +918,7 @@ describe('content projection', () => {
// testing
child = loadDirective(0);
}
}, 4, [Child]);
}, 4, 0, [Child]);
const fixture = new ComponentFixture(App);
child !.showing = true;
@ -960,7 +960,7 @@ describe('content projection', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div></div><span>content</span></child>');
@ -997,7 +997,7 @@ describe('content projection', () => {
containerRefreshStart(2);
{
if (ctx.show) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
}
@ -1020,7 +1020,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 2, [Child]);
}, 2, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>content<div></div></child>');
@ -1073,7 +1073,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 10, [ProjectionComp]);
}, 10, 0, [ProjectionComp]);
const fixture = new ComponentFixture(AppComp);
fixture.update();
@ -1134,7 +1134,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 11, [ProjectionComp]);
}, 11, 0, [ProjectionComp]);
/**
* <parent-comp>
@ -1153,7 +1153,7 @@ describe('content projection', () => {
{ text(3, '**DEF**'); }
elementEnd();
}
}, 4, [ProjectionParent]);
}, 4, 0, [ProjectionParent]);
const fixture = new ComponentFixture(AppComp);
fixture.update();
@ -1198,7 +1198,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>content</child>');
@ -1224,7 +1224,7 @@ describe('content projection', () => {
{ projection(1); }
elementEnd();
}
}, 2, [GrandChild]);
}, 2, 0, [GrandChild]);
`<child>
<ng-container>
@ -1247,7 +1247,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 4, [Child]);
}, 4, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><grand-child>content</grand-child></child>');
@ -1293,7 +1293,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child]);
}, 5, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1331,7 +1331,7 @@ describe('content projection', () => {
if (rf & RenderFlags.Update) {
elementProperty(1, 'title', bind('Some title'));
}
}, 3, [Child]);
}, 3, 1, [Child]);
const fixture = new ComponentFixture(Parent);
expect(fixture.html).toEqual('<child><span title="Some title">Has title</span></child>');
@ -1379,7 +1379,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child]);
}, 5, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1428,7 +1428,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child]);
}, 5, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1473,7 +1473,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child]);
}, 5, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1518,7 +1518,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 6, [Child]);
}, 6, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1564,7 +1564,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 6, [Child]);
}, 6, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1610,7 +1610,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 4, [GrandChild]);
}, 4, 0, [GrandChild]);
/**
* <child>
@ -1629,7 +1629,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 3, [Child]);
}, 3, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent))
@ -1673,7 +1673,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 4, [Card]);
}, 4, 0, [Card]);
/**
* <card-with-title>
@ -1686,7 +1686,7 @@ describe('content projection', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, [CardWithTitle]);
}, 2, 0, [CardWithTitle]);
const app = renderComponent(App);
expect(toHtml(app))
@ -1731,7 +1731,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 4, [Card]);
}, 4, 0, [Card]);
/**
* <card-with-title>
@ -1744,7 +1744,7 @@ describe('content projection', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, [CardWithTitle]);
}, 2, 0, [CardWithTitle]);
const app = renderComponent(App);
expect(toHtml(app))
@ -1783,7 +1783,7 @@ describe('content projection', () => {
}
elementEnd();
}
}, 5, [Child]);
}, 5, 0, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>should project</div></child>');
@ -1821,13 +1821,13 @@ describe('content projection', () => {
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
if (rf & RenderFlags.Create) {
elementStart(0, 'child');
{ template(1, IfTemplate, 2, 'div', [AttributeMarker.SelectOnly, 'ngIf']); }
{ template(1, IfTemplate, 2, 0, 'div', [AttributeMarker.SelectOnly, 'ngIf']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngIf', bind(ctx.value));
}
}, 2, [Child, NgIf]);
}, 2, 1, [Child, NgIf]);
const fixture = new ComponentFixture(Parent);

62
packages/core/test/render3/control_flow_spec.ts
View File

@ -24,7 +24,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'span');
@ -80,7 +80,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'span');
@ -91,7 +91,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition2) {
let rf2 = embeddedViewStart(2, 1);
let rf2 = embeddedViewStart(2, 1, 0);
{
if (rf2 & RenderFlags.Create) {
text(0, 'Hello');
@ -170,7 +170,7 @@ describe('JS control flow', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
{ container(0); }
@ -180,7 +180,7 @@ describe('JS control flow', () => {
containerRefreshStart(0);
{
if (ctx.condition2) {
let rf2 = embeddedViewStart(2, 1);
let rf2 = embeddedViewStart(2, 1, 0);
{
if (rf2 & RenderFlags.Create) {
text(0, 'Hello');
@ -193,7 +193,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition3) {
let rf2 = embeddedViewStart(2, 1);
let rf2 = embeddedViewStart(2, 1, 0);
{
if (rf2 & RenderFlags.Create) {
text(0, 'World');
@ -236,21 +236,21 @@ describe('JS control flow', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
if (ctx.condition1) {
const rf1 = embeddedViewStart(1, 1);
const rf1 = embeddedViewStart(1, 1, 0);
if (rf1 & RenderFlags.Create) {
text(0, '1');
}
embeddedViewEnd();
} // can't have ; here due linting rules
if (ctx.condition2) {
const rf2 = embeddedViewStart(2, 1);
const rf2 = embeddedViewStart(2, 1, 0);
if (rf2 & RenderFlags.Create) {
text(0, '2');
}
embeddedViewEnd();
} // can't have ; here due linting rules
if (ctx.condition3) {
const rf3 = embeddedViewStart(3, 1);
const rf3 = embeddedViewStart(3, 1, 0);
if (rf3 & RenderFlags.Create) {
text(0, '3');
}
@ -284,7 +284,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
if (ctx.condition1) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
{
if (rf0 & RenderFlags.Create) {
container(0);
@ -293,7 +293,7 @@ describe('JS control flow', () => {
containerRefreshStart(0);
{
if (ctx.condition2) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
{
if (rf0 & RenderFlags.Create) {
text(0, 'world');
@ -336,7 +336,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
for (let i = 0; i < data.length; i++) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'li');
@ -392,7 +392,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
for (let i = 0; i < data[0].length; i++) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'li');
@ -403,7 +403,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
data[1].forEach((value: string, ind: number) => {
let rf2 = embeddedViewStart(2, 1);
let rf2 = embeddedViewStart(2, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
}
@ -465,7 +465,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
for (let i = 0; i < cafes.length; i++) {
let rf1 = embeddedViewStart(1, 4);
let rf1 = embeddedViewStart(1, 4, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'h2');
@ -479,7 +479,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
for (let j = 0; j < cafes[i].entrees.length; j++) {
let rf2 = embeddedViewStart(2, 1);
let rf2 = embeddedViewStart(2, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
}
@ -560,7 +560,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
for (let i = 0; i < cafes.length; i++) {
let rf1 = embeddedViewStart(1, 4);
let rf1 = embeddedViewStart(1, 4, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'h2');
@ -574,7 +574,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
for (let j = 0; j < cafes[i].entrees.length; j++) {
let rf1 = embeddedViewStart(1, 3);
let rf1 = embeddedViewStart(1, 3, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'h3');
@ -587,7 +587,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
for (let k = 0; k < cafes[i].entrees[j].foods.length; k++) {
let rf2 = embeddedViewStart(1, 1);
let rf2 = embeddedViewStart(1, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
}
@ -640,7 +640,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'span');
@ -650,7 +650,7 @@ describe('JS control flow', () => {
}
embeddedViewEnd();
} else {
let rf2 = embeddedViewStart(2, 2);
let rf2 = embeddedViewStart(2, 2, 0);
{
if (rf2) {
elementStart(0, 'div');
@ -689,6 +689,7 @@ describe('JS control flow', () => {
type: Comp,
selectors: [['comp']],
consts: 0,
vars: 0,
factory: () => {
log.push('comp!');
return new Comp();
@ -706,6 +707,7 @@ describe('JS control flow', () => {
selectors: [['app']],
factory: () => new App(),
consts: 3,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
@ -716,7 +718,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -727,7 +729,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
if (ctx.condition2) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -755,6 +757,7 @@ describe('JS control flow', () => {
type: Comp,
selectors: [['comp']],
consts: 0,
vars: 0,
factory: () => {
log.push('comp!');
return new Comp();
@ -772,6 +775,7 @@ describe('JS control flow', () => {
selectors: [['app']],
factory: () => new App(),
consts: 3,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
@ -782,7 +786,7 @@ describe('JS control flow', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -793,7 +797,7 @@ describe('JS control flow', () => {
containerRefreshStart(2);
{
if (ctx.condition2) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -839,7 +843,7 @@ describe('JS for loop', () => {
containerRefreshStart(1);
{
for (let i = 0; i < config.data1.length; i++) {
let rf2 = embeddedViewStart(1, 1);
let rf2 = embeddedViewStart(1, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
}
@ -849,7 +853,7 @@ describe('JS for loop', () => {
embeddedViewEnd();
}
for (let j = 0; j < config.data2.length; j++) {
let rf2 = embeddedViewStart(1, 1);
let rf2 = embeddedViewStart(1, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
}
@ -910,14 +914,14 @@ describe('function calls', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
{
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 1);
{ spanify(rf0, {message: data[0]}); }
embeddedViewEnd();
}
containerRefreshEnd();
containerRefreshStart(3);
{
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 1);
{ spanify(rf0, {message: data[1]}); }
embeddedViewEnd();
}

93
packages/core/test/render3/di_spec.ts
View File

@ -44,7 +44,7 @@ describe('di', () => {
const tmp = reference(1) as any;
textBinding(2, bind(tmp.value));
}
}, 3, [Directive]);
}, 3, 1, [Directive]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div dir="">Created</div>');
@ -109,7 +109,7 @@ describe('di', () => {
const tmp = reference(2) as any;
textBinding(3, bind(tmp.value));
}
}, 4, [DirA, DirB, DirC]);
}, 4, 1, [DirA, DirB, DirC]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div dira=""><span dirb="" dirc="">DirADirB</span></div>');
@ -131,7 +131,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '', 'dirB', '']);
}
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
new ComponentFixture(App);
expect(log).toEqual(['DirB', 'DirA (dep: DirB)']);
@ -157,7 +157,7 @@ describe('di', () => {
element(0, 'div', ['dirB', '']);
element(1, 'div', ['dirA', '']);
}
}, 2, [DirA, DirB]);
}, 2, 0, [DirA, DirB]);
const fakeModuleInjector: any = {
get: function(token: any) {
@ -178,6 +178,7 @@ describe('di', () => {
selectors: [['comp']],
type: Comp,
consts: 0,
vars: 0,
factory: () => new Comp(directiveInject(DirB)),
template: (ctx: any, fm: boolean) => {}
});
@ -188,7 +189,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dirB', '']);
}
}, 1, [Comp, DirB]);
}, 1, 0, [Comp, DirB]);
new ComponentFixture(App);
expect(log).toEqual(['DirB', 'Comp (dep: DirB)']);
@ -214,17 +215,19 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
container(0);
}
containerRefreshStart(0);
{
for (let i = 0; i < 3; i++) {
if (embeddedViewStart(0, 1)) {
element(0, 'div', ['dirA', '', 'dirB', '']);
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
{
for (let i = 0; i < 3; i++) {
if (embeddedViewStart(0, 1, 0)) {
element(0, 'div', ['dirA', '', 'dirB', '']);
}
embeddedViewEnd();
}
embeddedViewEnd();
}
containerRefreshEnd();
}
containerRefreshEnd();
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
new ComponentFixture(App);
expect(log).toEqual(
@ -273,7 +276,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '', 'dirB', '', 'dirC', '']);
}
}, 1, [DirA, DirB, DirC]);
}, 1, 0, [DirA, DirB, DirC]);
new ComponentFixture(App);
expect(log).toEqual(['DirA', 'DirC', 'DirB (deps: DirA and DirC)']);
@ -287,6 +290,7 @@ describe('di', () => {
selectors: [['comp']],
type: Comp,
consts: 0,
vars: 0,
factory: () => new Comp(directiveInject(DirD)),
template: (ctx: any, fm: boolean) => {}
});
@ -333,7 +337,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dirA', '', 'dirB', '', 'dirC', '', 'dirD', '']);
}
}, 1, [Comp, DirA, DirB, DirC, DirD]);
}, 1, 0, [Comp, DirA, DirB, DirC, DirD]);
new ComponentFixture(App);
expect(log).toEqual(
@ -361,6 +365,7 @@ describe('di', () => {
type: App,
factory: () => new App(),
consts: 1,
vars: 0,
/** <div dirA dirB dirC></div> */
template: (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
@ -410,14 +415,14 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '', 'dirB', '']);
}
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
/** <parent dirB></parent> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'parent', ['dirB', '']);
}
}, 1, [Parent, DirB]);
}, 1, 0, [Parent, DirB]);
new ComponentFixture(App);
expect(log).toEqual(['DirB', 'DirB', 'DirA (dep: DirB - 2)']);
@ -436,6 +441,7 @@ describe('di', () => {
type: MyComponent,
selectors: [['my-component']],
consts: 1,
vars: 1,
factory: () => new MyComponent(directiveInject(MyService)),
template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf & RenderFlags.Create) {
@ -479,7 +485,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
}, 1, [Dir, OtherDir]);
}, 1, 0, [Dir, OtherDir]);
expect(() => new ComponentFixture(App)).toThrowError(/Injector: NOT_FOUND \[OtherDir\]/);
});
@ -514,7 +520,7 @@ describe('di', () => {
element(0, 'div', ['other', '']);
element(1, 'div', ['dir', '']);
}
}, 2, [Dir, OtherDir]);
}, 2, 0, [Dir, OtherDir]);
expect(() => new ComponentFixture(App)).toThrowError(/Injector: NOT_FOUND \[OtherDir\]/);
});
@ -548,7 +554,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '', 'dirB', '']);
}
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
expect(() => new ComponentFixture(App)).toThrowError(/Cannot instantiate cyclic dependency!/);
});
@ -570,7 +576,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
}, 1, [Dir]);
}, 1, 0, [Dir]);
expect(() => new ComponentFixture(App)).toThrowError(/Cannot instantiate cyclic dependency!/);
});
@ -608,7 +614,7 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '']);
}
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
expect(() => {
new ComponentFixture(App);
@ -638,7 +644,7 @@ describe('di', () => {
element(0, 'div', ['dirB', '']);
element(1, 'div', ['dirA', '']);
}
}, 2, [DirA, DirB]);
}, 2, 0, [DirA, DirB]);
expect(() => {
new ComponentFixture(App);
@ -664,14 +670,14 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '', 'dirB', 'self']);
}
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
/* <comp dirB="parent"></comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dirB', 'parent']);
}
}, 1, [Comp, DirB]);
}, 1, 0, [Comp, DirB]);
new ComponentFixture(App);
expect(dirA !.dirB.value).toEqual('parent');
@ -701,7 +707,7 @@ describe('di', () => {
element(1, 'div', ['dirA', '']);
elementEnd();
}
}, 2, [DirA, DirB]);
}, 2, 0, [DirA, DirB]);
expect(() => { new ComponentFixture(App); }).toThrowError(/Injector: NOT_FOUND \[DirB\]/);
});
@ -732,7 +738,7 @@ describe('di', () => {
element(1, 'div', ['dirA', '', 'dirC', '']);
elementEnd();
}
}, 2, [DirA, DirB, DirC]);
}, 2, 0, [DirA, DirB, DirC]);
expect(() => {
(DirA as any)['__NG_ELEMENT_ID__'] = 1;
@ -759,14 +765,14 @@ describe('di', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dirA', '']);
}
}, 1, [DirA, DirB]);
}, 1, 0, [DirA, DirB]);
/* <comp dirB></comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dirB', '']);
}
}, 1, [Comp, DirB]);
}, 1, 0, [Comp, DirB]);
expect(() => { new ComponentFixture(App); }).toThrowError(/Injector: NOT_FOUND \[DirB\]/);
@ -822,7 +828,7 @@ describe('di', () => {
const tmp2 = reference(2) as any;
textBinding(3, interpolation2('', tmp2.value, '-', tmp1.value, ''));
}
}, 4, [Directive, DirectiveSameInstance]);
}, 4, 1, [Directive, DirectiveSameInstance]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div dir="" dirsame="">ElementRef-true</div>');
@ -866,7 +872,7 @@ describe('di', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, function() {
}, 0, undefined, ['dir', '', 'dirSame', ''], ['dir', 'dir', 'dirSame', 'dirSame']);
}, 0, 1, undefined, ['dir', '', 'dirSame', ''], ['dir', 'dir', 'dirSame', 'dirSame']);
text(3);
}
if (rf & RenderFlags.Update) {
@ -874,7 +880,7 @@ describe('di', () => {
const tmp2 = reference(2) as any;
textBinding(3, interpolation2('', tmp1.value, '-', tmp2.value, ''));
}
}, 4, [Directive, DirectiveSameInstance]);
}, 4, 1, [Directive, DirectiveSameInstance]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('TemplateRef-true');
@ -927,7 +933,7 @@ describe('di', () => {
const tmp2 = reference(2) as any;
textBinding(3, interpolation2('', tmp1.value, '-', tmp2.value, ''));
}
}, 4, [Directive, DirectiveSameInstance]);
}, 4, 1, [Directive, DirectiveSameInstance]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div dir="" dirsame="">ViewContainerRef-true</div>');
@ -947,6 +953,7 @@ describe('di', () => {
selectors: [['my-comp']],
factory: () => comp = new MyComp(injectChangeDetectorRef()),
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: MyComp) {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1015,7 +1022,7 @@ describe('di', () => {
const tmp = reference(1) as any;
textBinding(2, bind(tmp.value));
}
}, 3, directives);
}, 3, 1, directives);
const app = renderComponent(MyApp);
// ChangeDetectorRef is the token, ViewRef has historically been the constructor
@ -1035,6 +1042,7 @@ describe('di', () => {
type: MyApp,
selectors: [['my-app']],
consts: 3,
vars: 1,
factory: () => new MyApp(injectChangeDetectorRef()),
/** <div dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
template: function(rf: RenderFlags, ctx: any) {
@ -1068,6 +1076,7 @@ describe('di', () => {
type: MyApp,
selectors: [['my-app']],
consts: 4,
vars: 1,
factory: () => new MyApp(injectChangeDetectorRef()),
/**
* <my-comp>
@ -1111,6 +1120,7 @@ describe('di', () => {
selectors: [['my-app']],
factory: () => new MyApp(injectChangeDetectorRef()),
consts: 1,
vars: 0,
/**
* % if (showing) {
* <div dir dirSameInstance #dir="dir"> {{ dir.value }} </div>
@ -1124,7 +1134,7 @@ describe('di', () => {
containerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 3);
let rf1 = embeddedViewStart(0, 3, 1);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir']);
{ text(2); }
@ -1175,14 +1185,11 @@ describe('di', () => {
selectors: [['my-app']],
factory: () => new MyApp(injectChangeDetectorRef()),
consts: 1,
vars: 0,
/** <div *myIf="showing" dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
template(0, C1, 3, null, ['myIf', 'showing']);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
containerRefreshEnd();
template(0, C1, 3, 1, null, ['myIf', 'showing']);
}
},
directives: directives
@ -1369,7 +1376,7 @@ describe('di', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
{
let rf1 = embeddedViewStart(0, 4);
let rf1 = embeddedViewStart(0, 4, 1);
if (rf1 & RenderFlags.Create) {
elementStart(
0, 'span', ['childDir', '', 'child2Dir', ''],
@ -1386,7 +1393,7 @@ describe('di', () => {
}
containerRefreshEnd();
}
}, 2, [ChildDirective, Child2Directive, ParentDirective]);
}, 2, 0, [ChildDirective, Child2Directive, ParentDirective]);
const fixture = new ComponentFixture(App);
expect(fixture.html)
@ -1401,7 +1408,7 @@ describe('di', () => {
describe('getOrCreateNodeInjector', () => {
it('should handle initial undefined state', () => {
const contentView = createLViewData(
null !, createTView(-1, null, 0, null, null, null), null, LViewFlags.CheckAlways);
null !, createTView(-1, null, 0, 0, null, null, null), null, LViewFlags.CheckAlways);
const oldView = enterView(contentView, null !);
try {
const parent = createLNode(0, TNodeType.Element, null, null, null, null);

8
packages/core/test/render3/directive_spec.ts
View File

@ -35,7 +35,7 @@ describe('directive', () => {
function Template() { element(0, 'span', [AttributeMarker.SelectOnly, 'dir']); }
const fixture = new TemplateFixture(Template, () => {}, 1, [Directive]);
const fixture = new TemplateFixture(Template, () => {}, 1, 0, [Directive]);
expect(fixture.html).toEqual('<span class="foo"></span>');
directiveInstance !.klass = 'bar';
@ -86,7 +86,7 @@ describe('directive', () => {
function updateTemplate() { elementProperty(0, 'test', bind(false)); }
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, [Directive]);
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, 1, [Directive]);
// the "test" attribute should not be reflected in the DOM as it is here only for directive
// matching purposes
@ -142,7 +142,7 @@ describe('directive', () => {
elementProperty(0, 'prop2', bind(true));
}
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, [Directive]);
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, 3, [Directive]);
// the "test" attribute should not be reflected in the DOM as it is here only for directive
// matching purposes
@ -173,7 +173,7 @@ describe('directive', () => {
elementEnd();
}
const fixture = new TemplateFixture(createTemplate, () => {}, 1, [Directive]);
const fixture = new TemplateFixture(createTemplate, () => {}, 1, 0, [Directive]);
// "out" should not be part of reflected attributes
expect(fixture.html).toEqual('<span></span>');

34
packages/core/test/render3/exports_spec.ts
View File

@ -24,9 +24,9 @@ describe('exports', () => {
}
if (rf & RenderFlags.Update) {
const tmp = reference(1) as any;
textBinding(2, tmp.value);
textBinding(2, bind(tmp.value));
}
}, 3);
}, 3, 1);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<input value="one">one');
@ -40,6 +40,7 @@ describe('exports', () => {
type: MyComponent,
selectors: [['comp']],
consts: 0,
vars: 0,
template: function() {},
factory: () => new MyComponent
});
@ -55,7 +56,7 @@ describe('exports', () => {
const tmp = reference(1) as any;
textBinding(2, tmp.name);
}
}, 3, [MyComponent]);
}, 3, 1, [MyComponent]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<comp></comp>Nancy');
@ -71,6 +72,7 @@ describe('exports', () => {
type: MyComponent,
selectors: [['comp']],
consts: 0,
vars: 0,
template: function() {},
factory: () => new MyComponent
});
@ -100,7 +102,7 @@ describe('exports', () => {
const tmp = reference(1) as any;
elementProperty(2, 'myDir', bind(tmp));
}
}, 3, defs);
}, 3, 1, defs);
const fixture = new ComponentFixture(App);
expect(myDir !.myDir).toEqual(myComponent !);
@ -125,9 +127,9 @@ describe('exports', () => {
}
if (rf & RenderFlags.Update) {
const tmp = reference(1) as any;
textBinding(2, tmp.name);
textBinding(2, bind(tmp.name));
}
}, 3, [SomeDir]);
}, 3, 1, [SomeDir]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div somedir=""></div>Drew');
@ -159,7 +161,7 @@ describe('exports', () => {
const tmp = reference(2) as any;
textBinding(0, bind(tmp.value));
}
}, 3);
}, 3, 1);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('one<input value="one">');
@ -177,7 +179,7 @@ describe('exports', () => {
const tmp = reference(2) as any;
elementProperty(0, 'title', bind(tmp.value));
}
}, 3);
}, 3, 1);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div title="one"></div><input value="one">');
@ -194,7 +196,7 @@ describe('exports', () => {
const tmp = reference(2) as any;
elementAttribute(0, 'aria-label', bind(tmp.value));
}
}, 3);
}, 3, 1);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div aria-label="one"></div><input value="one">');
@ -232,6 +234,7 @@ describe('exports', () => {
type: MyComponent,
selectors: [['comp']],
consts: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: MyComponent) {},
factory: () => new MyComponent
});
@ -261,7 +264,7 @@ describe('exports', () => {
const tmp = reference(2) as any;
elementProperty(0, 'myDir', bind(tmp));
}
}, 3, [MyComponent, MyDir]);
}, 3, 1, [MyComponent, MyDir]);
const fixture = new ComponentFixture(App);
expect(myDir !.myDir).toEqual(myComponent !);
@ -279,6 +282,7 @@ describe('exports', () => {
type: MyComponent,
selectors: [['comp']],
consts: 0,
vars: 0,
template: function() {},
factory: () => new MyComponent
});
@ -299,7 +303,7 @@ describe('exports', () => {
textBinding(0, bind(tmp2.value));
textBinding(1, bind(tmp1.name));
}
}, 6, [MyComponent]);
}, 6, 2, [MyComponent]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('oneNancy<comp></comp><input value="one">');
@ -316,7 +320,7 @@ describe('exports', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 1);
{
if (rf1 & RenderFlags.Create) {
text(0);
@ -361,12 +365,12 @@ describe('exports', () => {
if (rf & RenderFlags.Create) {
elementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
elementEnd();
template(2, outerTemplate, 5, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(2, outerTemplate, 5, 0, '', [AttributeMarker.SelectOnly, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(app.outer));
}
}, 3, [NgIf]);
}, 3, 1, [NgIf]);
function outerTemplate(rf: RenderFlags, outer: any) {
if (rf & RenderFlags.Create) {
@ -375,7 +379,7 @@ describe('exports', () => {
text(1);
elementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
elementEnd();
template(4, innerTemplate, 2, '', [AttributeMarker.SelectOnly, 'ngIf']);
template(4, innerTemplate, 2, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
}
elementEnd();
}

52
packages/core/test/render3/i18n_spec.ts
View File

@ -77,6 +77,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 3,
vars: 2,
// Initial template:
// <div i18n>
// {{exp1}} {{exp2}}
@ -136,6 +137,7 @@ describe('Runtime i18n', () => {
type: MyApp,
factory: () => new MyApp(),
consts: 2,
vars: 1,
selectors: [['my-app']],
// Initial template:
// <div i18n>
@ -194,6 +196,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}"></div>
@ -240,6 +243,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 8,
vars: 4,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}">
// {{exp1}}
@ -337,6 +341,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 6,
vars: 2,
// Initial template:
// <div>
// <a i18n>
@ -432,6 +437,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 3,
vars: 0,
// Initial template:
// before (
// % if (condition) { // with i18n
@ -458,7 +464,7 @@ describe('Runtime i18n', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
{
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
// Start of translated section 1
text(0); // EXP_1
@ -561,6 +567,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
// Initial template:
// <ul i18n>
// <li *ngFor="let item of items">value: {{item}}</li>
@ -581,7 +588,7 @@ describe('Runtime i18n', () => {
elementStart(0, 'ul');
{
// Start of translated section 1
template(1, liTemplate, 2, null, ['ngForOf', '']); // START_LI
template(1, liTemplate, 2, 1, null, ['ngForOf', '']); // START_LI
// End of translated section 1
}
elementEnd();
@ -662,6 +669,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 3,
vars: 2,
// Initial template:
// <ul i18n>
// <li *ngFor="let item of items">value: {{item}}</li>
@ -685,8 +693,8 @@ describe('Runtime i18n', () => {
elementStart(0, 'ul');
{
// Start of translated section 1
template(1, liTemplate, 2, null, ['ngForOf', '']); // START_LI_0
template(2, liTemplateBis, 2, null, ['ngForOf', '']); // START_LI_1
template(1, liTemplate, 2, 1, null, ['ngForOf', '']); // START_LI_0
template(2, liTemplateBis, 2, 1, null, ['ngForOf', '']); // START_LI_1
// End of translated section 1
}
elementEnd();
@ -774,6 +782,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 3,
vars: 2,
// Initial template:
// <ul i18n>
// <li *ngFor="let item of items">value: {{item}}</li>
@ -797,8 +806,8 @@ describe('Runtime i18n', () => {
elementStart(0, 'ul');
{
// Start of translated section 1
template(1, liTemplate, 2, null, ['ngForOf', '']); // START_LI_0
template(2, liTemplateBis, 2, null, ['ngForOf', '']); // START_LI_1
template(1, liTemplate, 2, 1, null, ['ngForOf', '']); // START_LI_0
template(2, liTemplateBis, 2, 1, null, ['ngForOf', '']); // START_LI_1
// End of translated section 1
}
elementEnd();
@ -853,7 +862,7 @@ describe('Runtime i18n', () => {
// Start of translated section 2
elementStart(0, 'li'); // START_LI
{
template(1, spanTemplate, 2, null, ['ngForOf', '']); // START_SPAN
template(1, spanTemplate, 2, 1, null, ['ngForOf', '']); // START_SPAN
}
elementEnd();
// End of translated section 2
@ -888,6 +897,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
// Initial template:
// <ul i18n>
// <li *ngFor="let item of items">
@ -913,7 +923,7 @@ describe('Runtime i18n', () => {
elementStart(0, 'ul');
{
// Start of translated section 1
template(1, liTemplate, 2, null, ['ngForOf', '']); // START_LI
template(1, liTemplate, 2, 1, null, ['ngForOf', '']); // START_LI
// End of translated section 1
}
elementEnd();
@ -985,6 +995,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 5,
vars: 1,
// Initial template:
// <ul i18n>
// <li>start</li>
@ -1010,9 +1021,9 @@ describe('Runtime i18n', () => {
elementStart(0, 'ul');
{
// Start of translated section 1
element(1, 'li'); // START_LI_0
template(2, liTemplate, 2, null, ['ngForOf', '']); // START_LI_1
elementStart(3, 'li'); // START_LI_2
element(1, 'li'); // START_LI_0
template(2, liTemplate, 2, 1, null, ['ngForOf', '']); // START_LI_1
elementStart(3, 'li'); // START_LI_2
{ text(4, 'delete me'); }
elementEnd();
// End of translated section 1
@ -1081,6 +1092,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 2,
vars: 1,
// Initial template:
// <ul i18n>
// <li *ngFor="let item of items">value: {{item}}</li>
@ -1101,7 +1113,7 @@ describe('Runtime i18n', () => {
elementStart(0, 'ul');
{
// Start of translated section 1
template(1, liTemplate, 2, undefined, ['ngForOf', '']); // START_LI
template(1, liTemplate, 2, 1, undefined, ['ngForOf', '']); // START_LI
// End of translated section 1
}
elementEnd();
@ -1148,6 +1160,7 @@ describe('Runtime i18n', () => {
selectors: [['child']],
factory: () => new Child(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1187,6 +1200,7 @@ describe('Runtime i18n', () => {
directives: [Child],
factory: () => new Parent(),
consts: 4,
vars: 2,
template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) {
if (!i18n_1) {
@ -1246,6 +1260,7 @@ describe('Runtime i18n', () => {
selectors: [['child']],
factory: () => new Child(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1285,6 +1300,7 @@ describe('Runtime i18n', () => {
directives: [Child],
factory: () => new Parent(),
consts: 6,
vars: 2,
template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) {
if (!i18n_1) {
@ -1335,6 +1351,7 @@ describe('Runtime i18n', () => {
selectors: [['grand-child']],
factory: () => new GrandChild(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1355,6 +1372,7 @@ describe('Runtime i18n', () => {
directives: [GrandChild],
factory: () => new Child(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1383,6 +1401,7 @@ describe('Runtime i18n', () => {
directives: [Child],
factory: () => new Parent(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) {
if (!i18n_1) {
@ -1420,6 +1439,7 @@ describe('Runtime i18n', () => {
selectors: [['child']],
factory: () => new Child(),
consts: 1,
vars: 0,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef([[['span']]], ['span']);
@ -1450,6 +1470,7 @@ describe('Runtime i18n', () => {
directives: [Child],
factory: () => new Parent(),
consts: 3,
vars: 0,
template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) {
if (!i18n_1) {
@ -1491,6 +1512,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}"></div>
@ -1528,6 +1550,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}"></div>
@ -1564,6 +1587,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}"></div>
@ -1602,6 +1626,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}"></div>
@ -1645,6 +1670,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}{{exp6}}"></div>
@ -1690,6 +1716,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title
// title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}{{exp6}}{{exp7}}"></div>
@ -1744,6 +1771,7 @@ describe('Runtime i18n', () => {
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 1,
vars: 1,
// Initial template:
// <div i18n i18n-title
// title="{{exp1}}{{exp2}}{{exp3}}{{exp4}}{{exp5}}{{exp6}}{{exp7}}{{exp8}}"></div>

39
packages/core/test/render3/instructions_spec.ts
View File

@ -58,7 +58,7 @@ describe('instructions', () => {
it('should not update bindings when value does not change', () => {
const idempotentUpdate = () => elementProperty(0, 'title', bind('Hello'));
const t = new TemplateFixture(createAnchor, idempotentUpdate, 1);
const t = new TemplateFixture(createAnchor, idempotentUpdate, 1, 1);
t.update();
expect(t.html).toEqual('<a title="Hello"></a>');
@ -298,7 +298,7 @@ describe('instructions', () => {
function ToDoAppComponent_NgForOf_Template_0(rf: RenderFlags, ctx0: NgForOfContext<any>) {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
template(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, 2, null, _c0);
template(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, 2, 1, null, _c0);
elementEnd();
}
if (rf & RenderFlags.Update) {
@ -333,9 +333,10 @@ describe('instructions', () => {
selectors: [['nested-loops']],
factory: function ToDoAppComponent_Factory() { return new NestedLoops(); },
consts: 1,
vars: 1,
template: function ToDoAppComponent_Template(rf: RenderFlags, ctx: NestedLoops) {
if (rf & RenderFlags.Create) {
template(0, ToDoAppComponent_NgForOf_Template_0, 2, null, _c0);
template(0, ToDoAppComponent_NgForOf_Template_0, 2, 1, null, _c0);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows));
@ -356,7 +357,7 @@ describe('instructions', () => {
describe('sanitization injection compatibility', () => {
it('should work for url sanitization', () => {
const s = new LocalMockSanitizer(value => `${value}-sanitized`);
const t = new TemplateFixture(createAnchor, undefined, 1, null, null, s);
const t = new TemplateFixture(createAnchor, undefined, 1, 0, null, null, s);
const inputValue = 'http://foo';
const outputValue = 'http://foo-sanitized';
@ -367,7 +368,7 @@ describe('instructions', () => {
it('should bypass url sanitization if marked by the service', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createAnchor, undefined, 1, null, null, s);
const t = new TemplateFixture(createAnchor, undefined, 1, 0, null, null, s);
const inputValue = s.bypassSecurityTrustUrl('http://foo');
const outputValue = 'http://foo';
@ -378,7 +379,7 @@ describe('instructions', () => {
it('should bypass ivy-level url sanitization if a custom sanitizer is used', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createAnchor, undefined, 1, null, null, s);
const t = new TemplateFixture(createAnchor, undefined, 1, 0, null, null, s);
const inputValue = bypassSanitizationTrustUrl('http://foo');
const outputValue = 'http://foo-ivy';
@ -389,7 +390,7 @@ describe('instructions', () => {
it('should work for style sanitization', () => {
const s = new LocalMockSanitizer(value => `color:blue`);
const t = new TemplateFixture(createDiv, undefined, 1, null, null, s);
const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
const inputValue = 'color:red';
const outputValue = 'color:blue';
@ -400,7 +401,7 @@ describe('instructions', () => {
it('should bypass style sanitization if marked by the service', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createDiv, undefined, 1, null, null, s);
const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
const inputValue = s.bypassSecurityTrustStyle('color:maroon');
const outputValue = 'color:maroon';
@ -411,7 +412,7 @@ describe('instructions', () => {
it('should bypass ivy-level style sanitization if a custom sanitizer is used', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createDiv, undefined, 1, null, null, s);
const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
const inputValue = bypassSanitizationTrustStyle('font-family:foo');
const outputValue = 'font-family:foo-ivy';
@ -422,7 +423,7 @@ describe('instructions', () => {
it('should work for resourceUrl sanitization', () => {
const s = new LocalMockSanitizer(value => `${value}-sanitized`);
const t = new TemplateFixture(createScript, undefined, 1, null, null, s);
const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
const inputValue = 'http://resource';
const outputValue = 'http://resource-sanitized';
@ -433,7 +434,7 @@ describe('instructions', () => {
it('should bypass resourceUrl sanitization if marked by the service', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createScript, undefined, 1, null, null, s);
const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
const inputValue = s.bypassSecurityTrustResourceUrl('file://all-my-secrets.pdf');
const outputValue = 'file://all-my-secrets.pdf';
@ -444,7 +445,7 @@ describe('instructions', () => {
it('should bypass ivy-level resourceUrl sanitization if a custom sanitizer is used', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createScript, undefined, 1, null, null, s);
const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
const inputValue = bypassSanitizationTrustResourceUrl('file://all-my-secrets.pdf');
const outputValue = 'file://all-my-secrets.pdf-ivy';
@ -455,7 +456,7 @@ describe('instructions', () => {
it('should work for script sanitization', () => {
const s = new LocalMockSanitizer(value => `${value} //sanitized`);
const t = new TemplateFixture(createScript, undefined, 1, null, null, s);
const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
const inputValue = 'fn();';
const outputValue = 'fn(); //sanitized';
@ -466,7 +467,7 @@ describe('instructions', () => {
it('should bypass script sanitization if marked by the service', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createScript, undefined, 1, null, null, s);
const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
const inputValue = s.bypassSecurityTrustScript('alert("bar")');
const outputValue = 'alert("bar")';
@ -477,7 +478,7 @@ describe('instructions', () => {
it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createScript, undefined, 1, null, null, s);
const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
const inputValue = bypassSanitizationTrustScript('alert("bar")');
const outputValue = 'alert("bar")-ivy';
@ -488,7 +489,7 @@ describe('instructions', () => {
it('should work for html sanitization', () => {
const s = new LocalMockSanitizer(value => `${value} <!--sanitized-->`);
const t = new TemplateFixture(createDiv, undefined, 1, null, null, s);
const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
const inputValue = '<header></header>';
const outputValue = '<header></header> <!--sanitized-->';
@ -499,7 +500,7 @@ describe('instructions', () => {
it('should bypass html sanitization if marked by the service', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createDiv, undefined, 1, null, null, s);
const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
const inputValue = s.bypassSecurityTrustHtml('<div onclick="alert(123)"></div>');
const outputValue = '<div onclick="alert(123)"></div>';
@ -510,7 +511,7 @@ describe('instructions', () => {
it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
const s = new LocalMockSanitizer(value => '');
const t = new TemplateFixture(createDiv, undefined, 1, null, null, s);
const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
const inputValue = bypassSanitizationTrustHtml('<div onclick="alert(123)"></div>');
const outputValue = '<div onclick="alert(123)"></div>-ivy';
@ -575,5 +576,5 @@ function stripStyleWsCharacters(value: string): string {
function createTemplateFixtureWithSanitizer(
buildFn: () => any, consts: number, sanitizer: Sanitizer) {
return new TemplateFixture(buildFn, () => {}, consts, null, null, sanitizer);
return new TemplateFixture(buildFn, () => {}, consts, 0, null, null, sanitizer);
}

166
packages/core/test/render3/integration_spec.ts
View File

@ -52,7 +52,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
textBinding(1, interpolation1('Hello, ', ctx.name, '!'));
}
}, 2);
}, 2, 1);
const fixture = new ComponentFixture(App);
fixture.component.name = 'World';
@ -76,8 +76,8 @@ describe('render3 integration test', () => {
}
}
expect(renderToHtml(Template, 'benoit', 1)).toEqual('benoit');
expect(renderToHtml(Template, undefined, 1)).toEqual('');
expect(renderToHtml(Template, 'benoit', 1, 1)).toEqual('benoit');
expect(renderToHtml(Template, undefined, 1, 1)).toEqual('');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 0,
tNode: 2,
@ -96,8 +96,8 @@ describe('render3 integration test', () => {
}
}
expect(renderToHtml(Template, 'benoit', 1)).toEqual('benoit');
expect(renderToHtml(Template, null, 1)).toEqual('');
expect(renderToHtml(Template, 'benoit', 1, 1)).toEqual('benoit');
expect(renderToHtml(Template, null, 1, 1)).toEqual('');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 0,
tNode: 2,
@ -115,8 +115,8 @@ describe('render3 integration test', () => {
textBinding(0, rf & RenderFlags.Create ? value : NO_CHANGE);
}
}
expect(renderToHtml(Template, 'once', 1)).toEqual('once');
expect(renderToHtml(Template, 'twice', 1)).toEqual('once');
expect(renderToHtml(Template, 'once', 1, 1)).toEqual('once');
expect(renderToHtml(Template, 'twice', 1, 1)).toEqual('once');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 0,
tNode: 2,
@ -138,7 +138,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.name));
}
}, 3);
}, 3, 1);
const fixture = new ComponentFixture(App);
fixture.component.name = 'world';
@ -164,7 +164,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
textBinding(2, bind(ctx.name));
}
}, 4);
}, 4, 1);
const fixture = new ComponentFixture(App);
fixture.component.name = 'world';
@ -198,7 +198,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
textBinding(4, interpolation1('Hello ', ctx.name, '!'));
}
}, 5);
}, 5, 1);
const fixture = new ComponentFixture(App);
fixture.component.name = 'world';
@ -225,7 +225,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
elementAttribute(2, 'id', bind(ctx.id));
}
}, 3);
}, 3, 1);
const fixture = new ComponentFixture(App);
fixture.component.id = 'foo';
@ -261,6 +261,7 @@ describe('render3 integration test', () => {
type: TodoComponent,
selectors: [['todo']],
consts: 3,
vars: 1,
template: function TodoTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'p');
@ -285,7 +286,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) {
element(0, 'todo');
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<todo><p>Todo one</p></todo>');
@ -297,7 +298,7 @@ describe('render3 integration test', () => {
element(0, 'todo');
text(1, 'two');
}
}, 2, defs);
}, 2, 0, defs);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<todo><p>Todo one</p></todo>two');
@ -313,7 +314,7 @@ describe('render3 integration test', () => {
element(0, 'todo');
element(1, 'todo');
}
}, 2, defs);
}, 2, 0, defs);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>');
@ -328,6 +329,7 @@ describe('render3 integration test', () => {
type: TodoComponentHostBinding,
selectors: [['todo']],
consts: 1,
vars: 1,
template: function TodoComponentHostBindingTemplate(
rf: RenderFlags, ctx: TodoComponentHostBinding) {
if (rf & RenderFlags.Create) {
@ -351,7 +353,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) {
element(0, 'todo');
}
}, 1, [TodoComponentHostBinding]);
}, 1, 0, [TodoComponentHostBinding]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<todo title="one">one</todo>');
@ -368,6 +370,7 @@ describe('render3 integration test', () => {
selectors: [['host-attr-comp']],
factory: () => new HostAttributeComp(),
consts: 0,
vars: 0,
template: (rf: RenderFlags, ctx: HostAttributeComp) => {},
attributes: ['role', 'button']
});
@ -385,6 +388,7 @@ describe('render3 integration test', () => {
type: MyComp,
selectors: [['comp']],
consts: 2,
vars: 1,
template: function MyCompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'p');
@ -403,7 +407,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp');
}
}, 1, [MyComp]);
}, 1, 0, [MyComp]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<comp><p>Bess</p></comp>');
@ -422,6 +426,7 @@ describe('render3 integration test', () => {
type: MyComp,
selectors: [['comp']],
consts: 1,
vars: 0,
template: function MyCompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -430,7 +435,7 @@ describe('render3 integration test', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'div');
{ text(1, 'text'); }
@ -455,7 +460,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'condition', bind(ctx.condition));
}
}, 1, [MyComp]);
}, 1, 1, [MyComp]);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -509,7 +514,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
if (ctx.value) {
let rf1 = embeddedViewStart(0, 3);
let rf1 = embeddedViewStart(0, 3, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'div');
@ -554,7 +559,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
if (ctx.value) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementContainerStart(0);
@ -605,12 +610,12 @@ describe('render3 integration test', () => {
const TestCmpt =
createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) {
if (rf & RenderFlags.Create) {
template(0, ngIfTemplate, 2, null, [AttributeMarker.SelectOnly, 'ngIf']);
template(0, ngIfTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.value));
}
}, 1, [NgIf]);
}, 1, 1, [NgIf]);
const fixture = new ComponentFixture(TestCmpt);
expect(fixture.html).toEqual('');
@ -661,12 +666,13 @@ describe('render3 integration test', () => {
</ng-template>`;
const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, null, [AttributeMarker.SelectOnly, 'testDirective']);
template(
0, embeddedTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'testDirective']);
}
if (rf & RenderFlags.Update) {
testDirective = loadDirective<TestDirective>(0);
}
}, 1, [TestDirective]);
}, 1, 0, [TestDirective]);
const fixture = new ComponentFixture(TestCmpt);
expect(fixture.html).toEqual('');
@ -694,7 +700,7 @@ describe('render3 integration test', () => {
function App() { element(0, 'test-cmpt'); }
const fixture = new TemplateFixture(App, () => {}, 1, [TestCmpt]);
const fixture = new TemplateFixture(App, () => {}, 1, 0, [TestCmpt]);
expect(fixture.html).toEqual('<test-cmpt>component template</test-cmpt>');
});
@ -726,7 +732,7 @@ describe('render3 integration test', () => {
function App() { element(0, 'test-cmpt'); }
const fixture = new TemplateFixture(App, () => {}, 1, [TestCmpt]);
const fixture = new TemplateFixture(App, () => {}, 1, 0, [TestCmpt]);
expect(fixture.html).toEqual('<test-cmpt>content</test-cmpt>');
});
@ -777,12 +783,12 @@ describe('render3 integration test', () => {
*/
const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 4, null, [AttributeMarker.SelectOnly, 'testDirective']);
template(0, embeddedTemplate, 4, 0, null, [AttributeMarker.SelectOnly, 'testDirective']);
}
if (rf & RenderFlags.Update) {
testDirective = loadDirective<TestDirective>(0);
}
}, 1, [TestDirective]);
}, 1, 0, [TestDirective]);
function App() { element(0, 'test-cmpt'); }
@ -829,7 +835,7 @@ describe('render3 integration test', () => {
elementEnd();
}
const fixture = new TemplateFixture(Template, () => {}, 2, [Directive]);
const fixture = new TemplateFixture(Template, () => {}, 2, 0, [Directive]);
expect(fixture.html).toEqual('<div></div>');
expect(directive !.elRef.nativeElement.nodeType).toBe(Node.COMMENT_NODE);
});
@ -893,7 +899,7 @@ describe('render3 integration test', () => {
containerRefreshStart(0);
{
if (ctx.label != null) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 1);
if (rf1 & RenderFlags.Create) {
text(0);
}
@ -913,29 +919,31 @@ describe('render3 integration test', () => {
container(1);
container(2);
}
containerRefreshStart(0);
{
const rf0 = embeddedViewStart(0, 1);
{ showLabel(rf0, {label: ctx.tree.beforeLabel}); }
embeddedViewEnd();
}
containerRefreshEnd();
containerRefreshStart(1);
{
for (let subTree of ctx.tree.subTrees || []) {
const rf0 = embeddedViewStart(0, 1);
{ showTree(rf0, {tree: subTree}); }
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
{
const rf0 = embeddedViewStart(0, 1, 0);
{ showLabel(rf0, {label: ctx.tree.beforeLabel}); }
embeddedViewEnd();
}
containerRefreshEnd();
containerRefreshStart(1);
{
for (let subTree of ctx.tree.subTrees || []) {
const rf0 = embeddedViewStart(0, 1, 0);
{ showTree(rf0, {tree: subTree}); }
embeddedViewEnd();
}
}
containerRefreshEnd();
containerRefreshStart(2);
{
const rf0 = embeddedViewStart(0, 1, 0);
{ showLabel(rf0, {label: ctx.tree.afterLabel}); }
embeddedViewEnd();
}
containerRefreshEnd();
}
containerRefreshEnd();
containerRefreshStart(2);
{
const rf0 = embeddedViewStart(0, 1);
{ showLabel(rf0, {label: ctx.tree.afterLabel}); }
embeddedViewEnd();
}
containerRefreshEnd();
}
class ChildComponent {
@ -947,6 +955,7 @@ describe('render3 integration test', () => {
selectors: [['child']],
type: ChildComponent,
consts: 3,
vars: 0,
template: function ChildComponentTemplate(
rf: RenderFlags, ctx: {beforeTree: Tree, afterTree: Tree}) {
if (rf & RenderFlags.Create) {
@ -955,20 +964,22 @@ describe('render3 integration test', () => {
projection(1);
container(2);
}
containerRefreshStart(0);
{
const rf0 = embeddedViewStart(0, 1);
{ showTree(rf0, {tree: ctx.beforeTree}); }
embeddedViewEnd();
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
{
const rf0 = embeddedViewStart(0, 1, 0);
{ showTree(rf0, {tree: ctx.beforeTree}); }
embeddedViewEnd();
}
containerRefreshEnd();
containerRefreshStart(2);
{
const rf0 = embeddedViewStart(0, 1, 0);
{ showTree(rf0, {tree: ctx.afterTree}); }
embeddedViewEnd();
}
containerRefreshEnd();
}
containerRefreshEnd();
containerRefreshStart(2);
{
const rf0 = embeddedViewStart(0, 1);
{ showTree(rf0, {tree: ctx.afterTree}); }
embeddedViewEnd();
}
containerRefreshEnd();
},
factory: () => new ChildComponent,
inputs: {beforeTree: 'beforeTree', afterTree: 'afterTree'}
@ -986,7 +997,7 @@ describe('render3 integration test', () => {
elementProperty(0, 'afterTree', bind(ctx.afterTree));
containerRefreshStart(1);
{
const rf0 = embeddedViewStart(0, 1);
const rf0 = embeddedViewStart(0, 1, 0);
{ showTree(rf0, {tree: ctx.projectedTree}); }
embeddedViewEnd();
}
@ -1002,14 +1013,14 @@ describe('render3 integration test', () => {
afterTree: {afterLabel: 'z'}
};
const defs = [ChildComponent];
expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('<child>apz</child>');
expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('<child>apz</child>');
ctx.projectedTree = {subTrees: [{}, {}, {subTrees: [{}, {}]}, {}]};
ctx.beforeTree.subTrees !.push({afterLabel: 'b'});
expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('<child>abz</child>');
expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('<child>abz</child>');
ctx.projectedTree.subTrees ![1].afterLabel = 'h';
expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('<child>abhz</child>');
expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('<child>abhz</child>');
ctx.beforeTree.subTrees !.push({beforeLabel: 'c'});
expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('<child>abchz</child>');
expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('<child>abchz</child>');
// To check the context easily:
// console.log(JSON.stringify(ctx));
@ -1028,7 +1039,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
elementAttribute(0, 'title', bind(ctx.title));
}
}, 1);
}, 1, 1);
const fixture = new ComponentFixture(App);
fixture.component.title = 'Hello';
@ -1055,7 +1066,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Update) {
elementAttribute(0, 'title', bind(ctx.title));
}
}, 1);
}, 1, 1);
const fixture = new ComponentFixture(App);
fixture.component.title = NaN;
@ -1098,15 +1109,15 @@ describe('render3 integration test', () => {
}
}
let args = ['(', 0, 'a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5, 'f', 6, 'g', 7, ')'];
expect(renderToHtml(Template, args, 1))
expect(renderToHtml(Template, args, 1, 10))
.toEqual(
'<b a="(0a1b2c3d4e5f6g7)" a0="0" a1="(0)" a2="(0a1)" a3="(0a1b2)" a4="(0a1b2c3)" a5="(0a1b2c3d4)" a6="(0a1b2c3d4e5)" a7="(0a1b2c3d4e5f6)" a8="(0a1b2c3d4e5f6g7)"></b>');
args = args.reverse();
expect(renderToHtml(Template, args, 1))
expect(renderToHtml(Template, args, 1, 10))
.toEqual(
'<b a=")7g6f5e4d3c2b1a0(" a0="7" a1=")7(" a2=")7g6(" a3=")7g6f5(" a4=")7g6f5e4(" a5=")7g6f5e4d3(" a6=")7g6f5e4d3c2(" a7=")7g6f5e4d3c2b1(" a8=")7g6f5e4d3c2b1a0("></b>');
args = args.reverse();
expect(renderToHtml(Template, args, 1))
expect(renderToHtml(Template, args, 1, 10))
.toEqual(
'<b a="(0a1b2c3d4e5f6g7)" a0="0" a1="(0)" a2="(0a1)" a3="(0a1b2)" a4="(0a1b2c3)" a5="(0a1b2c3d4)" a6="(0a1b2c3d4e5)" a7="(0a1b2c3d4e5f6)" a8="(0a1b2c3d4e5f6g7)"></b>');
});
@ -1125,7 +1136,7 @@ describe('render3 integration test', () => {
containerRefreshStart(1);
{
if (true) {
let rf1 = embeddedViewStart(1, 1);
let rf1 = embeddedViewStart(1, 1, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'b');
@ -1139,7 +1150,7 @@ describe('render3 integration test', () => {
}
containerRefreshEnd();
}
}, 2);
}, 2, 1);
const fixture = new ComponentFixture(App);
fixture.component.title = 'Hello';
@ -1182,7 +1193,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['hostBindingDir', '']);
}
}, 1, [HostBindingDir]);
}, 1, 0, [HostBindingDir]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual(`<div aria-label="some label" hostbindingdir=""></div>`);
@ -1335,7 +1346,7 @@ describe('render3 integration test', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'div');
}
@ -1377,6 +1388,7 @@ describe('render3 integration test', () => {
selectors: [['sanitize-this']],
factory: () => new SanitizationComp(),
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: SanitizationComp) => {
if (rf & RenderFlags.Create) {
element(0, 'a');

228
packages/core/test/render3/lifecycle_spec.ts
View File

@ -7,7 +7,8 @@
*/
import {OnDestroy, SimpleChanges} from '../../src/core';
import {AttributeMarker, ComponentTemplate, LifecycleHooksFeature, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
import {AttributeMarker, ComponentTemplate, LifecycleHooksFeature, NO_CHANGE, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, markDirty, projection, projectionDef, store, template, text} from '../../src/render3/instructions';
import {RenderFlags} from '../../src/render3/interfaces/definition';
@ -60,6 +61,7 @@ describe('lifecycles', () => {
type: Component,
selectors: [[name]],
consts: consts,
vars: 0,
factory: () => new Component(),
inputs: {val: 'val'}, template,
directives: directives
@ -86,7 +88,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'val', bind(ctx.val));
}
}, 1, directives);
}, 1, 1, directives);
const fixture = new ComponentFixture(App);
fixture.update();
@ -115,7 +117,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'parent');
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['parent', 'comp']);
@ -137,7 +139,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', 1);
elementProperty(1, 'val', 2);
}
}, 2, directives);
}, 2, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['parent1', 'parent2', 'comp1', 'comp2']);
@ -158,7 +160,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -167,7 +169,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp']);
@ -193,7 +195,7 @@ describe('lifecycles', () => {
{ elementStart(1, 'projected'); }
elementEnd();
}
}, 2, directives);
}, 2, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp', 'projected']);
@ -223,7 +225,7 @@ describe('lifecycles', () => {
elementProperty(2, 'val', 2);
elementProperty(3, 'val', 2);
}
}, 4, directives);
}, 4, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp1', 'projected1', 'comp2', 'projected2']);
@ -235,7 +237,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dir', '']);
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp', 'dir']);
@ -250,7 +252,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['dir']);
@ -279,7 +281,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let j = 2; j < 5; j++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -291,7 +293,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, directives);
}, 3, 0, directives);
const fixture = new ComponentFixture(App);
// onInit is called top to bottom, so top level comps (1 and 5) are called
@ -319,7 +321,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let j = 2; j < 5; j++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'parent');
}
@ -331,7 +333,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, directives);
}, 3, 0, directives);
const fixture = new ComponentFixture(App);
// onInit is called top to bottom, so top level comps (1 and 5) are called
@ -354,10 +356,10 @@ describe('lifecycles', () => {
});
let Comp = createDoCheckComponent('comp', (rf: RenderFlags, ctx: any) => {});
let Parent = createDoCheckComponent('parent', getParentTemplate('comp'), 1, [Comp]);
let Parent = createDoCheckComponent('parent', getParentTemplate('comp'), 1, 1, [Comp]);
function createDoCheckComponent(
name: string, template: ComponentTemplate<any>, consts: number = 0,
name: string, template: ComponentTemplate<any>, consts: number = 0, vars: number = 0,
directives: any[] = []) {
return class Component {
ngDoCheck() {
@ -372,6 +374,7 @@ describe('lifecycles', () => {
selectors: [[name]],
factory: () => new Component(), template,
consts: consts,
vars: vars,
directives: directives
});
};
@ -392,7 +395,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp');
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp']);
@ -419,7 +422,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'parent');
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['parent', 'comp']);
@ -431,7 +434,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp');
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(allEvents).toEqual(['init comp', 'check comp']);
@ -446,7 +449,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dir', '']);
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp', 'dir']);
@ -461,7 +464,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['dir']);
@ -498,7 +501,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'val', bind(ctx.val));
}
}, 2, [Comp]);
}, 2, 1, [Comp]);
let ProjectedComp = createAfterContentInitComp('projected', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
@ -508,7 +511,7 @@ describe('lifecycles', () => {
}, 1);
function createAfterContentInitComp(
name: string, template: ComponentTemplate<any>, consts: number = 0,
name: string, template: ComponentTemplate<any>, consts: number = 0, vars: number = 0,
directives: any[] = []) {
return class Component {
val: string = '';
@ -523,6 +526,7 @@ describe('lifecycles', () => {
selectors: [[name]],
factory: () => new Component(),
consts: consts,
vars: vars,
inputs: {val: 'val'},
template: template,
directives: directives
@ -554,7 +558,7 @@ describe('lifecycles', () => {
containerRefreshStart(2);
{
for (let i = 2; i < 4; i++) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'parent');
{ text(1, 'content'); }
@ -580,7 +584,7 @@ describe('lifecycles', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, directives);
}, 2, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp']);
@ -612,7 +616,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'comp');
{ text(1, 'content'); }
@ -623,7 +627,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp']);
@ -649,7 +653,7 @@ describe('lifecycles', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, directives);
}, 2, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['parent', 'comp']);
@ -675,7 +679,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', 1);
elementProperty(2, 'val', 2);
}
}, 4, directives);
}, 4, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['parent1', 'parent2', 'comp1', 'comp2']);
@ -702,7 +706,7 @@ describe('lifecycles', () => {
}
elementEnd();
}
}, 3, directives);
}, 3, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['projected', 'parent', 'comp']);
@ -745,7 +749,7 @@ describe('lifecycles', () => {
elementProperty(3, 'val', 2);
elementProperty(4, 'val', 2);
}
}, 6, directives);
}, 6, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['projected1', 'parent1', 'projected2', 'parent2', 'comp1', 'comp2']);
@ -775,7 +779,7 @@ describe('lifecycles', () => {
containerRefreshStart(2);
{
for (let i = 2; i < 4; i++) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'comp');
{ text(1, 'content'); }
@ -789,7 +793,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 5, directives);
}, 5, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp2', 'comp3', 'comp1', 'comp4']);
@ -804,7 +808,7 @@ describe('lifecycles', () => {
* <parent [val]="4">content</parent>
*/
renderToHtml(ForLoopWithChildrenTemplate, {}, 5, directives);
renderToHtml(ForLoopWithChildrenTemplate, {}, 5, 0, directives);
expect(events).toEqual(
['parent2', 'comp2', 'parent3', 'comp3', 'parent1', 'parent4', 'comp1', 'comp4']);
});
@ -819,7 +823,7 @@ describe('lifecycles', () => {
{ text(1, 'content'); }
elementEnd();
}
}, 2, directives);
}, 2, 0, directives);
const fixture = new ComponentFixture(App);
expect(allEvents).toEqual(['comp init', 'comp check']);
@ -846,7 +850,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dir', '']);
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp', 'init', 'check']);
@ -858,7 +862,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
}, 1, directives);
}, 1, 0, directives);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['init', 'check']);
@ -883,7 +887,7 @@ describe('lifecycles', () => {
elementEnd();
}
}, 2);
let Parent = createAfterViewInitComponent('parent', getParentTemplate('comp'), 1, [Comp]);
let Parent = createAfterViewInitComponent('parent', getParentTemplate('comp'), 1, 1, [Comp]);
let ProjectedComp = createAfterViewInitComponent('projected', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
@ -892,7 +896,8 @@ describe('lifecycles', () => {
}, 1);
function createAfterViewInitComponent(
name: string, template: ComponentTemplate<any>, consts: number, directives: any[] = []) {
name: string, template: ComponentTemplate<any>, consts: number, vars: number = 0,
directives: any[] = []) {
return class Component {
val: string = '';
ngAfterViewInit() {
@ -906,6 +911,7 @@ describe('lifecycles', () => {
type: Component,
selectors: [[name]],
consts: consts,
vars: vars,
factory: () => new Component(),
inputs: {val: 'val'},
template: template,
@ -930,7 +936,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp');
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp']);
@ -962,7 +968,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -971,7 +977,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp']);
@ -996,7 +1002,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'parent');
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp', 'parent']);
@ -1018,7 +1024,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', 1);
elementProperty(1, 'val', 2);
}
}, 2, defs);
}, 2, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp1', 'comp2', 'parent1', 'parent2']);
@ -1037,7 +1043,7 @@ describe('lifecycles', () => {
{ element(1, 'projected'); }
elementEnd();
}
}, 2, defs);
}, 2, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['projected', 'comp']);
@ -1067,7 +1073,7 @@ describe('lifecycles', () => {
elementProperty(2, 'val', 2);
elementProperty(3, 'val', 2);
}
}, 4, defs);
}, 4, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['projected1', 'comp1', 'projected2', 'comp2']);
@ -1089,7 +1095,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', bind(ctx.val));
elementProperty(1, 'val', bind(ctx.val));
}
}, 2, [Comp, ProjectedComp]);
}, 2, 2, [Comp, ProjectedComp]);
/**
* <parent [val]="1"></parent>
@ -1104,7 +1110,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', 1);
elementProperty(1, 'val', 2);
}
}, 2, [ParentComp]);
}, 2, 0, [ParentComp]);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['projected1', 'comp1', 'projected2', 'comp2', 'parent1', 'parent2']);
@ -1130,7 +1136,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let i = 2; i < 4; i++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -1142,7 +1148,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, defs);
}, 3, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp2', 'comp3', 'comp1', 'comp4']);
@ -1169,7 +1175,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let i = 2; i < 4; i++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'parent');
}
@ -1181,7 +1187,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, defs);
}, 3, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(
@ -1197,7 +1203,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp');
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(allEvents).toEqual(['comp init', 'comp check']);
@ -1224,7 +1230,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'val', bind(ctx.myVal));
}
}, 1, defs);
}, 1, 1, defs);
const fixture = new ComponentFixture(App);
expect(allEvents).toEqual(['comp init', 'comp check']);
@ -1254,7 +1260,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let i = 2; i < 4; i++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'parent');
}
@ -1266,7 +1272,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, defs);
}, 3, 0, defs);
const fixture = new ComponentFixture(App);
expect(allEvents).toEqual([
@ -1286,7 +1292,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'comp', ['dir', '']);
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['comp', 'init', 'check']);
@ -1298,7 +1304,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['init', 'check']);
@ -1317,10 +1323,10 @@ describe('lifecycles', () => {
projection(0);
}
}, 1);
let Parent = createOnDestroyComponent('parent', getParentTemplate('comp'), 1, [Comp]);
let Parent = createOnDestroyComponent('parent', getParentTemplate('comp'), 1, 1, [Comp]);
function createOnDestroyComponent(
name: string, template: ComponentTemplate<any>, consts: number = 0,
name: string, template: ComponentTemplate<any>, consts: number = 0, vars: number = 0,
directives: any[] = []) {
return class Component {
val: string = '';
@ -1331,6 +1337,7 @@ describe('lifecycles', () => {
selectors: [[name]],
factory: () => new Component(),
consts: consts,
vars: vars,
inputs: {val: 'val'},
template: template,
directives: directives
@ -1342,7 +1349,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Create) {
element(0, 'parent');
}
}, 1, [Parent]);
}, 1, 0, [Parent]);
const ProjectedComp = createOnDestroyComponent('projected', (rf: RenderFlags, ctx: any) => {});
@ -1370,7 +1377,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -1379,7 +1386,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
@ -1395,7 +1402,6 @@ describe('lifecycles', () => {
* <comp [val]="2"></comp>
* % }
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -1404,7 +1410,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 2);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
element(1, 'comp');
@ -1418,7 +1424,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
@ -1444,7 +1450,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'parent');
}
@ -1453,7 +1459,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
@ -1471,7 +1477,6 @@ describe('lifecycles', () => {
* grandparent template: <parent></parent>
* parent template: <comp></comp>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -1480,7 +1485,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'grandparent');
}
@ -1489,7 +1494,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
@ -1517,7 +1522,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (!ctx.skip) {
let rf1 = embeddedViewStart(0, 4);
let rf1 = embeddedViewStart(0, 4, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'comp');
{ element(1, 'projected'); }
@ -1537,7 +1542,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
@ -1566,7 +1571,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 3);
let rf1 = embeddedViewStart(0, 3, 2);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
container(1);
@ -1578,7 +1583,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
if (ctx.condition2) {
let rf2 = embeddedViewStart(0, 1);
let rf2 = embeddedViewStart(0, 1, 1);
if (rf2 & RenderFlags.Create) {
element(0, 'comp');
}
@ -1595,7 +1600,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -1659,7 +1664,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 3);
let rf1 = embeddedViewStart(0, 3, 2);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
container(1);
@ -1671,7 +1676,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let j = 2; j < ctx.len; j++) {
let rf2 = embeddedViewStart(0, 1);
let rf2 = embeddedViewStart(0, 1, 1);
if (rf2 & RenderFlags.Create) {
element(0, 'comp');
}
@ -1688,7 +1693,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -1749,7 +1754,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 5);
let rf1 = embeddedViewStart(0, 5, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
{
@ -1779,7 +1784,7 @@ describe('lifecycles', () => {
}
const ctx: {counter: number} = new App();
renderToHtml(Template, ctx, 1, defs);
renderToHtml(Template, ctx, 1, 0, defs);
const buttons = containerEl.querySelectorAll('button') !;
buttons[0].click();
@ -1787,7 +1792,7 @@ describe('lifecycles', () => {
buttons[1].click();
expect(ctx.counter).toEqual(2);
renderToHtml(Template, {condition: false}, 1, defs);
renderToHtml(Template, {condition: false}, 1, 0, defs);
buttons[0].click();
buttons[1].click();
@ -1801,7 +1806,6 @@ describe('lifecycles', () => {
* <comp></comp>
* % }
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -1810,7 +1814,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp', ['dir', '']);
}
@ -1819,7 +1823,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -1838,7 +1842,6 @@ describe('lifecycles', () => {
* <div directive></div>
* % }
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -1847,7 +1850,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
}
@ -1856,7 +1859,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -1891,7 +1894,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val1', bind(ctx.a));
elementProperty(0, 'publicName', bind(ctx.b));
}
}, 1, [Comp]);
}, 1, 2, [Comp]);
const ProjectedComp = createOnChangesComponent('projected', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
text(0, 'content');
@ -1900,7 +1903,7 @@ describe('lifecycles', () => {
function createOnChangesComponent(
name: string, template: ComponentTemplate<any>, consts: number = 0,
name: string, template: ComponentTemplate<any>, consts: number = 0, vars: number = 0,
directives: any[] = []) {
return class Component {
// @Input() val1: string;
@ -1918,6 +1921,7 @@ describe('lifecycles', () => {
factory: () => new Component(),
features: [NgOnChangesFeature],
consts: consts,
vars: vars,
inputs: {a: 'val1', b: ['publicName', 'val2']}, template,
directives: directives
});
@ -1955,7 +1959,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val1', bind(ctx.val1));
elementProperty(0, 'publicName', bind(ctx.val2));
}
}, 1, defs);
}, 1, 2, defs);
const fixture = new ComponentFixture(App);
events = [];
@ -1984,7 +1988,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val1', bind(ctx.val1));
elementProperty(0, 'publicName', bind(ctx.val2));
}
}, 1, defs);
}, 1, 2, defs);
const fixture = new ComponentFixture(App);
events = [];
@ -2017,7 +2021,7 @@ describe('lifecycles', () => {
elementProperty(1, 'val1', bind(2));
elementProperty(1, 'publicName', bind(2));
}
}, 2, defs);
}, 2, 4, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2044,7 +2048,7 @@ describe('lifecycles', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 2);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -2057,7 +2061,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 1, defs);
}, 1, 0, defs);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -2094,7 +2098,7 @@ describe('lifecycles', () => {
elementProperty(1, 'val1', bind(2));
elementProperty(1, 'publicName', bind(2));
}
}, 2, defs);
}, 2, 4, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2131,7 +2135,7 @@ describe('lifecycles', () => {
elementProperty(3, 'val1', bind(4));
elementProperty(3, 'publicName', bind(4));
}
}, 4, defs);
}, 4, 8, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2152,7 +2156,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val1', bind(1));
elementProperty(0, 'publicName', bind(1));
}
}, 1, defs);
}, 1, 2, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2176,7 +2180,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val1', bind(1));
elementProperty(0, 'publicName', bind(1));
}
}, 1, defs);
}, 1, 2, defs);
const fixture = new ComponentFixture(App);
expect(events).toEqual(['dir - val1=1 val2=1 - changed=[val1,val2]']);
@ -2208,7 +2212,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let j = 2; j < 5; j++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 2);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -2221,7 +2225,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, defs);
}, 3, 4, defs);
const fixture = new ComponentFixture(App);
@ -2259,7 +2263,7 @@ describe('lifecycles', () => {
containerRefreshStart(1);
{
for (let j = 2; j < 5; j++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 2);
if (rf1 & RenderFlags.Create) {
element(0, 'parent');
}
@ -2272,7 +2276,7 @@ describe('lifecycles', () => {
}
containerRefreshEnd();
}
}, 3, defs);
}, 3, 4, defs);
const fixture = new ComponentFixture(App);
@ -2300,7 +2304,7 @@ describe('lifecycles', () => {
beforeEach(() => { events = []; });
function createAllHooksComponent(
name: string, template: ComponentTemplate<any>, consts: number = 0,
name: string, template: ComponentTemplate<any>, consts: number = 0, vars: number = 0,
directives: any[] = []) {
return class Component {
val: string = '';
@ -2321,6 +2325,7 @@ describe('lifecycles', () => {
selectors: [[name]],
factory: () => new Component(),
consts: consts,
vars: vars,
inputs: {val: 'val'}, template,
features: [NgOnChangesFeature],
directives: directives
@ -2344,7 +2349,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', 1);
elementProperty(1, 'val', 2);
}
}, 2, [Comp]);
}, 2, 0, [Comp]);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2372,7 +2377,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'val', bind(ctx.val));
}
}, 1, [Comp]);
}, 1, 1, [Comp]);
/**
* <parent [val]="1"></parent>
@ -2387,7 +2392,7 @@ describe('lifecycles', () => {
elementProperty(0, 'val', 1);
elementProperty(1, 'val', 2);
}
}, 2, [Parent]);
}, 2, 0, [Parent]);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2430,7 +2435,7 @@ describe('lifecycles', () => {
if (rf & RenderFlags.Update) {
elementProperty(1, 'val', bind(ctx.val));
}
}, 2, [View]);
}, 2, 1, [View]);
/**
* <parent [val]="1">
@ -2455,7 +2460,7 @@ describe('lifecycles', () => {
elementProperty(2, 'val', bind(2));
elementProperty(3, 'val', bind(2));
}
}, 4, [Parent, Content]);
}, 4, 4, [Parent, Content]);
const fixture = new ComponentFixture(App);
expect(events).toEqual([
@ -2514,7 +2519,7 @@ describe('lifecycles', () => {
function conditionTpl(rf: RenderFlags, ctx: Cmpt) {
if (rf & RenderFlags.Create) {
template(0, null, 0, null, [AttributeMarker.SelectOnly, 'onDestroyDirective']);
template(0, null, 0, 1, null, [AttributeMarker.SelectOnly, 'onDestroyDirective']);
}
}
@ -2525,7 +2530,7 @@ describe('lifecycles', () => {
*/
function cmptTpl(rf: RenderFlags, cmpt: Cmpt) {
if (rf & RenderFlags.Create) {
template(0, conditionTpl, 1, null, [AttributeMarker.SelectOnly, 'ngIf']);
template(0, conditionTpl, 1, 1, null, [AttributeMarker.SelectOnly, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(cmpt.showing));
@ -2539,6 +2544,7 @@ describe('lifecycles', () => {
factory: () => new Cmpt(),
selectors: [['cmpt']],
consts: 1,
vars: 1,
template: cmptTpl,
directives: [NgIf, OnDestroyDirective]
});

31
packages/core/test/render3/listeners_spec.ts
View File

@ -27,6 +27,7 @@ describe('event listeners', () => {
type: MyComp,
selectors: [['comp']],
consts: 2,
vars: 0,
/** <button (click)="onClick()"> Click me </button> */
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
@ -67,6 +68,7 @@ describe('event listeners', () => {
selectors: [['prevent-default-comp']],
factory: () => new PreventDefaultComp(),
consts: 2,
vars: 0,
/** <button (click)="onClick($event)">Click</button> */
template: (rf: RenderFlags, ctx: PreventDefaultComp) => {
if (rf & RenderFlags.Create) {
@ -200,7 +202,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
if (ctx.showing) {
if (embeddedViewStart(1, 2)) {
if (embeddedViewStart(1, 2, 0)) {
elementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
@ -250,6 +252,7 @@ describe('event listeners', () => {
selectors: [['app-comp']],
factory: () => new AppComp(),
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -258,7 +261,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
if (ctx.showing) {
if (embeddedViewStart(0, 2)) {
if (embeddedViewStart(0, 2, 0)) {
elementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
@ -310,6 +313,7 @@ describe('event listeners', () => {
selectors: [['app-comp']],
factory: () => new AppComp(),
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -318,7 +322,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
for (let i = 0; i < ctx.buttons; i++) {
if (embeddedViewStart(0, 2)) {
if (embeddedViewStart(0, 2, 0)) {
elementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(i); });
@ -372,6 +376,7 @@ describe('event listeners', () => {
selectors: [['app-comp']],
factory: () => new AppComp(),
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -380,7 +385,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
for (let i = 0; i < ctx.buttons; i++) {
if (embeddedViewStart(1, 2)) {
if (embeddedViewStart(1, 2, 0)) {
elementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(i); });
@ -442,7 +447,7 @@ describe('event listeners', () => {
}
}
renderToHtml(Template, {}, 2, [HostListenerDir]);
renderToHtml(Template, {}, 2, 0, [HostListenerDir]);
const button = containerEl.querySelector('button') !;
button.click();
expect(events).toEqual(['click!']);
@ -469,7 +474,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
text(0, 'Hello');
container(1);
@ -478,7 +483,7 @@ describe('event listeners', () => {
containerRefreshStart(1);
{
if (ctx.button) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
{
@ -533,7 +538,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 3);
let rf1 = embeddedViewStart(0, 3, 0);
if (rf1 & RenderFlags.Create) {
text(0, 'Hello');
element(1, 'comp');
@ -547,7 +552,7 @@ describe('event listeners', () => {
}
const ctx = {showing: true};
renderToHtml(Template, ctx, 1, [MyComp]);
renderToHtml(Template, ctx, 1, 0, [MyComp]);
const buttons = containerEl.querySelectorAll('button') !;
buttons[0].click();
@ -558,7 +563,7 @@ describe('event listeners', () => {
// the child view listener should be removed when the parent view is removed
ctx.showing = false;
renderToHtml(Template, ctx, 1, [MyComp]);
renderToHtml(Template, ctx, 1, 0, [MyComp]);
buttons[0].click();
buttons[1].click();
expect(comps[0] !.counter).toEqual(1);
@ -586,7 +591,7 @@ describe('event listeners', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 3);
let rf1 = embeddedViewStart(0, 3, 0);
if (rf1 & RenderFlags.Create) {
text(0, 'Hello');
container(1);
@ -596,7 +601,7 @@ describe('event listeners', () => {
containerRefreshStart(1);
{
if (ctx.sub1) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
{
@ -612,7 +617,7 @@ describe('event listeners', () => {
containerRefreshStart(2);
{
if (ctx.sub2) {
let rf1 = embeddedViewStart(0, 2);
let rf1 = embeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
{

46
packages/core/test/render3/outputs_spec.ts
View File

@ -28,6 +28,7 @@ describe('outputs', () => {
selectors: [['button-toggle']],
template: function(rf: RenderFlags, ctx: any) {},
consts: 0,
vars: 0,
factory: () => buttonToggle = new ButtonToggle(),
outputs: {change: 'change', resetStream: 'reset'}
});
@ -54,6 +55,7 @@ describe('outputs', () => {
type: DestroyComp,
selectors: [['destroy-comp']],
consts: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {},
factory: () => destroyComp = new DestroyComp()
});
@ -88,7 +90,7 @@ describe('outputs', () => {
let counter = 0;
const ctx = {onChange: () => counter++};
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
@ -113,7 +115,7 @@ describe('outputs', () => {
let counter = 0;
let resetCounter = 0;
const ctx = {onChange: () => counter++, onReset: () => resetCounter++};
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
@ -135,7 +137,7 @@ describe('outputs', () => {
}
const ctx = {counter: 0};
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(ctx.counter).toEqual(1);
@ -151,7 +153,6 @@ describe('outputs', () => {
* <button-toggle (change)="onChange()"></button-toggle>
* % }
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -160,7 +161,7 @@ describe('outputs', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button-toggle');
{
@ -177,13 +178,13 @@ describe('outputs', () => {
let counter = 0;
const ctx = {onChange: () => counter++, condition: true};
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
ctx.condition = false;
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
@ -198,7 +199,6 @@ describe('outputs', () => {
* % }
* % }
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
@ -207,14 +207,14 @@ describe('outputs', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
container(0);
}
containerRefreshStart(0);
{
if (ctx.condition2) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button-toggle');
{
@ -235,13 +235,13 @@ describe('outputs', () => {
let counter = 0;
const ctx = {onChange: () => counter++, condition: true, condition2: true};
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
ctx.condition = false;
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
@ -263,7 +263,7 @@ describe('outputs', () => {
containerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 4);
let rf1 = embeddedViewStart(0, 4, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
{
@ -288,7 +288,7 @@ describe('outputs', () => {
let clickCounter = 0;
let changeCounter = 0;
const ctx = {condition: true, onChange: () => changeCounter++, onClick: () => clickCounter++};
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
buttonToggle !.change.next();
expect(changeCounter).toEqual(1);
@ -300,7 +300,7 @@ describe('outputs', () => {
expect(clickCounter).toEqual(1);
ctx.condition = false;
renderToHtml(Template, ctx, 1, deps);
renderToHtml(Template, ctx, 1, 0, deps);
expect(destroyComp !.events).toEqual(['destroy']);
@ -322,7 +322,7 @@ describe('outputs', () => {
}
let counter = 0;
renderToHtml(Template, {counter, onClick: () => counter++}, 1, deps);
renderToHtml(Template, {counter, onClick: () => counter++}, 1, 0, deps);
// To match current Angular behavior, the click listener is still
// set up in addition to any matching outputs.
@ -347,7 +347,7 @@ describe('outputs', () => {
}
let counter = 0;
renderToHtml(Template, {counter, onChange: () => counter++}, 1, deps);
renderToHtml(Template, {counter, onChange: () => counter++}, 1, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
@ -387,10 +387,10 @@ describe('outputs', () => {
let counter = 0;
const deps = [ButtonToggle, OtherChangeDir];
renderToHtml(Template, {counter, onChange: () => counter++, change: true}, 1, deps);
renderToHtml(Template, {counter, onChange: () => counter++, change: true}, 1, 1, deps);
expect(otherDir !.change).toEqual(true);
renderToHtml(Template, {counter, onChange: () => counter++, change: false}, 1, deps);
renderToHtml(Template, {counter, onChange: () => counter++, change: false}, 1, 1, deps);
expect(otherDir !.change).toEqual(false);
buttonToggle !.change.next();
@ -421,7 +421,7 @@ describe('outputs', () => {
containerRefreshStart(2);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button-toggle');
{
@ -431,7 +431,7 @@ describe('outputs', () => {
}
embeddedViewEnd();
} else {
if (embeddedViewStart(1, 1)) {
if (embeddedViewStart(1, 1, 0)) {
elementStart(0, 'div', ['otherDir', '']);
{
listener('change', function() { return ctx.onChange(); });
@ -447,13 +447,13 @@ describe('outputs', () => {
let counter = 0;
const ctx = {condition: true, onChange: () => counter++, onClick: () => {}};
renderToHtml(Template, ctx, 3, deps);
renderToHtml(Template, ctx, 3, 0, deps);
buttonToggle !.change.next();
expect(counter).toEqual(1);
ctx.condition = false;
renderToHtml(Template, ctx, 3, deps);
renderToHtml(Template, ctx, 3, 0, deps);
expect(counter).toEqual(1);
otherDir !.changeStream.next();

44
packages/core/test/render3/pipe_spec.ts
View File

@ -45,7 +45,7 @@ describe('pipe', () => {
}
person.init('bob', null);
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bob state:0');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:0');
});
it('should throw if pipe is not found', () => {
@ -57,7 +57,7 @@ describe('pipe', () => {
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, ctx.value), ''));
}
}, 2, [], pipes);
}, 2, 3, [], pipes);
expect(() => {
const fixture = new ComponentFixture(App);
@ -103,7 +103,7 @@ describe('pipe', () => {
directive = loadDirective(0);
}
}
renderToHtml(Template, 'a', 2, [MyDir], [DoublePipe]);
renderToHtml(Template, 'a', 2, 3, [MyDir], [DoublePipe]);
expect(directive !.dirProp).toEqual('aa');
});
@ -120,7 +120,7 @@ describe('pipe', () => {
}
person.init('value', new Address('two'));
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('value one two default');
expect(renderToHtml(Template, person, 2, 5, null, pipes)).toEqual('value one two default');
});
it('should support calling pipes with different number of arguments', () => {
@ -138,7 +138,7 @@ describe('pipe', () => {
}
person.init('value', null);
expect(renderToHtml(Template, person, 3, null, pipes)).toEqual('value a b default 0 1 2');
expect(renderToHtml(Template, person, 3, 10, null, pipes)).toEqual('value a b default 0 1 2');
});
it('should do nothing when no change', () => {
@ -164,11 +164,11 @@ describe('pipe', () => {
}
}
renderToHtml(Template, person, 2, null, [IdentityPipe], rendererFactory2);
renderToHtml(Template, person, 2, 3, null, [IdentityPipe], rendererFactory2);
expect(renderLog.log).toEqual(['someProp=Megatron']);
renderLog.clear();
renderToHtml(Template, person, 2, null, pipes, rendererFactory2);
renderToHtml(Template, person, 2, 3, null, pipes, rendererFactory2);
expect(renderLog.log).toEqual([]);
});
@ -186,18 +186,18 @@ describe('pipe', () => {
// change from undefined -> null
person.name = null;
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('null state:0');
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('null state:0');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('null state:0');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('null state:0');
// change from null -> some value
person.name = 'bob';
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bob state:1');
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bob state:1');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:1');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:1');
// change from some value -> some other value
person.name = 'bart';
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bart state:2');
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bart state:2');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bart state:2');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bart state:2');
});
});
@ -214,8 +214,8 @@ describe('pipe', () => {
}
person.name = 'bob';
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bob state:0');
expect(renderToHtml(Template, person, 2, null, pipes)).toEqual('bob state:1');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:0');
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:1');
});
it('should not cache impure pipes', () => {
@ -236,7 +236,7 @@ describe('pipe', () => {
containerRefreshStart(4);
{
for (let i of [1, 2]) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'div');
@ -256,7 +256,7 @@ describe('pipe', () => {
}
const pipeInstances: CountingImpurePipe[] = [];
renderToHtml(Template, {}, 5, null, pipes, rendererFactory2);
renderToHtml(Template, {}, 5, 6, null, pipes, rendererFactory2);
expect(pipeInstances.length).toEqual(4);
expect(pipeInstances[0]).toBeAnInstanceOf(CountingImpurePipe);
expect(pipeInstances[1]).toBeAnInstanceOf(CountingImpurePipe);
@ -291,7 +291,7 @@ describe('pipe', () => {
containerRefreshStart(0);
{
if (person.age > 20) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 3);
{
if (rf1 & RenderFlags.Create) {
text(0);
@ -310,20 +310,20 @@ describe('pipe', () => {
const pipes = [PipeWithOnDestroy];
person.age = 25;
renderToHtml(Template, person, 1, null, pipes);
renderToHtml(Template, person, 1, 0, null, pipes);
person.age = 15;
renderToHtml(Template, person, 1, null, pipes);
renderToHtml(Template, person, 1, 0, null, pipes);
expect(log).toEqual(['pipeWithOnDestroy - ngOnDestroy']);
log = [];
person.age = 30;
renderToHtml(Template, person, 1, null, pipes);
renderToHtml(Template, person, 1, 0, null, pipes);
expect(log).toEqual([]);
log = [];
person.age = 10;
renderToHtml(Template, person, 1, null, pipes);
renderToHtml(Template, person, 1, 0, null, pipes);
expect(log).toEqual(['pipeWithOnDestroy - ngOnDestroy']);
});
});

45
packages/core/test/render3/properties_spec.ts
View File

@ -25,7 +25,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id));
}
}, 1);
}, 1, 1);
const fixture = new ComponentFixture(App);
fixture.component.id = 'testId';
@ -67,7 +67,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', interpolation1('_', ctx.id, '_'));
}
}, 1);
}, 1, 1);
const fixture = new ComponentFixture(App);
fixture.component.id = 'testId';
@ -88,6 +88,7 @@ describe('elementProperty', () => {
selectors: [['host-binding-comp']],
factory: () => new HostBindingComp(),
consts: 0,
vars: 0,
hostBindings: (dirIndex: number, elIndex: number) => {
const instance = loadDirective(dirIndex) as HostBindingComp;
elementProperty(elIndex, 'id', bind(instance.id));
@ -176,7 +177,7 @@ describe('elementProperty', () => {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
elementProperty(0, 'id', bind(ctx.id));
}
}, 2, deps);
}, 2, 2, deps);
const fixture = new ComponentFixture(App);
fixture.component.isDisabled = true;
@ -207,7 +208,7 @@ describe('elementProperty', () => {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
elementProperty(0, 'id', bind(ctx.id));
}
}, 2, deps);
}, 2, 2, deps);
const fixture = new ComponentFixture(App);
@ -235,6 +236,7 @@ describe('elementProperty', () => {
type: Comp,
selectors: [['comp']],
consts: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {},
factory: () => comp = new Comp(),
inputs: {id: 'id'}
@ -249,7 +251,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id));
}
}, 1, [Comp]);
}, 1, 1, [Comp]);
const fixture = new ComponentFixture(App);
fixture.component.id = 1;
@ -275,7 +277,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
}
}, 2, deps);
}, 2, 1, deps);
const fixture = new ComponentFixture(App);
fixture.component.isDisabled = true;
@ -305,7 +307,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id));
}
}, 2, deps);
}, 2, 1, deps);
const fixture = new ComponentFixture(App);
let counter = 0;
@ -345,7 +347,7 @@ describe('elementProperty', () => {
containerRefreshStart(2);
{
if (ctx.condition) {
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 1);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'button');
{ text(1, 'Click me too'); }
@ -356,7 +358,7 @@ describe('elementProperty', () => {
}
embeddedViewEnd();
} else {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 1);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button', ['otherDir', '']);
{ text(1, 'Click me too'); }
@ -370,7 +372,7 @@ describe('elementProperty', () => {
}
containerRefreshEnd();
}
}, 3, deps);
}, 3, 1, deps);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -434,7 +436,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDir', '']);
}
}, 1, deps);
}, 1, 0, deps);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual(`<div mydir="" role="button"></div>`);
@ -451,7 +453,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'role', bind(ctx.role));
}
}, 1, deps);
}, 1, 1, deps);
const fixture = new ComponentFixture(App);
fixture.component.role = 'listbox';
@ -471,7 +473,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']);
}
}, 1, deps);
}, 1, 0, deps);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual(`<div mydir="" mydirb="" role="button"></div>`);
@ -486,7 +488,7 @@ describe('elementProperty', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
}
}, 1, deps);
}, 1, 0, deps);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual(`<div dir="rtl" mydir="" role="button"></div>`);
@ -503,7 +505,7 @@ describe('elementProperty', () => {
{ listener('change', () => ctx.onChange()); }
elementEnd();
}
}, 1, deps);
}, 1, 0, deps);
const fixture = new ComponentFixture(App);
let counter = 0;
@ -527,7 +529,7 @@ describe('elementProperty', () => {
element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
element(1, 'div', ['role', 'listbox', 'myDirB', '']);
}
}, 2, deps);
}, 2, 0, deps);
const fixture = new ComponentFixture(App);
expect(fixture.html)
@ -557,13 +559,13 @@ describe('elementProperty', () => {
containerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDirB', '']);
}
embeddedViewEnd();
} else {
let rf2 = embeddedViewStart(1, 1);
let rf2 = embeddedViewStart(1, 1, 0);
if (rf2 & RenderFlags.Create) {
element(0, 'div', ['role', 'menu']);
}
@ -572,7 +574,7 @@ describe('elementProperty', () => {
}
containerRefreshEnd();
}
}, 2, deps);
}, 2, 0, deps);
const fixture = new ComponentFixture(App);
fixture.component.condition = true;
@ -596,6 +598,7 @@ describe('elementProperty', () => {
type: Comp,
selectors: [['comp']],
consts: 3,
vars: 1,
/** <div role="button" dir #dir="myDir"></div> {{ dir.role }} */
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
@ -625,7 +628,7 @@ describe('elementProperty', () => {
containerRefreshStart(0);
{
for (let i = 0; i < 2; i++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
}
@ -634,7 +637,7 @@ describe('elementProperty', () => {
}
containerRefreshEnd();
}
}, 1, [Comp]);
}, 1, 0, [Comp]);
const fixture = new ComponentFixture(App);
expect(fixture.html)

40
packages/core/test/render3/pure_function_spec.ts
View File

@ -24,6 +24,7 @@ describe('array literals', () => {
selectors: [['my-comp']],
factory: function MyComp_Factory() { return myComp = new MyComp(); },
consts: 0,
vars: 0,
template: function MyComp_Template(rf: RenderFlags, ctx: MyComp) {},
inputs: {names: 'names'}
});
@ -42,7 +43,7 @@ describe('array literals', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction1(1, e0_ff, ctx.customName)));
}
}, 1, directives);
}, 1, 3, directives);
const fixture = new ComponentFixture(App);
fixture.component.customName = 'Carson';
@ -86,12 +87,12 @@ describe('array literals', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, IfTemplate, 1, null, [AttributeMarker.SelectOnly, 'ngIf']);
template(0, IfTemplate, 1, 3, null, [AttributeMarker.SelectOnly, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
}
}, 1, [MyComp, NgIf]);
}, 1, 1, [MyComp, NgIf]);
const fixture = new ComponentFixture(App);
fixture.component.showing = true;
@ -115,6 +116,7 @@ describe('array literals', () => {
selectors: [['many-prop-comp']],
factory: function ManyPropComp_Factory() { return manyPropComp = new ManyPropComp(); },
consts: 0,
vars: 0,
template: function ManyPropComp_Template(rf: RenderFlags, ctx: ManyPropComp) {},
inputs: {names1: 'names1', names2: 'names2'}
});
@ -135,7 +137,7 @@ describe('array literals', () => {
elementProperty(0, 'names1', bind(pureFunction1(2, e0_ff, ctx.customName)));
elementProperty(0, 'names2', bind(pureFunction1(4, e0_ff_1, ctx.customName2)));
}
}, 1, [ManyPropComp]);
}, 1, 6, [ManyPropComp]);
const fixture = new ComponentFixture(App);
fixture.component.customName = 'Carson';
@ -170,6 +172,7 @@ describe('array literals', () => {
selectors: [['parent-comp']],
factory: () => new ParentComp(),
consts: 1,
vars: 3,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'my-comp');
@ -189,7 +192,7 @@ describe('array literals', () => {
element(0, 'parent-comp');
element(1, 'parent-comp');
}
}, 2, [ParentComp]);
}, 2, 0, [ParentComp]);
const fixture = new ComponentFixture(App);
const firstArray = myComps[0].names;
@ -216,7 +219,7 @@ describe('array literals', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction2(1, e0_ff, ctx.customName, ctx.customName2)));
}
}, 1, directives);
}, 1, 4, directives);
const fixture = new ComponentFixture(App);
fixture.component.customName = 'Carson';
@ -304,7 +307,7 @@ describe('array literals', () => {
}
}
renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 6, directives);
renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 6, 45, directives);
expect(f3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
expect(f4Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
expect(f5Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
@ -312,7 +315,8 @@ describe('array literals', () => {
expect(f7Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
expect(f8Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
renderToHtml(Template, ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1', 'i1'], 6, directives);
renderToHtml(
Template, ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1', 'i1'], 6, 45, directives);
expect(f3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f1', 'g1', 'h1']);
expect(f4Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'g1', 'h1']);
expect(f5Comp !.names).toEqual(['a', 'b', 'c', 'd1', 'e1', 'f1', 'g1', 'h1']);
@ -320,7 +324,8 @@ describe('array literals', () => {
expect(f7Comp !.names).toEqual(['a', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']);
expect(f8Comp !.names).toEqual(['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']);
renderToHtml(Template, ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h2', 'i1'], 6, directives);
renderToHtml(
Template, ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h2', 'i1'], 6, 45, directives);
expect(f3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f1', 'g1', 'h2']);
expect(f4Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'g1', 'h2']);
expect(f5Comp !.names).toEqual(['a', 'b', 'c', 'd1', 'e1', 'f1', 'g1', 'h2']);
@ -335,7 +340,6 @@ describe('array literals', () => {
v8: any) => ['start', v0, v1, v2, v3, v4, v5, v6, v7, v8, 'end'];
const e0_ff_1 = (v: any) => `modified_${v}`;
renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, directives);
/**
* <my-comp [names]="['start', v0, v1, v2, v3, `modified_${v4}`, v5, v6, v7, v8, 'end']">
* </my-comp>
@ -352,16 +356,17 @@ describe('array literals', () => {
}
}
renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, 13, directives);
expect(myComp !.names).toEqual([
'start', 'a', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
]);
renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, directives);
renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, 13, directives);
expect(myComp !.names).toEqual([
'start', 'a1', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
]);
renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e5', 'f', 'g', 'h', 'i'], 1, directives);
renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e5', 'f', 'g', 'h', 'i'], 1, 13, directives);
expect(myComp !.names).toEqual([
'start', 'a1', 'b', 'c', 'd', 'modified_e5', 'f', 'g', 'h', 'i', 'end'
]);
@ -380,6 +385,7 @@ describe('object literals', () => {
selectors: [['object-comp']],
factory: function ObjectComp_Factory() { return objectComp = new ObjectComp(); },
consts: 0,
vars: 1,
template: function ObjectComp_Template(rf: RenderFlags, ctx: ObjectComp) {},
inputs: {config: 'config'}
});
@ -398,7 +404,7 @@ describe('object literals', () => {
if (rf & RenderFlags.Update) {
elementProperty(0, 'config', bind(pureFunction1(1, e0_ff, ctx.name)));
}
}, 1, defs);
}, 1, 3, defs);
const fixture = new ComponentFixture(App);
fixture.component.name = 'slide';
@ -438,7 +444,7 @@ describe('object literals', () => {
5, e0_ff, ctx.name,
pureFunction1(3, e0_ff_1, pureFunction1(1, e0_ff_2, ctx.duration)))));
}
}, 1, defs);
}, 1, 8, defs);
const fixture = new ComponentFixture(App);
fixture.component.name = 'slide';
@ -504,7 +510,7 @@ describe('object literals', () => {
containerRefreshStart(0);
{
for (let i = 0; i < 2; i++) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'object-comp');
objectComps.push(loadDirective(0));
@ -525,12 +531,12 @@ describe('object literals', () => {
const e0_ff = (v1: any, v2: any) => { return {opacity: v1, duration: v2}; };
const configs = [{opacity: 0, duration: 500}, {opacity: 1, duration: 600}];
renderToHtml(Template, {configs}, 1, defs);
renderToHtml(Template, {configs}, 1, 4, defs);
expect(objectComps[0].config).toEqual({opacity: 0, duration: 500});
expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
configs[0].duration = 1000;
renderToHtml(Template, {configs}, 1, defs);
renderToHtml(Template, {configs}, 1, 4, defs);
expect(objectComps[0].config).toEqual({opacity: 0, duration: 1000});
expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
});

145
packages/core/test/render3/query_spec.ts
View File

@ -77,7 +77,7 @@ describe('query', () => {
child2 = loadDirective(1);
}
},
2, [Child], [],
4, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, Child, false);
@ -115,7 +115,7 @@ describe('query', () => {
elToQuery = loadElement(1).native;
}
},
1, [Child], [],
2, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, Child, false, QUERY_READ_ELEMENT_REF);
@ -152,7 +152,7 @@ describe('query', () => {
elementEnd();
}
},
1, [Child, OtherChild], [],
2, 0, [Child, OtherChild], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, Child, false, OtherChild);
@ -185,7 +185,7 @@ describe('query', () => {
element(1, 'div', ['child', '']);
}
},
1, [Child, OtherChild], [],
2, 0, [Child, OtherChild], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, Child, false, OtherChild);
@ -223,7 +223,7 @@ describe('query', () => {
element(3, 'div');
}
},
3, [], [],
4, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_FROM_NODE);
@ -260,7 +260,7 @@ describe('query', () => {
element(5, 'div');
}
},
4, [], [],
6, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_FROM_NODE);
@ -309,7 +309,7 @@ describe('query', () => {
el2ToQuery = loadElement(4).native;
}
},
5, [], [],
6, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE);
@ -346,7 +346,7 @@ describe('query', () => {
element(3, 'div');
}
},
3, [], [],
4, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
@ -382,7 +382,7 @@ describe('query', () => {
elementContainerEnd();
}
},
2, [], [],
3, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_ELEMENT_REF);
@ -447,7 +447,7 @@ describe('query', () => {
elementContainerEnd();
}
},
3, [], [],
5, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_ELEMENT_REF);
@ -482,7 +482,7 @@ describe('query', () => {
element(1, 'div', null, ['foo', '']);
}
},
2, [], [],
3, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_CONTAINER_REF);
@ -510,10 +510,10 @@ describe('query', () => {
'cmpt',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, null, 0, null, null, ['foo', '']);
template(1, null, 0, 0, null, null, ['foo', '']);
}
},
2, [], [],
3, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_CONTAINER_REF);
@ -542,10 +542,10 @@ describe('query', () => {
'cmpt',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, null, 0, null, null, ['foo', '']);
template(1, null, 0, 0, null, null, ['foo', '']);
}
},
2, [], [],
3, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
@ -577,10 +577,10 @@ describe('query', () => {
'cmpt',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, null, 0, null, null, ['foo', '']);
template(1, null, 0, 0, null, null, ['foo', '']);
}
},
2, [], [],
3, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], undefined, QUERY_READ_FROM_NODE);
@ -609,10 +609,10 @@ describe('query', () => {
'cmpt',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, null, 0, null, null, ['foo', '']);
template(1, null, 0, 0, null, null, ['foo', '']);
}
},
2, [], [],
3, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_TEMPLATE_REF);
@ -649,7 +649,7 @@ describe('query', () => {
childInstance = loadDirective(0);
}
},
2, [Child], [],
3, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -675,6 +675,7 @@ describe('query', () => {
selectors: [['child']],
factory: () => childInstance = new Child(),
consts: 0,
vars: 0,
template: (rf: RenderFlags, ctx: Child) => {},
exportAs: 'child'
});
@ -693,7 +694,7 @@ describe('query', () => {
element(1, 'child', null, ['foo', 'child']);
}
},
2, [Child], [],
3, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -731,7 +732,7 @@ describe('query', () => {
childInstance = loadDirective(0);
}
},
2, [Child], [],
3, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -771,7 +772,7 @@ describe('query', () => {
child2Instance = loadDirective(1);
}
},
3, [Child1, Child2], [],
4, 0, [Child1, Child2], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
@ -810,7 +811,7 @@ describe('query', () => {
childInstance = loadDirective(0);
}
},
3, [Child], [],
5, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -854,7 +855,7 @@ describe('query', () => {
div = loadElement(1).native;
}
},
2, [Child], [],
3, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], undefined, QUERY_READ_ELEMENT_REF);
@ -892,7 +893,7 @@ describe('query', () => {
childInstance = loadDirective(0);
}
},
3, [Child], [],
4, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE);
@ -926,7 +927,7 @@ describe('query', () => {
element(1, 'div', ['foo', '']);
}
},
2, [Child], [],
3, 0, [Child], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, Child);
@ -994,13 +995,13 @@ describe('query', () => {
'cmpt',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, null, ['ngIf', '']);
template(1, Cmpt_Template_1, 2, 0, null, ['ngIf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngIf', bind(ctx.value));
}
},
2, [NgIf], [],
3, 1, [NgIf], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1051,10 +1052,11 @@ describe('query', () => {
type: Cmpt,
factory: () => new Cmpt(),
selectors: [['my-app']],
consts: 2,
consts: 3,
vars: 1,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, null, ['ngForOf', '']);
template(1, Cmpt_Template_1, 2, 1, null, ['ngForOf', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngForOf', bind(ctx.value));
@ -1132,10 +1134,12 @@ describe('query', () => {
'cmpt',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, null, null, ['tpl1', ''], templateRefExtractor);
template(
1, Cmpt_Template_1, 2, 1, null, null, ['tpl1', ''], templateRefExtractor);
element(3, 'div', ['id', 'middle'], ['foo', '']);
template(5, Cmpt_Template_5, 2, null, null, ['tpl2', ''], templateRefExtractor);
template(7, null, 0, null, [AttributeMarker.SelectOnly, 'vc']);
template(
5, Cmpt_Template_5, 2, 1, null, null, ['tpl2', ''], templateRefExtractor);
template(7, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']);
}
if (rf & RenderFlags.Update) {
@ -1144,7 +1148,7 @@ describe('query', () => {
}
},
6, [ViewContainerManipulatorDirective], [],
7, 0, [ViewContainerManipulatorDirective], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1224,13 +1228,14 @@ describe('query', () => {
type: Cmpt,
factory: () => new Cmpt(),
selectors: [['my-app']],
consts: 4,
consts: 5,
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
let tmp: any;
if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, null, [], ['tpl', ''], templateRefExtractor);
template(3, null, 0, null, [AttributeMarker.SelectOnly, 'vc']);
template(4, null, 0, null, [AttributeMarker.SelectOnly, 'vc']);
template(1, Cmpt_Template_1, 2, 1, null, [], ['tpl', ''], templateRefExtractor);
template(3, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']);
template(4, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']);
}
if (rf & RenderFlags.Update) {
@ -1291,7 +1296,8 @@ describe('query', () => {
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
consts: 4,
consts: 5,
vars: 1,
/**
* <ng-template #tpl><span #foo id="from_tpl"></span></ng-template>
* <ng-template [ngTemplateOutlet]="show ? tpl : null"></ng-template>
@ -1299,9 +1305,9 @@ describe('query', () => {
template: (rf: RenderFlags, myApp: MyApp) => {
if (rf & RenderFlags.Create) {
template(
1, MyApp_Template_1, 2, undefined, undefined, ['tpl', ''],
1, MyApp_Template_1, 2, 0, undefined, undefined, ['tpl', ''],
templateRefExtractor);
template(3, null, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
template(3, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
}
if (rf & RenderFlags.Update) {
const tplRef = reference(2);
@ -1361,7 +1367,7 @@ describe('query', () => {
containerRefreshStart(1);
{
if (ctx.exp) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'div', null, ['foo', '']);
@ -1374,7 +1380,7 @@ describe('query', () => {
containerRefreshEnd();
}
},
1, [], [],
2, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1426,7 +1432,7 @@ describe('query', () => {
containerRefreshStart(3);
{
if (ctx.exp) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'div', null, ['foo', '']);
@ -1439,7 +1445,7 @@ describe('query', () => {
containerRefreshEnd();
}
},
5, [], [],
6, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1493,7 +1499,7 @@ describe('query', () => {
containerRefreshStart(1);
{
if (ctx.exp1) {
let rf0 = embeddedViewStart(0, 2);
let rf0 = embeddedViewStart(0, 2, 0);
{
if (rf0 & RenderFlags.Create) {
element(0, 'div', null, ['foo', '']);
@ -1503,7 +1509,7 @@ describe('query', () => {
embeddedViewEnd();
}
if (ctx.exp2) {
let rf1 = embeddedViewStart(1, 2);
let rf1 = embeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'span', null, ['foo', '']);
@ -1516,7 +1522,7 @@ describe('query', () => {
containerRefreshEnd();
}
},
1, [], [],
2, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1566,7 +1572,7 @@ describe('query', () => {
containerRefreshStart(1);
{
if (ctx.exp1) {
let rf0 = embeddedViewStart(0, 3);
let rf0 = embeddedViewStart(0, 3, 0);
{
if (rf0 & RenderFlags.Create) {
element(0, 'div', null, ['foo', '']);
@ -1577,7 +1583,7 @@ describe('query', () => {
containerRefreshStart(2);
{
if (ctx.exp2) {
let rf2 = embeddedViewStart(0, 2);
let rf2 = embeddedViewStart(0, 2, 0);
{
if (rf2) {
element(0, 'span', null, ['foo', '']);
@ -1596,7 +1602,7 @@ describe('query', () => {
containerRefreshEnd();
}
},
1, [], [],
2, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1651,7 +1657,7 @@ describe('query', () => {
containerRefreshStart(2);
{
if (ctx.exp) {
let rf0 = embeddedViewStart(0, 4);
let rf0 = embeddedViewStart(0, 4, 0);
{
if (rf0 & RenderFlags.Create) {
elementStart(0, 'div', null, ['foo', '']);
@ -1665,7 +1671,7 @@ describe('query', () => {
containerRefreshEnd();
}
},
3, [], [],
5, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1746,7 +1752,7 @@ describe('query', () => {
element(1, 'div', null, ['foo', '']);
}
},
1, [], [],
2, 0, [], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], false, QUERY_READ_FROM_NODE);
@ -1764,7 +1770,7 @@ describe('query', () => {
containerRefreshStart(0);
{
if (condition) {
let rf1 = embeddedViewStart(1, 1);
let rf1 = embeddedViewStart(1, 1, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'some-component-with-query');
@ -1782,7 +1788,8 @@ describe('query', () => {
* %}
*/
let condition = true;
const t = new TemplateFixture(createTemplate, updateTemplate, 1, [SimpleComponentWithQuery]);
const t =
new TemplateFixture(createTemplate, updateTemplate, 1, 0, [SimpleComponentWithQuery]);
expect(t.html).toEqual('<some-component-with-query><div></div></some-component-with-query>');
expect((queryInstance !.changes as EventEmitter<any>).closed).toBeFalsy();
@ -1820,11 +1827,12 @@ describe('query', () => {
'app',
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(1, AppComponent_Template_1, 1, null, [AttributeMarker.SelectOnly, 'someDir']);
template(
1, AppComponent_Template_1, 1, 0, null, [AttributeMarker.SelectOnly, 'someDir']);
element(2, 'div', null, ['foo', '']);
}
},
3, [SomeDir], [],
4, 0, [SomeDir], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@ -1885,6 +1893,7 @@ describe('query', () => {
factory: () => new ShallowComp(),
template: function(rf: RenderFlags, ctx: any) {},
consts: 0,
vars: 0,
contentQueries:
() => { registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE)); },
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
@ -1908,7 +1917,7 @@ describe('query', () => {
{ element(1, 'span', null, ['foo', '']); }
elementEnd();
}
}, 3, [WithContentDirective]);
}, 3, 0, [WithContentDirective]);
const fixture = new ComponentFixture(AppComponent);
expect(withContentInstance !.foos.length)
@ -1934,7 +1943,7 @@ describe('query', () => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['with-content', ''], ['foo', '']);
}
}, 2, [WithContentDirective]);
}, 2, 0, [WithContentDirective]);
const fixture = new ComponentFixture(AppComponent);
expect(withContentInstance !.foos.length)
@ -1956,13 +1965,13 @@ describe('query', () => {
const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'shallow-comp');
{ template(1, IfTemplate, 2, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
{ template(1, IfTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
elementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngIf', bind(ctx.showing));
}
}, 2, [ShallowComp, NgIf]);
}, 2, 1, [ShallowComp, NgIf]);
const fixture = new ComponentFixture(AppComponent);
const qList = shallowCompInstance !.foos;
@ -1999,7 +2008,7 @@ describe('query', () => {
element(4, 'div', ['id', 'after'], ['bar', '']);
}
},
5, [WithContentDirective], [],
6, 0, [WithContentDirective], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
@ -2039,7 +2048,7 @@ describe('query', () => {
element(4, 'div', null, ['foo', '']);
}
},
5, [WithContentDirective], [],
6, 0, [WithContentDirective], [],
function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
query(0, ['bar'], true, QUERY_READ_FROM_NODE);
@ -2108,7 +2117,7 @@ describe('query', () => {
inInstance = load<QueryDirective>(5);
}
},
10, [QueryDirective]);
10, 0, [QueryDirective]);
const fixture = new ComponentFixture(AppComponent);
expect(outInstance !.fooBars.length).toBe(3);
@ -2165,7 +2174,7 @@ describe('query', () => {
inInstance = load<QueryDirective>(3);
}
},
7, [QueryDirective]);
7, 0, [QueryDirective]);
const fixture = new ComponentFixture(AppComponent);
expect(outInstance !.fooBars.length).toBe(1);
@ -2245,7 +2254,7 @@ describe('query', () => {
deepInstance = load<DeepQueryDirective>(2);
}
},
8, [ShallowQueryDirective, DeepQueryDirective]);
8, 0, [ShallowQueryDirective, DeepQueryDirective]);
const fixture = new ComponentFixture(AppComponent);
expect(shallowInstance !.foos.length).toBe(1);

38
packages/core/test/render3/render_util.ts
View File

@ -60,21 +60,26 @@ export class TemplateFixture extends BaseFixture {
*/
constructor(
private createBlock: () => void, private updateBlock: () => void = noop, consts: number = 0,
directives?: DirectiveTypesOrFactory|null, pipes?: PipeTypesOrFactory|null,
sanitizer?: Sanitizer|null, rendererFactory?: RendererFactory3) {
private vars: number = 0, directives?: DirectiveTypesOrFactory|null,
pipes?: PipeTypesOrFactory|null, sanitizer?: Sanitizer|null,
rendererFactory?: RendererFactory3) {
super();
this._directiveDefs = toDefs(directives, extractDirectiveDef);
this._pipeDefs = toDefs(pipes, extractPipeDef);
this._sanitizer = sanitizer || null;
this._rendererFactory = rendererFactory || domRendererFactory3;
this.hostNode = renderTemplate(this.hostElement, (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
this.createBlock();
}
if (rf & RenderFlags.Update) {
this.updateBlock();
}
}, consts, null !, this._rendererFactory, null, this._directiveDefs, this._pipeDefs, sanitizer);
this.hostNode = renderTemplate(
this.hostElement,
(rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
this.createBlock();
}
if (rf & RenderFlags.Update) {
this.updateBlock();
}
},
consts, vars, null !, this._rendererFactory, null, this._directiveDefs, this._pipeDefs,
sanitizer);
}
/**
@ -84,8 +89,8 @@ export class TemplateFixture extends BaseFixture {
*/
update(updateBlock?: () => void): void {
renderTemplate(
this.hostNode.native, updateBlock || this.updateBlock, 0, null !, this._rendererFactory,
this.hostNode, this._directiveDefs, this._pipeDefs, this._sanitizer);
this.hostNode.native, updateBlock || this.updateBlock, 0, null !, this.vars,
this._rendererFactory, this.hostNode, this._directiveDefs, this._pipeDefs, this._sanitizer);
}
}
@ -170,12 +175,12 @@ export function resetDOM() {
* @deprecated use `TemplateFixture` or `ComponentFixture`
*/
export function renderToHtml(
template: ComponentTemplate<any>, ctx: any, consts: number = 0,
template: ComponentTemplate<any>, ctx: any, consts: number = 0, vars: number = 0,
directives?: DirectiveTypesOrFactory | null, pipes?: PipeTypesOrFactory | null,
providedRendererFactory?: RendererFactory3 | null) {
host = renderTemplate(
containerEl, template, consts, ctx, providedRendererFactory || testRendererFactory, host,
toDefs(directives, extractDirectiveDef), toDefs(pipes, extractPipeDef));
containerEl, template, consts, vars, ctx, providedRendererFactory || testRendererFactory,
host, toDefs(directives, extractDirectiveDef), toDefs(pipes, extractPipeDef));
return toHtml(containerEl);
}
@ -229,7 +234,7 @@ export function toHtml<T>(componentOrElement: T | RElement): string {
}
export function createComponent(
name: string, template: ComponentTemplate<any>, consts: number = 0,
name: string, template: ComponentTemplate<any>, consts: number = 0, vars: number = 0,
directives: DirectiveTypesOrFactory = [], pipes: PipeTypesOrFactory = [],
viewQuery: ComponentTemplate<any>| null = null): ComponentType<any> {
return class Component {
@ -238,6 +243,7 @@ export function createComponent(
type: Component,
selectors: [[name]],
consts: consts,
vars: vars,
factory: () => new Component,
template: template,
viewQuery: viewQuery,

21
packages/core/test/render3/renderer_factory_spec.ts
View File

@ -34,6 +34,7 @@ describe('renderer factory lifecycle', () => {
type: SomeComponent,
selectors: [['some-component']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: SomeComponent) {
logs.push('component');
if (rf & RenderFlags.Create) {
@ -49,6 +50,7 @@ describe('renderer factory lifecycle', () => {
type: SomeComponentWhichThrows,
selectors: [['some-component-with-Error']],
consts: 0,
vars: 0,
template: function(rf: RenderFlags, ctx: SomeComponentWhichThrows) {
throw(new Error('SomeComponentWhichThrows threw'));
},
@ -90,7 +92,7 @@ describe('renderer factory lifecycle', () => {
});
it('should work with a template', () => {
renderToHtml(Template, {}, 1, null, null, rendererFactory);
renderToHtml(Template, {}, 1, 0, null, null, rendererFactory);
expect(logs).toEqual(['create', 'begin', 'function', 'end']);
logs = [];
@ -99,12 +101,12 @@ describe('renderer factory lifecycle', () => {
});
it('should work with a template which contains a component', () => {
renderToHtml(TemplateWithComponent, {}, 2, directives, null, rendererFactory);
renderToHtml(TemplateWithComponent, {}, 2, 0, directives, null, rendererFactory);
expect(logs).toEqual(
['create', 'begin', 'function_with_component', 'create', 'component', 'end']);
logs = [];
renderToHtml(TemplateWithComponent, {}, 2, directives);
renderToHtml(TemplateWithComponent, {}, 2, 0, directives);
expect(logs).toEqual(['begin', 'function_with_component', 'component', 'end']);
});
@ -128,6 +130,7 @@ describe('animation renderer factory', () => {
type: SomeComponent,
selectors: [['some-component']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: SomeComponent) {
if (rf & RenderFlags.Create) {
text(0, 'foo');
@ -147,6 +150,7 @@ describe('animation renderer factory', () => {
type: SomeComponentWithAnimation,
selectors: [['some-component']],
consts: 2,
vars: 1,
template: function(rf: RenderFlags, ctx: SomeComponentWithAnimation) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
@ -225,7 +229,7 @@ describe('Renderer2 destruction hooks', () => {
containerRefreshStart(1);
{
if (condition) {
let rf1 = embeddedViewStart(1, 3);
let rf1 = embeddedViewStart(1, 3, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'span');
@ -239,8 +243,8 @@ describe('Renderer2 destruction hooks', () => {
containerRefreshEnd();
}
const t =
new TemplateFixture(createTemplate, updateTemplate, 2, null, null, null, rendererFactory);
const t = new TemplateFixture(
createTemplate, updateTemplate, 2, 0, null, null, null, rendererFactory);
expect(t.html).toEqual('<div><span></span><span></span><span></span></div>');
@ -256,6 +260,7 @@ describe('Renderer2 destruction hooks', () => {
type: SimpleComponent,
selectors: [['simple']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: SimpleComponent) {
if (rf & RenderFlags.Create) {
element(0, 'span');
@ -277,7 +282,7 @@ describe('Renderer2 destruction hooks', () => {
containerRefreshStart(1);
{
if (condition) {
let rf1 = embeddedViewStart(1, 3);
let rf1 = embeddedViewStart(1, 3, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'simple');
@ -292,7 +297,7 @@ describe('Renderer2 destruction hooks', () => {
}
const t = new TemplateFixture(
createTemplate, updateTemplate, 2, [SimpleComponent], null, null, rendererFactory);
createTemplate, updateTemplate, 2, 0, [SimpleComponent], null, null, rendererFactory);
expect(t.html).toEqual(
'<div><simple><span></span></simple><span></span><simple><span></span></simple></div>');

127
packages/core/test/render3/view_container_ref_spec.ts
View File

@ -64,7 +64,7 @@ describe('ViewContainerRef', () => {
* <p vcref [tplRef]="tplRef"></p>
*/
function createTemplate() {
template(0, embeddedTemplate, 1, null, null, ['tplRef', ''], templateRefExtractor);
template(0, embeddedTemplate, 1, 1, null, null, ['tplRef', ''], templateRefExtractor);
element(2, 'p', ['vcref', '']);
}
@ -81,13 +81,13 @@ describe('ViewContainerRef', () => {
* <footer></footer>
*/
function createTemplate() {
template(0, embeddedTemplate, 1, null, null, ['tplRef', ''], templateRefExtractor);
template(0, embeddedTemplate, 1, 1, null, null, ['tplRef', ''], templateRefExtractor);
element(2, 'header', ['vcref', '']);
element(3, 'footer');
}
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 4, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 4, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<header vcref=""></header><footer></footer>');
createView('A');
@ -117,13 +117,13 @@ describe('ViewContainerRef', () => {
* <footer></footer>
*/
function createTemplate() {
template(0, embeddedTemplate, 1, null, [], ['tplRef', ''], templateRefExtractor);
template(0, embeddedTemplate, 1, 1, null, [], ['tplRef', ''], templateRefExtractor);
element(2, 'header-cmp', ['vcref', '']);
element(3, 'footer');
}
const fixture = new TemplateFixture(
createTemplate, updateTemplate, 3, [HeaderComponent, DirectiveWithVCRef]);
createTemplate, updateTemplate, 3, 1, [HeaderComponent, DirectiveWithVCRef]);
expect(fixture.html).toEqual('<header-cmp vcref=""></header-cmp><footer></footer>');
createView('A');
@ -153,7 +153,7 @@ describe('ViewContainerRef', () => {
* <div vcref [tplRef]="tplRef"></div>
*/
function createTemplate() {
template(0, embeddedTemplate, 1, null, null, ['tplRef', ''], templateRefExtractor);
template(0, embeddedTemplate, 1, 1, null, null, ['tplRef', ''], templateRefExtractor);
element(2, 'div', ['vcref', '']);
element(3, 'div', ['vcref', '']);
@ -168,7 +168,7 @@ describe('ViewContainerRef', () => {
elementProperty(3, 'tplRef', bind(tplRef));
}
const fixture = new TemplateFixture(createTemplate, update, 4, [DirectiveWithVCRef]);
const fixture = new TemplateFixture(createTemplate, update, 4, 2, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<div vcref=""></div><div vcref=""></div>');
firstDir !.vcref.createEmbeddedView(firstDir !.tplRef, {name: 'A'});
@ -184,7 +184,7 @@ describe('ViewContainerRef', () => {
*/
function createTemplate() {
template(
0, embeddedTemplate, 1, null, ['vcref', ''], ['tplRef', ''], templateRefExtractor);
0, embeddedTemplate, 1, 1, null, ['vcref', ''], ['tplRef', ''], templateRefExtractor);
element(2, 'footer');
}
@ -194,7 +194,7 @@ describe('ViewContainerRef', () => {
}
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<footer></footer>');
createView('A');
@ -264,11 +264,12 @@ describe('ViewContainerRef', () => {
selectors: [['test-cmp']],
factory: () => new TestComponent(),
consts: 4,
vars: 0,
template: (rf: RenderFlags, cmp: TestComponent) => {
if (rf & RenderFlags.Create) {
text(0, 'before|');
template(1, EmbeddedTemplateA, 1, null, ['testdir', '']);
template(2, EmbeddedTemplateB, 1, null, ['testdir', '']);
template(1, EmbeddedTemplateA, 1, 0, null, ['testdir', '']);
template(2, EmbeddedTemplateB, 1, 0, null, ['testdir', '']);
text(3, '|after');
}
},
@ -333,11 +334,12 @@ describe('ViewContainerRef', () => {
type: TestComponent,
selectors: [['test-cmp']],
consts: 4,
vars: 0,
factory: () => new TestComponent(),
template: (rf: RenderFlags, cmp: TestComponent) => {
if (rf & RenderFlags.Create) {
text(0, 'before|');
template(1, EmbeddedTemplateA, 1, null, ['testdir', '']);
template(1, EmbeddedTemplateA, 1, 0, null, ['testdir', '']);
container(2);
text(3, '|after');
}
@ -345,7 +347,7 @@ describe('ViewContainerRef', () => {
containerRefreshStart(2);
{
if (cmp.condition) {
let rf1 = embeddedViewStart(0, 1);
let rf1 = embeddedViewStart(0, 1, 0);
{
if (rf1 & RenderFlags.Create) {
text(0, 'B');
@ -394,6 +396,7 @@ describe('ViewContainerRef', () => {
selectors: [['child']],
factory: () => new Child(),
consts: 1,
vars: 1,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
text(0);
@ -423,7 +426,7 @@ describe('ViewContainerRef', () => {
pipe(1, 'starPipe');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'name', bind(pipeBind1(1, 2, 'C')));
elementProperty(0, 'name', bind(pipeBind1(1, 1, 'C')));
}
}
@ -442,10 +445,11 @@ describe('ViewContainerRef', () => {
selectors: [['some-comp']],
factory: () => new SomeComponent(),
consts: 6,
vars: 7,
template: (rf: RenderFlags, cmp: SomeComponent) => {
if (rf & RenderFlags.Create) {
template(
0, SomeComponent_Template_0, 2, null, [], ['foo', ''], templateRefExtractor);
0, SomeComponent_Template_0, 2, 3, null, [], ['foo', ''], templateRefExtractor);
pipe(2, 'starPipe');
element(3, 'child', ['vcref', '']);
pipe(4, 'starPipe');
@ -454,8 +458,8 @@ describe('ViewContainerRef', () => {
if (rf & RenderFlags.Update) {
const tplRef = reference(1);
elementProperty(3, 'tplRef', bind(tplRef));
elementProperty(3, 'name', bind(pipeBind1(2, 2, 'A')));
elementProperty(5, 'name', bind(pipeBind1(4, 4, 'B')));
elementProperty(3, 'name', bind(pipeBind1(2, 3, 'A')));
elementProperty(5, 'name', bind(pipeBind1(4, 5, 'B')));
}
},
directives: [Child, DirectiveWithVCRef],
@ -508,6 +512,7 @@ describe('ViewContainerRef', () => {
selectors: [['child']],
factory: () => child = new Child(),
consts: 2,
vars: 2,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', [AttributeMarker.SelectOnly, 'tplDir']);
@ -534,7 +539,7 @@ describe('ViewContainerRef', () => {
*/
const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
if (rf & RenderFlags.Create) {
template(0, fooTemplate, 2, null, null, ['foo', ''], templateRefExtractor);
template(0, fooTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor);
element(2, 'child');
}
@ -543,7 +548,7 @@ describe('ViewContainerRef', () => {
elementProperty(2, 'tpl', bind(tplRef));
}
}, 3, [Child]);
}, 3, 1, [Child]);
function fooTemplate(rf1: RenderFlags, ctx: any) {
if (rf1 & RenderFlags.Create) {
@ -551,7 +556,6 @@ describe('ViewContainerRef', () => {
{ text(1); }
elementEnd();
}
if (rf1 & RenderFlags.Update) {
const parent = nextContext();
textBinding(1, bind(parent.name));
@ -592,9 +596,10 @@ describe('ViewContainerRef', () => {
selectors: [['loop-comp']],
factory: () => new LoopComp(),
consts: 1,
vars: 2,
template: function(rf: RenderFlags, loop: any) {
if (rf & RenderFlags.Create) {
template(0, null, 0, null, [AttributeMarker.SelectOnly, 'ngForOf']);
template(0, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngForOf']);
}
if (rf & RenderFlags.Update) {
@ -624,7 +629,7 @@ describe('ViewContainerRef', () => {
*/
const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
if (rf & RenderFlags.Create) {
template(0, rowTemplate, 3, null, null, ['rowTemplate', ''], templateRefExtractor);
template(0, rowTemplate, 3, 2, null, null, ['rowTemplate', ''], templateRefExtractor);
element(2, 'loop-comp');
}
@ -634,11 +639,11 @@ describe('ViewContainerRef', () => {
elementProperty(2, 'rows', bind(parent.rows));
}
}, 3, [LoopComp]);
}, 3, 2, [LoopComp]);
function rowTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, cellTemplate, 2, null, null, ['cellTemplate', ''], templateRefExtractor);
template(0, cellTemplate, 2, 1, null, null, ['cellTemplate', ''], templateRefExtractor);
element(2, 'loop-comp');
}
@ -696,7 +701,8 @@ describe('ViewContainerRef', () => {
describe('detach', () => {
it('should detach the right embedded view when an index is specified', () => {
const fixture = new TemplateFixture(
createTemplate, updateTemplate, 3, [DirectiveWithVCRef], null, null, rendererFactory);
createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef], null, null,
rendererFactory);
const viewA = createView('A');
createView('B');
createView('C');
@ -723,7 +729,8 @@ describe('ViewContainerRef', () => {
it('should detach the last embedded view when no index is specified', () => {
const fixture = new TemplateFixture(
createTemplate, updateTemplate, 3, [DirectiveWithVCRef], null, null, rendererFactory);
createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef], null, null,
rendererFactory);
createView('A');
createView('B');
createView('C');
@ -743,7 +750,8 @@ describe('ViewContainerRef', () => {
describe('remove', () => {
it('should remove the right embedded view when an index is specified', () => {
const fixture = new TemplateFixture(
createTemplate, updateTemplate, 3, [DirectiveWithVCRef], null, null, rendererFactory);
createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef], null, null,
rendererFactory);
const viewA = createView('A');
createView('B');
createView('C');
@ -769,7 +777,8 @@ describe('ViewContainerRef', () => {
it('should remove the last embedded view when no index is specified', () => {
const fixture = new TemplateFixture(
createTemplate, updateTemplate, 3, [DirectiveWithVCRef], null, null, rendererFactory);
createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef], null, null,
rendererFactory);
createView('A');
createView('B');
createView('C');
@ -787,7 +796,8 @@ describe('ViewContainerRef', () => {
it('should throw when trying to insert a removed or destroyed view', () => {
const fixture = new TemplateFixture(
createTemplate, updateTemplate, 3, [DirectiveWithVCRef], null, null, rendererFactory);
createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef], null, null,
rendererFactory);
const viewA = createView('A');
const viewB = createView('B');
fixture.update();
@ -805,7 +815,7 @@ describe('ViewContainerRef', () => {
describe('length', () => {
it('should return the number of embedded views', () => {
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(directiveInstance !.vcref.length).toEqual(0);
createView('A');
@ -827,7 +837,7 @@ describe('ViewContainerRef', () => {
describe('get and indexOf', () => {
it('should retrieve a ViewRef from its index, and vice versa', () => {
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
createView('A');
createView('B');
createView('C');
@ -845,7 +855,7 @@ describe('ViewContainerRef', () => {
it('should handle out of bounds cases', () => {
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
createView('A');
fixture.update();
@ -861,7 +871,7 @@ describe('ViewContainerRef', () => {
describe('move', () => {
it('should move embedded views and associated DOM nodes without recreating them', () => {
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
createView('A');
createView('B');
createView('C');
@ -899,6 +909,7 @@ describe('ViewContainerRef', () => {
selectors: [['embedded-cmp']],
factory: () => new EmbeddedComponent(),
consts: 1,
vars: 0,
template: (rf: RenderFlags, cmp: EmbeddedComponent) => {
templateExecutionCounter++;
if (rf & RenderFlags.Create) {
@ -911,7 +922,7 @@ describe('ViewContainerRef', () => {
it('should work without Injector and NgModuleRef', () => {
templateExecutionCounter = 0;
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<p vcref=""></p>');
expect(templateExecutionCounter).toEqual(0);
@ -957,7 +968,7 @@ describe('ViewContainerRef', () => {
templateExecutionCounter = 0;
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<p vcref=""></p>');
expect(templateExecutionCounter).toEqual(0);
@ -983,6 +994,7 @@ describe('ViewContainerRef', () => {
selectors: [['embedded-cmp-with-ngcontent']],
factory: () => new EmbeddedComponentWithNgContent(),
consts: 3,
vars: 0,
template: (rf: RenderFlags, cmp: EmbeddedComponentWithNgContent) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -996,7 +1008,7 @@ describe('ViewContainerRef', () => {
it('should support projectable nodes', () => {
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<p vcref=""></p>');
const myNode = document.createElement('div');
@ -1021,6 +1033,7 @@ describe('ViewContainerRef', () => {
selectors: [['reprojector']],
factory: () => new Reprojector(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Reprojector) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1034,7 +1047,7 @@ describe('ViewContainerRef', () => {
}
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<p vcref=""></p>');
const myNode = document.createElement('div');
@ -1053,7 +1066,7 @@ describe('ViewContainerRef', () => {
it('should support many projectable nodes with many slots', () => {
const fixture =
new TemplateFixture(createTemplate, updateTemplate, 3, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, updateTemplate, 3, 1, [DirectiveWithVCRef]);
expect(fixture.html).toEqual('<p vcref=""></p>');
directiveInstance !.vcref.createComponent(
@ -1076,7 +1089,7 @@ describe('ViewContainerRef', () => {
element(1, 'footer');
}
new TemplateFixture(createTemplate, undefined, 2, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, undefined, 2, 0, [DirectiveWithVCRef]);
expect(directiveInstance !.vcref.element.nativeElement.tagName.toLowerCase())
.toEqual('header');
@ -1095,7 +1108,7 @@ describe('ViewContainerRef', () => {
element(1, 'footer');
}
new TemplateFixture(createTemplate, undefined, 2, [HeaderComponent, DirectiveWithVCRef]);
new TemplateFixture(createTemplate, undefined, 2, 0, [HeaderComponent, DirectiveWithVCRef]);
expect(directiveInstance !.vcref.element.nativeElement.tagName.toLowerCase())
.toEqual('header-cmp');
@ -1107,11 +1120,11 @@ describe('ViewContainerRef', () => {
it('should work on templates', () => {
function createTemplate() {
template(0, embeddedTemplate, 1, null, ['vcref', '']);
template(0, embeddedTemplate, 1, 1, null, ['vcref', '']);
element(1, 'footer');
}
new TemplateFixture(createTemplate, () => {}, 2, [DirectiveWithVCRef]);
new TemplateFixture(createTemplate, () => {}, 2, 0, [DirectiveWithVCRef]);
expect(directiveInstance !.vcref.element.nativeElement.textContent).toEqual('container');
expect(directiveInstance !.vcref.injector.get(ElementRef).nativeElement.textContent)
.toEqual('container');
@ -1127,7 +1140,9 @@ describe('ViewContainerRef', () => {
text(1);
elementEnd();
}
textBinding(1, ctx.name);
if (rf & RenderFlags.Update) {
textBinding(1, ctx.name);
}
}
it('should project the ViewContainerRef content along its host, in an element', () => {
@ -1138,6 +1153,7 @@ describe('ViewContainerRef', () => {
selectors: [['child']],
factory: () => new Child(),
consts: 2,
vars: 0,
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1164,9 +1180,10 @@ describe('ViewContainerRef', () => {
selectors: [['parent']],
factory: () => new Parent(),
consts: 5,
vars: 2,
template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, null, null, ['foo', ''], templateRefExtractor);
template(0, embeddedTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor);
elementStart(2, 'child');
{
elementStart(3, 'header', ['vcref', '']);
@ -1213,6 +1230,7 @@ describe('ViewContainerRef', () => {
selectors: [['child-with-view']],
factory: () => new ChildWithView(),
consts: 3,
vars: 0,
template: (rf: RenderFlags, cmp: ChildWithView) => {
if (rf & RenderFlags.Create) {
projectionDef();
@ -1223,7 +1241,7 @@ describe('ViewContainerRef', () => {
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
if (cmp.show) {
let rf0 = embeddedViewStart(0, 1);
let rf0 = embeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
projection(0);
}
@ -1254,9 +1272,11 @@ describe('ViewContainerRef', () => {
selectors: [['parent']],
factory: () => new Parent(),
consts: 7,
vars: 2,
template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, null, undefined, ['foo', ''], templateRefExtractor);
template(
0, embeddedTemplate, 2, 1, null, undefined, ['foo', ''], templateRefExtractor);
elementStart(2, 'child-with-view');
text(3, 'Before projected');
elementStart(4, 'header', ['vcref', '']);
@ -1300,6 +1320,7 @@ describe('ViewContainerRef', () => {
selectors: [['child-with-selector']],
factory: () => new ChildWithSelector(),
consts: 4,
vars: 0,
template: (rf: RenderFlags, cmp: ChildWithSelector) => {
if (rf & RenderFlags.Create) {
projectionDef([[['header']]], ['header']);
@ -1332,10 +1353,12 @@ describe('ViewContainerRef', () => {
selectors: [['parent']],
factory: () => new Parent(),
consts: 5,
vars: 2,
template: (rf: RenderFlags, cmp: Parent) => {
let tplRef: any;
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, null, null, ['foo', ''], templateRefExtractor);
template(
0, embeddedTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor);
elementStart(2, 'child-with-selector');
elementStart(3, 'header', ['vcref', '']);
text(4, 'blah');
@ -1382,10 +1405,12 @@ describe('ViewContainerRef', () => {
selectors: [['parent']],
factory: () => new Parent(),
consts: 5,
vars: 2,
template: (rf: RenderFlags, cmp: Parent) => {
let tplRef: any;
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, null, null, ['foo', ''], templateRefExtractor);
template(
0, embeddedTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor);
elementStart(2, 'child-with-selector');
elementStart(3, 'footer', ['vcref', '']);
text(4, 'blah');
@ -1446,6 +1471,7 @@ describe('ViewContainerRef', () => {
selectors: [['hooks']],
factory: () => new ComponentWithHooks(),
consts: 1,
vars: 1,
template: (rf: RenderFlags, cmp: ComponentWithHooks) => {
if (rf & RenderFlags.Create) {
text(0);
@ -1484,9 +1510,11 @@ describe('ViewContainerRef', () => {
selectors: [['some-comp']],
factory: () => new SomeComponent(),
consts: 4,
vars: 3,
template: (rf: RenderFlags, cmp: SomeComponent) => {
if (rf & RenderFlags.Create) {
template(0, SomeComponent_Template_0, 1, null, [], ['foo', ''], templateRefExtractor);
template(
0, SomeComponent_Template_0, 1, 1, null, [], ['foo', ''], templateRefExtractor);
element(2, 'hooks', ['vcref', '']);
element(3, 'hooks');
}
@ -1577,6 +1605,7 @@ describe('ViewContainerRef', () => {
selectors: [['some-comp']],
factory: () => new SomeComponent(),
consts: 2,
vars: 2,
template: (rf: RenderFlags, cmp: SomeComponent) => {
if (rf & RenderFlags.Create) {
element(0, 'hooks', ['vcref', '']);