fix: requestAmimatonFrame only needed when observed (#4489)

Ensure only 1 animationFrame is active at a time.

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

Author: GordonSmith

packages/util/src/dispatch.ts

@@ -1,10 +1,10 @@
 import type { IObserverHandle } from "./observer.ts";
 import { root } from "./platform.ts";
 
-export type RquestAnimationFrame = (callback: FrameRequestCallback) => number | undefined;
+export type RequestAnimationFrame = (callback: FrameRequestCallback) => number | undefined;
 export type CancelAnimationFrame = (handle: number) => void | undefined;
 
-let requestAnimationFrame: RquestAnimationFrame;
+let requestAnimationFrame: RequestAnimationFrame;
 // let cancelAnimationFrame: CancelAnimationFrame;
 
 (function () {
@@ -53,6 +53,7 @@ export class Dispatch<T extends Message = Message> {
     private _observerID: number = 0;
     private _observers: ObserverAdapter<T>[] = [];
     private _messageBuffer: T[] = [];
+    private _rafHandle: number | undefined = undefined;
 
     constructor() {
     }
@@ -72,6 +73,7 @@ export class Dispatch<T extends Message = Message> {
     }
 
     private dispatchAll() {
+        this._rafHandle = undefined;
         this.dispatch(this.messages());
         this.flush();
     }
@@ -95,12 +97,16 @@ export class Dispatch<T extends Message = Message> {
     }
 
     send(msg: T) {
+        if (!this.hasObserver()) return;
         this.dispatch([msg]);
     }
 
     post(msg: T) {
+        if (!this.hasObserver()) return;
         this._messageBuffer.push(msg);
-        requestAnimationFrame(() => this.dispatchAll());
+        if (this._rafHandle === undefined) {
+            this._rafHandle = requestAnimationFrame(() => this.dispatchAll());
+        }
     }
 
     attach(callback: Callback<T>, type?: MessageConstructor<T>): IObserverHandle {

packages/util/tests/observer.spec.ts

@@ -65,7 +65,101 @@ class ConflatingMessage extends Message {
     }
 }
 
-describe("observer2", function () {
+describe("dispatch", function () {
+    it("hasObserver - initially false", () => {
+        const ms = new Dispatch<SimpleMessage>();
+        expect(ms.hasObserver()).to.be.false;
+    });
+
+    it("hasObserver - true after attach", () => {
+        const ms = new Dispatch<SimpleMessage>();
+        const handle = ms.attach(() => { });
+        expect(ms.hasObserver()).to.be.true;
+        handle.release();
+    });
+
+    it("hasObserver - false after release", () => {
+        const ms = new Dispatch<SimpleMessage>();
+        const handle = ms.attach(() => { });
+        expect(ms.hasObserver()).to.be.true;
+        handle.release();
+        expect(ms.hasObserver()).to.be.false;
+    });
+
+    it("send - immediate synchronous dispatch", () => {
+        const ms = new Dispatch<SimpleMessage>();
+        let callCount = 0;
+        ms.attach((messages) => {
+            callCount++;
+            expect(messages.length).to.equal(1);
+            expect(messages[0].property).to.equal("test");
+        });
+        ms.send(new SimpleMessage("test", "value"));
+        expect(callCount).to.equal(1);
+    });
+
+    it("flush - clears message buffer (prior to dispatch)", () => {
+        return new Promise<void>((done) => {
+            const ms = new Dispatch<SimpleMessage>();
+            const handle = ms.attach(() => {
+                throw new Error("Should not be called");
+            });
+            ms.post(new SimpleMessage("test", "value"));
+            ms.flush();
+            handle.release();
+            // Wait for RAF to ensure no callback
+            setTimeout(() => done(), 50);
+        });
+    });
+
+    it("multiple observers receive same messages", () => {
+        return new Promise<void>((done) => {
+            const ms = new Dispatch<SimpleMessage>();
+            let count1 = 0;
+            let count2 = 0;
+            const handle1 = ms.attach((messages) => {
+                count1++;
+                expect(messages.length).to.equal(2);
+            });
+            const handle2 = ms.attach((messages) => {
+                count2++;
+                expect(messages.length).to.equal(2);
+            });
+            ms.post(new SimpleMessage("prop1", "val1"));
+            ms.post(new SimpleMessage("prop2", "val2"));
+            setTimeout(() => {
+                expect(count1).to.equal(1);
+                expect(count2).to.equal(1);
+                handle1.release();
+                handle2.release();
+                done();
+            }, 50);
+        });
+    });
+
+    it("RAF handle 0 is treated as scheduled", () => {
+        return new Promise<void>((done) => {
+            const ms = new Dispatch<SimpleMessage>();
+            let callCount = 0;
+            const handle = ms.attach((messages) => {
+                callCount++;
+                expect(messages.length).to.equal(3);
+            });
+
+            // Post multiple messages rapidly
+            ms.post(new SimpleMessage("prop1", "val1"));
+            ms.post(new SimpleMessage("prop2", "val2"));
+            ms.post(new SimpleMessage("prop3", "val3"));
+
+            setTimeout(() => {
+                // Should only be called once despite multiple posts
+                expect(callCount).to.equal(1);
+                handle.release();
+                done();
+            }, 50);
+        });
+    });
+
     it("AllMessages", () => {
         return new Promise<void>((done) => {
             const ms = new Dispatch<ConflatingMessage>();