fix(ivy): properly determine the first native node of a view (#33627)

PR Close #33627
This commit is contained in:
Pawel Kozlowski 2019-11-06 15:29:27 +01:00 committed by Kara Erickson
parent c57759f191
commit f63e5d9319
6 changed files with 91 additions and 28 deletions

View File

@ -12,7 +12,7 @@
"master": { "master": {
"uncompressed": { "uncompressed": {
"runtime-es2015": 1485, "runtime-es2015": 1485,
"main-es2015": 14786, "main-es2015": 15040,
"polyfills-es2015": 36808 "polyfills-es2015": 36808
} }
} }
@ -39,7 +39,7 @@
"master": { "master": {
"uncompressed": { "uncompressed": {
"runtime-es2015": 2289, "runtime-es2015": 2289,
"main-es2015": 268331, "main-es2015": 268404,
"polyfills-es2015": 36808, "polyfills-es2015": 36808,
"5-es2015": 751 "5-es2015": 751
} }

View File

@ -20,8 +20,8 @@ import {ProceduralRenderer3, RElement, RNode, RText, Renderer3, isProceduralRend
import {isLContainer, isLView, isRootView} from './interfaces/type_checks'; import {isLContainer, isLView, isRootView} from './interfaces/type_checks';
import {CHILD_HEAD, CLEANUP, DECLARATION_LCONTAINER, FLAGS, HOST, HookData, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, TVIEW, T_HOST, unusedValueExportToPlacateAjd as unused5} from './interfaces/view'; import {CHILD_HEAD, CLEANUP, DECLARATION_LCONTAINER, FLAGS, HOST, HookData, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, TVIEW, T_HOST, unusedValueExportToPlacateAjd as unused5} from './interfaces/view';
import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert'; import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
import {findComponentView} from './util/view_traversal_utils'; import {findComponentView, getLViewParent} from './util/view_traversal_utils';
import {getNativeByTNode, getNativeByTNodeOrNull, unwrapRNode} from './util/view_utils'; import {getNativeByTNode, unwrapRNode} from './util/view_utils';
const unusedValueToPlacateAjd = unused1 + unused2 + unused3 + unused4 + unused5; const unusedValueToPlacateAjd = unused1 + unused2 + unused3 + unused4 + unused5;
@ -652,25 +652,55 @@ export function appendChild(childEl: RNode | RNode[], childTNode: TNode, current
} }
} }
/**
* Returns the first native node for a given LView, starting from the provided TNode.
*
* Native nodes are returned in the order in which those appear in the native tree (DOM).
*/
function getFirstNativeNode(lView: LView, tNode: TNode | null): RNode|null {
if (tNode !== null) {
ngDevMode && assertNodeOfPossibleTypes(
tNode, TNodeType.Element, TNodeType.Container, TNodeType.ElementContainer,
TNodeType.IcuContainer, TNodeType.Projection);
const tNodeType = tNode.type;
if (tNodeType === TNodeType.Element) {
return getNativeByTNode(tNode, lView);
} else if (tNodeType === TNodeType.Container) {
const lContainer = lView[tNode.index];
if (lContainer.length > CONTAINER_HEADER_OFFSET) {
const firstView = lContainer[CONTAINER_HEADER_OFFSET];
return getFirstNativeNode(firstView, firstView[TVIEW].firstChild);
} else {
return lContainer[NATIVE];
}
} else if (tNodeType === TNodeType.ElementContainer || tNodeType === TNodeType.IcuContainer) {
return getFirstNativeNode(lView, tNode.child);
} else {
const componentView = findComponentView(lView);
const componentHost = componentView[T_HOST] as TElementNode;
const parentView = getLViewParent(componentView);
const firstProjectedTNode: TNode|null =
(componentHost.projection as(TNode | null)[])[tNode.projection as number];
if (firstProjectedTNode != null) {
return getFirstNativeNode(parentView !, firstProjectedTNode);
} else {
return getFirstNativeNode(lView, tNode.next);
}
}
}
return null;
}
export function getBeforeNodeForView(viewIndexInContainer: number, lContainer: LContainer): RNode| export function getBeforeNodeForView(viewIndexInContainer: number, lContainer: LContainer): RNode|
null { null {
const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1; const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
if (nextViewIndex < lContainer.length) { if (nextViewIndex < lContainer.length) {
const lView = lContainer[nextViewIndex] as LView; const lView = lContainer[nextViewIndex] as LView;
ngDevMode && assertDefined(lView[T_HOST], 'Missing Host TNode'); return getFirstNativeNode(lView, lView[TVIEW].firstChild);
let tViewNodeChild = (lView[T_HOST] as TViewNode).child;
if (tViewNodeChild !== null) {
if (tViewNodeChild.type === TNodeType.ElementContainer ||
tViewNodeChild.type === TNodeType.IcuContainer) {
let currentChild = tViewNodeChild.child;
while (currentChild && (currentChild.type === TNodeType.ElementContainer ||
currentChild.type === TNodeType.IcuContainer)) {
currentChild = currentChild.child;
}
tViewNodeChild = currentChild || tViewNodeChild;
}
return getNativeByTNodeOrNull(tViewNodeChild, lView);
}
} }
return lContainer[NATIVE]; return lContainer[NATIVE];

View File

@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
import {ChangeDetectorRef, Component, ComponentFactoryResolver, Directive, EmbeddedViewRef, Injector, NgModule, TemplateRef, ViewChild, ViewContainerRef, ViewRef} from '@angular/core'; import {ChangeDetectorRef, Component, ComponentFactoryResolver, Directive, EmbeddedViewRef, Injector, NgModule, TemplateRef, ViewChild, ViewContainerRef, ViewRef} from '@angular/core';
import {TestBed} from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser'; import {By} from '@angular/platform-browser';
import {onlyInIvy} from '@angular/private/testing';
describe('view insertion', () => { describe('view insertion', () => {
describe('of a simple template', () => { describe('of a simple template', () => {
@ -347,6 +348,26 @@ describe('view insertion', () => {
}); });
onlyInIvy('VE incorrectly inserts views before ng-container content')
.it('should insert before a view with a ng-container where ViewContainerRef is injected',
() => {
expect(createAndInsertViews(`
<ng-container [ngTemplateOutlet]="after">|before</ng-container>
<ng-template #after>|after</ng-template>
`).textContent)
.toBe('insert|before|after');
});
it('should insert before a view with an element where ViewContainerRef is injected', () => {
expect(createAndInsertViews(`
<div [ngTemplateOutlet]="after">|before</div>
<ng-template #after>|after</ng-template>
`).textContent)
.toBe('insert|before|after');
});
it('should insert before a view with an empty projection as the first root node', () => { it('should insert before a view with an empty projection as the first root node', () => {
expect(createAndInsertViews(`<ng-content></ng-content>|before`).textContent) expect(createAndInsertViews(`<ng-content></ng-content>|before`).textContent)
.toBe('insert|before'); .toBe('insert|before');

View File

@ -263,6 +263,9 @@
{ {
"name": "findAttrIndexInNode" "name": "findAttrIndexInNode"
}, },
{
"name": "findComponentView"
},
{ {
"name": "findDirectiveMatches" "name": "findDirectiveMatches"
}, },
@ -311,6 +314,9 @@
{ {
"name": "getFactoryDef" "name": "getFactoryDef"
}, },
{
"name": "getFirstNativeNode"
},
{ {
"name": "getInitialStylingValue" "name": "getInitialStylingValue"
}, },
@ -326,6 +332,9 @@
{ {
"name": "getLView" "name": "getLView"
}, },
{
"name": "getLViewParent"
},
{ {
"name": "getMapProp" "name": "getMapProp"
}, },
@ -344,9 +353,6 @@
{ {
"name": "getNativeByTNode" "name": "getNativeByTNode"
}, },
{
"name": "getNativeByTNodeOrNull"
},
{ {
"name": "getNodeInjectable" "name": "getNodeInjectable"
}, },

View File

@ -218,6 +218,9 @@
{ {
"name": "extractPipeDef" "name": "extractPipeDef"
}, },
{
"name": "findComponentView"
},
{ {
"name": "generateExpandoInstructionBlock" "name": "generateExpandoInstructionBlock"
}, },
@ -245,6 +248,9 @@
{ {
"name": "getFactoryDef" "name": "getFactoryDef"
}, },
{
"name": "getFirstNativeNode"
},
{ {
"name": "getInjectorIndex" "name": "getInjectorIndex"
}, },
@ -257,15 +263,15 @@
{ {
"name": "getLView" "name": "getLView"
}, },
{
"name": "getLViewParent"
},
{ {
"name": "getNativeAnchorNode" "name": "getNativeAnchorNode"
}, },
{ {
"name": "getNativeByTNode" "name": "getNativeByTNode"
}, },
{
"name": "getNativeByTNodeOrNull"
},
{ {
"name": "getNodeInjectable" "name": "getNodeInjectable"
}, },

View File

@ -665,6 +665,9 @@
{ {
"name": "getFactoryDef" "name": "getFactoryDef"
}, },
{
"name": "getFirstNativeNode"
},
{ {
"name": "getGuardMask" "name": "getGuardMask"
}, },
@ -710,9 +713,6 @@
{ {
"name": "getNativeByTNode" "name": "getNativeByTNode"
}, },
{
"name": "getNativeByTNodeOrNull"
},
{ {
"name": "getNodeInjectable" "name": "getNodeInjectable"
}, },