diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts index c92f2b63f6..4fbefe234e 100644 --- a/packages/core/src/render3/di.ts +++ b/packages/core/src/render3/di.ts @@ -584,15 +584,10 @@ export function getOrCreateContainerRef(di: LInjector): viewEngine.ViewContainer const hostParent = getParentLNode(vcRefHost) !; const lContainer = createLContainer(hostParent, vcRefHost.view, true); const comment = vcRefHost.view[RENDERER].createComment(ngDevMode ? 'container' : ''); - const lContainerNode: LContainerNode = createLNodeObject( - TNodeType.Container, vcRefHost.view, hostParent, comment, lContainer, null); + const lContainerNode: LContainerNode = + createLNodeObject(TNodeType.Container, vcRefHost.view, hostParent, comment, lContainer); appendChild(hostParent, comment, vcRefHost.view); - - if (vcRefHost.queries) { - lContainerNode.queries = vcRefHost.queries.container(); - } - const hostTNode = vcRefHost.tNode as TElementNode | TContainerNode; if (!hostTNode.dynamicContainerNode) { hostTNode.dynamicContainerNode = diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index 2d07d49963..26b60c12d3 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -175,12 +175,18 @@ let currentQueries: LQueries|null; * - when creating content queries (inb this previousOrParentNode points to a node on which we * create content queries). */ -export function getCurrentQueries(QueryType: {new (): LQueries}): LQueries { - // top level variables should not be exported for performance reasons (PERF_NOTES.md) - return currentQueries || - (currentQueries = - (previousOrParentNode.queries && previousOrParentNode.queries.clone() || - new QueryType())); +export function getOrCreateCurrentQueries( + QueryType: {new (parent: null, shallow: null, deep: null): LQueries}): LQueries { + const tNode = previousOrParentNode.tNode; + + // if this is the first content query on a node, any existing LQueries needs to be cloned + // in subsequent template passes, the cloning occurs before directive instantiation. + if (previousOrParentNode.data !== viewData && !isContentQueryHost(tNode)) { + currentQueries && (currentQueries = currentQueries.clone()); + tNode.flags |= TNodeFlags.hasContentQuery; + } + + return currentQueries || (currentQueries = new QueryType(null, null, null)); } /** @@ -392,14 +398,13 @@ export function createLViewData( */ export function createLNodeObject( type: TNodeType, currentView: LViewData, parent: LNode | null, - native: RText | RElement | RComment | null, state: any, - queries: LQueries | null): LElementNode<extNode&LViewNode&LContainerNode&LProjectionNode { + native: RText | RElement | RComment | null, + state: any): LElementNode<extNode&LViewNode&LContainerNode&LProjectionNode { return { native: native as any, view: currentView, nodeInjector: parent ? parent.nodeInjector : null, data: state, - queries: queries, tNode: null !, dynamicLContainerNode: null }; @@ -442,12 +447,9 @@ export function createLNode( // so it's only set if the view is the same. const tParent = parent && parent.view === viewData ? parent.tNode as TElementNode | TContainerNode : null; - let queries = - (isParent ? currentQueries : previousOrParentNode && previousOrParentNode.queries) || - parent && parent.queries && parent.queries.child(); + const isState = state != null; - const node = - createLNodeObject(type, viewData, parent, native, isState ? state as any : null, queries); + const node = createLNodeObject(type, viewData, parent, native, isState ? state as any : null); if (index === -1 || type === TNodeType.View) { // View nodes are not stored in data because they can be added / removed at runtime (which @@ -477,7 +479,6 @@ export function createLNode( // Now link ourselves into the tree. if (isParent) { - currentQueries = null; if (previousOrParentNode.tNode.child == null && previousOrParentNode.view === viewData || previousOrParentNode.tNode.type === TNodeType.View) { // We are in the same view, which means we are adding content node to the parent View. @@ -747,8 +748,9 @@ export function elementContainerEnd(): void { } ngDevMode && assertNodeType(previousOrParentNode, TNodeType.ElementContainer); - const queries = previousOrParentNode.queries; - queries && queries.addNode(previousOrParentNode); + + currentQueries && (currentQueries = currentQueries.addNode(previousOrParentNode)); + queueLifecycleHooks(previousOrParentNode.tNode.flags, tView); } @@ -907,6 +909,10 @@ export function initChangeDetectorIfExisting( } } +export function isContentQueryHost(tNode: TNode): boolean { + return (tNode.flags & TNodeFlags.hasContentQuery) !== 0; +} + export function isComponent(tNode: TNode): boolean { return (tNode.flags & TNodeFlags.isComponent) === TNodeFlags.isComponent; } @@ -915,9 +921,16 @@ export function isComponent(tNode: TNode): boolean { * This function instantiates the given directives. */ function instantiateDirectivesDirectly() { + ngDevMode && assertEqual( + firstTemplatePass, false, + `Directives should only be instantiated directly after first template pass`); const tNode = previousOrParentNode.tNode; const count = tNode.flags & TNodeFlags.DirectiveCountMask; + if (isContentQueryHost(tNode) && currentQueries) { + currentQueries = currentQueries.clone(); + } + if (count > 0) { const start = tNode.flags >> TNodeFlags.DirectiveStartingIndexShift; const end = start + count; @@ -1233,8 +1246,7 @@ export function elementEnd(): void { previousOrParentNode = getParentLNode(previousOrParentNode) as LElementNode; } ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Element); - const queries = previousOrParentNode.queries; - queries && queries.addNode(previousOrParentNode); + currentQueries && (currentQueries = currentQueries.addNode(previousOrParentNode)); queueLifecycleHooks(previousOrParentNode.tNode.flags, tView); currentElementNode = null; } @@ -1853,17 +1865,17 @@ export function container( // because views can be removed and re-inserted. addToViewTree(viewData, index + HEADER_OFFSET, node.data); - const queries = node.queries; - if (queries) { + if (currentQueries) { // prepare place for matching nodes from views inserted into a given container - lContainer[QUERIES] = queries.container(); + lContainer[QUERIES] = currentQueries.container(); } createDirectivesAndLocals(localRefs); isParent = false; ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Container); - queries && queries.addNode(node); // check if a given container node matches + // check if a given container node matches + currentQueries && (currentQueries = currentQueries.addNode(node)); queueLifecycleHooks(node.tNode.flags, tView); } diff --git a/packages/core/src/render3/interfaces/node.ts b/packages/core/src/render3/interfaces/node.ts index a76b30efb8..3d6682a0a5 100644 --- a/packages/core/src/render3/interfaces/node.ts +++ b/packages/core/src/render3/interfaces/node.ts @@ -42,8 +42,11 @@ export const enum TNodeFlags { /** This bit is set if the node has been projected */ isProjected = 0b00000000000000000010000000000000, + /** This bit is set if the node has any content queries */ + hasContentQuery = 0b00000000000000000100000000000000, + /** The index of the first directive on this node is encoded on the most significant bits */ - DirectiveStartingIndexShift = 14, + DirectiveStartingIndexShift = 15, } /** @@ -89,13 +92,6 @@ export interface LNode { /** The injector associated with this node. Necessary for DI. */ nodeInjector: LInjector|null; - /** - * Optional set of queries that track query-related events for this node. - * - * If present the node creation/updates are reported to the `LQueries`. - */ - queries: LQueries|null; - /** * Pointer to the corresponding TNode object, which stores static * data about this node. diff --git a/packages/core/src/render3/interfaces/query.ts b/packages/core/src/render3/interfaces/query.ts index aa0e40b289..21950de575 100644 --- a/packages/core/src/render3/interfaces/query.ts +++ b/packages/core/src/render3/interfaces/query.ts @@ -13,26 +13,27 @@ import {LNode} from './node'; /** Used for tracking queries (e.g. ViewChild, ContentChild). */ export interface LQueries { /** - * Ask queries to prepare copy of itself. This assures that tracking new queries on child nodes + * The parent LQueries instance. + * + * When there is a content query, a new LQueries instance is created to avoid mutating any + * existing LQueries. After we are done searching content children, the parent property allows + * us to traverse back up to the original LQueries instance to continue to search for matches + * in the main view. + */ + parent: LQueries|null; + + /** + * Ask queries to prepare copy of itself. This assures that tracking new queries on content nodes * doesn't mutate list of queries tracked on a parent node. We will clone LQueries before * constructing content queries. */ - clone(): LQueries|null; - - /** - * Used to ask queries if those should be cloned to the child element. - * - * For example in the case of deep queries the `child()` returns - * queries for the child node. In case of shallow queries it returns - * `null`. - */ - child(): LQueries|null; + clone(): LQueries; /** * Notify `LQueries` that a new `LNode` has been created and needs to be added to query results * if matching query predicate. */ - addNode(node: LNode): void; + addNode(node: LNode): LQueries|null; /** * Notify `LQueries` that a new LContainer was added to ivy data structures. As a result we need diff --git a/packages/core/src/render3/query.ts b/packages/core/src/render3/query.ts index 5242b7dd2d..18e2ebff74 100644 --- a/packages/core/src/render3/query.ts +++ b/packages/core/src/render3/query.ts @@ -17,7 +17,7 @@ import {getSymbolIterator} from '../util'; import {assertDefined, assertEqual} from './assert'; import {ReadFromInjectorFn, getOrCreateNodeInjectorForNode} from './di'; -import {assertPreviousIsParent, getCurrentQueries, store, storeCleanupWithContext} from './instructions'; +import {assertPreviousIsParent, getOrCreateCurrentQueries, isContentQueryHost, store, storeCleanupWithContext} from './instructions'; import {DirectiveDefInternal, unusedValueExportToPlacateAjd as unused1} from './interfaces/definition'; import {LInjector, unusedValueExportToPlacateAjd as unused2} from './interfaces/injector'; import {LContainerNode, LElementNode, LNode, TNode, TNodeFlags, unusedValueExportToPlacateAjd as unused3} from './interfaces/node'; @@ -86,10 +86,9 @@ export interface LQuery { } export class LQueries_ implements LQueries { - shallow: LQuery|null = null; - deep: LQuery|null = null; - - constructor(deep?: LQuery) { this.deep = deep == null ? null : deep; } + constructor( + public parent: LQueries_|null, private shallow: LQuery|null, + private deep: LQuery|null) {} track( queryList: viewEngine_QueryList, predicate: Type|string[], descend?: boolean, @@ -101,103 +100,124 @@ export class LQueries_ implements LQueries { } } - clone(): LQueries|null { return this.deep ? new LQueries_(this.deep) : null; } - - child(): LQueries|null { - if (this.deep === null) { - // if we don't have any deep queries then no need to track anything more. - return null; - } - if (this.shallow === null) { - // DeepQuery: We can reuse the current state if the child state would be same as current - // state. - return this; - } else { - // We need to create new state - return new LQueries_(this.deep); - } - } + clone(): LQueries { return new LQueries_(this, null, this.deep); } container(): LQueries|null { - let result: LQuery|null = null; - let query = this.deep; + const shallowResults = copyQueriesToContainer(this.shallow); + const deepResults = copyQueriesToContainer(this.deep); - while (query) { - const containerValues: any[] = []; // prepare room for views - query.values.push(containerValues); - const clonedQuery: LQuery = { - next: null, - list: query.list, - predicate: query.predicate, - values: containerValues, - containerValues: null - }; - clonedQuery.next = result; - result = clonedQuery; - query = query.next; - } - - return result ? new LQueries_(result) : null; + return shallowResults || deepResults ? new LQueries_(this, shallowResults, deepResults) : null; } createView(): LQueries|null { - let result: LQuery|null = null; - let query = this.deep; + const shallowResults = copyQueriesToView(this.shallow); + const deepResults = copyQueriesToView(this.deep); - while (query) { - const clonedQuery: LQuery = { - next: null, - list: query.list, - predicate: query.predicate, - values: [], - containerValues: query.values - }; - clonedQuery.next = result; - result = clonedQuery; - query = query.next; - } - - return result ? new LQueries_(result) : null; + return shallowResults || deepResults ? new LQueries_(this, shallowResults, deepResults) : null; } insertView(index: number): void { - let query = this.deep; - while (query) { - ngDevMode && - assertDefined( - query.containerValues, 'View queries need to have a pointer to container values.'); - query.containerValues !.splice(index, 0, query.values); - query = query.next; - } + insertView(index, this.shallow); + insertView(index, this.deep); } - addNode(node: LNode): void { - add(this.shallow, node); + addNode(node: LNode): LQueries|null { add(this.deep, node); + + if (isContentQueryHost(node.tNode)) { + add(this.shallow, node); + + if (node.tNode.parent && isContentQueryHost(node.tNode.parent)) { + // if node has a content query and parent also has a content query + // both queries need to check this node for shallow matches + add(this.parent !.shallow, node); + } + return this.parent; + } + + isRootNodeOfQuery(node.tNode) && add(this.shallow, node); + return this; } removeView(): void { - let query = this.deep; - while (query) { - ngDevMode && - assertDefined( - query.containerValues, 'View queries need to have a pointer to container values.'); - - const containerValues = query.containerValues !; - const viewValuesIdx = containerValues.indexOf(query.values); - const removed = containerValues.splice(viewValuesIdx, 1); - - // mark a query as dirty only when removed view had matching modes - ngDevMode && assertEqual(removed.length, 1, 'removed.length'); - if (removed[0].length) { - query.list.setDirty(); - } - - query = query.next; - } + removeView(this.shallow); + removeView(this.deep); } } +function isRootNodeOfQuery(tNode: TNode) { + return tNode.parent === null || isContentQueryHost(tNode.parent); +} + +function copyQueriesToContainer(query: LQuery| null): LQuery|null { + let result: LQuery|null = null; + + while (query) { + const containerValues: any[] = []; // prepare room for views + query.values.push(containerValues); + const clonedQuery: LQuery = { + next: result, + list: query.list, + predicate: query.predicate, + values: containerValues, + containerValues: null + }; + result = clonedQuery; + query = query.next; + } + + return result; +} + +function copyQueriesToView(query: LQuery| null): LQuery|null { + let result: LQuery|null = null; + + while (query) { + const clonedQuery: LQuery = { + next: result, + list: query.list, + predicate: query.predicate, + values: [], + containerValues: query.values + }; + result = clonedQuery; + query = query.next; + } + + return result; +} + +function insertView(index: number, query: LQuery| null) { + while (query) { + ngDevMode && + assertDefined( + query.containerValues, 'View queries need to have a pointer to container values.'); + query.containerValues !.splice(index, 0, query.values); + query = query.next; + } +} + +function removeView(query: LQuery| null) { + while (query) { + ngDevMode && + assertDefined( + query.containerValues, 'View queries need to have a pointer to container values.'); + + const containerValues = query.containerValues !; + const viewValuesIdx = containerValues.indexOf(query.values); + const removed = containerValues.splice(viewValuesIdx, 1); + + // mark a query as dirty only when removed view had matching modes + ngDevMode && assertEqual(removed.length, 1, 'removed.length'); + if (removed[0].length) { + query.list.setDirty(); + } + + query = query.next; + } +} + + /** * Iterates over local names for a given node and returns directive index * (or -1 if a local name points to an element). @@ -418,7 +438,7 @@ export function query( read?: QueryReadType| Type): QueryList { ngDevMode && assertPreviousIsParent(); const queryList = new QueryList(); - const queries = getCurrentQueries(LQueries_); + const queries = getOrCreateCurrentQueries(LQueries_); queries.track(queryList, predicate, descend, read); storeCleanupWithContext(null, queryList, queryList.destroy); if (memoryIndex != null) { diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json index 5e2a1f5010..f2a8f4b7b0 100644 --- a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json +++ b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json @@ -62,9 +62,6 @@ { "name": "PublicFeature" }, - { - "name": "QUERIES" - }, { "name": "RENDERER" }, diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json index afc2343061..64dfeda319 100644 --- a/packages/core/test/bundling/todo/bundle.golden_symbols.json +++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json @@ -677,6 +677,9 @@ { "name": "isComponent" }, + { + "name": "isContentQueryHost" + }, { "name": "isContextDirty" }, diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index 78b1d9de1e..58854ac4e6 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -49,7 +49,7 @@ function isViewContainerRef(candidate: any): boolean { } describe('query', () => { - it('should project query children', () => { + it('should match projected query children', () => { const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {}); let child1 = null; @@ -1617,7 +1617,9 @@ describe('query', () => { it('should support combination of deep and shallow queries', () => { /** * % if (exp) { "> - *
+ *
+ *
+ *
* % } * * class Cmpt { @@ -1639,7 +1641,9 @@ describe('query', () => { let rf0 = embeddedViewStart(0); { if (rf0 & RenderFlags.Create) { - element(0, 'div', null, ['foo', '']); + elementStart(0, 'div', null, ['foo', '']); + { element(2, 'div', null, ['foo', '']); } + elementEnd(); } } embeddedViewEnd(); @@ -1671,8 +1675,12 @@ describe('query', () => { cmptInstance.exp = true; detectChanges(cmptInstance); - expect(deep.length).toBe(2); - expect(shallow.length).toBe(1); + expect(deep.length).toBe(3); + + // embedded % if blocks should behave the same way as *ngIf, namely they + // should match shallow queries on the first level of elements underneath + // the embedded view boundary. + expect(shallow.length).toBe(2); cmptInstance.exp = false; detectChanges(cmptInstance); @@ -1773,43 +1781,66 @@ describe('query', () => { }); describe('content', () => { + let withContentInstance: WithContentDirective|null; + let shallowCompInstance: ShallowComp|null; - it('should support content queries for directives', () => { - let withContentInstance: WithContentDirective|null = null; + beforeEach(() => { + withContentInstance = null; + shallowCompInstance = null; + }); - class WithContentDirective { - // @ContentChildren('foo') foos; - foos !: QueryList; - contentInitQuerySnapshot = 0; - contentCheckedQuerySnapshot = 0; + class WithContentDirective { + // @ContentChildren('foo') + foos !: QueryList; + contentInitQuerySnapshot = 0; + contentCheckedQuerySnapshot = 0; - ngAfterContentInit() { this.contentInitQuerySnapshot = this.foos ? this.foos.length : 0; } + ngAfterContentInit() { this.contentInitQuerySnapshot = this.foos ? this.foos.length : 0; } - ngAfterContentChecked() { - this.contentCheckedQuerySnapshot = this.foos ? this.foos.length : 0; - } - - static ngComponentDef = defineDirective({ - type: WithContentDirective, - selectors: [['', 'with-content', '']], - factory: () => new WithContentDirective(), - contentQueries: - () => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); }, - contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => { - let tmp: any; - withContentInstance = loadDirective(dirIndex); - queryRefresh(tmp = loadQueryList(queryStartIdx)) && - (withContentInstance.foos = tmp); - } - }); + ngAfterContentChecked() { + this.contentCheckedQuerySnapshot = this.foos ? this.foos.length : 0; } + static ngComponentDef = defineDirective({ + type: WithContentDirective, + selectors: [['', 'with-content', '']], + factory: () => new WithContentDirective(), + contentQueries: + () => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); }, + contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => { + let tmp: any; + withContentInstance = loadDirective(dirIndex); + queryRefresh(tmp = loadQueryList(queryStartIdx)) && + (withContentInstance.foos = tmp); + } + }); + } + + class ShallowComp { + // @ContentChildren('foo', {descendants: false}) + foos !: QueryList; + + static ngComponentDef = defineComponent({ + type: ShallowComp, + selectors: [['shallow-comp']], + factory: () => new ShallowComp(), + template: function(rf: RenderFlags, ctx: any) {}, + contentQueries: + () => { registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE)); }, + contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => { + let tmp: any; + shallowCompInstance = loadDirective(dirIndex); + queryRefresh(tmp = loadQueryList(queryStartIdx)) && + (shallowCompInstance.foos = tmp); + } + }); + } + + it('should support content queries for directives', () => { /** *
* *
- * class Cmpt { - * } */ const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { @@ -1834,37 +1865,65 @@ describe('query', () => { `Expected content query results to be available when ngAfterContentChecked was called.`); }); - // https://stackblitz.com/edit/angular-wlenwd?file=src%2Fapp%2Fapp.component.ts - it('should support view and content queries matching the same element', () => { - let withContentComponentInstance: WithContentComponent; + it('should support content query matches on directive hosts', () => { + /** + *
+ *
+ */ + const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + element(0, 'div', ['with-content', ''], ['foo', '']); + } + }, [WithContentDirective]); - class WithContentComponent { - // @ContentChildren('foo') foos; - // TODO(issue/24571): remove '!'. - foos !: QueryList; + const fixture = new ComponentFixture(AppComponent); + expect(withContentInstance !.foos.length) + .toBe(1, `Expected content query to match
.`); + }); - static ngComponentDef = defineComponent({ - type: WithContentComponent, - selectors: [['with-content']], - factory: () => new WithContentComponent(), - contentQueries: - () => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); }, - template: (rf: RenderFlags, ctx: WithContentComponent) => { - // intentionally left empty, don't need anything for this test - }, - contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => { - let tmp: any; - withContentComponentInstance = loadDirective(dirIndex); - queryRefresh(tmp = loadQueryList(queryStartIdx)) && - (withContentComponentInstance.foos = tmp); - }, - }); + it('should match shallow content queries in views inserted / removed by ngIf', () => { + function IfTemplate(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + element(0, 'div', null, ['foo', '']); + } } /** - * + * + *
+ * + */ + const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + elementStart(0, 'shallow-comp'); + { container(1, IfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf', '']); } + elementEnd(); + } + if (rf & RenderFlags.Update) { + elementProperty(1, 'ngIf', bind(ctx.showing)); + } + }, [ShallowComp, NgIf]); + + const fixture = new ComponentFixture(AppComponent); + const qList = shallowCompInstance !.foos; + expect(qList.length).toBe(0); + + fixture.component.showing = true; + fixture.update(); + expect(qList.length).toBe(1); + + fixture.component.showing = false; + fixture.update(); + expect(qList.length).toBe(0); + }); + + + // https://stackblitz.com/edit/angular-wlenwd?file=src%2Fapp%2Fapp.component.ts + it('should support view and content queries matching the same element', () => { + /** + *
*
- * + *
*
* class Cmpt { * @ViewChildren('foo, bar') foos; @@ -1874,13 +1933,13 @@ describe('query', () => { 'app-component', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { - elementStart(1, 'with-content'); + elementStart(1, 'div', ['with-content', '']); { element(2, 'div', null, ['foo', '']); } elementEnd(); element(4, 'div', ['id', 'after'], ['bar', '']); } }, - [WithContentComponent], [], + [WithContentDirective], [], function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE); @@ -1895,14 +1954,48 @@ describe('query', () => { const viewQList = fixture.component.foos; expect(viewQList.length).toBe(2); - expect(withContentComponentInstance !.foos.length).toBe(1); - expect(viewQList.first.nativeElement) - .toBe(withContentComponentInstance !.foos.first.nativeElement); + expect(withContentInstance !.foos.length).toBe(1); + expect(viewQList.first.nativeElement).toBe(withContentInstance !.foos.first.nativeElement); expect(viewQList.last.nativeElement.id).toBe('after'); }); - it('should report results to appropriate queries where content queries are nested', () => { + it('should not report deep content query matches found above content children', () => { + /** + *
+ *
<-- should match content query + *
+ *
<-- should not match content query + * class AppComponent { + * @ViewChildren('bar') bars: QueryList; + * } + */ + const AppComponent = createComponent( + 'app-component', + function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + elementStart(1, 'div', ['with-content', '']); + { element(2, 'div', ['id', 'yes'], ['foo', '']); } + elementEnd(); + element(4, 'div', null, ['foo', '']); + } + }, + [WithContentDirective], [], + function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + query(0, ['bar'], true, QUERY_READ_FROM_NODE); + } + if (rf & RenderFlags.Update) { + let tmp: any; + queryRefresh(tmp = load>(0)) && (ctx.bars = tmp as QueryList); + } + }); + const fixture = new ComponentFixture(AppComponent); + expect(withContentInstance !.foos.length).toBe(1); + expect(withContentInstance !.foos.first.nativeElement.id).toEqual('yes'); + }); + + it('should report results to appropriate queries where deep content queries are nested', () => { class QueryDirective { fooBars: any; static ngDirectiveDef = defineDirective({ @@ -1962,6 +2055,63 @@ describe('query', () => { expect(inInstance !.fooBars.length).toBe(1); }); + + it('should support nested shallow content queries ', () => { + let outInstance: QueryDirective; + let inInstance: QueryDirective; + + class QueryDirective { + fooBars: any; + static ngDirectiveDef = defineDirective({ + type: QueryDirective, + selectors: [['', 'query', '']], + exportAs: 'query', + factory: () => new QueryDirective(), + contentQueries: () => { + // @ContentChildren('foo, bar, baz', {descendants: true}) fooBars: + // QueryList; + registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE)); + }, + contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => { + let tmp: any; + const instance = loadDirective(dirIndex); + queryRefresh(tmp = loadQueryList(queryStartIdx)) && + (instance.fooBars = tmp); + }, + }); + } + + const AppComponent = createComponent( + 'app-component', + /** + *
+ *
+ * + *
+ *
+ */ + function(rf: RenderFlags, ctx: any) { + if (rf & RenderFlags.Create) { + elementStart(0, 'div', ['query', ''], ['out', 'query']); + { + elementStart(2, 'div', ['query', ''], ['in', 'query', 'foo', '']); + { element(5, 'span', ['id', 'bar'], ['foo', '']); } + elementEnd(); + } + elementEnd(); + } + if (rf & RenderFlags.Update) { + outInstance = load(1); + inInstance = load(3); + } + }, + [QueryDirective]); + + const fixture = new ComponentFixture(AppComponent); + expect(outInstance !.fooBars.length).toBe(1); + expect(inInstance !.fooBars.length).toBe(2); + }); + it('should respect shallow flag on content queries when mixing deep and shallow queries', () => { class ShallowQueryDirective { @@ -2012,6 +2162,9 @@ describe('query', () => { /** *
* + *
+ * + *
*
*/ function(rf: RenderFlags, ctx: any) { @@ -2019,7 +2172,12 @@ describe('query', () => { elementStart( 0, 'div', [AttributeMarker.SelectOnly, 'shallow-query', 'deep-query'], ['shallow', 'shallow-query', 'deep', 'deep-query']); - { element(3, 'span', ['id', 'foo'], ['foo', '']); } + { + element(3, 'span', null, ['foo', '']); + elementStart(5, 'div'); + { element(6, 'span', null, ['foo', '']); } + elementEnd(); + } elementEnd(); } if (rf & RenderFlags.Update) { @@ -2031,7 +2189,7 @@ describe('query', () => { const fixture = new ComponentFixture(AppComponent); expect(shallowInstance !.foos.length).toBe(1); - expect(deepInstance !.foos.length).toBe(1); + expect(deepInstance !.foos.length).toBe(2); }); }); });