honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): store directive defs in static data (#20855)

Browse Source 
PR Close #20855
This commit is contained in:
Kara Erickson 2017-12-11 14:08:52 -08:00 committed by Igor Minar
parent f3d38ce053
commit 8fdb1e09c1
17 changed files with 399 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/core/src/render3/component.ts
View File

@ -143,10 +143,12 @@ export function renderComponent<T>(
const renderer = opts.renderer || document; const renderer = opts.renderer || document;
const componentDef = componentType.ngComponentDef; const componentDef = componentType.ngComponentDef;
let component: T; let component: T;
const oldView = enterView(createViewState(-1, renderer), null); const oldView = enterView(createViewState(-1, renderer, []), null);
try { try {
elementHost(opts.host || componentDef.tag); // Create element node at index 0 in data array
component = directiveCreate(0, componentDef.n(), componentDef); 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 { } finally {
leaveView(oldView); leaveView(oldView);
} }
@ -165,7 +167,9 @@ export function detectChanges<T>(component: T) {
ngDevMode && assertNotNull(hostNode.data, 'hostNode.data'); ngDevMode && assertNotNull(hostNode.data, 'hostNode.data');
const oldView = enterView(hostNode.view !, hostNode); const oldView = enterView(hostNode.view !, hostNode);
try { try {
(component.constructor as ComponentType<T>).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<T>).ngComponentDef.r(1, 0);
isDirty = false; isDirty = false;
} finally { } finally {
leaveView(oldView); leaveView(oldView);

14
packages/core/src/render3/di.ts
View File

@ -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 {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 {BLOOM_SIZE, NG_ELEMENT_ID, getOrCreateNodeInjector} from './instructions';
import {LContainer, LNodeFlags, LNodeInjector} from './interfaces'; import {LContainer, LNodeFlags, LNodeInjector} from './interfaces';
import {ComponentTemplate} from './public_interfaces'; import {ComponentTemplate, DirectiveDef} from './public_interfaces';
import {stringify} from './util'; import {stringify} from './util';
export const enum InjectFlags { export const enum InjectFlags {
@ -43,13 +43,11 @@ export function inject<T>(token: Type<T>, flags?: InjectFlags): T {
if (size !== 0) { if (size !== 0) {
size = size >> LNodeFlags.SIZE_SHIFT; size = size >> LNodeFlags.SIZE_SHIFT;
const start = flags >> LNodeFlags.INDX_SHIFT; const start = flags >> LNodeFlags.INDX_SHIFT;
const directives = node.view.directives; const ngStaticData = node.view.ngStaticData;
if (directives) { for (let i = start, ii = start + size; i < ii; i++) {
for (let i = start, ii = start + size; i < ii; i++) { const def = ngStaticData[i] as DirectiveDef<any>;
const def = directives[(i << 1) | 1]; if (def.diPublic && def.type == token) {
if (def.diPublic && def.type == token) { return node.view.data[i];
return directives[i << 1];
}
} }
} }
} }

145
packages/core/src/render3/instructions.ts
View File

@ -10,7 +10,11 @@ import './ng_dev_mode';
import {Type} from '../core'; import {Type} from '../core';
import {assertEqual, assertLessThan, assertNotEqual, assertNotNull} from './assert'; 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 {assertNodeType} from './node_assert';
import {appendChild, insertChild, insertView, processProjectedNode, removeView} from './node_manipulation'; import {appendChild, insertChild, insertView, processProjectedNode, removeView} from './node_manipulation';
import {isNodeMatchingSelector} from './node_selector_matcher'; 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 * in the data array. Any nodes that do not have static data store a null
* value to avoid a sparse array. * value to avoid a sparse array.
*/ */
let ngStaticData: (LNodeStatic | null)[]; let ngStaticData: NgStaticData;
/** /**
* State of the current view being processed. * State of the current view being processed.
*/ */
let currentView: ViewState = createViewState(null !, null !); let currentView: ViewState = createViewState(null !, null !, []);
let currentQuery: QueryState|null; let currentQuery: QueryState|null;
@ -68,18 +72,6 @@ let creationMode: boolean;
*/ */
let data: any[]; 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. * 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 { export function enterView(newViewState: ViewState, host: LElement | LView | null): ViewState {
const oldViewState = currentView; const oldViewState = currentView;
directives = newViewState.directives;
data = newViewState.data; data = newViewState.data;
bindingIndex = newViewState.bindingStartIndex || 0; bindingIndex = newViewState.bindingStartIndex || 0;
ngStaticData = newViewState.ngStaticData;
if (creationMode = !data) { if (creationMode = !data) {
// Absence of data implies creationMode. // 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 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 = { const newView = {
parent: currentView, parent: currentView,
id: viewId, // -1 for component views id: viewId, // -1 for component views
node: null !, // until we initialize it in createNode. node: null !, // until we initialize it in createNode.
data: null !, // Hack use as a marker for creationMode data: null !, // Hack use as a marker for creationMode
directives: [], ngStaticData: ngStaticData,
cleanup: null, cleanup: null,
renderer: renderer, renderer: renderer,
child: null, child: null,
@ -206,10 +198,10 @@ export function createLNode(
data[index] = node; data[index] = node;
// Every node adds a value to the static data array to avoid a sparse array // 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; ngStaticData[index] = null;
} else if (ngStaticData) { } else {
node.staticData = ngStaticData[index]; node.staticData = ngStaticData[index] as LNodeStatic;
} }
// Now link ourselves into the tree. // Now link ourselves into the tree.
@ -248,9 +240,9 @@ export function createLNode(
export function renderTemplate<T>(host: LElement, template: ComponentTemplate<T>, context: T) { export function renderTemplate<T>(host: LElement, template: ComponentTemplate<T>, context: T) {
const hostView = host.data !; const hostView = host.data !;
ngDevMode && assertNotEqual(hostView, null, 'hostView'); ngDevMode && assertNotEqual(hostView, null, 'hostView');
hostView.ngStaticData = getTemplateStatic(template);
const oldView = enterView(hostView, host); const oldView = enterView(hostView, host);
try { try {
ngStaticData = template.ngStaticData || (template.ngStaticData = [] as never);
template(context, creationMode); template(context, creationMode);
} finally { } finally {
leaveView(oldView); leaveView(oldView);
@ -345,13 +337,19 @@ export function elementCreate(
throw 'for now name is required'; throw 'for now name is required';
} else { } else {
native = renderer.createElement(name); native = renderer.createElement(name);
let componentView: ViewState | null = null;
if (isHostElement) {
const ngStaticData = getTemplateStatic((nameOrComponentDef as ComponentDef<any>).template);
componentView = addToViewTree(createViewState(-1, renderer, ngStaticData));
}
// Only component views should be added to the view tree directly. Embedded views are // 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. // accessed through their containers because they may be removed / re-added later.
node = createLNode( node = createLNode(index, LNodeFlags.Element, native, componentView);
index, LNodeFlags.Element, native,
isHostElement ? addToViewTree(createViewState(-1, renderer)) : null);
if (node.staticData == null) { if (node.staticData == null) {
ngDevMode && assertDataInRange(index - 1);
node.staticData = ngStaticData[index] = createStaticData(name, attrs || null, null); node.staticData = ngStaticData[index] = createStaticData(name, attrs || null, null);
} }
@ -362,6 +360,17 @@ export function elementCreate(
return native; 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<any>): NgStaticData {
return template.ngStaticData || (template.ngStaticData = [] as never);
}
function setUpAttributes(native: RElement, attrs: string[]): void { function setUpAttributes(native: RElement, attrs: string[]): void {
ngDevMode && assertEqual(attrs.length % 2, 0, 'attrs.length % 2'); ngDevMode && assertEqual(attrs.length % 2, 0, 'attrs.length % 2');
const isFnRenderer = (renderer as Renderer3Fn).setAttribute; 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. * @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<any>) {
ngDevMode && assertDataInRange(-1); ngDevMode && assertDataInRange(-1);
const rNode = typeof elementOrSelector === 'string' ? const rNode = typeof elementOrSelector === 'string' ?
((renderer as Renderer3Fn).selectRootElement ? ((renderer as Renderer3Fn).selectRootElement ?
@ -395,7 +404,7 @@ export function elementHost(elementOrSelector: RElement | string) {
throw createError('Host node is required:', elementOrSelector); 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 { function outputCreate(outputs: (number | string)[], listener: Function): void {
for (let i = 0; i < outputs.length; i += 2) { for (let i = 0; i < outputs.length; i += 2) {
ngDevMode && assertDirectivesInRange((outputs[i] as number) << 1); ngDevMode && assertDataInRange(outputs[i] as number);
const subscription = 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); cleanup !.push(subscription.unsubscribe, subscription);
} }
} }
@ -512,8 +521,7 @@ export function elementProperty<T>(index: number, propName: string, value: T | N
let staticData: LNodeStatic|null = node.staticData !; let staticData: LNodeStatic|null = node.staticData !;
// if staticData.inputs is undefined, a listener has created output staticData, but inputs haven't // if staticData.inputs is undefined, a listener has created output staticData, but inputs haven't
// yet been // yet been checked
// checked
if (staticData.inputs === undefined) { if (staticData.inputs === undefined) {
// mark inputs as checked // mark inputs as checked
staticData.inputs = null; staticData.inputs = null;
@ -541,7 +549,8 @@ function createStaticData(
attrs, attrs,
initialInputs: undefined, initialInputs: undefined,
inputs: undefined, inputs: undefined,
outputs: undefined, containerStatic outputs: undefined,
containerStatic: containerStatic
}; };
} }
@ -551,8 +560,8 @@ function createStaticData(
*/ */
function setInputsForProperty(inputs: (number | string)[], value: any): void { function setInputsForProperty(inputs: (number | string)[], value: any): void {
for (let i = 0; i < inputs.length; i += 2) { for (let i = 0; i < inputs.length; i += 2) {
ngDevMode && assertDirectivesInRange(inputs[i] as number << 1); ngDevMode && assertDataInRange(inputs[i] as number);
directives[(inputs[i] as number) << 1][inputs[i | 1]] = value; 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; const size = (flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT;
for (let i = start, ii = start + size; i < ii; i++) { for (let i = start, ii = start + size; i < ii; i++) {
const directiveDef: DirectiveDef<any> = directives[(i << 1) | 1]; const directiveDef: DirectiveDef<any> = ngStaticData ![i] as DirectiveDef<any>;
const minifiedPropertyMap: {[minifiedKey: string]: string} = const minifiedPropertyMap: {[minifiedKey: string]: string} =
isInputData ? directiveDef.inputs : directiveDef.outputs; isInputData ? directiveDef.inputs : directiveDef.outputs;
for (let unminifiedKey in minifiedPropertyMap) { for (let unminifiedKey in minifiedPropertyMap) {
@ -716,11 +725,10 @@ export function directiveCreate<T>(index: number, directive: T, directiveDef: Di
export function directiveCreate<T>( export function directiveCreate<T>(
index: number, directive?: T, directiveDef?: DirectiveDef<T>): T { index: number, directive?: T, directiveDef?: DirectiveDef<T>): T {
let instance; let instance;
const index2 = index << 1;
if (directive == null) { if (directive == null) {
// return existing // return existing
ngDevMode && assertDirectivesInRange(index2); ngDevMode && assertDataInRange(index);
instance = directives[index2]; instance = data[index];
} else { } else {
ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex');
ngDevMode && assertPreviousIsParent(); ngDevMode && assertPreviousIsParent();
@ -734,19 +742,26 @@ export function directiveCreate<T>(
} }
previousOrParentNode !.flags = flags; previousOrParentNode !.flags = flags;
ngDevMode && assertDirectivesInRange(index2 - 1); ngDevMode && assertDataInRange(index - 1);
Object.defineProperty( Object.defineProperty(
directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode}); directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode});
directives[index2] = instance = directive; data[index] = instance = directive;
directives[index2 | 1] = directiveDef;
if (index >= ngStaticData.length) {
ngStaticData[index] = directiveDef !;
}
const diPublic = directiveDef !.diPublic; const diPublic = directiveDef !.diPublic;
if (diPublic) { if (diPublic) {
diPublic(directiveDef !); diPublic(directiveDef !);
} }
const nodeBindings: LNodeStatic|null = previousOrParentNode.staticData;
if (nodeBindings && nodeBindings.attrs) const staticData: LNodeStatic|null = previousOrParentNode.staticData !;
setInputsFromAttrs<T>(instance, directiveDef !.inputs, nodeBindings); if (staticData && staticData.attrs) {
setInputsFromAttrs<T>(instance, directiveDef !.inputs, staticData);
}
} }
return instance; return instance;
} }
@ -936,31 +951,33 @@ export function viewCreate(viewBlockId: number): boolean {
enterView((existingView as LView).data, previousOrParentNode as LView); enterView((existingView as LView).data, previousOrParentNode as LView);
} else { } else {
// When we create a new View, we always reset the state of the instructions. // 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)); enterView(newViewState, createLNode(null, LNodeFlags.View, null, newViewState));
containerState.nextIndex++; containerState.nextIndex++;
} }
setNgStaticDataForView(viewBlockId);
return !viewUpdateMode; return !viewUpdateMode;
} }
/** /**
* Each embedded view needs to set the global ngStaticData variable to the static data for that * Initialize the static data for the active view.
* view. *
* Otherwise, the view's static data for a particular node would overwrite the static * Each embedded view needs to set the global ngStaticData variable to the static data for
* data for a node in the view above it with the same index (since it's in the same template). * 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 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 { function initViewStaticData(viewIndex: number, parent: LContainer): NgStaticData {
ngDevMode && assertNodeType(previousOrParentNode.parent !, LNodeFlags.Container); ngDevMode && assertNodeType(parent, LNodeFlags.Container);
const containerStatic = const containerStatic = (parent !.staticData as LContainerStatic).containerStatic;
(previousOrParentNode.parent !.staticData as LContainerStatic).containerStatic;
if (viewIndex >= containerStatic.length || containerStatic[viewIndex] == null) { if (viewIndex >= containerStatic.length || containerStatic[viewIndex] == null) {
containerStatic[viewIndex] = []; containerStatic[viewIndex] = [];
} }
ngStaticData = containerStatic[viewIndex]; return containerStatic[viewIndex];
} }
/** /**
@ -998,18 +1015,14 @@ export const refreshComponent:
const element = data ![elementIndex] as LElement; const element = data ![elementIndex] as LElement;
ngDevMode && assertNodeType(element, LNodeFlags.Element); ngDevMode && assertNodeType(element, LNodeFlags.Element);
ngDevMode && assertNotEqual(element.data, null, 'isComponent'); ngDevMode && assertNotEqual(element.data, null, 'isComponent');
ngDevMode && assertDirectivesInRange(directiveIndex << 1); ngDevMode && assertDataInRange(directiveIndex);
const hostView = element.data !; const hostView = element.data !;
ngDevMode && assertNotEqual(hostView, null, 'hostView'); ngDevMode && assertNotEqual(hostView, null, 'hostView');
const directive = directives[directiveIndex << 1]; const directive = data[directiveIndex];
const oldView = enterView(hostView, element); const oldView = enterView(hostView, element);
const oldNgStaticData = ngStaticData;
try { try {
const _template = template || this !.template; (template || this !.template)(directive, creationMode);
ngStaticData = _template.ngStaticData || (_template.ngStaticData = [] as never);
_template(directive, creationMode);
} finally { } finally {
ngStaticData = oldNgStaticData;
leaveView(oldView); leaveView(oldView);
} }
}; };
@ -1557,6 +1570,11 @@ function valueInData<T>(data: any[], index: number, value?: T): T {
if (value === undefined) { if (value === undefined) {
value = data[index]; value = data[index];
} else { } 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; data[index] = value;
} }
return value !; return value !;
@ -1585,6 +1603,3 @@ function assertDataInRange(index: number, arr?: any[]) {
assertLessThan(arr ? arr.length : 0, index, 'data.length'); assertLessThan(arr ? arr.length : 0, index, 'data.length');
} }
function assertDirectivesInRange(index: number) {
assertLessThan(directives ? directives.length : 0, index, 'directives.length');
}

68
packages/core/src/render3/interfaces.ts
View File

@ -7,7 +7,7 @@
*/ */
import {ElementRef, Injector, QueryList, TemplateRef, Type, ViewContainerRef} from '../core'; 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'; import {RComment, RElement, RText, Renderer3} from './renderer';
declare global { declare global {
@ -49,8 +49,7 @@ export const enum LNodeFlags {
* being processed and restored when the child `View` is done. * being processed and restored when the child `View` is done.
* *
* Keeping separate state for each view facilities view insertion / deletion, so we * 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 * don't have to edit the data array based on which views are present.
* are present.
*/ */
export interface ViewState { export interface ViewState {
/** /**
@ -79,38 +78,6 @@ export interface ViewState {
*/ */
readonly renderer: Renderer3; 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 * The binding start index is the index at which the nodes array
* starts to store bindings only. Saving this value ensures that we * 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. * in the same container. We need a way to link component views as well.
*/ */
next: ViewState|ContainerState|null; 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<any>|null)[];
} }
export interface LNodeInjector { export interface LNodeInjector {
@ -169,9 +160,9 @@ export interface LNodeInjector {
readonly parent: LNodeInjector|null; 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 * 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. * it is there.
*/ */
readonly node: LElement|LContainer; readonly node: LElement|LContainer;
@ -446,6 +437,9 @@ export type InitialInputData = (InitialInputs | null)[];
*/ */
export type InitialInputs = string[]; export type InitialInputs = string[];
/** The type of the global ngStaticData array. */
export type NgStaticData = (LNodeStatic | DirectiveDef<any> | null)[];
/** /**
* LNode binding data for a particular node that is shared between all templates * LNode binding data for a particular node that is shared between all templates
* of a specific type. * of a specific type.

7
packages/core/src/render3/query.ts
View File

@ -10,6 +10,7 @@ import {Observable} from 'rxjs/Observable';
import {QueryList as IQueryList, Type} from '../core'; import {QueryList as IQueryList, Type} from '../core';
import {assertNotNull} from './assert'; import {assertNotNull} from './assert';
import {LContainer, LNode, LNodeFlags, LView, QueryState} from './interfaces'; 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<any>| null, node: LNode) {
while (predicate) { while (predicate) {
const type = predicate.type; const type = predicate.type;
if (type) { if (type) {
const directives = node.view.directives; const ngStaticData = node.view.ngStaticData;
const flags = node.flags; const flags = node.flags;
for (let i = flags >> LNodeFlags.INDX_SHIFT, for (let i = flags >> LNodeFlags.INDX_SHIFT,
ii = i + ((flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT); ii = i + ((flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT);
i < ii; i++) { i < ii; i++) {
const def = directives[i << 1 | 1]; const def = ngStaticData[i] as DirectiveDef<any>;
if (def.diPublic && def.type === type) { if (def.diPublic && def.type === type) {
predicate.values.push(directives[i << 1]); predicate.values.push(node.view.data[i]);
} }
} }
} }

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

@ -32,12 +32,12 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, 'content'); T(2, 'content');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>content</div></child>'); expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
@ -54,12 +54,12 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, 'content'); T(2, 'content');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>content</child>'); expect(toHtml(parent)).toEqual('<child>content</child>');
@ -79,26 +79,26 @@ describe('content projection', () => {
m(0, dP()); m(0, dP());
E(1, GrandChild.ngComponentDef); E(1, GrandChild.ngComponentDef);
{ {
D(0, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef);
P(2, 0); P(3, 0);
} }
e(); e();
GrandChild.ngComponentDef.r(0, 1); GrandChild.ngComponentDef.r(2, 1);
} }
}); });
const Parent = createComponent('parent', function(ctx: any, cm: boolean) { const Parent = createComponent('parent', function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'b'); E(2, 'b');
T(2, 'Hello'); T(3, 'Hello');
e(); e();
T(3, 'World!'); T(4, 'World!');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)) expect(toHtml(parent))
@ -118,15 +118,15 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, '('); T(2, '(');
C(2); C(3);
c(); c();
T(3, ')'); T(4, ')');
} }
e(); e();
} }
rC(2); rC(3);
{ {
if (ctx.value) { if (ctx.value) {
if (V(0)) { if (V(0)) {
@ -136,7 +136,7 @@ describe('content projection', () => {
} }
} }
rc(); rc();
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>()</div></child>'); expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
@ -159,13 +159,13 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
C(1); C(2);
c(); c();
} }
e(); e();
} }
rC(1); rC(2);
{ {
if (ctx.value) { if (ctx.value) {
if (V(0)) { if (V(0)) {
@ -175,7 +175,7 @@ describe('content projection', () => {
} }
} }
rc(); rc();
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child></child>'); expect(toHtml(parent)).toEqual('<child></child>');
@ -202,15 +202,15 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, '('); T(2, '(');
C(2); C(3);
c(); c();
T(3, ')'); T(4, ')');
} }
e(); e();
} }
rC(2); rC(3);
{ {
if (ctx.value) { if (ctx.value) {
if (V(0)) { if (V(0)) {
@ -225,7 +225,7 @@ describe('content projection', () => {
} }
} }
rc(); rc();
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>'); expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>');
@ -280,12 +280,12 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, 'content'); T(2, 'content');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div><span>content</span></div></child>'); expect(toHtml(parent)).toEqual('<child><div><span>content</span></div></child>');
@ -335,12 +335,12 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, 'content'); T(2, 'content');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div>content</div></child>'); expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
@ -374,12 +374,12 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, 'content'); T(2, 'content');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><div></div><span>content</span></child>'); expect(toHtml(parent)).toEqual('<child><div></div><span>content</span></child>');
@ -434,12 +434,12 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef);
T(1, 'content'); T(2, 'content');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child>content<div></div></child>'); expect(toHtml(parent)).toEqual('<child>content<div></div></child>');
@ -479,17 +479,17 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span', ['title', 'toFirst']); E(2, 'span', ['title', 'toFirst']);
{ T(2, '1'); } { T(3, '1'); }
e(); e();
E(3, 'span', ['title', 'toSecond']); E(4, 'span', ['title', 'toSecond']);
{ T(4, '2'); } { T(5, '2'); }
e(); e();
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
@ -526,17 +526,17 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span', ['class', 'toFirst']); E(2, 'span', ['class', 'toFirst']);
{ T(2, '1'); } { T(3, '1'); }
e(); e();
E(3, 'span', ['class', 'toSecond']); E(4, 'span', ['class', 'toSecond']);
{ T(4, '2'); } { T(5, '2'); }
e(); e();
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
@ -573,17 +573,17 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span', ['class', 'other toFirst']); E(2, 'span', ['class', 'other toFirst']);
{ T(2, '1'); } { T(3, '1'); }
e(); e();
E(3, 'span', ['class', 'toSecond noise']); E(4, 'span', ['class', 'toSecond noise']);
{ T(4, '2'); } { T(5, '2'); }
e(); e();
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
@ -619,17 +619,17 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span', ['class', 'toFirst']); E(2, 'span', ['class', 'toFirst']);
{ T(2, '1'); } { T(3, '1'); }
e(); e();
E(3, 'span', ['class', 'toSecond']); E(4, 'span', ['class', 'toSecond']);
{ T(4, '2'); } { T(5, '2'); }
e(); e();
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
@ -665,18 +665,18 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span', ['class', 'toFirst']); E(2, 'span', ['class', 'toFirst']);
{ T(2, '1'); } { T(3, '1'); }
e(); e();
E(3, 'span'); E(4, 'span');
{ T(4, 'remaining'); } { T(5, 'remaining'); }
e(); e();
T(5, 'more remaining'); T(6, 'more remaining');
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
@ -713,14 +713,14 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span'); E(2, 'span');
{ T(2, '1'); } { T(3, '1'); }
e(); e();
E(3, 'span', ['class', 'toSecond']); E(4, 'span', ['class', 'toSecond']);
{ T(4, '2'); } { T(5, '2'); }
e(); e();
T(5, 'remaining'); T(6, 'remaining');
} }
e(); e();
} }
@ -765,14 +765,14 @@ describe('content projection', () => {
m(0, dP()); m(0, dP());
E(1, GrandChild.ngComponentDef); E(1, GrandChild.ngComponentDef);
{ {
D(0, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef);
P(2, 0); P(3, 0);
E(3, 'span'); E(4, 'span');
{ T(4, 'in child template'); } { T(5, 'in child template'); }
e(); e();
} }
e(); e();
GrandChild.ngComponentDef.r(0, 1); GrandChild.ngComponentDef.r(2, 1);
} }
}); });
@ -787,14 +787,14 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(1, 'span'); E(2, 'span');
{ T(2, 'parent content'); } { T(3, 'parent content'); }
e(); e();
} }
e(); e();
} }
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
@ -828,13 +828,13 @@ describe('content projection', () => {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child.ngComponentDef);
{ {
D(0, Child.ngComponentDef.n(), Child.ngComponentDef); D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
C(1, undefined, 'div'); C(2, undefined, 'div');
c(); c();
} }
e(); e();
} }
rC(1); rC(2);
{ {
if (true) { if (true) {
if (V(0)) { if (V(0)) {
@ -846,7 +846,7 @@ describe('content projection', () => {
} }
} }
rc(); rc();
Child.ngComponentDef.r(0, 0); Child.ngComponentDef.r(1, 0);
}); });
const parent = renderComponent(Parent); const parent = renderComponent(Parent);
expect(toHtml(parent)).toEqual('<child><span><div>content</div></span></child>'); expect(toHtml(parent)).toEqual('<child><span><div>content</div></span></child>');

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

@ -27,12 +27,12 @@ describe('di', () => {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
{ {
D(0, DirectiveDef.n(), DirectiveDef); D(1, DirectiveDef.n(), DirectiveDef);
T(1); T(2);
} }
e(); e();
} }
t(1, b(D<Directive>(0).value)); t(2, b(D<Directive>(1).value));
} }
expect(renderToHtml(Template, {})).toEqual('<div>Created</div>'); expect(renderToHtml(Template, {})).toEqual('<div>Created</div>');
@ -66,18 +66,18 @@ describe('di', () => {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
{ {
D(0, DirectiveADef.n(), DirectiveADef); D(1, DirectiveADef.n(), DirectiveADef);
E(1, 'span'); E(2, 'span');
{ {
D(1, DirectiveBDef.n(), DirectiveBDef); D(3, DirectiveBDef.n(), DirectiveBDef);
D(2, DirectiveCDef.n(), DirectiveCDef); D(4, DirectiveCDef.n(), DirectiveCDef);
T(2); T(5);
} }
e(); e();
} }
e(); e();
} }
t(2, b(D<DirectiveC>(2).value)); t(5, b(D<DirectiveC>(4).value));
} }
expect(renderToHtml(Template, {})).toEqual('<div><span>AB</span></div>'); expect(renderToHtml(Template, {})).toEqual('<div><span>AB</span></div>');
@ -113,13 +113,13 @@ describe('di', () => {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
{ {
D(0, DirectiveDef.n(), DirectiveDef); D(1, DirectiveDef.n(), DirectiveDef);
D(1, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
T(1); T(3);
} }
e(); e();
} }
t(1, b2('', D<Directive>(0).value, '-', D<DirectiveSameInstance>(1).value, '')); t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
} }
expect(renderToHtml(Template, {})).toEqual('<div>ElementRef-true</div>'); expect(renderToHtml(Template, {})).toEqual('<div>ElementRef-true</div>');
@ -156,13 +156,13 @@ describe('di', () => {
if (cm) { if (cm) {
C(0, function() {}); C(0, function() {});
{ {
D(0, DirectiveDef.n(), DirectiveDef); D(1, DirectiveDef.n(), DirectiveDef);
D(1, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
} }
c(); c();
T(1); T(3);
} }
t(1, b2('', D<Directive>(0).value, '-', D<DirectiveSameInstance>(1).value, '')); t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
} }
expect(renderToHtml(Template, {})).toEqual('TemplateRef-true'); expect(renderToHtml(Template, {})).toEqual('TemplateRef-true');
@ -198,13 +198,13 @@ describe('di', () => {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
{ {
D(0, DirectiveDef.n(), DirectiveDef); D(1, DirectiveDef.n(), DirectiveDef);
D(1, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
T(1); T(3);
} }
e(); e();
} }
t(1, b2('', D<Directive>(0).value, '-', D<DirectiveSameInstance>(1).value, '')); t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
} }
expect(renderToHtml(Template, {})).toEqual('<div>ViewContainerRef-true</div>'); expect(renderToHtml(Template, {})).toEqual('<div>ViewContainerRef-true</div>');
@ -285,24 +285,24 @@ describe('di', () => {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
{ {
D(0, ParentDirectiveDef.n(), ParentDirectiveDef); D(1, ParentDirectiveDef.n(), ParentDirectiveDef);
C(1); C(2);
c(); c();
} }
e(); e();
} }
rC(1); rC(2);
{ {
if (V(0)) { if (V(0)) {
E(0, 'span'); E(0, 'span');
{ {
D(0, ChildDirectiveDef.n(), ChildDirectiveDef); D(1, ChildDirectiveDef.n(), ChildDirectiveDef);
D(1, Child2DirectiveDef.n(), Child2DirectiveDef); D(2, Child2DirectiveDef.n(), Child2DirectiveDef);
T(1); T(3);
} }
e(); e();
} }
t(1, b2('', D<ChildDirective>(0).value, '-', D<Child2Directive>(1).value, '')); t(3, b2('', D<ChildDirective>(1).value, '-', D<Child2Directive>(2).value, ''));
v(); v();
} }
rc(); rc();
@ -318,7 +318,7 @@ describe('di', () => {
describe('getOrCreateNodeInjector', () => { describe('getOrCreateNodeInjector', () => {
it('should handle initial undefined state', () => { it('should handle initial undefined state', () => {
const contentView = createViewState(-1, null !); const contentView = createViewState(-1, null !, []);
const oldView = enterView(contentView, null !); const oldView = enterView(contentView, null !);
try { try {
const parent = createLNode(0, LNodeFlags.Element, null, null); const parent = createLNode(0, LNodeFlags.Element, null, null);

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

@ -31,10 +31,10 @@ describe('directive', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); E(0, 'span');
{ D(0, DirectiveDef.n(), DirectiveDef); } { D(1, DirectiveDef.n(), DirectiveDef); }
e(); e();
} }
DirectiveDef.r(0, 0); DirectiveDef.r(1, 0);
} }
expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>'); expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>');

36
packages/core/test/render3/exports_spec.ts
View File

@ -33,11 +33,11 @@ describe('exports', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComponent.ngComponentDef); E(0, MyComponent.ngComponentDef);
{ D(0, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
T(1); T(2);
} }
t(1, D<MyComponent>(0).name); t(2, D<MyComponent>(1).name);
} }
class MyComponent { class MyComponent {
@ -79,13 +79,13 @@ describe('exports', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComponent.ngComponentDef); E(0, MyComponent.ngComponentDef);
{ D(0, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
E(1, 'div'); E(2, 'div');
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(3, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
p(1, 'myDir', b(D<MyComponent>(0))); p(2, 'myDir', b(D<MyComponent>(1)));
} }
renderToHtml(Template, {}); renderToHtml(Template, {});
@ -98,11 +98,11 @@ describe('exports', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
D(0, SomeDirDef.n(), SomeDirDef); D(1, SomeDirDef.n(), SomeDirDef);
e(); e();
T(1); T(2);
} }
t(1, D<SomeDir>(0).name); t(2, D<SomeDir>(1).name);
} }
class SomeDir { class SomeDir {
@ -208,13 +208,13 @@ describe('exports', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div');
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
E(1, MyComponent.ngComponentDef); E(2, MyComponent.ngComponentDef);
{ D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } { D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
} }
p(0, 'myDir', b(D<MyComponent>(1))); p(0, 'myDir', b(D<MyComponent>(3)));
} }
renderToHtml(Template, {}); renderToHtml(Template, {});
@ -229,13 +229,13 @@ describe('exports', () => {
T(0); T(0);
T(1); T(1);
E(2, 'comp'); E(2, 'comp');
{ D(0, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } { D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
E(3, 'input', ['value', 'one']); E(4, 'input', ['value', 'one']);
e(); e();
} }
let myInput = E(3); let myInput = E(4);
let myComp = D(0) as MyComponent; let myComp = D(3) as MyComponent;
t(0, b(myInput && (myInput as any).value)); t(0, b(myInput && (myInput as any).value));
t(1, b(myComp && myComp.name)); t(1, b(myComp && myComp.name));
} }

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

@ -231,10 +231,10 @@ describe('iv integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent.ngComponentDef); E(0, TodoComponent.ngComponentDef);
{ D(0, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
} }
TodoComponent.ngComponentDef.r(0, 0); TodoComponent.ngComponentDef.r(1, 0);
} }
expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>'); expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>');
@ -244,11 +244,11 @@ describe('iv integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent.ngComponentDef); E(0, TodoComponent.ngComponentDef);
{ D(0, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
T(1, 'two'); T(2, 'two');
} }
TodoComponent.ngComponentDef.r(0, 0); TodoComponent.ngComponentDef.r(1, 0);
} }
expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>two'); expect(renderToHtml(Template, null)).toEqual('<todo><p>Todo one</p></todo>two');
}); });
@ -261,14 +261,14 @@ describe('iv integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent.ngComponentDef); E(0, TodoComponent.ngComponentDef);
{ D(0, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e();
E(1, TodoComponent.ngComponentDef);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
E(2, TodoComponent.ngComponentDef);
{ D(3, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e();
} }
TodoComponent.ngComponentDef.r(0, 0); TodoComponent.ngComponentDef.r(1, 0);
TodoComponent.ngComponentDef.r(1, 1); TodoComponent.ngComponentDef.r(3, 2);
} }
expect(renderToHtml(Template, null)) expect(renderToHtml(Template, null))
.toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>'); .toEqual('<todo><p>Todo one</p></todo><todo><p>Todo one</p></todo>');
@ -303,12 +303,12 @@ describe('iv integration test', () => {
if (cm) { if (cm) {
E(0, TodoComponentHostBinding.ngComponentDef); E(0, TodoComponentHostBinding.ngComponentDef);
{ {
D(0, TodoComponentHostBinding.ngComponentDef.n(), D(1, TodoComponentHostBinding.ngComponentDef.n(),
TodoComponentHostBinding.ngComponentDef); TodoComponentHostBinding.ngComponentDef);
} }
e(); e();
} }
TodoComponentHostBinding.ngComponentDef.r(0, 0); TodoComponentHostBinding.ngComponentDef.r(1, 0);
} }
expect(renderToHtml(Template, {})).toEqual('<todo title="one">one</todo>'); expect(renderToHtml(Template, {})).toEqual('<todo title="one">one</todo>');
@ -338,10 +338,10 @@ describe('iv integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp.ngComponentDef); E(0, MyComp.ngComponentDef);
{ D(0, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
e(); e();
} }
MyComp.ngComponentDef.r(0, 0); MyComp.ngComponentDef.r(1, 0);
} }
expect(renderToHtml(Template, null)).toEqual('<comp><p>Bess</p></comp>'); expect(renderToHtml(Template, null)).toEqual('<comp><p>Bess</p></comp>');
@ -385,11 +385,11 @@ describe('iv integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp.ngComponentDef); E(0, MyComp.ngComponentDef);
{ D(0, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
e(); e();
} }
p(0, 'condition', b(ctx.condition)); p(0, 'condition', b(ctx.condition));
MyComp.ngComponentDef.r(0, 0); MyComp.ngComponentDef.r(1, 0);
} }
expect(renderToHtml(Template, {condition: true})).toEqual('<comp><div>text</div></comp>'); expect(renderToHtml(Template, {condition: true})).toEqual('<comp><div>text</div></comp>');

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

@ -20,10 +20,10 @@ describe('lifecycles', () => {
let Parent = createOnDestroyComponent('parent', function(ctx: any, cm: boolean) { let Parent = createOnDestroyComponent('parent', function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
}); });
function createOnDestroyComponent(name: string, template: ComponentTemplate<any>) { function createOnDestroyComponent(name: string, template: ComponentTemplate<any>) {
@ -62,10 +62,10 @@ describe('lifecycles', () => {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
v(); v();
} }
} }
@ -95,16 +95,16 @@ describe('lifecycles', () => {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e();
E(1, Comp.ngComponentDef);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
E(2, Comp.ngComponentDef);
{ D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e();
} }
p(0, 'val', b('1')); p(0, 'val', b('1'));
p(1, 'val', b('2')); p(2, 'val', b('2'));
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
Comp.ngComponentDef.r(1, 1); Comp.ngComponentDef.r(3, 2);
v(); v();
} }
} }
@ -135,10 +135,10 @@ describe('lifecycles', () => {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Parent.ngComponentDef); E(0, Parent.ngComponentDef);
{ D(0, Parent.ngComponentDef.n(), Parent.ngComponentDef); } { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.r(0, 0); Parent.ngComponentDef.r(1, 0);
v(); v();
} }
} }
@ -163,10 +163,10 @@ describe('lifecycles', () => {
let Grandparent = createOnDestroyComponent('grandparent', function(ctx: any, cm: boolean) { let Grandparent = createOnDestroyComponent('grandparent', function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent.ngComponentDef);
{ D(0, Parent.ngComponentDef.n(), Parent.ngComponentDef); } { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.r(0, 0); Parent.ngComponentDef.r(1, 0);
}); });
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
@ -179,10 +179,10 @@ describe('lifecycles', () => {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Grandparent.ngComponentDef); E(0, Grandparent.ngComponentDef);
{ D(0, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); } { D(1, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); }
e(); e();
} }
Grandparent.ngComponentDef.r(0, 0); Grandparent.ngComponentDef.r(1, 0);
v(); v();
} }
} }
@ -216,32 +216,32 @@ describe('lifecycles', () => {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); 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); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
C(2);
c();
E(3, Comp.ngComponentDef);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e();
} }
p(0, 'val', b('1')); p(0, 'val', b('1'));
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
rC(1); rC(2);
{ {
if (ctx.condition2) { if (ctx.condition2) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b('2')); p(0, 'val', b('2'));
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
v(); v();
} }
} }
rc(); rc();
p(2, 'val', b('3')); p(3, 'val', b('3'));
Comp.ngComponentDef.r(1, 2); Comp.ngComponentDef.r(4, 3);
v(); v();
} }
} }
@ -294,32 +294,32 @@ describe('lifecycles', () => {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); 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); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
C(2);
c();
E(3, Comp.ngComponentDef);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e();
} }
p(0, 'val', b('1')); p(0, 'val', b('1'));
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
rC(1); rC(2);
{ {
for (let j = 2; j < ctx.len; j++) { for (let j = 2; j < ctx.len; j++) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b(j)); p(0, 'val', b(j));
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
v(); v();
} }
} }
rc(); rc();
p(2, 'val', b('5')); p(3, 'val', b('5'));
Comp.ngComponentDef.r(1, 2); Comp.ngComponentDef.r(4, 3);
v(); v();
} }
} }
@ -380,16 +380,16 @@ describe('lifecycles', () => {
} }
e(); e();
E(2, Comp.ngComponentDef); E(2, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
E(3, 'button'); E(4, 'button');
{ {
L('click', ctx.onClick.bind(ctx)); L('click', ctx.onClick.bind(ctx));
T(4, 'Click me'); T(5, 'Click me');
} }
e(); e();
} }
Comp.ngComponentDef.r(0, 2); Comp.ngComponentDef.r(3, 2);
v(); v();
} }
} }

10
packages/core/test/render3/listeners_spec.ts
View File

@ -204,14 +204,14 @@ describe('event listeners', () => {
if (V(0)) { if (V(0)) {
T(0, 'Hello'); T(0, 'Hello');
E(1, MyComp.ngComponentDef); E(1, MyComp.ngComponentDef);
{ D(0, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } { D(2, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
e(); e();
E(2, MyComp.ngComponentDef); E(3, MyComp.ngComponentDef);
{ D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } { D(4, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
e(); e();
} }
MyComp.ngComponentDef.r(0, 1); MyComp.ngComponentDef.r(2, 1);
MyComp.ngComponentDef.r(1, 2); MyComp.ngComponentDef.r(4, 3);
v(); v();
} }
} }

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

@ -16,7 +16,7 @@ function testLStaticData(tagName: string, attrs: string[] | null): LNodeStatic {
initialInputs: undefined, initialInputs: undefined,
inputs: undefined, inputs: undefined,
outputs: undefined, outputs: undefined,
containerStatic: null containerStatic: null,
}; };
} }

49
packages/core/test/render3/outputs_spec.ts
View File

@ -46,12 +46,12 @@ describe('outputs', () => {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); 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('change', ctx.onChange.bind(ctx));
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
} }
let counter = 0; let counter = 0;
@ -71,13 +71,13 @@ describe('outputs', () => {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); 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('change', ctx.onChange.bind(ctx));
L('reset', ctx.onReset.bind(ctx)); L('reset', ctx.onReset.bind(ctx));
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
} }
let counter = 0; let counter = 0;
@ -98,12 +98,12 @@ describe('outputs', () => {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle.ngComponentDef);
{ {
D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', () => ctx.counter++); L('change', () => ctx.counter++);
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
} }
const ctx = {counter: 0}; const ctx = {counter: 0};
@ -135,12 +135,12 @@ describe('outputs', () => {
if (V(0)) { if (V(0)) {
E(0, ButtonToggle.ngComponentDef); 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('change', ctx.onChange.bind(ctx));
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
v(); v();
} }
} }
@ -189,12 +189,12 @@ describe('outputs', () => {
if (V(0)) { if (V(0)) {
E(0, ButtonToggle.ngComponentDef); 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('change', ctx.onChange.bind(ctx));
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
v(); v();
} }
} }
@ -262,16 +262,16 @@ describe('outputs', () => {
e(); e();
E(2, ButtonToggle.ngComponentDef); E(2, ButtonToggle.ngComponentDef);
{ {
D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); D(3, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx)); L('change', ctx.onChange.bind(ctx));
} }
e(); e();
E(3, DestroyComp.ngComponentDef); E(4, DestroyComp.ngComponentDef);
{ D(1, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); } { D(5, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 2); ButtonToggle.ngComponentDef.r(3, 2);
DestroyComp.ngComponentDef.r(1, 3); DestroyComp.ngComponentDef.r(5, 4);
v(); v();
} }
} }
@ -318,7 +318,7 @@ describe('outputs', () => {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button');
{ {
D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
L('click', ctx.onClick.bind(ctx)); L('click', ctx.onClick.bind(ctx));
} }
e(); e();
@ -344,13 +344,13 @@ describe('outputs', () => {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle.ngComponentDef);
{ {
D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx)); L('change', ctx.onChange.bind(ctx));
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
} }
let counter = 0; let counter = 0;
@ -378,14 +378,14 @@ describe('outputs', () => {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle.ngComponentDef);
{ {
D(0, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx)); L('change', ctx.onChange.bind(ctx));
} }
e(); e();
} }
p(0, 'change', b(ctx.change)); p(0, 'change', b(ctx.change));
ButtonToggle.ngComponentDef.r(0, 0); ButtonToggle.ngComponentDef.r(1, 0);
} }
let counter = 0; let counter = 0;
@ -426,17 +426,18 @@ describe('outputs', () => {
if (V(0)) { if (V(0)) {
E(0, ButtonToggle.ngComponentDef); 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('change', ctx.onChange.bind(ctx));
} }
e(); e();
} }
ButtonToggle.ngComponentDef.r(1, 0);
v(); v();
} else { } else {
if (V(1)) { if (V(1)) {
E(0, 'div'); E(0, 'div');
{ {
D(0, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx)); L('change', ctx.onChange.bind(ctx));
} }
e(); e();

72
packages/core/test/render3/properties_spec.ts
View File

@ -92,9 +92,9 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button');
{ {
D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
T(1, 'Click me'); T(3, 'Click me');
} }
e(); e();
} }
@ -122,8 +122,8 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button');
{ {
D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
T(1, 'Click me'); T(2, 'Click me');
} }
e(); e();
} }
@ -160,11 +160,11 @@ describe('elementProperty', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'id', b(ctx.id)); p(0, 'id', b(ctx.id));
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
} }
expect(renderToHtml(Template, {id: 1})).toEqual(`<comp></comp>`); expect(renderToHtml(Template, {id: 1})).toEqual(`<comp></comp>`);
@ -192,9 +192,9 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button');
{ {
D(0, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
D(1, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef); D(2, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef);
T(1, 'Click me'); T(3, 'Click me');
} }
e(); e();
} }
@ -218,9 +218,9 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button');
{ {
D(0, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('click', ctx.onClick.bind(ctx)); L('click', ctx.onClick.bind(ctx));
T(1, 'Click me'); T(2, 'Click me');
} }
e(); e();
} }
@ -262,15 +262,15 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button');
{ {
D(0, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef); D(1, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef);
T(1, 'Click me'); T(2, 'Click me');
} }
e(); e();
C(2); C(3);
c(); c();
} }
p(0, 'id', b(ctx.id1)); p(0, 'id', b(ctx.id1));
rC(2); rC(3);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
@ -284,8 +284,8 @@ describe('elementProperty', () => {
if (V(1)) { if (V(1)) {
E(0, 'button'); E(0, 'button');
{ {
D(0, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
T(1, 'Click me too'); T(2, 'Click me too');
} }
e(); e();
} }
@ -337,7 +337,7 @@ describe('elementProperty', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button']); E(0, 'div', ['role', 'button']);
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
} }
@ -352,7 +352,7 @@ describe('elementProperty', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button']); E(0, 'div', ['role', 'button']);
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
p(0, 'role', b(ctx.role)); p(0, 'role', b(ctx.role));
@ -372,8 +372,8 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button']); E(0, 'div', ['role', 'button']);
{ {
D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef);
D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); D(2, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef);
} }
e(); e();
} }
@ -390,7 +390,7 @@ describe('elementProperty', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button', 'dir', 'rtl']); E(0, 'div', ['role', 'button', 'dir', 'rtl']);
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
} }
@ -407,7 +407,7 @@ describe('elementProperty', () => {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button']); 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)); L('change', ctx.onChange.bind(ctx));
} }
e(); e();
@ -434,10 +434,10 @@ describe('elementProperty', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button', 'dir', 'rtl']); E(0, 'div', ['role', 'button', 'dir', 'rtl']);
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
E(1, 'div', ['role', 'listbox']); E(2, 'div', ['role', 'listbox']);
{ D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } { D(3, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); }
e(); e();
} }
} }
@ -462,17 +462,17 @@ describe('elementProperty', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'listbox']); E(0, 'div', ['role', 'listbox']);
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
C(1); C(2);
c(); c();
} }
rC(1); rC(2);
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, 'div', ['role', 'button']); E(0, 'div', ['role', 'button']);
{ D(0, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } { D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); }
e(); e();
} }
v(); v();
@ -510,11 +510,11 @@ describe('elementProperty', () => {
template: function(ctx: any, cm: boolean) { template: function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div', ['role', 'button']); E(0, 'div', ['role', 'button']);
{ D(0, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
T(1); T(2);
} }
t(1, b(D<MyDir>(0).role)); t(2, b(D<MyDir>(1).role));
}, },
factory: () => new Comp() factory: () => new Comp()
}); });
@ -535,10 +535,10 @@ describe('elementProperty', () => {
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp.ngComponentDef);
{ D(0, Comp.ngComponentDef.n(), Comp.ngComponentDef); } { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.r(0, 0); Comp.ngComponentDef.r(1, 0);
v(); v();
} }
} }

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

@ -33,9 +33,9 @@ describe('query', () => {
m(1, Q(Child, true)); m(1, Q(Child, true));
E(2, Child.ngComponentDef); E(2, Child.ngComponentDef);
{ {
child1 = D(0, Child.ngComponentDef.n(), Child.ngComponentDef); child1 = D(3, Child.ngComponentDef.n(), Child.ngComponentDef);
E(3, Child.ngComponentDef); E(4, Child.ngComponentDef);
{ child2 = D(1, Child.ngComponentDef.n(), Child.ngComponentDef); } { child2 = D(5, Child.ngComponentDef.n(), Child.ngComponentDef); }
e(); e();
} }
e(); e();

2
packages/core/test/render3/render_util.ts
View File

@ -37,7 +37,7 @@ export function resetDOM() {
requestAnimationFrame.queue = []; requestAnimationFrame.queue = [];
containerEl = document.createElement('div'); containerEl = document.createElement('div');
containerEl.setAttribute('host', ''); 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) // TODO: assert that the global state is clean (e.g. ngData, previousOrParentNode, etc)
} }