feat(ivy): compiler support to generate QUERY_READ_FROM_NODE calls (#26171)

PR Close #26171
This commit is contained in:
Andrew Kushnir
2018-09-28 17:20:43 -07:00
committed by Alex Rickabaugh
parent d216a46412
commit cb59d87489
8 changed files with 305 additions and 130 deletions

View File

@ -1139,7 +1139,7 @@ describe('compiler compliance', () => {
`
};
it('should support view queries', () => {
it('should support view queries with directives', () => {
const files = {
app: {
...directive,
@ -1159,7 +1159,7 @@ describe('compiler compliance', () => {
@NgModule({declarations: [SomeDirective, ViewQueryComponent]})
export class MyModule {}
`
`
}
};
@ -1196,11 +1196,111 @@ describe('compiler compliance', () => {
expectEmit(source, ViewQueryComponentDefinition, 'Invalid ViewQuery declaration');
});
it('should support content queries', () => {
it('should support view queries with local refs', () => {
const files = {
app: {
'view_query.component.ts': `
import {Component, NgModule, ViewChild, ViewChildren, QueryList} from '@angular/core';
@Component({
selector: 'view-query-component',
template: \`
<div #myRef></div>
<div #myRef1></div>
\`
})
export class ViewQueryComponent {
@ViewChild('myRef') myRef: any;
@ViewChildren('myRef1, myRef2, myRef3') myRefs: QueryList<any>;
}
@NgModule({declarations: [ViewQueryComponent]})
export class MyModule {}
`
}
};
const ViewQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
ViewQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) {
$r3$.ɵquery(0, ["myRef"], true);
$r3$.ɵquery(1, ["myRef1", "myRef2", "myRef3"], true);
}
if (rf & 2) {
var $tmp$;
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(0))) && (ctx.myRef = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(1))) && (ctx.myRefs = $tmp$));
}
},
});`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, ViewQueryComponentDefinition, 'Invalid ViewQuery declaration');
});
it('should support view queries with read tokens specified', () => {
const files = {
app: {
'view_query.component.ts': `
import {Component, NgModule, ViewChild, ViewChildren, QueryList, ElementRef} from '@angular/core';
@Component({
selector: 'view-query-component',
template: \`
<div #myRef></div>
<div #myRef1></div>
\`
})
export class ViewQueryComponent {
@ViewChild('myRef', {read: ElementRef}) myRef: any;
@ViewChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs: QueryList<any>;
}
@NgModule({declarations: [ViewQueryComponent]})
export class MyModule {}
`
}
};
const ViewQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
ViewQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) {
$r3$.ɵquery(0, ["myRef"], true, ElementRef);
$r3$.ɵquery(1, ["myRef1", "myRef2", "myRef3"], true, ElementRef);
}
if (rf & 2) {
var $tmp$;
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(0))) && (ctx.myRef = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(1))) && (ctx.myRefs = $tmp$));
}
},
});`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, ViewQueryComponentDefinition, 'Invalid ViewQuery declaration');
});
it('should support content queries with directives', () => {
const files = {
app: {
...directive,
'spec.ts': `
'content_query.ts': `
import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
import {SomeDirective} from './some.directive';
@ -1262,12 +1362,110 @@ describe('compiler compliance', () => {
});`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
});
});
it('should support content queries with local refs', () => {
const files = {
app: {
'content_query.component.ts': `
import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
@Component({
selector: 'content-query-component',
template: \`
<div #myRef></div>
<div #myRef1></div>
\`
})
export class ContentQueryComponent {
@ContentChild('myRef') myRef: any;
@ContentChildren('myRef1, myRef2, myRef3') myRefs: QueryList<any>;
}
@NgModule({declarations: [ContentQueryComponent]})
export class MyModule {}
`
}
};
const ContentQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
ContentQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
contentQueries: function ContentQueryComponent_ContentQueries() {
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, ["myRef"], true));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, ["myRef1", "myRef2", "myRef3"], false));
},
contentQueriesRefresh: function ContentQueryComponent_ContentQueriesRefresh(dirIndex, queryStartIndex) {
const instance = $r3$.ɵloadDirective(dirIndex);
var $tmp$;
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList(queryStartIndex))) && (instance.myRef = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList((queryStartIndex + 1)))) && (instance.myRefs = $tmp$));
},
});`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
});
it('should support content queries with read tokens specified', () => {
const files = {
app: {
'content_query.component.ts': `
import {Component, ContentChild, ContentChildren, NgModule, QueryList, ElementRef} from '@angular/core';
@Component({
selector: 'content-query-component',
template: \`
<div #myRef></div>
<div #myRef1></div>
\`
})
export class ContentQueryComponent {
@ContentChild('myRef', {read: ElementRef}) myRef: any;
@ContentChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs: QueryList<any>;
}
@NgModule({declarations: [ContentQueryComponent]})
export class MyModule {}
`
}
};
const ContentQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
ContentQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
contentQueries: function ContentQueryComponent_ContentQueries() {
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, ["myRef"], true, ElementRef));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, ["myRef1", "myRef2", "myRef3"], false, ElementRef));
},
contentQueriesRefresh: function ContentQueryComponent_ContentQueriesRefresh(dirIndex, queryStartIndex) {
const instance = $r3$.ɵloadDirective(dirIndex);
var $tmp$;
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList(queryStartIndex))) && (instance.myRef = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList((queryStartIndex + 1)))) && (instance.myRefs = $tmp$));
},
});`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
});
describe('pipes', () => {
const files = {