refactor(ivy): remove `type` from `DirectiveDef` (#21374)

This change makes the code cleaner for the user. It does mean
a little bit more work for us since we have to patch the `type` back
into the `DirectiveDef`. However since the patching happens only once
on startup it should not be significant.

PR Close #21374

modules/benchmarks/src/largetable/render3/table.ts

@@ -16,16 +16,13 @@ export class LargeTableComponent {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<LargeTableComponent> = defineComponent({
-    type: LargeTableComponent,
     tag: 'largetable',
     template: function(ctx: LargeTableComponent, cm: boolean) {
       if (cm) {
         E(0, 'table');
         {
           E(1, 'tbody');
-          {
+          { C(2); }
-            C(2);
-          }
           e();
         }
         e();

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

@@ -36,7 +36,6 @@ export class TreeComponent {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<TreeComponent> = defineComponent({
-    type: TreeComponent,
     tag: 'tree',
     template: function(ctx: TreeComponent, cm: boolean) {
       if (cm) {
@@ -93,7 +92,6 @@ export class TreeFunction extends TreeComponent {
 
   /** @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,13 +13,14 @@ 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, directive, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate, directiveCreate} from './instructions';
+import {NG_HOST_SYMBOL, createError, createLView, directive, directiveCreate, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions';
-import {ComponentDef, ComponentType} from './interfaces/definition';
+import {ComponentDef, ComponentType, TypedComponentDef} from './interfaces/definition';
 import {LElementNode} from './interfaces/node';
-import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
+import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
 import {notImplemented, stringify} from './util';
 
 
+
 /** Options that control how the component should be bootstrapped. */
 export interface CreateComponentOptions {
   /** Which renderer factory to use. */
@@ -165,7 +166,8 @@ export const NULL_INJECTOR: Injector = {
 export function renderComponent<T>(
     componentType: ComponentType<T>, opts: CreateComponentOptions = {}): T {
   const rendererFactory = opts.rendererFactory || domRendererFactory3;
-  const componentDef = componentType.ngComponentDef;
+  const componentDef = componentType.ngComponentDef as TypedComponentDef<T>;
+  if (componentDef.type != componentType) componentDef.type = componentType;
   let component: T;
   const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag);
   const oldView = enterView(

packages/core/src/render3/definition.ts

@@ -32,7 +32,6 @@ import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs} from './
  */
 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 !,

packages/core/src/render3/di.ts

@@ -17,7 +17,7 @@ import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_co
 import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, ViewRef as viewEngine_ViewRef} from '../linker/view_ref';
 import {Type} from '../type';
 
-import {ComponentTemplate, DirectiveDef} from './interfaces/definition';
+import {ComponentTemplate, DirectiveDef, TypedDirectiveDef} from './interfaces/definition';
 import {LInjector} from './interfaces/injector';
 import {LContainerNode, LElementNode, LNodeFlags} from './interfaces/node';
 import {assertNodeType} from './node_assert';
@@ -147,7 +147,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: DirectiveDef<any>): void {
+export function diPublicInInjector(di: LInjector, def: TypedDirectiveDef<any>): void {
   bloomAdd(di, def.type);
 }
 
@@ -211,7 +211,7 @@ export function getOrCreateInjectable<T>(di: LInjector, token: Type<T>, flags?:
         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 = ngStaticData[i] as DirectiveDef<any>;
+          const directiveDef = ngStaticData[i] as TypedDirectiveDef<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} from './node_assert';
 import {appendChild, insertChild, insertView, processProjectedNode, removeView} from './node_manipulation';
 import {isNodeMatchingSelector} from './node_selector_matcher';
-import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType} from './interfaces/definition';
+import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType, TypedDirectiveDef, TypedComponentDef} from './interfaces/definition';
 import {InjectFlags, diPublicInInjector, getOrCreateNodeInjectorForNode, getOrCreateElementRef, getOrCreateTemplateRef, getOrCreateContainerRef, getOrCreateInjectable} from './di';
 import {QueryList, LQuery_} from './query';
 import {RComment, RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3} from './interfaces/renderer';
@@ -343,7 +343,7 @@ export function getOrCreateNodeInjector(): LInjector {
  *
  * @param def The definition of the directive to be made public
  */
-export function diPublic(def: DirectiveDef<any>): void {
+export function diPublic(def: TypedDirectiveDef<any>): void {
   diPublicInInjector(getOrCreateNodeInjector(), def);
 }
 
@@ -475,6 +475,8 @@ 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);
@@ -500,7 +502,9 @@ function hack_declareDirectives(
       // template
       // code for slight startup(first run) performance. (No impact on subsequent runs)
       // TODO(misko): refactor this to store the `DirectiveDef` in `TView.data`.
-      const directiveDef = directiveTypes[i].ngDirectiveDef;
+      const directiveType = directiveTypes[i];
+      const directiveDef = directiveType.ngDirectiveDef;
+      (directiveDef as TypedDirectiveDef<any>).type = directiveType;
       directiveCreate(
           ++index, directiveDef.n(), directiveDef, hack_findQueryName(directiveDef, localRefs));
     }
@@ -945,8 +949,7 @@ export function directiveCreate<T>(
   if (index >= ngStaticData.length) {
     ngStaticData[index] = directiveDef !;
     if (queryName) {
-      ngDevMode &&
+      ngDevMode && assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData');
-          assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData');
       const nodeStaticData = previousOrParentNode !.tNode !;
       (nodeStaticData.localNames || (nodeStaticData.localNames = [])).push(queryName, index);
     }

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

@@ -28,11 +28,6 @@ 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;
 
@@ -41,26 +36,26 @@ export interface DirectiveDef<T> {
    *
    * The key is minified property name whereas the value is the original unminified name.
    */
-  inputs: {[P in keyof T]: P};
+  readonly inputs: {[P in keyof T]: P};
 
   /**
    * List of outputs which are part of the components public API.
    *
    * The key is minified property name whereas the value is the original unminified name.=
    */
-  outputs: {[P in keyof T]: P};
+  readonly outputs: {[P in keyof T]: P};
 
   /**
    * List of methods which are part of the components public API.
    *
    * The key is minified property name whereas the value is the original unminified name.
    */
-  methods: {[P in keyof T]: P};
+  readonly methods: {[P in keyof T]: P};
 
   /**
    * Name under which the directive is exported (for use with local references in template)
    */
-  exportAs: string|null;
+  readonly exportAs: string|null;
 
   /**
    * factory function used to create a new directive instance.
@@ -111,25 +106,34 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
    *
    * NOTE: only used with component directives.
    */
-  tag: string;
+  readonly tag: string;
 
   /**
    * The View template of the component.
    *
    * NOTE: only used with component directives.
    */
-  template: ComponentTemplate<T>;
+  readonly template: ComponentTemplate<T>;
 
   /**
    * Renderer type data of the component.
    *
    * NOTE: only used with component directives.
    */
-  rendererType: RendererType2|null;
+  readonly rendererType: RendererType2|null;
 }
 
+/**
+ * Private: do not export
+ */
+export interface TypedDirectiveDef<T> extends DirectiveDef<T> { type: DirectiveType<T>; }
+
+/**
+ * Private: do not export
+ */
+export interface TypedComponentDef<T> extends ComponentDef<T> { type: ComponentType<T>; }
+
 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

@@ -17,13 +17,14 @@ import {Type} from '../type';
 
 import {assertNotNull} from './assert';
 import {getOrCreateContainerRef, getOrCreateElementRef, getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from './di';
-import {DirectiveDef} from './interfaces/definition';
+import {DirectiveDef, TypedDirectiveDef} from './interfaces/definition';
 import {LInjector} from './interfaces/injector';
 import {LContainerNode, LElementNode, LNode, LNodeFlags, LViewNode, TNode} from './interfaces/node';
 import {LQuery, QueryReadType} from './interfaces/query';
 import {assertNodeOfPossibleTypes} from './node_assert';
 
 
+
 /**
  * A predicate which determines if a given element/directive should be included in the query
  */
@@ -142,7 +143,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 = ngStaticData[i] as DirectiveDef<any>;
+    const def = ngStaticData[i] as TypedDirectiveDef<any>;
     if (def.diPublic && def.type === type) {
       return i;
     }

packages/core/test/render3/basic_perf.ts

@@ -32,7 +32,6 @@ 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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, Type, NgModule, Injectable, Optional, TemplateRef} from '../../src/core';
+import {Component, Directive, Injectable, NgModule, Optional, TemplateRef, Type} from '../../src/core';
 import * as r3 from '../../src/render3/index';
 
 import {containerEl, renderComponent, requestAnimationFrame, toHtml} from './render_util';
@@ -27,7 +27,6 @@ describe('compiler specification', () => {
       class MyComponent {
         // NORMATIVE
         static ngComponentDef = r3.defineComponent({
-          type: MyComponent,
           tag: 'my-component',
           factory: () => new MyComponent(),
           template: function(ctx: MyComponent, cm: boolean) {
@@ -60,7 +59,6 @@ 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) {
@@ -79,7 +77,6 @@ describe('compiler specification', () => {
         constructor() { log.push('SomeDirective'); }
         // NORMATIVE
         static ngDirectiveDef = r3.defineDirective({
-          type: ChildComponent,
           factory: () => new SomeDirective(),
         });
         // /NORMATIVE
@@ -121,13 +118,13 @@ describe('compiler specification', () => {
         constructor(template: TemplateRef<any>) { log.push('ifDirective'); }
         // NORMATIVE
         static ngDirectiveDef = r3.defineDirective({
-          type: IfDirective,
           factory: () => new IfDirective(r3.injectTemplateRef()),
         });
         // /NORMATIVE
       }
 
-      @Component({selector: 'my-component', template: `<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>`})
+      @Component(
+          {selector: 'my-component', template: `<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>`})
       class MyComponent {
         salutation = 'Hello';
         // NORMATIVE

packages/core/test/render3/component_spec.ts

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

packages/core/test/render3/content_spec.ts

@@ -151,9 +151,7 @@ describe('content projection', () => {
     const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
       if (cm) {
         E(0, Child);
-        {
+        { C(2); }
-          C(2);
-        }
         e();
       }
       cR(2);
@@ -244,9 +242,7 @@ describe('content projection', () => {
       if (cm) {
         m(0, pD());
         E(1, 'div');
-        {
+        { C(2); }
-          C(2);
-        }
         e();
       }
       cR(2);
@@ -301,9 +297,7 @@ describe('content projection', () => {
          if (cm) {
            m(0, pD());
            E(1, 'div');
-           {
+           { C(2); }
-             C(2);
-           }
            e();
          }
          cR(2);
@@ -398,9 +392,7 @@ describe('content projection', () => {
         m(0, pD());
         P(1, 0);
         E(2, 'div');
-        {
+        { C(3); }
-          C(3);
-        }
         e();
       }
       cR(3);
@@ -816,9 +808,7 @@ describe('content projection', () => {
       const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
         if (cm) {
           E(0, Child);
-          {
+          { C(2, undefined, undefined, 'div'); }
-            C(2, undefined, undefined, 'div');
-          }
           e();
         }
         cR(2);

packages/core/test/render3/control_flow_spec.ts

@@ -17,9 +17,7 @@ describe('JS control flow', () => {
     function Template(ctx: any, cm: boolean) {
       if (cm) {
         E(0, 'div');
-        {
+        { C(1); }
-          C(1);
-        }
         e();
       }
       cR(1);
@@ -67,9 +65,7 @@ describe('JS control flow', () => {
     function Template(ctx: any, cm: boolean) {
       if (cm) {
         E(0, 'div');
-        {
+        { C(1); }
-          C(1);
-        }
         e();
       }
       cR(1);
@@ -79,9 +75,7 @@ describe('JS control flow', () => {
           {
             if (cm1) {
               E(0, 'span');
-              {
+              { C(1); }
-                C(1);
-              }
               e();
             }
             cR(1);
@@ -180,9 +174,7 @@ describe('JS control flow', () => {
     function Template(ctx: any, cm: boolean) {
       if (cm) {
         E(0, 'ul');
-        {
+        { C(1); }
-          C(1);
-        }
         e();
       }
       cR(1);
@@ -228,9 +220,7 @@ describe('JS control flow', () => {
     function Template(ctx: any, cm: boolean) {
       if (cm) {
         E(0, 'ul');
-        {
+        { C(1); }
-          C(1);
-        }
         e();
       }
       cR(1);
@@ -240,9 +230,7 @@ describe('JS control flow', () => {
           {
             if (cm1) {
               E(0, 'li');
-              {
+              { C(1); }
-                C(1);
-              }
               e();
             }
             cR(1);
@@ -457,9 +445,7 @@ describe('JS control flow', () => {
     function Template(ctx: any, cm: boolean) {
       if (cm) {
         E(0, 'div');
-        {
+        { C(1); }
-          C(1);
-        }
         e();
       }
       cR(1);
@@ -507,9 +493,7 @@ describe('JS for loop', () => {
     function Template(ctx: any, cm: boolean) {
       if (cm) {
         E(0, 'div');
-        {
+        { C(1); }
-          C(1);
-        }
         e();
       }
       cR(1);

packages/core/test/render3/di_spec.ts

@@ -9,7 +9,7 @@
 import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
 
 import {bloomAdd, bloomFindPossibleInjector} from '../../src/render3/di';
-import {C, D, E, PublicFeature, T, V, b, b2, c, cR, cr, defineDirective, e, inject, injectElementRef, injectTemplateRef, injectViewContainerRef, t, v} from '../../src/render3/index';
+import {C, D, E, PublicFeature, T, V, b, b2, cR, cr, defineDirective, e, inject, injectElementRef, injectTemplateRef, injectViewContainerRef, t, v} from '../../src/render3/index';
 import {createLNode, createLView, enterView, getOrCreateNodeInjector, leaveView} from '../../src/render3/instructions';
 import {LInjector} from '../../src/render3/interfaces/injector';
 import {LNodeFlags} from '../../src/render3/interfaces/node';
@@ -21,7 +21,7 @@ describe('di', () => {
     it('should create directive with no deps', () => {
       class Directive {
         value: string = 'Created';
-        static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
+        static ngDirectiveDef = defineDirective({factory: () => new Directive});
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -41,23 +41,21 @@ describe('di', () => {
     it('should create directive with inter view dependencies', () => {
       class DirectiveA {
         value: string = 'A';
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef =
-            {type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]});
+            defineDirective({factory: () => new DirectiveA, features: [PublicFeature]});
       }
 
       class DirectiveB {
         value: string = 'B';
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef =
-            {type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
+            defineDirective({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(
-          type: DirectiveC,
+            {factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))});
-          factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))
-        });
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -84,11 +82,8 @@ describe('di', () => {
         constructor(public elementRef: ElementRef) {
           this.value = (elementRef.constructor as any).name;
         }
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef = defineDirective(
-          type: Directive,
+            {factory: () => new Directive(injectElementRef()), features: [PublicFeature]});
-          factory: () => new Directive(injectElementRef()),
-          features: [PublicFeature]
-        });
       }
 
       class DirectiveSameInstance {
@@ -96,10 +91,8 @@ describe('di', () => {
         constructor(elementRef: ElementRef, directive: Directive) {
           this.value = elementRef === directive.elementRef;
         }
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef = defineDirective(
-          type: DirectiveSameInstance,
+            {factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))});
-          factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
-        });
       }
 
       function Template(ctx: any, cm: boolean) {
@@ -122,11 +115,8 @@ describe('di', () => {
         constructor(public templateRef: TemplateRef<any>) {
           this.value = (templateRef.constructor as any).name;
         }
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef = defineDirective(
-          type: Directive,
+            {factory: () => new Directive(injectTemplateRef()), features: [PublicFeature]});
-          factory: () => new Directive(injectTemplateRef()),
-          features: [PublicFeature]
-        });
       }
 
       class DirectiveSameInstance {
@@ -134,10 +124,8 @@ describe('di', () => {
         constructor(templateRef: TemplateRef<any>, directive: Directive) {
           this.value = templateRef === directive.templateRef;
         }
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef = defineDirective(
-          type: DirectiveSameInstance,
+            {factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))});
-          factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
-        });
       }
 
 
@@ -160,11 +148,8 @@ describe('di', () => {
         constructor(public viewContainerRef: ViewContainerRef) {
           this.value = (viewContainerRef.constructor as any).name;
         }
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef = defineDirective(
-          type: Directive,
+            {factory: () => new Directive(injectViewContainerRef()), features: [PublicFeature]});
-          factory: () => new Directive(injectViewContainerRef()),
-          features: [PublicFeature]
-        });
       }
 
       class DirectiveSameInstance {
@@ -173,7 +158,6 @@ describe('di', () => {
           this.value = viewContainerRef === directive.viewContainerRef;
         }
         static ngDirectiveDef = defineDirective({
-          type: DirectiveSameInstance,
           factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
         });
       }
@@ -235,11 +219,8 @@ describe('di', () => {
 
     it('should inject from parent view', () => {
       class ParentDirective {
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef =
-          type: ParentDirective,
+            defineDirective({factory: () => new ParentDirective(), features: [PublicFeature]});
-          factory: () => new ParentDirective(),
-          features: [PublicFeature]
-        });
       }
 
       class ChildDirective {
@@ -248,7 +229,6 @@ describe('di', () => {
           this.value = (parent.constructor as any).name;
         }
         static ngDirectiveDef = defineDirective({
-          type: ChildDirective,
           factory: () => new ChildDirective(inject(ParentDirective)),
           features: [PublicFeature]
         });
@@ -259,18 +239,14 @@ describe('di', () => {
         constructor(parent: ParentDirective, child: ChildDirective) {
           this.value = parent === child.parent;
         }
-        static ngDirectiveDef = defineDirective({
+        static ngDirectiveDef = defineDirective(
-          type: Child2Directive,
+            {factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))});
-          factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
-        });
       }
 
       function Template(ctx: any, cm: boolean) {
         if (cm) {
           E(0, 'div', null, [ParentDirective]);
-          {
+          { C(2); }
-            C(2);
-          }
           e();
         }
         cR(2);

packages/core/test/render3/directive_spec.ts

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

packages/core/test/render3/exports_spec.ts

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

packages/core/test/render3/integration_spec.ts

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

@@ -38,7 +38,6 @@ describe('lifecycles', () => {
         ngOnInit() { events.push(`${name}${this.val}`); }
 
         static ngComponentDef = defineComponent({
-          type: Component,
           tag: name,
           factory: () => new Component(),
           hostBindings: function(directiveIndex: number, elementIndex: number):
@@ -271,7 +270,6 @@ describe('lifecycles', () => {
         ngOnInit() { allEvents.push('ngOnInit ' + name); }
 
         static ngComponentDef = defineComponent({
-          type: Component,
           tag: name,
           factory: () => new Component(),
           hostBindings: function(
@@ -363,7 +361,6 @@ describe('lifecycles', () => {
         ngAfterViewChecked() { allEvents.push(`${name}${this.val} check`); }
 
         static ngComponentDef = defineComponent({
-          type: Component,
           tag: name,
           factory: () => new Component(),
           refresh: (directiveIndex: number, elementIndex: number) => {
@@ -405,7 +402,6 @@ describe('lifecycles', () => {
       function Template(ctx: any, cm: boolean) {
         if (cm) {
           C(0);
-          c();
         }
         cR(0);
         {
@@ -492,7 +488,6 @@ describe('lifecycles', () => {
           E(0, Comp);
           e();
           C(2);
-          c();
           E(3, Comp);
           e();
         }
@@ -536,7 +531,6 @@ describe('lifecycles', () => {
           E(0, Parent);
           e();
           C(2);
-          c();
           E(3, Parent);
           e();
         }
@@ -621,7 +615,6 @@ describe('lifecycles', () => {
             E(0, Parent);
             e();
             C(2);
-            c();
             E(3, Parent);
             e();
           }
@@ -674,7 +667,6 @@ describe('lifecycles', () => {
         ngOnDestroy() { events.push(`${name}${this.val}`); }
 
         static ngComponentDef = defineComponent({
-          type: Component,
           tag: name,
           factory: () => {
             const comp = new Component();

packages/core/test/render3/listeners_spec.ts

@@ -21,7 +21,6 @@ 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

@@ -21,7 +21,6 @@ describe('outputs', () => {
 
     static ngComponentDef = defineComponent({
       tag: 'button-toggle',
-      type: ButtonToggle,
       template: function(ctx: any, cm: boolean) {},
       factory: () => buttonToggle = new ButtonToggle(),
       outputs: {change: 'change', resetStream: 'reset'}
@@ -33,11 +32,8 @@ describe('outputs', () => {
   class OtherDir {
     changeStream = new EventEmitter();
 
-    static ngDirectiveDef = defineDirective({
+    static ngDirectiveDef = defineDirective(
-      type: OtherDir,
+        {factory: () => otherDir = new OtherDir, outputs: {changeStream: 'change'}});
-      factory: () => otherDir = new OtherDir,
-      outputs: {changeStream: 'change'}
-    });
   }
 
   it('should call component output function when event is emitted', () => {
@@ -217,7 +213,6 @@ describe('outputs', () => {
 
       static ngComponentDef = defineComponent({
         tag: 'destroy-comp',
-        type: DestroyComp,
         template: function(ctx: any, cm: boolean) {},
         factory: () => {
           destroyComp = new DestroyComp();
@@ -296,8 +291,8 @@ describe('outputs', () => {
     class MyButton {
       click = new EventEmitter();
 
-      static ngDirectiveDef = defineDirective(
+      static ngDirectiveDef =
-          {type: MyButton, factory: () => buttonDir = new MyButton, outputs: {click: 'click'}});
+          defineDirective({factory: () => buttonDir = new MyButton, outputs: {click: 'click'}});
     }
 
     function Template(ctx: any, cm: boolean) {
@@ -349,8 +344,8 @@ describe('outputs', () => {
     class OtherDir {
       change: boolean;
 
-      static ngDirectiveDef = defineDirective(
+      static ngDirectiveDef =
-          {type: OtherDir, factory: () => otherDir = new OtherDir, inputs: {change: 'change'}});
+          defineDirective({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 = defineDirective(
+      static ngDirectiveDef =
-          {type: MyButton, factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}});
+          defineDirective({factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}});
     }
 
     class OtherDir {
@@ -78,7 +78,6 @@ describe('elementProperty', () => {
       clickStream = new EventEmitter();
 
       static ngDirectiveDef = defineDirective({
-        type: OtherDir,
         factory: () => otherDir = new OtherDir(),
         inputs: {id: 'id'},
         outputs: {clickStream: 'click'}
@@ -142,7 +141,6 @@ describe('elementProperty', () => {
 
         static ngComponentDef = defineComponent({
           tag: 'comp',
-          type: Comp,
           template: function(ctx: any, cm: boolean) {},
           factory: () => comp = new Comp(),
           inputs: {id: 'id'}
@@ -174,7 +172,6 @@ describe('elementProperty', () => {
         disabled: boolean;
 
         static ngDirectiveDef = defineDirective({
-          type: OtherDisabledDir,
           factory: () => otherDisabledDir = new OtherDisabledDir(),
           inputs: {disabled: 'disabled'}
         });
@@ -234,8 +231,8 @@ describe('elementProperty', () => {
       class IdDir {
         idNumber: number;
 
-        static ngDirectiveDef = defineDirective(
+        static ngDirectiveDef =
-            {type: IdDir, factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}});
+            defineDirective({factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}});
       }
 
       /**
@@ -297,7 +294,6 @@ describe('elementProperty', () => {
       changeStream = new EventEmitter();
 
       static ngDirectiveDef = defineDirective({
-        type: MyDir,
         factory: () => myDir = new MyDir(),
         inputs: {role: 'role', direction: 'dir'},
         outputs: {changeStream: 'change'}
@@ -308,8 +304,8 @@ describe('elementProperty', () => {
     class MyDirB {
       roleB: string;
 
-      static ngDirectiveDef = defineDirective(
+      static ngDirectiveDef =
-          {type: MyDirB, factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}});
+          defineDirective({factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}});
     }
 
     it('should set input property based on attribute if existing', () => {
@@ -472,7 +468,6 @@ describe('elementProperty', () => {
       class Comp {
         static ngComponentDef = defineComponent({
           tag: 'comp',
-          type: Comp,
           template: function(ctx: any, cm: boolean) {
             if (cm) {
               E(0, 'div', ['role', 'button'], [MyDir]);

packages/core/test/render3/render_util.ts

@@ -7,11 +7,13 @@
  */
 
 import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
-import {DirectiveDefArgs} from '../../src/render3/definition_interfaces';
+
 import {ComponentTemplate, ComponentType, DirectiveType, PublicFeature, defineComponent, defineDirective, renderComponent as _renderComponent} from '../../src/render3/index';
 import {NG_HOST_SYMBOL, createLNode, createLView, renderTemplate} from '../../src/render3/instructions';
+import {DirectiveDefArgs} from '../../src/render3/interfaces/definition';
 import {LElementNode, LNodeFlags} from '../../src/render3/interfaces/node';
 import {RElement, RText, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
+
 import {getRendererFactory2} from './imported_renderer2';
 
 export const document = ((global || window) as any).document;
@@ -80,20 +82,14 @@ export function createComponent(
     name: string, template: ComponentTemplate<any>): ComponentType<any> {
   return class Component {
     value: any;
-    static ngComponentDef = defineComponent({
+    static ngComponentDef = defineComponent(
-      type: Component,
+        {tag: name, factory: () => new Component, template: template, features: [PublicFeature]});
-      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,7 +29,6 @@ describe('renderer factory lifecycle', () => {
 
   class SomeComponent {
     static ngComponentDef = defineComponent({
-      type: SomeComponent,
       tag: 'some-component',
       template: function(ctx: SomeComponent, cm: boolean) {
         logs.push('component');
@@ -43,7 +42,6 @@ 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'));
@@ -122,7 +120,6 @@ describe('animation renderer factory', () => {
 
   class SomeComponent {
     static ngComponentDef = defineComponent({
-      type: SomeComponent,
       tag: 'some-component',
       template: function(ctx: SomeComponent, cm: boolean) {
         if (cm) {
@@ -139,7 +136,6 @@ 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) {