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

refactor(ivy): move directive into elementStart (#21374) 

We used to have a separate `directive` instruction for instantiating
directives. However, such an instruction requires that directives
are created in the correct order, which would require that template
compiler would have knowledge of all dependent directives. This
would break template compilation locality principle.

This change only changes the APIs to expected form but does
not change the semantics. The semantics will need to be corrected
in subsequent commits. The semantic change needed is to
resolve the directive instantiation error at runtime based on
injection dependencies.

PR Close #21374
This commit is contained in:
Misko Hevery 2018-01-08 21:57:50 -08:00 committed by Alex Eagle
parent c0080d76c4
commit a6d41c47a9
19 changed files with 398 additions and 506 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/benchmarks/src/tree/render3/tree.ts
View File

@ -56,8 +56,7 @@ export class TreeComponent {
let cm0 = V(0); let cm0 = V(0);
{ {
if (cm0) { if (cm0) {
E(0, TreeComponent.ngComponentDef); E(0, TreeComponent);
{ D(1, TreeComponent.ngComponentDef.n(), TreeComponent.ngComponentDef); }
e(); e();
} }
p(0, 'data', b(ctx.data.left)); p(0, 'data', b(ctx.data.left));
@ -74,8 +73,7 @@ export class TreeComponent {
let cm0 = V(0); let cm0 = V(0);
{ {
if (cm0) { if (cm0) {
E(0, TreeComponent.ngComponentDef); E(0, TreeComponent);
{ D(1, TreeComponent.ngComponentDef.n(), TreeComponent.ngComponentDef); }
e(); e();
} }
p(0, 'data', b(ctx.data.right)); p(0, 'data', b(ctx.data.right));

11
packages/core/src/render3/assert.ts
View File

@ -21,7 +21,10 @@
* @returns The stringified value * @returns The stringified value
*/ */
function stringifyValueForError(value: any): string { function stringifyValueForError(value: any): string {
return typeof value === 'string' ? `"${value}"` : '' + value; if (value && value.native && value.native.outerHTML) {
return value.native.outerHTML;
}
return typeof value === 'string' ? `"${value}"` : value;
} }
export function assertNumber(actual: any, name: string) { export function assertNumber(actual: any, name: string) {
@ -57,6 +60,8 @@ export function assertNotEqual<T>(actual: T, expected: T, name: string) {
export function assertThrow<T>( export function assertThrow<T>(
actual: T, expected: T, name: string, operator: string, actual: T, expected: T, name: string, operator: string,
serializer: ((v: T) => string) = stringifyValueForError): never { serializer: ((v: T) => string) = stringifyValueForError): never {
throw new Error( const error =
`ASSERT: expected ${name} ${operator} ${serializer(expected)} but was ${serializer(actual)}!`); `ASSERT: expected ${name} ${operator} ${serializer(expected)} but was ${serializer(actual)}!`;
debugger; // leave `debugger` here to aid in debugging.
throw new Error(error);
} }

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

@ -13,14 +13,13 @@ import {ComponentRef as viewEngine_ComponentRef} from '../linker/component_facto
import {EmbeddedViewRef as viewEngine_EmbeddedViewRef} from '../linker/view_ref'; import {EmbeddedViewRef as viewEngine_EmbeddedViewRef} from '../linker/view_ref';
import {assertNotNull} from './assert'; import {assertNotNull} from './assert';
import {NG_HOST_SYMBOL, createError, createLView, directive, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions'; import {NG_HOST_SYMBOL, createError, createLView, directive, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate, directiveCreate} from './instructions';
import {ComponentDef, ComponentType} from './interfaces/definition'; import {ComponentDef, ComponentType} from './interfaces/definition';
import {LElementNode} from './interfaces/node'; import {LElementNode} from './interfaces/node';
import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer'; import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
import {notImplemented, stringify} from './util'; import {notImplemented, stringify} from './util';
/** Options that control how the component should be bootstrapped. */ /** Options that control how the component should be bootstrapped. */
export interface CreateComponentOptions { export interface CreateComponentOptions {
/** Which renderer factory to use. */ /** Which renderer factory to use. */
@ -176,7 +175,7 @@ export function renderComponent<T>(
// Create element node at index 0 in data array // Create element node at index 0 in data array
hostElement(hostNode, componentDef); hostElement(hostNode, componentDef);
// Create directive instance with n() and store at index 1 in data array (el is 0) // Create directive instance with n() and store at index 1 in data array (el is 0)
component = directive(1, componentDef.n(), componentDef); component = directiveCreate(1, componentDef.n(), componentDef);
} finally { } finally {
leaveView(oldView); leaveView(oldView);
} }

1
packages/core/src/render3/definition.ts
View File

@ -44,6 +44,7 @@ export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): Co
outputs: invertObject(componentDefinition.outputs), outputs: invertObject(componentDefinition.outputs),
methods: invertObject(componentDefinition.methods), methods: invertObject(componentDefinition.methods),
rendererType: resolveRendererType2(componentDefinition.rendererType) || null, rendererType: resolveRendererType2(componentDefinition.rendererType) || null,
exportAs: componentDefinition.exportAs,
}; };
const feature = componentDefinition.features; const feature = componentDefinition.features;
feature && feature.forEach((fn) => fn(def)); feature && feature.forEach((fn) => fn(def));

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

@ -24,7 +24,7 @@ import {LContainerNode, LElementNode, LNode, LNodeFlags, LProjectionNode, LTextN
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';
import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef} from './interfaces/definition'; import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType} from './interfaces/definition';
import {InjectFlags, diPublicInInjector, getOrCreateNodeInjectorForNode, getOrCreateElementRef, getOrCreateTemplateRef, getOrCreateContainerRef, getOrCreateInjectable} from './di'; import {InjectFlags, diPublicInInjector, getOrCreateNodeInjectorForNode, getOrCreateElementRef, getOrCreateTemplateRef, getOrCreateContainerRef, getOrCreateInjectable} from './di';
import {QueryList, LQuery_} from './query'; import {QueryList, LQuery_} from './query';
import {RComment, RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3} from './interfaces/renderer'; import {RComment, RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3} from './interfaces/renderer';
@ -411,29 +411,37 @@ export function injectViewContainerRef(): ViewContainerRef {
* Create DOM element. The instruction must later be followed by `elementEnd()` call. * Create DOM element. The instruction must later be followed by `elementEnd()` call.
* *
* @param index Index of the element in the data array * @param index Index of the element in the data array
* @param nameOrComponentDef Name of the DOM Node or `ComponentDef`. * @param nameOrComponentType Name of the DOM Node or `ComponentType` to create.
* @param attrs Statically bound set of attributes to be written into the DOM element on creation. * @param attrs Statically bound set of attributes to be written into the DOM element on creation.
* @param localName A name under which a given element is exported. * @param directiveTypes A set of directives declared on this element.
* @param localRefs A set of local reference bindings on the element.
* *
* Attributes are passed as an array of strings where elements with an even index hold an attribute * Attributes and localRefs are passed as an array of strings where elements with an even index
* name and elements with an odd index hold an attribute value, ex.: * hold an attribute name and elements with an odd index hold an attribute value, ex.:
* ['id', 'warning5', 'class', 'alert'] * ['id', 'warning5', 'class', 'alert']
*/ */
export function elementStart( export function elementStart(
index: number, nameOrComponentDef?: string | ComponentDef<any>, attrs?: string[] | null, index: number, nameOrComponentType?: string | ComponentType<any>, attrs?: string[] | null,
localName?: string): RElement { directiveTypes?: DirectiveType<any>[] | null, localRefs?: string[] | null): RElement {
let node: LElementNode; let node: LElementNode;
let native: RElement; let native: RElement;
if (nameOrComponentDef == null) { if (nameOrComponentType == null) {
// native node retrieval - used for exporting elements as tpl local variables (<div #foo>) // native node retrieval - used for exporting elements as tpl local variables (<div #foo>)
const node = data[index] !; const node = data[index] !;
native = node && (node as LElementNode).native; native = node && (node as LElementNode).native;
} else { } else {
ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex');
const isHostElement = typeof nameOrComponentDef !== 'string'; const isHostElement = typeof nameOrComponentType !== 'string';
const name = isHostElement ? (nameOrComponentDef as ComponentDef<any>).tag : // MEGAMORPHIC: `ngComponentDef` is a megamorphic property access here.
nameOrComponentDef as string; // This is OK, since we will refactor this code and store the result in `TView.data`
// which means that we will be reading this value only once. We are trading clean/simple
// template
// code for slight startup(first run) performance. (No impact on subsequent runs)
// TODO(misko): refactor this to store the `ComponentDef` in `TView.data`.
const hostComponentDef =
isHostElement ? (nameOrComponentType as ComponentType<any>).ngComponentDef : null;
const name = isHostElement ? hostComponentDef !.tag : nameOrComponentType as string;
if (name === null) { if (name === null) {
// TODO: future support for nameless components. // TODO: future support for nameless components.
throw 'for now name is required'; throw 'for now name is required';
@ -442,10 +450,9 @@ export function elementStart(
let componentView: LView|null = null; let componentView: LView|null = null;
if (isHostElement) { if (isHostElement) {
const ngStaticData = getTemplateStatic((nameOrComponentDef as ComponentDef<any>).template); const ngStaticData = getTemplateStatic(hostComponentDef !.template);
componentView = addToViewTree(createLView( componentView = addToViewTree(createLView(
-1, rendererFactory.createRenderer( -1, rendererFactory.createRenderer(native, hostComponentDef !.rendererType),
native, (nameOrComponentDef as ComponentDef<any>).rendererType),
ngStaticData)); ngStaticData));
} }
@ -453,19 +460,73 @@ export function elementStart(
// 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(index, LNodeFlags.Element, native, componentView); node = createLNode(index, LNodeFlags.Element, native, componentView);
// TODO(misko): implement code which caches the local reference resolution
const queryName: string|null = hack_findQueryName(hostComponentDef, localRefs, '');
if (node.tNode == null) { if (node.tNode == null) {
ngDevMode && assertDataInRange(index - 1); ngDevMode && assertDataInRange(index - 1);
node.tNode = ngStaticData[index] = node.tNode = ngStaticData[index] =
createTNode(name, attrs || null, null, localName || null); createTNode(name, attrs || null, null, hostComponentDef ? null : queryName);
} }
if (attrs) setUpAttributes(native, attrs); if (attrs) setUpAttributes(native, attrs);
appendChild(node.parent !, native, currentView); appendChild(node.parent !, native, currentView);
if (hostComponentDef) {
// TODO(mhevery): This assumes that the directives come in correct order, which
// is not guaranteed. Must be refactored to take it into account.
directiveCreate(++index, hostComponentDef.n(), hostComponentDef, queryName);
}
hack_declareDirectives(index, directiveTypes, localRefs);
} }
} }
return native; return native;
} }
/**
* This function instantiates a directive with a correct queryName. It is a hack since we should
* compute the query value only once and store it with the template (rather than on each invocation)
*/
function hack_declareDirectives(
index: number, directiveTypes: DirectiveType<any>[] | null | undefined,
localRefs: string[] | null | undefined, ) {
if (directiveTypes) {
// TODO(mhevery): This assumes that the directives come in correct order, which
// is not guaranteed. Must be refactored to take it into account.
for (let i = 0; i < directiveTypes.length; i++) {
// MEGAMORPHIC: `ngDirectiveDef` is a megamorphic property access here.
// This is OK, since we will refactor this code and store the result in `TView.data`
// which means that we will be reading this value only once. We are trading clean/simple
// template
// code for slight startup(first run) performance. (No impact on subsequent runs)
// TODO(misko): refactor this to store the `DirectiveDef` in `TView.data`.
const directiveDef = directiveTypes[i].ngDirectiveDef;
directiveCreate(
++index, directiveDef.n(), directiveDef, hack_findQueryName(directiveDef, localRefs));
}
}
}
/**
* This function returns the queryName for a directive. It is a hack since we should
* compute the query value only once and store it with the template (rather than on each invocation)
*/
function hack_findQueryName(
directiveDef: DirectiveDef<any>| null, localRefs: string[] | null | undefined,
defaultExport?: string, ): string|null {
const exportAs = directiveDef && directiveDef.exportAs || defaultExport;
if (exportAs != null && localRefs) {
for (let i = 0; i < localRefs.length; i = i + 2) {
const local = localRefs[i];
const toExportAs = localRefs[i | 1];
if (toExportAs === exportAs || toExportAs === defaultExport) {
return local;
}
}
}
return null;
}
/** /**
* Gets static data from a template function or creates a new static * Gets static data from a template function or creates a new static
* data array if it doesn't already exist. * data array if it doesn't already exist.
@ -836,7 +897,21 @@ export function textBinding<T>(index: number, value: T | NO_CHANGE): void {
////////////////////////// //////////////////////////
/** /**
* Create or retrieve the directive. * Retrieve a directive.
*
* NOTE: directives can be created in order other than the index order. They can also
* be retrieved before they are created in which case the value will be null.
*
* @param index Each directive in a `View` will have a unique index. Directives can
* be created or retrieved out of order.
*/
export function directive<T>(index: number): T {
ngDevMode && assertDataInRange(index);
return data[index];
}
/**
* Create a directive.
* *
* NOTE: directives can be created in order other than the index order. They can also * NOTE: directives can be created in order other than the index order. They can also
* be retrieved before they are created in which case the value will be null. * be retrieved before they are created in which case the value will be null.
@ -845,56 +920,47 @@ export function textBinding<T>(index: number, value: T | NO_CHANGE): void {
* be created or retrieved out of order. * be created or retrieved out of order.
* @param directive The directive instance. * @param directive The directive instance.
* @param directiveDef DirectiveDef object which contains information about the template. * @param directiveDef DirectiveDef object which contains information about the template.
* @param queryName Name under which the query can retrieve the directive instance.
*/ */
export function directive<T>(index: number): T; export function directiveCreate<T>(
export function directive<T>( index: number, directive: T, directiveDef: DirectiveDef<T>, queryName?: string | null): T {
index: number, directive: T, directiveDef: DirectiveDef<T>, localName?: string): T;
export function directive<T>(
index: number, directive?: T, directiveDef?: DirectiveDef<T>, localName?: string): T {
let instance; let instance;
if (directive == null) { ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex');
// return existing ngDevMode && assertPreviousIsParent();
ngDevMode && assertDataInRange(index); let flags = previousOrParentNode !.flags;
instance = data[index]; let size = flags & LNodeFlags.SIZE_MASK;
if (size === 0) {
flags = (index << LNodeFlags.INDX_SHIFT) | LNodeFlags.SIZE_SKIP | flags & LNodeFlags.TYPE_MASK;
} else { } else {
ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); flags += LNodeFlags.SIZE_SKIP;
ngDevMode && assertPreviousIsParent(); }
let flags = previousOrParentNode !.flags; previousOrParentNode !.flags = flags;
let size = flags & LNodeFlags.SIZE_MASK;
if (size === 0) {
flags =
(index << LNodeFlags.INDX_SHIFT) | LNodeFlags.SIZE_SKIP | flags & LNodeFlags.TYPE_MASK;
} else {
flags += LNodeFlags.SIZE_SKIP;
}
previousOrParentNode !.flags = flags;
ngDevMode && assertDataInRange(index - 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});
data[index] = instance = directive; data[index] = instance = directive;
if (index >= ngStaticData.length) { if (index >= ngStaticData.length) {
ngStaticData[index] = directiveDef !; ngStaticData[index] = directiveDef !;
if (localName) { if (queryName) {
ngDevMode && assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData'); ngDevMode &&
const tNode = previousOrParentNode !.tNode !; assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData');
(tNode.localNames || (tNode.localNames = [])).push(localName, index); const nodeStaticData = previousOrParentNode !.tNode !;
} (nodeStaticData.localNames || (nodeStaticData.localNames = [])).push(queryName, index);
}
const diPublic = directiveDef !.diPublic;
if (diPublic) {
diPublic(directiveDef !);
}
const tNode: TNode|null = previousOrParentNode.tNode !;
if (tNode && tNode.attrs) {
setInputsFromAttrs<T>(instance, directiveDef !.inputs, tNode);
} }
} }
const diPublic = directiveDef !.diPublic;
if (diPublic) {
diPublic(directiveDef !);
}
const staticData: TNode|null = previousOrParentNode.tNode !;
if (staticData && staticData.attrs) {
setInputsFromAttrs<T>(instance, directiveDef !.inputs, staticData);
}
return instance; return instance;
} }
@ -1039,10 +1105,11 @@ export function executeViewHooks(): void {
* @param template Optional inline template * @param template Optional inline template
* @param tagName The name of the container element, if applicable * @param tagName The name of the container element, if applicable
* @param attrs The attrs attached to the container, if applicable * @param attrs The attrs attached to the container, if applicable
* @param localRefs A set of local reference bindings on the element.
*/ */
export function containerStart( export function containerStart(
index: number, template?: ComponentTemplate<any>, tagName?: string, attrs?: string[], index: number, directiveTypes?: DirectiveType<any>[], template?: ComponentTemplate<any>,
localName?: string): void { tagName?: string, attrs?: string[], localRefs?: string[] | null): void {
ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex');
// If the direct parent of the container is a view, its views (including its comment) // If the direct parent of the container is a view, its views (including its comment)
@ -1068,13 +1135,16 @@ export function containerStart(
}); });
if (node.tNode == null) { if (node.tNode == null) {
// TODO(misko): implement queryName caching
const queryName: string|null = hack_findQueryName(null, localRefs, '');
node.tNode = ngStaticData[index] = node.tNode = ngStaticData[index] =
createTNode(tagName || null, attrs || null, [], localName || null); createTNode(tagName || null, attrs || null, [], queryName || null);
} }
// Containers are added to the current view tree instead of their embedded views // Containers are added to the current view tree instead of their embedded views
// because views can be removed and re-inserted. // because views can be removed and re-inserted.
addToViewTree(node.data); addToViewTree(node.data);
hack_declareDirectives(index, directiveTypes, localRefs);
} }
export function containerEnd() { export function containerEnd() {

6
packages/core/src/render3/interfaces/definition.ts
View File

@ -57,6 +57,11 @@ export interface DirectiveDef<T> {
*/ */
methods: {[P in keyof T]: P}; methods: {[P in keyof T]: P};
/**
* Name under which the directive is exported (for use with local references in template)
*/
exportAs: string|null;
/** /**
* factory function used to create a new directive instance. * factory function used to create a new directive instance.
* *
@ -131,6 +136,7 @@ export interface DirectiveDefArgs<T> {
outputs?: {[P in keyof T]?: string}; outputs?: {[P in keyof T]?: string};
methods?: {[P in keyof T]?: string}; methods?: {[P in keyof T]?: string};
features?: DirectiveDefFeature[]; features?: DirectiveDefFeature[];
exportAs?: string;
} }
export interface ComponentDefArgs<T> extends DirectiveDefArgs<T> { export interface ComponentDefArgs<T> extends DirectiveDefArgs<T> {

9
packages/core/test/render3/component_spec.ts
View File

@ -68,8 +68,7 @@ describe('encapsulation', () => {
tag: 'wrapper', tag: 'wrapper',
template: function(ctx: WrapperComponent, cm: boolean) { template: function(ctx: WrapperComponent, cm: boolean) {
if (cm) { if (cm) {
E(0, EncapsulatedComponent.ngComponentDef); E(0, EncapsulatedComponent);
{ D(1, EncapsulatedComponent.ngComponentDef.n(), EncapsulatedComponent.ngComponentDef); }
e(); e();
} }
EncapsulatedComponent.ngComponentDef.h(1, 0); EncapsulatedComponent.ngComponentDef.h(1, 0);
@ -86,8 +85,7 @@ describe('encapsulation', () => {
template: function(ctx: EncapsulatedComponent, cm: boolean) { template: function(ctx: EncapsulatedComponent, cm: boolean) {
if (cm) { if (cm) {
T(0, 'foo'); T(0, 'foo');
E(1, LeafComponent.ngComponentDef); E(1, LeafComponent);
{ D(2, LeafComponent.ngComponentDef.n(), LeafComponent.ngComponentDef); }
e(); e();
} }
LeafComponent.ngComponentDef.h(2, 1); LeafComponent.ngComponentDef.h(2, 1);
@ -135,8 +133,7 @@ describe('encapsulation', () => {
tag: 'wrapper', tag: 'wrapper',
template: function(ctx: WrapperComponentWith, cm: boolean) { template: function(ctx: WrapperComponentWith, cm: boolean) {
if (cm) { if (cm) {
E(0, LeafComponentwith.ngComponentDef); E(0, LeafComponentwith);
{ D(1, LeafComponentwith.ngComponentDef.n(), LeafComponentwith.ngComponentDef); }
e(); e();
} }
LeafComponentwith.ngComponentDef.h(1, 0); LeafComponentwith.ngComponentDef.h(1, 0);

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

@ -30,11 +30,8 @@ describe('content projection', () => {
*/ */
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);
{ { T(2, 'content'); }
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, 'content');
}
e(); e();
} }
Child.ngComponentDef.h(1, 0); Child.ngComponentDef.h(1, 0);
@ -53,11 +50,8 @@ describe('content projection', () => {
}); });
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);
{ { T(2, 'content'); }
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, 'content');
}
e(); e();
} }
Child.ngComponentDef.h(1, 0); Child.ngComponentDef.h(1, 0);
@ -79,11 +73,8 @@ describe('content projection', () => {
const Child = createComponent('child', function(ctx: any, cm: boolean) { const Child = createComponent('child', function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
m(0, pD()); m(0, pD());
E(1, GrandChild.ngComponentDef); E(1, GrandChild);
{ { P(3, 0); }
D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef);
P(3, 0);
}
e(); e();
GrandChild.ngComponentDef.h(2, 1); GrandChild.ngComponentDef.h(2, 1);
GrandChild.ngComponentDef.r(2, 1); GrandChild.ngComponentDef.r(2, 1);
@ -91,9 +82,8 @@ describe('content projection', () => {
}); });
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'b'); E(2, 'b');
T(3, 'Hello'); T(3, 'Hello');
e(); e();
@ -120,9 +110,8 @@ describe('content projection', () => {
}); });
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, '('); T(2, '(');
C(3); C(3);
c(); c();
@ -162,9 +151,8 @@ describe('content projection', () => {
}); });
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
C(2); C(2);
c(); c();
} }
@ -206,9 +194,8 @@ describe('content projection', () => {
}); });
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, '('); T(2, '(');
C(3); C(3);
c(); c();
@ -285,9 +272,9 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); childCmptInstance = D(1);
T(2, 'content'); T(2, 'content');
} }
e(); e();
@ -341,9 +328,9 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); childCmptInstance = D(1);
T(2, 'content'); T(2, 'content');
} }
e(); e();
@ -381,11 +368,8 @@ describe('content projection', () => {
*/ */
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);
{ { T(2, 'content'); }
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
T(2, 'content');
}
e(); e();
} }
Child.ngComponentDef.h(1, 0); Child.ngComponentDef.h(1, 0);
@ -442,9 +426,9 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); childCmptInstance = D(1);
T(2, 'content'); T(2, 'content');
} }
e(); e();
@ -488,9 +472,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['title', 'toFirst']); E(2, 'span', ['title', 'toFirst']);
{ T(3, '1'); } { T(3, '1'); }
e(); e();
@ -536,9 +519,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'toFirst']); E(2, 'span', ['class', 'toFirst']);
{ T(3, '1'); } { T(3, '1'); }
e(); e();
@ -584,9 +566,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'other toFirst']); E(2, 'span', ['class', 'other toFirst']);
{ T(3, '1'); } { T(3, '1'); }
e(); e();
@ -631,9 +612,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'toFirst']); E(2, 'span', ['class', 'toFirst']);
{ T(3, '1'); } { T(3, '1'); }
e(); e();
@ -678,9 +658,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span', ['class', 'toFirst']); E(2, 'span', ['class', 'toFirst']);
{ T(3, '1'); } { T(3, '1'); }
e(); e();
@ -727,9 +706,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span'); E(2, 'span');
{ T(3, '1'); } { T(3, '1'); }
e(); e();
@ -780,9 +758,8 @@ describe('content projection', () => {
const Child = createComponent('child', function(ctx: any, cm: boolean) { const Child = createComponent('child', function(ctx: any, cm: boolean) {
if (cm) { if (cm) {
m(0, pD()); m(0, pD());
E(1, GrandChild.ngComponentDef); E(1, GrandChild);
{ {
D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef);
P(3, 0); P(3, 0);
E(4, 'span'); E(4, 'span');
{ T(5, 'in child template'); } { T(5, 'in child template'); }
@ -803,9 +780,8 @@ describe('content projection', () => {
*/ */
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);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef);
E(2, 'span'); E(2, 'span');
{ T(3, 'parent content'); } { T(3, 'parent content'); }
e(); e();
@ -845,10 +821,9 @@ describe('content projection', () => {
*/ */
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) { if (cm) {
E(0, Child.ngComponentDef); E(0, Child);
{ {
D(1, Child.ngComponentDef.n(), Child.ngComponentDef); C(2, undefined, undefined, 'div');
C(2, undefined, 'div');
c(); c();
} }
e(); e();

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

@ -21,16 +21,13 @@ describe('di', () => {
it('should create directive with no deps', () => { it('should create directive with no deps', () => {
class Directive { class Directive {
value: string = 'Created'; value: string = 'Created';
static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
} }
const DirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [Directive]);
{ { T(2); }
D(1, DirectiveDef.n(), DirectiveDef);
T(2);
}
e(); e();
} }
t(2, b(D<Directive>(1).value)); t(2, b(D<Directive>(1).value));
@ -44,36 +41,31 @@ describe('di', () => {
it('should create directive with inter view dependencies', () => { it('should create directive with inter view dependencies', () => {
class DirectiveA { class DirectiveA {
value: string = 'A'; value: string = 'A';
static ngDirectiveDef = defineDirective(
{type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]});
} }
const DirectiveADef = defineDirective(
{type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]});
class DirectiveB { class DirectiveB {
value: string = 'B'; value: string = 'B';
static ngDirectiveDef = defineDirective(
{type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
} }
const DirectiveBDef = defineDirective(
{type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
class DirectiveC { class DirectiveC {
value: string; value: string;
constructor(a: DirectiveA, b: DirectiveB) { this.value = a.value + b.value; } constructor(a: DirectiveA, b: DirectiveB) { this.value = a.value + b.value; }
static ngDirectiveDef = defineDirective({
type: DirectiveC,
factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))
});
} }
const DirectiveCDef = defineDirective({
type: DirectiveC,
factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))
});
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [DirectiveA]);
{ {
D(1, DirectiveADef.n(), DirectiveADef); E(2, 'span', null, [DirectiveB, DirectiveC]);
E(2, 'span'); { T(5); }
{
D(3, DirectiveBDef.n(), DirectiveBDef);
D(4, DirectiveCDef.n(), DirectiveCDef);
T(5);
}
e(); e();
} }
e(); e();
@ -92,32 +84,28 @@ describe('di', () => {
constructor(public elementRef: ElementRef) { constructor(public elementRef: ElementRef) {
this.value = (elementRef.constructor as any).name; this.value = (elementRef.constructor as any).name;
} }
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectElementRef()),
features: [PublicFeature]
});
} }
const DirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectElementRef()),
features: [PublicFeature]
});
class DirectiveSameInstance { class DirectiveSameInstance {
value: boolean; value: boolean;
constructor(elementRef: ElementRef, directive: Directive) { constructor(elementRef: ElementRef, directive: Directive) {
this.value = elementRef === directive.elementRef; this.value = elementRef === directive.elementRef;
} }
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
});
} }
const DirectiveSameInstanceDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
});
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [Directive, DirectiveSameInstance]);
{ { T(3); }
D(1, DirectiveDef.n(), DirectiveDef);
D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
T(3);
}
e(); e();
} }
t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, '')); t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
@ -134,32 +122,28 @@ describe('di', () => {
constructor(public templateRef: TemplateRef<any>) { constructor(public templateRef: TemplateRef<any>) {
this.value = (templateRef.constructor as any).name; this.value = (templateRef.constructor as any).name;
} }
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectTemplateRef()),
features: [PublicFeature]
});
} }
const DirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectTemplateRef()),
features: [PublicFeature]
});
class DirectiveSameInstance { class DirectiveSameInstance {
value: boolean; value: boolean;
constructor(templateRef: TemplateRef<any>, directive: Directive) { constructor(templateRef: TemplateRef<any>, directive: Directive) {
this.value = templateRef === directive.templateRef; this.value = templateRef === directive.templateRef;
} }
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
});
} }
const DirectiveSameInstanceDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
});
function Template(ctx: any, cm: any) { function Template(ctx: any, cm: any) {
if (cm) { if (cm) {
C(0, function() {}); C(0, [Directive, DirectiveSameInstance], function() {});
{
D(1, DirectiveDef.n(), DirectiveDef);
D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
}
c(); c();
T(3); T(3);
} }
@ -177,32 +161,28 @@ describe('di', () => {
constructor(public viewContainerRef: ViewContainerRef) { constructor(public viewContainerRef: ViewContainerRef) {
this.value = (viewContainerRef.constructor as any).name; this.value = (viewContainerRef.constructor as any).name;
} }
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectViewContainerRef()),
features: [PublicFeature]
});
} }
const DirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectViewContainerRef()),
features: [PublicFeature]
});
class DirectiveSameInstance { class DirectiveSameInstance {
value: boolean; value: boolean;
constructor(viewContainerRef: ViewContainerRef, directive: Directive) { constructor(viewContainerRef: ViewContainerRef, directive: Directive) {
this.value = viewContainerRef === directive.viewContainerRef; this.value = viewContainerRef === directive.viewContainerRef;
} }
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
});
} }
const DirectiveSameInstanceDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
});
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [Directive, DirectiveSameInstance]);
{ { T(3); }
D(1, DirectiveDef.n(), DirectiveDef);
D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef);
T(3);
}
e(); e();
} }
t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, '')); t(3, b2('', D<Directive>(1).value, '-', D<DirectiveSameInstance>(2).value, ''));
@ -255,38 +235,41 @@ describe('di', () => {
}); });
it('should inject from parent view', () => { it('should inject from parent view', () => {
class ParentDirective {} class ParentDirective {
const ParentDirectiveDef = defineDirective( static ngDirectiveDef = defineDirective({
{type: ParentDirective, factory: () => new ParentDirective(), features: [PublicFeature]}); type: ParentDirective,
factory: () => new ParentDirective(),
features: [PublicFeature]
});
}
class ChildDirective { class ChildDirective {
value: string; value: string;
constructor(public parent: ParentDirective) { constructor(public parent: ParentDirective) {
this.value = (parent.constructor as any).name; this.value = (parent.constructor as any).name;
} }
static ngDirectiveDef = defineDirective({
type: ChildDirective,
factory: () => new ChildDirective(inject(ParentDirective)),
features: [PublicFeature]
});
} }
const ChildDirectiveDef = defineDirective({
type: ChildDirective,
factory: () => new ChildDirective(inject(ParentDirective)),
features: [PublicFeature]
});
class Child2Directive { class Child2Directive {
value: boolean; value: boolean;
constructor(parent: ParentDirective, child: ChildDirective) { constructor(parent: ParentDirective, child: ChildDirective) {
this.value = parent === child.parent; this.value = parent === child.parent;
} }
static ngDirectiveDef = defineDirective({
type: Child2Directive,
factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
});
} }
const Child2DirectiveDef = defineDirective({
type: Child2Directive,
factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
});
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [ParentDirective]);
{ {
D(1, ParentDirectiveDef.n(), ParentDirectiveDef);
C(2); C(2);
c(); c();
} }
@ -295,12 +278,8 @@ describe('di', () => {
cR(2); cR(2);
{ {
if (V(0)) { if (V(0)) {
E(0, 'span'); E(0, 'span', null, [ChildDirective, Child2Directive]);
{ { T(3); }
D(1, ChildDirectiveDef.n(), ChildDirectiveDef);
D(2, Child2DirectiveDef.n(), Child2DirectiveDef);
T(3);
}
e(); e();
} }
t(3, b2('', D<ChildDirective>(1).value, '-', D<Child2Directive>(2).value, '')); t(3, b2('', D<ChildDirective>(1).value, '-', D<Child2Directive>(2).value, ''));

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

@ -19,22 +19,21 @@ describe('directive', () => {
class Directive { class Directive {
klass = 'foo'; klass = 'foo';
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => directiveInstance = new Directive,
refresh: (directiveIndex: number, elementIndex: number) => {
p(elementIndex, 'className', b(D<Directive>(directiveIndex).klass));
}
});
} }
const DirectiveDef = defineDirective({
type: Directive,
factory: () => directiveInstance = new Directive,
refresh: (directiveIndex: number, elementIndex: number) => {
p(elementIndex, 'className', b(D<Directive>(directiveIndex).klass));
}
});
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'span'); E(0, 'span', null, [Directive]);
{ D(1, DirectiveDef.n(), DirectiveDef); }
e(); e();
} }
DirectiveDef.r(1, 0); Directive.ngDirectiveDef.r(1, 0);
} }
expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>'); expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>');

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

@ -32,8 +32,7 @@ describe('exports', () => {
/** <comp #myComp></comp> {{ myComp.name }} */ /** <comp #myComp></comp> {{ myComp.name }} */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComponent.ngComponentDef); E(0, MyComponent);
{ D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
T(2); T(2);
} }
@ -78,11 +77,9 @@ describe('exports', () => {
/** <comp #myComp></comp> <div [myDir]="myComp"></div> */ /** <comp #myComp></comp> <div [myDir]="myComp"></div> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComponent.ngComponentDef); E(0, MyComponent);
{ D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
E(2, 'div'); E(2, 'div', null, [MyDir]);
{ D(3, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
p(2, 'myDir', b(D<MyComponent>(1))); p(2, 'myDir', b(D<MyComponent>(1)));
@ -97,8 +94,7 @@ describe('exports', () => {
/** <div someDir #myDir="someDir"></div> {{ myDir.name }} */ /** <div someDir #myDir="someDir"></div> {{ myDir.name }} */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [SomeDir]);
D(1, SomeDirDef.n(), SomeDirDef);
e(); e();
T(2); T(2);
} }
@ -107,8 +103,8 @@ describe('exports', () => {
class SomeDir { class SomeDir {
name = 'Drew'; name = 'Drew';
static ngDirectiveDef = defineDirective({type: SomeDir, factory: () => new SomeDir});
} }
const SomeDirDef = defineDirective({type: SomeDir, factory: () => new SomeDir});
expect(renderToHtml(Template, {})).toEqual('<div></div>Drew'); expect(renderToHtml(Template, {})).toEqual('<div></div>Drew');
}); });
@ -207,11 +203,9 @@ describe('exports', () => {
/** <div [myDir]="myComp"></div><comp #myComp></comp> */ /** <div [myDir]="myComp"></div><comp #myComp></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'div'); E(0, 'div', null, [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
E(2, MyComponent.ngComponentDef); E(2, MyComponent);
{ D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
} }
p(0, 'myDir', b(D<MyComponent>(3))); p(0, 'myDir', b(D<MyComponent>(3)));
@ -228,8 +222,7 @@ describe('exports', () => {
if (cm) { if (cm) {
T(0); T(0);
T(1); T(1);
E(2, 'comp'); E(2, MyComponent);
{ D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); }
e(); e();
E(4, 'input', ['value', 'one']); E(4, 'input', ['value', 'one']);
e(); e();

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

@ -230,8 +230,7 @@ describe('render3 integration test', () => {
it('should support a basic component template', () => { it('should support a basic component template', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent.ngComponentDef); E(0, TodoComponent);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
} }
TodoComponent.ngComponentDef.h(1, 0); TodoComponent.ngComponentDef.h(1, 0);
@ -244,8 +243,7 @@ describe('render3 integration test', () => {
it('should support a component template with sibling', () => { it('should support a component template with sibling', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponent.ngComponentDef); E(0, TodoComponent);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
T(2, 'two'); T(2, 'two');
} }
@ -262,11 +260,9 @@ describe('render3 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);
{ D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
E(2, TodoComponent.ngComponentDef); E(2, TodoComponent);
{ D(3, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); }
e(); e();
} }
TodoComponent.ngComponentDef.h(1, 0); TodoComponent.ngComponentDef.h(1, 0);
@ -303,11 +299,7 @@ describe('render3 integration test', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, TodoComponentHostBinding.ngComponentDef); E(0, TodoComponentHostBinding);
{
D(1, TodoComponentHostBinding.ngComponentDef.n(),
TodoComponentHostBinding.ngComponentDef);
}
e(); e();
} }
TodoComponentHostBinding.ngComponentDef.h(1, 0); TodoComponentHostBinding.ngComponentDef.h(1, 0);
@ -340,8 +332,7 @@ describe('render3 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);
{ D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
e(); e();
} }
MyComp.ngComponentDef.h(1, 0); MyComp.ngComponentDef.h(1, 0);
@ -388,8 +379,7 @@ describe('render3 integration test', () => {
/** <comp [condition]="condition"></comp> */ /** <comp [condition]="condition"></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, MyComp.ngComponentDef); E(0, MyComp);
{ D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); }
e(); e();
} }
p(0, 'condition', b(ctx.condition)); p(0, 'condition', b(ctx.condition));

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

@ -15,8 +15,7 @@ describe('lifecycles', () => {
function getParentTemplate(type: any) { function getParentTemplate(type: any) {
return (ctx: any, cm: boolean) => { return (ctx: any, cm: boolean) => {
if (cm) { if (cm) {
E(0, type.ngComponentDef); E(0, type);
{ D(1, type.ngComponentDef.n(), type.ngComponentDef); }
e(); e();
} }
p(0, 'val', b(ctx.val)); p(0, 'val', b(ctx.val));
@ -54,8 +53,7 @@ describe('lifecycles', () => {
/** <comp [val]="val"></comp> */ /** <comp [val]="val"></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b(ctx.val)); p(0, 'val', b(ctx.val));
@ -78,8 +76,7 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(1, 0);
@ -100,11 +97,9 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
E(2, Parent.ngComponentDef); E(2, Parent);
{ D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -136,8 +131,7 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -169,13 +163,11 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Comp.ngComponentDef); E(3, Comp);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -186,8 +178,7 @@ describe('lifecycles', () => {
{ {
for (let j = 2; j < 5; j++) { for (let j = 2; j < 5; j++) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', j); p(0, 'val', j);
@ -219,13 +210,11 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Parent.ngComponentDef); E(3, Parent);
{ D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -236,8 +225,7 @@ describe('lifecycles', () => {
{ {
for (let j = 2; j < 5; j++) { for (let j = 2; j < 5; j++) {
if (V(0)) { if (V(0)) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', j); p(0, 'val', j);
@ -303,8 +291,7 @@ describe('lifecycles', () => {
/** <comp></comp> */ /** <comp></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -326,8 +313,7 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(1, 0);
@ -342,8 +328,7 @@ describe('lifecycles', () => {
/** <comp></comp> */ /** <comp></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -400,8 +385,7 @@ describe('lifecycles', () => {
/** <comp></comp> */ /** <comp></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -430,8 +414,7 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -461,8 +444,7 @@ describe('lifecycles', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(1, 0);
@ -483,11 +465,9 @@ describe('lifecycles', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
E(2, Parent.ngComponentDef); E(2, Parent);
{ D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -512,13 +492,11 @@ describe('lifecycles', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Comp.ngComponentDef); E(3, Comp);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -529,8 +507,7 @@ describe('lifecycles', () => {
{ {
for (let i = 2; i < 4; i++) { for (let i = 2; i < 4; i++) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', i); p(0, 'val', i);
@ -559,13 +536,11 @@ describe('lifecycles', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Parent.ngComponentDef); E(3, Parent);
{ D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -576,8 +551,7 @@ describe('lifecycles', () => {
{ {
for (let i = 2; i < 4; i++) { for (let i = 2; i < 4; i++) {
if (V(0)) { if (V(0)) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', i); p(0, 'val', i);
@ -604,8 +578,7 @@ describe('lifecycles', () => {
/** <comp></comp> */ /** <comp></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -623,8 +596,7 @@ describe('lifecycles', () => {
/** <comp [val]="myVal"></comp> */ /** <comp [val]="myVal"></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b(ctx.myVal)); p(0, 'val', b(ctx.myVal));
@ -649,13 +621,11 @@ describe('lifecycles', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Parent.ngComponentDef); E(3, Parent);
{ D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', 1); p(0, 'val', 1);
@ -666,8 +636,7 @@ describe('lifecycles', () => {
{ {
for (let i = 2; i < 4; i++) { for (let i = 2; i < 4; i++) {
if (V(0)) { if (V(0)) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
p(0, 'val', i); p(0, 'val', i);
@ -737,8 +706,7 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);
@ -771,11 +739,9 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
E(2, Comp.ngComponentDef); E(2, Comp);
{ D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b('1')); p(0, 'val', b('1'));
@ -813,8 +779,7 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Parent.ngComponentDef); E(0, Parent);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(1, 0);
@ -842,8 +807,7 @@ 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);
{ D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); }
e(); e();
} }
Parent.ngComponentDef.h(1, 0); Parent.ngComponentDef.h(1, 0);
@ -859,8 +823,7 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Grandparent.ngComponentDef); E(0, Grandparent);
{ D(1, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); }
e(); e();
} }
Grandparent.ngComponentDef.h(1, 0); Grandparent.ngComponentDef.h(1, 0);
@ -897,13 +860,11 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Comp.ngComponentDef); E(3, Comp);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b('1')); p(0, 'val', b('1'));
@ -914,8 +875,7 @@ describe('lifecycles', () => {
{ {
if (ctx.condition2) { if (ctx.condition2) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b('2')); p(0, 'val', b('2'));
@ -978,13 +938,11 @@ describe('lifecycles', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
C(2); C(2);
c(); c();
E(3, Comp.ngComponentDef); E(3, Comp);
{ D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b('1')); p(0, 'val', b('1'));
@ -995,8 +953,7 @@ describe('lifecycles', () => {
{ {
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);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'val', b(j)); p(0, 'val', b(j));
@ -1067,8 +1024,7 @@ describe('lifecycles', () => {
T(1, 'Click me'); T(1, 'Click me');
} }
e(); e();
E(2, Comp.ngComponentDef); E(2, Comp);
{ D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
E(4, 'button'); E(4, 'button');
{ {

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

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

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

@ -44,11 +44,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()"></button-toggle> */ /** <button-toggle (change)="onChange()"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
@ -70,9 +67,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */ /** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle);
{ {
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));
} }
@ -98,11 +94,8 @@ describe('outputs', () => {
/** <button-toggle (change)="counter++"></button-toggle> */ /** <button-toggle (change)="counter++"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle);
{ { L('change', () => ctx.counter++); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', () => ctx.counter++);
}
e(); e();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
@ -136,11 +129,8 @@ describe('outputs', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
@ -191,11 +181,8 @@ describe('outputs', () => {
{ {
if (ctx.condition2) { if (ctx.condition2) {
if (V(0)) { if (V(0)) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
@ -265,14 +252,10 @@ describe('outputs', () => {
T(1, 'Click me'); T(1, 'Click me');
} }
e(); e();
E(2, ButtonToggle.ngComponentDef); E(2, ButtonToggle);
{ { L('change', ctx.onChange.bind(ctx)); }
D(3, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
E(4, DestroyComp.ngComponentDef); E(4, DestroyComp);
{ D(5, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); }
e(); e();
} }
ButtonToggle.ngComponentDef.h(3, 2); ButtonToggle.ngComponentDef.h(3, 2);
@ -323,11 +306,8 @@ describe('outputs', () => {
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button', null, [MyButton]);
{ { L('click', ctx.onClick.bind(ctx)); }
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
L('click', ctx.onClick.bind(ctx));
}
e(); e();
} }
} }
@ -349,12 +329,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir></button-toggle> */ /** <button-toggle (change)="onChange()" otherDir></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle, null, [OtherDir]);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
@ -384,12 +360,8 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */ /** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle, null, [OtherDir]);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
p(0, 'change', b(ctx.change)); p(0, 'change', b(ctx.change));
@ -433,11 +405,8 @@ describe('outputs', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, ButtonToggle.ngComponentDef); E(0, ButtonToggle);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
ButtonToggle.ngComponentDef.h(1, 0); ButtonToggle.ngComponentDef.h(1, 0);
@ -445,11 +414,8 @@ describe('outputs', () => {
v(); v();
} else { } else {
if (V(1)) { if (V(1)) {
E(0, 'div'); E(0, 'div', null, [OtherDir]);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
v(); v();

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

@ -90,12 +90,8 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */ /** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button', null, [MyButton, OtherDir]);
{ { T(3, 'Click me'); }
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
T(3, 'Click me');
}
e(); e();
} }
@ -120,11 +116,8 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */ /** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button', null, [MyButton]);
{ { T(2, 'Click me'); }
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
T(2, 'Click me');
}
e(); e();
} }
@ -159,8 +152,7 @@ describe('elementProperty', () => {
/** <comp [id]="id"></comp> */ /** <comp [id]="id"></comp> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, Comp.ngComponentDef); E(0, Comp);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
p(0, 'id', b(ctx.id)); p(0, 'id', b(ctx.id));
@ -191,12 +183,8 @@ describe('elementProperty', () => {
/** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */ /** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button', null, [MyButton, OtherDisabledDir]);
{ { T(3, 'Click me'); }
D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef);
D(2, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef);
T(3, 'Click me');
}
e(); e();
} }
p(0, 'disabled', b(ctx.isDisabled)); p(0, 'disabled', b(ctx.isDisabled));
@ -217,9 +205,8 @@ describe('elementProperty', () => {
/** <button otherDir [id]="id" (click)="onClick()">Click me</button> */ /** <button otherDir [id]="id" (click)="onClick()">Click me</button> */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button', null, [OtherDir]);
{ {
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
L('click', ctx.onClick.bind(ctx)); L('click', ctx.onClick.bind(ctx));
T(2, 'Click me'); T(2, 'Click me');
} }
@ -261,11 +248,8 @@ describe('elementProperty', () => {
*/ */
function Template(ctx: any, cm: boolean) { function Template(ctx: any, cm: boolean) {
if (cm) { if (cm) {
E(0, 'button'); E(0, 'button', null, [IdDir]);
{ { T(2, 'Click me'); }
D(1, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef);
T(2, 'Click me');
}
e(); e();
C(3); C(3);
c(); c();
@ -283,11 +267,8 @@ describe('elementProperty', () => {
v(); v();
} else { } else {
if (V(1)) { if (V(1)) {
E(0, 'button'); E(0, 'button', null, [OtherDir]);
{ { T(2, 'Click me too'); }
D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef);
T(2, 'Click me too');
}
e(); e();
} }
p(0, 'id', b(ctx.id3)); p(0, 'id', b(ctx.id3));
@ -337,8 +318,7 @@ describe('elementProperty', () => {
/** <div role="button" myDir></div> */ /** <div role="button" myDir></div> */
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'], [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
} }
@ -352,8 +332,7 @@ describe('elementProperty', () => {
/** <div role="button" [role]="role" myDir></div> */ /** <div role="button" [role]="role" myDir></div> */
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'], [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
p(0, 'role', b(ctx.role)); p(0, 'role', b(ctx.role));
@ -371,11 +350,7 @@ describe('elementProperty', () => {
/** <div role="button" myDir myDirB></div> */ /** <div role="button" myDir myDirB></div> */
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'], [MyDir, MyDirB]);
{
D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef);
D(2, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef);
}
e(); e();
} }
} }
@ -390,8 +365,7 @@ describe('elementProperty', () => {
/** <div role="button" dir="rtl" myDir></div> */ /** <div role="button" dir="rtl" myDir></div> */
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'], [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
} }
} }
@ -406,11 +380,8 @@ describe('elementProperty', () => {
/** <div role="button" (change)="onChange()" myDir></div> */ /** <div role="button" (change)="onChange()" myDir></div> */
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'], [MyDir]);
{ { L('change', ctx.onChange.bind(ctx)); }
D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef);
L('change', ctx.onChange.bind(ctx));
}
e(); e();
} }
} }
@ -434,11 +405,9 @@ 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'], [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
E(2, 'div', ['role', 'listbox']); E(2, 'div', ['role', 'listbox'], [MyDirB]);
{ D(3, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); }
e(); e();
} }
} }
@ -462,8 +431,7 @@ 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'], [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
C(2); C(2);
c(); c();
@ -472,8 +440,7 @@ describe('elementProperty', () => {
{ {
if (ctx.condition) { if (ctx.condition) {
if (V(0)) { if (V(0)) {
E(0, 'div', ['role', 'button']); E(0, 'div', ['role', 'button'], [MyDirB]);
{ D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); }
e(); e();
} }
v(); v();
@ -510,8 +477,7 @@ describe('elementProperty', () => {
type: Comp, type: Comp,
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'], [MyDir]);
{ D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); }
e(); e();
T(2); T(2);
} }
@ -535,8 +501,7 @@ 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);
{ D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); }
e(); e();
} }
Comp.ngComponentDef.h(1, 0); Comp.ngComponentDef.h(1, 0);

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

