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

PR Close #25562

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

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

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) {

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) {

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

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

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

packages/compiler/src/render3/view/template.ts

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

packages/core/src/render3/component.ts

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

packages/core/src/render3/component_ref.ts

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

packages/core/src/render3/definition.ts

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

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<T>(
-    hostNode: RElement, templateFn: ComponentTemplate<T>, consts: number, context: T,
+    hostNode: RElement, templateFn: ComponentTemplate<T>, consts: number, vars: number, context: T,
     providedRendererFactory: RendererFactory3, host: LElementNode | null,
     directives?: DirectiveDefListOrFactory | null, pipes?: PipeDefListOrFactory | null,
     sanitizer?: Sanitizer | null): LElementNode {
   if (host == null) {
     resetApplicationState();
     rendererFactory = providedRendererFactory;
-    const tView = getOrCreateTView(templateFn, consts, directives || null, pipes || null, null);
+    const tView =
+        getOrCreateTView(templateFn, consts, vars, directives || null, pipes || null, null);
     host = createLNode(
         -1, TNodeType.Element, hostNode, null, null,
         createLViewData(
@@ -1005,12 +1006,14 @@ function saveResolvedLocalsInData(
  * if it doesn't already exist.
  *
  * @param templateFn The template from which to get static data
+ * @param consts The number of nodes, local refs, and pipes in this view
+ * @param vars The number of bindings and pure function bindings in this view
  * @param directives Directive defs that should be saved on TView
  * @param pipes Pipe defs that should be saved on TView
  * @returns TView
  */
 function getOrCreateTView(
-    templateFn: ComponentTemplate<any>, consts: number,
+    templateFn: ComponentTemplate<any>, consts: number, vars: number,
     directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
     viewQuery: ComponentQuery<any>| null): TView {
   // TODO(misko): reading `ngPrivateData` here is problematic for two reasons
@@ -1022,7 +1025,7 @@ function getOrCreateTView(
 
   return templateFn.ngPrivateData ||
       (templateFn.ngPrivateData =
-           createTView(-1, templateFn, consts, directives, pipes, viewQuery) as never);
+           createTView(-1, templateFn, consts, vars, directives, pipes, viewQuery) as never);
 }
 
 /**
@@ -1035,7 +1038,7 @@ function getOrCreateTView(
  * @param pipes Registry of pipes for this view
  */
 export function createTView(
-    viewIndex: number, templateFn: ComponentTemplate<any>| null, consts: number,
+    viewIndex: number, templateFn: ComponentTemplate<any>| null, consts: number, vars: number,
     directives: DirectiveDefListOrFactory | null, pipes: PipeDefListOrFactory | null,
     viewQuery: ComponentQuery<any>| null): TView {
   ngDevMode && ngDevMode.tView++;
@@ -1146,8 +1149,9 @@ export function hostElement(
   const node = createLNode(
       0, TNodeType.Element, rNode, null, null,
       createLViewData(
-          renderer, getOrCreateTView(
+          renderer,
-                        def.template, def.consts, def.directiveDefs, def.pipeDefs, def.viewQuery),
+          getOrCreateTView(
+              def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery),
           null, def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways, sanitizer));
 
   if (firstTemplatePass) {
@@ -1678,8 +1682,8 @@ export function directiveCreate<T>(
 
 function addComponentLogic<T>(
     directiveIndex: number, instance: T, def: ComponentDefInternal<T>): void {
-  const tView =
+  const tView = getOrCreateTView(
-      getOrCreateTView(def.template, def.consts, def.directiveDefs, def.pipeDefs, def.viewQuery);
+      def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery);
 
   // Only component views should be added to the view tree directly. Embedded views are
   // accessed through their containers because they may be removed / re-added later.
@@ -1857,6 +1861,7 @@ export function createLContainer(
  * @param index The index of the container in the data array
  * @param templateFn Inline template
  * @param consts The number of nodes, local refs, and pipes for this template
+ * @param vars The number of bindings for this template
  * @param tagName The name of the container element, if applicable
  * @param attrs The attrs attached to the container, if applicable
  * @param localRefs A set of local reference bindings on the element.
@@ -1864,15 +1869,15 @@ export function createLContainer(
  *        Defaults to the current element associated with the local-ref.
  */
 export function template(
-    index: number, templateFn: ComponentTemplate<any>| null, consts: number,
+    index: number, templateFn: ComponentTemplate<any>| null, consts: number, vars: number,
     tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null,
     localRefExtractor?: LocalRefExtractor) {
   // TODO: consider a separate node type for templates
   const node = containerInternal(index, tagName || null, attrs || null, localRefs || null);
 
   if (firstTemplatePass) {
-    node.tNode.tViews =
+    node.tNode.tViews = createTView(
-        createTView(-1, templateFn, consts, tView.directiveRegistry, tView.pipeRegistry, null);
+        -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] =
+    containerTViews[viewIndex] = createTView(
-        createTView(viewIndex, null, consts, tView.directiveRegistry, tView.pipeRegistry, null);
+        viewIndex, null, consts, vars, tView.directiveRegistry, tView.pipeRegistry, null);
   }
   return containerTViews[viewIndex];
 }

packages/core/src/render3/interfaces/definition.ts

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

packages/core/test/render3/Inherit_definition_feature_spec.ts

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

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

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

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

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)))));
             }
           }
         });

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

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);
+            const $tmp$ = $r3$.ɵreference(1) as any;
-            $tmp_2$ = $r3$.ɵload(2);
+            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');

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]);
           }

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

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

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) {

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

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

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

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

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

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('<wrapper>a</wrapper>');
+    expect(renderToHtml(template, ctx, 1, 1, defs)).toEqual('<wrapper>a</wrapper>');
 
     ctx.items = [...ctx.items, 'b'];
-    expect(renderToHtml(template, ctx, 1, defs)).toEqual('<wrapper>ab</wrapper>');
+    expect(renderToHtml(template, ctx, 1, 1, defs)).toEqual('<wrapper>ab</wrapper>');
   });
 
 });
