cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ivy): replace pNextOrParent with TNode props (#24752)

Browse Source 
PR Close #24752
This commit is contained in:
Kara Erickson
2018-07-03 20:04:36 -07:00
committed by Miško Hevery
parent dc1f1295ee
commit 3a19f70d1c
17 changed files with 618 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/test/render3/compiler_canonical/content_projection_spec.ts
View File

@ -27,9 +27,9 @@ describe('content projection', () => {
factory: () => new SimpleComponent(),
template: function(rf: $RenderFlags$, ctx: $SimpleComponent$) {
if (rf & 1) {
$r3$.ɵpD(0);
$r3$.ɵEe(1, 'div');
$r3$.ɵP(2, 0);
$r3$.ɵpD();
$r3$.ɵEe(0, 'div');
$r3$.ɵP(1);
}
}
});
@ -56,11 +56,11 @@ describe('content projection', () => {
factory: () => new ComplexComponent(),
template: function(rf: $RenderFlags$, ctx: $ComplexComponent$) {
if (rf & 1) {
$r3$.ɵpD(0, $pD_0P$, $pD_0R$);
$r3$.ɵEe(1, 'div', ['id', 'first']);
$r3$.ɵP(2, 0, 1);
$r3$.ɵEe(3, 'div', ['id', 'second']);
$r3$.ɵP(4, 0, 2);
$r3$.ɵpD($pD_0P$, $pD_0R$);
$r3$.ɵEe(0, 'div', ['id', 'first']);
$r3$.ɵP(1, 1);
$r3$.ɵEe(2, 'div', ['id', 'second']);
$r3$.ɵP(3, 2);
}
}
});

6
packages/core/test/render3/compiler_canonical/query_spec.ts
View File

@ -124,9 +124,9 @@ describe('queries', () => {
template: function ContentQueryComponent_Template(
rf: $number$, ctx: $ContentQueryComponent$) {
if (rf & 1) {
$r3$.ɵpD(0);
$r3$.ɵE(1, 'div');
$r3$.ɵP(2, 0);
$r3$.ɵpD();
$r3$.ɵE(0, 'div');
$r3$.ɵP(1);
$r3$.ɵe();
}
}

516
packages/core/test/render3/content_spec.ts
View File

@ -8,6 +8,9 @@
import {SelectorFlags} from '@angular/core/src/render3/interfaces/projection';
import {Input, TemplateRef, ViewContainerRef, ViewRef} from '../../src/core';
import {defineDirective} from '../../src/render3/definition';
import {injectTemplateRef, injectViewContainerRef} from '../../src/render3/di';
import {AttributeMarker, detectChanges} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, loadDirective, projection, projectionDef, text} from '../../src/render3/instructions';
import {RenderFlags} from '../../src/render3/interfaces/definition';
@ -22,9 +25,9 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -48,8 +51,8 @@ describe('content projection', () => {
/** <ng-content></ng-content> */
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
});
@ -66,13 +69,47 @@ describe('content projection', () => {
expect(toHtml(parent)).toEqual('<child>content</child>');
});
it('should project content with siblings', () => {
/** <ng-content></ng-content> */
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef();
projection(0);
}
});
/**
* <child>
* before
* <div>content</div>
* after
* </child>
*/
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'child');
{
text(1, 'before');
elementStart(2, 'div');
{ text(3, 'content'); }
elementEnd();
text(4, 'after');
}
elementEnd();
}
}, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>before<div>content</div>after</child>');
});
it('should re-project content when root.', () => {
/** <div><ng-content></ng-content></div> */
const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -80,9 +117,9 @@ describe('content projection', () => {
/** <grand-child><ng-content></ng-content></grand-child> */
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'grand-child');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'grand-child');
{ projection(1); }
elementEnd();
}
}, [GrandChild]);
@ -111,9 +148,9 @@ describe('content projection', () => {
/** <div><ng-content></ng-content></div> */
const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -149,9 +186,9 @@ describe('content projection', () => {
/** <div><ng-content></ng-content></div> */
const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -159,9 +196,9 @@ describe('content projection', () => {
/** <p><ng-content></ng-content></p> */
const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'p');
projection(2, 0);
projectionDef();
elementStart(0, 'p');
projection(1);
elementEnd();
}
});
@ -198,13 +235,13 @@ describe('content projection', () => {
'<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>');
});
it('should project content with container.', () => {
it('should project containers', () => {
/** <div> <ng-content></ng-content></div> */
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -247,18 +284,20 @@ describe('content projection', () => {
expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
parent.value = true;
detectChanges(parent);
expect(toHtml(parent)).toEqual('<child><div>(content)</div></child>');
parent.value = false;
detectChanges(parent);
expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
});
it('should project content with container into root', () => {
it('should project containers into root', () => {
/** <ng-content></ng-content> */
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
});
@ -302,13 +341,13 @@ describe('content projection', () => {
expect(toHtml(parent)).toEqual('<child></child>');
});
it('should project content with container and if-else.', () => {
it('should project containers with if-else.', () => {
/** <div><ng-content></ng-content></div> */
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -378,19 +417,19 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ container(2); }
projectionDef();
elementStart(0, 'div');
{ container(1); }
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'span');
projection(1, 0);
projection(1);
elementEnd();
}
embeddedViewEnd();
@ -400,27 +439,90 @@ describe('content projection', () => {
}
});
/** <child>content</child> */
/**
* <child>
* <div>text</div>
* content
* </child>
*/
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'child');
{
childCmptInstance = loadDirective(0);
text(1, 'content');
elementStart(1, 'div');
{ text(2, 'text'); }
elementEnd();
text(3, 'content');
}
elementEnd();
// testing
childCmptInstance = loadDirective(0);
}
}, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div><span>content</span></div></child>');
expect(toHtml(parent)).toEqual('<child><div><span><div>text</div>content</span></div></child>');
childCmptInstance.skipContent = true;
detectChanges(parent);
expect(toHtml(parent)).toEqual('<child><div></div></child>');
});
it('should support projection in embedded views when ng-content is a root node of an embedded view',
it('should support projection into embedded views when no projected nodes', () => {
let childCmptInstance: any;
/**
* <div>
* % if (!skipContent) {
* <ng-content></ng-content>
* text
* % }
* </div>
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef();
elementStart(0, 'div');
{ container(1); }
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0);
text(1, 'text');
}
embeddedViewEnd();
}
}
containerRefreshEnd();
}
});
/** <child></child> */
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'child');
elementEnd();
// testing
childCmptInstance = loadDirective(0);
}
}, [Child]);
const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>text</div></child>');
childCmptInstance.skipContent = true;
detectChanges(parent);
expect(toHtml(parent)).toEqual('<child><div></div></child>');
});
it('should support projection into embedded views when ng-content is a root node of an embedded view',
() => {
let childCmptInstance: any;
@ -433,18 +535,18 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ container(2); }
projectionDef();
elementStart(0, 'div');
{ container(1); }
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0, 0);
projection(0);
}
embeddedViewEnd();
}
@ -487,22 +589,22 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
projectionDef();
elementStart(0, 'div');
{
text(2, 'Before (inside)-');
container(3);
text(4, '-After (inside)');
text(1, 'Before (inside)-');
container(2);
text(3, '-After (inside)');
}
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(3);
containerRefreshStart(2);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0, 0);
projection(0);
}
embeddedViewEnd();
}
@ -567,18 +669,18 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ container(2); }
projectionDef();
elementStart(0, 'div');
{ container(1); }
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0, 0);
projection(0);
}
embeddedViewEnd();
}
@ -598,22 +700,22 @@ describe('content projection', () => {
*/
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'child');
projectionDef();
elementStart(0, 'child');
{
text(2, 'Before text');
container(3);
text(4, '-After text');
text(1, 'Before text');
container(2);
text(3, '-After text');
}
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(3);
containerRefreshStart(2);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0, 0);
projection(0);
}
embeddedViewEnd();
}
@ -648,8 +750,7 @@ describe('content projection', () => {
.toEqual('<parent><child><div>Before text-After text</div></child></parent>');
});
it('should support projection in embedded views when ng-content is a root node of an embedded view, with other nodes after',
it('should support projection into embedded views when ng-content is a root node of an embedded view, with other nodes after',
() => {
let childCmptInstance: any;
@ -662,19 +763,19 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ container(2); }
projectionDef();
elementStart(0, 'div');
{ container(1); }
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
containerRefreshStart(1);
{
if (!ctx.skipContent) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
text(0, 'before-');
projection(1, 0);
projection(1);
text(2, '-after');
}
embeddedViewEnd();
@ -732,19 +833,19 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
text(1, 'Before-');
container(2, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
text(3, '-After');
projectionDef();
text(0, 'Before-');
container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
text(2, '-After');
}
if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(ctx.showing));
elementProperty(1, 'ngIf', bind(ctx.showing));
}
function IfTemplate(rf1: RenderFlags, ctx1: any) {
if (rf1 & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
}
}, [NgIf]);
@ -817,19 +918,19 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
text(1, 'Before-');
container(2, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
text(3, '-After');
projectionDef();
text(0, 'Before-');
container(1, IfTemplate, '', [AttributeMarker.SelectOnly, 'ngIf']);
text(2, '-After');
}
if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(ctx.showing));
elementProperty(1, 'ngIf', bind(ctx.showing));
}
function IfTemplate(rf1: RenderFlags, ctx1: any) {
if (rf1 & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
}
}, [NgIf]);
@ -878,12 +979,12 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
elementStart(3, 'span');
{ projection(4, 0); }
elementStart(2, 'span');
{ projection(3); }
elementEnd();
}
});
@ -924,19 +1025,19 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
elementStart(2, 'div');
{ container(3); }
projectionDef();
projection(0);
elementStart(1, 'div');
{ container(2); }
elementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(3);
containerRefreshStart(2);
{
if (ctx.show) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0, 0);
projection(0);
}
embeddedViewEnd();
}
@ -970,10 +1071,10 @@ describe('content projection', () => {
it('should project with multiple instances of a component with projection', () => {
const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
text(1, 'Before');
projection(2, 0);
text(3, 'After');
projectionDef();
text(0, 'Before');
projection(1);
text(2, 'After');
}
});
@ -990,20 +1091,24 @@ describe('content projection', () => {
const AppComp = createComponent('app-comp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'projection-comp');
elementStart(1, 'div');
text(2, 'A');
elementEnd();
elementStart(3, 'p');
text(4, '123');
elementEnd();
{
elementStart(1, 'div');
{ text(2, 'A'); }
elementEnd();
elementStart(3, 'p');
{ text(4, '123'); }
elementEnd();
}
elementEnd();
elementStart(5, 'projection-comp');
elementStart(6, 'div');
text(7, 'B');
elementEnd();
elementStart(8, 'p');
text(9, '456');
elementEnd();
{
elementStart(6, 'div');
{ text(7, 'B'); }
elementEnd();
elementStart(8, 'p');
{ text(9, '456'); }
elementEnd();
}
elementEnd();
}
}, [ProjectionComp]);
@ -1012,7 +1117,8 @@ describe('content projection', () => {
fixture.update();
expect(fixture.html)
.toEqual(
'<projection-comp>Before<div>A</div><p>123</p>After</projection-comp><projection-comp>Before<div>B</div><p>456</p>After</projection-comp>');
'<projection-comp>Before<div>A</div><p>123</p>After</projection-comp>' +
'<projection-comp>Before<div>B</div><p>456</p>After</projection-comp>');
});
it('should re-project with multiple instances of a component with projection', () => {
@ -1023,10 +1129,10 @@ describe('content projection', () => {
*/
const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
text(1, 'Before');
projection(2, 0);
text(3, 'After');
projectionDef();
text(0, 'Before');
projection(1);
text(2, 'After');
}
});
@ -1043,23 +1149,27 @@ describe('content projection', () => {
*/
const ProjectionParent = createComponent('parent-comp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'projection-comp');
elementStart(2, 'div');
text(3, 'A');
elementEnd();
projection(4, 0);
elementStart(5, 'p');
text(6, '123');
elementEnd();
elementEnd();
elementStart(7, 'projection-comp');
elementStart(8, 'div');
text(9, 'B');
elementEnd();
elementStart(10, 'p');
text(11, '456');
projectionDef();
elementStart(0, 'projection-comp');
{
elementStart(1, 'div');
{ text(2, 'A'); }
elementEnd();
projection(3, 0);
elementStart(4, 'p');
{ text(5, '123'); }
elementEnd();
}
elementEnd();
elementStart(6, 'projection-comp');
{
elementStart(7, 'div');
{ text(8, 'B'); }
elementEnd();
elementStart(9, 'p');
{ text(10, '456'); }
elementEnd();
}
elementEnd();
}
}, [ProjectionComp]);
@ -1075,10 +1185,10 @@ describe('content projection', () => {
const AppComp = createComponent('app-comp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'parent-comp');
text(1, '**ABC**');
{ text(1, '**ABC**'); }
elementEnd();
elementStart(2, 'parent-comp');
text(3, '**DEF**');
{ text(3, '**DEF**'); }
elementEnd();
}
}, [ProjectionParent]);
@ -1087,7 +1197,12 @@ describe('content projection', () => {
fixture.update();
expect(fixture.html)
.toEqual(
'<parent-comp><projection-comp>Before<div>A</div>**ABC**<p>123</p>After</projection-comp><projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp><parent-comp><projection-comp>Before<div>A</div>**DEF**<p>123</p>After</projection-comp><projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>');
'<parent-comp>' +
'<projection-comp>Before<div>A</div>**ABC**<p>123</p>After</projection-comp>' +
'<projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>' +
'<parent-comp>' +
'<projection-comp>Before<div>A</div>**DEF**<p>123</p>After</projection-comp>' +
'<projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>');
});
describe('with selectors', () => {
@ -1100,13 +1215,13 @@ describe('content projection', () => {
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(
0, [[['span', 'title', 'toFirst']], [['span', 'title', 'toSecond']]],
[[['span', 'title', 'toFirst']], [['span', 'title', 'toSecond']]],
['span[title=toFirst]', 'span[title=toSecond]']);
elementStart(1, 'div', ['id', 'first']);
{ projection(2, 0, 1); }
elementStart(0, 'div', ['id', 'first']);
{ projection(1, 1); }
elementEnd();
elementStart(3, 'div', ['id', 'second']);
{ projection(4, 0, 2); }
elementStart(2, 'div', ['id', 'second']);
{ projection(3, 2); }
elementEnd();
}
});
@ -1145,8 +1260,8 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['', 'title', '']]], ['[title]']);
{ projection(1, 0, 1); }
projectionDef([[['', 'title', '']]], ['[title]']);
{ projection(0, 1); }
}
});
@ -1183,17 +1298,16 @@ describe('content projection', () => {
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(
0,
[
[['span', SelectorFlags.CLASS, 'toFirst']],
[['span', SelectorFlags.CLASS, 'toSecond']]
],
['span.toFirst', 'span.toSecond']);
elementStart(1, 'div', ['id', 'first']);
{ projection(2, 0, 1); }
elementStart(0, 'div', ['id', 'first']);
{ projection(1, 1); }
elementEnd();
elementStart(3, 'div', ['id', 'second']);
{ projection(4, 0, 2); }
elementStart(2, 'div', ['id', 'second']);
{ projection(3, 2); }
elementEnd();
}
});
@ -1233,17 +1347,16 @@ describe('content projection', () => {
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(
0,
[
[['span', SelectorFlags.CLASS, 'toFirst']],
[['span', SelectorFlags.CLASS, 'toSecond']]
],
['span.toFirst', 'span.toSecond']);
elementStart(1, 'div', ['id', 'first']);
{ projection(2, 0, 1); }
elementStart(0, 'div', ['id', 'first']);
{ projection(1, 1); }
elementEnd();
elementStart(3, 'div', ['id', 'second']);
{ projection(4, 0, 2); }
elementStart(2, 'div', ['id', 'second']);
{ projection(3, 2); }
elementEnd();
}
});
@ -1283,13 +1396,12 @@ describe('content projection', () => {
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(
0, [[['span']], [['span', SelectorFlags.CLASS, 'toSecond']]],
['span', 'span.toSecond']);
elementStart(1, 'div', ['id', 'first']);
{ projection(2, 0, 1); }
[[['span']], [['span', SelectorFlags.CLASS, 'toSecond']]], ['span', 'span.toSecond']);
elementStart(0, 'div', ['id', 'first']);
{ projection(1, 1); }
elementEnd();
elementStart(3, 'div', ['id', 'second']);
{ projection(4, 0, 2); }
elementStart(2, 'div', ['id', 'second']);
{ projection(3, 2); }
elementEnd();
}
});
@ -1328,12 +1440,12 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['span', SelectorFlags.CLASS, 'toFirst']]], ['span.toFirst']);
elementStart(1, 'div', ['id', 'first']);
{ projection(2, 0, 1); }
projectionDef([[['span', SelectorFlags.CLASS, 'toFirst']]], ['span.toFirst']);
elementStart(0, 'div', ['id', 'first']);
{ projection(1, 1); }
elementEnd();
elementStart(3, 'div', ['id', 'second']);
{ projection(4, 0); }
elementStart(2, 'div', ['id', 'second']);
{ projection(3); }
elementEnd();
}
});
@ -1373,12 +1485,12 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['span', SelectorFlags.CLASS, 'toSecond']]], ['span.toSecond']);
elementStart(1, 'div', ['id', 'first']);
{ projection(2, 0); }
projectionDef([[['span', SelectorFlags.CLASS, 'toSecond']]], ['span.toSecond']);
elementStart(0, 'div', ['id', 'first']);
{ projection(1); }
elementEnd();
elementStart(3, 'div', ['id', 'second']);
{ projection(4, 0, 1); }
elementStart(2, 'div', ['id', 'second']);
{ projection(3, 1); }
elementEnd();
}
});
@ -1425,11 +1537,11 @@ describe('content projection', () => {
*/
const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['span']]], ['span']);
projection(1, 0, 1);
elementStart(2, 'hr');
projectionDef([[['span']]], ['span']);
projection(0, 1);
elementStart(1, 'hr');
elementEnd();
projection(3, 0, 0);
projection(2);
}
});
@ -1441,12 +1553,12 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'grand-child');
projectionDef();
elementStart(0, 'grand-child');
{
projection(2, 0);
elementStart(3, 'span');
{ text(4, 'in child template'); }
projection(1);
elementStart(2, 'span');
{ text(3, 'in child template'); }
elementEnd();
}
elementEnd();
@ -1488,12 +1600,12 @@ describe('content projection', () => {
const Card = createComponent('card', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(
0, [[['', 'card-title', '']], [['', 'card-content', '']]],
[[['', 'card-title', '']], [['', 'card-content', '']]],
['[card-title]', '[card-content]']);
projection(1, 0, 1);
elementStart(2, 'hr');
projection(0, 1);
elementStart(1, 'hr');
elementEnd();
projection(3, 0, 2);
projection(2, 2);
}
});
@ -1505,13 +1617,13 @@ describe('content projection', () => {
*/
const CardWithTitle = createComponent('card-with-title', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'card');
projectionDef();
elementStart(0, 'card');
{
elementStart(2, 'h1', ['card-title', '']);
{ text(3, 'Title'); }
elementStart(1, 'h1', ['card-title', '']);
{ text(2, 'Title'); }
elementEnd();
projection(4, 0, 0, ['card-content', '']);
projection(3, 0, ['card-content', '']);
}
elementEnd();
}
@ -1547,12 +1659,12 @@ describe('content projection', () => {
const Card = createComponent('card', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(
0, [[['', 'card-title', '']], [['', 'card-content', '']]],
[[['', 'card-title', '']], [['', 'card-content', '']]],
['[card-title]', '[card-content]']);
projection(1, 0, 1);
elementStart(2, 'hr');
projection(0, 1);
elementStart(1, 'hr');
elementEnd();
projection(3, 0, 2);
projection(2, 2);
}
});
@ -1564,13 +1676,13 @@ describe('content projection', () => {
*/
const CardWithTitle = createComponent('card-with-title', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'card');
projectionDef();
elementStart(0, 'card');
{
elementStart(2, 'h1', ['ngProjectAs', '[card-title]']);
{ text(3, 'Title'); }
elementStart(1, 'h1', ['ngProjectAs', '[card-title]']);
{ text(2, 'Title'); }
elementEnd();
projection(4, 0, 0, ['ngProjectAs', '[card-content]']);
projection(3, 0, ['ngProjectAs', '[card-content]']);
}
elementEnd();
}
@ -1602,8 +1714,8 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['div']]], ['div']);
projection(1, 0, 1);
projectionDef([[['div']]], ['div']);
projection(0, 1);
}
});
@ -1641,9 +1753,9 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['div']]], ['div']);
elementStart(1, 'span');
{ projection(2, 0, 1); }
projectionDef([[['div']]], ['div']);
elementStart(0, 'span');
{ projection(1, 1); }
elementEnd();
}
});