@ -59,11 +59,11 @@ describe('query', () => {
if (cm) { if (cm) {
m(0, Q(Child, false)); m(0, Q(Child, false));
m(1, Q(Child, true)); m(1, Q(Child, true));
E(2, Child.ngComponentDef); E(2, Child);
{ {
child1 = D(3, Child.ngComponentDef.n(), Child.ngComponentDef); child1 = D(3);
E(4, Child.ngComponentDef); E(4, Child);
{ child2 = D(5, Child.ngComponentDef.n(), Child.ngComponentDef); } { child2 = D(5); }
e(); e();
} }
e(); e();
@ -92,8 +92,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(Child, false, QueryReadType.ElementRef)); m(0, Q(Child, false, QueryReadType.ElementRef));
elToQuery = E(1, 'div'); elToQuery = E(1, 'div', null, [Child]);
{ D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); }
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -121,11 +120,8 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(Child, false, OtherChild)); m(0, Q(Child, false, OtherChild));
E(1, 'div'); E(1, 'div', null, [Child, OtherChild]);
{ { otherChildInstance = D(3); }
D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef);
D(3, otherChildInstance = OtherChild.ngDirectiveDef.n(), OtherChild.ngDirectiveDef);
}
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -150,8 +146,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(Child, false, OtherChild)); m(0, Q(Child, false, OtherChild));
E(1, 'div'); E(1, 'div', null, [Child]);
{ D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); }
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -179,7 +174,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'])); m(0, Q(['foo']));
elToQuery = E(1, 'div', [], 'foo'); elToQuery = E(1, 'div', null, null, ['foo', '']);
e(); e();
E(2, 'div'); E(2, 'div');
e(); e();
@ -209,11 +204,11 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo', 'bar'])); m(0, Q(['foo', 'bar']));
el1ToQuery = E(1, 'div', null, 'foo'); el1ToQuery = E(1, 'div', null, null, ['foo', '']);
e(); e();
E(2, 'div'); E(2, 'div');
e(); e();
el2ToQuery = E(3, 'div', null, 'bar'); el2ToQuery = E(3, 'div', null, null, ['bar', '']);
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -240,7 +235,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], false, QueryReadType.ElementRef)); m(0, Q(['foo'], false, QueryReadType.ElementRef));
elToQuery = E(1, 'div', [], 'foo'); elToQuery = E(1, 'div', null, null, ['foo', '']);
e(); e();
E(2, 'div'); E(2, 'div');
e(); e();
@ -266,7 +261,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], false, QueryReadType.ViewContainerRef)); m(0, Q(['foo'], false, QueryReadType.ViewContainerRef));
E(1, 'div', [], 'foo'); E(1, 'div', null, null, ['foo', '']);
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -289,7 +284,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], false, QueryReadType.ViewContainerRef)); m(0, Q(['foo'], false, QueryReadType.ViewContainerRef));
C(1, undefined, undefined, undefined, 'foo'); C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c(); c();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -313,7 +308,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], false, QueryReadType.ElementRef)); m(0, Q(['foo'], false, QueryReadType.ElementRef));
C(1, undefined, undefined, undefined, 'foo'); C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c(); c();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -338,7 +333,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'])); m(0, Q(['foo']));
C(1, undefined, undefined, undefined, 'foo'); C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c(); c();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -362,7 +357,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], false, QueryReadType.TemplateRef)); m(0, Q(['foo'], false, QueryReadType.TemplateRef));
C(1, undefined, undefined, undefined, 'foo'); C(1, undefined, undefined, undefined, undefined, ['foo', '']);
c(); c();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -388,8 +383,8 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'])); m(0, Q(['foo']));
E(1, Child.ngComponentDef, []); E(1, Child, null, null, ['foo', '']);
{ childInstance = D(2, Child.ngComponentDef.n(), Child.ngComponentDef, 'foo'); } { childInstance = D(2); }
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -403,7 +398,7 @@ describe('query', () => {
it('should read directive instance if element queried for has an exported directive with a matching name', it('should read directive instance if element queried for has an exported directive with a matching name',
() => { () => {
const Child = createDirective(); const Child = createDirective({exportAs: 'child'});
let childInstance; let childInstance;
/** /**
@ -416,8 +411,8 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'])); m(0, Q(['foo']));
E(1, 'div'); E(1, 'div', null, [Child], ['foo', 'child']);
{ childInstance = D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'foo'); } childInstance = D(2);
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -430,8 +425,8 @@ describe('query', () => {
}); });
it('should read all matching directive instances from a given element', () => { it('should read all matching directive instances from a given element', () => {
const Child1 = createDirective(); const Child1 = createDirective({exportAs: 'child1'});
const Child2 = createDirective(); const Child2 = createDirective({exportAs: 'child2'});
let child1Instance, child2Instance; let child1Instance, child2Instance;
/** /**
@ -444,10 +439,10 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo', 'bar'])); m(0, Q(['foo', 'bar']));
E(1, 'div'); E(1, 'div', null, [Child1, Child2], ['foo', 'child1', 'bar', 'child2']);
{ {
child1Instance = D(2, Child1.ngDirectiveDef.n(), Child1.ngDirectiveDef, 'foo'); child1Instance = D(2);
child2Instance = D(3, Child2.ngDirectiveDef.n(), Child2.ngDirectiveDef, 'bar'); child2Instance = D(3);
} }
e(); e();
} }
@ -462,7 +457,7 @@ describe('query', () => {
}); });
it('should match match on exported directive name and read a requested token', () => { it('should match match on exported directive name and read a requested token', () => {
const Child = createDirective(); const Child = createDirective({exportAs: 'child'});
let div; let div;
/** /**
@ -475,8 +470,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], undefined, QueryReadType.ElementRef)); m(0, Q(['foo'], undefined, QueryReadType.ElementRef));
div = E(1, 'div'); div = E(1, 'div', null, [Child], ['foo', 'child']);
{ D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'foo'); }
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -489,7 +483,7 @@ describe('query', () => {
}); });
it('should support reading a mix of ElementRef and directive instances', () => { it('should support reading a mix of ElementRef and directive instances', () => {
const Child = createDirective(); const Child = createDirective({exportAs: 'child'});
let childInstance, div; let childInstance, div;
/** /**
@ -502,8 +496,8 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo', 'bar'])); m(0, Q(['foo', 'bar']));
div = E(1, 'div', [], 'foo'); div = E(1, 'div', null, [Child], ['foo', '', 'bar', 'child']);
{ childInstance = D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'bar'); } { childInstance = D(2); }
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
@ -530,7 +524,7 @@ describe('query', () => {
let tmp: any; let tmp: any;
if (cm) { if (cm) {
m(0, Q(['foo'], false, Child)); m(0, Q(['foo'], false, Child));
div = E(1, 'div', [], 'foo'); div = E(1, 'div', null, null, ['foo', '']);
e(); e();
} }
qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>); qR(tmp = m<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);

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

@ -7,6 +7,7 @@
*/ */
import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util'; import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util';
import {DirectiveDefArgs} from '../../src/render3/definition_interfaces';
import {ComponentTemplate, ComponentType, DirectiveType, PublicFeature, defineComponent, defineDirective, renderComponent as _renderComponent} from '../../src/render3/index'; import {ComponentTemplate, ComponentType, DirectiveType, PublicFeature, defineComponent, defineDirective, renderComponent as _renderComponent} from '../../src/render3/index';
import {NG_HOST_SYMBOL, createLNode, createLView, renderTemplate} from '../../src/render3/instructions'; import {NG_HOST_SYMBOL, createLNode, createLView, renderTemplate} from '../../src/render3/instructions';
import {LElementNode, LNodeFlags} from '../../src/render3/interfaces/node'; import {LElementNode, LNodeFlags} from '../../src/render3/interfaces/node';
@ -89,12 +90,13 @@ export function createComponent(
}; };
} }
export function createDirective(): DirectiveType<any> { export function createDirective({exportAs}: {exportAs?: string} = {}): DirectiveType<any> {
return class Directive { return class Directive {
static ngDirectiveDef = defineDirective({ static ngDirectiveDef = defineDirective({
type: Directive, type: Directive,
factory: () => new Directive(), factory: () => new Directive(),
features: [PublicFeature], features: [PublicFeature],
exportAs: exportAs,
}); });
}; };
} }

3
packages/core/test/render3/renderer_factory_spec.ts
View File

@ -63,8 +63,7 @@ describe('renderer factory lifecycle', () => {
logs.push('function_with_component'); logs.push('function_with_component');
if (cm) { if (cm) {
T(0, 'bar'); T(0, 'bar');
E(1, SomeComponent.ngComponentDef); E(1, SomeComponent);
{ D(2, SomeComponent.ngComponentDef.n(), SomeComponent.ngComponentDef); }
e(); e();
} }
SomeComponent.ngComponentDef.h(2, 1); SomeComponent.ngComponentDef.h(2, 1);