refactor(ivy): add type and hooks to directive def (#21650)

PR Close #21650

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

@@ -36,6 +36,7 @@ export class TreeComponent {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<TreeComponent> = defineComponent({
+    type: TreeComponent,
     tag: 'tree',
     template: function(ctx: TreeComponent, cm: boolean) {
       if (cm) {
@@ -92,6 +93,7 @@ export class TreeFunction {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<TreeFunction> = defineComponent({
+    type: TreeFunction,
     tag: 'tree',
     template: function(ctx: TreeFunction, cm: boolean) {
       // bit of a hack

packages/core/src/render3/component.ts

@@ -13,8 +13,9 @@ import {ComponentRef as viewEngine_ComponentRef} from '../linker/component_facto
 import {EmbeddedViewRef as viewEngine_EmbeddedViewRef} from '../linker/view_ref';
 
 import {assertNotNull} from './assert';
+
 import {NG_HOST_SYMBOL, createError, createLView, directiveCreate, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions';
-import {ComponentDef, ComponentType, TypedComponentDef} from './interfaces/definition';
+import {ComponentDef, ComponentType} from './interfaces/definition';
 import {LElementNode} from './interfaces/node';
 import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
 import {notImplemented, stringify} from './util';
@@ -166,7 +167,7 @@ export const NULL_INJECTOR: Injector = {
 export function renderComponent<T>(
     componentType: ComponentType<T>, opts: CreateComponentOptions = {}): T {
   const rendererFactory = opts.rendererFactory || domRendererFactory3;
-  const componentDef = componentType.ngComponentDef as TypedComponentDef<T>;
+  const componentDef = componentType.ngComponentDef as ComponentDef<T>;
   if (componentDef.type != componentType) componentDef.type = componentType;
   let component: T;
   const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag);

packages/core/src/render3/definition.ts

@@ -14,7 +14,7 @@ import {resolveRendererType2} from '../view/util';
 
 import {diPublic} from './di';
 import {componentRefresh} from './instructions';
-import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs, TypedDirectiveDef} from './interfaces/definition';
+import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs, LifecycleHooksMap} from './interfaces/definition';
 
 
 
@@ -35,6 +35,7 @@ import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs, TypedDir
  */
 export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): ComponentDef<T> {
   const def = <ComponentDef<any>>{
+    type: componentDefinition.type,
     diPublic: null,
     n: componentDefinition.factory,
     tag: (componentDefinition as ComponentDefArgs<T>).tag || null !,
@@ -50,6 +51,7 @@ export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): Co
     methods: invertObject(componentDefinition.methods),
     rendererType: resolveRendererType2(componentDefinition.rendererType) || null,
     exportAs: componentDefinition.exportAs,
+    lifecycleHooks: getLifecyleHooksMap<T>(componentDefinition.type)
   };
   const feature = componentDefinition.features;
   feature && feature.forEach((fn) => fn(def));
@@ -65,7 +67,7 @@ type OnChangesExpando = OnChanges & {
 };
 
 export function NgOnChangesFeature<T>(type: Type<T>): (definition: DirectiveDef<any>) => void {
-  return function(definition: DirectiveDef<any>): void {
+  return function (definition: DirectiveDef<any>): void {
     const inputs = definition.inputs;
     const proto = type.prototype;
     // Place where we will store SimpleChanges if there is a change
@@ -80,11 +82,11 @@ export function NgOnChangesFeature<T>(type: Type<T>): (definition: DirectiveDef<
 
       // create a getter and setter for property
       Object.defineProperty(proto, minKey, {
-        get: function(this: OnChangesExpando) {
+        get: function (this: OnChangesExpando) {
           return (existingDesc && existingDesc.get) ? existingDesc.get.call(this) :
-                                                      this[privateMinKey];
+            this[privateMinKey];
         },
-        set: function(this: OnChangesExpando, value: any) {
+        set: function (this: OnChangesExpando, value: any) {
           let simpleChanges = this[PRIVATE_PREFIX];
           let isFirstChange = simpleChanges === undefined;
           if (simpleChanges == null) {
@@ -92,12 +94,12 @@ export function NgOnChangesFeature<T>(type: Type<T>): (definition: DirectiveDef<
           }
           simpleChanges[pubKey] = new SimpleChange(this[privateMinKey], value, isFirstChange);
           (existingDesc && existingDesc.set) ? existingDesc.set.call(this, value) :
-                                               this[privateMinKey] = value;
+            this[privateMinKey] = value;
         }
       });
     }
-    proto.ngDoCheck = (function(delegateDoCheck) {
+    proto.ngDoCheck = (function (delegateDoCheck) {
-      return function(this: OnChangesExpando) {
+      return function (this: OnChangesExpando) {
         let simpleChanges = this[PRIVATE_PREFIX];
         if (simpleChanges != null) {
           this.ngOnChanges(simpleChanges);
@@ -109,6 +111,25 @@ export function NgOnChangesFeature<T>(type: Type<T>): (definition: DirectiveDef<
   };
 }
 
+/**
+ * Takes the component type and returns a formatted map of lifecycle hooks for that
+ * component.
+ *
+ * @param type The component type
+ */
+function getLifecyleHooksMap<T>(type: Type<T>): LifecycleHooksMap {
+  return {
+    onInit: type.prototype.ngOnInit || null,
+    doCheck: type.prototype.ngDoCheck || null,
+    afterContentInit: type.prototype.ngAfterContentInit || null,
+    afterContentChecked: type.prototype.ngAfterContentChecked || null,
+    afterViewInit: type.prototype.ngAfterViewInit || null,
+    afterViewChecked: type.prototype.ngAfterViewChecked || null,
+    onDestroy: type.prototype.ngOnDestroy || null,
+  };
+}
+
+
 export function PublicFeature<T>(definition: DirectiveDef<T>) {
   definition.diPublic = diPublic;
 }

packages/core/src/render3/di.ts

@@ -19,7 +19,7 @@ import {Type} from '../type';
 
 import {assertLessThan} from './assert';
 import {assertPreviousIsParent, getPreviousOrParentNode, getRenderer, renderEmbeddedTemplate} from './instructions';
-import {ComponentTemplate, DirectiveDef, TypedDirectiveDef} from './interfaces/definition';
+import {ComponentTemplate, DirectiveDef} from './interfaces/definition';
 import {LInjector} from './interfaces/injector';
 import {LContainerNode, LElementNode, LNode, LNodeFlags, LViewNode} from './interfaces/node';
 import {QueryReadType} from './interfaces/query';
@@ -158,7 +158,7 @@ function createInjectionError(text: string, token: any) {
  * @param di The node injector in which a directive will be added
  * @param def The definition of the directive to be made public
  */
-export function diPublicInInjector(di: LInjector, def: TypedDirectiveDef<any>): void {
+export function diPublicInInjector(di: LInjector, def: DirectiveDef<any>): void {
   bloomAdd(di, def.type);
 }
 
@@ -291,7 +291,7 @@ export function getOrCreateInjectable<T>(
         for (let i = start, ii = start + size; i < ii; i++) {
           // Get the definition for the directive at this index and, if it is injectable (diPublic),
           // and matches the given token, return the directive instance.
-          const directiveDef = tData[i] as TypedDirectiveDef<any>;
+          const directiveDef = tData[i] as DirectiveDef<any>;
           if (directiveDef.diPublic && directiveDef.type == token) {
             return node.view.data[i];
           }

packages/core/src/render3/instructions.ts

@@ -24,7 +24,7 @@ import {LContainerNode, LElementNode, LNode, LNodeFlags, LProjectionNode, LTextN
 import {assertNodeType, assertNodeOfPossibleTypes} from './node_assert';
 import {appendChild, insertChild, insertView, processProjectedNode, removeView} from './node_manipulation';
 import {isNodeMatchingSelector} from './node_selector_matcher';
-import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType, TypedDirectiveDef, TypedComponentDef} from './interfaces/definition';
+import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType} from './interfaces/definition';
 import {RComment, RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3} from './interfaces/renderer';
 import {isDifferent, stringify} from './util';
 
@@ -447,8 +447,6 @@ export function elementStart(
       if (hostComponentDef) {
         // TODO(mhevery): This assumes that the directives come in correct order, which
         // is not guaranteed. Must be refactored to take it into account.
-        (hostComponentDef as TypedComponentDef<any>).type =
-            nameOrComponentType as ComponentType<any>;
         directiveCreate(++index, hostComponentDef.n(), hostComponentDef, queryName);
       }
       hack_declareDirectives(index, directiveTypes, localRefs);
@@ -476,7 +474,6 @@ function hack_declareDirectives(
       // TODO(misko): refactor this to store the `DirectiveDef` in `TView.data`.
       const directiveType = directiveTypes[i];
       const directiveDef = directiveType.ngDirectiveDef;
-      (directiveDef as TypedDirectiveDef<any>).type = directiveType;
       directiveCreate(
           ++index, directiveDef.n(), directiveDef, hack_findQueryName(directiveDef, localRefs));
     }

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

@@ -27,6 +27,9 @@ export const enum DirectiveDefFlags {ContentQuery = 0b10}
  * `DirectiveDef` is a compiled version of the Directive used by the renderer instructions.
  */
 export interface DirectiveDef<T> {
+  /** Token representing the directive. Used by DI. */
+  type: Type<T>;
+
   /** Function that makes a directive public to the DI system. */
   diPublic: ((def: DirectiveDef<any>) => void)|null;
 
@@ -85,6 +88,9 @@ export interface DirectiveDef<T> {
   // (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;
+
+  /* A map of the lifecycle hooks defined on this directive (key: name, value: fn) */
+  lifecycleHooks: LifecycleHooksMap;
 }
 
 export interface ComponentDef<T> extends DirectiveDef<T> {
@@ -122,17 +128,19 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
   readonly rendererType: RendererType2|null;
 }
 
-/**
+/* A map of the lifecycle hooks defined on a directive (key: name, value: fn) */
- * Private: do not export
+export interface LifecycleHooksMap {
- */
+  onInit: () => void | null;
-export interface TypedDirectiveDef<T> extends DirectiveDef<T> { type: DirectiveType<T>; }
+  doCheck: () => void | null;
-
+  afterContentInit: () => void | null;
-/**
+  afterContentChecked: () => void | null;
- * Private: do not export
+  afterViewInit: () => void | null;
- */
+  afterViewChecked: () => void | null;
-export interface TypedComponentDef<T> extends ComponentDef<T> { type: ComponentType<T>; }
+  onDestroy: () => void | null;
+}
 
 export interface DirectiveDefArgs<T> {
+  type: Type<T>;
   factory: () => T;
   refresh?: (directiveIndex: number, elementIndex: number) => void;
   inputs?: {[P in keyof T]?: string};

packages/core/src/render3/query.ts

@@ -18,7 +18,7 @@ import {Type} from '../type';
 import {assertNotNull} from './assert';
 import {ReadFromInjectorFn, getOrCreateNodeInjectorForNode} from './di';
 import {assertPreviousIsParent, getCurrentQuery} from './instructions';
-import {DirectiveDef, TypedDirectiveDef, unusedValueExportToPlacateAjd as unused1} from './interfaces/definition';
+import {DirectiveDef, unusedValueExportToPlacateAjd as unused1} from './interfaces/definition';
 import {LInjector, unusedValueExportToPlacateAjd as unused2} from './interfaces/injector';
 import {LContainerNode, LElementNode, LNode, LNodeFlags, LViewNode, TNode, unusedValueExportToPlacateAjd as unused3} from './interfaces/node';
 import {LQuery, QueryReadType, unusedValueExportToPlacateAjd as unused4} from './interfaces/query';
@@ -159,7 +159,7 @@ function geIdxOfMatchingDirective(node: LNode, type: Type<any>): number|null {
   for (let i = flags >> LNodeFlags.INDX_SHIFT,
            ii = i + ((flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT);
        i < ii; i++) {
-    const def = tData[i] as TypedDirectiveDef<any>;
+    const def = tData[i] as DirectiveDef<any>;
     if (def.diPublic && def.type === type) {
       return i;
     }

packages/core/test/render3/basic_perf.ts

@@ -32,6 +32,7 @@ describe('iv perf test', () => {
       it(`${iteration}. create ${count} divs in Render3`, () => {
         class Component {
           static ngComponentDef = defineComponent({
+            type: Component,
             tag: 'div',
             template: function Template(ctx: any, cm: any) {
               if (cm) {

packages/core/test/render3/compiler_canonical_spec.ts

@@ -27,6 +27,7 @@ describe('compiler specification', () => {
       class MyComponent {
         // NORMATIVE
         static ngComponentDef = r3.defineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: () => new MyComponent(),
           template: function(ctx: MyComponent, cm: boolean) {
@@ -59,6 +60,7 @@ describe('compiler specification', () => {
         constructor() { log.push('ChildComponent'); }
         // NORMATIVE
         static ngComponentDef = r3.defineComponent({
+          type: ChildComponent,
           tag: `child`,
           factory: () => new ChildComponent(),
           template: function(ctx: ChildComponent, cm: boolean) {
@@ -77,6 +79,7 @@ describe('compiler specification', () => {
         constructor() { log.push('SomeDirective'); }
         // NORMATIVE
         static ngDirectiveDef = r3.defineDirective({
+          type: SomeDirective,
           factory: () => new SomeDirective(),
         });
         // /NORMATIVE
@@ -86,6 +89,7 @@ describe('compiler specification', () => {
       class MyComponent {
         // NORMATIVE
         static ngComponentDef = r3.defineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: () => new MyComponent(),
           template: function(ctx: MyComponent, cm: boolean) {
@@ -119,6 +123,7 @@ describe('compiler specification', () => {
         constructor(template: TemplateRef<any>) { log.push('ifDirective'); }
         // NORMATIVE
         static ngDirectiveDef = r3.defineDirective({
+          type: IfDirective,
           factory: () => new IfDirective(r3.injectTemplateRef()),
         });
         // /NORMATIVE
@@ -130,6 +135,7 @@ describe('compiler specification', () => {
         salutation = 'Hello';
         // NORMATIVE
         static ngComponentDef = r3.defineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: () => new MyComponent(),
           template: function(ctx: MyComponent, cm: boolean) {
@@ -236,6 +242,7 @@ describe('compiler specification', () => {
       class MyComponent {
         // NORMATIVE
         static ngComponentDef = r3.defineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: () => new MyComponent,
           template: function(ctx: MyComponent, cm: boolean) {

packages/core/test/render3/component_spec.ts

@@ -20,6 +20,7 @@ describe('component', () => {
     increment() { this.count++; }
 
     static ngComponentDef = defineComponent({
+      type: CounterComponent,
       tag: 'counter',
       template: function(ctx: CounterComponent, cm: boolean) {
         if (cm) {
@@ -63,6 +64,7 @@ describe('component', () => {
 describe('encapsulation', () => {
   class WrapperComponent {
     static ngComponentDef = defineComponent({
+      type: WrapperComponent,
       tag: 'wrapper',
       template: function(ctx: WrapperComponent, cm: boolean) {
         if (cm) {
@@ -78,6 +80,7 @@ describe('encapsulation', () => {
 
   class EncapsulatedComponent {
     static ngComponentDef = defineComponent({
+      type: EncapsulatedComponent,
       tag: 'encapsulated',
       template: function(ctx: EncapsulatedComponent, cm: boolean) {
         if (cm) {
@@ -96,6 +99,7 @@ describe('encapsulation', () => {
 
   class LeafComponent {
     static ngComponentDef = defineComponent({
+      type: LeafComponent,
       tag: 'leaf',
       template: function(ctx: LeafComponent, cm: boolean) {
         if (cm) {
@@ -125,6 +129,7 @@ describe('encapsulation', () => {
   it('should encapsulate host and children with different attributes', () => {
     class WrapperComponentWith {
       static ngComponentDef = defineComponent({
+        type: WrapperComponentWith,
         tag: 'wrapper',
         template: function(ctx: WrapperComponentWith, cm: boolean) {
           if (cm) {
@@ -142,6 +147,7 @@ describe('encapsulation', () => {
 
     class LeafComponentwith {
       static ngComponentDef = defineComponent({
+        type: LeafComponentwith,
         tag: 'leaf',
         template: function(ctx: LeafComponentwith, cm: boolean) {
           if (cm) {

packages/core/test/render3/di_spec.ts

@@ -22,7 +22,7 @@ describe('di', () => {
     it('should create directive with no deps', () => {
       class Directive {
         value: string = 'Created';
-        static ngDirectiveDef = defineDirective({factory: () => new Directive});
+        static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -42,21 +42,23 @@ describe('di', () => {
     it('should create directive with inter view dependencies', () => {
       class DirectiveA {
         value: string = 'A';
-        static ngDirectiveDef =
+        static ngDirectiveDef = defineDirective(
-            defineDirective({factory: () => new DirectiveA, features: [PublicFeature]});
+            {type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]});
       }
 
       class DirectiveB {
         value: string = 'B';
-        static ngDirectiveDef =
+        static ngDirectiveDef = defineDirective(
-            defineDirective({factory: () => new DirectiveB, features: [PublicFeature]});
+            {type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
       }
 
       class DirectiveC {
         value: string;
         constructor(a: DirectiveA, b: DirectiveB) { this.value = a.value + b.value; }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))});
+          type: DirectiveC,
+          factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))
+        });
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -83,8 +85,11 @@ describe('di', () => {
         constructor(public elementRef: ElementRef) {
           this.value = (elementRef.constructor as any).name;
         }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new Directive(injectElementRef()), features: [PublicFeature]});
+          type: Directive,
+          factory: () => new Directive(injectElementRef()),
+          features: [PublicFeature]
+        });
       }
 
       class DirectiveSameInstance {
@@ -92,8 +97,10 @@ describe('di', () => {
         constructor(elementRef: ElementRef, directive: Directive) {
           this.value = elementRef === directive.elementRef;
         }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))});
+          type: DirectiveSameInstance,
+          factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
+        });
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -116,8 +123,11 @@ describe('di', () => {
         constructor(public templateRef: TemplateRef<any>) {
           this.value = (templateRef.constructor as any).name;
         }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new Directive(injectTemplateRef()), features: [PublicFeature]});
+          type: Directive,
+          factory: () => new Directive(injectTemplateRef()),
+          features: [PublicFeature]
+        });
       }
 
       class DirectiveSameInstance {
@@ -125,8 +135,10 @@ describe('di', () => {
         constructor(templateRef: TemplateRef<any>, directive: Directive) {
           this.value = templateRef === directive.templateRef;
         }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))});
+          type: DirectiveSameInstance,
+          factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
+        });
       }
 
 
@@ -149,8 +161,11 @@ describe('di', () => {
         constructor(public viewContainerRef: ViewContainerRef) {
           this.value = (viewContainerRef.constructor as any).name;
         }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new Directive(injectViewContainerRef()), features: [PublicFeature]});
+          type: Directive,
+          factory: () => new Directive(injectViewContainerRef()),
+          features: [PublicFeature]
+        });
       }
 
       class DirectiveSameInstance {
@@ -159,6 +174,7 @@ describe('di', () => {
           this.value = viewContainerRef === directive.viewContainerRef;
         }
         static ngDirectiveDef = defineDirective({
+          type: DirectiveSameInstance,
           factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
         });
       }
@@ -237,8 +253,11 @@ describe('di', () => {
 
     it('should inject from parent view', () => {
       class ParentDirective {
-        static ngDirectiveDef =
+        static ngDirectiveDef = defineDirective({
-            defineDirective({factory: () => new ParentDirective(), features: [PublicFeature]});
+          type: ParentDirective,
+          factory: () => new ParentDirective(),
+          features: [PublicFeature]
+        });
       }
 
       class ChildDirective {
@@ -247,6 +266,7 @@ describe('di', () => {
           this.value = (parent.constructor as any).name;
         }
         static ngDirectiveDef = defineDirective({
+          type: ChildDirective,
           factory: () => new ChildDirective(inject(ParentDirective)),
           features: [PublicFeature]
         });
@@ -257,8 +277,10 @@ describe('di', () => {
         constructor(parent: ParentDirective, child: ChildDirective) {
           this.value = parent === child.parent;
         }
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef = defineDirective({
-            {factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))});
+          type: Child2Directive,
+          factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
+        });
       }
 
       function Template(ctx: any, cm: boolean) {

packages/core/test/render3/directive_spec.ts

@@ -20,6 +20,7 @@ describe('directive', () => {
       class Directive {
         klass = 'foo';
         static ngDirectiveDef = defineDirective({
+          type: Directive,
           factory: () => directiveInstance = new Directive,
           refresh: (directiveIndex: number, elementIndex: number) => {
             p(elementIndex, 'className', b(m<Directive>(directiveIndex).klass));

packages/core/test/render3/exports_spec.ts

@@ -42,8 +42,12 @@ describe('exports', () => {
     class MyComponent {
       name = 'Nancy';
 
-      static ngComponentDef =
+      static ngComponentDef = defineComponent({
-          defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent});
+        type: MyComponent,
+        tag: 'comp',
+        template: function() {},
+        factory: () => new MyComponent
+      });
     }
 
     expect(renderToHtml(Template, {})).toEqual('<comp></comp>Nancy');
@@ -55,14 +59,19 @@ describe('exports', () => {
     let myDir: MyDir;
     class MyComponent {
       constructor() { myComponent = this; }
-      static ngComponentDef =
+      static ngComponentDef = defineComponent({
-          defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent});
+        type: MyComponent,
+        tag: 'comp',
+        template: function() {},
+        factory: () => new MyComponent
+      });
     }
 
     class MyDir {
       myDir: MyComponent;
       constructor() { myDir = this; }
-      static ngDirectiveDef = defineDirective({factory: () => new MyDir, inputs: {myDir: 'myDir'}});
+      static ngDirectiveDef =
+          defineDirective({type: MyDir, factory: () => new MyDir, inputs: {myDir: 'myDir'}});
     }
 
     /** <comp #myComp></comp> <div [myDir]="myComp"></div> */
@@ -94,7 +103,7 @@ describe('exports', () => {
 
     class SomeDir {
       name = 'Drew';
-      static ngDirectiveDef = defineDirective({factory: () => new SomeDir});
+      static ngDirectiveDef = defineDirective({type: SomeDir, factory: () => new SomeDir});
     }
 
     expect(renderToHtml(Template, {})).toEqual('<div></div>Drew');
@@ -175,6 +184,7 @@ describe('exports', () => {
         constructor() { myComponent = this; }
 
         static ngComponentDef = defineComponent({
+          type: MyComponent,
           tag: 'comp',
           template: function(ctx: MyComponent, cm: boolean) {},
           factory: () => new MyComponent
@@ -187,7 +197,7 @@ describe('exports', () => {
         constructor() { myDir = this; }
 
         static ngDirectiveDef =
-            defineDirective({factory: () => new MyDir, inputs: {myDir: 'myDir'}});
+            defineDirective({type: MyDir, factory: () => new MyDir, inputs: {myDir: 'myDir'}});
       }
 
       /** <div [myDir]="myComp"></div><comp #myComp></comp> */
@@ -230,8 +240,12 @@ describe('exports', () => {
 
         constructor() { myComponent = this; }
 
-        static ngComponentDef =
+        static ngComponentDef = defineComponent({
-            defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent});
+          type: MyComponent,
+          tag: 'comp',
+          template: function() {},
+          factory: () => new MyComponent
+        });
       }
       expect(renderToHtml(Template, {})).toEqual('oneNancy<comp></comp><input value="one">');
     });

packages/core/test/render3/integration_spec.ts

@@ -210,6 +210,7 @@ describe('render3 integration test', () => {
       value = ' one';
 
       static ngComponentDef = defineComponent({
+        type: TodoComponent,
         tag: 'todo',
         template: function TodoTemplate(ctx: any, cm: boolean) {
           if (cm) {
@@ -279,6 +280,7 @@ describe('render3 integration test', () => {
       class TodoComponentHostBinding {
         title = 'one';
         static ngComponentDef = defineComponent({
+          type: TodoComponentHostBinding,
           tag: 'todo',
           template: function TodoComponentHostBindingTemplate(
               ctx: TodoComponentHostBinding, cm: boolean) {
@@ -314,6 +316,7 @@ describe('render3 integration test', () => {
       class MyComp {
         name = 'Bess';
         static ngComponentDef = defineComponent({
+          type: MyComp,
           tag: 'comp',
           template: function MyCompTemplate(ctx: any, cm: boolean) {
             if (cm) {
@@ -348,6 +351,7 @@ describe('render3 integration test', () => {
       class MyComp {
         condition: boolean;
         static ngComponentDef = defineComponent({
+          type: MyComp,
           tag: 'comp',
           template: function MyCompTemplate(ctx: any, cm: boolean) {
             if (cm) {

packages/core/test/render3/lifecycle_spec.ts

@@ -49,6 +49,7 @@ describe('lifecycles', () => {
         ngOnInit() { events.push(`${name}${this.val}`); }
 
         static ngComponentDef = defineComponent({
+          type: Component,
           tag: name,
           factory: () => new Component(),
           hostBindings: function(directiveIndex: number, elementIndex: number):
@@ -339,6 +340,7 @@ describe('lifecycles', () => {
         ngOnInit() { allEvents.push('ngOnInit ' + name); }
 
         static ngComponentDef = defineComponent({
+          type: Component,
           tag: name,
           factory: () => new Component(),
           hostBindings: function(
@@ -452,8 +454,13 @@ describe('lifecycles', () => {
         }
         ngAfterContentChecked() { allEvents.push(`${name}${this.val} check`); }
 
-        static ngComponentDef = defineComponent(
+        static ngComponentDef = defineComponent({
-            {tag: name, factory: () => new Component(), inputs: {val: 'val'}, template: template});
+          type: Component,
+          tag: name,
+          factory: () => new Component(),
+          inputs: {val: 'val'},
+          template: template,
+        });
       };
     }
 
@@ -516,7 +523,7 @@ describe('lifecycles', () => {
       class Directive {
         ngAfterContentInit() { events.push('dir'); }
 
-        static ngDirectiveDef = defineDirective({factory: () => new Directive()});
+        static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive()});
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -816,6 +823,7 @@ describe('lifecycles', () => {
         ngAfterViewChecked() { allEvents.push(`${name}${this.val} check`); }
 
         static ngComponentDef = defineComponent({
+          type: Component,
           tag: name,
           factory: () => new Component(),
           refresh: (directiveIndex: number, elementIndex: number) => {
@@ -1227,8 +1235,13 @@ describe('lifecycles', () => {
         val: string = '';
         ngOnDestroy() { events.push(`${name}${this.val}`); }
 
-        static ngComponentDef = defineComponent(
+        static ngComponentDef = defineComponent({
-            {tag: name, factory: () => new Component(), inputs: {val: 'val'}, template: template});
+          type: Component,
+          tag: name,
+          factory: () => new Component(),
+          inputs: {val: 'val'},
+          template: template
+        });
       };
     }
 
@@ -1677,6 +1690,7 @@ describe('lifecycles', () => {
         ngAfterViewChecked() { events.push(`viewCheck ${name}${this.val}`); }
 
         static ngComponentDef = defineComponent({
+          type: Component,
           tag: name,
           factory: () => new Component(),
           hostBindings: function(directiveIndex: number, elementIndex: number): void {

packages/core/test/render3/listeners_spec.ts

@@ -21,6 +21,7 @@ describe('event listeners', () => {
     onClick() { this.counter++; }
 
     static ngComponentDef = defineComponent({
+      type: MyComp,
       tag: 'comp',
       /** <button (click)="onClick()"> Click me </button> */
       template: function CompTemplate(ctx: any, cm: boolean) {

packages/core/test/render3/outputs_spec.ts

@@ -20,6 +20,7 @@ describe('outputs', () => {
     resetStream = new EventEmitter();
 
     static ngComponentDef = defineComponent({
+      type: ButtonToggle,
       tag: 'button-toggle',
       template: function(ctx: any, cm: boolean) {},
       factory: () => buttonToggle = new ButtonToggle(),
@@ -32,8 +33,11 @@ describe('outputs', () => {
   class OtherDir {
     changeStream = new EventEmitter();
 
-    static ngDirectiveDef = defineDirective(
+    static ngDirectiveDef = defineDirective({
-        {factory: () => otherDir = new OtherDir, outputs: {changeStream: 'change'}});
+      type: OtherDir,
+      factory: () => otherDir = new OtherDir,
+      outputs: {changeStream: 'change'}
+    });
   }
 
   it('should call component output function when event is emitted', () => {
@@ -212,6 +216,7 @@ describe('outputs', () => {
       ngOnDestroy() { this.events.push('destroy'); }
 
       static ngComponentDef = defineComponent({
+        type: DestroyComp,
         tag: 'destroy-comp',
         template: function(ctx: any, cm: boolean) {},
         factory: () => destroyComp = new DestroyComp()
@@ -287,8 +292,8 @@ describe('outputs', () => {
     class MyButton {
       click = new EventEmitter();
 
-      static ngDirectiveDef =
+      static ngDirectiveDef = defineDirective(
-          defineDirective({factory: () => buttonDir = new MyButton, outputs: {click: 'click'}});
+          {type: MyButton, factory: () => buttonDir = new MyButton, outputs: {click: 'click'}});
     }
 
     function Template(ctx: any, cm: boolean) {
@@ -340,8 +345,8 @@ describe('outputs', () => {
     class OtherDir {
       change: boolean;
 
-      static ngDirectiveDef =
+      static ngDirectiveDef = defineDirective(
-          defineDirective({factory: () => otherDir = new OtherDir, inputs: {change: 'change'}});
+          {type: OtherDir, factory: () => otherDir = new OtherDir, inputs: {change: 'change'}});
     }
 
     /** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */

packages/core/test/render3/properties_spec.ts

@@ -69,8 +69,8 @@ describe('elementProperty', () => {
     class MyButton {
       disabled: boolean;
 
-      static ngDirectiveDef =
+      static ngDirectiveDef = defineDirective(
-          defineDirective({factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}});
+          {type: MyButton, factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}});
     }
 
     class OtherDir {
@@ -78,6 +78,7 @@ describe('elementProperty', () => {
       clickStream = new EventEmitter();
 
       static ngDirectiveDef = defineDirective({
+        type: OtherDir,
         factory: () => otherDir = new OtherDir(),
         inputs: {id: 'id'},
         outputs: {clickStream: 'click'}
@@ -140,6 +141,7 @@ describe('elementProperty', () => {
         id: number;
 
         static ngComponentDef = defineComponent({
+          type: Comp,
           tag: 'comp',
           template: function(ctx: any, cm: boolean) {},
           factory: () => comp = new Comp(),
@@ -172,6 +174,7 @@ describe('elementProperty', () => {
         disabled: boolean;
 
         static ngDirectiveDef = defineDirective({
+          type: OtherDisabledDir,
           factory: () => otherDisabledDir = new OtherDisabledDir(),
           inputs: {disabled: 'disabled'}
         });
@@ -231,8 +234,8 @@ describe('elementProperty', () => {
       class IdDir {
         idNumber: number;
 
-        static ngDirectiveDef =
+        static ngDirectiveDef = defineDirective(
-            defineDirective({factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}});
+            {type: IdDir, factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}});
       }
 
       /**
@@ -294,6 +297,7 @@ describe('elementProperty', () => {
       changeStream = new EventEmitter();
 
       static ngDirectiveDef = defineDirective({
+        type: MyDir,
         factory: () => myDir = new MyDir(),
         inputs: {role: 'role', direction: 'dir'},
         outputs: {changeStream: 'change'}
@@ -304,8 +308,8 @@ describe('elementProperty', () => {
     class MyDirB {
       roleB: string;
 
-      static ngDirectiveDef =
+      static ngDirectiveDef = defineDirective(
-          defineDirective({factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}});
+          {type: MyDirB, factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}});
     }
 
     it('should set input property based on attribute if existing', () => {
@@ -467,6 +471,7 @@ describe('elementProperty', () => {
 
       class Comp {
         static ngComponentDef = defineComponent({
+          type: Comp,
           tag: 'comp',
           template: function(ctx: any, cm: boolean) {
             if (cm) {

packages/core/test/render3/render_util.ts

@@ -82,14 +82,20 @@ export function createComponent(
     name: string, template: ComponentTemplate<any>): ComponentType<any> {
   return class Component {
     value: any;
-    static ngComponentDef = defineComponent(
+    static ngComponentDef = defineComponent({
-        {tag: name, factory: () => new Component, template: template, features: [PublicFeature]});
+      type: Component,
+      tag: name,
+      factory: () => new Component,
+      template: template,
+      features: [PublicFeature]
+    });
   };
 }
 
 export function createDirective({exportAs}: {exportAs?: string} = {}): DirectiveType<any> {
   return class Directive {
     static ngDirectiveDef = defineDirective({
+      type: Directive,
       factory: () => new Directive(),
       features: [PublicFeature],
       exportAs: exportAs,

packages/core/test/render3/renderer_factory_spec.ts

@@ -29,6 +29,7 @@ describe('renderer factory lifecycle', () => {
 
   class SomeComponent {
     static ngComponentDef = defineComponent({
+      type: SomeComponent,
       tag: 'some-component',
       template: function(ctx: SomeComponent, cm: boolean) {
         logs.push('component');
@@ -42,6 +43,7 @@ describe('renderer factory lifecycle', () => {
 
   class SomeComponentWhichThrows {
     static ngComponentDef = defineComponent({
+      type: SomeComponentWhichThrows,
       tag: 'some-component-with-Error',
       template: function(ctx: SomeComponentWhichThrows, cm: boolean) {
         throw(new Error('SomeComponentWhichThrows threw'));
@@ -120,6 +122,7 @@ describe('animation renderer factory', () => {
 
   class SomeComponent {
     static ngComponentDef = defineComponent({
+      type: SomeComponent,
       tag: 'some-component',
       template: function(ctx: SomeComponent, cm: boolean) {
         if (cm) {
@@ -136,6 +139,7 @@ describe('animation renderer factory', () => {
       eventLogs.push(`${event.fromState ? event.fromState : event.toState} - ${event.phaseName}`);
     }
     static ngComponentDef = defineComponent({
+      type: SomeComponentWithAnimation,
       tag: 'some-component',
       template: function(ctx: SomeComponentWithAnimation, cm: boolean) {
         if (cm) {