refactor(ivy): remove `type` from `DirectiveDef` (#21374)

This change makes the code cleaner for the user. It does mean
a little bit more work for us since we have to patch the `type` back
into the `DirectiveDef`. However since the patching happens only once
on startup it should not be significant.

PR Close #21374
This commit is contained in:
Miško Hevery 2018-01-09 16:43:12 -08:00 committed by Alex Eagle
parent 16232f000f
commit 5eaaac35a8
23 changed files with 108 additions and 212 deletions

View File

@ -16,16 +16,13 @@ export class LargeTableComponent {
/** @nocollapse */
static ngComponentDef: ComponentDef<LargeTableComponent> = defineComponent({
type: LargeTableComponent,
tag: 'largetable',
template: function(ctx: LargeTableComponent, cm: boolean) {
if (cm) {
E(0, 'table');
{
E(1, 'tbody');
{
C(2);
}
{ C(2); }
e();
}
e();

View File

@ -36,7 +36,6 @@ export class TreeComponent {
/** @nocollapse */
static ngComponentDef: ComponentDef<TreeComponent> = defineComponent({
type: TreeComponent,
tag: 'tree',
template: function(ctx: TreeComponent, cm: boolean) {
if (cm) {
@ -93,7 +92,6 @@ export class TreeFunction extends TreeComponent {
/** @nocollapse */
static ngComponentDef: ComponentDef<TreeFunction> = defineComponent({
type: TreeFunction,
tag: 'tree',
template: function(ctx: TreeFunction, cm: boolean) {
// bit of a hack

View File

@ -13,13 +13,14 @@ 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, directiveCreate} from './instructions';
import {ComponentDef, ComponentType} from './interfaces/definition';
import {NG_HOST_SYMBOL, createError, createLView, directive, directiveCreate, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions';
import {ComponentDef, ComponentType, TypedComponentDef} from './interfaces/definition';
import {LElementNode} from './interfaces/node';
import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
import {RElement, Renderer3, 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. */
@ -165,7 +166,8 @@ export const NULL_INJECTOR: Injector = {
export function renderComponent<T>(
componentType: ComponentType<T>, opts: CreateComponentOptions = {}): T {
const rendererFactory = opts.rendererFactory || domRendererFactory3;
const componentDef = componentType.ngComponentDef;
const componentDef = componentType.ngComponentDef as TypedComponentDef<T>;
if (componentDef.type != componentType) componentDef.type = componentType;
let component: T;
const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag);
const oldView = enterView(

View File

@ -32,7 +32,6 @@ import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs} from './
*/
export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): ComponentDef<T> {
const def = <ComponentDef<any>>{
type: componentDefinition.type,
diPublic: null,
n: componentDefinition.factory,
tag: (componentDefinition as ComponentDefArgs<T>).tag || null !,

View File

@ -17,7 +17,7 @@ import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_co
import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, ViewRef as viewEngine_ViewRef} from '../linker/view_ref';
import {Type} from '../type';
import {ComponentTemplate, DirectiveDef} from './interfaces/definition';
import {ComponentTemplate, DirectiveDef, TypedDirectiveDef} from './interfaces/definition';
import {LInjector} from './interfaces/injector';
import {LContainerNode, LElementNode, LNodeFlags} from './interfaces/node';
import {assertNodeType} from './node_assert';
@ -147,7 +147,7 @@ function createInjectionError(text: string, token: any) {
* @param di The node injector in which a directive will be added
* @param def The definition of the directive to be made public
*/
export function diPublicInInjector(di: LInjector, def: DirectiveDef<any>): void {
export function diPublicInInjector(di: LInjector, def: TypedDirectiveDef<any>): void {
bloomAdd(di, def.type);
}
@ -211,7 +211,7 @@ export function getOrCreateInjectable<T>(di: LInjector, token: Type<T>, flags?:
for (let i = start, ii = start + size; i < ii; i++) {
// Get the definition for the directive at this index and, if it is injectable (diPublic),
// and matches the given token, return the directive instance.
const directiveDef = ngStaticData[i] as DirectiveDef<any>;
const directiveDef = ngStaticData[i] as TypedDirectiveDef<any>;
if (directiveDef.diPublic && directiveDef.type == token) {
return node.view.data[i];
}

View File

@ -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, DirectiveType} from './interfaces/definition';
import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType, TypedDirectiveDef, TypedComponentDef} 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';
@ -343,7 +343,7 @@ export function getOrCreateNodeInjector(): LInjector {
*
* @param def The definition of the directive to be made public
*/
export function diPublic(def: DirectiveDef<any>): void {
export function diPublic(def: TypedDirectiveDef<any>): void {
diPublicInInjector(getOrCreateNodeInjector(), def);
}
@ -475,6 +475,8 @@ export function elementStart(
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.
(hostComponentDef as TypedComponentDef<any>).type =
nameOrComponentType as ComponentType<any>;
directiveCreate(++index, hostComponentDef.n(), hostComponentDef, queryName);
}
hack_declareDirectives(index, directiveTypes, localRefs);
@ -500,7 +502,9 @@ function hack_declareDirectives(
// 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;
const directiveType = directiveTypes[i];
const directiveDef = directiveType.ngDirectiveDef;
(directiveDef as TypedDirectiveDef<any>).type = directiveType;
directiveCreate(
++index, directiveDef.n(), directiveDef, hack_findQueryName(directiveDef, localRefs));
}
@ -945,8 +949,7 @@ export function directiveCreate<T>(
if (index >= ngStaticData.length) {
ngStaticData[index] = directiveDef !;
if (queryName) {
ngDevMode &&
assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData');
ngDevMode && assertNotNull(previousOrParentNode.tNode, 'previousOrParentNode.staticData');
const nodeStaticData = previousOrParentNode !.tNode !;
(nodeStaticData.localNames || (nodeStaticData.localNames = [])).push(queryName, index);
}

View File

@ -28,11 +28,6 @@ export const enum DirectiveDefFlags {ContentQuery = 0b10}
* `DirectiveDef` is a compiled version of the Directive used by the renderer instructions.
*/
export interface DirectiveDef<T> {
/**
* Token representing the directive. Used by DI.
*/
type: Type<T>;
/** Function that makes a directive public to the DI system. */
diPublic: ((def: DirectiveDef<any>) => void)|null;
@ -41,26 +36,26 @@ export interface DirectiveDef<T> {
*
* The key is minified property name whereas the value is the original unminified name.
*/
inputs: {[P in keyof T]: P};
readonly inputs: {[P in keyof T]: P};
/**
* List of outputs which are part of the components public API.
*
* The key is minified property name whereas the value is the original unminified name.=
*/
outputs: {[P in keyof T]: P};
readonly outputs: {[P in keyof T]: P};
/**
* List of methods which are part of the components public API.
*
* The key is minified property name whereas the value is the original unminified name.
*/
methods: {[P in keyof T]: P};
readonly methods: {[P in keyof T]: P};
/**
* Name under which the directive is exported (for use with local references in template)
*/
exportAs: string|null;
readonly exportAs: string|null;
/**
* factory function used to create a new directive instance.
@ -111,25 +106,34 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
*
* NOTE: only used with component directives.
*/
tag: string;
readonly tag: string;
/**
* The View template of the component.
*
* NOTE: only used with component directives.
*/
template: ComponentTemplate<T>;
readonly template: ComponentTemplate<T>;
/**
* Renderer type data of the component.
*
* NOTE: only used with component directives.
*/
rendererType: RendererType2|null;
readonly rendererType: RendererType2|null;
}
/**
* Private: do not export
*/
export interface TypedDirectiveDef<T> extends DirectiveDef<T> { type: DirectiveType<T>; }
/**
* Private: do not export
*/
export interface TypedComponentDef<T> extends ComponentDef<T> { type: ComponentType<T>; }
export interface DirectiveDefArgs<T> {
type: Type<T>;
factory: () => T;
refresh?: (directiveIndex: number, elementIndex: number) => void;
inputs?: {[P in keyof T]?: string};

View File

@ -17,13 +17,14 @@ import {Type} from '../type';
import {assertNotNull} from './assert';
import {getOrCreateContainerRef, getOrCreateElementRef, getOrCreateNodeInjectorForNode, getOrCreateTemplateRef} from './di';
import {DirectiveDef} from './interfaces/definition';
import {DirectiveDef, TypedDirectiveDef} from './interfaces/definition';
import {LInjector} from './interfaces/injector';
import {LContainerNode, LElementNode, LNode, LNodeFlags, LViewNode, TNode} from './interfaces/node';
import {LQuery, QueryReadType} from './interfaces/query';
import {assertNodeOfPossibleTypes} from './node_assert';
/**
* A predicate which determines if a given element/directive should be included in the query
*/
@ -142,7 +143,7 @@ function geIdxOfMatchingDirective(node: LNode, type: Type<any>): number|null {
for (let i = flags >> LNodeFlags.INDX_SHIFT,
ii = i + ((flags & LNodeFlags.SIZE_MASK) >> LNodeFlags.SIZE_SHIFT);
i < ii; i++) {
const def = ngStaticData[i] as DirectiveDef<any>;
const def = ngStaticData[i] as TypedDirectiveDef<any>;
if (def.diPublic && def.type === type) {
return i;
}

View File

@ -32,7 +32,6 @@ describe('iv perf test', () => {
it(`${iteration}. create ${count} divs in Render3`, () => {
class Component {
static ngComponentDef = defineComponent({
type: Component,
tag: 'div',
template: function Template(ctx: any, cm: any) {
if (cm) {

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Component, Directive, Type, NgModule, Injectable, Optional, TemplateRef} from '../../src/core';
import {Component, Directive, Injectable, NgModule, Optional, TemplateRef, Type} from '../../src/core';
import * as r3 from '../../src/render3/index';
import {containerEl, renderComponent, requestAnimationFrame, toHtml} from './render_util';
@ -27,7 +27,6 @@ describe('compiler specification', () => {
class MyComponent {
// NORMATIVE
static ngComponentDef = r3.defineComponent({
type: MyComponent,
tag: 'my-component',
factory: () => new MyComponent(),
template: function(ctx: MyComponent, cm: boolean) {
@ -60,7 +59,6 @@ describe('compiler specification', () => {
constructor() { log.push('ChildComponent'); }
// NORMATIVE
static ngComponentDef = r3.defineComponent({
type: ChildComponent,
tag: `child`,
factory: () => new ChildComponent(),
template: function(ctx: ChildComponent, cm: boolean) {
@ -79,7 +77,6 @@ describe('compiler specification', () => {
constructor() { log.push('SomeDirective'); }
// NORMATIVE
static ngDirectiveDef = r3.defineDirective({
type: ChildComponent,
factory: () => new SomeDirective(),
});
// /NORMATIVE
@ -121,13 +118,13 @@ describe('compiler specification', () => {
constructor(template: TemplateRef<any>) { log.push('ifDirective'); }
// NORMATIVE
static ngDirectiveDef = r3.defineDirective({
type: IfDirective,
factory: () => new IfDirective(r3.injectTemplateRef()),
});
// /NORMATIVE
}
@Component({selector: 'my-component', template: `<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>`})
@Component(
{selector: 'my-component', template: `<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>`})
class MyComponent {
salutation = 'Hello';
// NORMATIVE

View File

@ -20,7 +20,6 @@ describe('component', () => {
increment() { this.count++; }
static ngComponentDef = defineComponent({
type: CounterComponent,
tag: 'counter',
template: function(ctx: CounterComponent, cm: boolean) {
if (cm) {
@ -64,7 +63,6 @@ describe('component', () => {
describe('encapsulation', () => {
class WrapperComponent {
static ngComponentDef = defineComponent({
type: WrapperComponent,
tag: 'wrapper',
template: function(ctx: WrapperComponent, cm: boolean) {
if (cm) {
@ -80,7 +78,6 @@ describe('encapsulation', () => {
class EncapsulatedComponent {
static ngComponentDef = defineComponent({
type: EncapsulatedComponent,
tag: 'encapsulated',
template: function(ctx: EncapsulatedComponent, cm: boolean) {
if (cm) {
@ -99,7 +96,6 @@ describe('encapsulation', () => {
class LeafComponent {
static ngComponentDef = defineComponent({
type: LeafComponent,
tag: 'leaf',
template: function(ctx: LeafComponent, cm: boolean) {
if (cm) {
@ -129,7 +125,6 @@ describe('encapsulation', () => {
it('should encapsulate host and children with different attributes', () => {
class WrapperComponentWith {
static ngComponentDef = defineComponent({
type: WrapperComponent,
tag: 'wrapper',
template: function(ctx: WrapperComponentWith, cm: boolean) {
if (cm) {
@ -147,7 +142,6 @@ describe('encapsulation', () => {
class LeafComponentwith {
static ngComponentDef = defineComponent({
type: LeafComponentwith,
tag: 'leaf',
template: function(ctx: LeafComponentwith, cm: boolean) {
if (cm) {

View File

@ -151,9 +151,7 @@ describe('content projection', () => {
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) {
E(0, Child);
{
C(2);
}
{ C(2); }
e();
}
cR(2);
@ -244,9 +242,7 @@ describe('content projection', () => {
if (cm) {
m(0, pD());
E(1, 'div');
{
C(2);
}
{ C(2); }
e();
}
cR(2);
@ -301,9 +297,7 @@ describe('content projection', () => {
if (cm) {
m(0, pD());
E(1, 'div');
{
C(2);
}
{ C(2); }
e();
}
cR(2);
@ -398,9 +392,7 @@ describe('content projection', () => {
m(0, pD());
P(1, 0);
E(2, 'div');
{
C(3);
}
{ C(3); }
e();
}
cR(3);
@ -816,9 +808,7 @@ describe('content projection', () => {
const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) {
if (cm) {
E(0, Child);
{
C(2, undefined, undefined, 'div');
}
{ C(2, undefined, undefined, 'div'); }
e();
}
cR(2);

View File

@ -17,9 +17,7 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -67,9 +65,7 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -79,9 +75,7 @@ describe('JS control flow', () => {
{
if (cm1) {
E(0, 'span');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -180,9 +174,7 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'ul');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -228,9 +220,7 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'ul');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -240,9 +230,7 @@ describe('JS control flow', () => {
{
if (cm1) {
E(0, 'li');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -457,9 +445,7 @@ describe('JS control flow', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
C(1);
}
{ C(1); }
e();
}
cR(1);
@ -507,9 +493,7 @@ describe('JS for loop', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
C(1);
}
{ C(1); }
e();
}
cR(1);

View File

@ -9,7 +9,7 @@
import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
import {bloomAdd, bloomFindPossibleInjector} from '../../src/render3/di';
import {C, D, E, PublicFeature, T, V, b, b2, c, cR, cr, defineDirective, e, inject, injectElementRef, injectTemplateRef, injectViewContainerRef, t, v} from '../../src/render3/index';
import {C, D, E, PublicFeature, T, V, b, b2, cR, cr, defineDirective, e, inject, injectElementRef, injectTemplateRef, injectViewContainerRef, t, v} from '../../src/render3/index';
import {createLNode, createLView, enterView, getOrCreateNodeInjector, leaveView} from '../../src/render3/instructions';
import {LInjector} from '../../src/render3/interfaces/injector';
import {LNodeFlags} from '../../src/render3/interfaces/node';
@ -21,7 +21,7 @@ describe('di', () => {
it('should create directive with no deps', () => {
class Directive {
value: string = 'Created';
static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
static ngDirectiveDef = defineDirective({factory: () => new Directive});
}
function Template(ctx: any, cm: boolean) {
@ -41,23 +41,21 @@ 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]});
static ngDirectiveDef =
defineDirective({factory: () => new DirectiveA, features: [PublicFeature]});
}
class DirectiveB {
value: string = 'B';
static ngDirectiveDef = defineDirective(
{type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
static ngDirectiveDef =
defineDirective({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))
});
static ngDirectiveDef = defineDirective(
{factory: () => new DirectiveC(inject(DirectiveA), inject(DirectiveB))});
}
function Template(ctx: any, cm: boolean) {
@ -84,11 +82,8 @@ describe('di', () => {
constructor(public elementRef: ElementRef) {
this.value = (elementRef.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectElementRef()),
features: [PublicFeature]
});
static ngDirectiveDef = defineDirective(
{factory: () => new Directive(injectElementRef()), features: [PublicFeature]});
}
class DirectiveSameInstance {
@ -96,10 +91,8 @@ describe('di', () => {
constructor(elementRef: ElementRef, directive: Directive) {
this.value = elementRef === directive.elementRef;
}
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))
});
static ngDirectiveDef = defineDirective(
{factory: () => new DirectiveSameInstance(injectElementRef(), inject(Directive))});
}
function Template(ctx: any, cm: boolean) {
@ -122,11 +115,8 @@ describe('di', () => {
constructor(public templateRef: TemplateRef<any>) {
this.value = (templateRef.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectTemplateRef()),
features: [PublicFeature]
});
static ngDirectiveDef = defineDirective(
{factory: () => new Directive(injectTemplateRef()), features: [PublicFeature]});
}
class DirectiveSameInstance {
@ -134,10 +124,8 @@ describe('di', () => {
constructor(templateRef: TemplateRef<any>, directive: Directive) {
this.value = templateRef === directive.templateRef;
}
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))
});
static ngDirectiveDef = defineDirective(
{factory: () => new DirectiveSameInstance(injectTemplateRef(), inject(Directive))});
}
@ -160,11 +148,8 @@ describe('di', () => {
constructor(public viewContainerRef: ViewContainerRef) {
this.value = (viewContainerRef.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(injectViewContainerRef()),
features: [PublicFeature]
});
static ngDirectiveDef = defineDirective(
{factory: () => new Directive(injectViewContainerRef()), features: [PublicFeature]});
}
class DirectiveSameInstance {
@ -173,7 +158,6 @@ describe('di', () => {
this.value = viewContainerRef === directive.viewContainerRef;
}
static ngDirectiveDef = defineDirective({
type: DirectiveSameInstance,
factory: () => new DirectiveSameInstance(injectViewContainerRef(), inject(Directive))
});
}
@ -235,11 +219,8 @@ describe('di', () => {
it('should inject from parent view', () => {
class ParentDirective {
static ngDirectiveDef = defineDirective({
type: ParentDirective,
factory: () => new ParentDirective(),
features: [PublicFeature]
});
static ngDirectiveDef =
defineDirective({factory: () => new ParentDirective(), features: [PublicFeature]});
}
class ChildDirective {
@ -248,7 +229,6 @@ describe('di', () => {
this.value = (parent.constructor as any).name;
}
static ngDirectiveDef = defineDirective({
type: ChildDirective,
factory: () => new ChildDirective(inject(ParentDirective)),
features: [PublicFeature]
});
@ -259,18 +239,14 @@ describe('di', () => {
constructor(parent: ParentDirective, child: ChildDirective) {
this.value = parent === child.parent;
}
static ngDirectiveDef = defineDirective({
type: Child2Directive,
factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))
});
static ngDirectiveDef = defineDirective(
{factory: () => new Child2Directive(inject(ParentDirective), inject(ChildDirective))});
}
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', null, [ParentDirective]);
{
C(2);
}
{ C(2); }
e();
}
cR(2);

View File

@ -20,7 +20,6 @@ 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<Directive>(directiveIndex).klass));

View File

@ -42,12 +42,8 @@ describe('exports', () => {
class MyComponent {
name = 'Nancy';
static ngComponentDef = defineComponent({
type: MyComponent,
tag: 'comp',
template: function() {},
factory: () => new MyComponent
});
static ngComponentDef =
defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent});
}
expect(renderToHtml(Template, {})).toEqual('<comp></comp>Nancy');
@ -59,19 +55,14 @@ describe('exports', () => {
let myDir: MyDir;
class MyComponent {
constructor() { myComponent = this; }
static ngComponentDef = defineComponent({
type: MyComponent,
tag: 'comp',
template: function() {},
factory: () => new MyComponent
});
static ngComponentDef =
defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent});
}
class MyDir {
myDir: MyComponent;
constructor() { myDir = this; }
static ngDirectiveDef =
defineDirective({type: MyDir, factory: () => new MyDir, inputs: {myDir: 'myDir'}});
static ngDirectiveDef = defineDirective({factory: () => new MyDir, inputs: {myDir: 'myDir'}});
}
/** <comp #myComp></comp> <div [myDir]="myComp"></div> */
@ -103,7 +94,7 @@ describe('exports', () => {
class SomeDir {
name = 'Drew';
static ngDirectiveDef = defineDirective({type: SomeDir, factory: () => new SomeDir});
static ngDirectiveDef = defineDirective({factory: () => new SomeDir});
}
expect(renderToHtml(Template, {})).toEqual('<div></div>Drew');
@ -184,7 +175,6 @@ describe('exports', () => {
constructor() { myComponent = this; }
static ngComponentDef = defineComponent({
type: MyComponent,
tag: 'comp',
template: function(ctx: MyComponent, cm: boolean) {},
factory: () => new MyComponent
@ -197,7 +187,7 @@ describe('exports', () => {
constructor() { myDir = this; }
static ngDirectiveDef =
defineDirective({type: MyDir, factory: () => new MyDir, inputs: {myDir: 'myDir'}});
defineDirective({factory: () => new MyDir, inputs: {myDir: 'myDir'}});
}
/** <div [myDir]="myComp"></div><comp #myComp></comp> */
@ -240,12 +230,8 @@ describe('exports', () => {
constructor() { myComponent = this; }
static ngComponentDef = defineComponent({
type: MyComponent,
tag: 'comp',
template: function() {},
factory: () => new MyComponent
});
static ngComponentDef =
defineComponent({tag: 'comp', template: function() {}, factory: () => new MyComponent});
}
expect(renderToHtml(Template, {})).toEqual('oneNancy<comp></comp><input value="one">');
});
@ -254,9 +240,7 @@ describe('exports', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div');
{
C(1);
}
{ C(1); }
e();
}
cR(1);

View File

@ -210,7 +210,6 @@ describe('render3 integration test', () => {
value = ' one';
static ngComponentDef = defineComponent({
type: TodoComponent,
tag: 'todo',
template: function TodoTemplate(ctx: any, cm: boolean) {
if (cm) {
@ -280,7 +279,6 @@ describe('render3 integration test', () => {
class TodoComponentHostBinding {
title = 'one';
static ngComponentDef = defineComponent({
type: TodoComponentHostBinding,
tag: 'todo',
template: function TodoComponentHostBindingTemplate(
ctx: TodoComponentHostBinding, cm: boolean) {
@ -316,7 +314,6 @@ describe('render3 integration test', () => {
class MyComp {
name = 'Bess';
static ngComponentDef = defineComponent({
type: MyComp,
tag: 'comp',
template: function MyCompTemplate(ctx: any, cm: boolean) {
if (cm) {
@ -351,7 +348,6 @@ describe('render3 integration test', () => {
class MyComp {
condition: boolean;
static ngComponentDef = defineComponent({
type: MyComp,
tag: 'comp',
template: function MyCompTemplate(ctx: any, cm: boolean) {
if (cm) {

View File

@ -38,7 +38,6 @@ describe('lifecycles', () => {
ngOnInit() { events.push(`${name}${this.val}`); }
static ngComponentDef = defineComponent({
type: Component,
tag: name,
factory: () => new Component(),
hostBindings: function(directiveIndex: number, elementIndex: number):
@ -271,7 +270,6 @@ describe('lifecycles', () => {
ngOnInit() { allEvents.push('ngOnInit ' + name); }
static ngComponentDef = defineComponent({
type: Component,
tag: name,
factory: () => new Component(),
hostBindings: function(
@ -363,7 +361,6 @@ describe('lifecycles', () => {
ngAfterViewChecked() { allEvents.push(`${name}${this.val} check`); }
static ngComponentDef = defineComponent({
type: Component,
tag: name,
factory: () => new Component(),
refresh: (directiveIndex: number, elementIndex: number) => {
@ -405,7 +402,6 @@ describe('lifecycles', () => {
function Template(ctx: any, cm: boolean) {
if (cm) {
C(0);
c();
}
cR(0);
{
@ -492,7 +488,6 @@ describe('lifecycles', () => {
E(0, Comp);
e();
C(2);
c();
E(3, Comp);
e();
}
@ -536,7 +531,6 @@ describe('lifecycles', () => {
E(0, Parent);
e();
C(2);
c();
E(3, Parent);
e();
}
@ -621,7 +615,6 @@ describe('lifecycles', () => {
E(0, Parent);
e();
C(2);
c();
E(3, Parent);
e();
}
@ -674,7 +667,6 @@ describe('lifecycles', () => {
ngOnDestroy() { events.push(`${name}${this.val}`); }
static ngComponentDef = defineComponent({
type: Component,
tag: name,
factory: () => {
const comp = new Component();

View File

@ -21,7 +21,6 @@ describe('event listeners', () => {
onClick() { this.counter++; }
static ngComponentDef = defineComponent({
type: MyComp,
tag: 'comp',
/** <button (click)="onClick()"> Click me </button> */
template: function CompTemplate(ctx: any, cm: boolean) {

View File

@ -21,7 +21,6 @@ describe('outputs', () => {
static ngComponentDef = defineComponent({
tag: 'button-toggle',
type: ButtonToggle,
template: function(ctx: any, cm: boolean) {},
factory: () => buttonToggle = new ButtonToggle(),
outputs: {change: 'change', resetStream: 'reset'}
@ -33,11 +32,8 @@ describe('outputs', () => {
class OtherDir {
changeStream = new EventEmitter();
static ngDirectiveDef = defineDirective({
type: OtherDir,
factory: () => otherDir = new OtherDir,
outputs: {changeStream: 'change'}
});
static ngDirectiveDef = defineDirective(
{factory: () => otherDir = new OtherDir, outputs: {changeStream: 'change'}});
}
it('should call component output function when event is emitted', () => {
@ -217,7 +213,6 @@ describe('outputs', () => {
static ngComponentDef = defineComponent({
tag: 'destroy-comp',
type: DestroyComp,
template: function(ctx: any, cm: boolean) {},
factory: () => {
destroyComp = new DestroyComp();
@ -296,8 +291,8 @@ describe('outputs', () => {
class MyButton {
click = new EventEmitter();
static ngDirectiveDef = defineDirective(
{type: MyButton, factory: () => buttonDir = new MyButton, outputs: {click: 'click'}});
static ngDirectiveDef =
defineDirective({factory: () => buttonDir = new MyButton, outputs: {click: 'click'}});
}
function Template(ctx: any, cm: boolean) {
@ -349,8 +344,8 @@ describe('outputs', () => {
class OtherDir {
change: boolean;
static ngDirectiveDef = defineDirective(
{type: OtherDir, factory: () => otherDir = new OtherDir, inputs: {change: 'change'}});
static ngDirectiveDef =
defineDirective({factory: () => otherDir = new OtherDir, inputs: {change: 'change'}});
}
/** <button-toggle (change)="onChange()" otherDir [change]="change"></button-toggle> */

View File

@ -69,8 +69,8 @@ describe('elementProperty', () => {
class MyButton {
disabled: boolean;
static ngDirectiveDef = defineDirective(
{type: MyButton, factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}});
static ngDirectiveDef =
defineDirective({factory: () => button = new MyButton(), inputs: {disabled: 'disabled'}});
}
class OtherDir {
@ -78,7 +78,6 @@ describe('elementProperty', () => {
clickStream = new EventEmitter();
static ngDirectiveDef = defineDirective({
type: OtherDir,
factory: () => otherDir = new OtherDir(),
inputs: {id: 'id'},
outputs: {clickStream: 'click'}
@ -142,7 +141,6 @@ describe('elementProperty', () => {
static ngComponentDef = defineComponent({
tag: 'comp',
type: Comp,
template: function(ctx: any, cm: boolean) {},
factory: () => comp = new Comp(),
inputs: {id: 'id'}
@ -174,7 +172,6 @@ describe('elementProperty', () => {
disabled: boolean;
static ngDirectiveDef = defineDirective({
type: OtherDisabledDir,
factory: () => otherDisabledDir = new OtherDisabledDir(),
inputs: {disabled: 'disabled'}
});
@ -234,8 +231,8 @@ describe('elementProperty', () => {
class IdDir {
idNumber: number;
static ngDirectiveDef = defineDirective(
{type: IdDir, factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}});
static ngDirectiveDef =
defineDirective({factory: () => idDir = new IdDir(), inputs: {idNumber: 'id'}});
}
/**
@ -297,7 +294,6 @@ describe('elementProperty', () => {
changeStream = new EventEmitter();
static ngDirectiveDef = defineDirective({
type: MyDir,
factory: () => myDir = new MyDir(),
inputs: {role: 'role', direction: 'dir'},
outputs: {changeStream: 'change'}
@ -308,8 +304,8 @@ describe('elementProperty', () => {
class MyDirB {
roleB: string;
static ngDirectiveDef = defineDirective(
{type: MyDirB, factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}});
static ngDirectiveDef =
defineDirective({factory: () => dirB = new MyDirB(), inputs: {roleB: 'role'}});
}
it('should set input property based on attribute if existing', () => {
@ -472,7 +468,6 @@ describe('elementProperty', () => {
class Comp {
static ngComponentDef = defineComponent({
tag: 'comp',
type: Comp,
template: function(ctx: any, cm: boolean) {
if (cm) {
E(0, 'div', ['role', 'button'], [MyDir]);

View File

@ -7,11 +7,13 @@
*/
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 {DirectiveDefArgs} from '../../src/render3/interfaces/definition';
import {LElementNode, LNodeFlags} from '../../src/render3/interfaces/node';
import {RElement, RText, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {getRendererFactory2} from './imported_renderer2';
export const document = ((global || window) as any).document;
@ -80,20 +82,14 @@ export function createComponent(
name: string, template: ComponentTemplate<any>): ComponentType<any> {
return class Component {
value: any;
static ngComponentDef = defineComponent({
type: Component,
tag: name,
factory: () => new Component,
template: template,
features: [PublicFeature]
});
static ngComponentDef = defineComponent(
{tag: name, factory: () => new Component, template: template, features: [PublicFeature]});
};
}
export function createDirective({exportAs}: {exportAs?: string} = {}): DirectiveType<any> {
return class Directive {
static ngDirectiveDef = defineDirective({
type: Directive,
factory: () => new Directive(),
features: [PublicFeature],
exportAs: exportAs,

View File

@ -29,7 +29,6 @@ describe('renderer factory lifecycle', () => {
class SomeComponent {
static ngComponentDef = defineComponent({
type: SomeComponent,
tag: 'some-component',
template: function(ctx: SomeComponent, cm: boolean) {
logs.push('component');
@ -43,7 +42,6 @@ describe('renderer factory lifecycle', () => {
class SomeComponentWhichThrows {
static ngComponentDef = defineComponent({
type: SomeComponentWhichThrows,
tag: 'some-component-with-Error',
template: function(ctx: SomeComponentWhichThrows, cm: boolean) {
throw(new Error('SomeComponentWhichThrows threw'));
@ -122,7 +120,6 @@ describe('animation renderer factory', () => {
class SomeComponent {
static ngComponentDef = defineComponent({
type: SomeComponent,
tag: 'some-component',
template: function(ctx: SomeComponent, cm: boolean) {
if (cm) {
@ -139,7 +136,6 @@ describe('animation renderer factory', () => {
eventLogs.push(`${event.fromState ? event.fromState : event.toState} - ${event.phaseName}`);
}
static ngComponentDef = defineComponent({
type: SomeComponentWithAnimation,
tag: 'some-component',
template: function(ctx: SomeComponentWithAnimation, cm: boolean) {
if (cm) {