4
packages/core/test/render3/di_spec.ts
View File

@ -947,8 +947,8 @@ describe('di', () => {
factory: () => comp = new MyComp(injectChangeDetectorRef()),
template: function(rf: RenderFlags, ctx: MyComp) {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
}
});

28
packages/core/test/render3/i18n_spec.ts
View File

@ -971,9 +971,9 @@ describe('Runtime i18n', () => {
factory: () => new Child(),
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'p');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'p');
{ projection(1); }
elementEnd();
}
}
@ -1063,9 +1063,9 @@ describe('Runtime i18n', () => {
factory: () => new Child(),
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'p');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'p');
{ projection(1); }
elementEnd();
}
}
@ -1145,9 +1145,9 @@ describe('Runtime i18n', () => {
factory: () => new GrandChild(),
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
}
@ -1164,9 +1164,9 @@ describe('Runtime i18n', () => {
factory: () => new Child(),
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'grand-child');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'grand-child');
{ projection(1); }
elementEnd();
}
}
@ -1224,8 +1224,8 @@ describe('Runtime i18n', () => {
factory: () => new Child(),
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['span']]], ['span']);
projection(1, 0, 1);
projectionDef([[['span']]], ['span']);
projection(0, 1);
}
}
});

12
packages/core/test/render3/integration_spec.ts
View File

