refactor(ivy): avoid circular dep with query/di/instructions (#21430)

To prepare for pending ngForOf work, the dep from instructions -> query
should be broken. This will enable a dep from di -> instructions while
avoiding a di -> instructions -> query -> di cycle.

Analyzing this cycle also uncovered another problem: the implementation
of query() breaks tree-shaking through a hard dependency on DI concepts
of TemplateRef, ElementRef, ViewContainerRef. This is fundamentally due
to how query() can query for those values without any configuration.

Instead, this fix introduces the concept by employing the strategy
pattern, and redefining QueryReadType to pass a function which will
return one of the above values. This strategy is then used for 'read'
instead of an enum in cases where special values should be read from
the DI system.

PR Close #21430
This commit is contained in:
Alex Rickabaugh
2018-01-17 09:45:40 -08:00
committed by Miško Hevery
parent c5586b7dfa
commit 6472661ae8
8 changed files with 168 additions and 147 deletions

View File

@ -8,9 +8,9 @@
import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
import {bloomAdd, bloomFindPossibleInjector} from '../../src/render3/di';
import {bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector} from '../../src/render3/di';
import {C, E, PublicFeature, T, V, b, b2, cR, cr, defineDirective, e, inject, injectElementRef, injectTemplateRef, injectViewContainerRef, m, t, v} from '../../src/render3/index';
import {createLNode, createLView, enterView, getOrCreateNodeInjector, leaveView} from '../../src/render3/instructions';
import {createLNode, createLView, enterView, leaveView} from '../../src/render3/instructions';
import {LInjector} from '../../src/render3/interfaces/injector';
import {LNodeFlags} from '../../src/render3/interfaces/node';

View File

@ -5,12 +5,14 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF} from '../../src/render3/di';
import {C, E, Q, QueryList, e, m, qR} from '../../src/render3/index';
import {QueryReadType} from '../../src/render3/interfaces/query';
import {createComponent, createDirective, renderComponent} from './render_util';
/**
* Helper function to check if a given candidate object resembles ElementRef
* @param candidate
@ -91,7 +93,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(Child, false, QueryReadType.ElementRef));
m(0, Q(Child, false, QUERY_READ_ELEMENT_REF));
elToQuery = E(1, 'div', null, [Child]);
e();
}
@ -173,7 +175,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo']));
m(0, Q(['foo'], false, QUERY_READ_ELEMENT_REF));
elToQuery = E(1, 'div', null, null, ['foo', '']);
e();
E(2, 'div');
@ -203,7 +205,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo', 'bar']));
m(0, Q(['foo', 'bar'], undefined, QUERY_READ_ELEMENT_REF));
el1ToQuery = E(1, 'div', null, null, ['foo', '']);
e();
E(2, 'div');
@ -234,7 +236,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ElementRef));
m(0, Q(['foo'], false, QUERY_READ_ELEMENT_REF));
elToQuery = E(1, 'div', null, null, ['foo', '']);
e();
E(2, 'div');
@ -260,7 +262,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ViewContainerRef));
m(0, Q(['foo'], false, QUERY_READ_CONTAINER_REF));
E(1, 'div', null, null, ['foo', '']);
e();
}
@ -283,7 +285,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ViewContainerRef));
m(0, Q(['foo'], false, QUERY_READ_CONTAINER_REF));
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -306,7 +308,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.ElementRef));
m(0, Q(['foo'], false, QUERY_READ_ELEMENT_REF));
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -330,7 +332,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo']));
m(0, Q(['foo'], undefined, QUERY_READ_TEMPLATE_REF));
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -353,7 +355,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo'], false, QueryReadType.TemplateRef));
m(0, Q(['foo'], false, QUERY_READ_TEMPLATE_REF));
C(1, undefined, undefined, undefined, undefined, ['foo', '']);
}
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -465,7 +467,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo'], undefined, QueryReadType.ElementRef));
m(0, Q(['foo'], undefined, QUERY_READ_ELEMENT_REF));
div = E(1, 'div', null, [Child], ['foo', 'child']);
e();
}
@ -491,7 +493,7 @@ describe('query', () => {
const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) {
let tmp: any;
if (cm) {
m(0, Q(['foo', 'bar']));
m(0, Q(['foo', 'bar'], undefined, QUERY_READ_FROM_NODE));
div = E(1, 'div', null, [Child], ['foo', '', 'bar', 'child']);
{ childInstance = m(2); }
e();