@@ -187,6 +190,7 @@ describe('encapsulation', () => {
       type: WrapperComponent,
       selectors: [['wrapper']],
       consts: 1,
+      vars: 0,
       template: function(rf: RenderFlags, ctx: WrapperComponent) {
         if (rf & RenderFlags.Create) {
           element(0, 'encapsulated');
@@ -202,6 +206,7 @@ describe('encapsulation', () => {
       type: EncapsulatedComponent,
       selectors: [['encapsulated']],
       consts: 2,
+      vars: 0,
       template: function(rf: RenderFlags, ctx: EncapsulatedComponent) {
         if (rf & RenderFlags.Create) {
           text(0, 'foo');
@@ -221,6 +226,7 @@ describe('encapsulation', () => {
       type: LeafComponent,
       selectors: [['leaf']],
       consts: 2,
+      vars: 0,
       template: function(rf: RenderFlags, ctx: LeafComponent) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'span');
@@ -252,6 +258,7 @@ describe('encapsulation', () => {
         type: WrapperComponentWith,
         selectors: [['wrapper']],
         consts: 1,
+        vars: 0,
         template: function(rf: RenderFlags, ctx: WrapperComponentWith) {
           if (rf & RenderFlags.Create) {
             element(0, 'leaf');
@@ -270,6 +277,7 @@ describe('encapsulation', () => {
         type: LeafComponentwith,
         selectors: [['leaf']],
         consts: 1,
+        vars: 0,
         template: function(rf: RenderFlags, ctx: LeafComponentwith) {
           if (rf & RenderFlags.Create) {
             elementStart(0, 'span');
@@ -329,6 +337,7 @@ describe('recursive components', () => {
       selectors: [['tree-comp']],
       factory: () => new TreeComponent(),
       consts: 3,
+      vars: 1,
       template: (rf: RenderFlags, ctx: TreeComponent) => {
         if (rf & RenderFlags.Create) {
           text(0);
@@ -340,7 +349,7 @@ describe('recursive components', () => {
           containerRefreshStart(1);
           {
             if (ctx.data.left != null) {
-              let rf0 = embeddedViewStart(0, 1);
+              let rf0 = embeddedViewStart(0, 1, 1);
               if (rf0 & RenderFlags.Create) {
                 element(0, 'tree-comp');
               }
@@ -354,7 +363,7 @@ describe('recursive components', () => {
           containerRefreshStart(2);
           {
             if (ctx.data.right != null) {
-              let rf0 = embeddedViewStart(0, 1);
+              let rf0 = embeddedViewStart(0, 1, 1);
               if (rf0 & RenderFlags.Create) {
                 element(0, 'tree-comp');
               }
@@ -389,12 +398,13 @@ describe('recursive components', () => {
       selectors: [['ng-if-tree']],
       factory: () => new NgIfTree(),
       consts: 3,
+      vars: 3,
       template: (rf: RenderFlags, ctx: NgIfTree) => {
 
         if (rf & RenderFlags.Create) {
           text(0);
-          template(1, IfTemplate, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
+          template(1, IfTemplate, 1, 1, '', [AttributeMarker.SelectOnly, 'ngIf']);
-          template(2, IfTemplate2, 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

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

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

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

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

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

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

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

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

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

packages/core/test/render3/listeners_spec.ts

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

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

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, 3, 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');
 
       // change from null -> some value
       person.name = 'bob';
-      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, 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, 3, 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');
     });
   });
 
@@ -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, 3, 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: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']);
     });
   });

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(`<div mydir="" role="button"></div>`);
@@ -451,7 +453,7 @@ describe('elementProperty', () => {
         if (rf & RenderFlags.Update) {
           elementProperty(0, 'role', bind(ctx.role));
         }
-      }, 1, deps);
+      }, 1, 1, deps);
 
       const fixture = new ComponentFixture(App);
       fixture.component.role = 'listbox';
@@ -471,7 +473,7 @@ describe('elementProperty', () => {
         if (rf & RenderFlags.Create) {
           element(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']);
         }
-      }, 1, deps);
+      }, 1, 0, deps);
 
       const fixture = new ComponentFixture(App);
       expect(fixture.html).toEqual(`<div mydir="" mydirb="" role="button"></div>`);
@@ -486,7 +488,7 @@ describe('elementProperty', () => {
         if (rf & RenderFlags.Create) {
           element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
         }
-      }, 1, deps);
+      }, 1, 0, deps);
 
       const fixture = new ComponentFixture(App);
       expect(fixture.html).toEqual(`<div dir="rtl" mydir="" role="button"></div>`);
@@ -503,7 +505,7 @@ describe('elementProperty', () => {
           { listener('change', () => ctx.onChange()); }
           elementEnd();
         }
-      }, 1, deps);
+      }, 1, 0, deps);
 
       const fixture = new ComponentFixture(App);
       let counter = 0;
@@ -527,7 +529,7 @@ describe('elementProperty', () => {
           element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
           element(1, 'div', ['role', 'listbox', 'myDirB', '']);
         }
-      }, 2, deps);
+      }, 2, 0, deps);
 
       const fixture = new ComponentFixture(App);
       expect(fixture.html)
@@ -557,13 +559,13 @@ describe('elementProperty', () => {
           containerRefreshStart(1);
           {
             if (ctx.condition) {
-              let rf1 = embeddedViewStart(0, 1);
+              let rf1 = embeddedViewStart(0, 1, 0);
               if (rf1 & RenderFlags.Create) {
                 element(0, 'div', ['role', 'button', 'myDirB', '']);
               }
               embeddedViewEnd();
             } else {
-              let rf2 = embeddedViewStart(1, 1);
+              let rf2 = embeddedViewStart(1, 1, 0);
               if (rf2 & RenderFlags.Create) {
                 element(0, 'div', ['role', 'menu']);
               }
@@ -572,7 +574,7 @@ describe('elementProperty', () => {
           }
           containerRefreshEnd();
         }
-      }, 2, deps);
+      }, 2, 0, deps);
 
       const fixture = new ComponentFixture(App);
       fixture.component.condition = true;
@@ -596,6 +598,7 @@ describe('elementProperty', () => {
           type: Comp,
           selectors: [['comp']],
           consts: 3,
+          vars: 1,
           /** <div role="button" dir #dir="myDir"></div> {{ dir.role }} */
           template: function(rf: RenderFlags, ctx: any) {
             if (rf & RenderFlags.Create) {
@@ -625,7 +628,7 @@ describe('elementProperty', () => {
           containerRefreshStart(0);
           {
             for (let i = 0; i < 2; i++) {
-              let rf1 = embeddedViewStart(0, 1);
+              let rf1 = embeddedViewStart(0, 1, 0);
               if (rf1 & RenderFlags.Create) {
                 element(0, 'comp');
               }
@@ -634,7 +637,7 @@ describe('elementProperty', () => {
           }
           containerRefreshEnd();
         }
-      }, 1, [Comp]);
+      }, 1, 0, [Comp]);
 
       const fixture = new ComponentFixture(App);
       expect(fixture.html)

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);
     /**
      * <my-comp [names]="['start', v0, v1, v2, v3, `modified_${v4}`, v5, v6, v7, v8, 'end']">
      * </my-comp>
@@ -352,16 +356,17 @@ describe('array literals', () => {
       }
     }
 
+    renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, 13, directives);
     expect(myComp !.names).toEqual([
       'start', 'a', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
     ]);
 
-    renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, directives);
+    renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 1, 13, directives);
     expect(myComp !.names).toEqual([
       'start', 'a1', 'b', 'c', 'd', 'modified_e', 'f', 'g', 'h', 'i', 'end'
     ]);
 
-    renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e5', 'f', 'g', 'h', 'i'], 1, directives);
+    renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e5', 'f', 'g', 'h', 'i'], 1, 13, directives);
     expect(myComp !.names).toEqual([
       'start', 'a1', 'b', 'c', 'd', 'modified_e5', 'f', 'g', 'h', 'i', 'end'
     ]);
@@ -380,6 +385,7 @@ describe('object literals', () => {
       selectors: [['object-comp']],
       factory: function ObjectComp_Factory() { return objectComp = new ObjectComp(); },
       consts: 0,
+      vars: 1,
       template: function ObjectComp_Template(rf: RenderFlags, ctx: ObjectComp) {},
       inputs: {config: 'config'}
     });
@@ -398,7 +404,7 @@ describe('object literals', () => {
       if (rf & RenderFlags.Update) {
         elementProperty(0, 'config', bind(pureFunction1(1, e0_ff, ctx.name)));
       }
-    }, 1, defs);
+    }, 1, 3, defs);
 
     const fixture = new ComponentFixture(App);
     fixture.component.name = 'slide';
@@ -438,7 +444,7 @@ describe('object literals', () => {
                              5, e0_ff, ctx.name,
                              pureFunction1(3, e0_ff_1, pureFunction1(1, e0_ff_2, ctx.duration)))));
       }
-    }, 1, defs);
+    }, 1, 8, defs);
 
     const fixture = new ComponentFixture(App);
     fixture.component.name = 'slide';
@@ -504,7 +510,7 @@ describe('object literals', () => {
         containerRefreshStart(0);
         {
           for (let i = 0; i < 2; i++) {
-            let rf1 = embeddedViewStart(0, 1);
+            let rf1 = embeddedViewStart(0, 1, 0);
             if (rf1 & RenderFlags.Create) {
               elementStart(0, 'object-comp');
               objectComps.push(loadDirective(0));
@@ -525,12 +531,12 @@ describe('object literals', () => {
     const e0_ff = (v1: any, v2: any) => { return {opacity: v1, duration: v2}; };
 
     const configs = [{opacity: 0, duration: 500}, {opacity: 1, duration: 600}];
-    renderToHtml(Template, {configs}, 1, defs);
+    renderToHtml(Template, {configs}, 1, 4, defs);
     expect(objectComps[0].config).toEqual({opacity: 0, duration: 500});
     expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
 
     configs[0].duration = 1000;
-    renderToHtml(Template, {configs}, 1, defs);
+    renderToHtml(Template, {configs}, 1, 4, defs);
     expect(objectComps[0].config).toEqual({opacity: 0, duration: 1000});
     expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
   });

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(
-                   template(7, null, 0, null, [AttributeMarker.SelectOnly, 'vc']);
+                       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(1, Cmpt_Template_1, 2, 1, null, [], ['tpl', ''], templateRefExtractor);
-                   template(3, null, 0, null, [AttributeMarker.SelectOnly, 'vc']);
+                   template(3, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']);
-                   template(4, null, 0, null, [AttributeMarker.SelectOnly, 'vc']);
+                   template(4, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']);
                  }
 
                  if (rf & RenderFlags.Update) {
@@ -1291,7 +1296,8 @@ describe('query', () => {
             type: MyApp,
             factory: () => new MyApp(),
             selectors: [['my-app']],
-            consts: 4,
+            consts: 5,
+            vars: 1,
             /**
              * <ng-template #tpl><span #foo id="from_tpl"></span></ng-template>
              * <ng-template [ngTemplateOutlet]="show ? tpl : null"></ng-template>
@@ -1299,9 +1305,9 @@ describe('query', () => {
             template: (rf: RenderFlags, myApp: MyApp) => {
               if (rf & RenderFlags.Create) {
                 template(
-                    1, MyApp_Template_1, 2, undefined, undefined, ['tpl', ''],
+                    1, MyApp_Template_1, 2, 0, undefined, undefined, ['tpl', ''],
                     templateRefExtractor);
-                template(3, null, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
+                template(3, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
               }
               if (rf & RenderFlags.Update) {
                 const tplRef = reference(2);
@@ -1361,7 +1367,7 @@ describe('query', () => {
                 containerRefreshStart(1);
                 {
                   if (ctx.exp) {
-                    let rf1 = embeddedViewStart(1, 2);
+                    let rf1 = embeddedViewStart(1, 2, 0);
                     {
                       if (rf1 & RenderFlags.Create) {
                         element(0, 'div', null, ['foo', '']);
@@ -1374,7 +1380,7 @@ describe('query', () => {
                 containerRefreshEnd();
               }
             },
-            1, [], [],
+            2, 0, [], [],
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
                 query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@@ -1426,7 +1432,7 @@ describe('query', () => {
                    containerRefreshStart(3);
                    {
                      if (ctx.exp) {
-                       let rf1 = embeddedViewStart(1, 2);
+                       let rf1 = embeddedViewStart(1, 2, 0);
                        {
                          if (rf1 & RenderFlags.Create) {
                            element(0, 'div', null, ['foo', '']);
@@ -1439,7 +1445,7 @@ describe('query', () => {
                    containerRefreshEnd();
                  }
                },
-               5, [], [],
+               6, 0, [], [],
                function(rf: RenderFlags, ctx: any) {
                  if (rf & RenderFlags.Create) {
                    query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@@ -1493,7 +1499,7 @@ describe('query', () => {
                 containerRefreshStart(1);
                 {
                   if (ctx.exp1) {
-                    let rf0 = embeddedViewStart(0, 2);
+                    let rf0 = embeddedViewStart(0, 2, 0);
                     {
                       if (rf0 & RenderFlags.Create) {
                         element(0, 'div', null, ['foo', '']);
@@ -1503,7 +1509,7 @@ describe('query', () => {
                     embeddedViewEnd();
                   }
                   if (ctx.exp2) {
-                    let rf1 = embeddedViewStart(1, 2);
+                    let rf1 = embeddedViewStart(1, 2, 0);
                     {
                       if (rf1 & RenderFlags.Create) {
                         element(0, 'span', null, ['foo', '']);
@@ -1516,7 +1522,7 @@ describe('query', () => {
                 containerRefreshEnd();
               }
             },
-            1, [], [],
+            2, 0, [], [],
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
                 query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@@ -1566,7 +1572,7 @@ describe('query', () => {
                 containerRefreshStart(1);
                 {
                   if (ctx.exp1) {
-                    let rf0 = embeddedViewStart(0, 3);
+                    let rf0 = embeddedViewStart(0, 3, 0);
                     {
                       if (rf0 & RenderFlags.Create) {
                         element(0, 'div', null, ['foo', '']);
@@ -1577,7 +1583,7 @@ describe('query', () => {
                         containerRefreshStart(2);
                         {
                           if (ctx.exp2) {
-                            let rf2 = embeddedViewStart(0, 2);
+                            let rf2 = embeddedViewStart(0, 2, 0);
                             {
                               if (rf2) {
                                 element(0, 'span', null, ['foo', '']);
@@ -1596,7 +1602,7 @@ describe('query', () => {
                 containerRefreshEnd();
               }
             },
-            1, [], [],
+            2, 0, [], [],
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
                 query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@@ -1651,7 +1657,7 @@ describe('query', () => {
                 containerRefreshStart(2);
                 {
                   if (ctx.exp) {
-                    let rf0 = embeddedViewStart(0, 4);
+                    let rf0 = embeddedViewStart(0, 4, 0);
                     {
                       if (rf0 & RenderFlags.Create) {
                         elementStart(0, 'div', null, ['foo', '']);
@@ -1665,7 +1671,7 @@ describe('query', () => {
                 containerRefreshEnd();
               }
             },
-            3, [], [],
+            5, 0, [], [],
             function(rf: RenderFlags, ctx: any) {
               if (rf & RenderFlags.Create) {
                 query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@@ -1746,7 +1752,7 @@ describe('query', () => {
               element(1, 'div', null, ['foo', '']);
             }
           },
-          1, [], [],
+          2, 0, [], [],
           function(rf: RenderFlags, ctx: any) {
             if (rf & RenderFlags.Create) {
               query(0, ['foo'], false, QUERY_READ_FROM_NODE);
@@ -1764,7 +1770,7 @@ describe('query', () => {
         containerRefreshStart(0);
         {
           if (condition) {
-            let rf1 = embeddedViewStart(1, 1);
+            let rf1 = embeddedViewStart(1, 1, 0);
             {
               if (rf1 & RenderFlags.Create) {
                 element(0, 'some-component-with-query');
@@ -1782,7 +1788,8 @@ describe('query', () => {
        * %}
        */
       let condition = true;
-      const t = new TemplateFixture(createTemplate, updateTemplate, 1, [SimpleComponentWithQuery]);
+      const t =
+          new TemplateFixture(createTemplate, updateTemplate, 1, 0, [SimpleComponentWithQuery]);
       expect(t.html).toEqual('<some-component-with-query><div></div></some-component-with-query>');
       expect((queryInstance !.changes as EventEmitter<any>).closed).toBeFalsy();
 
@@ -1820,11 +1827,12 @@ describe('query', () => {
         'app',
         function(rf: RenderFlags, ctx: any) {
           if (rf & RenderFlags.Create) {
-            template(1, AppComponent_Template_1, 1, null, [AttributeMarker.SelectOnly, 'someDir']);
+            template(
+                1, AppComponent_Template_1, 1, 0, null, [AttributeMarker.SelectOnly, 'someDir']);
             element(2, 'div', null, ['foo', '']);
           }
         },
-        3, [SomeDir], [],
+        4, 0, [SomeDir], [],
         function(rf: RenderFlags, ctx: any) {
           if (rf & RenderFlags.Create) {
             query(0, ['foo'], true, QUERY_READ_FROM_NODE);
@@ -1885,6 +1893,7 @@ describe('query', () => {
         factory: () => new ShallowComp(),
         template: function(rf: RenderFlags, ctx: any) {},
         consts: 0,
+        vars: 0,
         contentQueries:
             () => { registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE)); },
         contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
@@ -1908,7 +1917,7 @@ describe('query', () => {
           { element(1, 'span', null, ['foo', '']); }
           elementEnd();
         }
-      }, 3, [WithContentDirective]);
+      }, 3, 0, [WithContentDirective]);
 
       const fixture = new ComponentFixture(AppComponent);
       expect(withContentInstance !.foos.length)
@@ -1934,7 +1943,7 @@ describe('query', () => {
         if (rf & RenderFlags.Create) {
           element(0, 'div', ['with-content', ''], ['foo', '']);
         }
-      }, 2, [WithContentDirective]);
+      }, 2, 0, [WithContentDirective]);
 
       const fixture = new ComponentFixture(AppComponent);
       expect(withContentInstance !.foos.length)
@@ -1956,13 +1965,13 @@ describe('query', () => {
       const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'shallow-comp');
-          { template(1, IfTemplate, 2, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
+          { template(1, IfTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
           elementEnd();
         }
         if (rf & RenderFlags.Update) {
           elementProperty(1, 'ngIf', bind(ctx.showing));
         }
-      }, 2, [ShallowComp, NgIf]);
+      }, 2, 1, [ShallowComp, NgIf]);
 
       const fixture = new ComponentFixture(AppComponent);
       const qList = shallowCompInstance !.foos;
@@ -1999,7 +2008,7 @@ describe('query', () => {
               element(4, 'div', ['id', 'after'], ['bar', '']);
             }
           },
-          5, [WithContentDirective], [],
+          6, 0, [WithContentDirective], [],
           function(rf: RenderFlags, ctx: any) {
             if (rf & RenderFlags.Create) {
               query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
@@ -2039,7 +2048,7 @@ describe('query', () => {
               element(4, 'div', null, ['foo', '']);
             }
           },
-          5, [WithContentDirective], [],
+          6, 0, [WithContentDirective], [],
           function(rf: RenderFlags, ctx: any) {
             if (rf & RenderFlags.Create) {
               query(0, ['bar'], true, QUERY_READ_FROM_NODE);
@@ -2108,7 +2117,7 @@ describe('query', () => {
               inInstance = load<QueryDirective>(5);
             }
           },
-          10, [QueryDirective]);
+          10, 0, [QueryDirective]);
 
       const fixture = new ComponentFixture(AppComponent);
       expect(outInstance !.fooBars.length).toBe(3);
@@ -2165,7 +2174,7 @@ describe('query', () => {
               inInstance = load<QueryDirective>(3);
             }
           },
-          7, [QueryDirective]);
+          7, 0, [QueryDirective]);
 
       const fixture = new ComponentFixture(AppComponent);
       expect(outInstance !.fooBars.length).toBe(1);
@@ -2245,7 +2254,7 @@ describe('query', () => {
                  deepInstance = load<DeepQueryDirective>(2);
                }
              },
-             8, [ShallowQueryDirective, DeepQueryDirective]);
+             8, 0, [ShallowQueryDirective, DeepQueryDirective]);
 
          const fixture = new ComponentFixture(AppComponent);
          expect(shallowInstance !.foos.length).toBe(1);

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

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 =
+    const t = new TemplateFixture(
-        new TemplateFixture(createTemplate, updateTemplate, 2, null, null, null, rendererFactory);
+        createTemplate, updateTemplate, 2, 0, null, null, null, rendererFactory);
 
     expect(t.html).toEqual('<div><span></span><span></span><span></span></div>');
 
@@ -256,6 +260,7 @@ describe('Renderer2 destruction hooks', () => {
         type: SimpleComponent,
         selectors: [['simple']],
         consts: 1,
+        vars: 0,
         template: function(rf: RenderFlags, ctx: SimpleComponent) {
           if (rf & RenderFlags.Create) {
             element(0, 'span');
@@ -277,7 +282,7 @@ describe('Renderer2 destruction hooks', () => {
       containerRefreshStart(1);
       {
         if (condition) {
-          let rf1 = embeddedViewStart(1, 3);
+          let rf1 = embeddedViewStart(1, 3, 0);
           {
             if (rf1 & RenderFlags.Create) {
               element(0, 'simple');
@@ -292,7 +297,7 @@ describe('Renderer2 destruction hooks', () => {
     }
 
     const t = new TemplateFixture(
-        createTemplate, updateTemplate, 2, [SimpleComponent], null, null, rendererFactory);
+        createTemplate, updateTemplate, 2, 0, [SimpleComponent], null, null, rendererFactory);
 
     expect(t.html).toEqual(
         '<div><simple><span></span></simple><span></span><simple><span></span></simple></div>');

packages/core/test/render3/view_container_ref_spec.ts

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