feat(ivy): Add InheritanceDefinitionFeature to support directive inheritance (#24570)

- Adds InheritanceDefinitionFeature to ivy
- Ensures that lifecycle hooks are inherited from super classes whether they are defined as directives or not
- Directives cannot inherit from Components
- Components can inherit from Directives or Components
- Ensures that Inputs, Outputs, and Host Bindings are inherited
- Ensures that super class Features are run

PR Close #24570
This commit is contained in:
Ben Lesh 2018-06-18 08:05:06 -07:00 committed by Misko Hevery
parent 13d60eac61
commit 9803cb011e
25 changed files with 1095 additions and 292 deletions

View File

@ -108,6 +108,9 @@ export function extractDirectiveMetadata(
member => member.isStatic && member.kind === ClassMemberKind.Method &&
member.name === 'ngOnChanges') !== undefined;
// Detect if the component inherits from another class
const usesInheritance = clazz.heritageClauses !== undefined &&
clazz.heritageClauses.some(hc => hc.token === ts.SyntaxKind.ExtendsKeyword);
return {
name: clazz.name !.text,
deps: getConstructorDependencies(clazz, reflector, isCore),
@ -123,7 +126,7 @@ export function extractDirectiveMetadata(
outputs: {...outputsFromMeta, ...outputsFromFields},
queries: [], selector,
type: new WrappedNodeExpr(clazz.name !),
typeSourceSpan: null !,
typeSourceSpan: null !, usesInheritance,
};
}

View File

@ -138,6 +138,9 @@ export class Identifiers {
static NgOnChangesFeature: o.ExternalReference = {name: 'ɵNgOnChangesFeature', moduleName: CORE};
static InheritDefinitionFeature:
o.ExternalReference = {name: 'ɵInheritDefinitionFeature', moduleName: CORE};
static listener: o.ExternalReference = {name: 'ɵL', moduleName: CORE};
// Reserve slots for pure functions

View File

@ -86,6 +86,11 @@ export interface R3DirectiveMetadata {
* A mapping of output field names to the property names.
*/
outputs: {[field: string]: string};
/**
* Whether or not the component or directive inherits from another class
*/
usesInheritance: boolean;
}
/**

View File

@ -64,10 +64,14 @@ function baseDirectiveFields(
// e.g 'outputs: {a: 'a'}`
definitionMap.set('outputs', conditionallyCreateMapObjectLiteral(meta.outputs));
// e.g. `features: [NgOnChangesFeature(MyComponent)]`
// e.g. `features: [NgOnChangesFeature]`
const features: o.Expression[] = [];
if (meta.usesInheritance) {
features.push(o.importExpr(R3.InheritDefinitionFeature));
}
if (meta.lifecycle.usesOnChanges) {
features.push(o.importExpr(R3.NgOnChangesFeature, null, null).callFn([meta.type]));
features.push(o.importExpr(R3.NgOnChangesFeature));
}
if (features.length) {
definitionMap.set('features', o.literalArr(features));
@ -255,6 +259,7 @@ function directiveMetadataFromGlobalMetadata(
},
inputs: directive.inputs,
outputs: directive.outputs,
usesInheritance: false,
};
}

View File

@ -1212,7 +1212,7 @@ describe('compiler compliance', () => {
selectors: [['lifecycle-comp']],
factory: function LifecycleComp_Factory() { return new LifecycleComp(); },
inputs: {nameMin: 'name'},
features: [$r3$.ɵNgOnChangesFeature(LifecycleComp)],
features: [$r3$.ɵNgOnChangesFeature],
template: function LifecycleComp_Template(rf: IDENT, ctx: IDENT) {}
});`;
@ -1328,7 +1328,7 @@ describe('compiler compliance', () => {
factory: function ForOfDirective_Factory() {
return new ForOfDirective($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef());
},
features: [$r3$.ɵNgOnChangesFeature(NgForOf)],
features: [$r3$.ɵNgOnChangesFeature],
inputs: {forOf: 'forOf'}
});
`;
@ -1401,7 +1401,7 @@ describe('compiler compliance', () => {
factory: function ForOfDirective_Factory() {
return new ForOfDirective($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef());
},
features: [$r3$.ɵNgOnChangesFeature(NgForOf)],
features: [$r3$.ɵNgOnChangesFeature],
inputs: {forOf: 'forOf'}
});
`;

View File

@ -61,14 +61,47 @@ export function defineComponent<T>(componentDefinition: {
/**
* A map of input names.
*
* The format is in: `{[actualPropertyName: string]:string}`.
* The format is in: `{[actualPropertyName: string]:(string|[string, string])}`.
*
* Which the minifier may translate to: `{[minifiedPropertyName: string]:string}`.
* Given:
* ```
* class MyComponent {
* @Input()
* publicInput1: string;
*
* This allows the render to re-construct the minified and non-minified names
* @Input('publicInput2')
* declaredInput2: string;
* }
* ```
*
* is described as:
* ```
* {
* publicInput1: 'publicInput1',
* declaredInput2: ['declaredInput2', 'publicInput2'],
* }
* ```
*
* Which the minifier may translate to:
* ```
* {
* minifiedPublicInput1: 'publicInput1',
* minifiedDeclaredInput2: [ 'publicInput2', 'declaredInput2'],
* }
* ```
*
* This allows the render to re-construct the minified, public, and declared names
* of properties.
*
* NOTE:
* - Because declared and public name are usually same we only generate the array
* `['declared', 'public']` format when they differ.
* - The reason why this API and `outputs` API is not the same is that `NgOnChanges` has
* inconsistent behavior in that it uses declared names rather than minified or public. For
* this reason `NgOnChanges` will be deprecated and removed in future version and this
* API will be simplified to be consistent with `output`.
*/
inputs?: {[P in keyof T]?: string};
inputs?: {[P in keyof T]?: string | [string, string]};
/**
* A map of output names.
@ -176,6 +209,7 @@ export function defineComponent<T>(componentDefinition: {
const type = componentDefinition.type;
const pipeTypes = componentDefinition.pipes !;
const directiveTypes = componentDefinition.directives !;
const declaredInputs: {[P in keyof T]: P} = {} as any;
const def: ComponentDefInternal<any> = {
type: type,
diPublic: null,
@ -183,7 +217,8 @@ export function defineComponent<T>(componentDefinition: {
template: componentDefinition.template || null !,
hostBindings: componentDefinition.hostBindings || null,
attributes: componentDefinition.attributes || null,
inputs: invertObject(componentDefinition.inputs),
inputs: invertObject(componentDefinition.inputs, declaredInputs),
declaredInputs: declaredInputs,
outputs: invertObject(componentDefinition.outputs),
rendererType: resolveRendererType2(componentDefinition.rendererType) || null,
exportAs: componentDefinition.exportAs || null,
@ -204,6 +239,7 @@ export function defineComponent<T>(componentDefinition: {
null,
selectors: componentDefinition.selectors,
viewQuery: componentDefinition.viewQuery || null,
features: componentDefinition.features || null,
};
const feature = componentDefinition.features;
feature && feature.forEach((fn) => fn(def));
@ -239,115 +275,72 @@ export function defineNgModule<T>(def: {type: T} & Partial<NgModuleDef<T, any, a
return res as never;
}
const PRIVATE_PREFIX = '__ngOnChanges_';
type OnChangesExpando = OnChanges & {
__ngOnChanges_: SimpleChanges|null|undefined;
[key: string]: any;
};
/**
* Creates an NgOnChangesFeature function for a component's features list.
*
* It accepts an optional map of minified input property names to original property names,
* if any input properties have a public alias.
*
* The NgOnChangesFeature function that is returned decorates a component with support for
* the ngOnChanges lifecycle hook, so it should be included in any component that implements
* that hook.
*
* Example usage:
*
* ```
* static ngComponentDef = defineComponent({
* ...
* inputs: {name: 'publicName'},
* features: [NgOnChangesFeature({name: 'name'})]
* });
* ```
*
* @param inputPropertyNames Map of input property names, if they are aliased
* @returns DirectiveDefFeature
*/
export function NgOnChangesFeature(inputPropertyNames?: {[key: string]: string}):
DirectiveDefFeature {
return function(definition: DirectiveDefInternal<any>): void {
const inputs = definition.inputs;
const proto = definition.type.prototype;
for (let pubKey in inputs) {
const minKey = inputs[pubKey];
const propertyName = inputPropertyNames && inputPropertyNames[minKey] || pubKey;
const privateMinKey = PRIVATE_PREFIX + minKey;
const originalProperty = Object.getOwnPropertyDescriptor(proto, minKey);
const getter = originalProperty && originalProperty.get;
const setter = originalProperty && originalProperty.set;
// create a getter and setter for property
Object.defineProperty(proto, minKey, {
get: getter ||
(setter ? undefined : function(this: OnChangesExpando) { return this[privateMinKey]; }),
set: function(this: OnChangesExpando, value: any) {
let simpleChanges = this[PRIVATE_PREFIX];
if (!simpleChanges) {
// Place where we will store SimpleChanges if there is a change
Object.defineProperty(
this, PRIVATE_PREFIX, {value: simpleChanges = {}, writable: true});
}
const isFirstChange = !this.hasOwnProperty(privateMinKey);
const currentChange: SimpleChange|undefined = simpleChanges[propertyName];
if (currentChange) {
currentChange.currentValue = value;
} else {
simpleChanges[propertyName] =
new SimpleChange(this[privateMinKey], value, isFirstChange);
}
if (isFirstChange) {
// Create a place where the actual value will be stored and make it non-enumerable
Object.defineProperty(this, privateMinKey, {value, writable: true});
} else {
this[privateMinKey] = value;
}
setter && setter.call(this, value);
}
});
}
// If an onInit hook is defined, it will need to wrap the ngOnChanges call
// so the call order is changes-init-check in creation mode. In subsequent
// change detection runs, only the check wrapper will be called.
if (definition.onInit != null) {
definition.onInit = onChangesWrapper(definition.onInit);
}
definition.doCheck = onChangesWrapper(definition.doCheck);
};
function onChangesWrapper(delegateHook: (() => void) | null) {
return function(this: OnChangesExpando) {
let simpleChanges = this[PRIVATE_PREFIX];
if (simpleChanges != null) {
this.ngOnChanges(simpleChanges);
this[PRIVATE_PREFIX] = null;
}
delegateHook && delegateHook.apply(this);
};
}
}
export function PublicFeature<T>(definition: DirectiveDefInternal<T>) {
definition.diPublic = diPublic;
}
const EMPTY = {};
/** Swaps the keys and values of an object. */
function invertObject(obj: any): any {
/**
* Inverts an inputs or outputs lookup such that the keys, which were the
* minified keys, are part of the values, and the values are parsed so that
* the publicName of the property is the new key
*
* e.g. for
*
* ```
* class Comp {
* @Input()
* propName1: string;
*
* @Input('publicName')
* propName2: number;
* }
* ```
*
* will be serialized as
*
* ```
* {
* a0: 'propName1',
* b1: ['publicName', 'propName2'],
* }
* ```
*
* becomes
*
* ```
* {
* 'propName1': 'a0',
* 'publicName': 'b1'
* }
* ```
*
* Optionally the function can take `secondary` which will result in:
*
* ```
* {
* 'propName1': 'a0',
* 'propName2': 'b1'
* }
* ```
*
*/
function invertObject(obj: any, secondary?: any): any {
if (obj == null) return EMPTY;
const newObj: any = {};
for (let minifiedKey in obj) {
newObj[obj[minifiedKey]] = minifiedKey;
const newLookup: any = {};
for (const minifiedKey in obj) {
if (obj.hasOwnProperty(minifiedKey)) {
let publicName = obj[minifiedKey];
let declaredName = publicName;
if (Array.isArray(publicName)) {
declaredName = publicName[1];
publicName = publicName[0];
}
newLookup[publicName] = minifiedKey;
if (secondary) {
(secondary[declaredName] = minifiedKey);
}
}
}
return newObj;
return newLookup;
}
/**
@ -389,14 +382,47 @@ export const defineDirective = defineComponent as any as<T>(directiveDefinition:
/**
* A map of input names.
*
* The format is in: `{[actualPropertyName: string]:string}`.
* The format is in: `{[actualPropertyName: string]:(string|[string, string])}`.
*
* Which the minifier may translate to: `{[minifiedPropertyName: string]:string}`.
* Given:
* ```
* class MyComponent {
* @Input()
* publicInput1: string;
*
* This allows the render to re-construct the minified and non-minified names
* @Input('publicInput2')
* declaredInput2: string;
* }
* ```
*
* is described as:
* ```
* {
* publicInput1: 'publicInput1',
* declaredInput2: ['declaredInput2', 'publicInput2'],
* }
* ```
*
* Which the minifier may translate to:
* ```
* {
* minifiedPublicInput1: 'publicInput1',
* minifiedDeclaredInput2: [ 'publicInput2', 'declaredInput2'],
* }
* ```
*
* This allows the render to re-construct the minified, public, and declared names
* of properties.
*
* NOTE:
* - Because declared and public name are usually same we only generate the array
* `['declared', 'public']` format when they differ.
* - The reason why this API and `outputs` API is not the same is that `NgOnChanges` has
* inconsistent behavior in that it uses declared names rather than minified or public. For
* this reason `NgOnChanges` will be deprecated and removed in future version and this
* API will be simplified to be consistent with `output`.
*/
inputs?: {[P in keyof T]?: string};
inputs?: {[P in keyof T]?: string | [string, string]};
/**
* A map of output names.
@ -413,7 +439,7 @@ export const defineDirective = defineComponent as any as<T>(directiveDefinition:
/**
* A list of optional features to apply.
*
* See: {@link NgOnChangesFeature}, {@link PublicFeature}
* See: {@link NgOnChangesFeature}, {@link PublicFeature}, {@link InheritDefinitionFeature}
*/
features?: DirectiveDefFeature[];

View File

@ -0,0 +1,120 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Type} from '../../type';
import {ComponentDefInternal, ComponentType, DirectiveDefFeature, DirectiveDefInternal} from '../interfaces/definition';
/**
* Sets properties on a target object from a source object, but only if
* the property doesn't already exist on the target object.
* @param target The target to set properties on
* @param source The source of the property keys and values to set
*/
function fillProperties(target: {[key: string]: string}, source: {[key: string]: string}) {
for (const key in source) {
if (source.hasOwnProperty(key) && !target.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
/**
* Determines if a definition is a {@link ComponentDefInternal} or a {@link DirectiveDefInternal}
* @param definition The definition to examine
*/
function isComponentDef<T>(definition: ComponentDefInternal<T>| DirectiveDefInternal<T>):
definition is ComponentDefInternal<T> {
const def = definition as ComponentDefInternal<T>;
return typeof def.template === 'function';
}
function getSuperType(type: Type<any>): Type<any>&
{ngComponentDef?: ComponentDefInternal<any>, ngDirectiveDef?: DirectiveDefInternal<any>} {
return Object.getPrototypeOf(type.prototype).constructor;
}
/**
* Merges the definition from a super class to a sub class.
* @param definition The definition that is a SubClass of another directive of component
*/
export function InheritDefinitionFeature(
definition: DirectiveDefInternal<any>| ComponentDefInternal<any>): void {
let superType = getSuperType(definition.type);
let superDef: DirectiveDefInternal<any>|ComponentDefInternal<any>|undefined = undefined;
while (superType && !superDef) {
if (isComponentDef(definition)) {
superDef = superType.ngComponentDef || superType.ngDirectiveDef;
} else {
if (superType.ngComponentDef) {
throw new Error('Directives cannot inherit Components');
}
superDef = superType.ngDirectiveDef;
}
if (superDef) {
// Merge inputs and outputs
fillProperties(definition.inputs, superDef.inputs);
fillProperties(definition.declaredInputs, superDef.declaredInputs);
fillProperties(definition.outputs, superDef.outputs);
// Merge hostBindings
const prevHostBindings = definition.hostBindings;
const superHostBindings = superDef.hostBindings;
if (superHostBindings) {
if (prevHostBindings) {
definition.hostBindings = (directiveIndex: number, elementIndex: number) => {
superHostBindings(directiveIndex, elementIndex);
prevHostBindings(directiveIndex, elementIndex);
};
} else {
definition.hostBindings = superHostBindings;
}
}
// Inherit hooks
// Assume super class inheritance feature has already run.
definition.afterContentChecked =
definition.afterContentChecked || superDef.afterContentChecked;
definition.afterContentInit = definition.afterContentInit || superDef.afterContentInit;
definition.afterViewChecked = definition.afterViewChecked || superDef.afterViewChecked;
definition.afterViewInit = definition.afterViewInit || superDef.afterViewInit;
definition.doCheck = definition.doCheck || superDef.doCheck;
definition.onDestroy = definition.onDestroy || superDef.onDestroy;
definition.onInit = definition.onInit || superDef.onInit;
// Run parent features
const features = superDef.features;
if (features) {
for (const feature of features) {
if (feature && feature !== InheritDefinitionFeature) {
(feature as DirectiveDefFeature)(definition);
}
}
}
} else {
// Even if we don't have a definition, check the type for the hooks and use those if need be
const superPrototype = superType.prototype;
if (superPrototype) {
definition.afterContentChecked =
definition.afterContentChecked || superPrototype.afterContentChecked;
definition.afterContentInit =
definition.afterContentInit || superPrototype.afterContentInit;
definition.afterViewChecked =
definition.afterViewChecked || superPrototype.afterViewChecked;
definition.afterViewInit = definition.afterViewInit || superPrototype.afterViewInit;
definition.doCheck = definition.doCheck || superPrototype.doCheck;
definition.onDestroy = definition.onDestroy || superPrototype.onDestroy;
definition.onInit = definition.onInit || superPrototype.onInit;
}
}
superType = Object.getPrototypeOf(superType);
}
}

View File

@ -0,0 +1,116 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {SimpleChange} from '../../change_detection/change_detection_util';
import {OnChanges, SimpleChanges} from '../../metadata/lifecycle_hooks';
import {DirectiveDefInternal} from '../interfaces/definition';
const PRIVATE_PREFIX = '__ngOnChanges_';
type OnChangesExpando = OnChanges & {
__ngOnChanges_: SimpleChanges|null|undefined;
// tslint:disable-next-line:no-any Can hold any value
[key: string]: any;
};
/**
* The NgOnChangesFeature decorates a component with support for the ngOnChanges
* lifecycle hook, so it should be included in any component that implements
* that hook.
*
* If the component or directive uses inheritance, the NgOnChangesFeature MUST
* be included as a feature AFTER {@link InheritDefinitionFeature}, otherwise
* inherited properties will not be propagated to the ngOnChanges lifecycle
* hook.
*
* Example usage:
*
* ```
* static ngComponentDef = defineComponent({
* ...
* inputs: {name: 'publicName'},
* features: [NgOnChangesFeature]
* });
* ```
*/
export function NgOnChangesFeature<T>(definition: DirectiveDefInternal<T>): void {
const declaredToMinifiedInputs = definition.declaredInputs;
const proto = definition.type.prototype;
for (const declaredName in declaredToMinifiedInputs) {
if (declaredToMinifiedInputs.hasOwnProperty(declaredName)) {
const minifiedKey = declaredToMinifiedInputs[declaredName];
const privateMinKey = PRIVATE_PREFIX + minifiedKey;
// Walk the prototype chain to see if we find a property descriptor
// That way we can honor setters and getters that were inherited.
let originalProperty: PropertyDescriptor|undefined = undefined;
let checkProto = proto;
while (!originalProperty && checkProto &&
Object.getPrototypeOf(checkProto) !== Object.getPrototypeOf(Object.prototype)) {
originalProperty = Object.getOwnPropertyDescriptor(checkProto, minifiedKey);
checkProto = Object.getPrototypeOf(checkProto);
}
const getter = originalProperty && originalProperty.get;
const setter = originalProperty && originalProperty.set;
// create a getter and setter for property
Object.defineProperty(proto, minifiedKey, {
get: getter ||
(setter ? undefined : function(this: OnChangesExpando) { return this[privateMinKey]; }),
set<T>(this: OnChangesExpando, value: T) {
let simpleChanges = this[PRIVATE_PREFIX];
if (!simpleChanges) {
simpleChanges = {};
// Place where we will store SimpleChanges if there is a change
Object.defineProperty(this, PRIVATE_PREFIX, {value: simpleChanges, writable: true});
}
const isFirstChange = !this.hasOwnProperty(privateMinKey);
const currentChange = simpleChanges[declaredName];
if (currentChange) {
currentChange.currentValue = value;
} else {
simpleChanges[declaredName] =
new SimpleChange(this[privateMinKey], value, isFirstChange);
}
if (isFirstChange) {
// Create a place where the actual value will be stored and make it non-enumerable
Object.defineProperty(this, privateMinKey, {value, writable: true});
} else {
this[privateMinKey] = value;
}
if (setter) setter.call(this, value);
}
});
}
}
// If an onInit hook is defined, it will need to wrap the ngOnChanges call
// so the call order is changes-init-check in creation mode. In subsequent
// change detection runs, only the check wrapper will be called.
if (definition.onInit != null) {
definition.onInit = onChangesWrapper(definition.onInit);
}
definition.doCheck = onChangesWrapper(definition.doCheck);
}
function onChangesWrapper(delegateHook: (() => void) | null) {
return function(this: OnChangesExpando) {
const simpleChanges = this[PRIVATE_PREFIX];
if (simpleChanges != null) {
this.ngOnChanges(simpleChanges);
this[PRIVATE_PREFIX] = null;
}
if (delegateHook) delegateHook.apply(this);
};
}

View File

@ -0,0 +1,19 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {diPublic} from '../di';
import {DirectiveDefInternal} from '../interfaces/definition';
/**
* This feature publishes the directive (or component) into the DI system, making it visible to
* others for injection.
*
* @param definition
*/
export function PublicFeature<T>(definition: DirectiveDefInternal<T>) {
definition.diPublic = diPublic;
}

View File

@ -7,9 +7,13 @@
*/
import {LifecycleHooksFeature, getHostElement, getRenderedText, renderComponent, whenRendered} from './component';
import {NgOnChangesFeature, PublicFeature, defineComponent, defineDirective, defineNgModule, definePipe} from './definition';
import {defineComponent, defineDirective, defineNgModule, definePipe} from './definition';
import {InheritDefinitionFeature} from './features/inherit_definition_feature';
import {NgOnChangesFeature} from './features/ng_onchanges_feature';
import {PublicFeature} from './features/public_feature';
import {I18nExpInstruction, I18nInstruction, i18nExpMapping, i18nInterpolation, i18nInterpolationV} from './i18n';
import {ComponentDefInternal, ComponentTemplate, ComponentType, DirectiveDefFlags, DirectiveDefInternal, DirectiveType, PipeDef} from './interfaces/definition';
export {ComponentFactory, ComponentFactoryResolver, ComponentRef} from './component_ref';
export {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, directiveInject, injectAttribute, injectChangeDetectorRef, injectElementRef, injectTemplateRef, injectViewContainerRef} from './di';
export {RenderFlags} from './interfaces/definition';
@ -133,6 +137,7 @@ export {
DirectiveDefFlags,
DirectiveType,
NgOnChangesFeature,
InheritDefinitionFeature,
PublicFeature,
PipeDef,
LifecycleHooksFeature,

View File

@ -96,6 +96,12 @@ export interface DirectiveDef<T, Selector extends string> {
*/
readonly inputs: {[P in keyof T]: P};
/**
* @deprecated This is only here because `NgOnChanges` incorrectly uses declared name instead of
* public or minified name.
*/
readonly declaredInputs: {[P in keyof T]: P};
/**
* A dictionary mapping the outputs' minified property names to their public API names, which
* are their aliases if any, or their original unminified property names
@ -135,6 +141,11 @@ export interface DirectiveDef<T, Selector extends string> {
afterViewInit: (() => void)|null;
afterViewChecked: (() => void)|null;
onDestroy: (() => void)|null;
/**
* The features applied to this directive
*/
features: DirectiveDefFeature[]|null;
}
/**

View File

@ -121,6 +121,10 @@ export function compileDirective(type: Type<any>, directive: Directive): void {
}
export function extendsDirectlyFromObject(type: Type<any>): boolean {
return Object.getPrototypeOf(type.prototype) === Object.prototype;
}
/**
* Extract the `R3DirectiveMetadata` for a particular directive (either a `Directive` or a
* `Component`).
@ -136,14 +140,16 @@ function directiveMetadata(type: Type<any>, metadata: Directive): R3DirectiveMet
const inputsFromType: StringMap = {};
const outputsFromType: StringMap = {};
for (let field in propMetadata) {
propMetadata[field].forEach(ann => {
if (isInput(ann)) {
inputsFromType[field] = ann.bindingPropertyName || field;
} else if (isOutput(ann)) {
outputsFromType[field] = ann.bindingPropertyName || field;
}
});
for (const field in propMetadata) {
if (propMetadata.hasOwnProperty(field)) {
propMetadata[field].forEach(ann => {
if (isInput(ann)) {
inputsFromType[field] = ann.bindingPropertyName || field;
} else if (isOutput(ann)) {
outputsFromType[field] = ann.bindingPropertyName || field;
}
});
}
}
return {
@ -158,6 +164,7 @@ function directiveMetadata(type: Type<any>, metadata: Directive): R3DirectiveMet
usesOnChanges: type.prototype.ngOnChanges !== undefined,
},
typeSourceSpan: null !,
usesInheritance: !extendsDirectlyFromObject(type),
};
}
@ -174,14 +181,16 @@ function extractHostBindings(metadata: Directive, propMetadata: {[key: string]:
}
// Next, loop over the properties of the object, looking for @HostBinding and @HostListener.
for (let field in propMetadata) {
propMetadata[field].forEach(ann => {
if (isHostBinding(ann)) {
properties[ann.hostPropertyName || field] = field;
} else if (isHostListener(ann)) {
listeners[ann.eventName || field] = `${field}(${(ann.args || []).join(',')})`;
}
});
for (const field in propMetadata) {
if (propMetadata.hasOwnProperty(field)) {
propMetadata[field].forEach(ann => {
if (isHostBinding(ann)) {
properties[ann.hostPropertyName || field] = field;
} else if (isHostListener(ann)) {
listeners[ann.eventName || field] = `${field}(${(ann.args || []).join(',')})`;
}
});
}
}
return {attributes, listeners, properties};

View File

@ -31,6 +31,7 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵinjectTemplateRef': r3.injectTemplateRef,
'ɵinjectViewContainerRef': r3.injectViewContainerRef,
'ɵNgOnChangesFeature': r3.NgOnChangesFeature,
'ɵInheritDefinitionFeature': r3.InheritDefinitionFeature,
'ɵa': r3.a,
'ɵb': r3.b,
'ɵC': r3.C,

View File

@ -8,8 +8,8 @@
import '@angular/core/test/bundling/util/src/reflect_metadata';
import {CommonModule, NgForOf, NgIf} from '@angular/common';
import {Component, Injectable, IterableDiffers, NgModule, defineInjector, ɵNgOnChangesFeature as NgOnChangesFeature, ɵdefineDirective as defineDirective, ɵdirectiveInject as directiveInject, ɵinjectTemplateRef as injectTemplateRef, ɵinjectViewContainerRef as injectViewContainerRef, ɵrenderComponent as renderComponent} from '@angular/core';
import {CommonModule} from '@angular/common';
import {Component, Injectable, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
class Todo {
editing: boolean;
@ -63,32 +63,32 @@ class TodoStore {
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus=""
[value]="newTodoText"
<input class="new-todo" placeholder="What needs to be done?" autofocus=""
[value]="newTodoText"
(keyup)="$event.code == 'Enter' ? addTodo() : newTodoText = $event.target.value">
</header>
<section *ngIf="todoStore.todos.length > 0" class="main">
<input *ngIf="todoStore.todos.length"
#toggleall class="toggle-all" type="checkbox"
[checked]="todoStore.allCompleted()"
<input *ngIf="todoStore.todos.length"
#toggleall class="toggle-all" type="checkbox"
[checked]="todoStore.allCompleted()"
(click)="todoStore.setAllTo(toggleall.checked)">
<ul class="todo-list">
<li *ngFor="let todo of todoStore.todos"
[class.completed]="todo.completed"
<li *ngFor="let todo of todoStore.todos"
[class.completed]="todo.completed"
[class.editing]="todo.editing">
<div class="view">
<input class="toggle" type="checkbox"
(click)="toggleCompletion(todo)"
<input class="toggle" type="checkbox"
(click)="toggleCompletion(todo)"
[checked]="todo.completed">
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" (click)="remove(todo)"></button>
</div>
<input *ngIf="todo.editing"
<input *ngIf="todo.editing"
class="edit" #editedtodo
[value]="todo.title"
[value]="todo.title"
(blur)="stopEditing(todo, editedtodo.value)"
(keyup)="todo.title = $event.target.value"
(keyup)="$event.code == 'Enter' && updateEditingTodo(todo, editedtodo.value)"
(keyup)="todo.title = $event.target.value"
(keyup)="$event.code == 'Enter' && updateEditingTodo(todo, editedtodo.value)"
(keyup)="$event.code == 'Escape' && cancelEditingTodo(todo)">
</li>
</ul>
@ -98,8 +98,8 @@ class TodoStore {
<strong>{{todoStore.getRemaining().length}}</strong>
{{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left
</span>
<button *ngIf="todoStore.getCompleted().length > 0"
class="clear-completed"
<button *ngIf="todoStore.getCompleted().length > 0"
class="clear-completed"
(click)="removeCompleted()">
Clear completed
</button>

View File

@ -0,0 +1,238 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {DoCheck, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges} from '../../src/core';
import {InheritDefinitionFeature} from '../../src/render3/features/inherit_definition_feature';
import {DirectiveDefInternal, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
describe('InheritDefinitionFeature', () => {
it('should inherit lifecycle hooks', () => {
class SuperDirective {
ngOnInit() {}
ngOnDestroy() {}
ngAfterContentInit() {}
ngAfterContentChecked() {}
ngAfterViewInit() {}
ngAfterViewChecked() {}
ngDoCheck() {}
}
class SubDirective extends SuperDirective {
ngAfterViewInit() {}
ngAfterViewChecked() {}
ngDoCheck() {}
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
});
}
const finalDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
expect(finalDef.onInit).toBe(SuperDirective.prototype.ngOnInit);
expect(finalDef.onDestroy).toBe(SuperDirective.prototype.ngOnDestroy);
expect(finalDef.afterContentChecked).toBe(SuperDirective.prototype.ngAfterContentChecked);
expect(finalDef.afterContentInit).toBe(SuperDirective.prototype.ngAfterContentInit);
expect(finalDef.afterViewChecked).toBe(SubDirective.prototype.ngAfterViewChecked);
expect(finalDef.afterViewInit).toBe(SubDirective.prototype.ngAfterViewInit);
expect(finalDef.doCheck).toBe(SubDirective.prototype.ngDoCheck);
});
it('should inherit inputs', () => {
// tslint:disable-next-line:class-as-namespace
class SuperDirective {
static ngDirectiveDef = defineDirective({
inputs: {
superFoo: ['foo', 'declaredFoo'],
superBar: 'bar',
superBaz: 'baz',
},
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
});
}
// tslint:disable-next-line:class-as-namespace
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
type: SubDirective,
inputs: {
subBaz: 'baz',
subQux: 'qux',
},
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
});
}
const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
expect(subDef.inputs).toEqual({
foo: 'superFoo',
bar: 'superBar',
baz: 'subBaz',
qux: 'subQux',
});
expect(subDef.declaredInputs).toEqual({
declaredFoo: 'superFoo',
bar: 'superBar',
baz: 'subBaz',
qux: 'subQux',
});
});
it('should inherit outputs', () => {
// tslint:disable-next-line:class-as-namespace
class SuperDirective {
static ngDirectiveDef = defineDirective({
outputs: {
superFoo: 'foo',
superBar: 'bar',
superBaz: 'baz',
},
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
});
}
// tslint:disable-next-line:class-as-namespace
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
type: SubDirective,
outputs: {
subBaz: 'baz',
subQux: 'qux',
},
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
});
}
const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
expect(subDef.outputs).toEqual({
foo: 'superFoo',
bar: 'superBar',
baz: 'subBaz',
qux: 'subQux',
});
});
it('should compose hostBindings', () => {
const log: Array<[string, number, number]> = [];
// tslint:disable-next-line:class-as-namespace
class SuperDirective {
static ngDirectiveDef = defineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
hostBindings: (directiveIndex: number, elementIndex: number) => {
log.push(['super', directiveIndex, elementIndex]);
},
factory: () => new SuperDirective(),
});
}
// tslint:disable-next-line:class-as-namespace
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
hostBindings: (directiveIndex: number, elementIndex: number) => {
log.push(['sub', directiveIndex, elementIndex]);
},
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
});
}
const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
subDef.hostBindings !(1, 2);
expect(log).toEqual([['super', 1, 2], ['sub', 1, 2]]);
});
it('should throw if inheriting a component from a directive', () => {
// tslint:disable-next-line:class-as-namespace
class SuperComponent {
static ngComponentDef = defineComponent({
type: SuperComponent,
template: () => {},
selectors: [['', 'superDir', '']],
factory: () => new SuperComponent()
});
}
expect(() => {
// tslint:disable-next-line:class-as-namespace
class SubDirective extends SuperComponent{static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
});}
}).toThrowError('Directives cannot inherit Components');
});
it('should run inherited features', () => {
const log: any[] = [];
// tslint:disable-next-line:class-as-namespace
class SuperDirective {
static ngDirectiveDef = defineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
features: [
(arg: any) => { log.push('super1', arg); },
(arg: any) => { log.push('super2', arg); },
]
});
}
class SubDirective extends SuperDirective {
@Output()
baz = new EventEmitter();
@Output()
qux = new EventEmitter();
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature, (arg: any) => { log.push('sub1', arg); }]
});
}
const superDef = SuperDirective.ngDirectiveDef as DirectiveDefInternal<any>;
const subDef = SubDirective.ngDirectiveDef as DirectiveDefInternal<any>;
expect(log).toEqual([
'super1',
superDef,
'super2',
superDef,
'super1',
subDef,
'super2',
subDef,
'sub1',
subDef,
]);
});
});

View File

@ -38,8 +38,7 @@ NgForOf.ngDirectiveDef = defineDirective({
type: NgTemplateOutletDef,
selectors: [['', 'ngTemplateOutlet', '']],
factory: () => new NgTemplateOutletDef(injectViewContainerRef()),
features: [NgOnChangesFeature(
{ngTemplateOutlet: 'ngTemplateOutlet', ngTemplateOutletContext: 'ngTemplateOutletContext'})],
features: [NgOnChangesFeature],
inputs:
{ngTemplateOutlet: 'ngTemplateOutlet', ngTemplateOutletContext: 'ngTemplateOutletContext'}
});

View File

@ -47,8 +47,8 @@ describe('lifecycle hooks', () => {
selectors: [['lifecycle-comp']],
factory: function LifecycleComp_Factory() { return new LifecycleComp(); },
template: function LifecycleComp_Template(rf: $RenderFlags$, ctx: $LifecycleComp$) {},
inputs: {nameMin: 'name'},
features: [$r3$.ɵNgOnChangesFeature({nameMin: 'nameMin'})]
inputs: {nameMin: ['name', 'nameMin']},
features: [$r3$.ɵNgOnChangesFeature]
});
// /NORMATIVE
}

View File

@ -72,7 +72,7 @@ describe('template variables', () => {
return new ForOfDirective($r3$.ɵinjectViewContainerRef(), $r3$.ɵinjectTemplateRef());
},
// TODO(chuckj): Enable when ngForOf enabling lands.
// features: [NgOnChangesFeature(NgForOf)],
// features: [NgOnChangesFeature],
inputs: {forOf: 'forOf'}
});
// /NORMATIVE

View File

@ -1,120 +0,0 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {DoCheck, OnChanges, SimpleChange, SimpleChanges} from '../../src/core';
import {DirectiveDefInternal, NgOnChangesFeature, defineDirective} from '../../src/render3/index';
describe('define', () => {
describe('component', () => {
describe('NgOnChangesFeature', () => {
it('should patch class', () => {
class MyDirective implements OnChanges, DoCheck {
public log: Array<string|SimpleChange> = [];
public valA: string = 'initValue';
public set valB(value: string) { this.log.push(value); }
public get valB() { return 'works'; }
ngDoCheck(): void { this.log.push('ngDoCheck'); }
ngOnChanges(changes: SimpleChanges): void {
this.log.push('ngOnChanges');
this.log.push('valA', changes['valA']);
this.log.push('valB', changes['valB']);
}
static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDir', '']],
factory: () => new MyDirective(),
features: [NgOnChangesFeature()],
inputs: {valA: 'valA', valB: 'valB'}
});
}
const myDir = (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>)
.factory() as MyDirective;
myDir.valA = 'first';
expect(myDir.valA).toEqual('first');
myDir.valB = 'second';
expect(myDir.log).toEqual(['second']);
expect(myDir.valB).toEqual('works');
myDir.log.length = 0;
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeA = new SimpleChange(undefined, 'first', true);
const changeB = new SimpleChange(undefined, 'second', true);
expect(myDir.log).toEqual(['ngOnChanges', 'valA', changeA, 'valB', changeB, 'ngDoCheck']);
});
it('correctly computes firstChange', () => {
class MyDirective implements OnChanges {
public log: Array<string|SimpleChange> = [];
public valA: string = 'initValue';
// TODO(issue/24571): remove '!'.
public valB !: string;
ngOnChanges(changes: SimpleChanges): void {
this.log.push('valA', changes['valA']);
this.log.push('valB', changes['valB']);
}
static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDir', '']],
factory: () => new MyDirective(),
features: [NgOnChangesFeature()],
inputs: {valA: 'valA', valB: 'valB'}
});
}
const myDir = (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>)
.factory() as MyDirective;
myDir.valA = 'first';
myDir.valB = 'second';
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeA1 = new SimpleChange(undefined, 'first', true);
const changeB1 = new SimpleChange(undefined, 'second', true);
expect(myDir.log).toEqual(['valA', changeA1, 'valB', changeB1]);
myDir.log.length = 0;
myDir.valA = 'third';
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeA2 = new SimpleChange('first', 'third', false);
expect(myDir.log).toEqual(['valA', changeA2, 'valB', undefined]);
});
it('should not create a getter when only a setter is originally defined', () => {
class MyDirective implements OnChanges {
public log: Array<string|SimpleChange> = [];
public set onlySetter(value: string) { this.log.push(value); }
ngOnChanges(changes: SimpleChanges): void {
this.log.push('ngOnChanges');
this.log.push('onlySetter', changes['onlySetter']);
}
static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDir', '']],
factory: () => new MyDirective(),
features: [NgOnChangesFeature()],
inputs: {onlySetter: 'onlySetter'}
});
}
const myDir = (MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>)
.factory() as MyDirective;
myDir.onlySetter = 'someValue';
expect(myDir.onlySetter).toBeUndefined();
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeSetter = new SimpleChange(undefined, 'someValue', true);
expect(myDir.log).toEqual(['someValue', 'ngOnChanges', 'onlySetter', changeSetter]);
});
});
});
});

View File

@ -995,7 +995,7 @@ describe('di', () => {
selectors: [['', 'myIf', '']],
factory: () => new IfDirective(injectTemplateRef(), injectViewContainerRef()),
inputs: {myIf: 'myIf'},
features: [PublicFeature, NgOnChangesFeature()]
features: [PublicFeature, NgOnChangesFeature]
});
}

View File

@ -0,0 +1,39 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {extendsDirectlyFromObject} from '../../../src/render3/jit/directive';
describe('extendsDirectlyFromObject', () => {
it('should correctly behave with instanceof', () => {
expect(new Child() instanceof Object).toBeTruthy();
expect(new Child() instanceof Parent).toBeTruthy();
expect(new Parent() instanceof Child).toBeFalsy();
expect(new Child5() instanceof Object).toBeTruthy();
expect(new Child5() instanceof Parent5).toBeTruthy();
expect(new Parent5() instanceof Child5).toBeFalsy();
});
it('should detect direct inheritance form Object', () => {
expect(extendsDirectlyFromObject(Parent)).toBeTruthy();
expect(extendsDirectlyFromObject(Child)).toBeFalsy();
expect(extendsDirectlyFromObject(Parent5)).toBeTruthy();
expect(extendsDirectlyFromObject(Child5)).toBeFalsy();
});
});
// Inheritance Example using Classes
class Parent {}
class Child extends Parent {}
// Inheritance Example using Function
const Parent5 = function Parent5() {} as any as{new (): {}};
const Child5 = function Child5() {} as any as{new (): {}};
Child5.prototype = new Parent5;
Child5.prototype.constructor = Child5;

View File

@ -1932,8 +1932,8 @@ describe('lifecycles', () => {
type: Component,
selectors: [[name]],
factory: () => new Component(),
features: [NgOnChangesFeature({b: 'val2'})],
inputs: {a: 'val1', b: 'publicName'}, template,
features: [NgOnChangesFeature],
inputs: {a: 'val1', b: ['publicName', 'val2']}, template,
directives: directives
});
};
@ -1953,8 +1953,8 @@ describe('lifecycles', () => {
type: Directive,
selectors: [['', 'dir', '']],
factory: () => new Directive(),
features: [NgOnChangesFeature({b: 'val2'})],
inputs: {a: 'val1', b: 'publicName'}
features: [NgOnChangesFeature],
inputs: {a: 'val1', b: ['publicName', 'val2']}
});
}
@ -1976,11 +1976,10 @@ describe('lifecycles', () => {
renderToHtml(Template, {val1: '1', val2: 'a'}, defs);
expect(events).toEqual(['comp=comp val1=1 val2=a - changed=[val1,val2]']);
events.length = 0;
renderToHtml(Template, {val1: '2', val2: 'b'}, defs);
expect(events).toEqual([
'comp=comp val1=1 val2=a - changed=[val1,val2]',
'comp=comp val1=2 val2=b - changed=[val1,val2]'
]);
expect(events).toEqual(['comp=comp val1=2 val2=b - changed=[val1,val2]']);
});
it('should call parent onChanges before child onChanges', () => {
@ -2336,7 +2335,7 @@ describe('lifecycles', () => {
selectors: [[name]],
factory: () => new Component(),
inputs: {val: 'val'}, template,
features: [NgOnChangesFeature()],
features: [NgOnChangesFeature],
directives: directives
});
};

View File

@ -0,0 +1,325 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {DoCheck, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges} from '../../src/core';
import {InheritDefinitionFeature} from '../../src/render3/features/inherit_definition_feature';
import {DirectiveDefInternal, NgOnChangesFeature, defineComponent, defineDirective} from '../../src/render3/index';
describe('NgOnChangesFeature', () => {
it('should patch class', () => {
class MyDirective implements OnChanges, DoCheck {
public log: Array<string|SimpleChange> = [];
public valA: string = 'initValue';
public set valB(value: string) { this.log.push(value); }
public get valB() { return 'works'; }
ngDoCheck(): void { this.log.push('ngDoCheck'); }
ngOnChanges(changes: SimpleChanges): void {
this.log.push('ngOnChanges');
this.log.push('valA', changes['valA']);
this.log.push('valB', changes['valB']);
}
static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDir', '']],
factory: () => new MyDirective(),
features: [NgOnChangesFeature],
inputs: {valA: 'valA', valB: 'valB'}
});
}
const myDir =
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).factory() as MyDirective;
myDir.valA = 'first';
expect(myDir.valA).toEqual('first');
myDir.valB = 'second';
expect(myDir.log).toEqual(['second']);
expect(myDir.valB).toEqual('works');
myDir.log.length = 0;
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeA = new SimpleChange(undefined, 'first', true);
const changeB = new SimpleChange(undefined, 'second', true);
expect(myDir.log).toEqual(['ngOnChanges', 'valA', changeA, 'valB', changeB, 'ngDoCheck']);
});
it('should inherit the behavior from super class', () => {
const log: any[] = [];
class SuperDirective implements OnChanges, DoCheck {
valA = 'initValue';
set valB(value: string) { log.push(value); }
get valB() { return 'works'; }
ngDoCheck(): void { log.push('ngDoCheck'); }
ngOnChanges(changes: SimpleChanges): void {
log.push('ngOnChanges');
log.push('valA', changes['valA']);
log.push('valB', changes['valB']);
log.push('valC', changes['valC']);
}
static ngDirectiveDef = defineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
features: [NgOnChangesFeature],
inputs: {valA: 'valA', valB: 'valB'},
});
}
class SubDirective extends SuperDirective {
valC = 'initValue';
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature],
inputs: {valC: 'valC'},
});
}
const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
.factory() as SubDirective;
myDir.valA = 'first';
expect(myDir.valA).toEqual('first');
myDir.valB = 'second';
expect(myDir.valB).toEqual('works');
myDir.valC = 'third';
expect(myDir.valC).toEqual('third');
log.length = 0;
(SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
const changeA = new SimpleChange(undefined, 'first', true);
const changeB = new SimpleChange(undefined, 'second', true);
const changeC = new SimpleChange(undefined, 'third', true);
expect(log).toEqual(
['ngOnChanges', 'valA', changeA, 'valB', changeB, 'valC', changeC, 'ngDoCheck']);
});
it('should not run the parent doCheck if it is not called explicitly on super class', () => {
const log: any[] = [];
class SuperDirective implements OnChanges, DoCheck {
valA = 'initValue';
ngDoCheck(): void { log.push('ERROR: Child overrides it without super call'); }
ngOnChanges(changes: SimpleChanges): void { log.push(changes.valA, changes.valB); }
static ngDirectiveDef = defineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
features: [NgOnChangesFeature],
inputs: {valA: 'valA'},
});
}
class SubDirective extends SuperDirective implements DoCheck {
valB = 'initValue';
ngDoCheck(): void { log.push('sub ngDoCheck'); }
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature],
inputs: {valB: 'valB'},
});
}
const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
.factory() as SubDirective;
myDir.valA = 'first';
myDir.valB = 'second';
(SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
const changeA = new SimpleChange(undefined, 'first', true);
const changeB = new SimpleChange(undefined, 'second', true);
expect(log).toEqual([changeA, changeB, 'sub ngDoCheck']);
});
it('should run the parent doCheck if it is inherited from super class', () => {
const log: any[] = [];
class SuperDirective implements OnChanges, DoCheck {
valA = 'initValue';
ngDoCheck(): void { log.push('super ngDoCheck'); }
ngOnChanges(changes: SimpleChanges): void { log.push(changes.valA, changes.valB); }
static ngDirectiveDef = defineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
features: [NgOnChangesFeature],
inputs: {valA: 'valA'},
});
}
class SubDirective extends SuperDirective implements DoCheck {
valB = 'initValue';
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature],
inputs: {valB: 'valB'},
});
}
const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
.factory() as SubDirective;
myDir.valA = 'first';
myDir.valB = 'second';
(SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
const changeA = new SimpleChange(undefined, 'first', true);
const changeB = new SimpleChange(undefined, 'second', true);
expect(log).toEqual([changeA, changeB, 'super ngDoCheck']);
});
it('should apply the feature to inherited properties if on sub class', () => {
const log: any[] = [];
class SuperDirective {
valC = 'initValue';
static ngDirectiveDef = defineDirective({
type: SuperDirective,
selectors: [['', 'subDir', '']],
factory: () => new SuperDirective(),
features: [],
inputs: {valC: 'valC'},
});
}
class SubDirective extends SuperDirective implements OnChanges, DoCheck {
valA = 'initValue';
set valB(value: string) { log.push(value); }
get valB() { return 'works'; }
ngDoCheck(): void { log.push('ngDoCheck'); }
ngOnChanges(changes: SimpleChanges): void {
log.push('ngOnChanges');
log.push('valA', changes['valA']);
log.push('valB', changes['valB']);
log.push('valC', changes['valC']);
}
static ngDirectiveDef = defineDirective({
type: SubDirective,
selectors: [['', 'superDir', '']],
factory: () => new SubDirective(),
// Inheritance must always be before OnChanges feature.
features: [
InheritDefinitionFeature,
NgOnChangesFeature,
],
inputs: {valA: 'valA', valB: 'valB'}
});
}
const myDir = (SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>)
.factory() as SubDirective;
myDir.valA = 'first';
expect(myDir.valA).toEqual('first');
myDir.valB = 'second';
expect(log).toEqual(['second']);
expect(myDir.valB).toEqual('works');
myDir.valC = 'third';
expect(myDir.valC).toEqual('third');
log.length = 0;
(SubDirective.ngDirectiveDef as DirectiveDefInternal<SubDirective>).doCheck !.call(myDir);
const changeA = new SimpleChange(undefined, 'first', true);
const changeB = new SimpleChange(undefined, 'second', true);
const changeC = new SimpleChange(undefined, 'third', true);
expect(log).toEqual(
['ngOnChanges', 'valA', changeA, 'valB', changeB, 'valC', changeC, 'ngDoCheck']);
});
it('correctly computes firstChange', () => {
class MyDirective implements OnChanges {
public log: Array<string|SimpleChange> = [];
public valA: string = 'initValue';
// TODO(issue/24571): remove '!'.
public valB !: string;
ngOnChanges(changes: SimpleChanges): void {
this.log.push('valA', changes['valA']);
this.log.push('valB', changes['valB']);
}
static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDir', '']],
factory: () => new MyDirective(),
features: [NgOnChangesFeature],
inputs: {valA: 'valA', valB: 'valB'}
});
}
const myDir =
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).factory() as MyDirective;
myDir.valA = 'first';
myDir.valB = 'second';
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeA1 = new SimpleChange(undefined, 'first', true);
const changeB1 = new SimpleChange(undefined, 'second', true);
expect(myDir.log).toEqual(['valA', changeA1, 'valB', changeB1]);
myDir.log.length = 0;
myDir.valA = 'third';
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeA2 = new SimpleChange('first', 'third', false);
expect(myDir.log).toEqual(['valA', changeA2, 'valB', undefined]);
});
it('should not create a getter when only a setter is originally defined', () => {
class MyDirective implements OnChanges {
public log: Array<string|SimpleChange> = [];
public set onlySetter(value: string) { this.log.push(value); }
ngOnChanges(changes: SimpleChanges): void {
this.log.push('ngOnChanges');
this.log.push('onlySetter', changes['onlySetter']);
}
static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDir', '']],
factory: () => new MyDirective(),
features: [NgOnChangesFeature],
inputs: {onlySetter: 'onlySetter'}
});
}
const myDir =
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).factory() as MyDirective;
myDir.onlySetter = 'someValue';
expect(myDir.onlySetter).toBeUndefined();
(MyDirective.ngDirectiveDef as DirectiveDefInternal<MyDirective>).doCheck !.call(myDir);
const changeSetter = new SimpleChange(undefined, 'someValue', true);
expect(myDir.log).toEqual(['someValue', 'ngOnChanges', 'onlySetter', changeSetter]);
});
});

View File

@ -11,7 +11,7 @@ import {stringifyElement} from '@angular/platform-browser/testing/src/browser_ut
import {Injector} from '../../src/di/injector';
import {CreateComponentOptions} from '../../src/render3/component';
import {extractDirectiveDef, extractPipeDef} from '../../src/render3/definition';
import {ComponentDefInternal, ComponentTemplate, ComponentType, DirectiveDefInternal, DirectiveType, PublicFeature, RenderFlags, defineComponent, defineDirective, renderComponent as _renderComponent, tick} from '../../src/render3/index';
import {ComponentTemplate, ComponentType, DirectiveDefInternal, DirectiveType, PublicFeature, RenderFlags, defineComponent, defineDirective, renderComponent as _renderComponent, tick} from '../../src/render3/index';
import {NG_HOST_SYMBOL, renderTemplate} from '../../src/render3/instructions';
import {DirectiveDefList, DirectiveDefListOrFactory, DirectiveTypesOrFactory, PipeDef, PipeDefList, PipeDefListOrFactory, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
import {LElementNode} from '../../src/render3/interfaces/node';

View File

@ -966,7 +966,7 @@ describe('ViewContainerRef', () => {
textBinding(0, interpolation1('', cmp.name, ''));
}
},
features: [NgOnChangesFeature()],
features: [NgOnChangesFeature],
inputs: {name: 'name'}
});
}