diff --git a/packages/core/src/render3/interfaces/query.ts b/packages/core/src/render3/interfaces/query.ts index f464a42383..2ab94de136 100644 --- a/packages/core/src/render3/interfaces/query.ts +++ b/packages/core/src/render3/interfaces/query.ts @@ -10,7 +10,6 @@ import {QueryList} from '../../linker'; import {Type} from '../../type'; import {LNode} from './node'; - /** Used for tracking queries (e.g. ViewChild, ContentChild). */ export interface LQueries { /** diff --git a/packages/core/test/render3/basic_perf.ts b/packages/core/test/render3/basic_perf.ts index b6ab09ae04..3b6dca3ffe 100644 --- a/packages/core/test/render3/basic_perf.ts +++ b/packages/core/test/render3/basic_perf.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, E, T, V, cR, cr, defineComponent, e, v} from '../../src/render3/index'; +import {defineComponent} from '../../src/render3/index'; +import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, text, viewEnd, viewStart} from '../../src/render3/instructions'; import {document, renderComponent} from './render_util'; @@ -36,23 +37,23 @@ describe('iv perf test', () => { tag: 'div', template: function Template(ctx: any, cm: any) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { for (let i = 0; i < count; i++) { - let cm0 = V(0); + let cm0 = viewStart(0); { if (cm0) { - E(0, 'div'); - T(1, '-'); - e(); + elementStart(0, 'div'); + text(1, '-'); + elementEnd(); } } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); }, factory: () => new Component }); diff --git a/packages/core/test/render3/common_integration_spec.ts b/packages/core/test/render3/common_integration_spec.ts index fceb38427f..d0ca46aaf2 100644 --- a/packages/core/test/render3/common_integration_spec.ts +++ b/packages/core/test/render3/common_integration_spec.ts @@ -8,7 +8,8 @@ import {NgForOfContext} from '@angular/common'; -import {C, E, T, b, cR, cr, defineComponent, e, p, r, t} from '../../src/render3/index'; +import {defineComponent} from '../../src/render3/index'; +import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, text, textBinding} from '../../src/render3/instructions'; import {NgForOf} from './common_with_def'; import {renderComponent, toHtml} from './render_util'; @@ -28,22 +29,22 @@ describe('@angular/common integration', () => { // template: (myApp: MyApp, cm: boolean) => { if (cm) { - E(0, 'ul'); - { C(1, [NgForOf], liTemplate); } - e(); + elementStart(0, 'ul'); + { container(1, [NgForOf], liTemplate); } + elementEnd(); } - p(1, 'ngForOf', b(myApp.items)); - cR(1); - r(2, 0); - cr(); + elementProperty(1, 'ngForOf', bind(myApp.items)); + containerRefreshStart(1); + componentRefresh(2, 0); + containerRefreshEnd(); function liTemplate(row: NgForOfContext, cm: boolean) { if (cm) { - E(0, 'li'); - { T(1); } - e(); + elementStart(0, 'li'); + { text(1); } + elementEnd(); } - t(1, b(row.$implicit)); + textBinding(1, bind(row.$implicit)); } } }); diff --git a/packages/core/test/render3/common_with_def.ts b/packages/core/test/render3/common_with_def.ts index 37e3708094..1ee4871176 100644 --- a/packages/core/test/render3/common_with_def.ts +++ b/packages/core/test/render3/common_with_def.ts @@ -10,7 +10,8 @@ import {NgForOf as NgForOfDef} from '@angular/common'; import {IterableDiffers} from '@angular/core'; import {defaultIterableDiffers} from '../../src/change_detection/change_detection'; -import {DirectiveType, InjectFlags, NgOnChangesFeature, defineDirective, inject, injectTemplateRef, injectViewContainerRef, m} from '../../src/render3/index'; +import {DirectiveType, InjectFlags, NgOnChangesFeature, defineDirective, inject, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index'; +import {memory} from '../../src/render3/instructions'; export const NgForOf: DirectiveType> = NgForOfDef as any; diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 8b0ef56eb7..2eed82563c 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/packages/core/test/render3/component_spec.ts @@ -7,7 +7,8 @@ */ import {ViewEncapsulation} from '../../src/core'; -import {C, E, T, V, b, cR, cr, defineComponent, e, markDirty, p, r, t, v} from '../../src/render3/index'; +import {defineComponent, markDirty} from '../../src/render3/index'; +import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions'; import {createRendererType2} from '../../src/view/index'; import {getRendererFactory2} from './imported_renderer2'; @@ -24,9 +25,9 @@ describe('component', () => { tag: 'counter', template: function(ctx: CounterComponent, cm: boolean) { if (cm) { - T(0); + text(0); } - t(0, b(ctx.count)); + textBinding(0, bind(ctx.count)); }, factory: () => new CounterComponent, inputs: {count: 'count'}, @@ -63,22 +64,22 @@ describe('component with a container', () => { function showItems(ctx: {items: string[]}, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { for (const item of ctx.items) { - const cm0 = V(0); + const cm0 = viewStart(0); { if (cm0) { - T(0); + text(0); } - t(0, b(item)); + textBinding(0, bind(item)); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } class WrapperComponent { @@ -88,15 +89,15 @@ describe('component with a container', () => { tag: 'wrapper', template: function ChildComponentTemplate(ctx: {items: string[]}, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { - const cm0 = V(0); + const cm0 = viewStart(0); { showItems({items: ctx.items}, cm0); } - v(); + viewEnd(); } - cr(); + containerRefreshEnd(); }, factory: () => new WrapperComponent, inputs: {items: 'items'} @@ -105,12 +106,12 @@ describe('component with a container', () => { function template(ctx: {items: string[]}, cm: boolean) { if (cm) { - E(0, WrapperComponent); - e(); + elementStart(0, WrapperComponent); + elementEnd(); } - p(0, 'items', b(ctx.items)); + elementProperty(0, 'items', bind(ctx.items)); WrapperComponent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } it('should re-render on input change', () => { @@ -132,11 +133,11 @@ describe('encapsulation', () => { tag: 'wrapper', template: function(ctx: WrapperComponent, cm: boolean) { if (cm) { - E(0, EncapsulatedComponent); - e(); + elementStart(0, EncapsulatedComponent); + elementEnd(); } EncapsulatedComponent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }, factory: () => new WrapperComponent, }); @@ -148,12 +149,12 @@ describe('encapsulation', () => { tag: 'encapsulated', template: function(ctx: EncapsulatedComponent, cm: boolean) { if (cm) { - T(0, 'foo'); - E(1, LeafComponent); - e(); + text(0, 'foo'); + elementStart(1, LeafComponent); + elementEnd(); } LeafComponent.ngComponentDef.h(2, 1); - r(2, 1); + componentRefresh(2, 1); }, factory: () => new EncapsulatedComponent, rendererType: @@ -167,9 +168,9 @@ describe('encapsulation', () => { tag: 'leaf', template: function(ctx: LeafComponent, cm: boolean) { if (cm) { - E(0, 'span'); - { T(1, 'bar'); } - e(); + elementStart(0, 'span'); + { text(1, 'bar'); } + elementEnd(); } }, factory: () => new LeafComponent, @@ -197,11 +198,11 @@ describe('encapsulation', () => { tag: 'wrapper', template: function(ctx: WrapperComponentWith, cm: boolean) { if (cm) { - E(0, LeafComponentwith); - e(); + elementStart(0, LeafComponentwith); + elementEnd(); } LeafComponentwith.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }, factory: () => new WrapperComponentWith, rendererType: @@ -215,9 +216,9 @@ describe('encapsulation', () => { tag: 'leaf', template: function(ctx: LeafComponentwith, cm: boolean) { if (cm) { - E(0, 'span'); - { T(1, 'bar'); } - e(); + elementStart(0, 'span'); + { text(1, 'bar'); } + elementEnd(); } }, factory: () => new LeafComponentwith, diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts index 043365ac5e..d138de2eda 100644 --- a/packages/core/test/render3/content_spec.ts +++ b/packages/core/test/render3/content_spec.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, E, P, T, V, cR, cr, detectChanges, e, m, pD, r, v} from '../../src/render3/index'; +import {detectChanges} from '../../src/render3/index'; +import {componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, memory, projection, projectionDef, text, viewEnd, viewStart} from '../../src/render3/instructions'; import {createComponent, renderComponent, toHtml} from './render_util'; @@ -18,10 +19,10 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); @@ -30,12 +31,12 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); - { T(2, 'content'); } - e(); + elementStart(0, Child); + { text(2, 'content'); } + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -44,18 +45,18 @@ describe('content projection', () => { it('should project content when root.', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - P(1, 0); + projectionDef(0); + projection(1, 0); } }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); - { T(2, 'content'); } - e(); + elementStart(0, Child); + { text(2, 'content'); } + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content'); @@ -64,35 +65,35 @@ describe('content projection', () => { it('should re-project content when root.', () => { const GrandChild = createComponent('grand-child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, GrandChild); - { P(3, 0); } - e(); + projectionDef(0); + elementStart(1, GrandChild); + { projection(3, 0); } + elementEnd(); GrandChild.ngComponentDef.h(2, 1); - r(2, 1); + componentRefresh(2, 1); } }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'b'); - T(3, 'Hello'); - e(); - T(4, 'World!'); + elementStart(2, 'b'); + text(3, 'Hello'); + elementEnd(); + text(4, 'World!'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) @@ -104,16 +105,16 @@ describe('content projection', () => { /**
*/ const Child = createComponent('child', (ctx: any, cm: boolean) => { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); const ProjectedComp = createComponent('projected-comp', (ctx: any, cm: boolean) => { if (cm) { - T(0, 'content'); + text(0, 'content'); } }); @@ -124,17 +125,17 @@ describe('content projection', () => { */ const Parent = createComponent('parent', (ctx: any, cm: boolean) => { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, ProjectedComp); - e(); + elementStart(2, ProjectedComp); + elementEnd(); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); - r(3, 2); - r(1, 0); + componentRefresh(3, 2); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) @@ -144,34 +145,34 @@ describe('content projection', () => { it('should project content with container.', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - T(2, '('); - C(3); - T(4, ')'); + text(2, '('); + container(3); + text(4, ')'); } - e(); + elementEnd(); } - cR(3); + containerRefreshStart(3); { if (ctx.value) { - if (V(0)) { - T(0, 'content'); + if (viewStart(0)) { + text(0, 'content'); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
()
'); @@ -186,28 +187,28 @@ describe('content projection', () => { it('should project content with container into root', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - P(1, 0); + projectionDef(0); + projection(1, 0); } }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child); - { C(2); } - e(); + elementStart(0, Child); + { container(2); } + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (ctx.value) { - if (V(0)) { - T(0, 'content'); + if (viewStart(0)) { + text(0, 'content'); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual(''); @@ -224,39 +225,39 @@ describe('content projection', () => { it('should project content with container and if-else.', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - T(2, '('); - C(3); - T(4, ')'); + text(2, '('); + container(3); + text(4, ')'); } - e(); + elementEnd(); } - cR(3); + containerRefreshStart(3); { if (ctx.value) { - if (V(0)) { - T(0, 'content'); + if (viewStart(0)) { + text(0, 'content'); } - v(); + viewEnd(); } else { - if (V(1)) { - T(0, 'else'); + if (viewStart(1)) { + text(0, 'else'); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
(else)
'); @@ -282,23 +283,23 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { C(2); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { container(2); } + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (!ctx.skipContent) { - if (V(0)) { - E(0, 'span'); - P(1, 0); - e(); + if (viewStart(0)) { + elementStart(0, 'span'); + projection(1, 0); + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); }); /** @@ -306,15 +307,15 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - childCmptInstance = m(1); - T(2, 'content'); + childCmptInstance = memory(1); + text(2, 'content'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -337,21 +338,21 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { C(2); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { container(2); } + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (!ctx.skipContent) { - if (V(0)) { - P(0, 0); + if (viewStart(0)) { + projection(0, 0); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); }); /** @@ -359,15 +360,15 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - childCmptInstance = m(1); - T(2, 'content'); + childCmptInstance = memory(1); + text(2, 'content'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -390,23 +391,23 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { C(2); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { container(2); } + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (!ctx.skipContent) { - if (V(0)) { - T(0, 'before-'); - P(1, 0); - T(2, '-after'); + if (viewStart(0)) { + text(0, 'before-'); + projection(1, 0); + text(2, '-after'); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); }); /** @@ -414,15 +415,15 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - childCmptInstance = m(1); - T(2, 'content'); + childCmptInstance = memory(1); + text(2, 'content'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
before-content-after
'); @@ -439,13 +440,13 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); - E(3, 'span'); - { P(4, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); + elementStart(3, 'span'); + { projection(4, 0); } + elementEnd(); } }); @@ -454,12 +455,12 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); - { T(2, 'content'); } - e(); + elementStart(0, Child); + { text(2, 'content'); } + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -486,22 +487,22 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - P(1, 0); - E(2, 'div'); - { C(3); } - e(); + projectionDef(0); + projection(1, 0); + elementStart(2, 'div'); + { container(3); } + elementEnd(); } - cR(3); + containerRefreshStart(3); { if (ctx.show) { - if (V(0)) { - P(0, 0); + if (viewStart(0)) { + projection(0, 0); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); }); /** @@ -509,15 +510,15 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - childCmptInstance = m(1); - T(2, 'content'); + childCmptInstance = memory(1); + text(2, 'content'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content
'); @@ -536,13 +537,14 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span', 'title', 'toFirst'], null]], [[['span', 'title', 'toSecond'], null]]]); - E(1, 'div', ['id', 'first']); - { P(2, 0, 1); } - e(); - E(3, 'div', ['id', 'second']); - { P(4, 0, 2); } - e(); + projectionDef( + 0, [[[['span', 'title', 'toFirst'], null]], [[['span', 'title', 'toSecond'], null]]]); + elementStart(1, 'div', ['id', 'first']); + { projection(2, 0, 1); } + elementEnd(); + elementStart(3, 'div', ['id', 'second']); + { projection(4, 0, 2); } + elementEnd(); } }); @@ -554,19 +556,19 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span', ['title', 'toFirst']); - { T(3, '1'); } - e(); - E(4, 'span', ['title', 'toSecond']); - { T(5, '2'); } - e(); + elementStart(2, 'span', ['title', 'toFirst']); + { text(3, '1'); } + elementEnd(); + elementStart(4, 'span', ['title', 'toSecond']); + { text(5, '2'); } + elementEnd(); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -582,13 +584,14 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span', 'class', 'toFirst'], null]], [[['span', 'class', 'toSecond'], null]]]); - E(1, 'div', ['id', 'first']); - { P(2, 0, 1); } - e(); - E(3, 'div', ['id', 'second']); - { P(4, 0, 2); } - e(); + projectionDef( + 0, [[[['span', 'class', 'toFirst'], null]], [[['span', 'class', 'toSecond'], null]]]); + elementStart(1, 'div', ['id', 'first']); + { projection(2, 0, 1); } + elementEnd(); + elementStart(3, 'div', ['id', 'second']); + { projection(4, 0, 2); } + elementEnd(); } }); @@ -600,19 +603,19 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span', ['class', 'toFirst']); - { T(3, '1'); } - e(); - E(4, 'span', ['class', 'toSecond']); - { T(5, '2'); } - e(); + elementStart(2, 'span', ['class', 'toFirst']); + { text(3, '1'); } + elementEnd(); + elementStart(4, 'span', ['class', 'toSecond']); + { text(5, '2'); } + elementEnd(); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -628,13 +631,14 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span', 'class', 'toFirst'], null]], [[['span', 'class', 'toSecond'], null]]]); - E(1, 'div', ['id', 'first']); - { P(2, 0, 1); } - e(); - E(3, 'div', ['id', 'second']); - { P(4, 0, 2); } - e(); + projectionDef( + 0, [[[['span', 'class', 'toFirst'], null]], [[['span', 'class', 'toSecond'], null]]]); + elementStart(1, 'div', ['id', 'first']); + { projection(2, 0, 1); } + elementEnd(); + elementStart(3, 'div', ['id', 'second']); + { projection(4, 0, 2); } + elementEnd(); } }); @@ -646,19 +650,19 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span', ['class', 'other toFirst']); - { T(3, '1'); } - e(); - E(4, 'span', ['class', 'toSecond noise']); - { T(5, '2'); } - e(); + elementStart(2, 'span', ['class', 'other toFirst']); + { text(3, '1'); } + elementEnd(); + elementStart(4, 'span', ['class', 'toSecond noise']); + { text(5, '2'); } + elementEnd(); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -674,13 +678,13 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span'], null]], [[['span', 'class', 'toSecond'], null]]]); - E(1, 'div', ['id', 'first']); - { P(2, 0, 1); } - e(); - E(3, 'div', ['id', 'second']); - { P(4, 0, 2); } - e(); + projectionDef(0, [[[['span'], null]], [[['span', 'class', 'toSecond'], null]]]); + elementStart(1, 'div', ['id', 'first']); + { projection(2, 0, 1); } + elementEnd(); + elementStart(3, 'div', ['id', 'second']); + { projection(4, 0, 2); } + elementEnd(); } }); @@ -692,19 +696,19 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span', ['class', 'toFirst']); - { T(3, '1'); } - e(); - E(4, 'span', ['class', 'toSecond']); - { T(5, '2'); } - e(); + elementStart(2, 'span', ['class', 'toFirst']); + { text(3, '1'); } + elementEnd(); + elementStart(4, 'span', ['class', 'toSecond']); + { text(5, '2'); } + elementEnd(); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -720,13 +724,13 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span', 'class', 'toFirst'], null]]]); - E(1, 'div', ['id', 'first']); - { P(2, 0, 1); } - e(); - E(3, 'div', ['id', 'second']); - { P(4, 0); } - e(); + projectionDef(0, [[[['span', 'class', 'toFirst'], null]]]); + elementStart(1, 'div', ['id', 'first']); + { projection(2, 0, 1); } + elementEnd(); + elementStart(3, 'div', ['id', 'second']); + { projection(4, 0); } + elementEnd(); } }); @@ -738,20 +742,20 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span', ['class', 'toFirst']); - { T(3, '1'); } - e(); - E(4, 'span'); - { T(5, 'remaining'); } - e(); - T(6, 'more remaining'); + elementStart(2, 'span', ['class', 'toFirst']); + { text(3, '1'); } + elementEnd(); + elementStart(4, 'span'); + { text(5, 'remaining'); } + elementEnd(); + text(6, 'more remaining'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -767,13 +771,13 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span', 'class', 'toSecond'], null]]]); - E(1, 'div', ['id', 'first']); - { P(2, 0); } - e(); - E(3, 'div', ['id', 'second']); - { P(4, 0, 1); } - e(); + projectionDef(0, [[[['span', 'class', 'toSecond'], null]]]); + elementStart(1, 'div', ['id', 'first']); + { projection(2, 0); } + elementEnd(); + elementStart(3, 'div', ['id', 'second']); + { projection(4, 0, 1); } + elementEnd(); } }); @@ -786,20 +790,20 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span'); - { T(3, '1'); } - e(); - E(4, 'span', ['class', 'toSecond']); - { T(5, '2'); } - e(); - T(6, 'remaining'); + elementStart(2, 'span'); + { text(3, '1'); } + elementEnd(); + elementStart(4, 'span', ['class', 'toSecond']); + { text(5, '2'); } + elementEnd(); + text(6, 'remaining'); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -821,11 +825,11 @@ describe('content projection', () => { */ const GrandChild = createComponent('grand-child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['span'], null]]]); - P(1, 0, 1); - E(2, 'hr'); - e(); - P(3, 0, 0); + projectionDef(0, [[[['span'], null]]]); + projection(1, 0, 1); + elementStart(2, 'hr'); + elementEnd(); + projection(3, 0, 0); } }); @@ -837,17 +841,17 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, GrandChild); + projectionDef(0); + elementStart(1, GrandChild); { - P(3, 0); - E(4, 'span'); - { T(5, 'in child template'); } - e(); + projection(3, 0); + elementStart(4, 'span'); + { text(5, 'in child template'); } + elementEnd(); } - e(); + elementEnd(); GrandChild.ngComponentDef.h(2, 1); - r(2, 1); + componentRefresh(2, 1); } }); @@ -860,16 +864,16 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child); + elementStart(0, Child); { - E(2, 'span'); - { T(3, 'parent content'); } - e(); + elementStart(2, 'span'); + { text(3, 'parent content'); } + elementEnd(); } - e(); + elementEnd(); } Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); @@ -887,11 +891,11 @@ describe('content projection', () => { */ const Card = createComponent('card', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['', 'card-title', ''], null]], [[['', 'card-content', ''], null]]]); - P(1, 0, 1); - E(2, 'hr'); - e(); - P(3, 0, 2); + projectionDef(0, [[[['', 'card-title', ''], null]], [[['', 'card-content', ''], null]]]); + projection(1, 0, 1); + elementStart(2, 'hr'); + elementEnd(); + projection(3, 0, 2); } }); @@ -903,17 +907,17 @@ describe('content projection', () => { */ const CardWithTitle = createComponent('card-with-title', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, Card); + projectionDef(0); + elementStart(1, Card); { - E(3, 'h1', ['card-title', '']); - { T(4, 'Title'); } - e(); - P(5, 0, 0, ['card-content', '']); + elementStart(3, 'h1', ['card-title', '']); + { text(4, 'Title'); } + elementEnd(); + projection(5, 0, 0, ['card-content', '']); } - e(); + elementEnd(); Card.ngComponentDef.h(2, 1); - r(2, 1); + componentRefresh(2, 1); } }); @@ -924,12 +928,12 @@ describe('content projection', () => { */ const App = createComponent('app', function(ctx: any, cm: boolean) { if (cm) { - E(0, CardWithTitle); - { T(2, 'content'); } - e(); + elementStart(0, CardWithTitle); + { text(2, 'content'); } + elementEnd(); } CardWithTitle.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const app = renderComponent(App); @@ -947,10 +951,10 @@ describe('content projection', () => { */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { - pD(0, [[[['div'], null]]]); - E(1, 'span'); - { P(2, 0, 1); } - e(); + projectionDef(0, [[[['div'], null]]]); + elementStart(1, 'span'); + { projection(2, 0, 1); } + elementEnd(); } }); @@ -961,24 +965,24 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child); - { C(2, undefined, undefined, 'div'); } - e(); + elementStart(0, Child); + { container(2, undefined, undefined, 'div'); } + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (true) { - if (V(0)) { - E(0, 'div'); - { T(1, 'content'); } - e(); + if (viewStart(0)) { + elementStart(0, 'div'); + { text(1, 'content'); } + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); Child.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); diff --git a/packages/core/test/render3/control_flow_spec.ts b/packages/core/test/render3/control_flow_spec.ts index 0a5532cacb..465ff75a34 100644 --- a/packages/core/test/render3/control_flow_spec.ts +++ b/packages/core/test/render3/control_flow_spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, E, T, V, b, cR, cr, e, t, v} from '../../src/render3/index'; +import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions'; import {renderToHtml} from './render_util'; @@ -16,26 +16,26 @@ describe('JS control flow', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { C(1); } - e(); + elementStart(0, 'div'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { if (ctx.condition) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'span'); - { T(1); } - e(); + elementStart(0, 'span'); + { text(1); } + elementEnd(); } - t(1, b(ctx.message)); + textBinding(1, bind(ctx.message)); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)).toEqual('
Hello
'); @@ -64,38 +64,38 @@ describe('JS control flow', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { C(1); } - e(); + elementStart(0, 'div'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { if (ctx.condition) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'span'); - { C(1); } - e(); + elementStart(0, 'span'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { if (ctx.condition2) { - let cm2 = V(2); + let cm2 = viewStart(2); { if (cm2) { - T(0, 'Hello'); + text(0, 'Hello'); } } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)).toEqual('
Hello
'); @@ -128,37 +128,37 @@ describe('JS control flow', () => { it('should work with containers with views as parents', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { T(1, 'hello'); } - e(); - C(2); + elementStart(0, 'div'); + { text(1, 'hello'); } + elementEnd(); + container(2); } - cR(2); + containerRefreshStart(2); { if (ctx.condition1) { - let cm0 = V(0); + let cm0 = viewStart(0); { if (cm0) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition2) { - let cm0 = V(0); + let cm0 = viewStart(0); { if (cm0) { - T(0, 'world'); + text(0, 'world'); } } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, {condition1: true, condition2: true})) @@ -173,26 +173,26 @@ describe('JS control flow', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'ul'); - { C(1); } - e(); + elementStart(0, 'ul'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { for (let i = 0; i < ctx.data.length; i++) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'li'); - { T(1); } - e(); + elementStart(0, 'li'); + { text(1); } + elementEnd(); } - t(1, b(ctx.data[i])); + textBinding(1, bind(ctx.data[i])); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)).toEqual(''); @@ -219,36 +219,36 @@ describe('JS control flow', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'ul'); - { C(1); } - e(); + elementStart(0, 'ul'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { for (let i = 0; i < ctx.data[0].length; i++) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'li'); - { C(1); } - e(); + elementStart(0, 'li'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { ctx.data[1].forEach((value: string, ind: number) => { - if (V(2)) { - T(0); + if (viewStart(2)) { + text(0); } - t(0, b(ctx.data[0][i] + value)); - v(); + textBinding(0, bind(ctx.data[0][i] + value)); + viewEnd(); }); } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)).toEqual(''); @@ -274,43 +274,43 @@ describe('JS control flow', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); + elementStart(0, 'div'); { - T(1, 'Before'); - C(2); - T(3, 'After'); + text(1, 'Before'); + container(2); + text(3, 'After'); } - e(); + elementEnd(); } - cR(2); + containerRefreshStart(2); { for (let i = 0; i < ctx.cafes.length; i++) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'h2'); - { T(1); } - e(); - C(2); - T(3, '-'); + elementStart(0, 'h2'); + { text(1); } + elementEnd(); + container(2); + text(3, '-'); } - t(1, b(ctx.cafes[i].name)); - cR(2); + textBinding(1, bind(ctx.cafes[i].name)); + containerRefreshStart(2); { for (let j = 0; j < ctx.cafes[i].entrees.length; j++) { - if (V(1)) { - T(0); + if (viewStart(1)) { + text(0); } - t(0, b(ctx.cafes[i].entrees[j])); - v(); + textBinding(0, bind(ctx.cafes[i].entrees[j])); + viewEnd(); } } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } const ctx = { @@ -354,60 +354,60 @@ describe('JS control flow', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); + elementStart(0, 'div'); { - T(1, 'Before'); - C(2); - T(3, 'After'); + text(1, 'Before'); + container(2); + text(3, 'After'); } - e(); + elementEnd(); } - cR(2); + containerRefreshStart(2); { for (let i = 0; i < ctx.cafes.length; i++) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'h2'); - { T(1); } - e(); - C(2); - T(3, '-'); + elementStart(0, 'h2'); + { text(1); } + elementEnd(); + container(2); + text(3, '-'); } - t(1, b(ctx.cafes[i].name)); - cR(2); + textBinding(1, bind(ctx.cafes[i].name)); + containerRefreshStart(2); { for (let j = 0; j < ctx.cafes[i].entrees.length; j++) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'h3'); - { T(1); } - e(); - C(2); + elementStart(0, 'h3'); + { text(1); } + elementEnd(); + container(2); } - t(1, b(ctx.cafes[i].entrees[j].name)); - cR(2); + textBinding(1, bind(ctx.cafes[i].entrees[j].name)); + containerRefreshStart(2); { for (let k = 0; k < ctx.cafes[i].entrees[j].foods.length; k++) { - if (V(1)) { - T(0); + if (viewStart(1)) { + text(0); } - t(0, b(ctx.cafes[i].entrees[j].foods[k])); - v(); + textBinding(0, bind(ctx.cafes[i].entrees[j].foods[k])); + viewEnd(); } } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } const ctx = { @@ -444,35 +444,35 @@ describe('JS control flow', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { C(1); } - e(); + elementStart(0, 'div'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { if (ctx.condition) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'span'); - { T(1, 'Hello'); } - e(); + elementStart(0, 'span'); + { text(1, 'Hello'); } + elementEnd(); } } - v(); + viewEnd(); } else { - let cm2 = V(2); + let cm2 = viewStart(2); { if (cm2) { - E(0, 'div'); - { T(1, 'Goodbye'); } - e(); + elementStart(0, 'div'); + { text(1, 'Goodbye'); } + elementEnd(); } } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)).toEqual('
Hello
'); @@ -492,28 +492,28 @@ describe('JS for loop', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { C(1); } - e(); + elementStart(0, 'div'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { for (let i = 0; i < ctx.data1.length; i++) { - if (V(1)) { - T(0); + if (viewStart(1)) { + text(0); } - t(0, b(ctx.data1[i])); - v(); + textBinding(0, bind(ctx.data1[i])); + viewEnd(); } for (let j = 0; j < ctx.data2.length; j++) { - if (V(2)) { - T(0); + if (viewStart(2)) { + text(0); } - t(0, b(ctx.data2[j])); - v(); + textBinding(0, bind(ctx.data2[j])); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)).toEqual('
abc12
'); @@ -536,38 +536,38 @@ describe('function calls', () => { function spanify(ctx: {message: string | null}, cm: boolean) { const message = ctx.message; if (cm) { - E(0, 'span'); - { T(1); } - e(); + elementStart(0, 'span'); + { text(1); } + elementEnd(); } - t(1, b(message)); + textBinding(1, bind(message)); } function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); + elementStart(0, 'div'); { - T(1, 'Before'); - C(2); - C(3); - T(4, 'After'); + text(1, 'Before'); + container(2); + container(3); + text(4, 'After'); } - e(); + elementEnd(); } - cR(2); + containerRefreshStart(2); { - let cm0 = V(0); + let cm0 = viewStart(0); { spanify({message: ctx.data[0]}, cm0); } - v(); + viewEnd(); } - cr(); - cR(3); + containerRefreshEnd(); + containerRefreshStart(3); { - let cm0 = V(0); + let cm0 = viewStart(0); { spanify({message: ctx.data[1]}, cm0); } - v(); + viewEnd(); } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, ctx)) diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index 638a514844..1c6d91056b 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/packages/core/test/render3/di_spec.ts @@ -10,8 +10,8 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core'; import {defineComponent} from '../../src/render3/definition'; import {InjectFlags, 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, createTView, enterView, leaveView} from '../../src/render3/instructions'; +import {PublicFeature, defineDirective, inject, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index'; +import {bind, bind2, container, containerRefreshEnd, containerRefreshStart, createLNode, createLView, createTView, elementEnd, elementStart, enterView, leaveView, memory, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions'; import {LInjector} from '../../src/render3/interfaces/injector'; import {LNodeFlags} from '../../src/render3/interfaces/node'; @@ -27,11 +27,11 @@ describe('di', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [Directive]); - { T(2); } - e(); + elementStart(0, 'div', null, [Directive]); + { text(2); } + elementEnd(); } - t(2, b(m(1).value)); + textBinding(2, bind(memory(1).value)); } expect(renderToHtml(Template, {})).toEqual('
Created
'); @@ -63,15 +63,15 @@ describe('di', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [DirectiveA]); + elementStart(0, 'div', null, [DirectiveA]); { - E(2, 'span', null, [DirectiveB, DirectiveC]); - { T(5); } - e(); + elementStart(2, 'span', null, [DirectiveB, DirectiveC]); + { text(5); } + elementEnd(); } - e(); + elementEnd(); } - t(5, b(m(4).value)); + textBinding(5, bind(memory(4).value)); } expect(renderToHtml(Template, {})).toEqual('
AB
'); @@ -105,11 +105,13 @@ describe('di', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [Directive, DirectiveSameInstance]); - { T(3); } - e(); + elementStart(0, 'div', null, [Directive, DirectiveSameInstance]); + { text(3); } + elementEnd(); } - t(3, b2('', m(1).value, '-', m(2).value, '')); + textBinding( + 3, + bind2('', memory(1).value, '-', memory(2).value, '')); } expect(renderToHtml(Template, {})).toEqual('
ElementRef-true
'); @@ -144,10 +146,12 @@ describe('di', () => { function Template(ctx: any, cm: any) { if (cm) { - C(0, [Directive, DirectiveSameInstance], function() {}); - T(3); + container(0, [Directive, DirectiveSameInstance], function() {}); + text(3); } - t(3, b2('', m(1).value, '-', m(2).value, '')); + textBinding( + 3, + bind2('', memory(1).value, '-', memory(2).value, '')); } expect(renderToHtml(Template, {})).toEqual('TemplateRef-true'); @@ -181,11 +185,13 @@ describe('di', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [Directive, DirectiveSameInstance]); - { T(3); } - e(); + elementStart(0, 'div', null, [Directive, DirectiveSameInstance]); + { text(3); } + elementEnd(); } - t(3, b2('', m(1).value, '-', m(2).value, '')); + textBinding( + 3, + bind2('', memory(1).value, '-', memory(2).value, '')); } expect(renderToHtml(Template, {})).toEqual('
ViewContainerRef-true
'); @@ -285,21 +291,24 @@ describe('di', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [ParentDirective]); - { C(2); } - e(); + elementStart(0, 'div', null, [ParentDirective]); + { container(2); } + elementEnd(); } - cR(2); + containerRefreshStart(2); { - if (V(0)) { - E(0, 'span', null, [ChildDirective, Child2Directive]); - { T(3); } - e(); + if (viewStart(0)) { + elementStart(0, 'span', null, [ChildDirective, Child2Directive]); + { text(3); } + elementEnd(); } - t(3, b2('', m(1).value, '-', m(2).value, '')); - v(); + textBinding( + 3, + bind2( + '', memory(1).value, '-', memory(2).value, '')); + viewEnd(); } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, {})).toEqual('
ParentDirective-true
'); diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index dc763478ef..b1ae3d97dc 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/packages/core/test/render3/directive_spec.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {E, b, defineDirective, e, m, p, r} from '../../src/render3/index'; +import {defineDirective} from '../../src/render3/index'; +import {bind, componentRefresh, elementEnd, elementProperty, elementStart, memory} from '../../src/render3/instructions'; import {renderToHtml} from './render_util'; @@ -23,18 +24,19 @@ describe('directive', () => { type: Directive, factory: () => directiveInstance = new Directive, hostBindings: (directiveIndex: number, elementIndex: number) => { - p(elementIndex, 'className', b(m(directiveIndex).klass)); + elementProperty( + elementIndex, 'className', bind(memory(directiveIndex).klass)); } }); } function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span', null, [Directive]); - e(); + elementStart(0, 'span', null, [Directive]); + elementEnd(); } Directive.ngDirectiveDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, {})).toEqual(''); diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index e661001c14..b905a7ea23 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, E, T, V, a, b, cR, cr, defineComponent, defineDirective, e, k, m, p, t, v} from '../../src/render3/index'; +import {defineComponent, defineDirective} from '../../src/render3/index'; +import {bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, memory, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions'; import {renderToHtml} from './render_util'; @@ -16,12 +17,12 @@ describe('exports', () => { /** {{ myInput.value }} */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'input', ['value', 'one']); - e(); - T(1); + elementStart(0, 'input', ['value', 'one']); + elementEnd(); + text(1); } - let myInput = E(0); - t(1, (myInput as any).value); + let myInput = elementStart(0); + textBinding(1, (myInput as any).value); } expect(renderToHtml(Template, {})).toEqual('one'); @@ -32,11 +33,11 @@ describe('exports', () => { /** {{ myComp.name }} */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComponent); - e(); - T(2); + elementStart(0, MyComponent); + elementEnd(); + text(2); } - t(2, m(1).name); + textBinding(2, memory(1).name); } class MyComponent { @@ -77,12 +78,12 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComponent); - e(); - E(2, 'div', null, [MyDir]); - e(); + elementStart(0, MyComponent); + elementEnd(); + elementStart(2, 'div', null, [MyDir]); + elementEnd(); } - p(2, 'myDir', b(m(1))); + elementProperty(2, 'myDir', bind(memory(1))); } renderToHtml(Template, {}); @@ -94,11 +95,11 @@ describe('exports', () => { /**
{{ myDir.name }} */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [SomeDir]); - e(); - T(2); + elementStart(0, 'div', null, [SomeDir]); + elementEnd(); + text(2); } - t(2, m(1).name); + textBinding(2, memory(1).name); } class SomeDir { @@ -114,12 +115,12 @@ describe('exports', () => { /** {{ myInput.value}} */ function Template(ctx: any, cm: boolean) { if (cm) { - T(0); - E(1, 'input', ['value', 'one']); - e(); + text(0); + elementStart(1, 'input', ['value', 'one']); + elementEnd(); } - let myInput = E(1); - t(0, b((myInput as any).value)); + let myInput = elementStart(1); + textBinding(0, bind((myInput as any).value)); } expect(renderToHtml(Template, {})).toEqual('one'); @@ -130,13 +131,13 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - e(); - E(1, 'input', ['value', 'one']); - e(); + elementStart(0, 'div'); + elementEnd(); + elementStart(1, 'input', ['value', 'one']); + elementEnd(); } - let myInput = E(1); - p(0, 'title', b(myInput && (myInput as any).value)); + let myInput = elementStart(1); + elementProperty(0, 'title', bind(myInput && (myInput as any).value)); } expect(renderToHtml(Template, {})).toEqual('
'); @@ -146,13 +147,13 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - e(); - E(1, 'input', ['value', 'one']); - e(); + elementStart(0, 'div'); + elementEnd(); + elementStart(1, 'input', ['value', 'one']); + elementEnd(); } - let myInput = E(1); - a(0, 'aria-label', b(myInput && (myInput as any).value)); + let myInput = elementStart(1); + elementAttribute(0, 'aria-label', bind(myInput && (myInput as any).value)); } expect(renderToHtml(Template, {})).toEqual('
'); @@ -162,13 +163,13 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - e(); - E(1, 'input', ['type', 'checkbox', 'checked', 'true']); - e(); + elementStart(0, 'div'); + elementEnd(); + elementStart(1, 'input', ['type', 'checkbox', 'checked', 'true']); + elementEnd(); } - let myInput = E(1); - k(0, 'red', b(myInput && (myInput as any).checked)); + let myInput = elementStart(1); + elementClass(0, 'red', bind(myInput && (myInput as any).checked)); } expect(renderToHtml(Template, {})) @@ -203,12 +204,12 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', null, [MyDir]); - e(); - E(2, MyComponent); - e(); + elementStart(0, 'div', null, [MyDir]); + elementEnd(); + elementStart(2, MyComponent); + elementEnd(); } - p(0, 'myDir', b(m(3))); + elementProperty(0, 'myDir', bind(memory(3))); } renderToHtml(Template, {}); @@ -220,17 +221,17 @@ describe('exports', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - T(0); - T(1); - E(2, MyComponent); - e(); - E(4, 'input', ['value', 'one']); - e(); + text(0); + text(1); + elementStart(2, MyComponent); + elementEnd(); + elementStart(4, 'input', ['value', 'one']); + elementEnd(); } - let myInput = E(4); - let myComp = m(3) as MyComponent; - t(0, b(myInput && (myInput as any).value)); - t(1, b(myComp && myComp.name)); + let myInput = elementStart(4); + let myComp = memory(3) as MyComponent; + textBinding(0, bind(myInput && (myInput as any).value)); + textBinding(1, bind(myComp && myComp.name)); } let myComponent: MyComponent; @@ -253,27 +254,27 @@ describe('exports', () => { it('should work inside a view container', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { C(1); } - e(); + elementStart(0, 'div'); + { container(1); } + elementEnd(); } - cR(1); + containerRefreshStart(1); { if (ctx.condition) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - T(0); - E(1, 'input', ['value', 'one']); - e(); + text(0); + elementStart(1, 'input', ['value', 'one']); + elementEnd(); } - let myInput = E(1); - t(0, b(myInput && (myInput as any).value)); + let myInput = elementStart(1); + textBinding(0, bind(myInput && (myInput as any).value)); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, { diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 887904b556..fa66ac322a 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, E, NC, P, T, V, a, b, b1, b2, b3, b4, b5, b6, b7, b8, bV, cR, cr, defineComponent, e, k, m, p, pD, r, s, t, v} from '../../src/render3/index'; -import {NO_CHANGE} from '../../src/render3/instructions'; +import {defineComponent} from '../../src/render3/index'; +import {NO_CHANGE, bind, bind1, bind2, bind3, bind4, bind5, bind6, bind7, bind8, bindV, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, elementStyle, memory, projection, projectionDef, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions'; import {containerEl, renderToHtml} from './render_util'; @@ -20,9 +20,9 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span', ['title', 'Hello']); - { T(1, 'Greetings'); } - e(); + elementStart(0, 'span', ['title', 'Hello']); + { text(1, 'Greetings'); } + elementEnd(); } } }); @@ -33,11 +33,11 @@ describe('render3 integration test', () => { function Template(name: string, cm: boolean) { if (cm) { - E(0, 'h1'); - { T(1); } - e(); + elementStart(0, 'h1'); + { text(1); } + elementEnd(); } - t(1, b1('Hello, ', name, '!')); + textBinding(1, bind1('Hello, ', name, '!')); } }); }); @@ -46,9 +46,9 @@ describe('render3 integration test', () => { it('should render "undefined" as "" when used with `bind()`', () => { function Template(name: string, cm: boolean) { if (cm) { - T(0); + text(0); } - t(0, b(name)); + textBinding(0, bind(name)); } expect(renderToHtml(Template, 'benoit')).toEqual('benoit'); @@ -58,9 +58,9 @@ describe('render3 integration test', () => { it('should render "null" as "" when used with `bind()`', () => { function Template(name: string, cm: boolean) { if (cm) { - T(0); + text(0); } - t(0, b(name)); + textBinding(0, bind(name)); } expect(renderToHtml(Template, 'benoit')).toEqual('benoit'); @@ -70,9 +70,9 @@ describe('render3 integration test', () => { it('should support creation-time values in text nodes', () => { function Template(value: string, cm: boolean) { if (cm) { - T(0); + text(0); } - t(0, cm ? value : NO_CHANGE); + textBinding(0, cm ? value : NO_CHANGE); } expect(renderToHtml(Template, 'once')).toEqual('once'); expect(renderToHtml(Template, 'twice')).toEqual('once'); @@ -81,27 +81,32 @@ describe('render3 integration test', () => { it('should support creation-time bindings in interpolations', () => { function Template(v: string, cm: boolean) { if (cm) { - T(0); - T(1); - T(2); - T(3); - T(4); - T(5); - T(6); - T(7); - T(8); + text(0); + text(1); + text(2); + text(3); + text(4); + text(5); + text(6); + text(7); + text(8); } - t(0, b1('', cm ? v : NC, '|')); - t(1, b2('', v, '_', cm ? v : NC, '|')); - t(2, b3('', v, '_', v, '_', cm ? v : NC, '|')); - t(3, b4('', v, '_', v, '_', v, '_', cm ? v : NC, '|')); - t(4, b5('', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); - t(5, b6('', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); - t(6, b7('', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); - t(7, b8('', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '|')); - t(8, bV([ - '', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NC, '' - ])); + textBinding(0, bind1('', cm ? v : NO_CHANGE, '|')); + textBinding(1, bind2('', v, '_', cm ? v : NO_CHANGE, '|')); + textBinding(2, bind3('', v, '_', v, '_', cm ? v : NO_CHANGE, '|')); + textBinding(3, bind4('', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|')); + textBinding(4, bind5('', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|')); + textBinding(5, bind6('', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|')); + textBinding( + 6, bind7('', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, '|')); + textBinding( + 7, bind8( + '', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', cm ? v : NO_CHANGE, + '|')); + textBinding(8, bindV([ + '', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', v, '_', + cm ? v : NO_CHANGE, '' + ])); } expect(renderToHtml(Template, 'a')) .toEqual( @@ -117,11 +122,11 @@ describe('render3 integration test', () => { it('should handle a flat list of static/bound text nodes', () => { function Template(name: string, cm: boolean) { if (cm) { - T(0, 'Hello '); - T(1); - T(2, '!'); + text(0, 'Hello '); + text(1); + text(2, '!'); } - t(1, b(name)); + textBinding(1, bind(name)); } expect(renderToHtml(Template, 'world')).toEqual('Hello world!'); expect(renderToHtml(Template, 'monde')).toEqual('Hello monde!'); @@ -130,15 +135,15 @@ describe('render3 integration test', () => { it('should handle a list of static/bound text nodes as element children', () => { function Template(name: string, cm: boolean) { if (cm) { - E(0, 'b'); + elementStart(0, 'b'); { - T(1, 'Hello '); - T(2); - T(3, '!'); + text(1, 'Hello '); + text(2); + text(3, '!'); } - e(); + elementEnd(); } - t(2, b(name)); + textBinding(2, bind(name)); } expect(renderToHtml(Template, 'world')).toEqual('Hello world!'); expect(renderToHtml(Template, 'mundo')).toEqual('Hello mundo!'); @@ -147,23 +152,23 @@ describe('render3 integration test', () => { it('should render/update text node as a child of a deep list of elements', () => { function Template(name: string, cm: boolean) { if (cm) { - E(0, 'b'); + elementStart(0, 'b'); { - E(1, 'b'); + elementStart(1, 'b'); { - E(2, 'b'); + elementStart(2, 'b'); { - E(3, 'b'); - { T(4); } - e(); + elementStart(3, 'b'); + { text(4); } + elementEnd(); } - e(); + elementEnd(); } - e(); + elementEnd(); } - e(); + elementEnd(); } - t(4, b1('Hello ', name, '!')); + textBinding(4, bind1('Hello ', name, '!')); } expect(renderToHtml(Template, 'world')).toEqual('Hello world!'); expect(renderToHtml(Template, 'mundo')).toEqual('Hello mundo!'); @@ -172,17 +177,17 @@ describe('render3 integration test', () => { it('should update 2 sibling elements', () => { function Template(id: any, cm: boolean) { if (cm) { - E(0, 'b'); + elementStart(0, 'b'); { - E(1, 'span'); - e(); - E(2, 'span', ['class', 'foo']); + elementStart(1, 'span'); + elementEnd(); + elementStart(2, 'span', ['class', 'foo']); {} - e(); + elementEnd(); } - e(); + elementEnd(); } - a(2, 'id', b(id)); + elementAttribute(2, 'id', bind(id)); } expect(renderToHtml(Template, 'foo')) .toEqual(''); @@ -193,10 +198,10 @@ describe('render3 integration test', () => { it('should handle sibling text node after element with child text node', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'p'); - { T(1, 'hello'); } - e(); - T(2, 'world'); + elementStart(0, 'p'); + { text(1, 'hello'); } + elementEnd(); + text(2, 'world'); } } @@ -214,14 +219,14 @@ describe('render3 integration test', () => { tag: 'todo', template: function TodoTemplate(ctx: any, cm: boolean) { if (cm) { - E(0, 'p'); + elementStart(0, 'p'); { - T(1, 'Todo'); - T(2); + text(1, 'Todo'); + text(2); } - e(); + elementEnd(); } - t(2, b(ctx.value)); + textBinding(2, bind(ctx.value)); }, factory: () => new TodoComponent }); @@ -230,11 +235,11 @@ describe('render3 integration test', () => { it('should support a basic component template', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponent); - e(); + elementStart(0, TodoComponent); + elementEnd(); } TodoComponent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, null)).toEqual('

Todo one

'); @@ -243,12 +248,12 @@ describe('render3 integration test', () => { it('should support a component template with sibling', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponent); - e(); - T(2, 'two'); + elementStart(0, TodoComponent); + elementEnd(); + text(2, 'two'); } TodoComponent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, null)).toEqual('

Todo one

two'); }); @@ -260,15 +265,15 @@ describe('render3 integration test', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponent); - e(); - E(2, TodoComponent); - e(); + elementStart(0, TodoComponent); + elementEnd(); + elementStart(2, TodoComponent); + elementEnd(); } TodoComponent.ngComponentDef.h(1, 0); TodoComponent.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } expect(renderToHtml(Template, null)) .toEqual('

Todo one

Todo one

'); @@ -285,25 +290,27 @@ describe('render3 integration test', () => { template: function TodoComponentHostBindingTemplate( ctx: TodoComponentHostBinding, cm: boolean) { if (cm) { - T(0); + text(0); } - t(0, b(ctx.title)); + textBinding(0, bind(ctx.title)); }, factory: () => cmptInstance = new TodoComponentHostBinding, hostBindings: function(directiveIndex: number, elementIndex: number): void { // host bindings - p(elementIndex, 'title', b(m(directiveIndex).title)); + elementProperty( + elementIndex, 'title', + bind(memory(directiveIndex).title)); } }); } function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponentHostBinding); - e(); + elementStart(0, TodoComponentHostBinding); + elementEnd(); } TodoComponentHostBinding.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, {})).toEqual('one'); @@ -320,11 +327,11 @@ describe('render3 integration test', () => { tag: 'comp', template: function MyCompTemplate(ctx: any, cm: boolean) { if (cm) { - E(0, 'p'); - { T(1); } - e(); + elementStart(0, 'p'); + { text(1); } + elementEnd(); } - t(1, b(ctx.name)); + textBinding(1, bind(ctx.name)); }, factory: () => new MyComp }); @@ -332,11 +339,11 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComp); - e(); + elementStart(0, MyComp); + elementEnd(); } MyComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, null)).toEqual('

Bess

'); @@ -355,20 +362,20 @@ describe('render3 integration test', () => { tag: 'comp', template: function MyCompTemplate(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, 'div'); - { T(1, 'text'); } - e(); + if (viewStart(0)) { + elementStart(0, 'div'); + { text(1, 'text'); } + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); }, factory: () => new MyComp, inputs: {condition: 'condition'} @@ -378,12 +385,12 @@ describe('render3 integration test', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComp); - e(); + elementStart(0, MyComp); + elementEnd(); } - p(0, 'condition', b(ctx.condition)); + elementProperty(0, 'condition', bind(ctx.condition)); MyComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, {condition: true})).toEqual('
text
'); @@ -408,50 +415,50 @@ describe('render3 integration test', () => { function showLabel(ctx: {label: string | undefined}, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.label != null) { - if (V(0)) { - T(0); + if (viewStart(0)) { + text(0); } - t(0, b(ctx.label)); - v(); + textBinding(0, bind(ctx.label)); + viewEnd(); } } - cr(); + containerRefreshEnd(); } function showTree(ctx: {tree: Tree}, cm: boolean) { if (cm) { - C(0); - C(1); - C(2); + container(0); + container(1); + container(2); } - cR(0); + containerRefreshStart(0); { - const cm0 = V(0); + const cm0 = viewStart(0); { showLabel({label: ctx.tree.beforeLabel}, cm0); } - v(); + viewEnd(); } - cr(); - cR(1); + containerRefreshEnd(); + containerRefreshStart(1); { for (let subTree of ctx.tree.subTrees || []) { - const cm0 = V(0); + const cm0 = viewStart(0); { showTree({tree: subTree}, cm0); } - v(); + viewEnd(); } } - cr(); - cR(2); + containerRefreshEnd(); + containerRefreshStart(2); { - const cm0 = V(0); + const cm0 = viewStart(0); { showLabel({label: ctx.tree.afterLabel}, cm0); } - v(); + viewEnd(); } - cr(); + containerRefreshEnd(); } class ChildComponent { @@ -463,25 +470,25 @@ describe('render3 integration test', () => { template: function ChildComponentTemplate( ctx: {beforeTree: Tree, afterTree: Tree}, cm: boolean) { if (cm) { - pD(0); - C(1); - P(2, 0); - C(3); + projectionDef(0); + container(1); + projection(2, 0); + container(3); } - cR(1); + containerRefreshStart(1); { - const cm0 = V(0); + const cm0 = viewStart(0); { showTree({tree: ctx.beforeTree}, cm0); } - v(); + viewEnd(); } - cr(); - cR(3); + containerRefreshEnd(); + containerRefreshStart(3); { - const cm0 = V(0); + const cm0 = viewStart(0); { showTree({tree: ctx.afterTree}, cm0); } - v(); + viewEnd(); } - cr(); + containerRefreshEnd(); }, factory: () => new ChildComponent, inputs: {beforeTree: 'beforeTree', afterTree: 'afterTree'} @@ -490,21 +497,21 @@ describe('render3 integration test', () => { function parentTemplate(ctx: ParentCtx, cm: boolean) { if (cm) { - E(0, ChildComponent); - { C(2); } - e(); + elementStart(0, ChildComponent); + { container(2); } + elementEnd(); } - p(0, 'beforeTree', b(ctx.beforeTree)); - p(0, 'afterTree', b(ctx.afterTree)); - cR(2); + elementProperty(0, 'beforeTree', bind(ctx.beforeTree)); + elementProperty(0, 'afterTree', bind(ctx.afterTree)); + containerRefreshStart(2); { - const cm0 = V(0); + const cm0 = viewStart(0); { showTree({tree: ctx.projectedTree}, cm0); } - v(); + viewEnd(); } - cr(); + containerRefreshEnd(); ChildComponent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } it('should work with a tree', () => { @@ -537,10 +544,10 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - a(0, 'title', b(ctx.title)); + elementAttribute(0, 'title', bind(ctx.title)); } // initial binding @@ -560,10 +567,10 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - a(0, 'title', b(ctx.title)); + elementAttribute(0, 'title', bind(ctx.title)); } expect(renderToHtml(Template, ctx)).toEqual(''); @@ -575,22 +582,29 @@ describe('render3 integration test', () => { it('should update bindings', () => { function Template(c: any, cm: boolean) { if (cm) { - E(0, 'b'); - e(); + elementStart(0, 'b'); + elementEnd(); } - a(0, 'a', bV(c)); - a(0, 'a0', b(c[1])); - a(0, 'a1', b1(c[0], c[1], c[16])); - a(0, 'a2', b2(c[0], c[1], c[2], c[3], c[16])); - a(0, 'a3', b3(c[0], c[1], c[2], c[3], c[4], c[5], c[16])); - a(0, 'a4', b4(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[16])); - a(0, 'a5', b5(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[16])); - a(0, 'a6', - b6(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], c[16])); - a(0, 'a7', b7(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], - c[12], c[13], c[16])); - a(0, 'a8', b8(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], - c[12], c[13], c[14], c[15], c[16])); + elementAttribute(0, 'a', bindV(c)); + elementAttribute(0, 'a0', bind(c[1])); + elementAttribute(0, 'a1', bind1(c[0], c[1], c[16])); + elementAttribute(0, 'a2', bind2(c[0], c[1], c[2], c[3], c[16])); + elementAttribute(0, 'a3', bind3(c[0], c[1], c[2], c[3], c[4], c[5], c[16])); + elementAttribute(0, 'a4', bind4(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[16])); + elementAttribute( + 0, 'a5', bind5(c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[16])); + elementAttribute( + 0, 'a6', + bind6( + c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], c[16])); + elementAttribute( + 0, 'a7', bind7( + c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], + c[12], c[13], c[16])); + elementAttribute( + 0, 'a8', bind8( + c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7], c[8], c[9], c[10], c[11], + c[12], c[13], c[14], c[15], c[16])); } let args = ['(', 0, 'a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5, 'f', 6, 'g', 7, ')']; expect(renderToHtml(Template, args)) @@ -611,27 +625,27 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - C(1); - e(); + elementStart(0, 'span'); + container(1); + elementEnd(); } - a(0, 'title', b(ctx.title)); - cR(1); + elementAttribute(0, 'title', bind(ctx.title)); + containerRefreshStart(1); { if (true) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - E(0, 'b'); + elementStart(0, 'b'); {} - e(); + elementEnd(); } - a(0, 'title', b(ctx.title)); + elementAttribute(0, 'title', bind(ctx.title)); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } // initial binding @@ -653,10 +667,10 @@ describe('render3 integration test', () => { it('should support binding to styles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - s(0, 'border-color', b(ctx)); + elementStyle(0, 'border-color', bind(ctx)); } expect(renderToHtml(Template, 'red')).toEqual(''); @@ -668,10 +682,10 @@ describe('render3 integration test', () => { it('should support binding to styles with suffix', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - s(0, 'font-size', b(ctx), 'px'); + elementStyle(0, 'font-size', bind(ctx), 'px'); } expect(renderToHtml(Template, '100')).toEqual(''); @@ -685,10 +699,10 @@ describe('render3 integration test', () => { it('should support CSS class toggle', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - k(0, 'active', b(ctx)); + elementClass(0, 'active', bind(ctx)); } expect(renderToHtml(Template, true)).toEqual(''); @@ -706,10 +720,10 @@ describe('render3 integration test', () => { it('should work correctly with existing static classes', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span', ['class', 'existing']); - e(); + elementStart(0, 'span', ['class', 'existing']); + elementEnd(); } - k(0, 'active', b(ctx)); + elementClass(0, 'active', bind(ctx)); } expect(renderToHtml(Template, true)).toEqual(''); @@ -728,20 +742,20 @@ describe('render3 integration test', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, 'div'); + if (viewStart(0)) { + elementStart(0, 'div'); {} - e(); + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect((Template as any).ngPrivateData).toBeUndefined(); diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index ee8448a76c..eb74f5e06e 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/packages/core/test/render3/lifecycle_spec.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, ComponentTemplate, E, L, P, T, V, b, cR, cr, defineComponent, defineDirective, e, m, p, pD, r, v} from '../../src/render3/index'; +import {ComponentTemplate, defineComponent, defineDirective} from '../../src/render3/index'; +import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, listener, memory, projection, projectionDef, text, viewEnd, viewStart} from '../../src/render3/instructions'; import {containerEl, renderToHtml} from './render_util'; @@ -15,12 +16,12 @@ describe('lifecycles', () => { function getParentTemplate(type: any) { return (ctx: any, cm: boolean) => { if (cm) { - E(0, type); - e(); + elementStart(0, type); + elementEnd(); } - p(0, 'val', b(ctx.val)); + elementProperty(0, 'val', bind(ctx.val)); type.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }; } @@ -31,16 +32,16 @@ describe('lifecycles', () => { let Comp = createOnInitComponent('comp', (ctx: any, cm: boolean) => { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); let Parent = createOnInitComponent('parent', getParentTemplate(Comp)); let ProjectedComp = createOnInitComponent('projected', (ctx: any, cm: boolean) => { if (cm) { - T(0, 'content'); + text(0, 'content'); } }); @@ -63,12 +64,12 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', b(ctx.val)); + elementProperty(0, 'val', bind(ctx.val)); Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {val: '1'}); @@ -86,11 +87,11 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); + elementStart(0, Parent); + elementEnd(); } Parent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -107,17 +108,17 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); - E(2, Parent); - e(); + elementStart(0, Parent); + elementEnd(); + elementStart(2, Parent); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 2); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); @@ -134,21 +135,21 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -169,14 +170,14 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - { E(2, ProjectedComp); } - e(); + elementStart(0, Comp); + { elementStart(2, ProjectedComp); } + elementEnd(); } Comp.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); @@ -194,25 +195,25 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - { E(2, ProjectedComp); } - e(); - E(4, Comp); - { E(6, ProjectedComp); } - e(); + elementStart(0, Comp); + { elementStart(2, ProjectedComp); } + elementEnd(); + elementStart(4, Comp); + { elementStart(6, ProjectedComp); } + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 1); - p(4, 'val', 2); - p(6, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 1); + elementProperty(4, 'val', 2); + elementProperty(6, 'val', 2); Comp.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); Comp.ngComponentDef.h(5, 4); ProjectedComp.ngComponentDef.h(7, 6); - r(1, 0); - r(3, 2); - r(5, 4); - r(7, 6); + componentRefresh(1, 0); + componentRefresh(3, 2); + componentRefresh(5, 4); + componentRefresh(7, 6); } renderToHtml(Template, {}); @@ -228,11 +229,11 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp, null, [Directive]); - e(); + elementStart(0, Comp, null, [Directive]); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -254,32 +255,32 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); - C(2); - E(3, Comp); - e(); + elementStart(0, Comp); + elementEnd(); + container(2); + elementStart(3, Comp); + elementEnd(); } - p(0, 'val', 1); - p(3, 'val', 5); + elementProperty(0, 'val', 1); + elementProperty(3, 'val', 5); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { for (let j = 2; j < 5; j++) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', j); + elementProperty(0, 'val', j); Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); } renderToHtml(Template, {}); @@ -300,32 +301,32 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); - C(2); - E(3, Parent); - e(); + elementStart(0, Parent); + elementEnd(); + container(2); + elementStart(3, Parent); + elementEnd(); } - p(0, 'val', 1); - p(3, 'val', 5); + elementProperty(0, 'val', 1); + elementProperty(3, 'val', 5); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { for (let j = 2; j < 5; j++) { - if (V(0)) { - E(0, Parent); - e(); + if (viewStart(0)) { + elementStart(0, Parent); + elementEnd(); } - p(0, 'val', j); + elementProperty(0, 'val', j); Parent.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); } renderToHtml(Template, {}); @@ -371,11 +372,11 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -393,11 +394,11 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); + elementStart(0, Parent); + elementEnd(); } Parent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -408,11 +409,11 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -435,27 +436,27 @@ describe('lifecycles', () => { let Comp = createAfterContentInitComp('comp', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - P(1, 0); + projectionDef(0); + projection(1, 0); } }); let Parent = createAfterContentInitComp('parent', function(ctx: any, cm: boolean) { if (cm) { - pD(0); - E(1, Comp); - { P(3, 0); } - e(); + projectionDef(0); + elementStart(1, Comp); + { projection(3, 0); } + elementEnd(); } - p(1, 'val', b(ctx.val)); + elementProperty(1, 'val', bind(ctx.val)); Comp.ngComponentDef.h(2, 1); - r(2, 1); + componentRefresh(2, 1); }); let ProjectedComp = createAfterContentInitComp('projected', (ctx: any, cm: boolean) => { if (cm) { - pD(0); - P(1, 0); + projectionDef(0); + projection(1, 0); } }); @@ -482,12 +483,12 @@ describe('lifecycles', () => { /** content */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - { T(2, 'content'); } - e(); + elementStart(0, Comp); + { text(2, 'content'); } + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -505,22 +506,22 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - { T(2, 'content'); } - e(); + if (viewStart(0)) { + elementStart(0, Comp); + { text(2, 'content'); } + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -542,11 +543,11 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp, null, [Directive]); - e(); + elementStart(0, Comp, null, [Directive]); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -565,12 +566,12 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - { T(2, 'content'); } - e(); + elementStart(0, Parent); + { text(2, 'content'); } + elementEnd(); } Parent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -586,19 +587,19 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - { T(2, 'content'); } - e(); - E(3, Parent); - { T(5, 'content'); } - e(); + elementStart(0, Parent); + { text(2, 'content'); } + elementEnd(); + elementStart(3, Parent); + { text(5, 'content'); } + elementEnd(); } - p(0, 'val', 1); - p(3, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(3, 'val', 2); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(4, 3); - r(1, 0); - r(4, 3); + componentRefresh(1, 0); + componentRefresh(4, 3); } renderToHtml(Template, {}); @@ -618,18 +619,18 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); + elementStart(0, Parent); { - E(2, ProjectedComp); - { T(4, 'content'); } - e(); + elementStart(2, ProjectedComp); + { text(4, 'content'); } + elementEnd(); } - e(); + elementEnd(); } Parent.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); @@ -652,33 +653,33 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); + elementStart(0, Parent); { - E(2, ProjectedComp); - { T(4, 'content'); } - e(); + elementStart(2, ProjectedComp); + { text(4, 'content'); } + elementEnd(); } - e(); - E(5, Parent); + elementEnd(); + elementStart(5, Parent); { - E(7, ProjectedComp); - { T(9, 'content'); } - e(); + elementStart(7, ProjectedComp); + { text(9, 'content'); } + elementEnd(); } - e(); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 1); - p(5, 'val', 2); - p(7, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 1); + elementProperty(5, 'val', 2); + elementProperty(7, 'val', 2); Parent.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); Parent.ngComponentDef.h(6, 5); ProjectedComp.ngComponentDef.h(8, 7); - r(1, 0); - r(3, 2); - r(6, 5); - r(8, 7); + componentRefresh(1, 0); + componentRefresh(3, 2); + componentRefresh(6, 5); + componentRefresh(8, 7); } renderToHtml(Template, {}); @@ -695,35 +696,35 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - { T(2, 'content'); } - e(); - C(3); - E(4, Comp); - { T(6, 'content'); } - e(); + elementStart(0, Comp); + { text(2, 'content'); } + elementEnd(); + container(3); + elementStart(4, Comp); + { text(6, 'content'); } + elementEnd(); } - p(0, 'val', 1); - p(4, 'val', 4); + elementProperty(0, 'val', 1); + elementProperty(4, 'val', 4); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(5, 4); - cR(3); + containerRefreshStart(3); { for (let i = 2; i < 4; i++) { - if (V(0)) { - E(0, Comp); - { T(2, 'content'); } - e(); + if (viewStart(0)) { + elementStart(0, Comp); + { text(2, 'content'); } + elementEnd(); } - p(0, 'val', i); + elementProperty(0, 'val', i); Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(5, 4); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(5, 4); } renderToHtml(Template, {}); @@ -732,35 +733,35 @@ describe('lifecycles', () => { function ForLoopWithChildrenTemplate(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - { T(2, 'content'); } - e(); - C(3); - E(4, Parent); - { T(6, 'content'); } - e(); + elementStart(0, Parent); + { text(2, 'content'); } + elementEnd(); + container(3); + elementStart(4, Parent); + { text(6, 'content'); } + elementEnd(); } - p(0, 'val', 1); - p(4, 'val', 4); + elementProperty(0, 'val', 1); + elementProperty(4, 'val', 4); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(5, 4); - cR(3); + containerRefreshStart(3); { for (let i = 2; i < 4; i++) { - if (V(0)) { - E(0, Parent); - { T(2, 'content'); } - e(); + if (viewStart(0)) { + elementStart(0, Parent); + { text(2, 'content'); } + elementEnd(); } - p(0, 'val', i); + elementProperty(0, 'val', i); Parent.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(5, 4); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(5, 4); } it('should be called in correct order in a for loop with children', () => { @@ -783,12 +784,12 @@ describe('lifecycles', () => { /** content */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - { T(2, 'content'); } - e(); + elementStart(0, Comp); + { text(2, 'content'); } + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -813,17 +814,17 @@ describe('lifecycles', () => { let Comp = createAfterViewInitComponent('comp', (ctx: any, cm: boolean) => { if (cm) { - pD(0); - E(1, 'div'); - { P(2, 0); } - e(); + projectionDef(0); + elementStart(1, 'div'); + { projection(2, 0); } + elementEnd(); } }); let Parent = createAfterViewInitComponent('parent', getParentTemplate(Comp)); let ProjectedComp = createAfterViewInitComponent('projected', (ctx: any, cm: boolean) => { if (cm) { - T(0, 'content'); + text(0, 'content'); } }); @@ -850,11 +851,11 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -872,21 +873,21 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -908,11 +909,11 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); + elementStart(0, Parent); + elementEnd(); } Parent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -929,17 +930,17 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); - E(2, Parent); - e(); + elementStart(0, Parent); + elementEnd(); + elementStart(2, Parent); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 2); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); expect(events).toEqual(['comp1', 'comp2', 'parent1', 'parent2']); @@ -954,17 +955,17 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); + elementStart(0, Comp); { - E(2, ProjectedComp); - e(); + elementStart(2, ProjectedComp); + elementEnd(); } - e(); + elementEnd(); } Comp.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); @@ -982,31 +983,31 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); + elementStart(0, Comp); { - E(2, ProjectedComp); - e(); + elementStart(2, ProjectedComp); + elementEnd(); } - e(); - E(4, Comp); + elementEnd(); + elementStart(4, Comp); { - E(6, ProjectedComp); - e(); + elementStart(6, ProjectedComp); + elementEnd(); } - e(); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 1); - p(4, 'val', 2); - p(6, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 1); + elementProperty(4, 'val', 2); + elementProperty(6, 'val', 2); Comp.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); Comp.ngComponentDef.h(5, 4); ProjectedComp.ngComponentDef.h(7, 6); - r(1, 0); - r(3, 2); - r(5, 4); - r(7, 6); + componentRefresh(1, 0); + componentRefresh(3, 2); + componentRefresh(5, 4); + componentRefresh(7, 6); } renderToHtml(Template, {}); @@ -1021,19 +1022,19 @@ describe('lifecycles', () => { */ const ParentComp = createAfterViewInitComponent('parent', (ctx: any, cm: boolean) => { if (cm) { - E(0, Comp); + elementStart(0, Comp); { - E(2, ProjectedComp); - e(); + elementStart(2, ProjectedComp); + elementEnd(); } - e(); + elementEnd(); } - p(0, 'val', b(ctx.val)); - p(2, 'val', b(ctx.val)); + elementProperty(0, 'val', bind(ctx.val)); + elementProperty(2, 'val', bind(ctx.val)); Comp.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); }); /** @@ -1042,17 +1043,17 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ParentComp); - e(); - E(2, ParentComp); - e(); + elementStart(0, ParentComp); + elementEnd(); + elementStart(2, ParentComp); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 2); ParentComp.ngComponentDef.h(1, 0); ParentComp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); @@ -1069,32 +1070,32 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); - C(2); - E(3, Comp); - e(); + elementStart(0, Comp); + elementEnd(); + container(2); + elementStart(3, Comp); + elementEnd(); } - p(0, 'val', 1); - p(3, 'val', 4); + elementProperty(0, 'val', 1); + elementProperty(3, 'val', 4); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { for (let i = 2; i < 4; i++) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', i); + elementProperty(0, 'val', i); Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); } renderToHtml(Template, {}); @@ -1112,32 +1113,32 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); - C(2); - E(3, Parent); - e(); + elementStart(0, Parent); + elementEnd(); + container(2); + elementStart(3, Parent); + elementEnd(); } - p(0, 'val', 1); - p(3, 'val', 4); + elementProperty(0, 'val', 1); + elementProperty(3, 'val', 4); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { for (let i = 2; i < 4; i++) { - if (V(0)) { - E(0, Parent); - e(); + if (viewStart(0)) { + elementStart(0, Parent); + elementEnd(); } - p(0, 'val', i); + elementProperty(0, 'val', i); Parent.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); } renderToHtml(Template, {}); @@ -1153,11 +1154,11 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {}); @@ -1171,12 +1172,12 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', b(ctx.myVal)); + elementProperty(0, 'val', bind(ctx.myVal)); Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } renderToHtml(Template, {myVal: 5}); @@ -1196,32 +1197,32 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); - C(2); - E(3, Parent); - e(); + elementStart(0, Parent); + elementEnd(); + container(2); + elementStart(3, Parent); + elementEnd(); } - p(0, 'val', 1); - p(3, 'val', 4); + elementProperty(0, 'val', 1); + elementProperty(3, 'val', 4); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { for (let i = 2; i < 4; i++) { - if (V(0)) { - E(0, Parent); - e(); + if (viewStart(0)) { + elementStart(0, Parent); + elementEnd(); } - p(0, 'val', i); + elementProperty(0, 'val', i); Parent.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); } renderToHtml(Template, {}); @@ -1244,8 +1245,8 @@ describe('lifecycles', () => { let Comp = createOnDestroyComponent('comp', (ctx: any, cm: boolean) => { if (cm) { - pD(0); - P(1, 0); + projectionDef(0); + projection(1, 0); } }); let Parent = createOnDestroyComponent('parent', getParentTemplate(Comp)); @@ -1274,21 +1275,21 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -1306,27 +1307,27 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - e(); - E(2, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); + elementStart(2, Comp); + elementEnd(); } - p(0, 'val', b('1')); - p(2, 'val', b('2')); + elementProperty(0, 'val', bind('1')); + elementProperty(2, 'val', bind('2')); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); - v(); + componentRefresh(1, 0); + componentRefresh(3, 2); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -1345,21 +1346,21 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Parent); - e(); + if (viewStart(0)) { + elementStart(0, Parent); + elementEnd(); } Parent.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -1379,30 +1380,30 @@ describe('lifecycles', () => { let Grandparent = createOnDestroyComponent('grandparent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); + elementStart(0, Parent); + elementEnd(); } Parent.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Grandparent); - e(); + if (viewStart(0)) { + elementStart(0, Grandparent); + elementEnd(); } Grandparent.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true}); @@ -1425,41 +1426,41 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.showing) { - if (V(0)) { - E(0, Comp); + if (viewStart(0)) { + elementStart(0, Comp); { - E(2, ProjectedComp); - e(); + elementStart(2, ProjectedComp); + elementEnd(); } - e(); - E(4, Comp); + elementEnd(); + elementStart(4, Comp); { - E(6, ProjectedComp); - e(); + elementStart(6, ProjectedComp); + elementEnd(); } - e(); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 1); - p(4, 'val', 2); - p(6, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 1); + elementProperty(4, 'val', 2); + elementProperty(6, 'val', 2); Comp.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); Comp.ngComponentDef.h(5, 4); ProjectedComp.ngComponentDef.h(7, 6); - r(1, 0); - r(3, 2); - r(5, 4); - r(7, 6); - v(); + componentRefresh(1, 0); + componentRefresh(3, 2); + componentRefresh(5, 4); + componentRefresh(7, 6); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {showing: true}); @@ -1482,42 +1483,42 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - e(); - C(2); - E(3, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); + container(2); + elementStart(3, Comp); + elementEnd(); } - p(0, 'val', b('1')); - p(3, 'val', b('3')); + elementProperty(0, 'val', bind('1')); + elementProperty(3, 'val', bind('3')); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { if (ctx.condition2) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', b('2')); + elementProperty(0, 'val', bind('2')); Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); - v(); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); + viewEnd(); } } - cr(); + containerRefreshEnd(); } renderToHtml(Template, {condition: true, condition2: true}); @@ -1558,42 +1559,42 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, Comp); - e(); - C(2); - E(3, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); + container(2); + elementStart(3, Comp); + elementEnd(); } - p(0, 'val', b('1')); - p(3, 'val', b('5')); + elementProperty(0, 'val', bind('1')); + elementProperty(3, 'val', bind('5')); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(4, 3); - cR(2); + containerRefreshStart(2); { for (let j = 2; j < ctx.len; j++) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', b(j)); + elementProperty(0, 'val', bind(j)); Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - r(1, 0); - r(4, 3); - v(); + containerRefreshEnd(); + componentRefresh(1, 0); + componentRefresh(4, 3); + viewEnd(); } } - cr(); + containerRefreshEnd(); } /** @@ -1636,33 +1637,33 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, 'button'); + if (viewStart(0)) { + elementStart(0, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(1, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(1, 'Click me'); } - e(); - E(2, Comp); - e(); - E(4, 'button'); + elementEnd(); + elementStart(2, Comp); + elementEnd(); + elementStart(4, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(5, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(5, 'Click me'); } - e(); + elementEnd(); } Comp.ngComponentDef.h(3, 2); - r(3, 2); - v(); + componentRefresh(3, 2); + viewEnd(); } } - cr(); + containerRefreshEnd(); } class App { @@ -1728,17 +1729,17 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); - E(2, Comp); - e(); + elementStart(0, Comp); + elementEnd(); + elementStart(2, Comp); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 2); Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); @@ -1762,12 +1763,12 @@ describe('lifecycles', () => { /** */ const Parent = createAllHooksComponent('parent', (ctx: any, cm: boolean) => { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } - p(0, 'val', b(ctx.val)); + elementProperty(0, 'val', bind(ctx.val)); Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); }); /** @@ -1776,17 +1777,17 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent); - e(); - E(2, Parent); - e(); + elementStart(0, Parent); + elementEnd(); + elementStart(2, Parent); + elementEnd(); } - p(0, 'val', 1); - p(2, 'val', 2); + elementProperty(0, 'val', 1); + elementProperty(2, 'val', 2); Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(3, 2); - r(1, 0); - r(3, 2); + componentRefresh(1, 0); + componentRefresh(3, 2); } renderToHtml(Template, {}); diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index c7d8f55e86..40c81a8187 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {C, E, L, T, V, cR, cr, defineComponent, e, r, v} from '../../src/render3/index'; +import {defineComponent} from '../../src/render3/index'; +import {componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, listener, text, viewEnd, viewStart} from '../../src/render3/instructions'; import {containerEl, renderComponent, renderToHtml} from './render_util'; @@ -26,12 +27,12 @@ describe('event listeners', () => { /** */ template: function CompTemplate(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); + elementStart(0, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(1, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(1, 'Click me'); } - e(); + elementEnd(); } }, factory: () => { @@ -59,12 +60,12 @@ describe('event listeners', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); + elementStart(0, 'button'); { - L('click', () => ctx.showing = !ctx.showing); - T(1, 'Click me'); + listener('click', () => ctx.showing = !ctx.showing); + text(1, 'Click me'); } - e(); + elementEnd(); } } @@ -88,23 +89,23 @@ describe('event listeners', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.showing) { - if (V(1)) { - E(0, 'button'); + if (viewStart(1)) { + elementStart(0, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(1, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(1, 'Click me'); } - e(); + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } let comp = new MyComp(); @@ -136,34 +137,34 @@ describe('event listeners', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.showing) { - if (V(0)) { - T(0, 'Hello'); - C(1); + if (viewStart(0)) { + text(0, 'Hello'); + container(1); } - cR(1); + containerRefreshStart(1); { if (ctx.button) { - if (V(0)) { - E(0, 'button'); + if (viewStart(0)) { + elementStart(0, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(1, 'Click'); + listener('click', ctx.onClick.bind(ctx)); + text(1, 'Click'); } - e(); + elementEnd(); } - v(); + viewEnd(); } } - cr(); - v(); + containerRefreshEnd(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } const comp = {showing: true, counter: 0, button: true, onClick: function() { this.counter++; }}; @@ -194,26 +195,26 @@ describe('event listeners', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.showing) { - if (V(0)) { - T(0, 'Hello'); - E(1, MyComp); - e(); - E(3, MyComp); - e(); + if (viewStart(0)) { + text(0, 'Hello'); + elementStart(1, MyComp); + elementEnd(); + elementStart(3, MyComp); + elementEnd(); } MyComp.ngComponentDef.h(2, 1); MyComp.ngComponentDef.h(4, 3); - r(2, 1); - r(4, 3); - v(); + componentRefresh(2, 1); + componentRefresh(4, 3); + viewEnd(); } } - cr(); + containerRefreshEnd(); } const ctx = {showing: true}; @@ -250,50 +251,50 @@ describe('event listeners', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - T(0, 'Hello'); - C(1); - C(2); + if (viewStart(0)) { + text(0, 'Hello'); + container(1); + container(2); } - cR(1); + containerRefreshStart(1); { if (ctx.sub1) { - if (V(0)) { - E(0, 'button'); + if (viewStart(0)) { + elementStart(0, 'button'); { - L('click', () => ctx.counter1++); - T(1, 'Click'); + listener('click', () => ctx.counter1++); + text(1, 'Click'); } - e(); + elementEnd(); } - v(); + viewEnd(); } } - cr(); - cR(2); + containerRefreshEnd(); + containerRefreshStart(2); { if (ctx.sub2) { - if (V(0)) { - E(0, 'button'); + if (viewStart(0)) { + elementStart(0, 'button'); { - L('click', () => ctx.counter2++); - T(1, 'Click'); + listener('click', () => ctx.counter2++); + text(1, 'Click'); } - e(); + elementEnd(); } - v(); + viewEnd(); } } - cr(); - v(); + containerRefreshEnd(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } const ctx = {condition: true, counter1: 0, counter2: 0, sub1: true, sub2: true}; diff --git a/packages/core/test/render3/object_literal_spec.ts b/packages/core/test/render3/object_literal_spec.ts index 783cfdf815..a9ee43e97e 100644 --- a/packages/core/test/render3/object_literal_spec.ts +++ b/packages/core/test/render3/object_literal_spec.ts @@ -5,7 +5,9 @@ * 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 {E, defineComponent, e, m, o1, o2, o3, o4, o5, o6, o7, o8, p, r} from '../../src/render3/index'; +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 {renderToHtml} from '../../test/render3/render_util'; describe('array literals', () => { @@ -27,12 +29,12 @@ describe('array literals', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComp); - e(); + elementStart(0, MyComp); + elementEnd(); } - p(0, 'names', o1(0, e0_literal, 1, ctx.customName)); + elementProperty(0, 'names', objectLiteral1(0, e0_literal, 1, ctx.customName)); MyComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } const e0_literal = ['Nancy', null, 'Bess']; @@ -74,13 +76,13 @@ describe('array literals', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ManyPropComp); - e(); + elementStart(0, ManyPropComp); + elementEnd(); } - p(0, 'names1', o1(0, e0_literal, 1, ctx.customName)); - p(0, 'names2', o1(1, e0_literal_1, 0, ctx.customName2)); + elementProperty(0, 'names1', objectLiteral1(0, e0_literal, 1, ctx.customName)); + elementProperty(0, 'names2', objectLiteral1(1, e0_literal_1, 0, ctx.customName2)); ManyPropComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } const e0_literal = ['Nancy', null]; @@ -104,12 +106,13 @@ describe('array literals', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComp); - e(); + elementStart(0, MyComp); + elementEnd(); } - p(0, 'names', o2(0, e0_literal, 1, ctx.customName, 3, ctx.customName2)); + elementProperty( + 0, 'names', objectLiteral2(0, e0_literal, 1, ctx.customName, 3, ctx.customName2)); MyComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } const e0_literal = ['Nancy', null, 'Bess', null]; @@ -140,45 +143,53 @@ describe('array literals', () => { function Template(c: any, cm: boolean) { if (cm) { - E(0, MyComp); - o3Comp = m(1); - e(); - E(2, MyComp); - o4Comp = m(3); - e(); - E(4, MyComp); - o5Comp = m(5); - e(); - E(6, MyComp); - o6Comp = m(7); - e(); - E(8, MyComp); - o7Comp = m(9); - e(); - E(10, MyComp); - o8Comp = m(11); - e(); + elementStart(0, MyComp); + o3Comp = memory(1); + elementEnd(); + elementStart(2, MyComp); + o4Comp = memory(3); + elementEnd(); + elementStart(4, MyComp); + o5Comp = memory(5); + elementEnd(); + elementStart(6, MyComp); + o6Comp = memory(7); + elementEnd(); + elementStart(8, MyComp); + o7Comp = memory(9); + elementEnd(); + elementStart(10, MyComp); + o8Comp = memory(11); + elementEnd(); } - p(0, 'names', o3(0, e0_literal, 5, c[5], 6, c[6], 7, c[7])); - p(2, 'names', o4(1, e2_literal, 4, c[4], 5, c[5], 6, c[6], 7, c[7])); - p(4, 'names', o5(2, e4_literal, 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); - p(6, 'names', o6(3, e6_literal, 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); - p(8, 'names', - o7(4, e8_literal, 1, c[1], 2, c[2], 3, c[3], 4, c[4], 5, c[5], 6, c[6], 7, c[7])); - p(10, 'names', - o8(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])); + elementProperty(0, 'names', objectLiteral3(0, e0_literal, 5, c[5], 6, c[6], 7, 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])); MyComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); MyComp.ngComponentDef.h(3, 2); - r(3, 2); + componentRefresh(3, 2); MyComp.ngComponentDef.h(5, 4); - r(5, 4); + componentRefresh(5, 4); MyComp.ngComponentDef.h(7, 6); - r(7, 6); + componentRefresh(7, 6); MyComp.ngComponentDef.h(9, 8); - r(9, 8); + componentRefresh(9, 8); MyComp.ngComponentDef.h(11, 10); - r(11, 10); + componentRefresh(11, 10); } const e0_literal = ['a', 'b', 'c', 'd', 'e', null, null, null]; @@ -223,12 +234,12 @@ describe('array literals', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ObjectComp); - e(); + elementStart(0, ObjectComp); + elementEnd(); } - p(0, 'config', o1(0, e0_literal, 'animation', ctx.name)); + elementProperty(0, 'config', objectLiteral1(0, e0_literal, 'animation', ctx.name)); ObjectComp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } const e0_literal = {duration: 500, animation: null}; diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index 161aeeaeea..23abd333e6 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -8,7 +8,8 @@ import {EventEmitter} from '@angular/core'; -import {C, E, L, T, V, b, cR, cr, defineComponent, defineDirective, e, p, r, v} from '../../src/render3/index'; +import {defineComponent, defineDirective} from '../../src/render3/index'; +import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, listener, text, viewEnd, viewStart} from '../../src/render3/instructions'; import {containerEl, renderToHtml} from './render_util'; @@ -44,12 +45,12 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle); - { L('change', ctx.onChange.bind(ctx)); } - e(); + elementStart(0, ButtonToggle); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } let counter = 0; @@ -67,15 +68,15 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle); + elementStart(0, ButtonToggle); { - L('change', ctx.onChange.bind(ctx)); - L('reset', ctx.onReset.bind(ctx)); + listener('change', ctx.onChange.bind(ctx)); + listener('reset', ctx.onReset.bind(ctx)); } - e(); + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } let counter = 0; @@ -94,12 +95,12 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle); - { L('change', () => ctx.counter++); } - e(); + elementStart(0, ButtonToggle); + { listener('change', () => ctx.counter++); } + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } const ctx = {counter: 0}; @@ -122,22 +123,22 @@ describe('outputs', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, ButtonToggle); - { L('change', ctx.onChange.bind(ctx)); } - e(); + if (viewStart(0)) { + elementStart(0, ButtonToggle); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } let counter = 0; @@ -166,32 +167,32 @@ describe('outputs', () => { function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - C(0); + if (viewStart(0)) { + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition2) { - if (V(0)) { - E(0, ButtonToggle); - { L('change', ctx.onChange.bind(ctx)); } - e(); + if (viewStart(0)) { + elementStart(0, ButtonToggle); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); - v(); + containerRefreshEnd(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } let counter = 0; @@ -232,32 +233,32 @@ describe('outputs', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { if (ctx.condition) { - if (V(0)) { - E(0, 'button'); + if (viewStart(0)) { + elementStart(0, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(1, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(1, 'Click me'); } - e(); - E(2, ButtonToggle); - { L('change', ctx.onChange.bind(ctx)); } - e(); - E(4, DestroyComp); - e(); + elementEnd(); + elementStart(2, ButtonToggle); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); + elementStart(4, DestroyComp); + elementEnd(); } ButtonToggle.ngComponentDef.h(3, 2); DestroyComp.ngComponentDef.h(5, 4); - r(3, 2); - r(5, 4); - v(); + componentRefresh(3, 2); + componentRefresh(5, 4); + viewEnd(); } } - cr(); + containerRefreshEnd(); } let clickCounter = 0; @@ -298,9 +299,9 @@ describe('outputs', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button', null, [MyButton]); - { L('click', ctx.onClick.bind(ctx)); } - e(); + elementStart(0, 'button', null, [MyButton]); + { listener('click', ctx.onClick.bind(ctx)); } + elementEnd(); } } @@ -321,12 +322,12 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle, null, [OtherDir]); - { L('change', ctx.onChange.bind(ctx)); } - e(); + elementStart(0, ButtonToggle, null, [OtherDir]); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } let counter = 0; @@ -352,13 +353,13 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle, null, [OtherDir]); - { L('change', ctx.onChange.bind(ctx)); } - e(); + elementStart(0, ButtonToggle, null, [OtherDir]); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } - p(0, 'change', b(ctx.change)); + elementProperty(0, 'change', bind(ctx.change)); ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } let counter = 0; @@ -384,35 +385,35 @@ describe('outputs', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); + elementStart(0, 'button'); { - L('click', ctx.onClick.bind(ctx)); - T(1, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(1, 'Click me'); } - e(); - C(2); + elementEnd(); + container(2); } - cR(2); + containerRefreshStart(2); { if (ctx.condition) { - if (V(0)) { - E(0, ButtonToggle); - { L('change', ctx.onChange.bind(ctx)); } - e(); + if (viewStart(0)) { + elementStart(0, ButtonToggle); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } ButtonToggle.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } else { - if (V(1)) { - E(0, 'div', null, [OtherDir]); - { L('change', ctx.onChange.bind(ctx)); } - e(); + if (viewStart(1)) { + elementStart(0, 'div', null, [OtherDir]); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } let counter = 0; diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index db333fb3f5..e23bc29a3f 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -8,8 +8,8 @@ import {EventEmitter} from '@angular/core'; -import {C, E, L, T, V, b, b1, cR, cr, defineComponent, defineDirective, e, m, p, r, t, v} from '../../src/render3/index'; -import {NO_CHANGE} from '../../src/render3/instructions'; +import {defineComponent, defineDirective} from '../../src/render3/index'; +import {NO_CHANGE, bind, bind1, componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, listener, memory, text, textBinding, viewEnd, viewStart} from '../../src/render3/instructions'; import {renderToHtml} from './render_util'; @@ -18,10 +18,10 @@ describe('elementProperty', () => { it('should support bindings to properties', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - p(0, 'id', b(ctx)); + elementProperty(0, 'id', bind(ctx)); } expect(renderToHtml(Template, 'testId')).toEqual(''); @@ -39,10 +39,10 @@ describe('elementProperty', () => { function Template(ctx: string, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - p(0, 'id', cm ? expensive(ctx) : NO_CHANGE); + elementProperty(0, 'id', cm ? expensive(ctx) : NO_CHANGE); } expect(renderToHtml(Template, 'cheapId')).toEqual(''); @@ -52,10 +52,10 @@ describe('elementProperty', () => { it('should support interpolation for properties', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - e(); + elementStart(0, 'span'); + elementEnd(); } - p(0, 'id', b1('_', ctx, '_')); + elementProperty(0, 'id', bind1('_', ctx, '_')); } expect(renderToHtml(Template, 'testId')).toEqual(''); @@ -90,13 +90,13 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button', null, [MyButton, OtherDir]); - { T(3, 'Click me'); } - e(); + elementStart(0, 'button', null, [MyButton, OtherDir]); + { text(3, 'Click me'); } + elementEnd(); } - p(0, 'disabled', b(ctx.isDisabled)); - p(0, 'id', b(ctx.id)); + elementProperty(0, 'disabled', bind(ctx.isDisabled)); + elementProperty(0, 'id', bind(ctx.id)); } const ctx: any = {isDisabled: true, id: 0}; @@ -116,13 +116,13 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button', null, [MyButton]); - { T(2, 'Click me'); } - e(); + elementStart(0, 'button', null, [MyButton]); + { text(2, 'Click me'); } + elementEnd(); } - p(0, 'disabled', b(ctx.isDisabled)); - p(0, 'id', b(ctx.id)); + elementProperty(0, 'disabled', bind(ctx.isDisabled)); + elementProperty(0, 'id', bind(ctx.id)); } const ctx: any = {isDisabled: true, id: 0}; @@ -152,12 +152,12 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp); - e(); + elementStart(0, Comp); + elementEnd(); } - p(0, 'id', b(ctx.id)); + elementProperty(0, 'id', bind(ctx.id)); Comp.ngComponentDef.h(1, 0); - r(1, 0); + componentRefresh(1, 0); } expect(renderToHtml(Template, {id: 1})).toEqual(``); @@ -183,11 +183,11 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button', null, [MyButton, OtherDisabledDir]); - { T(3, 'Click me'); } - e(); + elementStart(0, 'button', null, [MyButton, OtherDisabledDir]); + { text(3, 'Click me'); } + elementEnd(); } - p(0, 'disabled', b(ctx.isDisabled)); + elementProperty(0, 'disabled', bind(ctx.isDisabled)); } const ctx: any = {isDisabled: true}; @@ -205,14 +205,14 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button', null, [OtherDir]); + elementStart(0, 'button', null, [OtherDir]); { - L('click', ctx.onClick.bind(ctx)); - T(2, 'Click me'); + listener('click', ctx.onClick.bind(ctx)); + text(2, 'Click me'); } - e(); + elementEnd(); } - p(0, 'id', b(ctx.id)); + elementProperty(0, 'id', bind(ctx.id)); } let counter = 0; @@ -248,33 +248,33 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button', null, [IdDir]); - { T(2, 'Click me'); } - e(); - C(3); + elementStart(0, 'button', null, [IdDir]); + { text(2, 'Click me'); } + elementEnd(); + container(3); } - p(0, 'id', b(ctx.id1)); - cR(3); + elementProperty(0, 'id', bind(ctx.id1)); + containerRefreshStart(3); { if (ctx.condition) { - if (V(0)) { - E(0, 'button'); - { T(1, 'Click me too'); } - e(); + if (viewStart(0)) { + elementStart(0, 'button'); + { text(1, 'Click me too'); } + elementEnd(); } - p(0, 'id', b(ctx.id2)); - v(); + elementProperty(0, 'id', bind(ctx.id2)); + viewEnd(); } else { - if (V(1)) { - E(0, 'button', null, [OtherDir]); - { T(2, 'Click me too'); } - e(); + if (viewStart(1)) { + elementStart(0, 'button', null, [OtherDir]); + { text(2, 'Click me too'); } + elementEnd(); } - p(0, 'id', b(ctx.id3)); - v(); + elementProperty(0, 'id', bind(ctx.id3)); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, {condition: true, id1: 'one', id2: 'two', id3: 'three'})) @@ -317,8 +317,8 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button'], [MyDir]); - e(); + elementStart(0, 'div', ['role', 'button'], [MyDir]); + elementEnd(); } } @@ -331,10 +331,10 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button'], [MyDir]); - e(); + elementStart(0, 'div', ['role', 'button'], [MyDir]); + elementEnd(); } - p(0, 'role', b(ctx.role)); + elementProperty(0, 'role', bind(ctx.role)); } expect(renderToHtml(Template, {role: 'listbox'})).toEqual(`
`); @@ -349,8 +349,8 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button'], [MyDir, MyDirB]); - e(); + elementStart(0, 'div', ['role', 'button'], [MyDir, MyDirB]); + elementEnd(); } } @@ -364,8 +364,8 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); - e(); + elementStart(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); + elementEnd(); } } @@ -379,9 +379,9 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button'], [MyDir]); - { L('change', ctx.onChange.bind(ctx)); } - e(); + elementStart(0, 'div', ['role', 'button'], [MyDir]); + { listener('change', ctx.onChange.bind(ctx)); } + elementEnd(); } } @@ -404,10 +404,10 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); - e(); - E(2, 'div', ['role', 'listbox'], [MyDirB]); - e(); + elementStart(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); + elementEnd(); + elementStart(2, 'div', ['role', 'listbox'], [MyDirB]); + elementEnd(); } } @@ -430,28 +430,28 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'listbox'], [MyDir]); - e(); - C(2); + elementStart(0, 'div', ['role', 'listbox'], [MyDir]); + elementEnd(); + container(2); } - cR(2); + containerRefreshStart(2); { if (ctx.condition) { - if (V(0)) { - E(0, 'div', ['role', 'button'], [MyDirB]); - e(); + if (viewStart(0)) { + elementStart(0, 'div', ['role', 'button'], [MyDirB]); + elementEnd(); } - v(); + viewEnd(); } else { - if (V(1)) { - E(0, 'div', ['role', 'menu']); + if (viewStart(1)) { + elementStart(0, 'div', ['role', 'menu']); {} - e(); + elementEnd(); } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, { @@ -475,11 +475,11 @@ describe('elementProperty', () => { tag: 'comp', template: function(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button'], [MyDir]); - e(); - T(2); + elementStart(0, 'div', ['role', 'button'], [MyDir]); + elementEnd(); + text(2); } - t(2, b(m(1).role)); + textBinding(2, bind(memory(1).role)); }, factory: () => new Comp() }); @@ -492,21 +492,21 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - C(0); + container(0); } - cR(0); + containerRefreshStart(0); { for (let i = 0; i < 2; i++) { - if (V(0)) { - E(0, Comp); - e(); + if (viewStart(0)) { + elementStart(0, Comp); + elementEnd(); } Comp.ngComponentDef.h(1, 0); - r(1, 0); - v(); + componentRefresh(1, 0); + viewEnd(); } } - cr(); + containerRefreshEnd(); } expect(renderToHtml(Template, {})) diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index b4b5a3beee..e3a87b2c3e 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -6,12 +6,13 @@ * 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, V, cR, cr, detectChanges, e, m, qR, v} from '../../src/render3/index'; +import {QueryList, detectChanges} from '../../src/render3/index'; +import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, memory, viewEnd, viewStart} from '../../src/render3/instructions'; +import {query, queryRefresh} from '../../src/render3/query'; import {createComponent, createDirective, renderComponent} from './render_util'; - /** * Helper function to check if a given candidate object resembles ElementRef * @param candidate @@ -58,19 +59,19 @@ describe('query', () => { */ let tmp: any; if (cm) { - Q(0, Child, false); - Q(1, Child, true); - E(2, Child); + query(0, Child, false); + query(1, Child, true); + elementStart(2, Child); { - child1 = m(3); - E(4, Child); - { child2 = m(5); } - e(); + child1 = memory(3); + elementStart(4, Child); + { child2 = memory(5); } + elementEnd(); } - e(); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query0 = tmp as QueryList); - qR(tmp = m>(1)) && (ctx.query1 = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query0 = tmp as QueryList); + queryRefresh(tmp = memory>(1)) && (ctx.query1 = tmp as QueryList); }); const parent = renderComponent(Cmp); @@ -92,18 +93,18 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, Child, false, QUERY_READ_ELEMENT_REF); - elToQuery = E(1, 'div', null, [Child]); - e(); + query(0, Child, false, QUERY_READ_ELEMENT_REF); + elToQuery = elementStart(1, 'div', null, [Child]); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(isElementRef(query.first)).toBeTruthy(); - expect(query.first.nativeElement).toEqual(elToQuery); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(isElementRef(qList.first)).toBeTruthy(); + expect(qList.first.nativeElement).toEqual(elToQuery); }); @@ -120,18 +121,18 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, Child, false, OtherChild); - E(1, 'div', null, [Child, OtherChild]); - { otherChildInstance = m(3); } - e(); + query(0, Child, false, OtherChild); + elementStart(1, 'div', null, [Child, OtherChild]); + { otherChildInstance = memory(3); } + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(query.first).toBe(otherChildInstance); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(qList.first).toBe(otherChildInstance); }); it('should not add results to query if a requested token cant be read', () => { @@ -146,16 +147,16 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, Child, false, OtherChild); - E(1, 'div', null, [Child]); - e(); + query(0, Child, false, OtherChild); + elementStart(1, 'div', null, [Child]); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(0); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(0); }); }); @@ -174,19 +175,19 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, QUERY_READ_FROM_NODE); - elToQuery = E(1, 'div', null, null, ['foo', '']); - e(); - E(2, 'div'); - e(); + query(0, ['foo'], false, QUERY_READ_FROM_NODE); + elToQuery = elementStart(1, 'div', null, null, ['foo', '']); + elementEnd(); + elementStart(2, 'div'); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(query.first.nativeElement).toEqual(elToQuery); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(qList.first.nativeElement).toEqual(elToQuery); }); it('should query for multiple elements and read ElementRef by default', () => { @@ -204,22 +205,22 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE); - el1ToQuery = E(1, 'div', null, null, ['foo', '']); - e(); - E(2, 'div'); - e(); - el2ToQuery = E(3, 'div', null, null, ['bar', '']); - e(); + query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE); + el1ToQuery = elementStart(1, 'div', null, null, ['foo', '']); + elementEnd(); + elementStart(2, 'div'); + elementEnd(); + el2ToQuery = elementStart(3, 'div', null, null, ['bar', '']); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(2); - expect(query.first.nativeElement).toEqual(el1ToQuery); - expect(query.last.nativeElement).toEqual(el2ToQuery); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(2); + expect(qList.first.nativeElement).toEqual(el1ToQuery); + expect(qList.last.nativeElement).toEqual(el2ToQuery); }); it('should read ElementRef from an element when explicitly asked for', () => { @@ -235,20 +236,20 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, QUERY_READ_ELEMENT_REF); - elToQuery = E(1, 'div', null, null, ['foo', '']); - e(); - E(2, 'div'); - e(); + query(0, ['foo'], false, QUERY_READ_ELEMENT_REF); + elToQuery = elementStart(1, 'div', null, null, ['foo', '']); + elementEnd(); + elementStart(2, 'div'); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(isElementRef(query.first)).toBeTruthy(); - expect(query.first.nativeElement).toEqual(elToQuery); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(isElementRef(qList.first)).toBeTruthy(); + expect(qList.first.nativeElement).toEqual(elToQuery); }); it('should read ViewContainerRef from element nodes when explicitly asked for', () => { @@ -261,17 +262,17 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, QUERY_READ_CONTAINER_REF); - E(1, 'div', null, null, ['foo', '']); - e(); + query(0, ['foo'], false, QUERY_READ_CONTAINER_REF); + elementStart(1, 'div', null, null, ['foo', '']); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(isViewContainerRef(query.first)).toBeTruthy(); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(isViewContainerRef(qList.first)).toBeTruthy(); }); it('should read ViewContainerRef from container nodes when explicitly asked for', () => { @@ -284,16 +285,16 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, QUERY_READ_CONTAINER_REF); - C(1, undefined, undefined, undefined, undefined, ['foo', '']); + query(0, ['foo'], false, QUERY_READ_CONTAINER_REF); + container(1, undefined, undefined, undefined, undefined, ['foo', '']); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(isViewContainerRef(query.first)).toBeTruthy(); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(isViewContainerRef(qList.first)).toBeTruthy(); }); it('should no longer read ElementRef with a native element pointing to comment DOM node from containers', @@ -307,16 +308,16 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, QUERY_READ_ELEMENT_REF); - C(1, undefined, undefined, undefined, undefined, ['foo', '']); + query(0, ['foo'], false, QUERY_READ_ELEMENT_REF); + container(1, undefined, undefined, undefined, undefined, ['foo', '']); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(query.first.nativeElement).toBe(null); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(qList.first.nativeElement).toBe(null); }); it('should read TemplateRef from container nodes by default', () => { @@ -330,16 +331,16 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], undefined, QUERY_READ_FROM_NODE); - C(1, undefined, undefined, undefined, undefined, ['foo', '']); + query(0, ['foo'], undefined, QUERY_READ_FROM_NODE); + container(1, undefined, undefined, undefined, undefined, ['foo', '']); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(isTemplateRef(query.first)).toBeTruthy(); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(isTemplateRef(qList.first)).toBeTruthy(); }); @@ -353,16 +354,16 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, QUERY_READ_TEMPLATE_REF); - C(1, undefined, undefined, undefined, undefined, ['foo', '']); + query(0, ['foo'], false, QUERY_READ_TEMPLATE_REF); + container(1, undefined, undefined, undefined, undefined, ['foo', '']); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(isTemplateRef(query.first)).toBeTruthy(); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(isTemplateRef(qList.first)).toBeTruthy(); }); it('should read component instance if element queried for is a component host', () => { @@ -378,18 +379,18 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - E(1, Child, null, null, ['foo', '']); - { childInstance = m(2); } - e(); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + elementStart(1, Child, null, null, ['foo', '']); + { childInstance = memory(2); } + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(query.first).toBe(childInstance); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(qList.first).toBe(childInstance); }); it('should read directive instance if element queried for has an exported directive with a matching name', @@ -406,18 +407,18 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - E(1, 'div', null, [Child], ['foo', 'child']); - childInstance = m(2); - e(); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + elementStart(1, 'div', null, [Child], ['foo', 'child']); + childInstance = memory(2); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(query.first).toBe(childInstance); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(qList.first).toBe(childInstance); }); it('should read all matching directive instances from a given element', () => { @@ -434,22 +435,22 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE); - E(1, 'div', null, [Child1, Child2], ['foo', 'child1', 'bar', 'child2']); + query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE); + elementStart(1, 'div', null, [Child1, Child2], ['foo', 'child1', 'bar', 'child2']); { - child1Instance = m(2); - child2Instance = m(3); + child1Instance = memory(2); + child2Instance = memory(3); } - e(); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(2); - expect(query.first).toBe(child1Instance); - expect(query.last).toBe(child2Instance); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(2); + expect(qList.first).toBe(child1Instance); + expect(qList.last).toBe(child2Instance); }); it('should match match on exported directive name and read a requested token', () => { @@ -465,17 +466,17 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], undefined, QUERY_READ_ELEMENT_REF); - div = E(1, 'div', null, [Child], ['foo', 'child']); - e(); + query(0, ['foo'], undefined, QUERY_READ_ELEMENT_REF); + div = elementStart(1, 'div', null, [Child], ['foo', 'child']); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(1); - expect(query.first.nativeElement).toBe(div); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(1); + expect(qList.first.nativeElement).toBe(div); }); it('should support reading a mix of ElementRef and directive instances', () => { @@ -491,19 +492,19 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE); - div = E(1, 'div', null, [Child], ['foo', '', 'bar', 'child']); - { childInstance = m(2); } - e(); + query(0, ['foo', 'bar'], undefined, QUERY_READ_FROM_NODE); + div = elementStart(1, 'div', null, [Child], ['foo', '', 'bar', 'child']); + { childInstance = memory(2); } + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(2); - expect(query.first.nativeElement).toBe(div); - expect(query.last).toBe(childInstance); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(2); + expect(qList.first.nativeElement).toBe(div); + expect(qList.last).toBe(childInstance); }); it('should not add results to query if a requested token cant be read', () => { @@ -518,16 +519,16 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], false, Child); - E(1, 'div', null, null, ['foo', '']); - e(); + query(0, ['foo'], false, Child); + elementStart(1, 'div', null, null, ['foo', '']); + elementEnd(); } - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as QueryList); - expect(query.length).toBe(0); + const qList = (cmptInstance.query as QueryList); + expect(qList.length).toBe(0); }); }); @@ -547,38 +548,38 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - C(1); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + container(1); } - cR(1); + containerRefreshStart(1); { if (ctx.exp) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - firstEl = E(0, 'div', null, null, ['foo', '']); - e(); + firstEl = elementStart(0, 'div', null, null, ['foo', '']); + elementEnd(); } } - v(); + viewEnd(); } } - cr(); - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + containerRefreshEnd(); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as any); - expect(query.length).toBe(0); + const qList = (cmptInstance.query as any); + expect(qList.length).toBe(0); cmptInstance.exp = true; detectChanges(cmptInstance); - expect(query.length).toBe(1); - expect(query.first.nativeElement).toBe(firstEl); + expect(qList.length).toBe(1); + expect(qList.first.nativeElement).toBe(firstEl); cmptInstance.exp = false; detectChanges(cmptInstance); - expect(query.length).toBe(0); + expect(qList.length).toBe(0); }); it('should add results from embedded views in the correct order - views and elements mix', @@ -597,48 +598,48 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - firstEl = E(1, 'b', null, null, ['foo', '']); - e(); - C(2); - lastEl = E(3, 'i', null, null, ['foo', '']); - e(); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + firstEl = elementStart(1, 'b', null, null, ['foo', '']); + elementEnd(); + container(2); + lastEl = elementStart(3, 'i', null, null, ['foo', '']); + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (ctx.exp) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - viewEl = E(0, 'div', null, null, ['foo', '']); - e(); + viewEl = elementStart(0, 'div', null, null, ['foo', '']); + elementEnd(); } } - v(); + viewEnd(); } } - cr(); - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + containerRefreshEnd(); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as any); - expect(query.length).toBe(2); - expect(query.first.nativeElement).toBe(firstEl); - expect(query.last.nativeElement).toBe(lastEl); + const qList = (cmptInstance.query as any); + expect(qList.length).toBe(2); + expect(qList.first.nativeElement).toBe(firstEl); + expect(qList.last.nativeElement).toBe(lastEl); cmptInstance.exp = true; detectChanges(cmptInstance); - expect(query.length).toBe(3); - expect(query.toArray()[0].nativeElement).toBe(firstEl); - expect(query.toArray()[1].nativeElement).toBe(viewEl); - expect(query.toArray()[2].nativeElement).toBe(lastEl); + expect(qList.length).toBe(3); + expect(qList.toArray()[0].nativeElement).toBe(firstEl); + expect(qList.toArray()[1].nativeElement).toBe(viewEl); + expect(qList.toArray()[2].nativeElement).toBe(lastEl); cmptInstance.exp = false; detectChanges(cmptInstance); - expect(query.length).toBe(2); - expect(query.first.nativeElement).toBe(firstEl); - expect(query.last.nativeElement).toBe(lastEl); + expect(qList.length).toBe(2); + expect(qList.first.nativeElement).toBe(firstEl); + expect(qList.last.nativeElement).toBe(lastEl); }); it('should add results from embedded views in the correct order - views side by side', () => { @@ -657,50 +658,50 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - C(1); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + container(1); } - cR(1); + containerRefreshStart(1); { if (ctx.exp1) { - let cm1 = V(0); + let cm1 = viewStart(0); { if (cm1) { - firstEl = E(0, 'div', null, null, ['foo', '']); - e(); + firstEl = elementStart(0, 'div', null, null, ['foo', '']); + elementEnd(); } } - v(); + viewEnd(); } if (ctx.exp2) { - let cm1 = V(1); + let cm1 = viewStart(1); { if (cm1) { - lastEl = E(0, 'span', null, null, ['foo', '']); - e(); + lastEl = elementStart(0, 'span', null, null, ['foo', '']); + elementEnd(); } } - v(); + viewEnd(); } } - cr(); - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + containerRefreshEnd(); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as any); - expect(query.length).toBe(0); + const qList = (cmptInstance.query as any); + expect(qList.length).toBe(0); cmptInstance.exp2 = true; detectChanges(cmptInstance); - expect(query.length).toBe(1); - expect(query.last.nativeElement).toBe(lastEl); + expect(qList.length).toBe(1); + expect(qList.last.nativeElement).toBe(lastEl); cmptInstance.exp1 = true; detectChanges(cmptInstance); - expect(query.length).toBe(2); - expect(query.first.nativeElement).toBe(firstEl); - expect(query.last.nativeElement).toBe(lastEl); + expect(qList.length).toBe(2); + expect(qList.first.nativeElement).toBe(firstEl); + expect(qList.last.nativeElement).toBe(lastEl); }); it('should add results from embedded views in the correct order - nested views', () => { @@ -719,55 +720,55 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - C(1); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + container(1); } - cR(1); + containerRefreshStart(1); { if (ctx.exp1) { - let cm1 = V(0); + let cm1 = viewStart(0); { if (cm1) { - firstEl = E(0, 'div', null, null, ['foo', '']); - e(); - C(1); + firstEl = elementStart(0, 'div', null, null, ['foo', '']); + elementEnd(); + container(1); } - cR(1); + containerRefreshStart(1); { if (ctx.exp2) { - let cm2 = V(0); + let cm2 = viewStart(0); { if (cm2) { - lastEl = E(0, 'span', null, null, ['foo', '']); - e(); + lastEl = elementStart(0, 'span', null, null, ['foo', '']); + elementEnd(); } } - v(); + viewEnd(); } } - cr(); + containerRefreshEnd(); } - v(); + viewEnd(); } } - cr(); - qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); + containerRefreshEnd(); + queryRefresh(tmp = memory>(0)) && (ctx.query = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); - const query = (cmptInstance.query as any); - expect(query.length).toBe(0); + const qList = (cmptInstance.query as any); + expect(qList.length).toBe(0); cmptInstance.exp1 = true; detectChanges(cmptInstance); - expect(query.length).toBe(1); - expect(query.first.nativeElement).toBe(firstEl); + expect(qList.length).toBe(1); + expect(qList.first.nativeElement).toBe(firstEl); cmptInstance.exp2 = true; detectChanges(cmptInstance); - expect(query.length).toBe(2); - expect(query.first.nativeElement).toBe(firstEl); - expect(query.last.nativeElement).toBe(lastEl); + expect(qList.length).toBe(2); + expect(qList.first.nativeElement).toBe(firstEl); + expect(qList.last.nativeElement).toBe(lastEl); }); it('should support combination of deep and shallow queries', () => { @@ -783,28 +784,28 @@ describe('query', () => { const Cmpt = createComponent('cmpt', function(ctx: any, cm: boolean) { let tmp: any; if (cm) { - Q(0, ['foo'], true, QUERY_READ_FROM_NODE); - Q(1, ['foo'], false, QUERY_READ_FROM_NODE); - C(2); - E(3, 'span', null, null, ['foo', '']); - e(); + query(0, ['foo'], true, QUERY_READ_FROM_NODE); + query(1, ['foo'], false, QUERY_READ_FROM_NODE); + container(2); + elementStart(3, 'span', null, null, ['foo', '']); + elementEnd(); } - cR(2); + containerRefreshStart(2); { if (ctx.exp) { - let cm1 = V(0); + let cm1 = viewStart(0); { if (cm1) { - E(0, 'div', null, null, ['foo', '']); - e(); + elementStart(0, 'div', null, null, ['foo', '']); + elementEnd(); } } - v(); + viewEnd(); } } - cr(); - qR(tmp = m>(0)) && (ctx.deep = tmp as QueryList); - qR(tmp = m>(1)) && (ctx.shallow = tmp as QueryList); + containerRefreshEnd(); + queryRefresh(tmp = memory>(0)) && (ctx.deep = tmp as QueryList); + queryRefresh(tmp = memory>(1)) && (ctx.shallow = tmp as QueryList); }); const cmptInstance = renderComponent(Cmpt); @@ -841,17 +842,17 @@ describe('query', () => { }); // initial refresh, the query should be dirty - qR(queryList); + queryRefresh(queryList); expect(changes).toBe(1); // refresh without setting dirty - no emit - qR(queryList); + queryRefresh(queryList); expect(changes).toBe(1); // refresh with setting dirty - emit queryList.setDirty(); - qR(queryList); + queryRefresh(queryList); expect(changes).toBe(2); }); diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index fad14ce376..861fecd069 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/packages/core/test/render3/renderer_factory_spec.ts @@ -10,7 +10,8 @@ import {AnimationEvent} from '@angular/animations'; import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing'; import {RendererType2, ViewEncapsulation} from '../../src/core'; -import {E, L, T, b, defineComponent, detectChanges, e, p, r} from '../../src/render3/index'; +import {defineComponent, detectChanges} from '../../src/render3/index'; +import {bind, componentRefresh, elementEnd, elementProperty, elementStart, listener, text} from '../../src/render3/instructions'; import {createRendererType2} from '../../src/view/index'; import {getAnimationRendererFactory2, getRendererFactory2} from './imported_renderer2'; @@ -34,7 +35,7 @@ describe('renderer factory lifecycle', () => { template: function(ctx: SomeComponent, cm: boolean) { logs.push('component'); if (cm) { - T(0, 'foo'); + text(0, 'foo'); } }, factory: () => new SomeComponent @@ -55,19 +56,19 @@ describe('renderer factory lifecycle', () => { function Template(ctx: any, cm: boolean) { logs.push('function'); if (cm) { - T(0, 'bar'); + text(0, 'bar'); } } function TemplateWithComponent(ctx: any, cm: boolean) { logs.push('function_with_component'); if (cm) { - T(0, 'bar'); - E(1, SomeComponent); - e(); + text(0, 'bar'); + elementStart(1, SomeComponent); + elementEnd(); } SomeComponent.ngComponentDef.h(2, 1); - r(2, 1); + componentRefresh(2, 1); } beforeEach(() => { logs = []; }); @@ -126,7 +127,7 @@ describe('animation renderer factory', () => { tag: 'some-component', template: function(ctx: SomeComponent, cm: boolean) { if (cm) { - T(0, 'foo'); + text(0, 'foo'); } }, factory: () => new SomeComponent @@ -143,15 +144,15 @@ describe('animation renderer factory', () => { tag: 'some-component', template: function(ctx: SomeComponentWithAnimation, cm: boolean) { if (cm) { - E(0, 'div'); + elementStart(0, 'div'); { - L('@myAnimation.start', ctx.callback.bind(ctx)); - L('@myAnimation.done', ctx.callback.bind(ctx)); - T(1, 'foo'); + listener('@myAnimation.start', ctx.callback.bind(ctx)); + listener('@myAnimation.done', ctx.callback.bind(ctx)); + text(1, 'foo'); } - e(); + elementEnd(); } - p(0, '@myAnimation', b(ctx.exp)); + elementProperty(0, '@myAnimation', bind(ctx.exp)); }, factory: () => new SomeComponentWithAnimation, rendererType: createRendererType2({ diff --git a/packages/core/test/render3/view_container_ref_spec.ts b/packages/core/test/render3/view_container_ref_spec.ts index 986b2a5a21..a28787ed3d 100644 --- a/packages/core/test/render3/view_container_ref_spec.ts +++ b/packages/core/test/render3/view_container_ref_spec.ts @@ -7,7 +7,8 @@ */ import {TemplateRef, ViewContainerRef} from '../../src/core'; -import {C, T, b, cR, cr, defineComponent, defineDirective, injectTemplateRef, injectViewContainerRef, m, r, t} from '../../src/render3/index'; +import {defineComponent, defineDirective, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index'; +import {bind, componentRefresh, container, containerRefreshEnd, containerRefreshStart, memory, text, textBinding} from '../../src/render3/instructions'; import {renderComponent, toHtml} from './render_util'; @@ -32,17 +33,17 @@ describe('ViewContainerRef', () => { if (cm) { const subTemplate = (ctx: any, cm: boolean) => { if (cm) { - T(0); + text(0); } - t(0, b(ctx.$implicit)); + textBinding(0, bind(ctx.$implicit)); }; - C(0, [TestDirective], subTemplate); + container(0, [TestDirective], subTemplate); } - cR(0); - cmp.testDir = m(1) as TestDirective; + containerRefreshStart(0); + cmp.testDir = memory(1) as TestDirective; TestDirective.ngDirectiveDef.h(1, 0); - r(1, 0); - cr(); + componentRefresh(1, 0); + containerRefreshEnd(); }, }); }