refactor: Replace Zone.scheduleMacroTask with ExperimentalPendingTasks

Author: mmalerba

src/compat/angularfire2.spec.ts

@@ -1,4 +1,4 @@
-import { CompilerFactory, DoBootstrap, NgModule, NgZone, PlatformRef } from '@angular/core';
+import { CompilerFactory, DoBootstrap, ExperimentalPendingTasks, NgModule, NgZone, PlatformRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { ɵAngularFireSchedulers, ɵZoneScheduler, ɵkeepUnstableUntilFirstFactory } from '@angular/fire';
 import { AngularFireModule, FirebaseApp } from '@angular/fire/compat';
@@ -89,7 +89,7 @@ describe('angularfire', () => {
     let schedulers: ɵAngularFireSchedulers;
     let outsideZone: Zone;
     let insideZone: Zone;
-    beforeAll(() => {
+    beforeEach(() => {
       outsideZone = Zone.current;
       insideZone = Zone.current.fork({
         name: 'ngZone'
@@ -100,7 +100,7 @@ describe('angularfire', () => {
         runOutsideAngular: outsideZone.runGuarded.bind(outsideZone),
         runTask: insideZone.run.bind(insideZone)
       } as NgZone;
-      schedulers = new ɵAngularFireSchedulers(ngZone);
+      schedulers = new ɵAngularFireSchedulers(ngZone, TestBed.inject(ExperimentalPendingTasks));
     });
 
     it('should re-schedule emissions asynchronously', done => {
@@ -157,7 +157,8 @@ describe('angularfire', () => {
             runTask: insideZone.run.bind(insideZone)
           } as NgZone,
           outsideAngular: new ɵZoneScheduler(outsideZone, testScheduler),
-          insideAngular: new ɵZoneScheduler(insideZone, testScheduler)
+          insideAngular: new ɵZoneScheduler(insideZone, testScheduler),
+          pendingTasks: TestBed.inject(ExperimentalPendingTasks),
         };
         const keepUnstableOp = ɵkeepUnstableUntilFirstFactory(trackingSchedulers);
 

src/compat/database/database.spec.ts

@@ -1,11 +1,11 @@
-import { NgZone } from '@angular/core';
+import { ExperimentalPendingTasks, NgZone } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { ɵAngularFireSchedulers } from '@angular/fire';
 import { AngularFireModule, FIREBASE_APP_NAME, FIREBASE_OPTIONS, FirebaseApp } from '@angular/fire/compat';
 import { AngularFireDatabase, AngularFireDatabaseModule, URL } from '@angular/fire/compat/database';
+import 'firebase/compat/database';
 import { COMMON_CONFIG } from '../../../src/test-config';
 import { rando } from '../../../src/utils';
-import 'firebase/compat/database';
 
 describe('AngularFireDatabase', () => {
   let app: FirebaseApp;
@@ -41,7 +41,7 @@ describe('AngularFireDatabase', () => {
     });
 
     it('should accept a Firebase App in the constructor', (done) => {
-      const schedulers = new ɵAngularFireSchedulers(zone);
+      const schedulers = new ɵAngularFireSchedulers(zone, TestBed.inject(ExperimentalPendingTasks));
       const database = new AngularFireDatabase(
         app.options, rando(), undefined, {}, zone, schedulers, undefined, undefined,
         undefined, undefined, undefined, undefined, undefined, undefined, undefined,

src/zones.ts

@@ -1,5 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Injectable, NgZone } from '@angular/core';
+import {
+  ExperimentalPendingTasks,
+  Injectable,
+  NgZone
+} from "@angular/core";
 import {
   Observable,
   Operator,
@@ -46,32 +50,21 @@ export class ɵZoneScheduler implements SchedulerLike {
 }
 
 class BlockUntilFirstOperator<T> implements Operator<T, T> {
-  // @ts-ignore
-  private task: MacroTask | null = null;
-
-  constructor(private zone: any) {
-  }
+  constructor(
+    private zone: any,
+    private pendingTasks: ExperimentalPendingTasks
+  ) {}
 
   call(subscriber: Subscriber<T>, source: Observable<T>): TeardownLogic {
-    const unscheduleTask = this.unscheduleTask.bind(this);
-    // @ts-ignore
-    this.task = this.zone.run(() => Zone.current.scheduleMacroTask('firebaseZoneBlock', noop, {}, noop, noop));
+    const taskDone = this.zone.run(() => this.pendingTasks.add());
+    // maybe this is a race condition, invoke in a timeout
+    // hold for 10ms while I try to figure out what is going on
+    const unscheduleTask = () => setTimeout(taskDone, 10);
 
     return source.pipe(
       tap({ next: unscheduleTask, complete: unscheduleTask, error: unscheduleTask })
     ).subscribe(subscriber).add(unscheduleTask);
   }
-
-  private unscheduleTask() {
-    // maybe this is a race condition, invoke in a timeout
-    // hold for 10ms while I try to figure out what is going on
-    setTimeout(() => {
-      if (this.task != null && this.task.state === 'scheduled') {
-        this.task.invoke();
-        this.task = null;
-      }
-    }, 10);
-  }
 }
 
 @Injectable({
@@ -81,11 +74,15 @@ export class ɵAngularFireSchedulers {
   public readonly outsideAngular: ɵZoneScheduler;
   public readonly insideAngular: ɵZoneScheduler;
 
-  constructor(public ngZone: NgZone) {
-    // @ts-ignore
-    this.outsideAngular = ngZone.runOutsideAngular(() => new ɵZoneScheduler(Zone.current));
-    // @ts-ignore
-    this.insideAngular = ngZone.run(() => new ɵZoneScheduler(Zone.current, asyncScheduler));
+  constructor(public ngZone: NgZone, public pendingTasks: ExperimentalPendingTasks) {
+    this.outsideAngular = ngZone.runOutsideAngular(
+      // @ts-ignore
+      () => new ɵZoneScheduler(Zone.current)
+    );
+    this.insideAngular = ngZone.run(
+      // @ts-ignore
+      () => new ɵZoneScheduler(Zone.current, asyncScheduler)
+    );
     globalThis.ɵAngularFireScheduler ||= this;
   }
 }
@@ -126,10 +123,14 @@ export function keepUnstableUntilFirst<T>(obs$: Observable<T>): Observable<T> {
  * value from firebase but doesn't block the zone forever since the firebase subscription
  * is still alive.
  */
-export function ɵkeepUnstableUntilFirstFactory(schedulers: ɵAngularFireSchedulers) {
-  return function keepUnstableUntilFirst<T>(obs$: Observable<T>): Observable<T> {
+export function ɵkeepUnstableUntilFirstFactory(
+  schedulers: ɵAngularFireSchedulers
+) {
+  return function keepUnstableUntilFirst<T>(
+    obs$: Observable<T>
+  ): Observable<T> {
     obs$ = obs$.lift(
-      new BlockUntilFirstOperator(schedulers.ngZone)
+      new BlockUntilFirstOperator(schedulers.ngZone, schedulers.pendingTasks)
     );
 
     return obs$.pipe(
@@ -144,39 +145,36 @@ export function ɵkeepUnstableUntilFirstFactory(schedulers: ɵAngularFireSchedul
 }
 
 // @ts-ignore
-const zoneWrapFn = (it: (...args: any[]) => any, macrotask: MacroTask|undefined) => {
+const zoneWrapFn = (
+  it: (...args: any[]) => any,
+  taskDone: VoidFunction | undefined
+) => {
   // eslint-disable-next-line @typescript-eslint/no-this-alias
   const _this = this;
   // function() is needed for the arguments object
   return function() {
     const _arguments = arguments;
-    if (macrotask) {
-      setTimeout(() => {
-        if (macrotask.state === 'scheduled') {
-          macrotask.invoke();
-        }
-      }, 10);
+    if (taskDone) {
+      setTimeout(taskDone, 10);
     }
     return run(() => it.apply(_this, _arguments));
   };
 };
 
 export const ɵzoneWrap = <T= unknown>(it: T, blockUntilFirst: boolean): T => {
   // function() is needed for the arguments object
-  return function() {
-    // @ts-ignore
-    let macrotask: MacroTask | undefined;
+  return function () {
+    let taskDone: VoidFunction | undefined;
     const _arguments = arguments;
-    // if this is a callback function, e.g, onSnapshot, we should create a microtask and invoke it
+    // if this is a callback function, e.g, onSnapshot, we should create a pending task and complete it
     // only once one of the callback functions is tripped.
     for (let i = 0; i < arguments.length; i++) {
       if (typeof _arguments[i] === 'function') {
         if (blockUntilFirst) {
-          // @ts-ignore
-          macrotask ||= run(() => Zone.current.scheduleMacroTask('firebaseZoneBlock', noop, {}, noop, noop));
+          taskDone ||= run(() => getSchedulers().pendingTasks.add());
         }
         // TODO create a microtask to track callback functions
-        _arguments[i] = zoneWrapFn(_arguments[i], macrotask);
+        _arguments[i] = zoneWrapFn(_arguments[i], taskDone);
       }
     }
     const ret = runOutsideAngular(() => (it as any).apply(this, _arguments));
@@ -195,16 +193,20 @@ export const ɵzoneWrap = <T= unknown>(it: T, blockUntilFirst: boolean): T => {
       return ret.pipe(keepUnstableUntilFirst) as any;
     } else if (ret instanceof Promise) {
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      return run(() => new Promise((resolve, reject) => ret.then(it => run(() => resolve(it)), reason => run(() => reject(reason)))));
-    } else if (typeof ret === 'function' && macrotask) {
+      return run(
+        () =>
+          new Promise((resolve, reject) =>
+            ret.then(
+              (it) => run(() => resolve(it)),
+              (reason) => run(() => reject(reason))
+            )
+          )
+      );
+    } else if (typeof ret === "function" && taskDone) {
       // Handle unsubscribe
       // function() is needed for the arguments object
-      return function() {
-        setTimeout(() => {
-          if (macrotask && macrotask.state === 'scheduled') {
-            macrotask.invoke();
-          }
-        }, 10);
+      return function () {
+        setTimeout(taskDone, 10);
         return ret.apply(this, arguments);
       };
     } else {