066126ae2f
The codebase currently contains several `noop` functions, and they can end up in the bundle of an application. A recent commit 6fbe21941d7ad1bab7441e1bf3c667ecffc7a359 tipped us off as it introduced several `noop` occurrences in the golden symbol files. After investigating with @petebacondarwin, we decided to remove the duplicated functions. This probably shaves only a few bytes, but this commit removes the duplicated functions, by always using the one in `core/src/utils/noop`. PR Close #39761
449 lines
15 KiB
TypeScript
449 lines
15 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC 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 {EventEmitter} from '../event_emitter';
|
|
import {global} from '../util/global';
|
|
import {noop} from '../util/noop';
|
|
import {getNativeRequestAnimationFrame} from '../util/raf';
|
|
|
|
|
|
/**
|
|
* 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
|
|
* 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
|
|
* can reenter the Angular zone via {@link #run}.
|
|
*
|
|
* <!-- TODO: add/fix links to:
|
|
* - docs explaining zones and the use of zones in Angular and change-detection
|
|
* - link to runOutsideAngular/run (throughout this file!)
|
|
* -->
|
|
*
|
|
* @usageNotes
|
|
* ### Example
|
|
*
|
|
* ```
|
|
* import {Component, NgZone} from '@angular/core';
|
|
* import {NgIf} from '@angular/common';
|
|
*
|
|
* @Component({
|
|
* selector: 'ng-zone-demo',
|
|
* template: `
|
|
* <h2>Demo: NgZone</h2>
|
|
*
|
|
* <p>Progress: {{progress}}%</p>
|
|
* <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
|
|
*
|
|
* <button (click)="processWithinAngularZone()">Process within Angular zone</button>
|
|
* <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
|
|
* `,
|
|
* })
|
|
* export class NgZoneDemo {
|
|
* progress: number = 0;
|
|
* label: string;
|
|
*
|
|
* constructor(private _ngZone: NgZone) {}
|
|
*
|
|
* // Loop inside the Angular zone
|
|
* // so the UI DOES refresh after each setTimeout cycle
|
|
* processWithinAngularZone() {
|
|
* this.label = 'inside';
|
|
* this.progress = 0;
|
|
* this._increaseProgress(() => console.log('Inside Done!'));
|
|
* }
|
|
*
|
|
* // Loop outside of the Angular zone
|
|
* // so the UI DOES NOT refresh after each setTimeout cycle
|
|
* processOutsideOfAngularZone() {
|
|
* this.label = 'outside';
|
|
* this.progress = 0;
|
|
* this._ngZone.runOutsideAngular(() => {
|
|
* this._increaseProgress(() => {
|
|
* // reenter the Angular zone and display done
|
|
* this._ngZone.run(() => { console.log('Outside Done!'); });
|
|
* });
|
|
* });
|
|
* }
|
|
*
|
|
* _increaseProgress(doneCallback: () => void) {
|
|
* this.progress += 1;
|
|
* console.log(`Current progress: ${this.progress}%`);
|
|
*
|
|
* if (this.progress < 100) {
|
|
* window.setTimeout(() => this._increaseProgress(doneCallback), 10);
|
|
* } else {
|
|
* doneCallback();
|
|
* }
|
|
* }
|
|
* }
|
|
* ```
|
|
*
|
|
* @publicApi
|
|
*/
|
|
export class NgZone {
|
|
readonly hasPendingMacrotasks: boolean = false;
|
|
readonly hasPendingMicrotasks: boolean = false;
|
|
|
|
/**
|
|
* Whether there are no outstanding microtasks or macrotasks.
|
|
*/
|
|
readonly isStable: boolean = true;
|
|
|
|
/**
|
|
* Notifies when code enters Angular Zone. This gets fired first on VM Turn.
|
|
*/
|
|
readonly onUnstable: EventEmitter<any> = new EventEmitter(false);
|
|
|
|
/**
|
|
* Notifies when there is no more microtasks enqueued in the current VM Turn.
|
|
* This is a hint for Angular to do change detection, which may enqueue more microtasks.
|
|
* For this reason this event can fire multiple times per VM Turn.
|
|
*/
|
|
readonly onMicrotaskEmpty: EventEmitter<any> = new EventEmitter(false);
|
|
|
|
/**
|
|
* Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
|
|
* implies we are about to relinquish VM turn.
|
|
* This event gets called just once.
|
|
*/
|
|
readonly onStable: EventEmitter<any> = new EventEmitter(false);
|
|
|
|
/**
|
|
* Notifies that an error has been delivered.
|
|
*/
|
|
readonly onError: EventEmitter<any> = new EventEmitter(false);
|
|
|
|
|
|
constructor({
|
|
enableLongStackTrace = false,
|
|
shouldCoalesceEventChangeDetection = false,
|
|
shouldCoalesceRunChangeDetection = false
|
|
}) {
|
|
if (typeof Zone == 'undefined') {
|
|
throw new Error(`In this configuration Angular requires Zone.js`);
|
|
}
|
|
|
|
Zone.assertZonePatched();
|
|
const self = this as any as NgZonePrivate;
|
|
self._nesting = 0;
|
|
|
|
self._outer = self._inner = Zone.current;
|
|
|
|
if ((Zone as any)['TaskTrackingZoneSpec']) {
|
|
self._inner = self._inner.fork(new ((Zone as any)['TaskTrackingZoneSpec'] as any));
|
|
}
|
|
|
|
if (enableLongStackTrace && (Zone as any)['longStackTraceZoneSpec']) {
|
|
self._inner = self._inner.fork((Zone as any)['longStackTraceZoneSpec']);
|
|
}
|
|
// if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be
|
|
// coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped.
|
|
self.shouldCoalesceEventChangeDetection =
|
|
!shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;
|
|
self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;
|
|
self.lastRequestAnimationFrameId = -1;
|
|
self.nativeRequestAnimationFrame = getNativeRequestAnimationFrame().nativeRequestAnimationFrame;
|
|
forkInnerZoneWithAngularBehavior(self);
|
|
}
|
|
|
|
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<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T {
|
|
return (this as any as NgZonePrivate)._inner.run(fn, applyThis, applyArgs);
|
|
}
|
|
|
|
/**
|
|
* Executes the `fn` function synchronously within the Angular zone as a task 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`.
|
|
*/
|
|
runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T {
|
|
const zone = (this as any as NgZonePrivate)._inner;
|
|
const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop);
|
|
try {
|
|
return zone.runTask(task, applyThis, applyArgs);
|
|
} finally {
|
|
zone.cancelTask(task);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
|
|
* rethrown.
|
|
*/
|
|
runGuarded<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T {
|
|
return (this as any as NgZonePrivate)._inner.runGuarded(fn, applyThis, applyArgs);
|
|
}
|
|
|
|
/**
|
|
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
|
|
* the function.
|
|
*
|
|
* Running functions via {@link #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<T>(fn: (...args: any[]) => T): T {
|
|
return (this as any as NgZonePrivate)._outer.run(fn);
|
|
}
|
|
}
|
|
|
|
const EMPTY_PAYLOAD = {};
|
|
|
|
interface NgZonePrivate extends NgZone {
|
|
_outer: Zone;
|
|
_inner: Zone;
|
|
_nesting: number;
|
|
_hasPendingMicrotasks: boolean;
|
|
|
|
hasPendingMacrotasks: boolean;
|
|
hasPendingMicrotasks: boolean;
|
|
lastRequestAnimationFrameId: number;
|
|
isStable: boolean;
|
|
/**
|
|
* Optionally specify coalescing event change detections or not.
|
|
* Consider the following case.
|
|
*
|
|
* <div (click)="doSomething()">
|
|
* <button (click)="doSomethingElse()"></button>
|
|
* </div>
|
|
*
|
|
* When button is clicked, because of the event bubbling, both
|
|
* event handlers will be called and 2 change detections will be
|
|
* triggered. We can coalesce such kind of events to trigger
|
|
* change detection only once.
|
|
*
|
|
* By default, this option will be false. So the events will not be
|
|
* coalesced and the change detection will be triggered multiple times.
|
|
* And if this option be set to true, the change detection will be
|
|
* triggered async by scheduling it in an animation frame. So in the case above,
|
|
* the change detection will only be trigged once.
|
|
*/
|
|
shouldCoalesceEventChangeDetection: boolean;
|
|
/**
|
|
* Optionally specify if `NgZone#run()` method invocations should be coalesced
|
|
* into a single change detection.
|
|
*
|
|
* Consider the following case.
|
|
*
|
|
* for (let i = 0; i < 10; i ++) {
|
|
* ngZone.run(() => {
|
|
* // do something
|
|
* });
|
|
* }
|
|
*
|
|
* This case triggers the change detection multiple times.
|
|
* With ngZoneRunCoalescing options, all change detections in an event loops trigger only once.
|
|
* In addition, the change detection executes in requestAnimation.
|
|
*
|
|
*/
|
|
shouldCoalesceRunChangeDetection: boolean;
|
|
|
|
nativeRequestAnimationFrame: (callback: FrameRequestCallback) => number;
|
|
|
|
// Cache a "fake" top eventTask so you don't need to schedule a new task every
|
|
// time you run a `checkStable`.
|
|
fakeTopEventTask: Task;
|
|
}
|
|
|
|
function checkStable(zone: NgZonePrivate) {
|
|
if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) {
|
|
try {
|
|
zone._nesting++;
|
|
zone.onMicrotaskEmpty.emit(null);
|
|
} finally {
|
|
zone._nesting--;
|
|
if (!zone.hasPendingMicrotasks) {
|
|
try {
|
|
zone.runOutsideAngular(() => zone.onStable.emit(null));
|
|
} finally {
|
|
zone.isStable = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function delayChangeDetectionForEvents(zone: NgZonePrivate) {
|
|
if (zone.lastRequestAnimationFrameId !== -1) {
|
|
return;
|
|
}
|
|
zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.call(global, () => {
|
|
// This is a work around for https://github.com/angular/angular/issues/36839.
|
|
// The core issue is that when event coalescing is enabled it is possible for microtasks
|
|
// to get flushed too early (As is the case with `Promise.then`) between the
|
|
// coalescing eventTasks.
|
|
//
|
|
// To workaround this we schedule a "fake" eventTask before we process the
|
|
// coalescing eventTasks. The benefit of this is that the "fake" container eventTask
|
|
// will prevent the microtasks queue from getting drained in between the coalescing
|
|
// eventTask execution.
|
|
if (!zone.fakeTopEventTask) {
|
|
zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => {
|
|
zone.lastRequestAnimationFrameId = -1;
|
|
updateMicroTaskStatus(zone);
|
|
checkStable(zone);
|
|
}, undefined, () => {}, () => {});
|
|
}
|
|
zone.fakeTopEventTask.invoke();
|
|
});
|
|
updateMicroTaskStatus(zone);
|
|
}
|
|
|
|
function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) {
|
|
const delayChangeDetectionForEventsDelegate = () => {
|
|
delayChangeDetectionForEvents(zone);
|
|
};
|
|
zone._inner = zone._inner.fork({
|
|
name: 'angular',
|
|
properties: <any>{'isAngularZone': true},
|
|
onInvokeTask:
|
|
(delegate: ZoneDelegate, current: Zone, target: Zone, task: Task, applyThis: any,
|
|
applyArgs: any): any => {
|
|
try {
|
|
onEnter(zone);
|
|
return delegate.invokeTask(target, task, applyThis, applyArgs);
|
|
} finally {
|
|
if ((zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask') ||
|
|
zone.shouldCoalesceRunChangeDetection) {
|
|
delayChangeDetectionForEventsDelegate();
|
|
}
|
|
onLeave(zone);
|
|
}
|
|
},
|
|
|
|
onInvoke:
|
|
(delegate: ZoneDelegate, current: Zone, target: Zone, callback: Function, applyThis: any,
|
|
applyArgs?: any[], source?: string): any => {
|
|
try {
|
|
onEnter(zone);
|
|
return delegate.invoke(target, callback, applyThis, applyArgs, source);
|
|
} finally {
|
|
if (zone.shouldCoalesceRunChangeDetection) {
|
|
delayChangeDetectionForEventsDelegate();
|
|
}
|
|
onLeave(zone);
|
|
}
|
|
},
|
|
|
|
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') {
|
|
zone._hasPendingMicrotasks = hasTaskState.microTask;
|
|
updateMicroTaskStatus(zone);
|
|
checkStable(zone);
|
|
} else if (hasTaskState.change == 'macroTask') {
|
|
zone.hasPendingMacrotasks = hasTaskState.macroTask;
|
|
}
|
|
}
|
|
},
|
|
|
|
onHandleError: (delegate: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => {
|
|
delegate.handleError(target, error);
|
|
zone.runOutsideAngular(() => zone.onError.emit(error));
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateMicroTaskStatus(zone: NgZonePrivate) {
|
|
if (zone._hasPendingMicrotasks ||
|
|
((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) &&
|
|
zone.lastRequestAnimationFrameId !== -1)) {
|
|
zone.hasPendingMicrotasks = true;
|
|
} else {
|
|
zone.hasPendingMicrotasks = false;
|
|
}
|
|
}
|
|
|
|
function onEnter(zone: NgZonePrivate) {
|
|
zone._nesting++;
|
|
if (zone.isStable) {
|
|
zone.isStable = false;
|
|
zone.onUnstable.emit(null);
|
|
}
|
|
}
|
|
|
|
function onLeave(zone: NgZonePrivate) {
|
|
zone._nesting--;
|
|
checkStable(zone);
|
|
}
|
|
|
|
/**
|
|
* Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls
|
|
* to framework to perform rendering.
|
|
*/
|
|
export class NoopNgZone implements NgZone {
|
|
readonly hasPendingMicrotasks: boolean = false;
|
|
readonly hasPendingMacrotasks: boolean = false;
|
|
readonly isStable: boolean = true;
|
|
readonly onUnstable: EventEmitter<any> = new EventEmitter();
|
|
readonly onMicrotaskEmpty: EventEmitter<any> = new EventEmitter();
|
|
readonly onStable: EventEmitter<any> = new EventEmitter();
|
|
readonly onError: EventEmitter<any> = new EventEmitter();
|
|
|
|
run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any): T {
|
|
return fn.apply(applyThis, applyArgs);
|
|
}
|
|
|
|
runGuarded<T>(fn: (...args: any[]) => any, applyThis?: any, applyArgs?: any): T {
|
|
return fn.apply(applyThis, applyArgs);
|
|
}
|
|
|
|
runOutsideAngular<T>(fn: (...args: any[]) => T): T {
|
|
return fn();
|
|
}
|
|
|
|
runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any, name?: string): T {
|
|
return fn.apply(applyThis, applyArgs);
|
|
}
|
|
}
|