cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): added afterContentInit, afterViewInit, and afterViewChecked hooks

Browse Source 
Closes #3897
This commit is contained in:
vsavkin
2015-08-28 18:11:04 -07:00
committed by Victor Savkin
parent f93cd9ced7
commit d49bc438e8
36 changed files with 974 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
modules/angular2/src/core/change_detection/abstract_change_detector.ts
View File

@ -82,12 +82,19 @@ export class AbstractChangeDetector<T> implements ChangeDetector {
this.mode === ChangeDetectionStrategy.Checked)
return;
var s = _scope_check(this.id, throwOnChange);
this.detectChangesInRecords(throwOnChange);
this._detectChangesInLightDomChildren(throwOnChange);
if (throwOnChange === false) this.callAfterContentChecked();
if (!throwOnChange) this.afterContentLifecycleCallbacks();
this._detectChangesInShadowDomChildren(throwOnChange);
if (!throwOnChange) this.afterViewLifecycleCallbacks();
if (this.mode === ChangeDetectionStrategy.CheckOnce)
this.mode = ChangeDetectionStrategy.Checked;
this.alreadyChecked = true;
wtfLeave(s);
}
@ -156,7 +163,19 @@ export class AbstractChangeDetector<T> implements ChangeDetector {
hydrated(): boolean { return this.context !== null; }
callAfterContentChecked(): void { this.dispatcher.notifyAfterContentChecked(); }
afterContentLifecycleCallbacks(): void {
this.dispatcher.notifyAfterContentChecked();
this.afterContentLifecycleCallbacksInternal();
}
afterContentLifecycleCallbacksInternal(): void {}
afterViewLifecycleCallbacks(): void {
this.dispatcher.notifyAfterViewChecked();
this.afterViewLifecycleCallbacksInternal();
}
afterViewLifecycleCallbacksInternal(): void {}
_detectChangesInLightDomChildren(throwOnChange: boolean): void {
var c = this.lightDomChildren;

41
modules/angular2/src/core/change_detection/change_detection_jit_generator.ts
View File

@ -63,23 +63,23 @@ export class ChangeDetectorJITGenerator {
var ${CHANGES_LOCAL} = null;
${this.records.map((r) => this._genRecord(r)).join("\n")}
${this._names.getAlreadyCheckedName()} = true;
}
${this._maybeGenHandleEventInternal()}
${this._genCheckNoChanges()}
${this._maybeGenCallAfterContentChecked()}
${this._maybeGenAfterContentLifecycleCallbacks()}
${this._maybeGenAfterViewLifecycleCallbacks()}
${this._maybeGenHydrateDirectives()}
${this._maybeGenDehydrateDirectives()}
${this._genPropertyBindingTargets()};
${this._genPropertyBindingTargets()}
${this._genDirectiveIndices()};
${this._genDirectiveIndices()}
return function(dispatcher) {
return new ${this._typeName}(dispatcher);
@ -172,23 +172,26 @@ export class ChangeDetectorJITGenerator {
}`;
}
_maybeGenCallAfterContentChecked(): string {
var notifications = [];
var dirs = this.directiveRecords;
// NOTE(kegluneq): Order is important!
for (var i = dirs.length - 1; i >= 0; --i) {
var dir = dirs[i];
if (dir.callAfterContentChecked) {
notifications.push(
`${this._names.getDirectiveName(dir.directiveIndex)}.afterContentChecked();`);
}
}
_maybeGenAfterContentLifecycleCallbacks(): string {
var notifications = this._logic.genContentLifecycleCallbacks(this.directiveRecords);
if (notifications.length > 0) {
var directiveNotifications = notifications.join("\n");
return `
${this._typeName}.prototype.callAfterContentChecked = function() {
${ABSTRACT_CHANGE_DETECTOR}.prototype.callAfterContentChecked.call(this);
${this._typeName}.prototype.afterContentLifecycleCallbacksInternal = function() {
${directiveNotifications}
}
`;
} else {
return '';
}
}
_maybeGenAfterViewLifecycleCallbacks(): string {
var notifications = this._logic.genViewLifecycleCallbacks(this.directiveRecords);
if (notifications.length > 0) {
var directiveNotifications = notifications.join("\n");
return `
${this._typeName}.prototype.afterViewLifecycleCallbacksInternal = function() {
${directiveNotifications}
}
`;

34
modules/angular2/src/core/change_detection/codegen_logic_util.ts
View File

@ -183,4 +183,38 @@ export class CodegenLogicUtil {
}
return res.join("\n");
}
genContentLifecycleCallbacks(directiveRecords: DirectiveRecord[]): string[] {
var res = [];
// NOTE(kegluneq): Order is important!
for (var i = directiveRecords.length - 1; i >= 0; --i) {
var dir = directiveRecords[i];
if (dir.callAfterContentInit) {
res.push(
`if(! ${this._names.getAlreadyCheckedName()}) ${this._names.getDirectiveName(dir.directiveIndex)}.afterContentInit();`);
}
if (dir.callAfterContentChecked) {
res.push(`${this._names.getDirectiveName(dir.directiveIndex)}.afterContentChecked();`);
}
}
return res;
}
genViewLifecycleCallbacks(directiveRecords: DirectiveRecord[]): string[] {
var res = [];
// NOTE(kegluneq): Order is important!
for (var i = directiveRecords.length - 1; i >= 0; --i) {
var dir = directiveRecords[i];
if (dir.callAfterViewInit) {
res.push(
`if(! ${this._names.getAlreadyCheckedName()}) ${this._names.getDirectiveName(dir.directiveIndex)}.afterViewInit();`);
}
if (dir.callAfterViewChecked) {
res.push(`${this._names.getDirectiveName(dir.directiveIndex)}.afterViewChecked();`);
}
}
return res;
}
}

13
modules/angular2/src/core/change_detection/directive_record.ts
View File

@ -9,24 +9,33 @@ export class DirectiveIndex {
export class DirectiveRecord {
directiveIndex: DirectiveIndex;
callAfterContentInit: boolean;
callAfterContentChecked: boolean;
callAfterViewInit: boolean;
callAfterViewChecked: boolean;
callOnChanges: boolean;
callDoCheck: boolean;
callOnInit: boolean;
changeDetection: ChangeDetectionStrategy;
constructor({directiveIndex, callAfterContentChecked, callOnChanges, callDoCheck, callOnInit,
changeDetection}: {
constructor({directiveIndex, callAfterContentInit, callAfterContentChecked, callAfterViewInit,
callAfterViewChecked, callOnChanges, callDoCheck, callOnInit, changeDetection}: {
directiveIndex?: DirectiveIndex,
callAfterContentInit?: boolean,
callAfterContentChecked?: boolean,
callAfterViewInit?: boolean,
callAfterViewChecked?: boolean,
callOnChanges?: boolean,
callDoCheck?: boolean,
callOnInit?: boolean,
changeDetection?: ChangeDetectionStrategy
} = {}) {
this.directiveIndex = directiveIndex;
this.callAfterContentInit = normalizeBool(callAfterContentInit);
this.callAfterContentChecked = normalizeBool(callAfterContentChecked);
this.callOnChanges = normalizeBool(callOnChanges);
this.callAfterViewInit = normalizeBool(callAfterViewInit);
this.callAfterViewChecked = normalizeBool(callAfterViewChecked);
this.callDoCheck = normalizeBool(callDoCheck);
this.callOnInit = normalizeBool(callOnInit);
this.changeDetection = changeDetection;

22
modules/angular2/src/core/change_detection/dynamic_change_detector.ts
View File

@ -159,8 +159,6 @@ export class DynamicChangeDetector extends AbstractChangeDetector<any> {
isChanged = false;
}
}
this.alreadyChecked = true;
}
_firstInBinding(r: ProtoRecord): boolean {
@ -168,17 +166,33 @@ export class DynamicChangeDetector extends AbstractChangeDetector<any> {
return isBlank(prev) || prev.bindingRecord !== r.bindingRecord;
}
callAfterContentChecked() {
super.callAfterContentChecked();
afterContentLifecycleCallbacksInternal() {
var dirs = this.directiveRecords;
for (var i = dirs.length - 1; i >= 0; --i) {
var dir = dirs[i];
if (dir.callAfterContentInit && !this.alreadyChecked) {
this._getDirectiveFor(dir.directiveIndex).afterContentInit();
}
if (dir.callAfterContentChecked) {
this._getDirectiveFor(dir.directiveIndex).afterContentChecked();
}
}
}
afterViewLifecycleCallbacksInternal() {
var dirs = this.directiveRecords;
for (var i = dirs.length - 1; i >= 0; --i) {
var dir = dirs[i];
if (dir.callAfterViewInit && !this.alreadyChecked) {
this._getDirectiveFor(dir.directiveIndex).afterViewInit();
}
if (dir.callAfterViewChecked) {
this._getDirectiveFor(dir.directiveIndex).afterViewChecked();
}
}
}
_updateDirectiveOrElement(change, bindingRecord) {
if (isBlank(bindingRecord.directiveRecord)) {
super.notifyDispatcher(change.currentValue);

1
modules/angular2/src/core/change_detection/interfaces.ts
View File

@ -52,6 +52,7 @@ export interface ChangeDispatcher {
notifyOnBinding(bindingTarget: BindingTarget, value: any): void;
logBindingUpdate(bindingTarget: BindingTarget, value: any): void;
notifyAfterContentChecked(): void;
notifyAfterViewChecked(): void;
}
export interface ChangeDetector {

6
modules/angular2/src/core/compiler/directive_lifecycle_reflector.dart
View File

@ -17,8 +17,14 @@ bool hasLifecycleHook(LifecycleEvent e, type, DirectiveMetadata annotation) {
interface = OnChanges;
} else if (e == LifecycleEvent.OnDestroy) {
interface = OnDestroy;
} else if (e == LifecycleEvent.AfterContentInit) {
interface = AfterContentInit;
} else if (e == LifecycleEvent.AfterContentChecked) {
interface = AfterContentChecked;
} else if (e == LifecycleEvent.AfterViewInit) {
interface = AfterViewInit;
} else if (e == LifecycleEvent.AfterViewChecked) {
interface = AfterViewChecked;
} else if (e == LifecycleEvent.DoCheck) {
interface = DoCheck;
} else if (e == LifecycleEvent.OnInit) {

6
modules/angular2/src/core/compiler/directive_lifecycle_reflector.ts
View File

@ -8,8 +8,14 @@ export function hasLifecycleHook(e: LifecycleEvent, type, annotation: DirectiveM
if (!(type instanceof Type)) return false;
var proto = (<any>type).prototype;
switch (e) {
case LifecycleEvent.AfterContentInit:
return !!proto.afterContentInit;
case LifecycleEvent.AfterContentChecked:
return !!proto.afterContentChecked;
case LifecycleEvent.AfterViewInit:
return !!proto.afterViewInit;
case LifecycleEvent.AfterViewChecked:
return !!proto.afterViewChecked;
case LifecycleEvent.OnChanges:
return !!proto.onChanges;
case LifecycleEvent.DoCheck:

43
modules/angular2/src/core/compiler/element_injector.ts
View File

@ -216,38 +216,41 @@ export class DirectiveBinding extends ResolvedBinding {
get changeDetection() { return this.metadata.changeDetection; }
static createFromBinding(binding: Binding, ann: DirectiveMetadata): DirectiveBinding {
if (isBlank(ann)) {
ann = new DirectiveMetadata();
static createFromBinding(binding: Binding, meta: DirectiveMetadata): DirectiveBinding {
if (isBlank(meta)) {
meta = new DirectiveMetadata();
}
var rb = binding.resolve();
var deps = ListWrapper.map(rb.dependencies, DirectiveDependency.createFrom);
var resolvedBindings = isPresent(ann.bindings) ? Injector.resolve(ann.bindings) : [];
var resolvedViewBindings = ann instanceof ComponentMetadata && isPresent(ann.viewBindings) ?
Injector.resolve(ann.viewBindings) :
var resolvedBindings = isPresent(meta.bindings) ? Injector.resolve(meta.bindings) : [];
var resolvedViewBindings = meta instanceof ComponentMetadata && isPresent(meta.viewBindings) ?
Injector.resolve(meta.viewBindings) :
[];
var metadata = RenderDirectiveMetadata.create({
id: stringify(rb.key.token),
type: ann instanceof ComponentMetadata ? RenderDirectiveMetadata.COMPONENT_TYPE :
RenderDirectiveMetadata.DIRECTIVE_TYPE,
selector: ann.selector,
compileChildren: ann.compileChildren,
events: ann.events,
host: isPresent(ann.host) ? MapWrapper.createFromStringMap(ann.host) : null,
properties: ann.properties,
type: meta instanceof ComponentMetadata ? RenderDirectiveMetadata.COMPONENT_TYPE :
RenderDirectiveMetadata.DIRECTIVE_TYPE,
selector: meta.selector,
compileChildren: meta.compileChildren,
events: meta.events,
host: isPresent(meta.host) ? MapWrapper.createFromStringMap(meta.host) : null,
properties: meta.properties,
readAttributes: DirectiveBinding._readAttributes(deps),
callOnDestroy: hasLifecycleHook(LifecycleEvent.OnDestroy, rb.key.token, ann),
callOnChanges: hasLifecycleHook(LifecycleEvent.OnChanges, rb.key.token, ann),
callDoCheck: hasLifecycleHook(LifecycleEvent.DoCheck, rb.key.token, ann),
callOnInit: hasLifecycleHook(LifecycleEvent.OnInit, rb.key.token, ann),
callOnDestroy: hasLifecycleHook(LifecycleEvent.OnDestroy, rb.key.token, meta),
callOnChanges: hasLifecycleHook(LifecycleEvent.OnChanges, rb.key.token, meta),
callDoCheck: hasLifecycleHook(LifecycleEvent.DoCheck, rb.key.token, meta),
callOnInit: hasLifecycleHook(LifecycleEvent.OnInit, rb.key.token, meta),
callAfterContentInit: hasLifecycleHook(LifecycleEvent.AfterContentInit, rb.key.token, meta),
callAfterContentChecked:
hasLifecycleHook(LifecycleEvent.AfterContentChecked, rb.key.token, ann),
hasLifecycleHook(LifecycleEvent.AfterContentChecked, rb.key.token, meta),
callAfterViewInit: hasLifecycleHook(LifecycleEvent.AfterViewInit, rb.key.token, meta),
callAfterViewChecked: hasLifecycleHook(LifecycleEvent.AfterViewChecked, rb.key.token, meta),
changeDetection: ann instanceof ComponentMetadata ? ann.changeDetection : null,
changeDetection: meta instanceof ComponentMetadata ? meta.changeDetection : null,
exportAs: ann.exportAs
exportAs: meta.exportAs
});
return new DirectiveBinding(rb.key, rb.factory, deps, resolvedBindings, resolvedViewBindings,
metadata);

23
modules/angular2/src/core/compiler/interfaces.ts
View File

@ -29,9 +29,30 @@ export interface DoCheck { doCheck(): boolean; }
*/
export interface OnDestroy { onDestroy(): void; }
/**
* Defines lifecycle method
* {@link metadata/LifeCycleEvent#AfterContentInit `LifeCycleEvent.afterContentInit`}
* called when the bindings of all its content children have been checked the first time.
*/
export interface AfterContentInit { afterContentInit(): void; }
/**
* Defines lifecycle method
* {@link metadata/LifeCycleEvent#AfterContentChecked `LifeCycleEvent.afterContentChecked`}
* called when the bindings of all its view children have been changed.
* called when the bindings of all its content children have been checked.
*/
export interface AfterContentChecked { afterContentChecked(): void; }
/**
* Defines lifecycle method
* {@link metadata/LifeCycleEvent#AfterViewInit `LifeCycleEvent.afterViewInit`}
* called when the bindings of all its view children have been checked the first time.
*/
export interface AfterViewInit { afterViewInit(): void; }
/**
* Defines lifecycle method
* {@link metadata/LifeCycleEvent#AfterViewChecked `LifeCycleEvent.afterViewChecked`}
* called when the bindings of all its view children have been checked.
*/
export interface AfterViewChecked { afterViewChecked(): void; }

3
modules/angular2/src/core/compiler/proto_view_factory.ts
View File

@ -191,7 +191,10 @@ export class BindingRecordsCreator {
this._directiveRecordsMap.set(
id, new DirectiveRecord({
directiveIndex: new DirectiveIndex(boundElementIndex, directiveIndex),
callAfterContentInit: directiveMetadata.callAfterContentInit,
callAfterContentChecked: directiveMetadata.callAfterContentChecked,
callAfterViewInit: directiveMetadata.callAfterViewInit,
callAfterViewChecked: directiveMetadata.callAfterViewChecked,
callOnChanges: directiveMetadata.callOnChanges,
callDoCheck: directiveMetadata.callDoCheck,
callOnInit: directiveMetadata.callOnInit,

4
modules/angular2/src/core/compiler/view.ts
View File

@ -212,6 +212,10 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
}
}
notifyAfterViewChecked(): void {
// required for query
}
getDirectiveFor(directive: DirectiveIndex): any {
var elementInjector = this.elementInjectors[this.elementOffset + directive.elementIndex];
return elementInjector.getDirectiveAtIndex(directive.directiveIndex);

70
modules/angular2/src/core/metadata/directives.ts
View File

@ -961,7 +961,30 @@ export enum LifecycleEvent {
DoCheck,
/**
* Notify a directive when the bindings of all its view children have been checked (whether they
* Notify a directive when the bindings of all its content children have been checked the first
* time (whether they
* have changed or not).
*
* ## Example
*
* ```
* @Directive({
* selector: '[class-set]',
* lifecycle: [LifecycleEvent.AfterContentInit]
* })
* class ClassSet {
*
* afterContentInit() {
* }
*
* }
* ```
*/
AfterContentInit,
/**
* Notify a directive when the bindings of all its content children have been checked (whether
* they
* have changed or not).
*
* ## Example
@ -979,7 +1002,50 @@ export enum LifecycleEvent {
* }
* ```
*/
AfterContentChecked
AfterContentChecked,
/**
* Notify a directive when the bindings of all its view children have been checked the first time
* (whether they
* have changed or not).
*
* ## Example
*
* ```
* @Directive({
* selector: '[class-set]',
* lifecycle: [LifecycleEvent.AfterViewInit]
* })
* class ClassSet {
*
* afterViewInit() {
* }
*
* }
* ```
*/
AfterViewInit,
/**
* Notify a directive when the bindings of all its view children have been checked (whether they
* have changed or not).
*
* ## Example
*
* ```
* @Directive({
* selector: '[class-set]',
* lifecycle: [LifecycleEvent.AfterViewChecked]
* })
* class ClassSet {
*
* afterViewChecked() {
* }
*
* }
* ```
*/
AfterViewChecked
}
/**

23
modules/angular2/src/core/render/api.ts
View File

@ -157,7 +157,10 @@ export class RenderDirectiveMetadata {
callOnChanges: boolean;
callDoCheck: boolean;
callOnInit: boolean;
callAfterContentInit: boolean;
callAfterContentChecked: boolean;
callAfterViewInit: boolean;
callAfterViewChecked: boolean;
changeDetection: ChangeDetectionStrategy;
exportAs: string;
hostListeners: Map<string, string>;
@ -169,7 +172,8 @@ export class RenderDirectiveMetadata {
constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
properties, readAttributes, type, callOnDestroy, callOnChanges, callDoCheck,
callOnInit, callAfterContentChecked, changeDetection, exportAs}: {
callOnInit, callAfterContentInit, callAfterContentChecked, callAfterViewInit,
callAfterViewChecked, changeDetection, exportAs}: {
id?: string,
selector?: string,
compileChildren?: boolean,
@ -184,7 +188,10 @@ export class RenderDirectiveMetadata {
callOnChanges?: boolean,
callDoCheck?: boolean,
callOnInit?: boolean,
callAfterContentInit?: boolean,
callAfterContentChecked?: boolean,
callAfterViewInit?: boolean,
callAfterViewChecked?: boolean,
changeDetection?: ChangeDetectionStrategy,
exportAs?: string
}) {
@ -202,14 +209,18 @@ export class RenderDirectiveMetadata {
this.callOnChanges = callOnChanges;
this.callDoCheck = callDoCheck;
this.callOnInit = callOnInit;
this.callAfterContentInit = callAfterContentInit;
this.callAfterContentChecked = callAfterContentChecked;
this.callAfterViewInit = callAfterViewInit;
this.callAfterViewChecked = callAfterViewChecked;
this.changeDetection = changeDetection;
this.exportAs = exportAs;
}
static create({id, selector, compileChildren, events, host, properties, readAttributes, type,
callOnDestroy, callOnChanges, callDoCheck, callOnInit, callAfterContentChecked,
changeDetection, exportAs}: {
callOnDestroy, callOnChanges, callDoCheck, callOnInit, callAfterContentInit,
callAfterContentChecked, callAfterViewInit, callAfterViewChecked, changeDetection,
exportAs}: {
id?: string,
selector?: string,
compileChildren?: boolean,
@ -222,7 +233,10 @@ export class RenderDirectiveMetadata {
callOnChanges?: boolean,
callDoCheck?: boolean,
callOnInit?: boolean,
callAfterContentInit?: boolean,
callAfterContentChecked?: boolean,
callAfterViewInit?: boolean,
callAfterViewChecked?: boolean,
changeDetection?: ChangeDetectionStrategy,
exportAs?: string
}): RenderDirectiveMetadata {
@ -258,7 +272,10 @@ export class RenderDirectiveMetadata {
callOnChanges: callOnChanges,
callDoCheck: callDoCheck,
callOnInit: callOnInit,
callAfterContentInit: callAfterContentInit,
callAfterContentChecked: callAfterContentChecked,
callAfterViewInit: callAfterViewInit,
callAfterViewChecked: callAfterViewChecked,
changeDetection: changeDetection,
exportAs: exportAs
});

2
modules/angular2/src/test_lib/utils.ts
View File

@ -19,6 +19,8 @@ export class Log {
return (a1 = null, a2 = null, a3 = null, a4 = null, a5 = null) => { this._result.push(value); }
}
clear(): void { this._result = []; }
result(): string { return ListWrapper.join(this._result, "; "); }
}