From 8fdb1e09c1bc501289ac40cdfac4bf6084df8494 Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Mon, 11 Dec 2017 14:08:52 -0800 Subject: [PATCH] refactor(core): store directive defs in static data (#20855) PR Close #20855 --- packages/core/src/render3/component.ts | 12 +- packages/core/src/render3/di.ts | 14 +- packages/core/src/render3/instructions.ts | 145 +++++++------- packages/core/src/render3/interfaces.ts | 68 +++---- packages/core/src/render3/query.ts | 7 +- packages/core/test/render3/content_spec.ts | 184 +++++++++--------- packages/core/test/render3/di_spec.ts | 58 +++--- packages/core/test/render3/directive_spec.ts | 4 +- packages/core/test/render3/exports_spec.ts | 36 ++-- .../core/test/render3/integration_spec.ts | 32 +-- packages/core/test/render3/lifecycle_spec.ts | 84 ++++---- packages/core/test/render3/listeners_spec.ts | 10 +- .../render3/node_selector_matcher_spec.ts | 2 +- packages/core/test/render3/outputs_spec.ts | 49 ++--- packages/core/test/render3/properties_spec.ts | 72 +++---- packages/core/test/render3/query_spec.ts | 6 +- packages/core/test/render3/render_util.ts | 2 +- 17 files changed, 399 insertions(+), 386 deletions(-) diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index f5f3cdfdff..eb722513cb 100644 --- a/packages/core/src/render3/component.ts +++ b/packages/core/src/render3/component.ts @@ -143,10 +143,12 @@ export function renderComponent( const renderer = opts.renderer || document; const componentDef = componentType.ngComponentDef; let component: T; - const oldView = enterView(createViewState(-1, renderer), null); + const oldView = enterView(createViewState(-1, renderer, []), null); try { - elementHost(opts.host || componentDef.tag); - component = directiveCreate(0, componentDef.n(), componentDef); + // Create element node at index 0 in data array + elementHost(opts.host || componentDef.tag, componentDef); + // Create directive instance with n() and store at index 1 in data array (el is 0) + component = directiveCreate(1, componentDef.n(), componentDef); } finally { leaveView(oldView); } @@ -165,7 +167,9 @@ export function detectChanges(component: T) { ngDevMode && assertNotNull(hostNode.data, 'hostNode.data'); const oldView = enterView(hostNode.view !, hostNode); try { - (component.constructor as ComponentType).ngComponentDef.r(0, 0); + // Element was stored at 0 and directive was stored at 1 in renderComponent + // so to refresh the component, r() needs to be called with (1, 0) + (component.constructor as ComponentType).ngComponentDef.r(1, 0); isDirty = false; } finally { leaveView(oldView); diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts index 10972715ff..27654835bd 100644 --- a/packages/core/src/render3/di.ts +++ b/packages/core/src/render3/di.ts @@ -9,7 +9,7 @@ import {ComponentFactory, ComponentRef as IComponentRef, ElementRef as IElementRef, EmbeddedViewRef as IEmbeddedViewRef, Injector, NgModuleRef as INgModuleRef, TemplateRef as ITemplateRef, Type, ViewContainerRef as IViewContainerRef, ViewRef as IViewRef} from '../core'; import {BLOOM_SIZE, NG_ELEMENT_ID, getOrCreateNodeInjector} from './instructions'; import {LContainer, LNodeFlags, LNodeInjector} from './interfaces'; -import {ComponentTemplate} from './public_interfaces'; +import {ComponentTemplate, DirectiveDef} from './public_interfaces'; import {stringify} from './util'; export const enum InjectFlags { @@ -43,13 +43,11 @@ export function inject(token: Type, flags?: InjectFlags): T { if (size !== 0) { size = size >> LNodeFlags.SIZE_SHIFT; const start = flags >> LNodeFlags.INDX_SHIFT; - const directives = node.view.directives; - if (directives) { - for (let i = start, ii = start + size; i < ii; i++) { - const def = directives[(i << 1) | 1]; - if (def.diPublic && def.type == token) { - return directives[i << 1]; - } + const ngStaticData = node.view.ngStaticData; + for (let i = start, ii = start + size; i < ii; i++) { + const def = ngStaticData[i] as DirectiveDef; + if (def.diPublic && def.type == token) { + return node.view.data[i]; } } } diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index 5f7673da65..febac3e1ea 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -10,7 +10,11 @@ import './ng_dev_mode'; import {Type} from '../core'; import {assertEqual, assertLessThan, assertNotEqual, assertNotNull} from './assert'; -import {CSSSelector, ContainerState, InitialInputData, InitialInputs, LContainer, LContainerStatic, LElement, LNode, LNodeFlags, LNodeInjector, LNodeStatic, LProjection, LText, LView, MinificationData, MinificationDataValue, ProjectionState, QueryState, ViewState} from './interfaces'; +import { + CSSSelector, ContainerState, InitialInputData, InitialInputs, LContainer, LContainerStatic, LElement, LNode, + LNodeFlags, LNodeInjector, LNodeStatic, LProjection, LText, LView, MinificationData, MinificationDataValue, + ProjectionState, QueryState, ViewState, NgStaticData +} from './interfaces'; import {assertNodeType} from './node_assert'; import {appendChild, insertChild, insertView, processProjectedNode, removeView} from './node_manipulation'; import {isNodeMatchingSelector} from './node_selector_matcher'; @@ -48,12 +52,12 @@ let isParent: boolean; * in the data array. Any nodes that do not have static data store a null * value to avoid a sparse array. */ -let ngStaticData: (LNodeStatic | null)[]; +let ngStaticData: NgStaticData; /** * State of the current view being processed. */ -let currentView: ViewState = createViewState(null !, null !); +let currentView: ViewState = createViewState(null !, null !, []); let currentQuery: QueryState|null; @@ -68,18 +72,6 @@ let creationMode: boolean; */ let data: any[]; -/** - * An array of directives in the current view - * - * even indices: contain the directive instance. - * odd indices: contain the directive def - * - * We must store the directive def (rather than token | null) - * because we need to be able to access the inputs and outputs - * of directives that aren't diPublic. - */ -let directives: any[]; - /** * Points to the next binding index to read or write to. */ @@ -117,9 +109,9 @@ let cleanup: any[]|null; */ export function enterView(newViewState: ViewState, host: LElement | LView | null): ViewState { const oldViewState = currentView; - directives = newViewState.directives; data = newViewState.data; bindingIndex = newViewState.bindingStartIndex || 0; + ngStaticData = newViewState.ngStaticData; if (creationMode = !data) { // Absence of data implies creationMode. @@ -139,13 +131,13 @@ export function enterView(newViewState: ViewState, host: LElement | LView | null export const leaveView: (newViewState: ViewState) => void = enterView as any; -export function createViewState(viewId: number, renderer: Renderer3): ViewState { +export function createViewState(viewId: number, renderer: Renderer3, ngStaticData: NgStaticData): ViewState { const newView = { parent: currentView, id: viewId, // -1 for component views node: null !, // until we initialize it in createNode. data: null !, // Hack use as a marker for creationMode - directives: [], + ngStaticData: ngStaticData, cleanup: null, renderer: renderer, child: null, @@ -206,10 +198,10 @@ export function createLNode( data[index] = node; // Every node adds a value to the static data array to avoid a sparse array - if (ngStaticData && index >= ngStaticData.length) { + if (index >= ngStaticData.length) { ngStaticData[index] = null; - } else if (ngStaticData) { - node.staticData = ngStaticData[index]; + } else { + node.staticData = ngStaticData[index] as LNodeStatic; } // Now link ourselves into the tree. @@ -248,9 +240,9 @@ export function createLNode( export function renderTemplate(host: LElement, template: ComponentTemplate, context: T) { const hostView = host.data !; ngDevMode && assertNotEqual(hostView, null, 'hostView'); + hostView.ngStaticData = getTemplateStatic(template); const oldView = enterView(hostView, host); try { - ngStaticData = template.ngStaticData || (template.ngStaticData = [] as never); template(context, creationMode); } finally { leaveView(oldView); @@ -345,13 +337,19 @@ export function elementCreate( throw 'for now name is required'; } else { native = renderer.createElement(name); + + let componentView: ViewState | null = null; + if (isHostElement) { + const ngStaticData = getTemplateStatic((nameOrComponentDef as ComponentDef).template); + componentView = addToViewTree(createViewState(-1, renderer, ngStaticData)); + } + // Only component views should be added to the view tree directly. Embedded views are // accessed through their containers because they may be removed / re-added later. - node = createLNode( - index, LNodeFlags.Element, native, - isHostElement ? addToViewTree(createViewState(-1, renderer)) : null); + node = createLNode(index, LNodeFlags.Element, native, componentView); if (node.staticData == null) { + ngDevMode && assertDataInRange(index - 1); node.staticData = ngStaticData[index] = createStaticData(name, attrs || null, null); } @@ -362,6 +360,17 @@ export function elementCreate( return native; } +/** + * Gets static data from a template function or creates a new static + * data array if it doesn't already exist. + * + * @param template The template from which to get static data + * @returns NgStaticData + */ +function getTemplateStatic(template: ComponentTemplate): NgStaticData { + return template.ngStaticData || (template.ngStaticData = [] as never); +} + function setUpAttributes(native: RElement, attrs: string[]): void { ngDevMode && assertEqual(attrs.length % 2, 0, 'attrs.length % 2'); const isFnRenderer = (renderer as Renderer3Fn).setAttribute; @@ -381,7 +390,7 @@ export function createError(text: string, token: any) { * * @param elementOrSelector Render element or CSS selector to locate the element. */ -export function elementHost(elementOrSelector: RElement | string) { +export function elementHost(elementOrSelector: RElement | string, def: ComponentDef) { ngDevMode && assertDataInRange(-1); const rNode = typeof elementOrSelector === 'string' ? ((renderer as Renderer3Fn).selectRootElement ? @@ -395,7 +404,7 @@ export function elementHost(elementOrSelector: RElement | string) { throw createError('Host node is required:', elementOrSelector); } } - createLNode(0, LNodeFlags.Element, rNode, createViewState(-1, renderer)); + createLNode(0, LNodeFlags.Element, rNode, createViewState(-1, renderer, getTemplateStatic(def.template))); } @@ -446,9 +455,9 @@ export function listenerCreate( */ function outputCreate(outputs: (number | string)[], listener: Function): void { for (let i = 0; i < outputs.length; i += 2) { - ngDevMode && assertDirectivesInRange((outputs[i] as number) << 1); + ngDevMode && assertDataInRange(outputs[i] as number); const subscription = - directives[(outputs[i] as number) << 1][outputs[i | 1]].subscribe(listener); + data[outputs[i] as number][outputs[i | 1]].subscribe(listener); cleanup !.push(subscription.unsubscribe, subscription); } } @@ -512,8 +521,7 @@ export function elementProperty(index: number, propName: string, value: T | N let staticData: LNodeStatic|null = node.staticData !; // if staticData.inputs is undefined, a listener has created output staticData, but inputs haven't - // yet been - // checked + // yet been checked if (staticData.inputs === undefined) { // mark inputs as checked staticData.inputs = null; @@ -541,7 +549,8 @@ function createStaticData( attrs, initialInputs: undefined, inputs: undefined, - outputs: undefined, containerStatic + outputs: undefined, + containerStatic: containerStatic }; } @@ -551,8 +560,8 @@ function createStaticData( */ function setInputsForProperty(inputs: (number | string)[], value: any): void { for (let i = 0; i < inputs.length; i += 2) { - ngDevMode && assertDirectivesInRange(inputs[i] as number << 1); - directives[(inputs[i] as number) << 1][inputs[i | 1]] = value; + ngDevMode && assertDataInRange(inputs[i] as number); + data[inputs[i] as number][inputs[i | 1]] = value; } } @@ -568,7 +577,7 @@ function generateMinifiedData(flags: number, data: LNodeStatic, isInputData = fa const size = (flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT; for (let i = start, ii = start + size; i < ii; i++) { - const directiveDef: DirectiveDef = directives[(i << 1) | 1]; + const directiveDef: DirectiveDef = ngStaticData ![i] as DirectiveDef; const minifiedPropertyMap: {[minifiedKey: string]: string} = isInputData ? directiveDef.inputs : directiveDef.outputs; for (let unminifiedKey in minifiedPropertyMap) { @@ -716,11 +725,10 @@ export function directiveCreate(index: number, directive: T, directiveDef: Di export function directiveCreate( index: number, directive?: T, directiveDef?: DirectiveDef): T { let instance; - const index2 = index << 1; if (directive == null) { // return existing - ngDevMode && assertDirectivesInRange(index2); - instance = directives[index2]; + ngDevMode && assertDataInRange(index); + instance = data[index]; } else { ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); ngDevMode && assertPreviousIsParent(); @@ -734,19 +742,26 @@ export function directiveCreate( } previousOrParentNode !.flags = flags; - ngDevMode && assertDirectivesInRange(index2 - 1); + ngDevMode && assertDataInRange(index - 1); Object.defineProperty( directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode}); - directives[index2] = instance = directive; - directives[index2 | 1] = directiveDef; + data[index] = instance = directive; + + if (index >= ngStaticData.length) { + ngStaticData[index] = directiveDef !; + } + const diPublic = directiveDef !.diPublic; if (diPublic) { diPublic(directiveDef !); } - const nodeBindings: LNodeStatic|null = previousOrParentNode.staticData; - if (nodeBindings && nodeBindings.attrs) - setInputsFromAttrs(instance, directiveDef !.inputs, nodeBindings); + + const staticData: LNodeStatic|null = previousOrParentNode.staticData !; + if (staticData && staticData.attrs) { + setInputsFromAttrs(instance, directiveDef !.inputs, staticData); + } } + return instance; } @@ -936,31 +951,33 @@ export function viewCreate(viewBlockId: number): boolean { enterView((existingView as LView).data, previousOrParentNode as LView); } else { // When we create a new View, we always reset the state of the instructions. - const newViewState = createViewState(viewBlockId, renderer); + const newViewState = createViewState(viewBlockId, renderer, initViewStaticData(viewBlockId, container)); enterView(newViewState, createLNode(null, LNodeFlags.View, null, newViewState)); containerState.nextIndex++; } - setNgStaticDataForView(viewBlockId); return !viewUpdateMode; } /** - * Each embedded view needs to set the global ngStaticData variable to the static data for that - * view. - * Otherwise, the view's static data for a particular node would overwrite the static - * data for a node in the view above it with the same index (since it's in the same template). + * Initialize the static data for the active view. + * + * Each embedded view needs to set the global ngStaticData variable to the static data for + * that view. Otherwise, the view's static data for a particular node would overwrite + * the staticdata for a node in the view above it with the same index (since it's in the + * same template). * * @param viewIndex The index of the view's static data in containerStatic + * @param parent The parent container in which to look for the view's static data + * @returns NgStaticData */ -function setNgStaticDataForView(viewIndex: number): void { - ngDevMode && assertNodeType(previousOrParentNode.parent !, LNodeFlags.Container); - const containerStatic = - (previousOrParentNode.parent !.staticData as LContainerStatic).containerStatic; +function initViewStaticData(viewIndex: number, parent: LContainer): NgStaticData { + ngDevMode && assertNodeType(parent, LNodeFlags.Container); + const containerStatic = (parent !.staticData as LContainerStatic).containerStatic; if (viewIndex >= containerStatic.length || containerStatic[viewIndex] == null) { containerStatic[viewIndex] = []; } - ngStaticData = containerStatic[viewIndex]; + return containerStatic[viewIndex]; } /** @@ -998,18 +1015,14 @@ export const refreshComponent: const element = data ![elementIndex] as LElement; ngDevMode && assertNodeType(element, LNodeFlags.Element); ngDevMode && assertNotEqual(element.data, null, 'isComponent'); - ngDevMode && assertDirectivesInRange(directiveIndex << 1); + ngDevMode && assertDataInRange(directiveIndex); const hostView = element.data !; ngDevMode && assertNotEqual(hostView, null, 'hostView'); - const directive = directives[directiveIndex << 1]; + const directive = data[directiveIndex]; const oldView = enterView(hostView, element); - const oldNgStaticData = ngStaticData; try { - const _template = template || this !.template; - ngStaticData = _template.ngStaticData || (_template.ngStaticData = [] as never); - _template(directive, creationMode); + (template || this !.template)(directive, creationMode); } finally { - ngStaticData = oldNgStaticData; leaveView(oldView); } }; @@ -1557,6 +1570,11 @@ function valueInData(data: any[], index: number, value?: T): T { if (value === undefined) { value = data[index]; } else { + // We don't store any static data for local variables, so the first time + // we see the template, we should store as null to avoid a sparse array + if (index >= ngStaticData.length) { + ngStaticData[index] = null; + } data[index] = value; } return value !; @@ -1585,6 +1603,3 @@ function assertDataInRange(index: number, arr?: any[]) { assertLessThan(arr ? arr.length : 0, index, 'data.length'); } -function assertDirectivesInRange(index: number) { - assertLessThan(directives ? directives.length : 0, index, 'directives.length'); -} diff --git a/packages/core/src/render3/interfaces.ts b/packages/core/src/render3/interfaces.ts index a9b46fbb40..4a6cc20037 100644 --- a/packages/core/src/render3/interfaces.ts +++ b/packages/core/src/render3/interfaces.ts @@ -7,7 +7,7 @@ */ import {ElementRef, Injector, QueryList, TemplateRef, Type, ViewContainerRef} from '../core'; -import {ComponentTemplate} from './public_interfaces'; +import {ComponentTemplate, DirectiveDef} from './public_interfaces'; import {RComment, RElement, RText, Renderer3} from './renderer'; declare global { @@ -49,8 +49,7 @@ export const enum LNodeFlags { * being processed and restored when the child `View` is done. * * Keeping separate state for each view facilities view insertion / deletion, so we - * don't have to edit the nodes array or directives array based on which views - * are present. + * don't have to edit the data array based on which views are present. */ export interface ViewState { /** @@ -79,38 +78,6 @@ export interface ViewState { */ readonly renderer: Renderer3; - /** - * This array stores all element/text/container nodes created inside this view - * and their bindings. Stored as an array rather than a linked list so we can - * look up nodes directly in the case of forward declaration or bindings - * (e.g. E(1)).. - * - * All bindings for a given view are stored in the order in which they - * appear in the template, starting with `bindingStartIndex`. - * We use `bindingIndex` to internally keep track of which binding - * is currently active. - * - * NOTE: We also use nodes == null as a marker for creationMode. We - * do this by creating ViewState in incomplete state with nodes == null - * and we initialize it on first run. - */ - readonly data: any[]; - - /** - * All directives created inside this view. Stored as an array - * rather than a linked list so we can look up directives directly - * in the case of forward declaration or DI. - * - * The array alternates between instances and directive tokens. - * - even indices: contain the directive token (type) - * - odd indices: contain the directive def - * - * We must store the directive def (rather than token | null) - * because we need to be able to access the inputs and outputs - * of directives that aren't diPublic. - */ - readonly directives: any[]; - /** * The binding start index is the index at which the nodes array * starts to store bindings only. Saving this value ensures that we @@ -159,6 +126,30 @@ export interface ViewState { * in the same container. We need a way to link component views as well. */ next: ViewState|ContainerState|null; + + /** + * This array stores all element/text/container nodes created inside this view + * and their bindings. Stored as an array rather than a linked list so we can + * look up nodes directly in the case of forward declaration or bindings + * (e.g. E(1)).. + * + * All bindings for a given view are stored in the order in which they + * appear in the template, starting with `bindingStartIndex`. + * We use `bindingIndex` to internally keep track of which binding + * is currently active. + * + * NOTE: We also use data == null as a marker for creationMode. We + * do this by creating ViewState in incomplete state with nodes == null + * and we initialize it on first run. + */ + readonly data: any[]; + + /** + * The static data array for the current view. We need a reference to this so we + * can easily walk up the node tree in DI and get the ngStaticData array associated + * with a node (where the directive defs are stored). + */ + ngStaticData: (LNodeStatic|DirectiveDef|null)[]; } export interface LNodeInjector { @@ -169,9 +160,9 @@ export interface LNodeInjector { readonly parent: LNodeInjector|null; /** - * Allows access to the directives array in that node's view and to + * Allows access to the directives array in that node's static data and to * the node's flags (for starting directive index and directive size). Necessary - * for DI to retrieve a directive from the directives array if injector indicates + * for DI to retrieve a directive from the data array if injector indicates * it is there. */ readonly node: LElement|LContainer; @@ -446,6 +437,9 @@ export type InitialInputData = (InitialInputs | null)[]; */ export type InitialInputs = string[]; +/** The type of the global ngStaticData array. */ +export type NgStaticData = (LNodeStatic | DirectiveDef | null)[]; + /** * LNode binding data for a particular node that is shared between all templates * of a specific type. diff --git a/packages/core/src/render3/query.ts b/packages/core/src/render3/query.ts index 8e9a9ff236..13186e9fab 100644 --- a/packages/core/src/render3/query.ts +++ b/packages/core/src/render3/query.ts @@ -10,6 +10,7 @@ import {Observable} from 'rxjs/Observable'; import {QueryList as IQueryList, Type} from '../core'; import {assertNotNull} from './assert'; import {LContainer, LNode, LNodeFlags, LView, QueryState} from './interfaces'; +import {DirectiveDef} from '@angular/core/src/render3/public_interfaces'; @@ -101,14 +102,14 @@ function add(predicate: QueryPredicate| null, node: LNode) { while (predicate) { const type = predicate.type; if (type) { - const directives = node.view.directives; + const ngStaticData = node.view.ngStaticData; const flags = node.flags; for (let i = flags >> LNodeFlags.INDX_SHIFT, ii = i + ((flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT); i < ii; i++) { - const def = directives[i << 1 | 1]; + const def = ngStaticData[i] as DirectiveDef; if (def.diPublic && def.type === type) { - predicate.values.push(directives[i << 1]); + predicate.values.push(node.view.data[i]); } } } diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts index 1b81a39ddb..cd170644cf 100644 --- a/packages/core/test/render3/content_spec.ts +++ b/packages/core/test/render3/content_spec.ts @@ -32,12 +32,12 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, 'content'); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, 'content'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -54,12 +54,12 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, 'content'); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, 'content'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content'); @@ -79,26 +79,26 @@ describe('content projection', () => { m(0, dP()); E(1, GrandChild.ngComponentDef); { - D(0, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); - P(2, 0); + D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); + P(3, 0); } e(); - GrandChild.ngComponentDef.r(0, 1); + GrandChild.ngComponentDef.r(2, 1); } }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'b'); - T(2, 'Hello'); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'b'); + T(3, 'Hello'); e(); - T(3, 'World!'); + T(4, 'World!'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) @@ -118,15 +118,15 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, '('); - C(2); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, '('); + C(3); c(); - T(3, ')'); + T(4, ')'); } e(); } - rC(2); + rC(3); { if (ctx.value) { if (V(0)) { @@ -136,7 +136,7 @@ describe('content projection', () => { } } rc(); - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
()
'); @@ -159,13 +159,13 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - C(1); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + C(2); c(); } e(); } - rC(1); + rC(2); { if (ctx.value) { if (V(0)) { @@ -175,7 +175,7 @@ describe('content projection', () => { } } rc(); - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual(''); @@ -202,15 +202,15 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, '('); - C(2); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, '('); + C(3); c(); - T(3, ')'); + T(4, ')'); } e(); } - rC(2); + rC(3); { if (ctx.value) { if (V(0)) { @@ -225,7 +225,7 @@ describe('content projection', () => { } } rc(); - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
(else)
'); @@ -280,12 +280,12 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, 'content'); + D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, 'content'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -335,12 +335,12 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, 'content'); + D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, 'content'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); @@ -374,12 +374,12 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, 'content'); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, 'content'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content'); @@ -434,12 +434,12 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); - T(1, 'content'); + D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); + T(2, 'content'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content
'); @@ -479,17 +479,17 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span', ['title', 'toFirst']); - { T(2, '1'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span', ['title', 'toFirst']); + { T(3, '1'); } e(); - E(3, 'span', ['title', 'toSecond']); - { T(4, '2'); } + E(4, 'span', ['title', 'toSecond']); + { T(5, '2'); } e(); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); @@ -526,17 +526,17 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span', ['class', 'toFirst']); - { T(2, '1'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span', ['class', 'toFirst']); + { T(3, '1'); } e(); - E(3, 'span', ['class', 'toSecond']); - { T(4, '2'); } + E(4, 'span', ['class', 'toSecond']); + { T(5, '2'); } e(); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); @@ -573,17 +573,17 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span', ['class', 'other toFirst']); - { T(2, '1'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span', ['class', 'other toFirst']); + { T(3, '1'); } e(); - E(3, 'span', ['class', 'toSecond noise']); - { T(4, '2'); } + E(4, 'span', ['class', 'toSecond noise']); + { T(5, '2'); } e(); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); @@ -619,17 +619,17 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span', ['class', 'toFirst']); - { T(2, '1'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span', ['class', 'toFirst']); + { T(3, '1'); } e(); - E(3, 'span', ['class', 'toSecond']); - { T(4, '2'); } + E(4, 'span', ['class', 'toSecond']); + { T(5, '2'); } e(); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); @@ -665,18 +665,18 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span', ['class', 'toFirst']); - { T(2, '1'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span', ['class', 'toFirst']); + { T(3, '1'); } e(); - E(3, 'span'); - { T(4, 'remaining'); } + E(4, 'span'); + { T(5, 'remaining'); } e(); - T(5, 'more remaining'); + T(6, 'more remaining'); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); @@ -713,14 +713,14 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span'); - { T(2, '1'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span'); + { T(3, '1'); } e(); - E(3, 'span', ['class', 'toSecond']); - { T(4, '2'); } + E(4, 'span', ['class', 'toSecond']); + { T(5, '2'); } e(); - T(5, 'remaining'); + T(6, 'remaining'); } e(); } @@ -765,14 +765,14 @@ describe('content projection', () => { m(0, dP()); E(1, GrandChild.ngComponentDef); { - D(0, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); - P(2, 0); - E(3, 'span'); - { T(4, 'in child template'); } + D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); + P(3, 0); + E(4, 'span'); + { T(5, 'in child template'); } e(); } e(); - GrandChild.ngComponentDef.r(0, 1); + GrandChild.ngComponentDef.r(2, 1); } }); @@ -787,14 +787,14 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(1, 'span'); - { T(2, 'parent content'); } + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + E(2, 'span'); + { T(3, 'parent content'); } e(); } e(); } - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); @@ -828,13 +828,13 @@ describe('content projection', () => { if (cm) { E(0, Child.ngComponentDef); { - D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - C(1, undefined, 'div'); + D(1, Child.ngComponentDef.n(), Child.ngComponentDef); + C(2, undefined, 'div'); c(); } e(); } - rC(1); + rC(2); { if (true) { if (V(0)) { @@ -846,7 +846,7 @@ describe('content projection', () => { } } rc(); - Child.ngComponentDef.r(0, 0); + Child.ngComponentDef.r(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index cbe028c6a9..f31ebcebb9 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/packages/core/test/render3/di_spec.ts @@ -27,12 +27,12 @@ describe('di', () => { if (cm) { E(0, 'div'); { - D(0, DirectiveDef.n(), DirectiveDef); - T(1); + D(1, DirectiveDef.n(), DirectiveDef); + T(2); } e(); } - t(1, b(D(0).value)); + t(2, b(D(1).value)); } expect(renderToHtml(Template, {})).toEqual('
Created
'); @@ -66,18 +66,18 @@ describe('di', () => { if (cm) { E(0, 'div'); { - D(0, DirectiveADef.n(), DirectiveADef); - E(1, 'span'); + D(1, DirectiveADef.n(), DirectiveADef); + E(2, 'span'); { - D(1, DirectiveBDef.n(), DirectiveBDef); - D(2, DirectiveCDef.n(), DirectiveCDef); - T(2); + D(3, DirectiveBDef.n(), DirectiveBDef); + D(4, DirectiveCDef.n(), DirectiveCDef); + T(5); } e(); } e(); } - t(2, b(D(2).value)); + t(5, b(D(4).value)); } expect(renderToHtml(Template, {})).toEqual('
AB
'); @@ -113,13 +113,13 @@ describe('di', () => { if (cm) { E(0, 'div'); { - D(0, DirectiveDef.n(), DirectiveDef); - D(1, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); - T(1); + D(1, DirectiveDef.n(), DirectiveDef); + D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); + T(3); } e(); } - t(1, b2('', D(0).value, '-', D(1).value, '')); + t(3, b2('', D(1).value, '-', D(2).value, '')); } expect(renderToHtml(Template, {})).toEqual('
ElementRef-true
'); @@ -156,13 +156,13 @@ describe('di', () => { if (cm) { C(0, function() {}); { - D(0, DirectiveDef.n(), DirectiveDef); - D(1, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); + D(1, DirectiveDef.n(), DirectiveDef); + D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); } c(); - T(1); + T(3); } - t(1, b2('', D(0).value, '-', D(1).value, '')); + t(3, b2('', D(1).value, '-', D(2).value, '')); } expect(renderToHtml(Template, {})).toEqual('TemplateRef-true'); @@ -198,13 +198,13 @@ describe('di', () => { if (cm) { E(0, 'div'); { - D(0, DirectiveDef.n(), DirectiveDef); - D(1, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); - T(1); + D(1, DirectiveDef.n(), DirectiveDef); + D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); + T(3); } e(); } - t(1, b2('', D(0).value, '-', D(1).value, '')); + t(3, b2('', D(1).value, '-', D(2).value, '')); } expect(renderToHtml(Template, {})).toEqual('
ViewContainerRef-true
'); @@ -285,24 +285,24 @@ describe('di', () => { if (cm) { E(0, 'div'); { - D(0, ParentDirectiveDef.n(), ParentDirectiveDef); - C(1); + D(1, ParentDirectiveDef.n(), ParentDirectiveDef); + C(2); c(); } e(); } - rC(1); + rC(2); { if (V(0)) { E(0, 'span'); { - D(0, ChildDirectiveDef.n(), ChildDirectiveDef); - D(1, Child2DirectiveDef.n(), Child2DirectiveDef); - T(1); + D(1, ChildDirectiveDef.n(), ChildDirectiveDef); + D(2, Child2DirectiveDef.n(), Child2DirectiveDef); + T(3); } e(); } - t(1, b2('', D(0).value, '-', D(1).value, '')); + t(3, b2('', D(1).value, '-', D(2).value, '')); v(); } rc(); @@ -318,7 +318,7 @@ describe('di', () => { describe('getOrCreateNodeInjector', () => { it('should handle initial undefined state', () => { - const contentView = createViewState(-1, null !); + const contentView = createViewState(-1, null !, []); const oldView = enterView(contentView, null !); try { const parent = createLNode(0, LNodeFlags.Element, null, null); diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index 92458cbc70..13e298b8b2 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/packages/core/test/render3/directive_spec.ts @@ -31,10 +31,10 @@ describe('directive', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'span'); - { D(0, DirectiveDef.n(), DirectiveDef); } + { D(1, DirectiveDef.n(), DirectiveDef); } e(); } - DirectiveDef.r(0, 0); + DirectiveDef.r(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 06617a020f..6267d7b84e 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -33,11 +33,11 @@ describe('exports', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, MyComponent.ngComponentDef); - { D(0, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } e(); - T(1); + T(2); } - t(1, D(0).name); + t(2, D(1).name); } class MyComponent { @@ -79,13 +79,13 @@ describe('exports', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, MyComponent.ngComponentDef); - { D(0, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } e(); - E(1, 'div'); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(2, 'div'); + { D(3, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); } - p(1, 'myDir', b(D(0))); + p(2, 'myDir', b(D(1))); } renderToHtml(Template, {}); @@ -98,11 +98,11 @@ describe('exports', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div'); - D(0, SomeDirDef.n(), SomeDirDef); + D(1, SomeDirDef.n(), SomeDirDef); e(); - T(1); + T(2); } - t(1, D(0).name); + t(2, D(1).name); } class SomeDir { @@ -208,13 +208,13 @@ describe('exports', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div'); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); - E(1, MyComponent.ngComponentDef); - { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + E(2, MyComponent.ngComponentDef); + { D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } e(); } - p(0, 'myDir', b(D(1))); + p(0, 'myDir', b(D(3))); } renderToHtml(Template, {}); @@ -229,13 +229,13 @@ describe('exports', () => { T(0); T(1); E(2, 'comp'); - { D(0, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + { D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } e(); - E(3, 'input', ['value', 'one']); + E(4, 'input', ['value', 'one']); e(); } - let myInput = E(3); - let myComp = D(0) as MyComponent; + let myInput = E(4); + let myComp = D(3) as MyComponent; t(0, b(myInput && (myInput as any).value)); t(1, b(myComp && myComp.name)); } diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 5596cd4933..5ac13201da 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -231,10 +231,10 @@ describe('iv integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, TodoComponent.ngComponentDef); - { D(0, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } e(); } - TodoComponent.ngComponentDef.r(0, 0); + TodoComponent.ngComponentDef.r(1, 0); } expect(renderToHtml(Template, null)).toEqual('

Todo one

'); @@ -244,11 +244,11 @@ describe('iv integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, TodoComponent.ngComponentDef); - { D(0, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } e(); - T(1, 'two'); + T(2, 'two'); } - TodoComponent.ngComponentDef.r(0, 0); + TodoComponent.ngComponentDef.r(1, 0); } expect(renderToHtml(Template, null)).toEqual('

Todo one

two'); }); @@ -261,14 +261,14 @@ describe('iv integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, TodoComponent.ngComponentDef); - { D(0, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } - e(); - E(1, TodoComponent.ngComponentDef); { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } e(); + E(2, TodoComponent.ngComponentDef); + { D(3, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + e(); } - TodoComponent.ngComponentDef.r(0, 0); - TodoComponent.ngComponentDef.r(1, 1); + TodoComponent.ngComponentDef.r(1, 0); + TodoComponent.ngComponentDef.r(3, 2); } expect(renderToHtml(Template, null)) .toEqual('

Todo one

Todo one

'); @@ -303,12 +303,12 @@ describe('iv integration test', () => { if (cm) { E(0, TodoComponentHostBinding.ngComponentDef); { - D(0, TodoComponentHostBinding.ngComponentDef.n(), + D(1, TodoComponentHostBinding.ngComponentDef.n(), TodoComponentHostBinding.ngComponentDef); } e(); } - TodoComponentHostBinding.ngComponentDef.r(0, 0); + TodoComponentHostBinding.ngComponentDef.r(1, 0); } expect(renderToHtml(Template, {})).toEqual('one'); @@ -338,10 +338,10 @@ describe('iv integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, MyComp.ngComponentDef); - { D(0, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } e(); } - MyComp.ngComponentDef.r(0, 0); + MyComp.ngComponentDef.r(1, 0); } expect(renderToHtml(Template, null)).toEqual('

Bess

'); @@ -385,11 +385,11 @@ describe('iv integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, MyComp.ngComponentDef); - { D(0, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } e(); } p(0, 'condition', b(ctx.condition)); - MyComp.ngComponentDef.r(0, 0); + MyComp.ngComponentDef.r(1, 0); } expect(renderToHtml(Template, {condition: true})).toEqual('
text
'); diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index 94b7f58ee3..d2a539690f 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/packages/core/test/render3/lifecycle_spec.ts @@ -20,10 +20,10 @@ describe('lifecycles', () => { let Parent = createOnDestroyComponent('parent', function(ctx: any, cm: boolean) { if (cm) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); } - Comp.ngComponentDef.r(0, 0); + Comp.ngComponentDef.r(1, 0); }); function createOnDestroyComponent(name: string, template: ComponentTemplate) { @@ -62,10 +62,10 @@ describe('lifecycles', () => { if (ctx.condition) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); } - Comp.ngComponentDef.r(0, 0); + Comp.ngComponentDef.r(1, 0); v(); } } @@ -95,16 +95,16 @@ describe('lifecycles', () => { if (ctx.condition) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } - e(); - E(1, Comp.ngComponentDef); { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); + E(2, Comp.ngComponentDef); + { D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + e(); } p(0, 'val', b('1')); - p(1, 'val', b('2')); - Comp.ngComponentDef.r(0, 0); - Comp.ngComponentDef.r(1, 1); + p(2, 'val', b('2')); + Comp.ngComponentDef.r(1, 0); + Comp.ngComponentDef.r(3, 2); v(); } } @@ -135,10 +135,10 @@ describe('lifecycles', () => { if (ctx.condition) { if (V(0)) { E(0, Parent.ngComponentDef); - { D(0, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } e(); } - Parent.ngComponentDef.r(0, 0); + Parent.ngComponentDef.r(1, 0); v(); } } @@ -163,10 +163,10 @@ describe('lifecycles', () => { let Grandparent = createOnDestroyComponent('grandparent', function(ctx: any, cm: boolean) { if (cm) { E(0, Parent.ngComponentDef); - { D(0, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } e(); } - Parent.ngComponentDef.r(0, 0); + Parent.ngComponentDef.r(1, 0); }); function Template(ctx: any, cm: boolean) { @@ -179,10 +179,10 @@ describe('lifecycles', () => { if (ctx.condition) { if (V(0)) { E(0, Grandparent.ngComponentDef); - { D(0, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); } + { D(1, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); } e(); } - Grandparent.ngComponentDef.r(0, 0); + Grandparent.ngComponentDef.r(1, 0); v(); } } @@ -216,32 +216,32 @@ describe('lifecycles', () => { if (ctx.condition) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } - e(); - C(1); - c(); - E(2, Comp.ngComponentDef); { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); + C(2); + c(); + E(3, Comp.ngComponentDef); + { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + e(); } p(0, 'val', b('1')); - Comp.ngComponentDef.r(0, 0); - rC(1); + Comp.ngComponentDef.r(1, 0); + rC(2); { if (ctx.condition2) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); } p(0, 'val', b('2')); - Comp.ngComponentDef.r(0, 0); + Comp.ngComponentDef.r(1, 0); v(); } } rc(); - p(2, 'val', b('3')); - Comp.ngComponentDef.r(1, 2); + p(3, 'val', b('3')); + Comp.ngComponentDef.r(4, 3); v(); } } @@ -294,32 +294,32 @@ describe('lifecycles', () => { if (ctx.condition) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } - e(); - C(1); - c(); - E(2, Comp.ngComponentDef); { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); + C(2); + c(); + E(3, Comp.ngComponentDef); + { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + e(); } p(0, 'val', b('1')); - Comp.ngComponentDef.r(0, 0); - rC(1); + Comp.ngComponentDef.r(1, 0); + rC(2); { for (let j = 2; j < ctx.len; j++) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); } p(0, 'val', b(j)); - Comp.ngComponentDef.r(0, 0); + Comp.ngComponentDef.r(1, 0); v(); } } rc(); - p(2, 'val', b('5')); - Comp.ngComponentDef.r(1, 2); + p(3, 'val', b('5')); + Comp.ngComponentDef.r(4, 3); v(); } } @@ -380,16 +380,16 @@ describe('lifecycles', () => { } e(); E(2, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); - E(3, 'button'); + E(4, 'button'); { L('click', ctx.onClick.bind(ctx)); - T(4, 'Click me'); + T(5, 'Click me'); } e(); } - Comp.ngComponentDef.r(0, 2); + Comp.ngComponentDef.r(3, 2); v(); } } diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index 89bb7acc49..c124c833b8 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -204,14 +204,14 @@ describe('event listeners', () => { if (V(0)) { T(0, 'Hello'); E(1, MyComp.ngComponentDef); - { D(0, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + { D(2, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } e(); - E(2, MyComp.ngComponentDef); - { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + E(3, MyComp.ngComponentDef); + { D(4, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } e(); } - MyComp.ngComponentDef.r(0, 1); - MyComp.ngComponentDef.r(1, 2); + MyComp.ngComponentDef.r(2, 1); + MyComp.ngComponentDef.r(4, 3); v(); } } diff --git a/packages/core/test/render3/node_selector_matcher_spec.ts b/packages/core/test/render3/node_selector_matcher_spec.ts index 63c04b75db..ccb1f85f2f 100644 --- a/packages/core/test/render3/node_selector_matcher_spec.ts +++ b/packages/core/test/render3/node_selector_matcher_spec.ts @@ -16,7 +16,7 @@ function testLStaticData(tagName: string, attrs: string[] | null): LNodeStatic { initialInputs: undefined, inputs: undefined, outputs: undefined, - containerStatic: null + containerStatic: null, }; } diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index d306b7fe7c..5ca50924e1 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -46,12 +46,12 @@ describe('outputs', () => { if (cm) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); } e(); } - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); } let counter = 0; @@ -71,13 +71,13 @@ describe('outputs', () => { if (cm) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); L('reset', ctx.onReset.bind(ctx)); } e(); } - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); } let counter = 0; @@ -98,12 +98,12 @@ describe('outputs', () => { if (cm) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', () => ctx.counter++); } e(); } - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); } const ctx = {counter: 0}; @@ -135,12 +135,12 @@ describe('outputs', () => { if (V(0)) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); } e(); } - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); v(); } } @@ -189,12 +189,12 @@ describe('outputs', () => { if (V(0)) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); } e(); } - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); v(); } } @@ -262,16 +262,16 @@ describe('outputs', () => { e(); E(2, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(3, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); } e(); - E(3, DestroyComp.ngComponentDef); - { D(1, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); } + E(4, DestroyComp.ngComponentDef); + { D(5, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); } e(); } - ButtonToggle.ngComponentDef.r(0, 2); - DestroyComp.ngComponentDef.r(1, 3); + ButtonToggle.ngComponentDef.r(3, 2); + DestroyComp.ngComponentDef.r(5, 4); v(); } } @@ -318,7 +318,7 @@ describe('outputs', () => { if (cm) { E(0, 'button'); { - D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); + D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); L('click', ctx.onClick.bind(ctx)); } e(); @@ -344,13 +344,13 @@ describe('outputs', () => { if (cm) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); L('change', ctx.onChange.bind(ctx)); } e(); } - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); } let counter = 0; @@ -378,14 +378,14 @@ describe('outputs', () => { if (cm) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); L('change', ctx.onChange.bind(ctx)); } e(); } p(0, 'change', b(ctx.change)); - ButtonToggle.ngComponentDef.r(0, 0); + ButtonToggle.ngComponentDef.r(1, 0); } let counter = 0; @@ -426,17 +426,18 @@ describe('outputs', () => { if (V(0)) { E(0, ButtonToggle.ngComponentDef); { - D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); + D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); } e(); } + ButtonToggle.ngComponentDef.r(1, 0); v(); } else { if (V(1)) { E(0, 'div'); { - D(0, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); + D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); L('change', ctx.onChange.bind(ctx)); } e(); diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index beb87b3e5b..d0bb71df45 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -92,9 +92,9 @@ describe('elementProperty', () => { if (cm) { E(0, 'button'); { - D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - T(1, 'Click me'); + D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); + D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); + T(3, 'Click me'); } e(); } @@ -122,8 +122,8 @@ describe('elementProperty', () => { if (cm) { E(0, 'button'); { - D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - T(1, 'Click me'); + D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); + T(2, 'Click me'); } e(); } @@ -160,11 +160,11 @@ describe('elementProperty', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); } p(0, 'id', b(ctx.id)); - Comp.ngComponentDef.r(0, 0); + Comp.ngComponentDef.r(1, 0); } expect(renderToHtml(Template, {id: 1})).toEqual(``); @@ -192,9 +192,9 @@ describe('elementProperty', () => { if (cm) { E(0, 'button'); { - D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - D(1, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef); - T(1, 'Click me'); + D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); + D(2, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef); + T(3, 'Click me'); } e(); } @@ -218,9 +218,9 @@ describe('elementProperty', () => { if (cm) { E(0, 'button'); { - D(0, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); + D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); L('click', ctx.onClick.bind(ctx)); - T(1, 'Click me'); + T(2, 'Click me'); } e(); } @@ -262,15 +262,15 @@ describe('elementProperty', () => { if (cm) { E(0, 'button'); { - D(0, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef); - T(1, 'Click me'); + D(1, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef); + T(2, 'Click me'); } e(); - C(2); + C(3); c(); } p(0, 'id', b(ctx.id1)); - rC(2); + rC(3); { if (ctx.condition) { if (V(0)) { @@ -284,8 +284,8 @@ describe('elementProperty', () => { if (V(1)) { E(0, 'button'); { - D(0, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - T(1, 'Click me too'); + D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); + T(2, 'Click me too'); } e(); } @@ -337,7 +337,7 @@ describe('elementProperty', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div', ['role', 'button']); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); } } @@ -352,7 +352,7 @@ describe('elementProperty', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div', ['role', 'button']); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); } p(0, 'role', b(ctx.role)); @@ -372,8 +372,8 @@ describe('elementProperty', () => { if (cm) { E(0, 'div', ['role', 'button']); { - D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); - D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); + D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); + D(2, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } e(); } @@ -390,7 +390,7 @@ describe('elementProperty', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div', ['role', 'button', 'dir', 'rtl']); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); } } @@ -407,7 +407,7 @@ describe('elementProperty', () => { if (cm) { E(0, 'div', ['role', 'button']); { - D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); + D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); L('change', ctx.onChange.bind(ctx)); } e(); @@ -434,10 +434,10 @@ describe('elementProperty', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div', ['role', 'button', 'dir', 'rtl']); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); - E(1, 'div', ['role', 'listbox']); - { D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } + E(2, 'div', ['role', 'listbox']); + { D(3, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } e(); } } @@ -462,17 +462,17 @@ describe('elementProperty', () => { function Template(ctx: any, cm: boolean) { if (cm) { E(0, 'div', ['role', 'listbox']); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); - C(1); + C(2); c(); } - rC(1); + rC(2); { if (ctx.condition) { if (V(0)) { E(0, 'div', ['role', 'button']); - { D(0, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } + { D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } e(); } v(); @@ -510,11 +510,11 @@ describe('elementProperty', () => { template: function(ctx: any, cm: boolean) { if (cm) { E(0, 'div', ['role', 'button']); - { D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } e(); - T(1); + T(2); } - t(1, b(D(0).role)); + t(2, b(D(1).role)); }, factory: () => new Comp() }); @@ -535,10 +535,10 @@ describe('elementProperty', () => { for (let i = 0; i < 2; i++) { if (V(0)) { E(0, Comp.ngComponentDef); - { D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } e(); } - Comp.ngComponentDef.r(0, 0); + Comp.ngComponentDef.r(1, 0); v(); } } diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index 1c383e5ade..edb77de5e5 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -33,9 +33,9 @@ describe('query', () => { m(1, Q(Child, true)); E(2, Child.ngComponentDef); { - child1 = D(0, Child.ngComponentDef.n(), Child.ngComponentDef); - E(3, Child.ngComponentDef); - { child2 = D(1, Child.ngComponentDef.n(), Child.ngComponentDef); } + child1 = D(3, Child.ngComponentDef.n(), Child.ngComponentDef); + E(4, Child.ngComponentDef); + { child2 = D(5, Child.ngComponentDef.n(), Child.ngComponentDef); } e(); } e(); diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 7ec8b79098..0a9062cd95 100644 --- a/packages/core/test/render3/render_util.ts +++ b/packages/core/test/render3/render_util.ts @@ -37,7 +37,7 @@ export function resetDOM() { requestAnimationFrame.queue = []; containerEl = document.createElement('div'); containerEl.setAttribute('host', ''); - host = createLNode(null, LNodeFlags.Element, containerEl, createViewState(-1, activeRenderer)); + host = createLNode(null, LNodeFlags.Element, containerEl, createViewState(-1, activeRenderer, null !)); // TODO: assert that the global state is clean (e.g. ngData, previousOrParentNode, etc) }