@ -502,19 +502,19 @@ describe('render3 integration test', () => {
template: function ChildComponentTemplate(
rf: RenderFlags, ctx: {beforeTree: Tree, afterTree: Tree}) {
if (rf & RenderFlags.Create) {
projectionDef(0);
container(1);
projection(2, 0);
container(3);
projectionDef();
container(0);
projection(1);
container(2);
}
containerRefreshStart(1);
containerRefreshStart(0);
{
const rf0 = embeddedViewStart(0);
{ showTree(rf0, {tree: ctx.beforeTree}); }
embeddedViewEnd();
}
containerRefreshEnd();
containerRefreshStart(3);
containerRefreshStart(2);
{
const rf0 = embeddedViewStart(0);
{ showTree(rf0, {tree: ctx.afterTree}); }

46
packages/core/test/render3/lifecycle_spec.ts
View File

@ -33,9 +33,9 @@ describe('lifecycles', () => {
let Comp = createOnInitComponent('comp', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -500,27 +500,27 @@ describe('lifecycles', () => {
let Comp = createAfterContentInitComp('comp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
});
let Parent = createAfterContentInitComp('parent', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'comp');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'comp');
{ projection(1); }
elementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'val', bind(ctx.val));
elementProperty(0, 'val', bind(ctx.val));
}
}, [Comp]);
let ProjectedComp = createAfterContentInitComp('projected', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
});
@ -893,9 +893,9 @@ describe('lifecycles', () => {
let Comp = createAfterViewInitComponent('comp', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -1356,8 +1356,8 @@ describe('lifecycles', () => {
let Comp = createOnDestroyComponent('comp', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
projectionDef();
projection(0);
}
});
let Parent = createOnDestroyComponent('parent', getParentTemplate('comp'), [Comp]);
@ -1893,9 +1893,9 @@ describe('lifecycles', () => {
const Comp = createOnChangesComponent('comp', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
});
@ -2444,13 +2444,13 @@ describe('lifecycles', () => {
/** <ng-content></ng-content><view [val]="val"></view> */
const Parent = createAllHooksComponent('parent', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
projection(1, 0);
elementStart(2, 'view');
projectionDef();
projection(0);
elementStart(1, 'view');
elementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(2, 'val', bind(ctx.val));
elementProperty(1, 'val', bind(ctx.val));
}
}, [View]);

21
packages/core/test/render3/node_selector_matcher_spec.ts
View File

@ -10,29 +10,16 @@ import {AttributeMarker, TAttributes, TNode, TNodeType} from '../../src/render3/
import {CssSelector, CssSelectorList, NG_PROJECT_AS_ATTR_NAME, SelectorFlags,} from '../../src/render3/interfaces/projection';
import {getProjectAsAttrValue, isNodeMatchingSelectorList, isNodeMatchingSelector} from '../../src/render3/node_selector_matcher';
import {createTNode} from '@angular/core/src/render3/instructions';
function testLStaticData(tagName: string, attrs: TAttributes | null): TNode {
return {
type: TNodeType.Element,
index: 0,
flags: 0, tagName, attrs,
localNames: null,
initialInputs: undefined,
inputs: undefined,
outputs: undefined,
tViews: null,
next: null,
child: null,
parent: null,
dynamicContainerNode: null,
detached: null,
stylingTemplate: null
};
return createTNode(TNodeType.Element, 0, tagName, attrs, null, null);
}
describe('css selector matching', () => {
function isMatching(tagName: string, attrs: TAttributes | null, selector: CssSelector): boolean {
return isNodeMatchingSelector(testLStaticData(tagName, attrs), selector);
return isNodeMatchingSelector(
createTNode(TNodeType.Element, 0, tagName, attrs, null, null), selector);
}
describe('isNodeMatchingSimpleSelector', () => {

28
packages/core/test/render3/view_container_ref_spec.ts
View File

@ -671,9 +671,9 @@ describe('ViewContainerRef', () => {
factory: () => new Child(),
template: (rf: RenderFlags, cmp: Child) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
elementStart(1, 'div');
{ projection(2, 0); }
projectionDef();
elementStart(0, 'div');
{ projection(1); }
elementEnd();
}
}
@ -742,17 +742,17 @@ describe('ViewContainerRef', () => {
factory: () => new ChildWithView(),
template: (rf: RenderFlags, cmp: ChildWithView) => {
if (rf & RenderFlags.Create) {
projectionDef(0);
text(1, 'Before (inside)-');
container(2);
text(3, 'After (inside)');
projectionDef();
text(0, 'Before (inside)-');
container(1);
text(2, 'After (inside)');
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
containerRefreshStart(1);
if (cmp.show) {
let rf0 = embeddedViewStart(0);
if (rf0 & RenderFlags.Create) {
projection(0, 0);
projection(0);
}
embeddedViewEnd();
}
@ -827,12 +827,12 @@ describe('ViewContainerRef', () => {
factory: () => new ChildWithSelector(),
template: (rf: RenderFlags, cmp: ChildWithSelector) => {
if (rf & RenderFlags.Create) {
projectionDef(0, [[['header']]], ['header']);
elementStart(1, 'first');
{ projection(2, 0, 1); }
projectionDef([[['header']]], ['header']);
elementStart(0, 'first');
{ projection(1, 1); }
elementEnd();
elementStart(3, 'second');
{ projection(4, 0); }
elementStart(2, 'second');
{ projection(3); }
elementEnd();
}
},