diff --git a/modules/benchmarks/src/tree/render3/tree.ts b/modules/benchmarks/src/tree/render3/tree.ts index bf146dffcf..91465ebaff 100644 --- a/modules/benchmarks/src/tree/render3/tree.ts +++ b/modules/benchmarks/src/tree/render3/tree.ts @@ -36,6 +36,7 @@ export class TreeComponent { /** @nocollapse */ static ngComponentDef: ComponentDef = defineComponent({ + type: TreeComponent, tag: 'tree', template: function(ctx: TreeComponent, cm: boolean) { if (cm) { @@ -92,6 +93,7 @@ export class TreeFunction { /** @nocollapse */ static ngComponentDef: ComponentDef = defineComponent({ + type: TreeFunction, tag: 'tree', template: function(ctx: TreeFunction, cm: boolean) { // bit of a hack diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index 321dc21036..d9eaaafd5e 100644 --- a/packages/core/src/render3/component.ts +++ b/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( componentType: ComponentType, opts: CreateComponentOptions = {}): T { const rendererFactory = opts.rendererFactory || domRendererFactory3; - const componentDef = componentType.ngComponentDef as TypedComponentDef; + const componentDef = componentType.ngComponentDef as ComponentDef; if (componentDef.type != componentType) componentDef.type = componentType; let component: T; const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag); diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index 8a174ebfb1..ef326d4391 100644 --- a/packages/core/src/render3/definition.ts +++ b/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(componentDefinition: ComponentDefArgs): ComponentDef { const def = >{ + type: componentDefinition.type, diPublic: null, n: componentDefinition.factory, tag: (componentDefinition as ComponentDefArgs).tag || null !, @@ -50,6 +51,7 @@ export function defineComponent(componentDefinition: ComponentDefArgs): Co methods: invertObject(componentDefinition.methods), rendererType: resolveRendererType2(componentDefinition.rendererType) || null, exportAs: componentDefinition.exportAs, + lifecycleHooks: getLifecyleHooksMap(componentDefinition.type) }; const feature = componentDefinition.features; feature && feature.forEach((fn) => fn(def)); @@ -65,7 +67,7 @@ type OnChangesExpando = OnChanges & { }; export function NgOnChangesFeature(type: Type): (definition: DirectiveDef) => void { - return function(definition: DirectiveDef): void { + return function (definition: DirectiveDef): 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(type: Type): (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(type: Type): (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) { - return function(this: OnChangesExpando) { + proto.ngDoCheck = (function (delegateDoCheck) { + return function (this: OnChangesExpando) { let simpleChanges = this[PRIVATE_PREFIX]; if (simpleChanges != null) { this.ngOnChanges(simpleChanges); @@ -109,6 +111,25 @@ export function NgOnChangesFeature(type: Type): (definition: DirectiveDef< }; } +/** + * Takes the component type and returns a formatted map of lifecycle hooks for that + * component. + * + * @param type The component type + */ +function getLifecyleHooksMap(type: Type): 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(definition: DirectiveDef) { definition.diPublic = diPublic; } diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts index 5686dc3bb4..4e8dd39147 100644 --- a/packages/core/src/render3/di.ts +++ b/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): void { +export function diPublicInInjector(di: LInjector, def: DirectiveDef): void { bloomAdd(di, def.type); } @@ -291,7 +291,7 @@ export function getOrCreateInjectable( 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; + const directiveDef = tData[i] as DirectiveDef; if (directiveDef.diPublic && directiveDef.type == token) { return node.view.data[i]; } diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index d5eb93b496..81d5daebd9 100644 --- a/packages/core/src/render3/instructions.ts +++ b/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).type = - nameOrComponentType as ComponentType; 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).type = directiveType; directiveCreate( ++index, directiveDef.n(), directiveDef, hack_findQueryName(directiveDef, localRefs)); } diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts index 1b2547a0f4..777686a28a 100644 --- a/packages/core/src/render3/interfaces/definition.ts +++ b/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 { + /** Token representing the directive. Used by DI. */ + type: Type; + /** Function that makes a directive public to the DI system. */ diPublic: ((def: DirectiveDef) => void)|null; @@ -85,6 +88,9 @@ export interface DirectiveDef { // (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 extends DirectiveDef { @@ -122,17 +128,19 @@ export interface ComponentDef extends DirectiveDef { readonly rendererType: RendererType2|null; } -/** - * Private: do not export - */ -export interface TypedDirectiveDef extends DirectiveDef { type: DirectiveType; } - -/** - * Private: do not export - */ -export interface TypedComponentDef extends ComponentDef { type: ComponentType; } +/* A map of the lifecycle hooks defined on a directive (key: name, value: fn) */ +export interface LifecycleHooksMap { + onInit: () => void | null; + doCheck: () => void | null; + afterContentInit: () => void | null; + afterContentChecked: () => void | null; + afterViewInit: () => void | null; + afterViewChecked: () => void | null; + onDestroy: () => void | null; +} export interface DirectiveDefArgs { + type: Type; factory: () => T; refresh?: (directiveIndex: number, elementIndex: number) => void; inputs?: {[P in keyof T]?: string}; diff --git a/packages/core/src/render3/query.ts b/packages/core/src/render3/query.ts index be57f29d85..f79844030c 100644 --- a/packages/core/src/render3/query.ts +++ b/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): 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; + const def = tData[i] as DirectiveDef; if (def.diPublic && def.type === type) { return i; } diff --git a/packages/core/test/render3/basic_perf.ts b/packages/core/test/render3/basic_perf.ts index 89a6d2ca35..b6ab09ae04 100644 --- a/packages/core/test/render3/basic_perf.ts +++ b/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) { diff --git a/packages/core/test/render3/compiler_canonical_spec.ts b/packages/core/test/render3/compiler_canonical_spec.ts index 10cae0177f..0e7ce8dc44 100644 --- a/packages/core/test/render3/compiler_canonical_spec.ts +++ b/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) { 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) { diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index e58aa4a00b..1ceac8fd6a 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/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) { diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index cd2b7b89d5..cee83523f1 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/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 = - defineDirective({factory: () => new DirectiveA, features: [PublicFeature]}); + static ngDirectiveDef = defineDirective( + {type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]}); } class DirectiveB { value: string = 'B'; - static ngDirectiveDef = - defineDirective({factory: () => new DirectiveB, features: [PublicFeature]}); + static ngDirectiveDef = defineDirective( + {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( - {factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))}); + static ngDirectiveDef = defineDirective({ + 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( - {factory: () => new Directive(injectElementRef()), features: [PublicFeature]}); + static ngDirectiveDef = defineDirective({ + 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( - {factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))}); + static ngDirectiveDef = defineDirective({ + type: DirectiveSameInstance, + factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive)) + }); } function Template(ctx: any, cm: boolean) { @@ -116,8 +123,11 @@ describe('di', () => { constructor(public templateRef: TemplateRef) { this.value = (templateRef.constructor as any).name; } - static ngDirectiveDef = defineDirective( - {factory: () => new Directive(injectTemplateRef()), features: [PublicFeature]}); + static ngDirectiveDef = defineDirective({ + type: Directive, + factory: () => new Directive(injectTemplateRef()), + features: [PublicFeature] + }); } class DirectiveSameInstance { @@ -125,8 +135,10 @@ describe('di', () => { constructor(templateRef: TemplateRef, directive: Directive) { this.value = templateRef === directive.templateRef; } - static ngDirectiveDef = defineDirective( - {factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))}); + static ngDirectiveDef = defineDirective({ + 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( - {factory: () => new Directive(injectViewContainerRef()), features: [PublicFeature]}); + static ngDirectiveDef = defineDirective({ + 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 = - defineDirective({factory: () => new ParentDirective(), features: [PublicFeature]}); + static ngDirectiveDef = defineDirective({ + 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( - {factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))}); + static ngDirectiveDef = defineDirective({ + type: Child2Directive, + factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective)) + }); } function Template(ctx: any, cm: boolean) { diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index 8032f818c2..60c82ff794 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/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(directiveIndex).klass)); diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index 7026f333c5..e661001c14 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -42,8 +42,12 @@ describe('exports', () => { class MyComponent { name = 'Nancy'; - static ngComponentDef = - defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent}); + static ngComponentDef = defineComponent({ + type: MyComponent, + tag: 'comp', + template: function() {}, + factory: () => new MyComponent + }); } expect(renderToHtml(Template, {})).toEqual('Nancy'); @@ -55,14 +59,19 @@ describe('exports', () => { let myDir: MyDir; class MyComponent { constructor() { myComponent = this; } - static ngComponentDef = - defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent}); + static ngComponentDef = defineComponent({ + 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'}}); } /**
*/ @@ -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('
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'}}); } /**
*/ @@ -230,8 +240,12 @@ describe('exports', () => { constructor() { myComponent = this; } - static ngComponentDef = - defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent}); + static ngComponentDef = defineComponent({ + type: MyComponent, + tag: 'comp', + template: function() {}, + factory: () => new MyComponent + }); } expect(renderToHtml(Template, {})).toEqual('oneNancy'); }); diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 18c3562b5d..289fb5618e 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/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) { diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index 893a386785..6384a949b0 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/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( - {tag: name, factory: () => new Component(), inputs: {val: 'val'}, template: template}); + static ngComponentDef = defineComponent({ + 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( - {tag: name, factory: () => new Component(), inputs: {val: 'val'}, template: template}); + static ngComponentDef = defineComponent({ + 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 { diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index 7ed78305c2..41955afbf9 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -21,6 +21,7 @@ describe('event listeners', () => { onClick() { this.counter++; } static ngComponentDef = defineComponent({ + type: MyComp, tag: 'comp', /** */ template: function CompTemplate(ctx: any, cm: boolean) { diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index 3a5f244c5e..e43bde89fc 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/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( - {factory: () => otherDir = new OtherDir, outputs: {changeStream: 'change'}}); + static ngDirectiveDef = defineDirective({ + 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 = - defineDirective({factory: () => buttonDir = new MyButton, outputs: {click: 'click'}}); + static ngDirectiveDef = defineDirective( + {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 = - defineDirective({factory: () => otherDir = new OtherDir, inputs: {change: 'change'}}); + static ngDirectiveDef = defineDirective( + {type: OtherDir, factory: () => otherDir = new OtherDir, inputs: {change: 'change'}}); } /** */ diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index e704a1383f..f6aea699a5 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -69,8 +69,8 @@ describe('elementProperty', () => { class MyButton { disabled: boolean; - static ngDirectiveDef = - defineDirective({factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}}); + static ngDirectiveDef = defineDirective( + {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 = - defineDirective({factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}}); + static ngDirectiveDef = defineDirective( + {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 = - defineDirective({factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}}); + static ngDirectiveDef = defineDirective( + {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) { diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 6b64bfb4db..20b8b1e52b 100644 --- a/packages/core/test/render3/render_util.ts +++ b/packages/core/test/render3/render_util.ts @@ -82,14 +82,20 @@ export function createComponent( name: string, template: ComponentTemplate): ComponentType { return class Component { value: any; - static ngComponentDef = defineComponent( - {tag: name, factory: () => new Component, template: template, features: [PublicFeature]}); + static ngComponentDef = defineComponent({ + type: Component, + tag: name, + factory: () => new Component, + template: template, + features: [PublicFeature] + }); }; } export function createDirective({exportAs}: {exportAs?: string} = {}): DirectiveType { return class Directive { static ngDirectiveDef = defineDirective({ + type: Directive, factory: () => new Directive(), features: [PublicFeature], exportAs: exportAs, diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index 708d4c9103..83a266000a 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/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) {