diff --git a/modules/benchmarks/src/largetable/render3/table.ts b/modules/benchmarks/src/largetable/render3/table.ts index f2a479d315..5e62f6dca1 100644 --- a/modules/benchmarks/src/largetable/render3/table.ts +++ b/modules/benchmarks/src/largetable/render3/table.ts @@ -16,16 +16,13 @@ export class LargeTableComponent { /** @nocollapse */ static ngComponentDef: ComponentDef = 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(); diff --git a/modules/benchmarks/src/tree/render3/tree.ts b/modules/benchmarks/src/tree/render3/tree.ts index 0d7eda53d9..78d4611190 100644 --- a/modules/benchmarks/src/tree/render3/tree.ts +++ b/modules/benchmarks/src/tree/render3/tree.ts @@ -36,7 +36,6 @@ export class TreeComponent { /** @nocollapse */ static ngComponentDef: ComponentDef = 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 = 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 8fd450a1fa..f9e18c739e 100644 --- a/packages/core/src/render3/component.ts +++ b/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 {ComponentDef, ComponentType} from './interfaces/definition'; +import {NG_HOST_SYMBOL, createError, createLView, directive, directiveCreate, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions'; +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( componentType: ComponentType, opts: CreateComponentOptions = {}): T { const rendererFactory = opts.rendererFactory || domRendererFactory3; - const componentDef = componentType.ngComponentDef; + const componentDef = componentType.ngComponentDef as TypedComponentDef; + if (componentDef.type != componentType) componentDef.type = componentType; let component: T; const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag); const oldView = enterView( diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index c616a14711..13ea394cfd 100644 --- a/packages/core/src/render3/definition.ts +++ b/packages/core/src/render3/definition.ts @@ -32,7 +32,6 @@ import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs} from './ */ export function defineComponent(componentDefinition: ComponentDefArgs): ComponentDef { const def = >{ - type: componentDefinition.type, diPublic: null, n: componentDefinition.factory, tag: (componentDefinition as ComponentDefArgs).tag || null !, diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts index d233c10231..759dbef3d2 100644 --- a/packages/core/src/render3/di.ts +++ b/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): void { +export function diPublicInInjector(di: LInjector, def: TypedDirectiveDef): void { bloomAdd(di, def.type); } @@ -211,7 +211,7 @@ export function getOrCreateInjectable(di: LInjector, token: Type, 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; + const directiveDef = ngStaticData[i] as TypedDirectiveDef; 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 9c62b46321..925976ba02 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} 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): void { +export function diPublic(def: TypedDirectiveDef): 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).type = + nameOrComponentType as ComponentType; 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).type = directiveType; directiveCreate( ++index, directiveDef.n(), directiveDef, hack_findQueryName(directiveDef, localRefs)); } @@ -945,8 +949,7 @@ export function directiveCreate( if (index >= ngStaticData.length) { ngStaticData[index] = directiveDef !; if (queryName) { - ngDevMode && - assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData'); + ngDevMode && assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData'); const nodeStaticData = previousOrParentNode !.tNode !; (nodeStaticData.localNames || (nodeStaticData.localNames = [])).push(queryName, index); } diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts index 24c2231c09..cd5cff3805 100644 --- a/packages/core/src/render3/interfaces/definition.ts +++ b/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 { - /** - * Token representing the directive. Used by DI. - */ - type: Type; - /** Function that makes a directive public to the DI system. */ diPublic: ((def: DirectiveDef) => void)|null; @@ -41,26 +36,26 @@ export interface DirectiveDef { * * 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 extends DirectiveDef { * * 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; + readonly template: ComponentTemplate; /** * 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 extends DirectiveDef { type: DirectiveType; } + +/** + * Private: do not export + */ +export interface TypedComponentDef extends ComponentDef { type: ComponentType; } + 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 2afc949dd6..b605850be8 100644 --- a/packages/core/src/render3/query.ts +++ b/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): 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; + const def = ngStaticData[i] as TypedDirectiveDef; 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 b6ab09ae04..89a6d2ca35 100644 --- a/packages/core/test/render3/basic_perf.ts +++ b/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) { diff --git a/packages/core/test/render3/compiler_canonical_spec.ts b/packages/core/test/render3/compiler_canonical_spec.ts index 22a0ca2e65..3e589dde34 100644 --- a/packages/core/test/render3/compiler_canonical_spec.ts +++ b/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) { log.push('ifDirective'); } // NORMATIVE static ngDirectiveDef = r3.defineDirective({ - type: IfDirective, factory: () => new IfDirective(r3.injectTemplateRef()), }); // /NORMATIVE } - @Component({selector: 'my-component', template: `
  • {{salutation}} {{foo}}
`}) + @Component( + {selector: 'my-component', template: `
  • {{salutation}} {{foo}}
`}) class MyComponent { salutation = 'Hello'; // NORMATIVE @@ -198,7 +195,7 @@ describe('compiler specification', () => { xdescribe('NgModule', () => { interface Injectable { - scope?: /*InjectorDefType*/any; + scope?: /*InjectorDefType*/ any; factory: Function; } @@ -237,8 +234,8 @@ xdescribe('NgModule', () => { static ngInjectorDef = defineInjector({ factory: () => new MyModule(inject(Toast)), provider: [ - {provide: Toast, deps: [String]}, // If Toast has matadata generate this line - Toast, // If toast has not metadata generate this line. + {provide: Toast, deps: [String]}, // If Toast has matadata generate this line + Toast, // If toast has not metadata generate this line. {provide: String, useValue: 'Hello'} ], imports: [CommonModule] @@ -247,7 +244,7 @@ xdescribe('NgModule', () => { } @Injectable(/*{MyModule}*/) - class BurntToast{ + class BurntToast { constructor(@Optional() toast: Toast|null, name: String) {} // NORMATIVE static ngInjectableDef = defineInjectable({ diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 40be32d369..b955864bc3 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/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) { diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts index febfb8dae3..c41b2f4980 100644 --- a/packages/core/test/render3/content_spec.ts +++ b/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); diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts index d49fc31f12..0a5532cacb 100644 --- a/packages/core/test/render3/control_flow_spec.ts +++ b/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); diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index 9b5c1d2ca1..f9fc6005e7 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/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( - {type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]}); + static ngDirectiveDef = + defineDirective({factory: () => new DirectiveA, features: [PublicFeature]}); } class DirectiveB { value: string = 'B'; - static ngDirectiveDef = defineDirective( - {type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]}); + static ngDirectiveDef = + defineDirective({factory: () => new DirectiveB, features: [PublicFeature]}); } class DirectiveC { value: string; constructor(a: DirectiveA, b: DirectiveB) { this.value = a.value + b.value; } - static ngDirectiveDef = defineDirective({ - type: DirectiveC, - factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB)) - }); + static ngDirectiveDef = defineDirective( + {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({ - type: Directive, - factory: () => new Directive(injectElementRef()), - features: [PublicFeature] - }); + static ngDirectiveDef = defineDirective( + {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({ - type: DirectiveSameInstance, - factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive)) - }); + static ngDirectiveDef = defineDirective( + {factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))}); } function Template(ctx: any, cm: boolean) { @@ -122,11 +115,8 @@ describe('di', () => { constructor(public templateRef: TemplateRef) { this.value = (templateRef.constructor as any).name; } - static ngDirectiveDef = defineDirective({ - type: Directive, - factory: () => new Directive(injectTemplateRef()), - features: [PublicFeature] - }); + static ngDirectiveDef = defineDirective( + {factory: () => new Directive(injectTemplateRef()), features: [PublicFeature]}); } class DirectiveSameInstance { @@ -134,10 +124,8 @@ describe('di', () => { constructor(templateRef: TemplateRef, directive: Directive) { this.value = templateRef === directive.templateRef; } - static ngDirectiveDef = defineDirective({ - type: DirectiveSameInstance, - factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive)) - }); + static ngDirectiveDef = defineDirective( + {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({ - type: Directive, - factory: () => new Directive(injectViewContainerRef()), - features: [PublicFeature] - }); + static ngDirectiveDef = defineDirective( + {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({ - type: ParentDirective, - factory: () => new ParentDirective(), - features: [PublicFeature] - }); + static ngDirectiveDef = + defineDirective({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({ - type: Child2Directive, - factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective)) - }); + static ngDirectiveDef = defineDirective( + {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); diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index 0776dea133..25782ad334 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/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(directiveIndex).klass)); diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index 01cdc4119b..3ce2d4164e 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -42,12 +42,8 @@ describe('exports', () => { class MyComponent { name = 'Nancy'; - static ngComponentDef = defineComponent({ - type: MyComponent, - tag: 'comp', - template: function() {}, - factory: () => new MyComponent - }); + static ngComponentDef = + defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent}); } expect(renderToHtml(Template, {})).toEqual('Nancy'); @@ -59,19 +55,14 @@ describe('exports', () => { let myDir: MyDir; class MyComponent { constructor() { myComponent = this; } - static ngComponentDef = defineComponent({ - type: MyComponent, - tag: 'comp', - template: function() {}, - factory: () => new MyComponent - }); + static ngComponentDef = + defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent}); } class MyDir { myDir: MyComponent; constructor() { myDir = this; } - static ngDirectiveDef = - defineDirective({type: MyDir, factory: () => new MyDir, inputs: {myDir: 'myDir'}}); + static ngDirectiveDef = defineDirective({factory: () => new MyDir, inputs: {myDir: 'myDir'}}); } /**
*/ @@ -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('
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'}}); } /**
*/ @@ -240,12 +230,8 @@ describe('exports', () => { constructor() { myComponent = this; } - static ngComponentDef = defineComponent({ - type: MyComponent, - tag: 'comp', - template: function() {}, - factory: () => new MyComponent - }); + static ngComponentDef = + defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent}); } expect(renderToHtml(Template, {})).toEqual('oneNancy'); }); @@ -254,9 +240,7 @@ describe('exports', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div'); - { - C(1); - } + { C(1); } e(); } cR(1); diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 84a1366f27..922d28781f 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/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) { diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index 3fd437290e..57766836d2 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/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(); diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index a2172af81b..096e9d1863 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -21,7 +21,6 @@ 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 c2118fdfbc..103e882970 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/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({ - type: OtherDir, - factory: () => otherDir = new OtherDir, - outputs: {changeStream: 'change'} - }); + static ngDirectiveDef = defineDirective( + {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( - {type: MyButton, factory: () => buttonDir = new MyButton, outputs: {click: 'click'}}); + static ngDirectiveDef = + 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( - {type: OtherDir, factory: () => otherDir = new OtherDir, inputs: {change: 'change'}}); + static ngDirectiveDef = + defineDirective({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 5e8b3155b1..2aa72d1676 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( - {type: MyButton, factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}}); + static ngDirectiveDef = + 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( - {type: IdDir, factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}}); + static ngDirectiveDef = + 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( - {type: MyDirB, factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}}); + static ngDirectiveDef = + 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]); diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index fe1bb2f917..6b64bfb4db 100644 --- a/packages/core/test/render3/render_util.ts +++ b/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): ComponentType { return class Component { value: any; - static ngComponentDef = defineComponent({ - type: Component, - tag: name, - factory: () => new Component, - template: template, - features: [PublicFeature] - }); + static ngComponentDef = defineComponent( + {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 f1755d6b7f..14d75f8025 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/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) {