feat(core): add ngOnInit and ngDoCheck support in render3 (#21156)

PR Close #21156

modules/benchmarks/src/tree/render3/tree.ts

@@ -61,6 +61,7 @@ export class TreeComponent {
               e();
             }
             p(0, 'data', b(ctx.data.left));
+            TreeComponent.ngComponentDef.h(1, 0);
             TreeComponent.ngComponentDef.r(1, 0);
           }
           v();
@@ -78,6 +79,7 @@ export class TreeComponent {
               e();
             }
             p(0, 'data', b(ctx.data.right));
+            TreeComponent.ngComponentDef.h(1, 0);
             TreeComponent.ngComponentDef.r(1, 0);
           }
           v();

packages/core/src/render3/definition.ts

@@ -39,6 +39,7 @@ export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): Co
     template: (componentDefinition as ComponentDefArgs<T>).template || null !,
     r: componentDefinition.refresh ||
         function(d: number, e: number) { componentRefresh(d, e, componentDefinition.template); },
+    h: componentDefinition.hostBindings || noop,
     inputs: invertObject(componentDefinition.inputs),
     outputs: invertObject(componentDefinition.outputs),
     methods: invertObject(componentDefinition.methods),
@@ -59,6 +60,8 @@ export function PublicFeature<T>(definition: DirectiveDef<T>) {
 
 const EMPTY = {};
 
+function noop() {}
+
 /** Swaps the keys and values of an object. */
 function invertObject(obj: any): any {
   if (obj == null) return EMPTY;

packages/core/src/render3/definition_interfaces.ts

@@ -68,24 +68,32 @@ export interface DirectiveDef<T> {
   n(): T;
 
   /**
-   * Refresh method. Used by the containing component to signal
+   * Refreshes the view of the component. Also calls lifecycle hooks like
-   * to the directive that it should be refreshed. (Directives
+   * ngAfterViewInit, if they are defined on the component.
-   * usually call life cycle methods at this point.)
    *
-   * NOTE: this property is short (1 char) because it is used in
+   * NOTE: this property is short (1 char) because it is used in component
-   * component templates which is sensitive to size.
+   * templates which is sensitive to size.
    *
    * @param directiveIndex index of the directive in the containing template
    * @param elementIndex index of an host element for a given directive.
    */
   r(directiveIndex: number, elementIndex: number): void;
+
+  /**
+   * Refreshes host bindings on the associated directive. Also calls lifecycle hooks
+   * like ngOnInit and ngDoCheck, if they are defined on the directive.
+   */
+  // Note: This call must be separate from r() because hooks like ngOnInit need to
+  // be called breadth-first across a view before processing onInits in children
+  // (for backwards compatibility). Child template processing thus needs to be
+  // delayed until all inputs and host bindings in a view have been checked.
+  h(directiveIndex: number, elementIndex: number): void;
 }
 
 export interface ComponentDef<T> extends DirectiveDef<T> {
   /**
-   * Refresh method. Used by the containing component to signal
+   * Refreshes the view of the component. Also calls lifecycle hooks like
-   * to the directive that it should be refreshed. (Directives
+   * ngAfterViewInit, if they are defined on the component.
-   * usually call life cycle methods at this point.)
    *
    * NOTE: this property is short (1 char) because it is used in
    * component templates which is sensitive to size.
@@ -131,6 +139,7 @@ export interface ComponentDefArgs<T> extends DirectiveDefArgs<T> {
   tag: string;
   template: ComponentTemplate<T>;
   refresh?: (directiveIndex: number, elementIndex: number) => void;
+  hostBindings?: (directiveIndex: number, elementIndex: number) => void;
   features?: ComponentDefFeature[];
   rendererType?: RendererType2;
 }

packages/core/test/render3/component_spec.ts

@@ -72,6 +72,7 @@ describe('encapsulation', () => {
           { D(1, EncapsulatedComponent.ngComponentDef.n(), EncapsulatedComponent.ngComponentDef); }
           e();
         }
+        EncapsulatedComponent.ngComponentDef.h(1, 0);
         EncapsulatedComponent.ngComponentDef.r(1, 0);
       },
       factory: () => new WrapperComponent,
@@ -89,6 +90,7 @@ describe('encapsulation', () => {
           { D(2, LeafComponent.ngComponentDef.n(), LeafComponent.ngComponentDef); }
           e();
         }
+        LeafComponent.ngComponentDef.h(2, 1);
         LeafComponent.ngComponentDef.r(2, 1);
       },
       factory: () => new EncapsulatedComponent,
@@ -137,6 +139,7 @@ describe('encapsulation', () => {
             { D(1, LeafComponentwith.ngComponentDef.n(), LeafComponentwith.ngComponentDef); }
             e();
           }
+          LeafComponentwith.ngComponentDef.h(1, 0);
           LeafComponentwith.ngComponentDef.r(1, 0);
         },
         factory: () => new WrapperComponentWith,

packages/core/test/render3/content_spec.ts

@@ -37,6 +37,7 @@ describe('content projection', () => {
         }
         e();
       }
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -59,6 +60,7 @@ describe('content projection', () => {
         }
         e();
       }
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -83,6 +85,7 @@ describe('content projection', () => {
           P(3, 0);
         }
         e();
+        GrandChild.ngComponentDef.h(2, 1);
         GrandChild.ngComponentDef.r(2, 1);
       }
     });
@@ -98,6 +101,7 @@ describe('content projection', () => {
         }
         e();
       }
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -136,6 +140,7 @@ describe('content projection', () => {
         }
       }
       cr();
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -175,6 +180,7 @@ describe('content projection', () => {
         }
       }
       cr();
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -225,6 +231,7 @@ describe('content projection', () => {
         }
       }
       cr();
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -285,6 +292,7 @@ describe('content projection', () => {
         }
         e();
       }
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -340,6 +348,7 @@ describe('content projection', () => {
            }
            e();
          }
+         Child.ngComponentDef.h(1, 0);
          Child.ngComponentDef.r(1, 0);
        });
        const parent = renderComponent(Parent);
@@ -379,6 +388,7 @@ describe('content projection', () => {
         }
         e();
       }
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -439,6 +449,7 @@ describe('content projection', () => {
         }
         e();
       }
+      Child.ngComponentDef.h(1, 0);
       Child.ngComponentDef.r(1, 0);
     });
     const parent = renderComponent(Parent);
@@ -489,6 +500,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
 
@@ -536,6 +548,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
 
@@ -583,6 +596,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
 
@@ -629,6 +643,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
 
@@ -676,6 +691,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
 
@@ -724,6 +740,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(0, 0);
         Child.ngComponentDef.r(0, 0);
       });
 
@@ -772,6 +789,7 @@ describe('content projection', () => {
             e();
           }
           e();
+          GrandChild.ngComponentDef.h(2, 1);
           GrandChild.ngComponentDef.r(2, 1);
         }
       });
@@ -794,6 +812,7 @@ describe('content projection', () => {
           }
           e();
         }
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
 
@@ -846,6 +865,7 @@ describe('content projection', () => {
           }
         }
         cr();
+        Child.ngComponentDef.h(1, 0);
         Child.ngComponentDef.r(1, 0);
       });
       const parent = renderComponent(Parent);

packages/core/test/render3/integration_spec.ts

@@ -234,6 +234,7 @@ describe('iv integration test', () => {
           { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
           e();
         }
+        TodoComponent.ngComponentDef.h(1, 0);
         TodoComponent.ngComponentDef.r(1, 0);
       }
 
@@ -248,6 +249,7 @@ describe('iv integration test', () => {
           e();
           T(2, 'two');
         }
+        TodoComponent.ngComponentDef.h(1, 0);
         TodoComponent.ngComponentDef.r(1, 0);
       }
       expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>two');
@@ -267,6 +269,8 @@ describe('iv integration test', () => {
           { D(3, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
           e();
         }
+        TodoComponent.ngComponentDef.h(1, 0);
+        TodoComponent.ngComponentDef.h(3, 2);
         TodoComponent.ngComponentDef.r(1, 0);
         TodoComponent.ngComponentDef.r(3, 2);
       }
@@ -290,11 +294,9 @@ describe('iv integration test', () => {
             t(0, b(ctx.title));
           },
           factory: () => cmptInstance = new TodoComponentHostBinding,
-          refresh: function(directiveIndex: number, elementIndex: number): void {
+          hostBindings: function(directiveIndex: number, elementIndex: number): void {
             // host bindings
             p(elementIndex, 'title', b(D<TodoComponentHostBinding>(directiveIndex).title));
-            // refresh component's template
-            r(directiveIndex, elementIndex, this.template);
           }
         });
       }
@@ -308,6 +310,7 @@ describe('iv integration test', () => {
           }
           e();
         }
+        TodoComponentHostBinding.ngComponentDef.h(1, 0);
         TodoComponentHostBinding.ngComponentDef.r(1, 0);
       }
 
@@ -341,6 +344,7 @@ describe('iv integration test', () => {
           { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
           e();
         }
+        MyComp.ngComponentDef.h(1, 0);
         MyComp.ngComponentDef.r(1, 0);
       }
 
@@ -389,6 +393,7 @@ describe('iv integration test', () => {
           e();
         }
         p(0, 'condition', b(ctx.condition));
+        MyComp.ngComponentDef.h(1, 0);
         MyComp.ngComponentDef.r(1, 0);
       }
 

packages/core/test/render3/lifecycle_spec.ts

@@ -6,12 +6,363 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {C, ComponentTemplate, D, E, L, LifecycleHook, T, V, b, c, cR, cr, defineComponent, e, l, p, v} from '../../src/render3/index';
+import {C, ComponentDef, ComponentTemplate, D, E, L, LifecycleHook, T, V, b, c, cR, cr, defineComponent, e, l, p, r, v} from '../../src/render3/index';
 
 import {containerEl, renderToHtml} from './render_util';
 
 describe('lifecycles', () => {
 
+  describe('onInit', () => {
+    let events: string[];
+
+    beforeEach(() => { events = []; });
+
+    let Comp = createOnInitComponent('comp', (ctx: any, cm: boolean) => {});
+    let Parent = createOnInitComponent('parent', (ctx: any, cm: boolean) => {
+      if (cm) {
+        E(0, Comp.ngComponentDef);
+        { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+        e();
+      }
+      p(0, 'val', b(ctx.val));
+      Comp.ngComponentDef.h(1, 0);
+      Comp.ngComponentDef.r(1, 0);
+    });
+
+    function createOnInitComponent(name: string, template: ComponentTemplate<any>) {
+      return class Component {
+        val: string = '';
+        ngOnInit() { events.push(`${name}${this.val}`); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          tag: name,
+          factory: () => new Component(),
+          hostBindings: function(directiveIndex: number, elementIndex: number):
+              void { l(LifecycleHook.ON_INIT) && D<Component>(directiveIndex).ngOnInit(); },
+          inputs: {val: 'val'}, template
+        });
+      };
+    }
+
+    it('should call onInit method after inputs are set in creation mode (and not in update mode)',
+       () => {
+         /** <comp [val]="val"></comp> */
+         function Template(ctx: any, cm: boolean) {
+           if (cm) {
+             E(0, Comp.ngComponentDef);
+             { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+             e();
+           }
+           p(0, 'val', b(ctx.val));
+           Comp.ngComponentDef.h(1, 0);
+           Comp.ngComponentDef.r(1, 0);
+         }
+
+         renderToHtml(Template, {val: '1'});
+         expect(events).toEqual(['comp1']);
+
+         renderToHtml(Template, {val: '2'});
+         expect(events).toEqual(['comp1']);
+       });
+
+    it('should call parent onInit before child onInit', () => {
+      /**
+       * <parent></parent>
+       * parent temp: <comp></comp>
+       */
+
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Parent.ngComponentDef);
+          { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+          e();
+        }
+        Parent.ngComponentDef.h(1, 0);
+        Parent.ngComponentDef.r(1, 0);
+      }
+
+      renderToHtml(Template, {});
+      expect(events).toEqual(['parent', 'comp']);
+    });
+
+    it('should call all parent onInits across view before calling children onInits', () => {
+      /**
+       * <parent [val]="1"></parent>
+       * <parent [val]="2"></parent>
+       *
+       * parent temp: <comp [val]="val"></comp>
+       */
+
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Parent.ngComponentDef);
+          { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+          e();
+          E(2, Parent.ngComponentDef);
+          { D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+          e();
+        }
+        p(0, 'val', 1);
+        Parent.ngComponentDef.h(1, 0);
+        p(2, 'val', 2);
+        Parent.ngComponentDef.h(3, 2);
+        Parent.ngComponentDef.r(1, 0);
+        Parent.ngComponentDef.r(3, 2);
+      }
+
+      renderToHtml(Template, {});
+      expect(events).toEqual(['parent1', 'parent2', 'comp1', 'comp2']);
+    });
+
+
+    it('should call onInit every time a new view is created (if block)', () => {
+      /**
+       * % if (condition) {
+       *   <comp></comp>
+       * % }
+       */
+
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          C(0);
+          c();
+        }
+        cR(0);
+        {
+          if (ctx.condition) {
+            if (V(0)) {
+              E(0, Comp.ngComponentDef);
+              { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+              e();
+            }
+            Comp.ngComponentDef.h(1, 0);
+            Comp.ngComponentDef.r(1, 0);
+            v();
+          }
+        }
+        cr();
+      }
+
+      renderToHtml(Template, {condition: true});
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: false});
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {condition: true});
+      expect(events).toEqual(['comp', 'comp']);
+    });
+
+    it('should call onInit properly in for loop', () => {
+      /**
+       *  <comp [val]="1"></comp>
+       * % for (let j = 2; j < 5; j++) {
+       *   <comp [val]="j"></comp>
+       * % }
+       *  <comp [val]="5"></comp>
+       */
+
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Comp.ngComponentDef);
+          { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+          e();
+          C(2);
+          c();
+          E(3, Comp.ngComponentDef);
+          { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+          e();
+        }
+        p(0, 'val', 1);
+        Comp.ngComponentDef.h(1, 0);
+        p(3, 'val', 5);
+        Comp.ngComponentDef.h(4, 3);
+        cR(2);
+        {
+          for (let j = 2; j < 5; j++) {
+            if (V(0)) {
+              E(0, Comp.ngComponentDef);
+              { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+              e();
+            }
+            p(0, 'val', j);
+            Comp.ngComponentDef.h(1, 0);
+            Comp.ngComponentDef.r(1, 0);
+            v();
+          }
+        }
+        cr();
+        Comp.ngComponentDef.r(1, 0);
+        Comp.ngComponentDef.r(4, 3);
+      }
+
+      renderToHtml(Template, {});
+
+      // onInit is called top to bottom, so top level comps (1 and 5) are called
+      // before the comps inside the for loop's embedded view (2, 3, and 4)
+      expect(events).toEqual(['comp1', 'comp5', 'comp2', 'comp3', 'comp4']);
+    });
+
+    it('should call onInit properly in for loop with children', () => {
+      /**
+       *  <parent [val]="1"></parent>
+       * % for (let j = 2; j < 5; j++) {
+       *   <parent [val]="j"></parent>
+       * % }
+       *  <parent [val]="5"></parent>
+       */
+
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Parent.ngComponentDef);
+          { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+          e();
+          C(2);
+          c();
+          E(3, Parent.ngComponentDef);
+          { D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+          e();
+        }
+        p(0, 'val', 1);
+        Parent.ngComponentDef.h(1, 0);
+        p(3, 'val', 5);
+        Parent.ngComponentDef.h(4, 3);
+        cR(2);
+        {
+          for (let j = 2; j < 5; j++) {
+            if (V(0)) {
+              E(0, Parent.ngComponentDef);
+              { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+              e();
+            }
+            p(0, 'val', j);
+            Parent.ngComponentDef.h(1, 0);
+            Parent.ngComponentDef.r(1, 0);
+            v();
+          }
+        }
+        cr();
+        Parent.ngComponentDef.r(1, 0);
+        Parent.ngComponentDef.r(4, 3);
+      }
+
+      renderToHtml(Template, {});
+
+      // onInit is called top to bottom, so top level comps (1 and 5) are called
+      // before the comps inside the for loop's embedded view (2, 3, and 4)
+      expect(events).toEqual([
+        'parent1', 'parent5', 'parent2', 'comp2', 'parent3', 'comp3', 'parent4', 'comp4', 'comp1',
+        'comp5'
+      ]);
+    });
+
+  });
+
+
+  describe('doCheck', () => {
+    let events: string[];
+    let allEvents: string[];
+
+    beforeEach(() => {
+      events = [];
+      allEvents = [];
+    });
+
+    let Comp = createDoCheckComponent('comp', (ctx: any, cm: boolean) => {});
+    let Parent = createDoCheckComponent('parent', (ctx: any, cm: boolean) => {
+      if (cm) {
+        E(0, Comp.ngComponentDef);
+        { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+        e();
+      }
+      Comp.ngComponentDef.h(1, 0);
+      Comp.ngComponentDef.r(1, 0);
+    });
+
+    function createDoCheckComponent(name: string, template: ComponentTemplate<any>) {
+      return class Component {
+        ngDoCheck() {
+          events.push(name);
+          allEvents.push('ngDoCheck ' + name);
+        }
+
+        ngOnInit() { allEvents.push('ngOnInit ' + name); }
+
+        static ngComponentDef = defineComponent({
+          type: Component,
+          tag: name,
+          factory: () => new Component(),
+          hostBindings: function(
+              this: ComponentDef<Component>, directiveIndex: number, elementIndex: number): void {
+            l(LifecycleHook.ON_INIT) && D<Component>(directiveIndex).ngOnInit();
+            D<Component>(directiveIndex).ngDoCheck();
+          },
+          template
+        });
+      };
+    }
+
+    it('should call doCheck on every refresh', () => {
+      /** <comp></comp> */
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Comp.ngComponentDef);
+          { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+          e();
+        }
+        Comp.ngComponentDef.h(1, 0);
+        Comp.ngComponentDef.r(1, 0);
+      }
+
+      renderToHtml(Template, {});
+      expect(events).toEqual(['comp']);
+
+      renderToHtml(Template, {});
+      expect(events).toEqual(['comp', 'comp']);
+    });
+
+    it('should call parent doCheck before child doCheck', () => {
+      /**
+       * <parent></parent>
+       * parent temp: <comp></comp>
+       */
+
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Parent.ngComponentDef);
+          { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
+          e();
+        }
+        Parent.ngComponentDef.h(1, 0);
+        Parent.ngComponentDef.r(1, 0);
+      }
+
+      renderToHtml(Template, {});
+      expect(events).toEqual(['parent', 'comp']);
+    });
+
+    it('should call ngOnInit before ngDoCheck if creation mode', () => {
+      /** <comp></comp> */
+      function Template(ctx: any, cm: boolean) {
+        if (cm) {
+          E(0, Comp.ngComponentDef);
+          { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
+          e();
+        }
+        Comp.ngComponentDef.h(1, 0);
+        Comp.ngComponentDef.r(1, 0);
+      }
+
+      renderToHtml(Template, {});
+      expect(allEvents).toEqual(['ngOnInit comp', 'ngDoCheck comp']);
+
+      renderToHtml(Template, {});
+      expect(allEvents).toEqual(['ngOnInit comp', 'ngDoCheck comp', 'ngDoCheck comp']);
+    });
+
+  });
+
   describe('onDestroy', () => {
     let events: string[];
 
@@ -24,6 +375,7 @@ describe('lifecycles', () => {
         { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
         e();
       }
+      Comp.ngComponentDef.h(1, 0);
       Comp.ngComponentDef.r(1, 0);
     });
 
@@ -66,6 +418,7 @@ describe('lifecycles', () => {
               { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
               e();
             }
+            Comp.ngComponentDef.h(1, 0);
             Comp.ngComponentDef.r(1, 0);
             v();
           }
@@ -103,7 +456,9 @@ describe('lifecycles', () => {
               e();
             }
             p(0, 'val', b('1'));
+            Comp.ngComponentDef.h(1, 0);
             p(2, 'val', b('2'));
+            Comp.ngComponentDef.h(3, 2);
             Comp.ngComponentDef.r(1, 0);
             Comp.ngComponentDef.r(3, 2);
             v();
@@ -139,6 +494,7 @@ describe('lifecycles', () => {
               { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
               e();
             }
+            Parent.ngComponentDef.h(1, 0);
             Parent.ngComponentDef.r(1, 0);
             v();
           }
@@ -167,6 +523,7 @@ describe('lifecycles', () => {
           { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
           e();
         }
+        Parent.ngComponentDef.h(1, 0);
         Parent.ngComponentDef.r(1, 0);
       });
 
@@ -183,6 +540,7 @@ describe('lifecycles', () => {
               { D(1, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); }
               e();
             }
+            Grandparent.ngComponentDef.h(1, 0);
             Grandparent.ngComponentDef.r(1, 0);
             v();
           }
@@ -226,7 +584,9 @@ describe('lifecycles', () => {
               e();
             }
             p(0, 'val', b('1'));
-            Comp.ngComponentDef.r(1, 0);
+            Comp.ngComponentDef.h(1, 0);
+            p(3, 'val', b('3'));
+            Comp.ngComponentDef.h(4, 3);
             cR(2);
             {
               if (ctx.condition2) {
@@ -236,12 +596,13 @@ describe('lifecycles', () => {
                   e();
                 }
                 p(0, 'val', b('2'));
+                Comp.ngComponentDef.h(1, 0);
                 Comp.ngComponentDef.r(1, 0);
                 v();
               }
             }
             cr();
-            p(3, 'val', b('3'));
+            Comp.ngComponentDef.r(1, 0);
             Comp.ngComponentDef.r(4, 3);
             v();
           }
@@ -304,7 +665,9 @@ describe('lifecycles', () => {
               e();
             }
             p(0, 'val', b('1'));
-            Comp.ngComponentDef.r(1, 0);
+            Comp.ngComponentDef.h(1, 0);
+            p(3, 'val', b('5'));
+            Comp.ngComponentDef.h(4, 3);
             cR(2);
             {
               for (let j = 2; j < ctx.len; j++) {
@@ -314,12 +677,13 @@ describe('lifecycles', () => {
                   e();
                 }
                 p(0, 'val', b(j));
+                Comp.ngComponentDef.h(1, 0);
                 Comp.ngComponentDef.r(1, 0);
                 v();
               }
             }
             cr();
-            p(3, 'val', b('5'));
+            Comp.ngComponentDef.r(1, 0);
             Comp.ngComponentDef.r(4, 3);
             v();
           }
@@ -390,6 +754,7 @@ describe('lifecycles', () => {
               }
               e();
             }
+            Comp.ngComponentDef.h(3, 2);
             Comp.ngComponentDef.r(3, 2);
             v();
           }

packages/core/test/render3/listeners_spec.ts

@@ -211,6 +211,8 @@ describe('event listeners', () => {
             { D(4, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
             e();
           }
+          MyComp.ngComponentDef.h(2, 1);
+          MyComp.ngComponentDef.h(4, 3);
           MyComp.ngComponentDef.r(2, 1);
           MyComp.ngComponentDef.r(4, 3);
           v();

packages/core/test/render3/outputs_spec.ts

@@ -51,6 +51,7 @@ describe('outputs', () => {
         }
         e();
       }
+      ButtonToggle.ngComponentDef.h(1, 0);
       ButtonToggle.ngComponentDef.r(1, 0);
     }
 
@@ -77,6 +78,7 @@ describe('outputs', () => {
         }
         e();
       }
+      ButtonToggle.ngComponentDef.h(1, 0);
       ButtonToggle.ngComponentDef.r(1, 0);
     }
 
@@ -103,6 +105,7 @@ describe('outputs', () => {
         }
         e();
       }
+      ButtonToggle.ngComponentDef.h(1, 0);
       ButtonToggle.ngComponentDef.r(1, 0);
     }
 
@@ -140,6 +143,7 @@ describe('outputs', () => {
             }
             e();
           }
+          ButtonToggle.ngComponentDef.h(1, 0);
           ButtonToggle.ngComponentDef.r(1, 0);
           v();
         }
@@ -194,6 +198,7 @@ describe('outputs', () => {
                 }
                 e();
               }
+              ButtonToggle.ngComponentDef.h(1, 0);
               ButtonToggle.ngComponentDef.r(1, 0);
               v();
             }
@@ -270,6 +275,8 @@ describe('outputs', () => {
             { D(5, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); }
             e();
           }
+          ButtonToggle.ngComponentDef.h(3, 2);
+          DestroyComp.ngComponentDef.h(5, 4);
           ButtonToggle.ngComponentDef.r(3, 2);
           DestroyComp.ngComponentDef.r(5, 4);
           v();
@@ -350,6 +357,7 @@ describe('outputs', () => {
         }
         e();
       }
+      ButtonToggle.ngComponentDef.h(1, 0);
       ButtonToggle.ngComponentDef.r(1, 0);
     }
 
@@ -385,6 +393,7 @@ describe('outputs', () => {
         e();
       }
       p(0, 'change', b(ctx.change));
+      ButtonToggle.ngComponentDef.h(1, 0);
       ButtonToggle.ngComponentDef.r(1, 0);
     }
 
@@ -431,6 +440,7 @@ describe('outputs', () => {
             }
             e();
           }
+          ButtonToggle.ngComponentDef.h(1, 0);
           ButtonToggle.ngComponentDef.r(1, 0);
           v();
         } else {

packages/core/test/render3/properties_spec.ts

@@ -164,6 +164,7 @@ describe('elementProperty', () => {
           e();
         }
         p(0, 'id', b(ctx.id));
+        Comp.ngComponentDef.h(1, 0);
         Comp.ngComponentDef.r(1, 0);
       }
 
@@ -538,6 +539,7 @@ describe('elementProperty', () => {
               { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
               e();
             }
+            Comp.ngComponentDef.h(1, 0);
             Comp.ngComponentDef.r(1, 0);
             v();
           }

packages/core/test/render3/renderer_factory_spec.ts

@@ -67,6 +67,7 @@ describe('renderer factory lifecycle', () => {
       { D(2, SomeComponent.ngComponentDef.n(), SomeComponent.ngComponentDef); }
       e();
     }
+    SomeComponent.ngComponentDef.h(2, 1);
     SomeComponent.ngComponentDef.r(2, 1);
   }