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

fix(ivy): o2+ should work with multiple template instances (#22075)

Browse Source 
Closes #22075
This commit is contained in:
Kara
2018-02-13 10:24:41 -08:00
committed by Miško Hevery
parent 8ec21fc325
commit 5e4af7c550
6 changed files with 505 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
packages/core/test/render3/compiler_canonical_spec.ts
View File

@ -226,7 +226,7 @@ describe('compiler specification', () => {
r3.E(0, MyComp);
r3.e();
}
r3.p(0, 'names', r3.o1(0, e0_literal, 1, ctx.customName));
r3.p(0, 'names', r3.o1(e0_ff, ctx.customName));
MyComp.ngComponentDef.h(1, 0);
r3.r(1, 0);
}
@ -235,18 +235,118 @@ describe('compiler specification', () => {
}
// NORMATIVE
const e0_literal = ['Nancy', null];
const e0_ff = (v: any) => ['Nancy', v];
// /NORMATIVE
expect(renderComp(MyApp)).toEqual(`<my-comp><p>Nancy</p><p>Bess</p></my-comp>`);
expect(e0_literal).toEqual(['Nancy', null]);
});
it('should support 9+ bindings in array literals', () => {
@Component({
selector: 'my-comp',
template: `
{{ names[0] }}
{{ names[1] }}
{{ names[3] }}
{{ names[4] }}
{{ names[5] }}
{{ names[6] }}
{{ names[7] }}
{{ names[8] }}
{{ names[9] }}
{{ names[10] }}
{{ names[11] }}
`
})
class MyComp {
@Input() names: string[];
static ngComponentDef = r3.defineComponent({
type: MyComp,
tag: 'my-comp',
factory: function MyComp_Factory() { return new MyComp(); },
template: function MyComp_Template(ctx: MyComp, cm: boolean) {
if (cm) {
r3.T(0);
r3.T(1);
r3.T(2);
r3.T(3);
r3.T(4);
r3.T(5);
r3.T(6);
r3.T(7);
r3.T(8);
r3.T(9);
r3.T(10);
r3.T(11);
}
r3.t(0, r3.b(ctx.names[0]));
r3.t(1, r3.b(ctx.names[1]));
r3.t(2, r3.b(ctx.names[2]));
r3.t(3, r3.b(ctx.names[3]));
r3.t(4, r3.b(ctx.names[4]));
r3.t(5, r3.b(ctx.names[5]));
r3.t(6, r3.b(ctx.names[6]));
r3.t(7, r3.b(ctx.names[7]));
r3.t(8, r3.b(ctx.names[8]));
r3.t(9, r3.b(ctx.names[9]));
r3.t(10, r3.b(ctx.names[10]));
r3.t(11, r3.b(ctx.names[11]));
},
inputs: {names: 'names'}
});
}
@Component({
selector: 'my-app',
template: `
<my-comp [names]="['start-', n0, n1, n2, n3, n4, '-middle-', n5, n6, n7, n8, '-end']">
</my-comp>
`
})
class MyApp {
n0 = 'a';
n1 = 'b';
n2 = 'c';
n3 = 'd';
n4 = 'e';
n5 = 'f';
n6 = 'g';
n7 = 'h';
n8 = 'i';
// NORMATIVE
static ngComponentDef = r3.defineComponent({
type: MyApp,
tag: 'my-app',
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(c: MyApp, cm: boolean) {
if (cm) {
r3.E(0, MyComp);
r3.e();
}
r3.p(
0, 'names', r3.oV(e0_ff, [c.n0, c.n1, c.n2, c.n3, c.n4, c.n5, c.n6, c.n7, c.n8]));
MyComp.ngComponentDef.h(1, 0);
r3.r(1, 0);
}
});
// /NORMATIVE
}
// NORMATIVE
const e0_ff = (v: any[]) =>
['start-', v[0], v[1], v[2], v[3], v[4], '-middle-', v[5], v[6], v[7], v[8], '-end'];
// /NORMATIVE
expect(renderComp(MyApp)).toEqual(`<my-comp>start-abcde-middle-fghi-end</my-comp>`);
});
it('should support object literals', () => {
@Component({
selector: 'object-comp',
template: `
<p> {{ config.duration }} </p>
<p> {{ config['duration'] }} </p>
<p> {{ config.animation }} </p>
`
})
@ -266,7 +366,7 @@ describe('compiler specification', () => {
r3.T(3);
r3.e();
}
r3.t(1, r3.b(ctx.config.duration));
r3.t(1, r3.b(ctx.config['duration']));
r3.t(3, r3.b(ctx.config.animation));
},
inputs: {config: 'config'}
@ -276,7 +376,7 @@ describe('compiler specification', () => {
@Component({
selector: 'my-app',
template: `
<object-comp [config]="{duration: 500, animation: name}"></object-comp>
<object-comp [config]="{'duration': 500, animation: name}"></object-comp>
`
})
class MyApp {
@ -292,7 +392,7 @@ describe('compiler specification', () => {
r3.E(0, ObjectComp);
r3.e();
}
r3.p(0, 'config', r3.o1(0, e0_literal, 'animation', ctx.name));
r3.p(0, 'config', r3.o1(e0_ff, ctx.name));
ObjectComp.ngComponentDef.h(1, 0);
r3.r(1, 0);
}
@ -301,11 +401,10 @@ describe('compiler specification', () => {
}
// NORMATIVE
const e0_literal = {duration: 500, animation: null};
const e0_ff = (v: any) => { return {'duration': 500, animation: v}; };
// /NORMATIVE
expect(renderComp(MyApp)).toEqual(`<object-comp><p>500</p><p>slide</p></object-comp>`);
expect(e0_literal).toEqual({duration: 500, animation: null});
});
it('should support expressions nested deeply in object/array literals', () => {
@ -367,9 +466,7 @@ describe('compiler specification', () => {
}
r3.p(
0, 'config',
r3.o2(
2, e0_literal_2, 'animation', ctx.name, 'actions',
r3.o1(1, e0_literal_1, 1, r3.o1(0, e0_literal, 'duration', ctx.duration))));
r3.o2(e0_ff_2, ctx.name, r3.o1(e0_ff_1, r3.o1(e0_ff, ctx.duration))));
NestedComp.ngComponentDef.h(1, 0);
r3.r(1, 0);
}
@ -378,10 +475,10 @@ describe('compiler specification', () => {
}
// NORMATIVE
const e0_literal = {opacity: 1, duration: null};
const e0_ff = (v: any) => { return {opacity: 1, duration: v}; };
const c0 = {opacity: 0, duration: 0};
const e0_literal_1 = [c0, null];
const e0_literal_2 = {animation: null, actions: null};
const e0_ff_1 = (v: any) => [c0, v];
const e0_ff_2 = (v1: any, v2: any) => { return {animation: v1, actions: v2}; };
// /NORMATIVE
expect(renderComp(MyApp))

253
packages/core/test/render3/object_literal_spec.ts
View File

@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {defineComponent} from '../../src/render3/index';
import {componentRefresh, elementEnd, elementProperty, elementStart, memory} from '../../src/render3/instructions';
import {objectLiteral1, objectLiteral2, objectLiteral3, objectLiteral4, objectLiteral5, objectLiteral6, objectLiteral7, objectLiteral8} from '../../src/render3/object_literal';
import {componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, memory} from '../../src/render3/instructions';
import {objectLiteral1, objectLiteral2, objectLiteral3, objectLiteral4, objectLiteral5, objectLiteral6, objectLiteral7, objectLiteral8, objectLiteralV} from '../../src/render3/object_literal';
import {renderToHtml} from '../../test/render3/render_util';
describe('array literals', () => {
@ -32,12 +32,12 @@ describe('array literals', () => {
elementStart(0, MyComp);
elementEnd();
}
elementProperty(0, 'names', objectLiteral1(0, e0_literal, 1, ctx.customName));
elementProperty(0, 'names', objectLiteral1(e0_ff, ctx.customName));
MyComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
}
const e0_literal = ['Nancy', null, 'Bess'];
const e0_ff = (v: any) => ['Nancy', v, 'Bess'];
renderToHtml(Template, {customName: 'Carson'});
const firstArray = myComp !.names;
@ -52,8 +52,6 @@ describe('array literals', () => {
// Identity must change if binding changes
expect(firstArray).not.toBe(myComp !.names);
expect(e0_literal).toEqual(['Nancy', null, 'Bess']);
});
it('should support multiple array literals passed through to one node', () => {
@ -72,21 +70,23 @@ describe('array literals', () => {
});
}
/** <many-prop-comp [names1]="['Nancy', customName]" [names2]="[customName2]"></many-prop-comp>
/**
* <many-prop-comp [names1]="['Nancy', customName]" [names2]="[customName2]">
* </many-prop-comp>
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
elementStart(0, ManyPropComp);
elementEnd();
}
elementProperty(0, 'names1', objectLiteral1(0, e0_literal, 1, ctx.customName));
elementProperty(0, 'names2', objectLiteral1(1, e0_literal_1, 0, ctx.customName2));
elementProperty(0, 'names1', objectLiteral1(e0_ff, ctx.customName));
elementProperty(0, 'names2', objectLiteral1(e0_ff_1, ctx.customName2));
ManyPropComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
}
const e0_literal = ['Nancy', null];
const e0_literal_1 = [null];
const e0_ff = (v: any) => ['Nancy', v];
const e0_ff_1 = (v: any) => [v];
renderToHtml(Template, {customName: 'Carson', customName2: 'George'});
expect(manyPropComp !.names1).toEqual(['Nancy', 'Carson']);
@ -95,10 +95,6 @@ describe('array literals', () => {
renderToHtml(Template, {customName: 'George', customName2: 'Carson'});
expect(manyPropComp !.names1).toEqual(['Nancy', 'George']);
expect(manyPropComp !.names2).toEqual(['Carson']);
expect(e0_literal).toEqual(['Nancy', null]);
expect(e0_literal_1).toEqual([null]);
});
@ -109,13 +105,12 @@ describe('array literals', () => {
elementStart(0, MyComp);
elementEnd();
}
elementProperty(
0, 'names', objectLiteral2(0, e0_literal, 1, ctx.customName, 3, ctx.customName2));
elementProperty(0, 'names', objectLiteral2(e0_ff, ctx.customName, ctx.customName2));
MyComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
}
const e0_literal = ['Nancy', null, 'Bess', null];
const e0_ff = (v1: any, v2: any) => ['Nancy', v1, 'Bess', v2];
renderToHtml(Template, {customName: 'Carson', customName2: 'Hannah'});
const firstArray = myComp !.names;
@ -162,42 +157,40 @@ describe('array literals', () => {
o8Comp = memory(11);
elementEnd();
}
elementProperty(0, 'names', objectLiteral3(0, e0_literal, 5, c[5], 6, c[6], 7, c[7]));
elementProperty(0, 'names', objectLiteral3(e0_ff, c[5], c[6], c[7]));
elementProperty(2, 'names', objectLiteral4(e2_ff, c[4], c[5], c[6], c[7]));
elementProperty(4, 'names', objectLiteral5(e4_ff, c[3], c[4], c[5], c[6], c[7]));
elementProperty(6, 'names', objectLiteral6(e6_ff, c[2], c[3], c[4], c[5], c[6], c[7]));
elementProperty(8, 'names', objectLiteral7(e8_ff, c[1], c[2], c[3], c[4], c[5], c[6], c[7]));
elementProperty(
2, 'names', objectLiteral4(1, e2_literal, 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
elementProperty(
4, 'names', objectLiteral5(2, e4_literal, 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
elementProperty(
6, 'names',
objectLiteral6(3, e6_literal, 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
elementProperty(
8, 'names',
objectLiteral7(
4, e8_literal, 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7]));
elementProperty(
10, 'names', objectLiteral8(
5, e10_literal, 0, c[0], 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6,
c[6], 7, c[7]));
10, 'names', objectLiteral8(e10_ff, c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7]));
MyComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
MyComp.ngComponentDef.h(3, 2);
componentRefresh(3, 2);
MyComp.ngComponentDef.h(5, 4);
componentRefresh(5, 4);
MyComp.ngComponentDef.h(7, 6);
componentRefresh(7, 6);
MyComp.ngComponentDef.h(9, 8);
componentRefresh(9, 8);
MyComp.ngComponentDef.h(11, 10);
componentRefresh(1, 0);
componentRefresh(3, 2);
componentRefresh(5, 4);
componentRefresh(7, 6);
componentRefresh(9, 8);
componentRefresh(11, 10);
}
const e0_literal = ['a', 'b', 'c', 'd', 'e', null, null, null];
const e2_literal = ['a', 'b', 'c', 'd', null, null, null, null];
const e4_literal = ['a', 'b', 'c', null, null, null, null, null];
const e6_literal = ['a', 'b', null, null, null, null, null, null];
const e8_literal = ['a', null, null, null, null, null, null, null];
const e10_literal = [null, null, null, null, null, null, null, null];
const e0_ff = (v1: any, v2: any, v3: any) => ['a', 'b', 'c', 'd', 'e', v1, v2, v3];
const e2_ff = (v1: any, v2: any, v3: any, v4: any) => ['a', 'b', 'c', 'd', v1, v2, v3, v4];
const e4_ff =
(v1: any, v2: any, v3: any, v4: any, v5: any) => ['a', 'b', 'c', v1, v2, v3, v4, v5];
const e6_ff =
(v1: any, v2: any, v3: any, v4: any, v5: any,
v6: any) => ['a', 'b', v1, v2, v3, v4, v5, v6];
const e8_ff =
(v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
v7: any) => ['a', v1, v2, v3, v4, v5, v6, v7];
const e10_ff =
(v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any,
v8: any) => [v1, v2, v3, v4, v5, v6, v7, v8];
renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']);
expect(o3Comp !.names).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']);
@ -216,33 +209,74 @@ describe('array literals', () => {
expect(o8Comp !.names).toEqual(['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']);
});
it('should support an object literal', () => {
let objectComp: ObjectComp;
class ObjectComp {
config: {[key: string]: any};
static ngComponentDef = defineComponent({
type: ObjectComp,
tag: 'object-comp',
factory: function ObjectComp_Factory() { return objectComp = new ObjectComp(); },
template: function ObjectComp_Template(ctx: ObjectComp, cm: boolean) {},
inputs: {config: 'config'}
});
it('should work with objectLiteralV for 9+ bindings', () => {
/**
* <my-comp [names]="['start', v0, v1, v2, v3, {name: v4}, v5, v6, v7, v8, 'end']">
* </my-comp>
*/
function Template(c: any, cm: boolean) {
if (cm) {
elementStart(0, MyComp);
elementEnd();
}
elementProperty(
0, 'names', objectLiteralV(e0_ff, [
c[0], c[1], c[2], c[3], objectLiteral1(e0_ff_1, c[4]), c[5], c[6], c[7], c[8]
]));
MyComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
}
/** <object-comp [config]="{duration: 500, animation: ctx.name}"></object-comp> */
const e0_ff =
(v: any[]) => ['start', v[0], v[1], v[2], v[3], v[4], v[5], v[6], v[7], v[8], 'end'];
const e0_ff_1 = (v: any) => { return {name: v}; };
renderToHtml(Template, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']);
expect(myComp !.names).toEqual([
'start', 'a', 'b', 'c', 'd', {name: 'e'}, 'f', 'g', 'h', 'i', 'end'
]);
renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']);
expect(myComp !.names).toEqual([
'start', 'a1', 'b', 'c', 'd', {name: 'e'}, 'f', 'g', 'h', 'i', 'end'
]);
renderToHtml(Template, ['a1', 'b', 'c', 'd', 'e5', 'f', 'g', 'h', 'i']);
expect(myComp !.names).toEqual([
'start', 'a1', 'b', 'c', 'd', {name: 'e5'}, 'f', 'g', 'h', 'i', 'end'
]);
});
});
describe('object literals', () => {
let objectComp: ObjectComp;
class ObjectComp {
config: {[key: string]: any};
static ngComponentDef = defineComponent({
type: ObjectComp,
tag: 'object-comp',
factory: function ObjectComp_Factory() { return objectComp = new ObjectComp(); },
template: function ObjectComp_Template(ctx: ObjectComp, cm: boolean) {},
inputs: {config: 'config'}
});
}
it('should support an object literal', () => {
/** <object-comp [config]="{duration: 500, animation: name}"></object-comp> */
function Template(ctx: any, cm: boolean) {
if (cm) {
elementStart(0, ObjectComp);
elementEnd();
}
elementProperty(0, 'config', objectLiteral1(0, e0_literal, 'animation', ctx.name));
elementProperty(0, 'config', objectLiteral1(e0_ff, ctx.name));
ObjectComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
}
const e0_literal = {duration: 500, animation: null};
const e0_ff = (v: any) => { return {duration: 500, animation: v}; };
renderToHtml(Template, {name: 'slide'});
const firstObj = objectComp !.config;
@ -257,80 +291,107 @@ describe('array literals', () => {
// Identity must change if binding changes
expect(firstObj).not.toBe(objectComp !.config);
expect(e0_literal).toEqual({duration: 500, animation: null});
});
it('should support expressions nested deeply in object/array literals', () => {
let nestedComp: NestedComp;
class NestedComp {
config: {[key: string]: any};
static ngComponentDef = defineComponent({
type: NestedComp,
tag: 'nested-comp',
factory: function NestedComp_Factory() { return nestedComp = new NestedComp(); },
template: function NestedComp_Template(ctx: NestedComp, cm: boolean) {},
inputs: {config: 'config'}
});
}
/**
* <nested-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1,
* <object-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1,
* duration: duration }]}">
* </nested-comp>
* </object-comp>
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
elementStart(0, NestedComp);
elementStart(0, ObjectComp);
elementEnd();
}
elementProperty(
0, 'config',
objectLiteral2(
2, e0_literal_2, 'animation', ctx.name, 'actions',
objectLiteral1(
1, e0_literal_1, 1, objectLiteral1(0, e0_literal, 'duration', ctx.duration))));
NestedComp.ngComponentDef.h(1, 0);
e0_ff, ctx.name, objectLiteral1(e0_ff_1, objectLiteral1(e0_ff_2, ctx.duration))));
ObjectComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
}
const e0_literal = {opacity: 1, duration: null};
const e0_literal_1 = [{opacity: 0, duration: 0}, null];
const e0_literal_2 = {animation: null, actions: null};
const e0_ff = (v1: any, v2: any) => { return {animation: v1, actions: v2}; };
const e0_ff_1 = (v: any) => [{opacity: 0, duration: 0}, v];
const e0_ff_2 = (v: any) => { return {opacity: 1, duration: v}; };
renderToHtml(Template, {name: 'slide', duration: 100});
expect(nestedComp !.config).toEqual({
expect(objectComp !.config).toEqual({
animation: 'slide',
actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 100}]
});
const firstConfig = nestedComp !.config;
const firstConfig = objectComp !.config;
renderToHtml(Template, {name: 'slide', duration: 100});
expect(nestedComp !.config).toEqual({
expect(objectComp !.config).toEqual({
animation: 'slide',
actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 100}]
});
expect(nestedComp !.config).toBe(firstConfig);
expect(objectComp !.config).toBe(firstConfig);
renderToHtml(Template, {name: 'slide', duration: 50});
expect(nestedComp !.config).toEqual({
expect(objectComp !.config).toEqual({
animation: 'slide',
actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 50}]
});
expect(nestedComp !.config).not.toBe(firstConfig);
expect(objectComp !.config).not.toBe(firstConfig);
renderToHtml(Template, {name: 'tap', duration: 50});
expect(nestedComp !.config).toEqual({
expect(objectComp !.config).toEqual({
animation: 'tap',
actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 50}]
});
expect(e0_literal).toEqual({opacity: 1, duration: null});
expect(e0_literal_1).toEqual([{opacity: 0, duration: 0}, null]);
expect(e0_literal_2).toEqual({animation: null, actions: null});
renderToHtml(Template, {name: 'drag', duration: 500});
expect(objectComp !.config).toEqual({
animation: 'drag',
actions: [{opacity: 0, duration: 0}, {opacity: 1, duration: 500}]
});
});
it('should support multiple view instances with multiple bindings', () => {
let objectComps: ObjectComp[] = [];
/**
* % for(let i = 0; i < 2; i++) {
* <object-comp [config]="{opacity: configs[i].opacity, duration: configs[i].duration}">
* </object-comp>
* % }
*/
function Template(ctx: any, cm: boolean) {
if (cm) {
container(0);
}
containerRefreshStart(0);
{
for (let i = 0; i < 2; i++) {
if (embeddedViewStart(0)) {
elementStart(0, ObjectComp);
objectComps.push(memory(1));
elementEnd();
}
elementProperty(
0, 'config', objectLiteral2(e0_ff, ctx.configs[i].opacity, ctx.configs[i].duration));
ObjectComp.ngComponentDef.h(1, 0);
componentRefresh(1, 0);
embeddedViewEnd();
}
}
containerRefreshEnd();
}
const e0_ff = (v1: any, v2: any) => { return {opacity: v1, duration: v2}; };
const configs = [{opacity: 0, duration: 500}, {opacity: 1, duration: 600}];
renderToHtml(Template, {configs});
expect(objectComps[0].config).toEqual({opacity: 0, duration: 500});
expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
configs[0].duration = 1000;
renderToHtml(Template, {configs});
expect(objectComps[0].config).toEqual({opacity: 0, duration: 1000});
expect(objectComps[1].config).toEqual({opacity: 1, duration: 600});
});
});