refactor(NgZone): merge NgZoneImpl and NgZone (#12104)
This commit is contained in:
Victor Berchet
Tobias Bosch
parent
d641c36a45
commit
afb4bd9ef6
|
|
@ -8,25 +8,22 @@
|
||||||
|
|
||||||
import {EventEmitter} from '../facade/async';
|
import {EventEmitter} from '../facade/async';
|
||||||
|
|
||||||
import {NgZoneImpl} from './ng_zone_impl';
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An injectable service for executing work inside or outside of the Angular zone.
|
* An injectable service for executing work inside or outside of the Angular zone.
|
||||||
*
|
*
|
||||||
* The most common use of this service is to optimize performance when starting a work consisting of
|
* The most common use of this service is to optimize performance when starting a work consisting of
|
||||||
* one or more asynchronous tasks that don't require UI updates or error handling to be handled by
|
* one or more asynchronous tasks that don't require UI updates or error handling to be handled by
|
||||||
* Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
|
* Angular. Such tasks can be kicked off via {@link runOutsideAngular} and if needed, these tasks
|
||||||
* can reenter the Angular zone via {@link #run}.
|
* can reenter the Angular zone via {@link run}.
|
||||||
*
|
*
|
||||||
* <!-- TODO: add/fix links to:
|
* <!-- TODO: add/fix links to:
|
||||||
* - docs explaining zones and the use of zones in Angular and change-detection
|
* - docs explaining zones and the use of zones in Angular and change-detection
|
||||||
* - link to runOutsideAngular/run (throughout this file!)
|
* - link to runOutsideAngular/run (throughout this file!)
|
||||||
* -->
|
* -->
|
||||||
*
|
*
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
|
* ### Example
|
||||||
* ```
|
* ```
|
||||||
* import {Component, View, NgZone} from '@angular/core';
|
* import {Component, NgZone} from '@angular/core';
|
||||||
* import {NgIf} from '@angular/common';
|
* import {NgIf} from '@angular/common';
|
||||||
*
|
*
|
||||||
* @Component({
|
* @Component({
|
||||||
|
|
@ -67,7 +64,6 @@ import {NgZoneImpl} from './ng_zone_impl';
|
||||||
* }}));
|
* }}));
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
*
|
|
||||||
* _increaseProgress(doneCallback: () => void) {
|
* _increaseProgress(doneCallback: () => void) {
|
||||||
* this.progress += 1;
|
* this.progress += 1;
|
||||||
* console.log(`Current progress: ${this.progress}%`);
|
* console.log(`Current progress: ${this.progress}%`);
|
||||||
|
|
@ -83,82 +79,85 @@ import {NgZoneImpl} from './ng_zone_impl';
|
||||||
* @experimental
|
* @experimental
|
||||||
*/
|
*/
|
||||||
export class NgZone {
|
export class NgZone {
|
||||||
static isInAngularZone(): boolean { return NgZoneImpl.isInAngularZone(); }
|
private outer: Zone;
|
||||||
static assertInAngularZone(): void {
|
private inner: Zone;
|
||||||
if (!NgZoneImpl.isInAngularZone()) {
|
|
||||||
throw new Error('Expected to be in Angular Zone, but it is not!');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
static assertNotInAngularZone(): void {
|
|
||||||
if (NgZoneImpl.isInAngularZone()) {
|
|
||||||
throw new Error('Expected to not be in Angular Zone, but it is!');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private _zoneImpl: NgZoneImpl;
|
|
||||||
|
|
||||||
private _hasPendingMicrotasks: boolean = false;
|
private _hasPendingMicrotasks: boolean = false;
|
||||||
private _hasPendingMacrotasks: boolean = false;
|
private _hasPendingMacrotasks: boolean = false;
|
||||||
|
|
||||||
/** @internal */
|
|
||||||
private _isStable = true;
|
private _isStable = true;
|
||||||
/** @internal */
|
private _nesting: number = 0;
|
||||||
private _nesting = 0;
|
|
||||||
/** @internal */
|
|
||||||
private _onUnstable: EventEmitter<any> = new EventEmitter(false);
|
private _onUnstable: EventEmitter<any> = new EventEmitter(false);
|
||||||
/** @internal */
|
|
||||||
private _onMicrotaskEmpty: EventEmitter<any> = new EventEmitter(false);
|
private _onMicrotaskEmpty: EventEmitter<any> = new EventEmitter(false);
|
||||||
/** @internal */
|
|
||||||
private _onStable: EventEmitter<any> = new EventEmitter(false);
|
private _onStable: EventEmitter<any> = new EventEmitter(false);
|
||||||
/** @internal */
|
|
||||||
private _onErrorEvents: EventEmitter<any> = new EventEmitter(false);
|
private _onErrorEvents: EventEmitter<any> = new EventEmitter(false);
|
||||||
|
|
||||||
constructor({enableLongStackTrace = false}) {
|
constructor({enableLongStackTrace = false}) {
|
||||||
this._zoneImpl = new NgZoneImpl({
|
if (typeof Zone == 'undefined') {
|
||||||
trace: enableLongStackTrace,
|
throw new Error('Angular requires Zone.js prolyfill.');
|
||||||
onEnter: () => {
|
|
||||||
// console.log('ZONE.enter', this._nesting, this._isStable);
|
|
||||||
this._nesting++;
|
|
||||||
if (this._isStable) {
|
|
||||||
this._isStable = false;
|
|
||||||
this._onUnstable.emit(null);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLeave: () => {
|
|
||||||
this._nesting--;
|
|
||||||
// console.log('ZONE.leave', this._nesting, this._isStable);
|
|
||||||
this._checkStable();
|
|
||||||
},
|
|
||||||
setMicrotask: (hasMicrotasks: boolean) => {
|
|
||||||
this._hasPendingMicrotasks = hasMicrotasks;
|
|
||||||
this._checkStable();
|
|
||||||
},
|
|
||||||
setMacrotask: (hasMacrotasks: boolean) => { this._hasPendingMacrotasks = hasMacrotasks; },
|
|
||||||
onError: (error: any) => this._onErrorEvents.emit(error)
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _checkStable() {
|
Zone.assertZonePatched();
|
||||||
if (this._nesting == 0) {
|
|
||||||
if (!this._hasPendingMicrotasks && !this._isStable) {
|
this.outer = this.inner = Zone.current;
|
||||||
try {
|
|
||||||
// console.log('ZONE.microtaskEmpty');
|
if ((Zone as any)['wtfZoneSpec']) {
|
||||||
this._nesting++;
|
this.inner = this.inner.fork((Zone as any)['wtfZoneSpec']);
|
||||||
this._onMicrotaskEmpty.emit(null);
|
}
|
||||||
} finally {
|
|
||||||
this._nesting--;
|
if (enableLongStackTrace && (Zone as any)['longStackTraceZoneSpec']) {
|
||||||
if (!this._hasPendingMicrotasks) {
|
this.inner = this.inner.fork((Zone as any)['longStackTraceZoneSpec']);
|
||||||
try {
|
}
|
||||||
// console.log('ZONE.stable', this._nesting, this._isStable);
|
|
||||||
this.runOutsideAngular(() => this._onStable.emit(null));
|
this.forkInnerZoneWithAngularBehavior();
|
||||||
} finally {
|
}
|
||||||
this._isStable = true;
|
|
||||||
|
static isInAngularZone(): boolean { return Zone.current.get('isAngularZone') === true; }
|
||||||
|
|
||||||
|
static assertInAngularZone(): void {
|
||||||
|
if (!NgZone.isInAngularZone()) {
|
||||||
|
throw new Error('Expected to be in Angular Zone, but it is not!');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
static assertNotInAngularZone(): void {
|
||||||
|
if (NgZone.isInAngularZone()) {
|
||||||
|
throw new Error('Expected to not be in Angular Zone, but it is!');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
/**
|
||||||
|
* Executes the `fn` function synchronously within the Angular zone and returns value returned by
|
||||||
|
* the function.
|
||||||
|
*
|
||||||
|
* Running functions via `run` allows you to reenter Angular zone from a task that was executed
|
||||||
|
* outside of the Angular zone (typically started via {@link runOutsideAngular}).
|
||||||
|
*
|
||||||
|
* Any future tasks or microtasks scheduled from within this function will continue executing from
|
||||||
|
* within the Angular zone.
|
||||||
|
*
|
||||||
|
* If a synchronous error happens it will be rethrown and not reported via `onError`.
|
||||||
|
*/
|
||||||
|
run(fn: () => any): any { return this.inner.run(fn); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
|
||||||
|
* rethrown.
|
||||||
|
*/
|
||||||
|
runGuarded(fn: () => any): any { return this.inner.runGuarded(fn); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
|
||||||
|
* the function.
|
||||||
|
*
|
||||||
|
* Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
|
||||||
|
* doesn't trigger Angular change-detection or is subject to Angular's error handling.
|
||||||
|
*
|
||||||
|
* Any future tasks or microtasks scheduled from within this function will continue executing from
|
||||||
|
* outside of the Angular zone.
|
||||||
|
*
|
||||||
|
* Use {@link run} to reenter the Angular zone and do work that updates the application model.
|
||||||
|
*/
|
||||||
|
runOutsideAngular(fn: () => any): any { return this.outer.run(fn); }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notifies when code enters Angular Zone. This gets fired first on VM Turn.
|
* Notifies when code enters Angular Zone. This gets fired first on VM Turn.
|
||||||
|
|
@ -185,51 +184,98 @@ export class NgZone {
|
||||||
get onError(): EventEmitter<any> { return this._onErrorEvents; }
|
get onError(): EventEmitter<any> { return this._onErrorEvents; }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether there are no outstanding microtasks or microtasks.
|
* Whether there are no outstanding microtasks or macrotasks.
|
||||||
*/
|
*/
|
||||||
get isStable(): boolean { return this._isStable; }
|
get isStable(): boolean { return this._isStable; }
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether there are any outstanding microtasks.
|
|
||||||
*/
|
|
||||||
get hasPendingMicrotasks(): boolean { return this._hasPendingMicrotasks; }
|
get hasPendingMicrotasks(): boolean { return this._hasPendingMicrotasks; }
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether there are any outstanding microtasks.
|
|
||||||
*/
|
|
||||||
get hasPendingMacrotasks(): boolean { return this._hasPendingMacrotasks; }
|
get hasPendingMacrotasks(): boolean { return this._hasPendingMacrotasks; }
|
||||||
|
|
||||||
/**
|
private checkStable() {
|
||||||
* Executes the `fn` function synchronously within the Angular zone and returns value returned by
|
if (this._nesting == 0 && !this._hasPendingMicrotasks && !this._isStable) {
|
||||||
* the function.
|
try {
|
||||||
*
|
this._nesting++;
|
||||||
* Running functions via `run` allows you to reenter Angular zone from a task that was executed
|
this._onMicrotaskEmpty.emit(null);
|
||||||
* outside of the Angular zone (typically started via {@link #runOutsideAngular}).
|
} finally {
|
||||||
*
|
this._nesting--;
|
||||||
* Any future tasks or microtasks scheduled from within this function will continue executing from
|
if (!this._hasPendingMicrotasks) {
|
||||||
* within the Angular zone.
|
try {
|
||||||
*
|
this.runOutsideAngular(() => this._onStable.emit(null));
|
||||||
* If a synchronous error happens it will be rethrown and not reported via `onError`.
|
} finally {
|
||||||
*/
|
this._isStable = true;
|
||||||
run(fn: () => any): any { return this._zoneImpl.runInner(fn); }
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
private forkInnerZoneWithAngularBehavior() {
|
||||||
* Same as #run, except that synchronous errors are caught and forwarded
|
this.inner = this.inner.fork({
|
||||||
* via `onError` and not rethrown.
|
name: 'angular',
|
||||||
*/
|
properties: <any>{'isAngularZone': true},
|
||||||
runGuarded(fn: () => any): any { return this._zoneImpl.runInnerGuarded(fn); }
|
onInvokeTask: (delegate: ZoneDelegate, current: Zone, target: Zone, task: Task,
|
||||||
|
applyThis: any, applyArgs: any): any => {
|
||||||
|
try {
|
||||||
|
this.onEnter();
|
||||||
|
return delegate.invokeTask(target, task, applyThis, applyArgs);
|
||||||
|
} finally {
|
||||||
|
this.onLeave();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
|
onInvoke: (delegate: ZoneDelegate, current: Zone, target: Zone, callback: Function,
|
||||||
* the function.
|
applyThis: any, applyArgs: any[], source: string): any => {
|
||||||
*
|
try {
|
||||||
* Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
|
this.onEnter();
|
||||||
* doesn't trigger Angular change-detection or is subject to Angular's error handling.
|
return delegate.invoke(target, callback, applyThis, applyArgs, source);
|
||||||
*
|
} finally {
|
||||||
* Any future tasks or microtasks scheduled from within this function will continue executing from
|
this.onLeave();
|
||||||
* outside of the Angular zone.
|
}
|
||||||
*
|
},
|
||||||
* Use {@link #run} to reenter the Angular zone and do work that updates the application model.
|
|
||||||
*/
|
onHasTask:
|
||||||
runOutsideAngular(fn: () => any): any { return this._zoneImpl.runOuter(fn); }
|
(delegate: ZoneDelegate, current: Zone, target: Zone, hasTaskState: HasTaskState) => {
|
||||||
|
delegate.hasTask(target, hasTaskState);
|
||||||
|
if (current === target) {
|
||||||
|
// We are only interested in hasTask events which originate from our zone
|
||||||
|
// (A child hasTask event is not interesting to us)
|
||||||
|
if (hasTaskState.change == 'microTask') {
|
||||||
|
this.setHasMicrotask(hasTaskState.microTask);
|
||||||
|
} else if (hasTaskState.change == 'macroTask') {
|
||||||
|
this.setHasMacrotask(hasTaskState.macroTask);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onHandleError: (delegate: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => {
|
||||||
|
delegate.handleError(target, error);
|
||||||
|
this.triggerError(error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private onEnter() {
|
||||||
|
this._nesting++;
|
||||||
|
if (this._isStable) {
|
||||||
|
this._isStable = false;
|
||||||
|
this._onUnstable.emit(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private onLeave() {
|
||||||
|
this._nesting--;
|
||||||
|
this.checkStable();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setHasMicrotask(hasMicrotasks: boolean) {
|
||||||
|
this._hasPendingMicrotasks = hasMicrotasks;
|
||||||
|
this.checkStable();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setHasMacrotask(hasMacrotasks: boolean) { this._hasPendingMacrotasks = hasMacrotasks; }
|
||||||
|
|
||||||
|
private triggerError(error: any) { this._onErrorEvents.emit(error); }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,98 +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
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
export class NgZoneImpl {
|
|
||||||
static isInAngularZone(): boolean { return Zone.current.get('isAngularZone') === true; }
|
|
||||||
|
|
||||||
/** @internal */
|
|
||||||
private outer: Zone;
|
|
||||||
/** @internal */
|
|
||||||
private inner: Zone;
|
|
||||||
|
|
||||||
private onEnter: () => void;
|
|
||||||
private onLeave: () => void;
|
|
||||||
private setMicrotask: (hasMicrotasks: boolean) => void;
|
|
||||||
private setMacrotask: (hasMacrotasks: boolean) => void;
|
|
||||||
private onError: (error: any) => void;
|
|
||||||
|
|
||||||
constructor({trace, onEnter, onLeave, setMicrotask, setMacrotask, onError}: {
|
|
||||||
trace: boolean,
|
|
||||||
onEnter: () => void,
|
|
||||||
onLeave: () => void,
|
|
||||||
setMicrotask: (hasMicrotasks: boolean) => void,
|
|
||||||
setMacrotask: (hasMacrotasks: boolean) => void,
|
|
||||||
onError: (error: any) => void
|
|
||||||
}) {
|
|
||||||
this.onEnter = onEnter;
|
|
||||||
this.onLeave = onLeave;
|
|
||||||
this.setMicrotask = setMicrotask;
|
|
||||||
this.setMacrotask = setMacrotask;
|
|
||||||
this.onError = onError;
|
|
||||||
|
|
||||||
if (typeof Zone == 'undefined') {
|
|
||||||
throw new Error('Angular requires Zone.js prolyfill.');
|
|
||||||
}
|
|
||||||
Zone.assertZonePatched();
|
|
||||||
this.outer = this.inner = Zone.current;
|
|
||||||
if ((Zone as any)['wtfZoneSpec']) {
|
|
||||||
this.inner = this.inner.fork((Zone as any)['wtfZoneSpec']);
|
|
||||||
}
|
|
||||||
if (trace && (Zone as any)['longStackTraceZoneSpec']) {
|
|
||||||
this.inner = this.inner.fork((Zone as any)['longStackTraceZoneSpec']);
|
|
||||||
}
|
|
||||||
this.inner = this.inner.fork({
|
|
||||||
name: 'angular',
|
|
||||||
properties: <any>{'isAngularZone': true},
|
|
||||||
onInvokeTask: (delegate: ZoneDelegate, current: Zone, target: Zone, task: Task,
|
|
||||||
applyThis: any, applyArgs: any): any => {
|
|
||||||
try {
|
|
||||||
this.onEnter();
|
|
||||||
return delegate.invokeTask(target, task, applyThis, applyArgs);
|
|
||||||
} finally {
|
|
||||||
this.onLeave();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
onInvoke: (delegate: ZoneDelegate, current: Zone, target: Zone, callback: Function,
|
|
||||||
applyThis: any, applyArgs: any[], source: string): any => {
|
|
||||||
try {
|
|
||||||
this.onEnter();
|
|
||||||
return delegate.invoke(target, callback, applyThis, applyArgs, source);
|
|
||||||
} finally {
|
|
||||||
this.onLeave();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onHasTask:
|
|
||||||
(delegate: ZoneDelegate, current: Zone, target: Zone, hasTaskState: HasTaskState) => {
|
|
||||||
delegate.hasTask(target, hasTaskState);
|
|
||||||
if (current === target) {
|
|
||||||
// We are only interested in hasTask events which originate from our zone
|
|
||||||
// (A child hasTask event is not interesting to us)
|
|
||||||
if (hasTaskState.change == 'microTask') {
|
|
||||||
this.setMicrotask(hasTaskState.microTask);
|
|
||||||
} else if (hasTaskState.change == 'macroTask') {
|
|
||||||
this.setMacrotask(hasTaskState.macroTask);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onHandleError: (delegate: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => {
|
|
||||||
delegate.handleError(target, error);
|
|
||||||
this.onError(error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
runInner(fn: () => any): any { return this.inner.run(fn); };
|
|
||||||
runInnerGuarded(fn: () => any): any { return this.inner.runGuarded(fn); };
|
|
||||||
runOuter(fn: () => any): any { return this.outer.run(fn); };
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue