cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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