diff --git a/modules/benchmarks/src/tree/render3/tree.ts b/modules/benchmarks/src/tree/render3/tree.ts index 71cead278a..131635a0dc 100644 --- a/modules/benchmarks/src/tree/render3/tree.ts +++ b/modules/benchmarks/src/tree/render3/tree.ts @@ -56,8 +56,7 @@ export class TreeComponent { let cm0 = V(0); { if (cm0) { - E(0, TreeComponent.ngComponentDef); - { D(1, TreeComponent.ngComponentDef.n(), TreeComponent.ngComponentDef); } + E(0, TreeComponent); e(); } p(0, 'data', b(ctx.data.left)); @@ -74,8 +73,7 @@ export class TreeComponent { let cm0 = V(0); { if (cm0) { - E(0, TreeComponent.ngComponentDef); - { D(1, TreeComponent.ngComponentDef.n(), TreeComponent.ngComponentDef); } + E(0, TreeComponent); e(); } p(0, 'data', b(ctx.data.right)); diff --git a/packages/core/src/render3/assert.ts b/packages/core/src/render3/assert.ts index 0c30b7cec9..b90245f85a 100644 --- a/packages/core/src/render3/assert.ts +++ b/packages/core/src/render3/assert.ts @@ -21,7 +21,10 @@ * @returns The stringified value */ 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) { @@ -57,6 +60,8 @@ export function assertNotEqual(actual: T, expected: T, name: string) { export function assertThrow( actual: T, expected: T, name: string, operator: string, serializer: ((v: T) => string) = stringifyValueForError): never { - throw new Error( - `ASSERT: expected ${name} ${operator} ${serializer(expected)} but was ${serializer(actual)}!`); + const error = + `ASSERT: expected ${name} ${operator} ${serializer(expected)} but was ${serializer(actual)}!`; + debugger; // leave `debugger` here to aid in debugging. + throw new Error(error); } diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index e9a1b85a9a..8fd450a1fa 100644 --- a/packages/core/src/render3/component.ts +++ b/packages/core/src/render3/component.ts @@ -13,14 +13,13 @@ import {ComponentRef as viewEngine_ComponentRef} from '../linker/component_facto import {EmbeddedViewRef as viewEngine_EmbeddedViewRef} from '../linker/view_ref'; 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 {LElementNode} from './interfaces/node'; import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer'; import {notImplemented, stringify} from './util'; - /** Options that control how the component should be bootstrapped. */ export interface CreateComponentOptions { /** Which renderer factory to use. */ @@ -176,7 +175,7 @@ export function renderComponent( // Create element node at index 0 in data array hostElement(hostNode, componentDef); // 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 { leaveView(oldView); } diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index 74563c93da..c616a14711 100644 --- a/packages/core/src/render3/definition.ts +++ b/packages/core/src/render3/definition.ts @@ -44,6 +44,7 @@ export function defineComponent(componentDefinition: ComponentDefArgs): Co outputs: invertObject(componentDefinition.outputs), methods: invertObject(componentDefinition.methods), rendererType: resolveRendererType2(componentDefinition.rendererType) || null, + exportAs: componentDefinition.exportAs, }; const feature = componentDefinition.features; feature && feature.forEach((fn) => fn(def)); diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index f425d00d27..d4b1f4bae3 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -24,7 +24,7 @@ import {LContainerNode, LElementNode, LNode, LNodeFlags, LProjectionNode, LTextN import {assertNodeType} from './node_assert'; import {appendChild, insertChild, insertView, processProjectedNode, removeView} from './node_manipulation'; 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 {QueryList, LQuery_} from './query'; 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. * * @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 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 - * name and elements with an odd index hold an attribute value, ex.: + * Attributes and localRefs are passed as an array of strings where elements with an even index + * hold an attribute name and elements with an odd index hold an attribute value, ex.: * ['id', 'warning5', 'class', 'alert'] */ export function elementStart( - index: number, nameOrComponentDef?: string | ComponentDef, attrs?: string[] | null, - localName?: string): RElement { + index: number, nameOrComponentType?: string | ComponentType, attrs?: string[] | null, + directiveTypes?: DirectiveType[] | null, localRefs?: string[] | null): RElement { let node: LElementNode; let native: RElement; - if (nameOrComponentDef == null) { + if (nameOrComponentType == null) { // native node retrieval - used for exporting elements as tpl local variables (
) const node = data[index] !; native = node && (node as LElementNode).native; } else { ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); - const isHostElement = typeof nameOrComponentDef !== 'string'; - const name = isHostElement ? (nameOrComponentDef as ComponentDef).tag : - nameOrComponentDef as string; + const isHostElement = typeof nameOrComponentType !== 'string'; + // MEGAMORPHIC: `ngComponentDef` 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 `ComponentDef` in `TView.data`. + const hostComponentDef = + isHostElement ? (nameOrComponentType as ComponentType).ngComponentDef : null; + const name = isHostElement ? hostComponentDef !.tag : nameOrComponentType as string; if (name === null) { // TODO: future support for nameless components. throw 'for now name is required'; @@ -442,10 +450,9 @@ export function elementStart( let componentView: LView|null = null; if (isHostElement) { - const ngStaticData = getTemplateStatic((nameOrComponentDef as ComponentDef).template); + const ngStaticData = getTemplateStatic(hostComponentDef !.template); componentView = addToViewTree(createLView( - -1, rendererFactory.createRenderer( - native, (nameOrComponentDef as ComponentDef).rendererType), + -1, rendererFactory.createRenderer(native, hostComponentDef !.rendererType), ngStaticData)); } @@ -453,19 +460,73 @@ export function elementStart( // accessed through their containers because they may be removed / re-added later. 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) { ngDevMode && assertDataInRange(index - 1); node.tNode = ngStaticData[index] = - createTNode(name, attrs || null, null, localName || null); + createTNode(name, attrs || null, null, hostComponentDef ? null : queryName); } if (attrs) setUpAttributes(native, attrs); 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; } +/** + * 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[] | 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| 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 * data array if it doesn't already exist. @@ -836,7 +897,21 @@ export function textBinding(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(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 * be retrieved before they are created in which case the value will be null. @@ -845,56 +920,47 @@ export function textBinding(index: number, value: T | NO_CHANGE): void { * be created or retrieved out of order. * @param directive The directive instance. * @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(index: number): T; -export function directive( - index: number, directive: T, directiveDef: DirectiveDef, localName?: string): T; -export function directive( - index: number, directive?: T, directiveDef?: DirectiveDef, localName?: string): T { +export function directiveCreate( + index: number, directive: T, directiveDef: DirectiveDef, queryName?: string | null): T { let instance; - if (directive == null) { - // return existing - ngDevMode && assertDataInRange(index); - instance = data[index]; + ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); + ngDevMode && assertPreviousIsParent(); + let flags = previousOrParentNode !.flags; + let size = flags & LNodeFlags.SIZE_MASK; + if (size === 0) { + flags = (index << LNodeFlags.INDX_SHIFT) | LNodeFlags.SIZE_SKIP | flags & LNodeFlags.TYPE_MASK; } else { - ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); - ngDevMode && assertPreviousIsParent(); - let flags = previousOrParentNode !.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; + flags += LNodeFlags.SIZE_SKIP; + } + previousOrParentNode !.flags = flags; - ngDevMode && assertDataInRange(index - 1); - Object.defineProperty( - directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode}); + ngDevMode && assertDataInRange(index - 1); + Object.defineProperty( + directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode}); - data[index] = instance = directive; + data[index] = instance = directive; - if (index >= ngStaticData.length) { - ngStaticData[index] = directiveDef !; - if (localName) { - ngDevMode && assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData'); - const tNode = previousOrParentNode !.tNode !; - (tNode.localNames || (tNode.localNames = [])).push(localName, index); - } - } - - const diPublic = directiveDef !.diPublic; - if (diPublic) { - diPublic(directiveDef !); - } - - const tNode: TNode|null = previousOrParentNode.tNode !; - if (tNode && tNode.attrs) { - setInputsFromAttrs(instance, directiveDef !.inputs, tNode); + if (index >= ngStaticData.length) { + ngStaticData[index] = directiveDef !; + if (queryName) { + ngDevMode && + assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData'); + const nodeStaticData = previousOrParentNode !.tNode !; + (nodeStaticData.localNames || (nodeStaticData.localNames = [])).push(queryName, index); } } + const diPublic = directiveDef !.diPublic; + if (diPublic) { + diPublic(directiveDef !); + } + + const staticData: TNode|null = previousOrParentNode.tNode !; + if (staticData && staticData.attrs) { + setInputsFromAttrs(instance, directiveDef !.inputs, staticData); + } return instance; } @@ -1039,10 +1105,11 @@ export function executeViewHooks(): void { * @param template Optional inline template * @param tagName The name of the container element, 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( - index: number, template?: ComponentTemplate, tagName?: string, attrs?: string[], - localName?: string): void { + index: number, directiveTypes?: DirectiveType[], template?: ComponentTemplate, + tagName?: string, attrs?: string[], localRefs?: string[] | null): void { ngDevMode && assertEqual(currentView.bindingStartIndex, null, 'bindingStartIndex'); // 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) { + // TODO(misko): implement queryName caching + const queryName: string|null = hack_findQueryName(null, localRefs, ''); 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 // because views can be removed and re-inserted. addToViewTree(node.data); + hack_declareDirectives(index, directiveTypes, localRefs); } export function containerEnd() { diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts index 296d444a5c..24c2231c09 100644 --- a/packages/core/src/render3/interfaces/definition.ts +++ b/packages/core/src/render3/interfaces/definition.ts @@ -57,6 +57,11 @@ export interface DirectiveDef { */ 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. * @@ -131,6 +136,7 @@ export interface DirectiveDefArgs { outputs?: {[P in keyof T]?: string}; methods?: {[P in keyof T]?: string}; features?: DirectiveDefFeature[]; + exportAs?: string; } export interface ComponentDefArgs extends DirectiveDefArgs { diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts index 07039a2e96..40be32d369 100644 --- a/packages/core/test/render3/component_spec.ts +++ b/packages/core/test/render3/component_spec.ts @@ -68,8 +68,7 @@ describe('encapsulation', () => { tag: 'wrapper', template: function(ctx: WrapperComponent, cm: boolean) { if (cm) { - E(0, EncapsulatedComponent.ngComponentDef); - { D(1, EncapsulatedComponent.ngComponentDef.n(), EncapsulatedComponent.ngComponentDef); } + E(0, EncapsulatedComponent); e(); } EncapsulatedComponent.ngComponentDef.h(1, 0); @@ -86,8 +85,7 @@ describe('encapsulation', () => { template: function(ctx: EncapsulatedComponent, cm: boolean) { if (cm) { T(0, 'foo'); - E(1, LeafComponent.ngComponentDef); - { D(2, LeafComponent.ngComponentDef.n(), LeafComponent.ngComponentDef); } + E(1, LeafComponent); e(); } LeafComponent.ngComponentDef.h(2, 1); @@ -135,8 +133,7 @@ describe('encapsulation', () => { tag: 'wrapper', template: function(ctx: WrapperComponentWith, cm: boolean) { if (cm) { - E(0, LeafComponentwith.ngComponentDef); - { D(1, LeafComponentwith.ngComponentDef.n(), LeafComponentwith.ngComponentDef); } + E(0, LeafComponentwith); e(); } LeafComponentwith.ngComponentDef.h(1, 0); diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts index b7af571faf..8d64914490 100644 --- a/packages/core/test/render3/content_spec.ts +++ b/packages/core/test/render3/content_spec.ts @@ -30,11 +30,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); - { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); - T(2, 'content'); - } + E(0, Child); + { T(2, 'content'); } e(); } Child.ngComponentDef.h(1, 0); @@ -53,11 +50,8 @@ describe('content projection', () => { }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); - { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); - T(2, 'content'); - } + E(0, Child); + { T(2, 'content'); } e(); } Child.ngComponentDef.h(1, 0); @@ -79,11 +73,8 @@ describe('content projection', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { m(0, pD()); - E(1, GrandChild.ngComponentDef); - { - D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); - P(3, 0); - } + E(1, GrandChild); + { P(3, 0); } e(); GrandChild.ngComponentDef.h(2, 1); GrandChild.ngComponentDef.r(2, 1); @@ -91,9 +82,8 @@ describe('content projection', () => { }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'b'); T(3, 'Hello'); e(); @@ -120,9 +110,8 @@ describe('content projection', () => { }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); T(2, '('); C(3); c(); @@ -162,9 +151,8 @@ describe('content projection', () => { }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); C(2); c(); } @@ -206,9 +194,8 @@ describe('content projection', () => { }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); T(2, '('); C(3); c(); @@ -285,9 +272,9 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); + childCmptInstance = D(1); T(2, 'content'); } e(); @@ -341,9 +328,9 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); + childCmptInstance = D(1); T(2, 'content'); } e(); @@ -381,11 +368,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); - { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); - T(2, 'content'); - } + E(0, Child); + { T(2, 'content'); } e(); } Child.ngComponentDef.h(1, 0); @@ -442,9 +426,9 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, childCmptInstance = Child.ngComponentDef.n(), Child.ngComponentDef); + childCmptInstance = D(1); T(2, 'content'); } e(); @@ -488,9 +472,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span', ['title', 'toFirst']); { T(3, '1'); } e(); @@ -536,9 +519,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span', ['class', 'toFirst']); { T(3, '1'); } e(); @@ -584,9 +566,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span', ['class', 'other toFirst']); { T(3, '1'); } e(); @@ -631,9 +612,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span', ['class', 'toFirst']); { T(3, '1'); } e(); @@ -678,9 +658,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span', ['class', 'toFirst']); { T(3, '1'); } e(); @@ -727,9 +706,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span'); { T(3, '1'); } e(); @@ -780,9 +758,8 @@ describe('content projection', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { m(0, pD()); - E(1, GrandChild.ngComponentDef); + E(1, GrandChild); { - D(2, GrandChild.ngComponentDef.n(), GrandChild.ngComponentDef); P(3, 0); E(4, 'span'); { T(5, 'in child template'); } @@ -803,9 +780,8 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); E(2, 'span'); { T(3, 'parent content'); } e(); @@ -845,10 +821,9 @@ describe('content projection', () => { */ const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { - E(0, Child.ngComponentDef); + E(0, Child); { - D(1, Child.ngComponentDef.n(), Child.ngComponentDef); - C(2, undefined, 'div'); + C(2, undefined, undefined, 'div'); c(); } e(); diff --git a/packages/core/test/render3/di_spec.ts b/packages/core/test/render3/di_spec.ts index 22e41bc356..d5889ac096 100644 --- a/packages/core/test/render3/di_spec.ts +++ b/packages/core/test/render3/di_spec.ts @@ -21,16 +21,13 @@ describe('di', () => { it('should create directive with no deps', () => { class Directive { 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) { if (cm) { - E(0, 'div'); - { - D(1, DirectiveDef.n(), DirectiveDef); - T(2); - } + E(0, 'div', null, [Directive]); + { T(2); } e(); } t(2, b(D(1).value)); @@ -44,36 +41,31 @@ describe('di', () => { it('should create directive with inter view dependencies', () => { class DirectiveA { 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 { 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 { value: string; 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) { if (cm) { - E(0, 'div'); + E(0, 'div', null, [DirectiveA]); { - D(1, DirectiveADef.n(), DirectiveADef); - E(2, 'span'); - { - D(3, DirectiveBDef.n(), DirectiveBDef); - D(4, DirectiveCDef.n(), DirectiveCDef); - T(5); - } + E(2, 'span', null, [DirectiveB, DirectiveC]); + { T(5); } e(); } e(); @@ -92,32 +84,28 @@ describe('di', () => { constructor(public elementRef: ElementRef) { 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 { value: boolean; constructor(elementRef: ElementRef, directive: Directive) { 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) { if (cm) { - E(0, 'div'); - { - D(1, DirectiveDef.n(), DirectiveDef); - D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); - T(3); - } + E(0, 'div', null, [Directive, DirectiveSameInstance]); + { T(3); } e(); } t(3, b2('', D(1).value, '-', D(2).value, '')); @@ -134,32 +122,28 @@ describe('di', () => { constructor(public templateRef: TemplateRef) { 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 { value: boolean; constructor(templateRef: TemplateRef, directive: Directive) { 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) { if (cm) { - C(0, function() {}); - { - D(1, DirectiveDef.n(), DirectiveDef); - D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); - } + C(0, [Directive, DirectiveSameInstance], function() {}); c(); T(3); } @@ -177,32 +161,28 @@ describe('di', () => { constructor(public viewContainerRef: ViewContainerRef) { 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 { value: boolean; constructor(viewContainerRef: ViewContainerRef, directive: Directive) { 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) { if (cm) { - E(0, 'div'); - { - D(1, DirectiveDef.n(), DirectiveDef); - D(2, DirectiveSameInstanceDef.n(), DirectiveSameInstanceDef); - T(3); - } + E(0, 'div', null, [Directive, DirectiveSameInstance]); + { T(3); } e(); } t(3, b2('', D(1).value, '-', D(2).value, '')); @@ -255,38 +235,41 @@ describe('di', () => { }); it('should inject from parent view', () => { - class ParentDirective {} - const ParentDirectiveDef = defineDirective( - {type: ParentDirective, factory: () => new ParentDirective(), features: [PublicFeature]}); + class ParentDirective { + static ngDirectiveDef = defineDirective({ + type: ParentDirective, + factory: () => new ParentDirective(), + features: [PublicFeature] + }); + } class ChildDirective { value: string; constructor(public parent: ParentDirective) { 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 { value: boolean; constructor(parent: ParentDirective, child: ChildDirective) { 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) { if (cm) { - E(0, 'div'); + E(0, 'div', null, [ParentDirective]); { - D(1, ParentDirectiveDef.n(), ParentDirectiveDef); C(2); c(); } @@ -295,12 +278,8 @@ describe('di', () => { cR(2); { if (V(0)) { - E(0, 'span'); - { - D(1, ChildDirectiveDef.n(), ChildDirectiveDef); - D(2, Child2DirectiveDef.n(), Child2DirectiveDef); - T(3); - } + E(0, 'span', null, [ChildDirective, Child2Directive]); + { T(3); } e(); } t(3, b2('', D(1).value, '-', D(2).value, '')); diff --git a/packages/core/test/render3/directive_spec.ts b/packages/core/test/render3/directive_spec.ts index 13e298b8b2..0776dea133 100644 --- a/packages/core/test/render3/directive_spec.ts +++ b/packages/core/test/render3/directive_spec.ts @@ -19,22 +19,21 @@ describe('directive', () => { class Directive { klass = 'foo'; + static ngDirectiveDef = defineDirective({ + type: Directive, + factory: () => directiveInstance = new Directive, + refresh: (directiveIndex: number, elementIndex: number) => { + p(elementIndex, 'className', b(D(directiveIndex).klass)); + } + }); } - const DirectiveDef = defineDirective({ - type: Directive, - factory: () => directiveInstance = new Directive, - refresh: (directiveIndex: number, elementIndex: number) => { - p(elementIndex, 'className', b(D(directiveIndex).klass)); - } - }); function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'span'); - { D(1, DirectiveDef.n(), DirectiveDef); } + E(0, 'span', null, [Directive]); e(); } - DirectiveDef.r(1, 0); + Directive.ngDirectiveDef.r(1, 0); } expect(renderToHtml(Template, {})).toEqual(''); diff --git a/packages/core/test/render3/exports_spec.ts b/packages/core/test/render3/exports_spec.ts index 6f474a6918..383a6e9f59 100644 --- a/packages/core/test/render3/exports_spec.ts +++ b/packages/core/test/render3/exports_spec.ts @@ -32,8 +32,7 @@ describe('exports', () => { /** {{ myComp.name }} */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComponent.ngComponentDef); - { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + E(0, MyComponent); e(); T(2); } @@ -78,11 +77,9 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComponent.ngComponentDef); - { D(1, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + E(0, MyComponent); e(); - E(2, 'div'); - { D(3, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(2, 'div', null, [MyDir]); e(); } p(2, 'myDir', b(D(1))); @@ -97,8 +94,7 @@ describe('exports', () => { /**
{{ myDir.name }} */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - D(1, SomeDirDef.n(), SomeDirDef); + E(0, 'div', null, [SomeDir]); e(); T(2); } @@ -107,8 +103,8 @@ describe('exports', () => { class SomeDir { name = 'Drew'; + static ngDirectiveDef = defineDirective({type: SomeDir, factory: () => new SomeDir}); } - const SomeDirDef = defineDirective({type: SomeDir, factory: () => new SomeDir}); expect(renderToHtml(Template, {})).toEqual('
Drew'); }); @@ -207,11 +203,9 @@ describe('exports', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div'); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', null, [MyDir]); e(); - E(2, MyComponent.ngComponentDef); - { D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + E(2, MyComponent); e(); } p(0, 'myDir', b(D(3))); @@ -228,8 +222,7 @@ describe('exports', () => { if (cm) { T(0); T(1); - E(2, 'comp'); - { D(3, MyComponent.ngComponentDef.n(), MyComponent.ngComponentDef); } + E(2, MyComponent); e(); E(4, 'input', ['value', 'one']); e(); diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 3a50e0b939..200c713625 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -230,8 +230,7 @@ describe('render3 integration test', () => { it('should support a basic component template', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponent.ngComponentDef); - { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + E(0, TodoComponent); e(); } TodoComponent.ngComponentDef.h(1, 0); @@ -244,8 +243,7 @@ describe('render3 integration test', () => { it('should support a component template with sibling', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponent.ngComponentDef); - { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + E(0, TodoComponent); e(); T(2, 'two'); } @@ -262,11 +260,9 @@ describe('render3 integration test', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponent.ngComponentDef); - { D(1, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + E(0, TodoComponent); e(); - E(2, TodoComponent.ngComponentDef); - { D(3, TodoComponent.ngComponentDef.n(), TodoComponent.ngComponentDef); } + E(2, TodoComponent); e(); } TodoComponent.ngComponentDef.h(1, 0); @@ -303,11 +299,7 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, TodoComponentHostBinding.ngComponentDef); - { - D(1, TodoComponentHostBinding.ngComponentDef.n(), - TodoComponentHostBinding.ngComponentDef); - } + E(0, TodoComponentHostBinding); e(); } TodoComponentHostBinding.ngComponentDef.h(1, 0); @@ -340,8 +332,7 @@ describe('render3 integration test', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComp.ngComponentDef); - { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + E(0, MyComp); e(); } MyComp.ngComponentDef.h(1, 0); @@ -388,8 +379,7 @@ describe('render3 integration test', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, MyComp.ngComponentDef); - { D(1, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + E(0, MyComp); e(); } p(0, 'condition', b(ctx.condition)); diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts index 820d44753a..9cdd66ac47 100644 --- a/packages/core/test/render3/lifecycle_spec.ts +++ b/packages/core/test/render3/lifecycle_spec.ts @@ -15,8 +15,7 @@ describe('lifecycles', () => { function getParentTemplate(type: any) { return (ctx: any, cm: boolean) => { if (cm) { - E(0, type.ngComponentDef); - { D(1, type.ngComponentDef.n(), type.ngComponentDef); } + E(0, type); e(); } p(0, 'val', b(ctx.val)); @@ -54,8 +53,7 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'val', b(ctx.val)); @@ -78,8 +76,7 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } Parent.ngComponentDef.h(1, 0); @@ -100,11 +97,9 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); - E(2, Parent.ngComponentDef); - { D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(2, Parent); e(); } p(0, 'val', 1); @@ -136,8 +131,7 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -169,13 +163,11 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); C(2); c(); - E(3, Comp.ngComponentDef); - { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(3, Comp); e(); } p(0, 'val', 1); @@ -186,8 +178,7 @@ describe('lifecycles', () => { { for (let j = 2; j < 5; j++) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'val', j); @@ -219,13 +210,11 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); C(2); c(); - E(3, Parent.ngComponentDef); - { D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(3, Parent); e(); } p(0, 'val', 1); @@ -236,8 +225,7 @@ describe('lifecycles', () => { { for (let j = 2; j < 5; j++) { if (V(0)) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } p(0, 'val', j); @@ -303,8 +291,7 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -326,8 +313,7 @@ describe('lifecycles', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } Parent.ngComponentDef.h(1, 0); @@ -342,8 +328,7 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -400,8 +385,7 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -430,8 +414,7 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -461,8 +444,7 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } Parent.ngComponentDef.h(1, 0); @@ -483,11 +465,9 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); - E(2, Parent.ngComponentDef); - { D(3, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(2, Parent); e(); } p(0, 'val', 1); @@ -512,13 +492,11 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); C(2); c(); - E(3, Comp.ngComponentDef); - { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(3, Comp); e(); } p(0, 'val', 1); @@ -529,8 +507,7 @@ describe('lifecycles', () => { { for (let i = 2; i < 4; i++) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'val', i); @@ -559,13 +536,11 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); C(2); c(); - E(3, Parent.ngComponentDef); - { D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(3, Parent); e(); } p(0, 'val', 1); @@ -576,8 +551,7 @@ describe('lifecycles', () => { { for (let i = 2; i < 4; i++) { if (V(0)) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } p(0, 'val', i); @@ -604,8 +578,7 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -623,8 +596,7 @@ describe('lifecycles', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'val', b(ctx.myVal)); @@ -649,13 +621,11 @@ describe('lifecycles', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); C(2); c(); - E(3, Parent.ngComponentDef); - { D(4, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(3, Parent); e(); } p(0, 'val', 1); @@ -666,8 +636,7 @@ describe('lifecycles', () => { { for (let i = 2; i < 4; i++) { if (V(0)) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } p(0, 'val', i); @@ -737,8 +706,7 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); @@ -771,11 +739,9 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); - E(2, Comp.ngComponentDef); - { D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(2, Comp); e(); } p(0, 'val', b('1')); @@ -813,8 +779,7 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } Parent.ngComponentDef.h(1, 0); @@ -842,8 +807,7 @@ describe('lifecycles', () => { let Grandparent = createOnDestroyComponent('grandparent', function(ctx: any, cm: boolean) { if (cm) { - E(0, Parent.ngComponentDef); - { D(1, Parent.ngComponentDef.n(), Parent.ngComponentDef); } + E(0, Parent); e(); } Parent.ngComponentDef.h(1, 0); @@ -859,8 +823,7 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Grandparent.ngComponentDef); - { D(1, Grandparent.ngComponentDef.n(), Grandparent.ngComponentDef); } + E(0, Grandparent); e(); } Grandparent.ngComponentDef.h(1, 0); @@ -897,13 +860,11 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); C(2); c(); - E(3, Comp.ngComponentDef); - { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(3, Comp); e(); } p(0, 'val', b('1')); @@ -914,8 +875,7 @@ describe('lifecycles', () => { { if (ctx.condition2) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'val', b('2')); @@ -978,13 +938,11 @@ describe('lifecycles', () => { { if (ctx.condition) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); C(2); c(); - E(3, Comp.ngComponentDef); - { D(4, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(3, Comp); e(); } p(0, 'val', b('1')); @@ -995,8 +953,7 @@ describe('lifecycles', () => { { for (let j = 2; j < ctx.len; j++) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'val', b(j)); @@ -1067,8 +1024,7 @@ describe('lifecycles', () => { T(1, 'Click me'); } e(); - E(2, Comp.ngComponentDef); - { D(3, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(2, Comp); e(); E(4, 'button'); { diff --git a/packages/core/test/render3/listeners_spec.ts b/packages/core/test/render3/listeners_spec.ts index 6b3d2bef38..c1e0969deb 100644 --- a/packages/core/test/render3/listeners_spec.ts +++ b/packages/core/test/render3/listeners_spec.ts @@ -204,11 +204,9 @@ describe('event listeners', () => { if (ctx.showing) { if (V(0)) { T(0, 'Hello'); - E(1, MyComp.ngComponentDef); - { D(2, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + E(1, MyComp); e(); - E(3, MyComp.ngComponentDef); - { D(4, MyComp.ngComponentDef.n(), MyComp.ngComponentDef); } + E(3, MyComp); e(); } MyComp.ngComponentDef.h(2, 1); diff --git a/packages/core/test/render3/outputs_spec.ts b/packages/core/test/render3/outputs_spec.ts index f478008690..00212a0553 100644 --- a/packages/core/test/render3/outputs_spec.ts +++ b/packages/core/test/render3/outputs_spec.ts @@ -44,11 +44,8 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, ButtonToggle); + { L('change', ctx.onChange.bind(ctx)); } e(); } ButtonToggle.ngComponentDef.h(1, 0); @@ -70,9 +67,8 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle.ngComponentDef); + E(0, ButtonToggle); { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); L('change', ctx.onChange.bind(ctx)); L('reset', ctx.onReset.bind(ctx)); } @@ -98,11 +94,8 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - L('change', () => ctx.counter++); - } + E(0, ButtonToggle); + { L('change', () => ctx.counter++); } e(); } ButtonToggle.ngComponentDef.h(1, 0); @@ -136,11 +129,8 @@ describe('outputs', () => { { if (ctx.condition) { if (V(0)) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, ButtonToggle); + { L('change', ctx.onChange.bind(ctx)); } e(); } ButtonToggle.ngComponentDef.h(1, 0); @@ -191,11 +181,8 @@ describe('outputs', () => { { if (ctx.condition2) { if (V(0)) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, ButtonToggle); + { L('change', ctx.onChange.bind(ctx)); } e(); } ButtonToggle.ngComponentDef.h(1, 0); @@ -265,14 +252,10 @@ describe('outputs', () => { T(1, 'Click me'); } e(); - E(2, ButtonToggle.ngComponentDef); - { - D(3, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - L('change', ctx.onChange.bind(ctx)); - } + E(2, ButtonToggle); + { L('change', ctx.onChange.bind(ctx)); } e(); - E(4, DestroyComp.ngComponentDef); - { D(5, DestroyComp.ngComponentDef.n(), DestroyComp.ngComponentDef); } + E(4, DestroyComp); e(); } ButtonToggle.ngComponentDef.h(3, 2); @@ -323,11 +306,8 @@ describe('outputs', () => { function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); - { - D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - L('click', ctx.onClick.bind(ctx)); - } + E(0, 'button', null, [MyButton]); + { L('click', ctx.onClick.bind(ctx)); } e(); } } @@ -349,12 +329,8 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, ButtonToggle, null, [OtherDir]); + { L('change', ctx.onChange.bind(ctx)); } e(); } ButtonToggle.ngComponentDef.h(1, 0); @@ -384,12 +360,8 @@ describe('outputs', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, ButtonToggle, null, [OtherDir]); + { L('change', ctx.onChange.bind(ctx)); } e(); } p(0, 'change', b(ctx.change)); @@ -433,11 +405,8 @@ describe('outputs', () => { { if (ctx.condition) { if (V(0)) { - E(0, ButtonToggle.ngComponentDef); - { - D(1, ButtonToggle.ngComponentDef.n(), ButtonToggle.ngComponentDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, ButtonToggle); + { L('change', ctx.onChange.bind(ctx)); } e(); } ButtonToggle.ngComponentDef.h(1, 0); @@ -445,11 +414,8 @@ describe('outputs', () => { v(); } else { if (V(1)) { - E(0, 'div'); - { - D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, 'div', null, [OtherDir]); + { L('change', ctx.onChange.bind(ctx)); } e(); } v(); diff --git a/packages/core/test/render3/properties_spec.ts b/packages/core/test/render3/properties_spec.ts index d5be8b17eb..65632674e9 100644 --- a/packages/core/test/render3/properties_spec.ts +++ b/packages/core/test/render3/properties_spec.ts @@ -90,12 +90,8 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); - { - D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - D(2, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - T(3, 'Click me'); - } + E(0, 'button', null, [MyButton, OtherDir]); + { T(3, 'Click me'); } e(); } @@ -120,11 +116,8 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); - { - D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - T(2, 'Click me'); - } + E(0, 'button', null, [MyButton]); + { T(2, 'Click me'); } e(); } @@ -159,8 +152,7 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } p(0, 'id', b(ctx.id)); @@ -191,12 +183,8 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); - { - D(1, MyButton.ngDirectiveDef.n(), MyButton.ngDirectiveDef); - D(2, OtherDisabledDir.ngDirectiveDef.n(), OtherDisabledDir.ngDirectiveDef); - T(3, 'Click me'); - } + E(0, 'button', null, [MyButton, OtherDisabledDir]); + { T(3, 'Click me'); } e(); } p(0, 'disabled', b(ctx.isDisabled)); @@ -217,9 +205,8 @@ describe('elementProperty', () => { /** */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); + E(0, 'button', null, [OtherDir]); { - D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); L('click', ctx.onClick.bind(ctx)); T(2, 'Click me'); } @@ -261,11 +248,8 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'button'); - { - D(1, IdDir.ngDirectiveDef.n(), IdDir.ngDirectiveDef); - T(2, 'Click me'); - } + E(0, 'button', null, [IdDir]); + { T(2, 'Click me'); } e(); C(3); c(); @@ -283,11 +267,8 @@ describe('elementProperty', () => { v(); } else { if (V(1)) { - E(0, 'button'); - { - D(1, OtherDir.ngDirectiveDef.n(), OtherDir.ngDirectiveDef); - T(2, 'Click me too'); - } + E(0, 'button', null, [OtherDir]); + { T(2, 'Click me too'); } e(); } p(0, 'id', b(ctx.id3)); @@ -337,8 +318,7 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button']); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', ['role', 'button'], [MyDir]); e(); } } @@ -352,8 +332,7 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button']); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', ['role', 'button'], [MyDir]); e(); } p(0, 'role', b(ctx.role)); @@ -371,11 +350,7 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button']); - { - D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); - D(2, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); - } + E(0, 'div', ['role', 'button'], [MyDir, MyDirB]); e(); } } @@ -390,8 +365,7 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button', 'dir', 'rtl']); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); e(); } } @@ -406,11 +380,8 @@ describe('elementProperty', () => { /**
*/ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button']); - { - D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); - L('change', ctx.onChange.bind(ctx)); - } + E(0, 'div', ['role', 'button'], [MyDir]); + { L('change', ctx.onChange.bind(ctx)); } e(); } } @@ -434,11 +405,9 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button', 'dir', 'rtl']); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', ['role', 'button', 'dir', 'rtl'], [MyDir]); e(); - E(2, 'div', ['role', 'listbox']); - { D(3, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } + E(2, 'div', ['role', 'listbox'], [MyDirB]); e(); } } @@ -462,8 +431,7 @@ describe('elementProperty', () => { */ function Template(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'listbox']); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', ['role', 'listbox'], [MyDir]); e(); C(2); c(); @@ -472,8 +440,7 @@ describe('elementProperty', () => { { if (ctx.condition) { if (V(0)) { - E(0, 'div', ['role', 'button']); - { D(1, MyDirB.ngDirectiveDef.n(), MyDirB.ngDirectiveDef); } + E(0, 'div', ['role', 'button'], [MyDirB]); e(); } v(); @@ -510,8 +477,7 @@ describe('elementProperty', () => { type: Comp, template: function(ctx: any, cm: boolean) { if (cm) { - E(0, 'div', ['role', 'button']); - { D(1, MyDir.ngDirectiveDef.n(), MyDir.ngDirectiveDef); } + E(0, 'div', ['role', 'button'], [MyDir]); e(); T(2); } @@ -535,8 +501,7 @@ describe('elementProperty', () => { { for (let i = 0; i < 2; i++) { if (V(0)) { - E(0, Comp.ngComponentDef); - { D(1, Comp.ngComponentDef.n(), Comp.ngComponentDef); } + E(0, Comp); e(); } Comp.ngComponentDef.h(1, 0); diff --git a/packages/core/test/render3/query_spec.ts b/packages/core/test/render3/query_spec.ts index 8f3f601133..2b8db835c1 100644 --- a/packages/core/test/render3/query_spec.ts +++ b/packages/core/test/render3/query_spec.ts @@ -59,11 +59,11 @@ describe('query', () => { if (cm) { m(0, Q(Child, false)); m(1, Q(Child, true)); - E(2, Child.ngComponentDef); + E(2, Child); { - child1 = D(3, Child.ngComponentDef.n(), Child.ngComponentDef); - E(4, Child.ngComponentDef); - { child2 = D(5, Child.ngComponentDef.n(), Child.ngComponentDef); } + child1 = D(3); + E(4, Child); + { child2 = D(5); } e(); } e(); @@ -92,8 +92,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(Child, false, QueryReadType.ElementRef)); - elToQuery = E(1, 'div'); - { D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); } + elToQuery = E(1, 'div', null, [Child]); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -121,11 +120,8 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(Child, false, OtherChild)); - E(1, 'div'); - { - D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); - D(3, otherChildInstance = OtherChild.ngDirectiveDef.n(), OtherChild.ngDirectiveDef); - } + E(1, 'div', null, [Child, OtherChild]); + { otherChildInstance = D(3); } e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -150,8 +146,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(Child, false, OtherChild)); - E(1, 'div'); - { D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef); } + E(1, 'div', null, [Child]); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -179,7 +174,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'])); - elToQuery = E(1, 'div', [], 'foo'); + elToQuery = E(1, 'div', null, null, ['foo', '']); e(); E(2, 'div'); e(); @@ -209,11 +204,11 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo', 'bar'])); - el1ToQuery = E(1, 'div', null, 'foo'); + el1ToQuery = E(1, 'div', null, null, ['foo', '']); e(); E(2, 'div'); e(); - el2ToQuery = E(3, 'div', null, 'bar'); + el2ToQuery = E(3, 'div', null, null, ['bar', '']); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -240,7 +235,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], false, QueryReadType.ElementRef)); - elToQuery = E(1, 'div', [], 'foo'); + elToQuery = E(1, 'div', null, null, ['foo', '']); e(); E(2, 'div'); e(); @@ -266,7 +261,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], false, QueryReadType.ViewContainerRef)); - E(1, 'div', [], 'foo'); + E(1, 'div', null, null, ['foo', '']); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -289,7 +284,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], false, QueryReadType.ViewContainerRef)); - C(1, undefined, undefined, undefined, 'foo'); + C(1, undefined, undefined, undefined, undefined, ['foo', '']); c(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -313,7 +308,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], false, QueryReadType.ElementRef)); - C(1, undefined, undefined, undefined, 'foo'); + C(1, undefined, undefined, undefined, undefined, ['foo', '']); c(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -338,7 +333,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'])); - C(1, undefined, undefined, undefined, 'foo'); + C(1, undefined, undefined, undefined, undefined, ['foo', '']); c(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -362,7 +357,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], false, QueryReadType.TemplateRef)); - C(1, undefined, undefined, undefined, 'foo'); + C(1, undefined, undefined, undefined, undefined, ['foo', '']); c(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -388,8 +383,8 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'])); - E(1, Child.ngComponentDef, []); - { childInstance = D(2, Child.ngComponentDef.n(), Child.ngComponentDef, 'foo'); } + E(1, Child, null, null, ['foo', '']); + { childInstance = D(2); } e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -403,7 +398,7 @@ describe('query', () => { 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; /** @@ -416,8 +411,8 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'])); - E(1, 'div'); - { childInstance = D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'foo'); } + E(1, 'div', null, [Child], ['foo', 'child']); + childInstance = D(2); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -430,8 +425,8 @@ describe('query', () => { }); it('should read all matching directive instances from a given element', () => { - const Child1 = createDirective(); - const Child2 = createDirective(); + const Child1 = createDirective({exportAs: 'child1'}); + const Child2 = createDirective({exportAs: 'child2'}); let child1Instance, child2Instance; /** @@ -444,10 +439,10 @@ describe('query', () => { let tmp: any; if (cm) { 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'); - child2Instance = D(3, Child2.ngDirectiveDef.n(), Child2.ngDirectiveDef, 'bar'); + child1Instance = D(2); + child2Instance = D(3); } e(); } @@ -462,7 +457,7 @@ describe('query', () => { }); it('should match match on exported directive name and read a requested token', () => { - const Child = createDirective(); + const Child = createDirective({exportAs: 'child'}); let div; /** @@ -475,8 +470,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], undefined, QueryReadType.ElementRef)); - div = E(1, 'div'); - { D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'foo'); } + div = E(1, 'div', null, [Child], ['foo', 'child']); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -489,7 +483,7 @@ describe('query', () => { }); it('should support reading a mix of ElementRef and directive instances', () => { - const Child = createDirective(); + const Child = createDirective({exportAs: 'child'}); let childInstance, div; /** @@ -502,8 +496,8 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo', 'bar'])); - div = E(1, 'div', [], 'foo'); - { childInstance = D(2, Child.ngDirectiveDef.n(), Child.ngDirectiveDef, 'bar'); } + div = E(1, 'div', null, [Child], ['foo', '', 'bar', 'child']); + { childInstance = D(2); } e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); @@ -530,7 +524,7 @@ describe('query', () => { let tmp: any; if (cm) { m(0, Q(['foo'], false, Child)); - div = E(1, 'div', [], 'foo'); + div = E(1, 'div', null, null, ['foo', '']); e(); } qR(tmp = m>(0)) && (ctx.query = tmp as QueryList); diff --git a/packages/core/test/render3/render_util.ts b/packages/core/test/render3/render_util.ts index 9e93cbc02d..fe1bb2f917 100644 --- a/packages/core/test/render3/render_util.ts +++ b/packages/core/test/render3/render_util.ts @@ -7,6 +7,7 @@ */ 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 {NG_HOST_SYMBOL, createLNode, createLView, renderTemplate} from '../../src/render3/instructions'; import {LElementNode, LNodeFlags} from '../../src/render3/interfaces/node'; @@ -89,12 +90,13 @@ export function createComponent( }; } -export function createDirective(): DirectiveType { +export function createDirective({exportAs}: {exportAs?: string} = {}): DirectiveType { return class Directive { static ngDirectiveDef = defineDirective({ type: Directive, factory: () => new Directive(), features: [PublicFeature], + exportAs: exportAs, }); }; } diff --git a/packages/core/test/render3/renderer_factory_spec.ts b/packages/core/test/render3/renderer_factory_spec.ts index 3f885f42b5..f1755d6b7f 100644 --- a/packages/core/test/render3/renderer_factory_spec.ts +++ b/packages/core/test/render3/renderer_factory_spec.ts @@ -63,8 +63,7 @@ describe('renderer factory lifecycle', () => { logs.push('function_with_component'); if (cm) { T(0, 'bar'); - E(1, SomeComponent.ngComponentDef); - { D(2, SomeComponent.ngComponentDef.n(), SomeComponent.ngComponentDef); } + E(1, SomeComponent); e(); } SomeComponent.ngComponentDef.h(2, 1);