honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

PR Close #21650
This commit is contained in:
Kara Erickson 2018-01-22 15:27:21 -08:00 committed by Misko Hevery
parent 97b928053d
commit 98174758ad
20 changed files with 196 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/benchmarks/src/tree/render3/tree.ts
View File

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

5
packages/core/src/render3/component.ts
View File

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

23
packages/core/src/render3/definition.ts
View File

@ -14,7 +14,7 @@ import {resolveRendererType2} from '../view/util';
import {diPublic} from './di';
import {componentRefresh} from './instructions';
import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs, TypedDirectiveDef} from './interfaces/definition';
import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs, LifecycleHooksMap} from './interfaces/definition';
@ -35,6 +35,7 @@ import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs, TypedDir
*/
export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): ComponentDef<T> {
const def = <ComponentDef<any>>{
type: componentDefinition.type,
diPublic: null,
n: componentDefinition.factory,
tag: (componentDefinition as ComponentDefArgs<T>).tag || null !,
@ -50,6 +51,7 @@ export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): Co
methods: invertObject(componentDefinition.methods),
rendererType: resolveRendererType2(componentDefinition.rendererType) || null,
exportAs: componentDefinition.exportAs,
lifecycleHooks: getLifecyleHooksMap<T>(componentDefinition.type)
};
const feature = componentDefinition.features;
feature && feature.forEach((fn) => fn(def));
@ -109,6 +111,25 @@ export function NgOnChangesFeature<T>(type: Type<T>): (definition: DirectiveDef<
};
}
/**
* Takes the component type and returns a formatted map of lifecycle hooks for that
* component.
*
* @param type The component type
*/
function getLifecyleHooksMap<T>(type: Type<T>): LifecycleHooksMap {
return {
onInit: type.prototype.ngOnInit || null,
doCheck: type.prototype.ngDoCheck || null,
afterContentInit: type.prototype.ngAfterContentInit || null,
afterContentChecked: type.prototype.ngAfterContentChecked || null,
afterViewInit: type.prototype.ngAfterViewInit || null,
afterViewChecked: type.prototype.ngAfterViewChecked || null,
onDestroy: type.prototype.ngOnDestroy || null,
};
}
export function PublicFeature<T>(definition: DirectiveDef<T>) {
definition.diPublic = diPublic;
}

6
packages/core/src/render3/di.ts
View File

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

5
packages/core/src/render3/instructions.ts
View File

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

26
packages/core/src/render3/interfaces/definition.ts
View File

@ -27,6 +27,9 @@ export const enum DirectiveDefFlags {ContentQuery = 0b10}
* `DirectiveDef` is a compiled version of the Directive used by the renderer instructions.
*/
export interface DirectiveDef<T> {
/** Token representing the directive. Used by DI. */
type: Type<T>;
/** Function that makes a directive public to the DI system. */
diPublic: ((def: DirectiveDef<any>) => void)|null;
@ -85,6 +88,9 @@ export interface DirectiveDef<T> {
// (for backwards compatibility). Child template processing thus needs to be
// delayed until all inputs and host bindings in a view have been checked.
h(directiveIndex: number, elementIndex: number): void;
/* A map of the lifecycle hooks defined on this directive (key: name, value: fn) */
lifecycleHooks: LifecycleHooksMap;
}
export interface ComponentDef<T> extends DirectiveDef<T> {
@ -122,17 +128,19 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
readonly rendererType: RendererType2|null;
}
/**
* 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>; }
/* 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<T> {
type: Type<T>;
factory: () => T;
refresh?: (directiveIndex: number, elementIndex: number) => void;
inputs?: {[P in keyof T]?: string};

4
packages/core/src/render3/query.ts
View File

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

1
packages/core/test/render3/basic_perf.ts
View File

@ -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) {

7
packages/core/test/render3/compiler_canonical_spec.ts
View File

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

6
packages/core/test/render3/component_spec.ts
View File

@ -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) {

64
packages/core/test/render3/di_spec.ts
View File

@ -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<any>) {
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<any>, 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) {

1
packages/core/test/render3/directive_spec.ts
View File

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

32
packages/core/test/render3/exports_spec.ts
View File

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

4
packages/core/test/render3/integration_spec.ts
View File

@ -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) {

24
packages/core/test/render3/lifecycle_spec.ts
View File

@ -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 {

1
packages/core/test/render3/listeners_spec.ts
View File

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

17
packages/core/test/render3/outputs_spec.ts
View File

@ -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'}});
}
/** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */

17
packages/core/test/render3/properties_spec.ts
View File

@ -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) {

10
packages/core/test/render3/render_util.ts
View File

@ -82,14 +82,20 @@ export function createComponent(
name: string, template: ComponentTemplate<any>): ComponentType<any> {
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<any> {
return class Directive {
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(),
features: [PublicFeature],
exportAs: exportAs,

4
packages/core/test/render3/renderer_factory_spec.ts
View File

@ -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) {