diff --git a/modules/benchmarks/src/largetable/render3/table.ts b/modules/benchmarks/src/largetable/render3/table.ts index 7df84ed974..38ba1c11b8 100644 --- a/modules/benchmarks/src/largetable/render3/table.ts +++ b/modules/benchmarks/src/largetable/render3/table.ts @@ -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'); diff --git a/modules/benchmarks/src/tree/render3/tree.ts b/modules/benchmarks/src/tree/render3/tree.ts index 9503bd0789..5514f3e883 100644 --- a/modules/benchmarks/src/tree/render3/tree.ts +++ b/modules/benchmarks/src/tree/render3/tree.ts @@ -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(); } diff --git a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts index a34998a663..0e268026ab 100644 --- a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts @@ -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) { diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts index ddcd7e011e..582627cec7 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts @@ -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) { diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts index 94589381cd..7c6039a4c3 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts @@ -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); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts index eb4099712f..8d6ee28ced 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts @@ -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)); diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts index 5d016fd429..fd8caf9c45 100644 --- a/packages/compiler/src/render3/view/compiler.ts +++ b/packages/compiler/src/render3/view/compiler.ts @@ -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); diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts index 50c931414d..2d4bf159b3 100644 --- a/packages/compiler/src/render3/view/template.ts +++ b/packages/compiler/src/render3/view/template.ts @@ -93,6 +93,9 @@ export class TemplateDefinitionBuilder implements t.Visitor, 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, 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, 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, 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, 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'); diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index fb29742060..3d8fcfa73a 100644 --- a/packages/core/src/render3/component.ts +++ b/packages/core/src/render3/component.ts @@ -107,7 +107,7 @@ export function renderComponent( 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; diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts index 9029571aab..b344008e2c 100644 --- a/packages/core/src/render3/component_ref.ts +++ b/packages/core/src/render3/component_ref.ts @@ -121,7 +121,7 @@ export class ComponentFactory extends viewEngine_ComponentFactory { // 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 extends viewEngine_ComponentRef { ngDevMode && assertDefined(this.destroyCbs, 'NgModule already destroyed'); this.destroyCbs !.push(callback); } -} \ No newline at end of file +} diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index b4c3542cb4..dbc6c80793 100644 --- a/packages/core/src/render3/definition.ts +++ b/packages/core/src/render3/definition.ts @@ -62,6 +62,14 @@ export function defineComponent(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(componentDefinition: { type: type, diPublic: null, consts: componentDefinition.consts, + vars: componentDefinition.vars, factory: componentDefinition.factory, template: componentDefinition.template || null !, hostBindings: componentDefinition.hostBindings || null, diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index fc83ff28f6..8c8e397a57 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -526,14 +526,15 @@ export function resetApplicationState() { * @param pipes Pipe defs that should be used for matching */ export function renderTemplate( - hostNode: RElement, templateFn: ComponentTemplate, consts: number, context: T, + hostNode: RElement, templateFn: ComponentTemplate, 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, consts: number, + templateFn: ComponentTemplate, consts: number, vars: number, directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null, viewQuery: ComponentQuery| 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| null, consts: number, + viewIndex: number, templateFn: ComponentTemplate| null, consts: number, vars: number, directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null, viewQuery: ComponentQuery| 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( function addComponentLogic( directiveIndex: number, instance: T, def: ComponentDefInternal): 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| null, consts: number, + index: number, templateFn: ComponentTemplate| 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]; } diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts index 21bb13aa1a..c8ff1dd1f2 100644 --- a/packages/core/src/render3/interfaces/definition.ts +++ b/packages/core/src/render3/interfaces/definition.ts @@ -210,6 +210,14 @@ export interface ComponentDef extends DirectiveDef { template: () => {}, selectors: [['', 'superDir', '']], consts: 0, + vars: 0, factory: () => new SuperComponent() }); } diff --git a/packages/core/test/render3/basic_perf.ts b/packages/core/test/render3/basic_perf.ts index b515ea6e04..a59ac011ec 100644 --- a/packages/core/test/render3/basic_perf.ts +++ b/packages/core/test/render3/basic_perf.ts @@ -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'); diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts index 662193086a..596b281a0b 100644 --- a/packages/core/test/render3/change_detection_spec.ts +++ b/packages/core/test/render3/change_detection_spec.ts @@ -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 }} * @@ -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, /** */ 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 }} - */ 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}} - * @@ -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, /** */ 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 }} - * @@ -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 }} - * @@ -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); diff --git a/packages/core/test/render3/common_integration_spec.ts b/packages/core/test/render3/common_integration_spec.ts index 58b02fc998..fb942d01bc 100644 --- a/packages/core/test/render3/common_integration_spec.ts +++ b/packages/core/test/render3/common_integration_spec.ts @@ -39,13 +39,14 @@ describe('@angular/common integration', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 2, + vars: 1, //
    //
  • {{item}}
  • //
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, //
    //
  • {{index}} of // {{count}}: {{item}}
  • @@ -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, // //
      //
    • {{index}}
    • @@ -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, /** *
      {{ valueOne }}
      *
      {{ valueTwo }}
      */ 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, /** * from tpl * @@ -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); diff --git a/packages/core/test/render3/compiler_canonical/component_directives_spec.ts b/packages/core/test/render3/compiler_canonical/component_directives_spec.ts index c82176c84d..e8a8f1c896 100644 --- a/packages/core/test/render3/compiler_canonical/component_directives_spec.ts +++ b/packages/core/test/render3/compiler_canonical/component_directives_spec.ts @@ -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))))); } } }); diff --git a/packages/core/test/render3/compiler_canonical/content_projection_spec.ts b/packages/core/test/render3/compiler_canonical/content_projection_spec.ts index 3a33469b2c..60b343d54f 100644 --- a/packages/core/test/render3/compiler_canonical/content_projection_spec.ts +++ b/packages/core/test/render3/compiler_canonical/content_projection_spec.ts @@ -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'); diff --git a/packages/core/test/render3/compiler_canonical/elements_spec.ts b/packages/core/test/render3/compiler_canonical/elements_spec.ts index 85f1a038f6..1157b3fdc3 100644 --- a/packages/core/test/render3/compiler_canonical/elements_spec.ts +++ b/packages/core/test/render3/compiler_canonical/elements_spec.ts @@ -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'); diff --git a/packages/core/test/render3/compiler_canonical/i18n_spec.ts b/packages/core/test/render3/compiler_canonical/i18n_spec.ts index 7aed96f14a..c0fcc6022a 100644 --- a/packages/core/test/render3/compiler_canonical/i18n_spec.ts +++ b/packages/core/test/render3/compiler_canonical/i18n_spec.ts @@ -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]); } diff --git a/packages/core/test/render3/compiler_canonical/injection_spec.ts b/packages/core/test/render3/compiler_canonical/injection_spec.ts index 0aebb6faca..706b39d290 100644 --- a/packages/core/test/render3/compiler_canonical/injection_spec.ts +++ b/packages/core/test/render3/compiler_canonical/injection_spec.ts @@ -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, /** */ 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, /** */ 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], diff --git a/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts b/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts index 0e7f361a08..a60d052dd2 100644 --- a/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts +++ b/packages/core/test/render3/compiler_canonical/life_cycle_spec.ts @@ -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'); diff --git a/packages/core/test/render3/compiler_canonical/local_reference_spec.ts b/packages/core/test/render3/compiler_canonical/local_reference_spec.ts index 0b3c5da093..190b506f67 100644 --- a/packages/core/test/render3/compiler_canonical/local_reference_spec.ts +++ b/packages/core/test/render3/compiler_canonical/local_reference_spec.ts @@ -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) { diff --git a/packages/core/test/render3/compiler_canonical/pipes_spec.ts b/packages/core/test/render3/compiler_canonical/pipes_spec.ts index 8ce45f614c..da77065c10 100644 --- a/packages/core/test/render3/compiler_canonical/pipes_spec.ts +++ b/packages/core/test/render3/compiler_canonical/pipes_spec.ts @@ -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(); } } }); diff --git a/packages/core/test/render3/compiler_canonical/query_spec.ts b/packages/core/test/render3/compiler_canonical/query_spec.ts index 263e5211eb..76c830d797 100644 --- a/packages/core/test/render3/compiler_canonical/query_spec.ts +++ b/packages/core/test/render3/compiler_canonical/query_spec.ts @@ -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'); diff --git a/packages/core/test/render3/compiler_canonical/sanitize_spec.ts b/packages/core/test/render3/compiler_canonical/sanitize_spec.ts index ebabff1356..cf8d2ccea2 100644 --- a/packages/core/test/render3/compiler_canonical/sanitize_spec.ts +++ b/packages/core/test/render3/compiler_canonical/sanitize_spec.ts @@ -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'); diff --git a/packages/core/test/render3/compiler_canonical/small_app_spec.ts b/packages/core/test/render3/compiler_canonical/small_app_spec.ts index 496e086a92..621203368a 100644 --- a/packages/core/test/render3/compiler_canonical/small_app_spec.ts +++ b/packages/core/test/render3/compiler_canonical/small_app_spec.ts @@ -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'); diff --git a/packages/core/test/render3/compiler_canonical/template_variables_spec.ts b/packages/core/test/render3/compiler_canonical/template_variables_spec.ts index 68f834fde9..294a59caaa 100644 --- a/packages/core/test/render3/compiler_canonical/template_variables_spec.ts +++ b/packages/core/test/render3/compiler_canonical/template_variables_spec.ts @@ -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(); } } }); diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index c7b185f512..d6c355959a 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/packages/core/test/render3/component_spec.ts @@ -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('a'); + expect(renderToHtml(template, ctx, 1, 1, defs)).toEqual('a'); ctx.items = [...ctx.items, 'b']; - expect(renderToHtml(template, ctx, 1, defs)).toEqual('ab'); + expect(renderToHtml(template, ctx, 1, 1, defs)).toEqual('ab'); }); }); @@ -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 diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts index 490e9bcfcf..4507348643 100644 --- a/packages/core/test/render3/content_spec.ts +++ b/packages/core/test/render3/content_spec.ts @@ -42,7 +42,7 @@ describe('content projection', () => { { text(1, 'content'); } elementEnd(); } - }, 2, [Child]); + }, 2, 0, [Child]); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
      content
      '); @@ -64,7 +64,7 @@ describe('content projection', () => { { text(1, 'content'); } elementEnd(); } - }, 2, [Child]); + }, 2, 0, [Child]); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content'); @@ -98,7 +98,7 @@ describe('content projection', () => { } elementEnd(); } - }, 5, [Child]); + }, 5, 0, [Child]); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('before
      content
      after
      '); @@ -123,7 +123,7 @@ describe('content projection', () => { { projection(1); } elementEnd(); } - }, 2, [GrandChild]); + }, 2, 0, [GrandChild]); /** HelloWorld! */ 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('
      ()
      '); @@ -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(''); @@ -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('
      (else)
      '); @@ -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); /** * @@ -457,7 +457,7 @@ describe('content projection', () => { // testing childCmptInstance = loadDirective(0); } - }, 4, [Child]); + }, 4, 0, [Child]); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
      text
      content
      '); @@ -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('
      text
      '); @@ -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('
      content
      '); @@ -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; /**

      text

      */ @@ -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('
      before-content-after
      '); @@ -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('
      content
      '); @@ -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('content
      '); @@ -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]); /** * @@ -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('content'); @@ -1224,7 +1224,7 @@ describe('content projection', () => { { projection(1); } elementEnd(); } - }, 2, [GrandChild]); + }, 2, 0, [GrandChild]); ` @@ -1247,7 +1247,7 @@ describe('content projection', () => { } elementEnd(); } - }, 4, [Child]); + }, 4, 0, [Child]); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content'); @@ -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('Has title'); @@ -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]); /** * @@ -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]); /** * @@ -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]); /** * @@ -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('
      should project
      '); @@ -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); diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts index 7e9993aa77..fc5b857f83 100644 --- a/packages/core/test/render3/control_flow_spec.ts +++ b/packages/core/test/render3/control_flow_spec.ts @@ -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(); } diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index 94d193841c..1522c6fde7 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/packages/core/test/render3/di_spec.ts @@ -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('
      Created
      '); @@ -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('
      DirADirB
      '); @@ -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, /**
      */ 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]); /** */ 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]); /* */ 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]); /* */ 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('
      ElementRef-true
      '); @@ -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('
      ViewContainerRef-true
      '); @@ -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()), /**
      {{ dir.value }}
      */ 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()), /** * @@ -1111,6 +1120,7 @@ describe('di', () => { selectors: [['my-app']], factory: () => new MyApp(injectChangeDetectorRef()), consts: 1, + vars: 0, /** * % if (showing) { *
      {{ dir.value }}
      @@ -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, /**
      {{ dir.value }}
      */ 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); diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index e7b7ede494..32b8675c5a 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/packages/core/test/render3/directive_spec.ts @@ -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(''); 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(''); diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index 51813bc1b9..3b01ef29a2 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -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('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('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('
      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'); @@ -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('
      '); @@ -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('
      '); @@ -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'); @@ -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(); } diff --git a/packages/core/test/render3/i18n_spec.ts b/packages/core/test/render3/i18n_spec.ts index cea1ee41c7..8b29b6025e 100644 --- a/packages/core/test/render3/i18n_spec.ts +++ b/packages/core/test/render3/i18n_spec.ts @@ -77,6 +77,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 3, + vars: 2, // Initial template: //
      // {{exp1}} {{exp2}} @@ -136,6 +137,7 @@ describe('Runtime i18n', () => { type: MyApp, factory: () => new MyApp(), consts: 2, + vars: 1, selectors: [['my-app']], // Initial template: //
      @@ -194,6 +196,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
      @@ -240,6 +243,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 8, + vars: 4, // Initial template: //
      // {{exp1}} @@ -337,6 +341,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 6, + vars: 2, // Initial template: //
      // @@ -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: //
        //
      • value: {{item}}
      • @@ -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: //
          //
        • value: {{item}}
        • @@ -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: //
            //
          • value: {{item}}
          • @@ -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: //
              //
            • @@ -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: //
                //
              • start
              • @@ -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: //
                  //
                • value: {{item}}
                • @@ -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: //
                  @@ -1528,6 +1550,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
                  @@ -1564,6 +1587,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
                  @@ -1602,6 +1626,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
                  @@ -1645,6 +1670,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
                  @@ -1690,6 +1716,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
                  @@ -1744,6 +1771,7 @@ describe('Runtime i18n', () => { factory: () => new MyApp(), selectors: [['my-app']], consts: 1, + vars: 1, // Initial template: //
                  diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts index 0f96339130..40daba5a14 100644 --- a/packages/core/test/render3/instructions_spec.ts +++ b/packages/core/test/render3/instructions_spec.ts @@ -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('
                  '); @@ -298,7 +298,7 @@ describe('instructions', () => { function ToDoAppComponent_NgForOf_Template_0(rf: RenderFlags, ctx0: NgForOfContext) { 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} `); - const t = new TemplateFixture(createDiv, undefined, 1, null, null, s); + const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s); const inputValue = '
                  '; const outputValue = '
                  '; @@ -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('
                  '); const outputValue = '
                  '; @@ -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('
                  '); const outputValue = '
                  -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); } diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 621d3b2971..41621a2707 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -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 one

                  '); @@ -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 one

                  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 one

                  Todo one

                  '); @@ -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('one'); @@ -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('

                  Bess

                  '); @@ -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', () => { `; 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(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('component template'); }); @@ -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('content'); }); @@ -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(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('
                  '); 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('apz'); + expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('apz'); ctx.projectedTree = {subTrees: [{}, {}, {subTrees: [{}, {}]}, {}]}; ctx.beforeTree.subTrees !.push({afterLabel: 'b'}); - expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('abz'); + expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('abz'); ctx.projectedTree.subTrees ![1].afterLabel = 'h'; - expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('abhz'); + expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('abhz'); ctx.beforeTree.subTrees !.push({beforeLabel: 'c'}); - expect(renderToHtml(parentTemplate, ctx, 2, defs)).toEqual('abchz'); + expect(renderToHtml(parentTemplate, ctx, 2, 2, defs)).toEqual('abchz'); // 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( ''); args = args.reverse(); - expect(renderToHtml(Template, args, 1)) + expect(renderToHtml(Template, args, 1, 10)) .toEqual( ''); args = args.reverse(); - expect(renderToHtml(Template, args, 1)) + expect(renderToHtml(Template, args, 1, 10)) .toEqual( ''); }); @@ -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(`
                  `); @@ -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'); diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index e34629c787..839136e9b1 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/packages/core/test/render3/lifecycle_spec.ts @@ -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, consts: number = 0, + name: string, template: ComponentTemplate, 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, consts: number = 0, + name: string, template: ComponentTemplate, 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', () => { * content */ - 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, consts: number, directives: any[] = []) { + name: string, template: ComponentTemplate, 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]); /** * @@ -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, consts: number = 0, + name: string, template: ComponentTemplate, 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', () => { * * % } */ - 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 template: */ - 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', () => { * * % } */ - 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', () => { *
                  * % } */ - 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, consts: number = 0, + name: string, template: ComponentTemplate, 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, consts: number = 0, + name: string, template: ComponentTemplate, 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]); /** * @@ -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]); /** * @@ -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] }); diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index 4d3ff3e55b..2d8d104ea5 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -27,6 +27,7 @@ describe('event listeners', () => { type: MyComp, selectors: [['comp']], consts: 2, + vars: 0, /** */ 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, /** */ 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'); { diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index 131a29aabc..4c32408009 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -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', () => { * * % } */ - 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(); diff --git a/packages/core/test/render3/pipe_spec.ts b/packages/core/test/render3/pipe_spec.ts index fe60fe9612..af1ed3db80 100644 --- a/packages/core/test/render3/pipe_spec.ts +++ b/packages/core/test/render3/pipe_spec.ts @@ -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']); }); }); diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index 3bbda34da2..9a93ee483f 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -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(`
                  `); @@ -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(`
                  `); @@ -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(`
                  `); @@ -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, /**
                  {{ 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) diff --git a/packages/core/test/render3/pure_function_spec.ts b/packages/core/test/render3/pure_function_spec.ts index 14246c8f02..b4897bdba8 100644 --- a/packages/core/test/render3/pure_function_spec.ts +++ b/packages/core/test/render3/pure_function_spec.ts @@ -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); /** * * @@ -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}); }); diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index 4c65098272..0bbb52be60 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -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, /** * * @@ -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('
                  '); expect((queryInstance !.changes as EventEmitter).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(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(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(2); } }, - 8, [ShallowQueryDirective, DeepQueryDirective]); + 8, 0, [ShallowQueryDirective, DeepQueryDirective]); const fixture = new ComponentFixture(AppComponent); expect(shallowInstance !.foos.length).toBe(1); diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 168df0db64..c0c720c207 100644 --- a/packages/core/test/render3/render_util.ts +++ b/packages/core/test/render3/render_util.ts @@ -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, ctx: any, consts: number = 0, + template: ComponentTemplate, 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(componentOrElement: T | RElement): string { } export function createComponent( - name: string, template: ComponentTemplate, consts: number = 0, + name: string, template: ComponentTemplate, consts: number = 0, vars: number = 0, directives: DirectiveTypesOrFactory = [], pipes: PipeTypesOrFactory = [], viewQuery: ComponentTemplate| null = null): ComponentType { 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, diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index b241f7cb42..d79dc7ff0d 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/packages/core/test/render3/renderer_factory_spec.ts @@ -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('
                  '); @@ -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( '
                  '); diff --git a/packages/core/test/render3/view_container_ref_spec.ts b/packages/core/test/render3/view_container_ref_spec.ts index 7144e87a3b..be18553e9d 100644 --- a/packages/core/test/render3/view_container_ref_spec.ts +++ b/packages/core/test/render3/view_container_ref_spec.ts @@ -64,7 +64,7 @@ describe('ViewContainerRef', () => { *

                  */ 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', () => { *
                  */ 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('
                  '); createView('A'); @@ -117,13 +117,13 @@ describe('ViewContainerRef', () => { *
                  */ 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('
                  '); createView('A'); @@ -153,7 +153,7 @@ describe('ViewContainerRef', () => { *
                  */ 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('
                  '); 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('
                  '); 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('

                  '); 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('

                  '); 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('

                  '); 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('

                  '); 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('

                  '); 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', '']);