use a single global queue to run continuations on the RAF

bordoley · Feb 15, 2024 · ff22bf6 · ff22bf6
1 parent daf38fe
commit ff22bf6
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 107 deletions.
diff --git a/mod/integrations/web/AnimationFrameScheduler.js b/mod/integrations/web/AnimationFrameScheduler.js
diff --git a/packages/example-web/src/example.tsx b/packages/example-web/src/example.tsx
@@ -45,7 +45,10 @@ import {
   __stream,
   __using,
 } from "@reactive-js/core/concurrent/Observable/effects";
-import { __animate, __animationFrameScheduler } from "@reactive-js/core/integrations/web/effects";
+import {
+  __animate,
+  __animationFrameScheduler,
+} from "@reactive-js/core/integrations/web/effects";
 import { Wordle } from "./wordle.js";
 import Measure from "./measure.js";
 import * as WindowLocation from "@reactive-js/core/integrations/web/WindowLocation";
@@ -310,7 +313,7 @@ const RxComponent = createComponent(
     return Observable.computeDeferred(() => {
       const { windowLocation } = __await(props);
       const uri = __await(windowLocation);
-      
+
       const animationScheduler = __animationFrameScheduler();
 
       const createScheduler = __constant(() => {

diff --git a/packages/example-web/src/mouse.tsx b/packages/example-web/src/mouse.tsx
@@ -2,11 +2,7 @@ import React, { useMemo } from "react";
 import ReactDOMClient from "react-dom/client";
 import * as Observable from "@reactive-js/core/concurrent/Observable";
 import { useAnimate } from "@reactive-js/core/integrations/react/web";
-import {
-  pipe,
-  pipeSomeLazy,
-  returns,
-} from "@reactive-js/core/functions";
+import { pipe, pipeSomeLazy, returns } from "@reactive-js/core/functions";
 import {
   __await,
   __bindMethod,

diff --git a/src/integrations/web/AnimationFrameScheduler.ts b/src/integrations/web/AnimationFrameScheduler.ts
@@ -1,3 +1,4 @@
+import * as CurrentTime from "../../__internal__/CurrentTime.js";
 import {
   Map_delete,
   Map_get,
@@ -57,17 +58,8 @@ const create = /*@__PURE__*/ (() => {
   const AnimationFrameScheduler_delayScheduler = Symbol(
     "AnimationFrameScheduler_delayScheduler",
   );
-  const AnimationFrameScheduler_rafCallback = Symbol(
-    "AnimationFrameScheduler_rafCallback",
-  );
 
-  const AnimationFrameScheduler_rafQueue = Symbol(
-    "AnimationFrameScheduler_rafQueue",
-  );
-
-  const AnimationFrameScheduler_rafIsRunning = Symbol(
-    "AnimationFrameScheduler_rafIsRunning",
-  );
+  const RafScheduler_schedule = Symbol("RafScheduler_schedule");
 
   const raf = globalObject.requestAnimationFrame;
 
@@ -78,80 +70,105 @@ const create = /*@__PURE__*/ (() => {
 
   type TProperties = {
     [AnimationFrameScheduler_delayScheduler]: SchedulerLike;
-    [AnimationFrameScheduler_rafCallback]: () => void;
-    [AnimationFrameScheduler_rafQueue]: IndexedQueueLike<ContinuationLike>;
-    [AnimationFrameScheduler_rafIsRunning]: boolean;
   };
 
-  return mixInstanceFactory(
-    include(CurrentTimeSchedulerMixin),
-    function AnimationFrameScheduler(
-      instance: Omit<ContinuationSchedulerLike, typeof SchedulerLike_now> &
-        TProperties,
-      hostScheduler: SchedulerLike,
-    ): SchedulerLike & DisposableLike {
-      init(CurrentTimeSchedulerMixin, instance, 5);
+  interface RafScheduler {
+    [RafScheduler_schedule](continuation: ContinuationLike): void;
+  }
 
-      instance[AnimationFrameScheduler_delayScheduler] = hostScheduler;
-      instance[AnimationFrameScheduler_rafQueue] = IndexedQueue.create();
-      instance[AnimationFrameScheduler_rafIsRunning] = false;
+  const rafScheduler: RafScheduler = (() => {
+    const RafScheduler_rafQueue = Symbol("RafScheduler_rafQueue");
+
+    const RafScheduler_rafIsRunning = Symbol("RafScheduler_rafIsRunning");
+
+    interface RafSchedulerImpl {
+      [RafScheduler_rafQueue]: IndexedQueueLike<ContinuationLike>;
+      [RafScheduler_rafIsRunning]: boolean;
+      [RafScheduler_schedule](continuation: ContinuationLike): void;
+    }
 
-      instance[AnimationFrameScheduler_rafCallback] = () => {
-        const startTime = instance[SchedulerLike_now];
-        const workQueue = instance[AnimationFrameScheduler_rafQueue];
+    const rafCallback = () => {
+      const startTime = CurrentTime.now();
+      const workQueue = rafScheduler[RafScheduler_rafQueue];
+
+      rafScheduler[RafScheduler_rafQueue] = IndexedQueue.create();
+
+      let continuation: Optional<ContinuationLike> = none;
+      while (
+        ((continuation = workQueue[QueueLike_dequeue]()), isSome(continuation))
+      ) {
+        continuation[ContinuationLike_run]();
+
+        const elapsedTime = CurrentTime.now() - startTime;
+        if (elapsedTime > 5 /*ms*/) {
+          break;
+        }
+      }
 
-        instance[AnimationFrameScheduler_rafQueue] = IndexedQueue.create();
+      const continuationsCount = workQueue[QueueLike_count];
+      const newWorkQueue = rafScheduler[RafScheduler_rafQueue];
+      const newContinuationsCount = newWorkQueue[QueueLike_count];
 
+      if (continuationsCount > 0 && newContinuationsCount === 0) {
+        rafScheduler[RafScheduler_rafQueue] = workQueue;
+      } else if (continuationsCount > 0) {
+        // Merge the job queues copying the newly enqueued jobs
+        // onto the original queue.
         let continuation: Optional<ContinuationLike> = none;
         while (
-          ((continuation = workQueue[QueueLike_dequeue]()),
+          ((continuation = newWorkQueue[QueueLike_dequeue]()),
           isSome(continuation))
         ) {
-          continuation[ContinuationLike_run]();
-
-          const elapsedTime = instance[SchedulerLike_now] - startTime;
-          if (elapsedTime > 5 /*ms*/) {
-            break;
-          }
+          workQueue[QueueableLike_enqueue](continuation);
         }
+        rafScheduler[RafScheduler_rafQueue] = workQueue;
+      }
+
+      const continuationsQueueCount =
+        rafScheduler[RafScheduler_rafQueue][QueueLike_count];
+      if (continuationsQueueCount > 0) {
+        raf(rafCallback);
+      } else {
+        rafScheduler[RafScheduler_rafIsRunning] = false;
+      }
+    };
+
+    const rafScheduler: RafSchedulerImpl = {
+      [RafScheduler_rafQueue]: IndexedQueue.create<ContinuationLike>(),
+      [RafScheduler_rafIsRunning]: false,
+      [RafScheduler_schedule](
+        this: RafSchedulerImpl,
+        continuation: ContinuationLike,
+      ) {
+        this[RafScheduler_rafQueue][QueueableLike_enqueue](continuation);
 
-        const continuationsCount = workQueue[QueueLike_count];
-        const newWorkQueue = instance[AnimationFrameScheduler_rafQueue];
-        const newContinuationsCount = newWorkQueue[QueueLike_count];
-
-        if (continuationsCount > 0 && newContinuationsCount === 0) {
-          instance[AnimationFrameScheduler_rafQueue] = workQueue;
-        } else if (continuationsCount > 0) {
-          // Merge the job queues copying the newly enqueued jobs
-          // onto the original queue.
-          let continuation: Optional<ContinuationLike> = none;
-          while (
-            ((continuation = newWorkQueue[QueueLike_dequeue]()),
-            isSome(continuation))
-          ) {
-            workQueue[QueueableLike_enqueue](continuation);
-          }
-          instance[AnimationFrameScheduler_rafQueue] = workQueue;
+        if (!this[RafScheduler_rafIsRunning]) {
+          this[RafScheduler_rafIsRunning] = true;
+          raf(rafCallback);
         }
+      },
+    };
 
-        const continuationsQueueCount =
-          instance[AnimationFrameScheduler_rafQueue][QueueLike_count];
-        if (continuationsQueueCount > 0) {
-          raf(instance[AnimationFrameScheduler_rafCallback]);
-        } else {
-          instance[AnimationFrameScheduler_rafIsRunning] = false;
-        }
-      };
+    return rafScheduler;
+  })();
+
+  return mixInstanceFactory(
+    include(CurrentTimeSchedulerMixin),
+    function AnimationFrameScheduler(
+      instance: Omit<ContinuationSchedulerLike, typeof SchedulerLike_now> &
+        TProperties,
+      hostScheduler: SchedulerLike,
+    ): SchedulerLike & DisposableLike {
+      init(CurrentTimeSchedulerMixin, instance, 5);
+
+      instance[AnimationFrameScheduler_delayScheduler] = hostScheduler;
 
       hostScheduler[DisposableContainerLike_add](instance);
 
       return instance;
     },
     props<TProperties>({
       [AnimationFrameScheduler_delayScheduler]: none,
-      [AnimationFrameScheduler_rafCallback]: none,
-      [AnimationFrameScheduler_rafQueue]: none,
-      [AnimationFrameScheduler_rafIsRunning]: false,
     }),
     {
       [ContinuationSchedulerLike_shouldYield]: true,
@@ -181,14 +198,7 @@ const create = /*@__PURE__*/ (() => {
             Disposable.addTo(continuation),
           );
         } else {
-          this[AnimationFrameScheduler_rafQueue][QueueableLike_enqueue](
-            continuation,
-          );
-
-          if (!this[AnimationFrameScheduler_rafIsRunning]) {
-            this[AnimationFrameScheduler_rafIsRunning] = true;
-            raf(this[AnimationFrameScheduler_rafCallback]);
-          }
+          rafScheduler[RafScheduler_schedule](continuation);
         }
       },
     },