From a6d41c47a9b69a8ebbd1e5c36d68fd3f9d275b95 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Mon, 8 Jan 2018 21:57:50 -0800 Subject: [PATCH] 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 --- modules/benchmarks/src/tree/render3/tree.ts | 6 +- packages/core/src/render3/assert.ts | 11 +- packages/core/src/render3/component.ts | 5 +- packages/core/src/render3/definition.ts | 1 + packages/core/src/render3/instructions.ts | 190 ++++++++++++------ .../core/src/render3/interfaces/definition.ts | 6 + packages/core/test/render3/component_spec.ts | 9 +- packages/core/test/render3/content_spec.ts | 81 +++----- packages/core/test/render3/di_spec.ts | 151 ++++++-------- packages/core/test/render3/directive_spec.ts | 19 +- packages/core/test/render3/exports_spec.ts | 23 +-- .../core/test/render3/integration_spec.ts | 24 +-- packages/core/test/render3/lifecycle_spec.ts | 132 ++++-------- packages/core/test/render3/listeners_spec.ts | 6 +- packages/core/test/render3/outputs_spec.ts | 78 ++----- packages/core/test/render3/properties_spec.ts | 83 +++----- packages/core/test/render3/query_spec.ts | 72 +++---- packages/core/test/render3/render_util.ts | 4 +- .../test/render3/renderer_factory_spec.ts | 3 +- 19 files changed, 398 insertions(+), 506 deletions(-) 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);