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

fix(ivy): local refs in View and Content Queries should be pulled out into consts in generated code (#26240) 

PR Close #26240
This commit is contained in:
Andrew Kushnir 2018-10-03 13:49:24 -07:00 committed by Jason Aden
parent d1b7bb52e7
commit d5e9405d4f
3 changed files with 138 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -1155,6 +1155,7 @@ describe('compiler compliance', () => {
})
export class ViewQueryComponent {
@ViewChild(SomeDirective) someDir: SomeDirective;
@ViewChildren(SomeDirective) someDirs: QueryList<SomeDirective>;
}
@NgModule({declarations: [SomeDirective, ViewQueryComponent]})
@ -1221,15 +1222,15 @@ describe('compiler compliance', () => {
};
const ViewQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
…
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);
$r3$.ɵquery(0, $e0_attrs$, true);
$r3$.ɵquery(1, $e1_attrs$, true);
}
if (rf & 2) {
var $tmp$;
@ -1249,19 +1250,24 @@ describe('compiler compliance', () => {
it('should support view queries with read tokens specified', () => {
const files = {
app: {
...directive,
'view_query.component.ts': `
import {Component, NgModule, ViewChild, ViewChildren, QueryList, ElementRef} from '@angular/core';
import {Component, NgModule, ViewChild, ViewChildren, QueryList, ElementRef, TemplateRef} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'view-query-component',
template: \`
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
\`
})
export class ViewQueryComponent {
@ViewChild('myRef', {read: ElementRef}) myRef: any;
@ViewChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs: QueryList<any>;
@ViewChild('myRef', {read: TemplateRef}) myRef: TemplateRef;
@ViewChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs: QueryList<ElementRef>;
@ViewChild(SomeDirective, {read: ElementRef}) someDir: ElementRef;
@ViewChildren(SomeDirective, {read: TemplateRef}) someDirs: QueryList<TemplateRef>;
}
@NgModule({declarations: [ViewQueryComponent]})
@ -1271,20 +1277,24 @@ describe('compiler compliance', () => {
};
const ViewQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
…
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);
$r3$.ɵquery(0, $e0_attrs$, true, TemplateRef);
$r3$.ɵquery(1, SomeDirective, true, ElementRef);
$r3$.ɵquery(2, $e1_attrs$, true, ElementRef);
$r3$.ɵquery(3, SomeDirective, true, TemplateRef);
}
if (rf & 2) {
var $tmp$;
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(0))) && (ctx.myRef = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(1))) && (ctx.myRefs = $tmp$));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(1))) && (ctx.someDir = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(2))) && (ctx.myRefs = $tmp$));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵload(3))) && (ctx.someDirs = $tmp$));
}
},
…
@ -1366,7 +1376,6 @@ describe('compiler compliance', () => {
expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
});
});
it('should support content queries with local refs', () => {
const files = {
@ -1385,7 +1394,6 @@ describe('compiler compliance', () => {
@ContentChild('myRef') myRef: any;
@ContentChildren('myRef1, myRef2, myRef3') myRefs: QueryList<any>;
}
@NgModule({declarations: [ContentQueryComponent]})
export class MyModule {}
`
@ -1393,14 +1401,14 @@ describe('compiler compliance', () => {
};
const ContentQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
…
ContentQueryComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
contentQueries: function ContentQueryComponent_ContentQueries() {
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, ["myRef"], true));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, ["myRef1", "myRef2", "myRef3"], false));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, $e0_attrs$, true));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, $e1_attrs$, false));
},
contentQueriesRefresh: function ContentQueryComponent_ContentQueriesRefresh(dirIndex, queryStartIndex) {
const instance = $r3$.ɵload(dirIndex);
@ -1420,21 +1428,25 @@ describe('compiler compliance', () => {
it('should support content queries with read tokens specified', () => {
const files = {
app: {
...directive,
'content_query.component.ts': `
import {Component, ContentChild, ContentChildren, NgModule, QueryList, ElementRef} from '@angular/core';
import {Component, ContentChild, ContentChildren, NgModule, QueryList, ElementRef, TemplateRef} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'content-query-component',
template: \`
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
\`
})
export class ContentQueryComponent {
@ContentChild('myRef', {read: ElementRef}) myRef: any;
@ContentChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs: QueryList<any>;
@ContentChild('myRef', {read: TemplateRef}) myRef: TemplateRef;
@ContentChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs: QueryList<ElementRef>;
@ContentChild(SomeDirective, {read: ElementRef}) someDir: ElementRef;
@ContentChildren(SomeDirective, {read: TemplateRef}) someDirs: QueryList<TemplateRef>;
}
@NgModule({declarations: [ContentQueryComponent]})
export class MyModule {}
`
@ -1442,20 +1454,24 @@ describe('compiler compliance', () => {
};
const ContentQueryComponentDefinition = `
const $e0_attrs$ = ["myRef", ""];
const $e1_attrs$ = ["myRef1", ""];
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
…
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));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, $e0_attrs$ , true, TemplateRef));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, SomeDirective, true, ElementRef));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, $e1_attrs$, false, ElementRef));
$r3$.ɵregisterContentQuery($r3$.ɵquery(null, SomeDirective, false, TemplateRef));
},
contentQueriesRefresh: function ContentQueryComponent_ContentQueriesRefresh(dirIndex, queryStartIndex) {
const instance = $r3$.ɵload(dirIndex);
var $tmp$;
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList(queryStartIndex))) && (instance.myRef = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList((queryStartIndex + 1)))) && (instance.myRefs = $tmp$));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList((queryStartIndex + 1)))) && (instance.someDir = $tmp$.first));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList((queryStartIndex + 2)))) && (instance.myRefs = $tmp$));
($r3$.ɵqueryRefresh(($tmp$ = $r3$.ɵloadQueryList((queryStartIndex + 3)))) && (instance.someDirs = $tmp$));
},
…
});`;
@ -1466,6 +1482,8 @@ describe('compiler compliance', () => {
expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
});
});
describe('pipes', () => {
const files = {

22
packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
View File

@ -384,6 +384,14 @@ describe('ngtsc behavioral tests', () => {
});
it('should generate queries for components', () => {
// Helper functions to construct RegExps for output validation
const varRegExp = (name: string): RegExp => new RegExp(`var \\w+ = \\[\"${name}\"\\];`);
const queryRegExp = (id: number | null, descend: boolean, ref?: string): RegExp => {
const maybeRef = ref ? `, ${ref}` : ``;
return new RegExp(`i0\\.ɵquery\\(${id}, \\w+, ${descend}${maybeRef}\\)`);
};
env.tsconfig();
env.write(`test.ts`, `
import {Component, ContentChild, ContentChildren, TemplateRef, ViewChild} from '@angular/core';
@ -406,11 +414,17 @@ describe('ngtsc behavioral tests', () => {
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(`i0.ɵquery(null, ["bar"], true, TemplateRef)`);
expect(jsContents).toMatch(varRegExp('bar'));
expect(jsContents).toMatch(varRegExp('test1'));
expect(jsContents).toMatch(varRegExp('test2'));
expect(jsContents).toMatch(varRegExp('accessor'));
expect(jsContents).toContain(`i0.ɵquery(null, TemplateRef, false)`);
expect(jsContents).toContain(`i0.ɵquery(null, ["test2"], true)`);
expect(jsContents).toContain(`i0.ɵquery(0, ["accessor"], true)`);
expect(jsContents).toContain(`i0.ɵquery(1, ["test1"], true)`);
expect(jsContents)
.toMatch(queryRegExp(
null, true, 'TemplateRef')); // match `i0.ɵquery(null, _c0, true, TemplateRef)`
expect(jsContents).toMatch(queryRegExp(null, true)); // match `i0.ɵquery(null, _c0, true)`
expect(jsContents).toMatch(queryRegExp(0, true)); // match `i0.ɵquery(0, _c0, true)`
expect(jsContents).toMatch(queryRegExp(1, true)); // match `i0.ɵquery(1, _c0, true)`
});
it('should handle queries that use forwardRef', () => {

2
packages/compiler/src/render3/view/util.ts
View File

@ -112,7 +112,7 @@ export function getQueryPredicate(
const selectors = selector.split(',').map(token => o.literal(token.trim()));
predicate.push(...selectors);
});
return constantPool.getConstLiteral(o.literalArr(predicate));
return constantPool.getConstLiteral(o.literalArr(predicate), true);
} else {
return query.predicate;
}