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

refactor(ivy): move directive into elementStart (#21374)

Browse Source 
We used to have a separate `directive` instruction for instantiating
directives. However, such an instruction requires that directives
are created in the correct order, which would require that template
compiler would have knowledge of all dependent directives. This
would break template compilation locality principle.

This change only changes the APIs to expected form but does
not change the semantics. The semantics will need to be corrected
in subsequent commits. The semantic change needed is to
resolve the directive instantiation error at runtime based on
injection dependencies.

PR Close #21374
This commit is contained in:
Misko Hevery
2018-01-08 21:57:50 -08:00
committed by Alex Eagle
parent c0080d76c4
commit a6d41c47a9
19 changed files with 398 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,8 +68,7 @@ describe('encapsulation', () => {
tag: 'wrapper',
template: function(ctx: WrapperComponent, cm: boolean) {
if (cm) {
E(0, EncapsulatedComponent.ngComponentDef);
{ D(1, EncapsulatedComponent.ngComponentDef.n(), EncapsulatedComponent.ngComponentDef); }
E(0, EncapsulatedComponent);
e();
}
EncapsulatedComponent.ngComponentDef.h(1, 0);
@ -86,8 +85,7 @@ describe('encapsulation', () => {
template: function(ctx: EncapsulatedComponent, cm: boolean) {
if (cm) {
T(0, 'foo');
E(1, LeafComponent.ngComponentDef);
{ D(2, LeafComponent.ngComponentDef.n(), LeafComponent.ngComponentDef); }
E(1, LeafComponent);
e();
}
LeafComponent.ngComponentDef.h(2, 1);
@ -135,8 +133,7 @@ describe('encapsulation', () => {
tag: 'wrapper',
template: function(ctx: WrapperComponentWith, cm: boolean) {
if (cm) {
E(0, LeafComponentwith.ngComponentDef);
{ D(1, LeafComponentwith.ngComponentDef.n(), LeafComponentwith.ngComponentDef); }
E(0, LeafComponentwith);
e();
}
LeafComponentwith.ngComponentDef.h(1, 0);

81
packages/core/test/render3/content_spec.ts
View File

@ -30,11 +30,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, 'content');
}
E(0, Child);
{ T(2, 'content'); }
e();
}
Child.ngComponentDef.h(1, 0);
@ -53,11 +50,8 @@ describe('content projection', () => {
});
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, 'content');
}
E(0, Child);
{ T(2, 'content'); }
e();
}
Child.ngComponentDef.h(1, 0);
@ -79,11 +73,8 @@ describe('content projection', () => {
const Child = createComponent('child', function(ctx: any, cm: boolean) {
if (cm) {
m(0, pD());
E(1, GrandChild.ngComponentDef);
{
D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef);
P(3, 0);
}
E(1, GrandChild);
{ P(3, 0); }
e();
GrandChild.ngComponentDef.h(2, 1);
GrandChild.ngComponentDef.r(2, 1);
@ -91,9 +82,8 @@ describe('content projection', () => {
});
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'b');
T(3, 'Hello');
e();
@ -120,9 +110,8 @@ describe('content projection', () => {
});
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, '(');
C(3);
c();
@ -162,9 +151,8 @@ describe('content projection', () => {
});
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
C(2);
c();
}
@ -206,9 +194,8 @@ describe('content projection', () => {
});
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, '(');
C(3);
c();
@ -285,9 +272,9 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef);
childCmptInstance = D(1);
T(2, 'content');
}
e();
@ -341,9 +328,9 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef);
childCmptInstance = D(1);
T(2, 'content');
}
e();
@ -381,11 +368,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, 'content');
}
E(0, Child);
{ T(2, 'content'); }
e();
}
Child.ngComponentDef.h(1, 0);
@ -442,9 +426,9 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef);
childCmptInstance = D(1);
T(2, 'content');
}
e();
@ -488,9 +472,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['title', 'toFirst']);
{ T(3, '1'); }
e();
@ -536,9 +519,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'toFirst']);
{ T(3, '1'); }
e();
@ -584,9 +566,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'other toFirst']);
{ T(3, '1'); }
e();
@ -631,9 +612,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'toFirst']);
{ T(3, '1'); }
e();
@ -678,9 +658,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'toFirst']);
{ T(3, '1'); }
e();
@ -727,9 +706,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span');
{ T(3, '1'); }
e();
@ -780,9 +758,8 @@ describe('content projection', () => {
const Child = createComponent('child', function(ctx: any, cm: boolean) {
if (cm) {
m(0, pD());
E(1, GrandChild.ngComponentDef);
E(1, GrandChild);
{
D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef);
P(3, 0);
E(4, 'span');
{ T(5, 'in child template'); }
@ -803,9 +780,8 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span');
{ T(3, 'parent content'); }
e();
@ -845,10 +821,9 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) {
E(0, Child.ngComponentDef);
E(0, Child);
{
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
C(2, undefined, 'div');
C(2, undefined, undefined, 'div');
c();
}
e();

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

@ -21,16 +21,13 @@ describe('di', () => {
it('should create directive with no deps', () => {
class Directive {
value: string = 'Created';
static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
}
const DirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
D(1, DirectiveDef.n(), DirectiveDef);
T(2);
}
E(0, 'div', null, [Directive]);
{ T(2); }
e();
}
t(2, b(D<Directive>(1).value));
@ -44,36 +41,31 @@ 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]});
}
const DirectiveADef = defineDirective(
{type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]});
class DirectiveB {
value: string = 'B';
static ngDirectiveDef = defineDirective(
{type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
}
const DirectiveBDef = 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({
type: DirectiveC,
factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))
});
}
const DirectiveCDef = defineDirective({
type: DirectiveC,
factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))
});
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
E(0, 'div', null, [DirectiveA]);
{
D(1, DirectiveADef.n(), DirectiveADef);
E(2, 'span');
{
D(3, DirectiveBDef.n(), DirectiveBDef);
D(4, DirectiveCDef.n(), DirectiveCDef);
T(5);
}
E(2, 'span', null, [DirectiveB, DirectiveC]);
{ T(5); }
e();
}
e();
@ -92,32 +84,28 @@ describe('di', () => {
constructor(public elementRef: ElementRef) {
this.value = (elementRef.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectElementRef()),
features: [PublicFeature]
});
}
const DirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectElementRef()),
features: [PublicFeature]
});
class DirectiveSameInstance {
value: boolean;
constructor(elementRef: ElementRef, directive: Directive) {
this.value = elementRef === directive.elementRef;
}
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
});
}
const DirectiveSameInstanceDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
});
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
D(1, DirectiveDef.n(), DirectiveDef);
D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
T(3);
}
E(0, 'div', null, [Directive, DirectiveSameInstance]);
{ T(3); }
e();
}
t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
@ -134,32 +122,28 @@ describe('di', () => {
constructor(public templateRef: TemplateRef<any>) {
this.value = (templateRef.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectTemplateRef()),
features: [PublicFeature]
});
}
const DirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectTemplateRef()),
features: [PublicFeature]
});
class DirectiveSameInstance {
value: boolean;
constructor(templateRef: TemplateRef<any>, directive: Directive) {
this.value = templateRef === directive.templateRef;
}
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
});
}
const DirectiveSameInstanceDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
});
function Template(ctx: any, cm: any) {
if (cm) {
C(0, function() {});
{
D(1, DirectiveDef.n(), DirectiveDef);
D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
}
C(0, [Directive, DirectiveSameInstance], function() {});
c();
T(3);
}
@ -177,32 +161,28 @@ describe('di', () => {
constructor(public viewContainerRef: ViewContainerRef) {
this.value = (viewContainerRef.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectViewContainerRef()),
features: [PublicFeature]
});
}
const DirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectViewContainerRef()),
features: [PublicFeature]
});
class DirectiveSameInstance {
value: boolean;
constructor(viewContainerRef: ViewContainerRef, directive: Directive) {
this.value = viewContainerRef === directive.viewContainerRef;
}
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
});
}
const DirectiveSameInstanceDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
});
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
D(1, DirectiveDef.n(), DirectiveDef);
D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
T(3);
}
E(0, 'div', null, [Directive, DirectiveSameInstance]);
{ T(3); }
e();
}
t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
@ -255,38 +235,41 @@ describe('di', () => {
});
it('should inject from parent view', () => {
class ParentDirective {}
const ParentDirectiveDef = defineDirective(
{type: ParentDirective, factory: () => new ParentDirective(), features: [PublicFeature]});
class ParentDirective {
static ngDirectiveDef = defineDirective({
type: ParentDirective,
factory: () => new ParentDirective(),
features: [PublicFeature]
});
}
class ChildDirective {
value: string;
constructor(public parent: ParentDirective) {
this.value = (parent.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: ChildDirective,
factory: () => new ChildDirective(inject(ParentDirective)),
features: [PublicFeature]
});
}
const ChildDirectiveDef = defineDirective({
type: ChildDirective,
factory: () => new ChildDirective(inject(ParentDirective)),
features: [PublicFeature]
});
class Child2Directive {
value: boolean;
constructor(parent: ParentDirective, child: ChildDirective) {
this.value = parent === child.parent;
}
static ngDirectiveDef = defineDirective({
type: Child2Directive,
factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
});
}
const Child2DirectiveDef = defineDirective({
type: Child2Directive,
factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
});
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
E(0, 'div', null, [ParentDirective]);
{
D(1, ParentDirectiveDef.n(), ParentDirectiveDef);
C(2);
c();
}
@ -295,12 +278,8 @@ describe('di', () => {
cR(2);
{
if (V(0)) {
E(0, 'span');
{
D(1, ChildDirectiveDef.n(), ChildDirectiveDef);
D(2, Child2DirectiveDef.n(), Child2DirectiveDef);
T(3);
}
E(0, 'span', null, [ChildDirective, Child2Directive]);
{ T(3); }
e();
}
t(3, b2('', D<ChildDirective>(1).value, '-', D<Child2Directive>(2).value, ''));

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

@ -19,22 +19,21 @@ describe('directive', () => {
class Directive {
klass = 'foo';
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => directiveInstance = new Directive,
refresh: (directiveIndex: number, elementIndex: number) => {
p(elementIndex, 'className', b(D<Directive>(directiveIndex).klass));
}
});
}
const DirectiveDef = defineDirective({
type: Directive,
factory: () => directiveInstance = new Directive,
refresh: (directiveIndex: number, elementIndex: number) => {
p(elementIndex, 'className', b(D<Directive>(directiveIndex).klass));
}
});
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'span');
{ D(1, DirectiveDef.n(), DirectiveDef); }
E(0, 'span', null, [Directive]);
e();
}
DirectiveDef.r(1, 0);
Directive.ngDirectiveDef.r(1, 0);
}
expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>');

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

@ -32,8 +32,7 @@ describe('exports', () => {
/** <comp #myComp></comp> {{ myComp.name }} */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, MyComponent.ngComponentDef);
{ D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
E(0, MyComponent);
e();
T(2);
}
@ -78,11 +77,9 @@ describe('exports', () => {
/** <comp #myComp></comp> <div [myDir]="myComp"></div> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, MyComponent.ngComponentDef);
{ D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
E(0, MyComponent);
e();
E(2, 'div');
{ D(3, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(2, 'div', null, [MyDir]);
e();
}
p(2, 'myDir', b(D<MyComponent>(1)));
@ -97,8 +94,7 @@ describe('exports', () => {
/** <div someDir #myDir="someDir"></div> {{ myDir.name }} */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
D(1, SomeDirDef.n(), SomeDirDef);
E(0, 'div', null, [SomeDir]);
e();
T(2);
}
@ -107,8 +103,8 @@ describe('exports', () => {
class SomeDir {
name = 'Drew';
static ngDirectiveDef = defineDirective({type: SomeDir, factory: () => new SomeDir});
}
const SomeDirDef = defineDirective({type: SomeDir, factory: () => new SomeDir});
expect(renderToHtml(Template, {})).toEqual('<div></div>Drew');
});
@ -207,11 +203,9 @@ describe('exports', () => {
/** <div [myDir]="myComp"></div><comp #myComp></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', null, [MyDir]);
e();
E(2, MyComponent.ngComponentDef);
{ D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
E(2, MyComponent);
e();
}
p(0, 'myDir', b(D<MyComponent>(3)));
@ -228,8 +222,7 @@ describe('exports', () => {
if (cm) {
T(0);
T(1);
E(2, 'comp');
{ D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
E(2, MyComponent);
e();
E(4, 'input', ['value', 'one']);
e();

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

@ -230,8 +230,7 @@ describe('render3 integration test', () => {
it('should support a basic component template', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, TodoComponent.ngComponentDef);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
E(0, TodoComponent);
e();
}
TodoComponent.ngComponentDef.h(1, 0);
@ -244,8 +243,7 @@ describe('render3 integration test', () => {
it('should support a component template with sibling', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, TodoComponent.ngComponentDef);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
E(0, TodoComponent);
e();
T(2, 'two');
}
@ -262,11 +260,9 @@ describe('render3 integration test', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, TodoComponent.ngComponentDef);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
E(0, TodoComponent);
e();
E(2, TodoComponent.ngComponentDef);
{ D(3, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
E(2, TodoComponent);
e();
}
TodoComponent.ngComponentDef.h(1, 0);
@ -303,11 +299,7 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, TodoComponentHostBinding.ngComponentDef);
{
D(1, TodoComponentHostBinding.ngComponentDef.n(),
TodoComponentHostBinding.ngComponentDef);
}
E(0, TodoComponentHostBinding);
e();
}
TodoComponentHostBinding.ngComponentDef.h(1, 0);
@ -340,8 +332,7 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, MyComp.ngComponentDef);
{ D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
E(0, MyComp);
e();
}
MyComp.ngComponentDef.h(1, 0);
@ -388,8 +379,7 @@ describe('render3 integration test', () => {
/** <comp [condition]="condition"></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, MyComp.ngComponentDef);
{ D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
E(0, MyComp);
e();
}
p(0, 'condition', b(ctx.condition));

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

@ -15,8 +15,7 @@ describe('lifecycles', () => {
function getParentTemplate(type: any) {
return (ctx: any, cm: boolean) => {
if (cm) {
E(0, type.ngComponentDef);
{ D(1, type.ngComponentDef.n(), type.ngComponentDef); }
E(0, type);
e();
}
p(0, 'val', b(ctx.val));
@ -54,8 +53,7 @@ describe('lifecycles', () => {
/** <comp [val]="val"></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'val', b(ctx.val));
@ -78,8 +76,7 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
Parent.ngComponentDef.h(1, 0);
@ -100,11 +97,9 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
E(2, Parent.ngComponentDef);
{ D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(2, Parent);
e();
}
p(0, 'val', 1);
@ -136,8 +131,7 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -169,13 +163,11 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
C(2);
c();
E(3, Comp.ngComponentDef);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(3, Comp);
e();
}
p(0, 'val', 1);
@ -186,8 +178,7 @@ describe('lifecycles', () => {
{
for (let j = 2; j < 5; j++) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'val', j);
@ -219,13 +210,11 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
C(2);
c();
E(3, Parent.ngComponentDef);
{ D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(3, Parent);
e();
}
p(0, 'val', 1);
@ -236,8 +225,7 @@ describe('lifecycles', () => {
{
for (let j = 2; j < 5; j++) {
if (V(0)) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
p(0, 'val', j);
@ -303,8 +291,7 @@ describe('lifecycles', () => {
/** <comp></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -326,8 +313,7 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
Parent.ngComponentDef.h(1, 0);
@ -342,8 +328,7 @@ describe('lifecycles', () => {
/** <comp></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -400,8 +385,7 @@ describe('lifecycles', () => {
/** <comp></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -430,8 +414,7 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -461,8 +444,7 @@ describe('lifecycles', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
Parent.ngComponentDef.h(1, 0);
@ -483,11 +465,9 @@ describe('lifecycles', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
E(2, Parent.ngComponentDef);
{ D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(2, Parent);
e();
}
p(0, 'val', 1);
@ -512,13 +492,11 @@ describe('lifecycles', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
C(2);
c();
E(3, Comp.ngComponentDef);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(3, Comp);
e();
}
p(0, 'val', 1);
@ -529,8 +507,7 @@ describe('lifecycles', () => {
{
for (let i = 2; i < 4; i++) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'val', i);
@ -559,13 +536,11 @@ describe('lifecycles', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
C(2);
c();
E(3, Parent.ngComponentDef);
{ D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(3, Parent);
e();
}
p(0, 'val', 1);
@ -576,8 +551,7 @@ describe('lifecycles', () => {
{
for (let i = 2; i < 4; i++) {
if (V(0)) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
p(0, 'val', i);
@ -604,8 +578,7 @@ describe('lifecycles', () => {
/** <comp></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -623,8 +596,7 @@ describe('lifecycles', () => {
/** <comp [val]="myVal"></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'val', b(ctx.myVal));
@ -649,13 +621,11 @@ describe('lifecycles', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
C(2);
c();
E(3, Parent.ngComponentDef);
{ D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(3, Parent);
e();
}
p(0, 'val', 1);
@ -666,8 +636,7 @@ describe('lifecycles', () => {
{
for (let i = 2; i < 4; i++) {
if (V(0)) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
p(0, 'val', i);
@ -737,8 +706,7 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);
@ -771,11 +739,9 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
E(2, Comp.ngComponentDef);
{ D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(2, Comp);
e();
}
p(0, 'val', b('1'));
@ -813,8 +779,7 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
Parent.ngComponentDef.h(1, 0);
@ -842,8 +807,7 @@ describe('lifecycles', () => {
let Grandparent = createOnDestroyComponent('grandparent', function(ctx: any, cm: boolean) {
if (cm) {
E(0, Parent.ngComponentDef);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
E(0, Parent);
e();
}
Parent.ngComponentDef.h(1, 0);
@ -859,8 +823,7 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Grandparent.ngComponentDef);
{ D(1, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); }
E(0, Grandparent);
e();
}
Grandparent.ngComponentDef.h(1, 0);
@ -897,13 +860,11 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
C(2);
c();
E(3, Comp.ngComponentDef);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(3, Comp);
e();
}
p(0, 'val', b('1'));
@ -914,8 +875,7 @@ describe('lifecycles', () => {
{
if (ctx.condition2) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'val', b('2'));
@ -978,13 +938,11 @@ describe('lifecycles', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
C(2);
c();
E(3, Comp.ngComponentDef);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(3, Comp);
e();
}
p(0, 'val', b('1'));
@ -995,8 +953,7 @@ describe('lifecycles', () => {
{
for (let j = 2; j < ctx.len; j++) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'val', b(j));
@ -1067,8 +1024,7 @@ describe('lifecycles', () => {
T(1, 'Click me');
}
e();
E(2, Comp.ngComponentDef);
{ D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(2, Comp);
e();
E(4, 'button');
{

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

@ -204,11 +204,9 @@ describe('event listeners', () => {
if (ctx.showing) {
if (V(0)) {
T(0, 'Hello');
E(1, MyComp.ngComponentDef);
{ D(2, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
E(1, MyComp);
e();
E(3, MyComp.ngComponentDef);
{ D(4, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
E(3, MyComp);
e();
}
MyComp.ngComponentDef.h(2, 1);

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

@ -44,11 +44,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()"></button-toggle> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
ButtonToggle.ngComponentDef.h(1, 0);
@ -70,9 +67,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, ButtonToggle.ngComponentDef);
E(0, ButtonToggle);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
L('reset', ctx.onReset.bind(ctx));
}
@ -98,11 +94,8 @@ describe('outputs', () => {
/** <button-toggle (change)="counter++"></button-toggle> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', () => ctx.counter++);
}
E(0, ButtonToggle);
{ L('change', () => ctx.counter++); }
e();
}
ButtonToggle.ngComponentDef.h(1, 0);
@ -136,11 +129,8 @@ describe('outputs', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
ButtonToggle.ngComponentDef.h(1, 0);
@ -191,11 +181,8 @@ describe('outputs', () => {
{
if (ctx.condition2) {
if (V(0)) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
ButtonToggle.ngComponentDef.h(1, 0);
@ -265,14 +252,10 @@ describe('outputs', () => {
T(1, 'Click me');
}
e();
E(2, ButtonToggle.ngComponentDef);
{
D(3, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
E(2, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); }
e();
E(4, DestroyComp.ngComponentDef);
{ D(5, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); }
E(4, DestroyComp);
e();
}
ButtonToggle.ngComponentDef.h(3, 2);
@ -323,11 +306,8 @@ describe('outputs', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'button');
{
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
L('click', ctx.onClick.bind(ctx));
}
E(0, 'button', null, [MyButton]);
{ L('click', ctx.onClick.bind(ctx)); }
e();
}
}
@ -349,12 +329,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir></button-toggle> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, ButtonToggle, null, [OtherDir]);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
ButtonToggle.ngComponentDef.h(1, 0);
@ -384,12 +360,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, ButtonToggle, null, [OtherDir]);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
p(0, 'change', b(ctx.change));
@ -433,11 +405,8 @@ describe('outputs', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, ButtonToggle.ngComponentDef);
{
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, ButtonToggle);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
ButtonToggle.ngComponentDef.h(1, 0);
@ -445,11 +414,8 @@ describe('outputs', () => {
v();
} else {
if (V(1)) {
E(0, 'div');
{
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, 'div', null, [OtherDir]);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
v();

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

@ -90,12 +90,8 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'button');
{
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
T(3, 'Click me');
}
E(0, 'button', null, [MyButton, OtherDir]);
{ T(3, 'Click me'); }
e();
}
@ -120,11 +116,8 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'button');
{
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
T(2, 'Click me');
}
E(0, 'button', null, [MyButton]);
{ T(2, 'Click me'); }
e();
}
@ -159,8 +152,7 @@ describe('elementProperty', () => {
/** <comp [id]="id"></comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
p(0, 'id', b(ctx.id));
@ -191,12 +183,8 @@ describe('elementProperty', () => {
/** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'button');
{
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
D(2, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef);
T(3, 'Click me');
}
E(0, 'button', null, [MyButton, OtherDisabledDir]);
{ T(3, 'Click me'); }
e();
}
p(0, 'disabled', b(ctx.isDisabled));
@ -217,9 +205,8 @@ describe('elementProperty', () => {
/** <button otherDir [id]="id" (click)="onClick()">Click me</button> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'button');
E(0, 'button', null, [OtherDir]);
{
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('click', ctx.onClick.bind(ctx));
T(2, 'Click me');
}
@ -261,11 +248,8 @@ describe('elementProperty', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'button');
{
D(1, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef);
T(2, 'Click me');
}
E(0, 'button', null, [IdDir]);
{ T(2, 'Click me'); }
e();
C(3);
c();
@ -283,11 +267,8 @@ describe('elementProperty', () => {
v();
} else {
if (V(1)) {
E(0, 'button');
{
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
T(2, 'Click me too');
}
E(0, 'button', null, [OtherDir]);
{ T(2, 'Click me too'); }
e();
}
p(0, 'id', b(ctx.id3));
@ -337,8 +318,7 @@ describe('elementProperty', () => {
/** <div role="button" myDir></div> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button']);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', ['role', 'button'], [MyDir]);
e();
}
}
@ -352,8 +332,7 @@ describe('elementProperty', () => {
/** <div role="button" [role]="role" myDir></div> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button']);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', ['role', 'button'], [MyDir]);
e();
}
p(0, 'role', b(ctx.role));
@ -371,11 +350,7 @@ describe('elementProperty', () => {
/** <div role="button" myDir myDirB></div> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button']);
{
D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef);
D(2, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef);
}
E(0, 'div', ['role', 'button'], [MyDir, MyDirB]);
e();
}
}
@ -390,8 +365,7 @@ describe('elementProperty', () => {
/** <div role="button" dir="rtl" myDir></div> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button', 'dir', 'rtl']);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]);
e();
}
}
@ -406,11 +380,8 @@ describe('elementProperty', () => {
/** <div role="button" (change)="onChange()" myDir></div> */
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button']);
{
D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
E(0, 'div', ['role', 'button'], [MyDir]);
{ L('change', ctx.onChange.bind(ctx)); }
e();
}
}
@ -434,11 +405,9 @@ describe('elementProperty', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button', 'dir', 'rtl']);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]);
e();
E(2, 'div', ['role', 'listbox']);
{ D(3, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); }
E(2, 'div', ['role', 'listbox'], [MyDirB]);
e();
}
}
@ -462,8 +431,7 @@ describe('elementProperty', () => {
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'listbox']);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', ['role', 'listbox'], [MyDir]);
e();
C(2);
c();
@ -472,8 +440,7 @@ describe('elementProperty', () => {
{
if (ctx.condition) {
if (V(0)) {
E(0, 'div', ['role', 'button']);
{ D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); }
E(0, 'div', ['role', 'button'], [MyDirB]);
e();
}
v();
@ -510,8 +477,7 @@ describe('elementProperty', () => {
type: Comp,
template: function(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button']);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
E(0, 'div', ['role', 'button'], [MyDir]);
e();
T(2);
}
@ -535,8 +501,7 @@ describe('elementProperty', () => {
{
for (let i = 0; i < 2; i++) {
if (V(0)) {
E(0, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
E(0, Comp);
e();
}
Comp.ngComponentDef.h(1, 0);

72
packages/core/test/render3/query_spec.ts
View File

@ -59,11 +59,11 @@ describe('query', () => {
if (cm) {
m(0, Q(Child, false));
m(1, Q(Child, true));
E(2, Child.ngComponentDef);
E(2, Child);
{
child1 = D(3, Child.ngComponentDef.n(), Child.ngComponentDef);
E(4, Child.ngComponentDef);
{ child2 = D(5, Child.ngComponentDef.n(), Child.ngComponentDef); }
child1 = D(3);
E(4, Child);
{ child2 = D(5); }
e();
}
e();
@ -92,8 +92,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(Child, false, QueryReadType.ElementRef));
elToQuery = E(1, 'div');
{ D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); }
elToQuery = E(1, 'div', null, [Child]);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -121,11 +120,8 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(Child, false, OtherChild));
E(1, 'div');
{
D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef);
D(3, otherChildInstance = OtherChild.ngDirectiveDef.n(), OtherChild.ngDirectiveDef);
}
E(1, 'div', null, [Child, OtherChild]);
{ otherChildInstance = D(3); }
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -150,8 +146,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(Child, false, OtherChild));
E(1, 'div');
{ D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); }
E(1, 'div', null, [Child]);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -179,7 +174,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo']));
elToQuery = E(1, 'div', [], 'foo');
elToQuery = E(1, 'div', null, null, ['foo', '']);
e();
E(2, 'div');
e();
@ -209,11 +204,11 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo', 'bar']));
el1ToQuery = E(1, 'div', null, 'foo');
el1ToQuery = E(1, 'div', null, null, ['foo', '']);
e();
E(2, 'div');
e();
el2ToQuery = E(3, 'div', null, 'bar');
el2ToQuery = E(3, 'div', null, null, ['bar', '']);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -240,7 +235,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ElementRef));
elToQuery = E(1, 'div', [], 'foo');
elToQuery = E(1, 'div', null, null, ['foo', '']);
e();
E(2, 'div');
e();
@ -266,7 +261,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ViewContainerRef));
E(1, 'div', [], 'foo');
E(1, 'div', null, null, ['foo', '']);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -289,7 +284,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ViewContainerRef));
C(1, undefined, undefined, undefined, 'foo');
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -313,7 +308,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ElementRef));
C(1, undefined, undefined, undefined, 'foo');
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -338,7 +333,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo']));
C(1, undefined, undefined, undefined, 'foo');
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -362,7 +357,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.TemplateRef));
C(1, undefined, undefined, undefined, 'foo');
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -388,8 +383,8 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo']));
E(1, Child.ngComponentDef, []);
{ childInstance = D(2, Child.ngComponentDef.n(), Child.ngComponentDef, 'foo'); }
E(1, Child, null, null, ['foo', '']);
{ childInstance = D(2); }
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -403,7 +398,7 @@ describe('query', () => {
it('should read directive instance if element queried for has an exported directive with a matching name',
() => {
const Child = createDirective();
const Child = createDirective({exportAs: 'child'});
let childInstance;
/**
@ -416,8 +411,8 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo']));
E(1, 'div');
{ childInstance = D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'foo'); }
E(1, 'div', null, [Child], ['foo', 'child']);
childInstance = D(2);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -430,8 +425,8 @@ describe('query', () => {
});
it('should read all matching directive instances from a given element', () => {
const Child1 = createDirective();
const Child2 = createDirective();
const Child1 = createDirective({exportAs: 'child1'});
const Child2 = createDirective({exportAs: 'child2'});
let child1Instance, child2Instance;
/**
@ -444,10 +439,10 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo', 'bar']));
E(1, 'div');
E(1, 'div', null, [Child1, Child2], ['foo', 'child1', 'bar', 'child2']);
{
child1Instance = D(2, Child1.ngDirectiveDef.n(), Child1.ngDirectiveDef, 'foo');
child2Instance = D(3, Child2.ngDirectiveDef.n(), Child2.ngDirectiveDef, 'bar');
child1Instance = D(2);
child2Instance = D(3);
}
e();
}
@ -462,7 +457,7 @@ describe('query', () => {
});
it('should match match on exported directive name and read a requested token', () => {
const Child = createDirective();
const Child = createDirective({exportAs: 'child'});
let div;
/**
@ -475,8 +470,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], undefined, QueryReadType.ElementRef));
div = E(1, 'div');
{ D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'foo'); }
div = E(1, 'div', null, [Child], ['foo', 'child']);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -489,7 +483,7 @@ describe('query', () => {
});
it('should support reading a mix of ElementRef and directive instances', () => {
const Child = createDirective();
const Child = createDirective({exportAs: 'child'});
let childInstance, div;
/**
@ -502,8 +496,8 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo', 'bar']));
div = E(1, 'div', [], 'foo');
{ childInstance = D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'bar'); }
div = E(1, 'div', null, [Child], ['foo', '', 'bar', 'child']);
{ childInstance = D(2); }
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -530,7 +524,7 @@ describe('query', () => {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, Child));
div = E(1, 'div', [], 'foo');
div = E(1, 'div', null, null, ['foo', '']);
e();
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);

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

@ -7,6 +7,7 @@
*/
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 {LElementNode, LNodeFlags} from '../../src/render3/interfaces/node';
@ -89,12 +90,13 @@ export function createComponent(
};
}
export function createDirective(): DirectiveType<any> {
export function createDirective({exportAs}: {exportAs?: string} = {}): DirectiveType<any> {
return class Directive {
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(),
features: [PublicFeature],
exportAs: exportAs,
});
};
}

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

@ -63,8 +63,7 @@ describe('renderer factory lifecycle', () => {
logs.push('function_with_component');
if (cm) {
T(0, 'bar');
E(1, SomeComponent.ngComponentDef);
{ D(2, SomeComponent.ngComponentDef.n(), SomeComponent.ngComponentDef); }
E(1, SomeComponent);
e();
}
SomeComponent.ngComponentDef.h(2, 1);