Remove flux dependency (#10313)

package.json

@@ -80,7 +80,6 @@
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
         "filesize": "10.0.6",
-        "flux": "4.0.3",
         "focus-visible": "^5.2.0",
         "gfm.css": "^1.1.2",
         "glob-to-regexp": "^0.4.1",
@@ -153,7 +152,6 @@
         "@types/diff-match-patch": "^1.0.32",
         "@types/escape-html": "^1.0.1",
         "@types/file-saver": "^2.0.3",
-        "@types/flux": "^3.1.9",
         "@types/fs-extra": "^11.0.0",
         "@types/geojson": "^7946.0.8",
         "@types/glob-to-regexp": "^0.4.1",

src/components/views/rooms/RoomSublist.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from "classnames";
-import { Dispatcher } from "flux";
 import { Enable, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import * as React from "react";
@@ -28,7 +27,7 @@ import { polyfillTouchEvent } from "../../../@types/polyfill";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import { Action } from "../../../dispatcher/actions";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
+import defaultDispatcher, { MatrixDispatcher } from "../../../dispatcher/dispatcher";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -68,7 +67,7 @@ polyfillTouchEvent();
 
 export interface IAuxButtonProps {
     tabIndex: number;
-    dispatcher?: Dispatcher<ActionPayload>;
+    dispatcher?: MatrixDispatcher;
 }
 
 interface IProps {

src/dispatcher/dispatcher.ts

@@ -16,15 +16,133 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Dispatcher } from "flux";
-
 import { Action } from "./actions";
 import { ActionPayload, AsyncActionPayload } from "./payloads";
 
+type DispatchToken = string;
+
+function invariant(cond: any, error: string): void {
+    if (!cond) throw new Error(error);
+}
+
 /**
  * A dispatcher for ActionPayloads (the default within the SDK).
+ * Based on the old Flux dispatcher https://github.com/facebook/flux/blob/main/src/Dispatcher.js
  */
-export class MatrixDispatcher extends Dispatcher<ActionPayload> {
+export class MatrixDispatcher {
+    private readonly callbacks = new Map<DispatchToken, (payload: ActionPayload) => void>();
+    private readonly isHandled = new Map<DispatchToken, boolean>();
+    private readonly isPending = new Map<DispatchToken, boolean>();
+    private pendingPayload?: ActionPayload;
+    private lastId = 1;
+
+    /**
+     * Registers a callback to be invoked with every dispatched payload. Returns
+     * a token that can be used with `waitFor()`.
+     */
+    public register(callback: (payload: ActionPayload) => void): DispatchToken {
+        const id = "ID_" + this.lastId++;
+        this.callbacks.set(id, callback);
+        if (this.isDispatching()) {
+            // If there is a dispatch happening right now then the newly registered callback should be skipped
+            this.isPending.set(id, true);
+            this.isHandled.set(id, true);
+        }
+        return id;
+    }
+
+    /**
+     * Removes a callback based on its token.
+     */
+    public unregister(id: DispatchToken): void {
+        invariant(this.callbacks.has(id), `Dispatcher.unregister(...): '${id}' does not map to a registered callback.`);
+        this.callbacks.delete(id);
+    }
+
+    /**
+     * Waits for the callbacks specified to be invoked before continuing execution
+     * of the current callback. This method should only be used by a callback in
+     * response to a dispatched payload.
+     */
+    public waitFor(ids: DispatchToken[]): void {
+        invariant(this.isDispatching(), "Dispatcher.waitFor(...): Must be invoked while dispatching.");
+        for (const id of ids) {
+            if (this.isPending.get(id)) {
+                invariant(
+                    this.isHandled.get(id),
+                    `Dispatcher.waitFor(...): Circular dependency detected while waiting for '${id}'.`,
+                );
+                continue;
+            }
+            invariant(
+                this.callbacks.get(id),
+                `Dispatcher.waitFor(...): '${id}' does not map to a registered callback.`,
+            );
+            this.invokeCallback(id);
+        }
+    }
+
+    /**
+     * Dispatches a payload to all registered callbacks.
+     */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    private _dispatch = (payload: ActionPayload): void => {
+        invariant(!this.isDispatching(), "Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.");
+        this.startDispatching(payload);
+        try {
+            for (const [id] of this.callbacks) {
+                if (this.isPending.get(id)) {
+                    continue;
+                }
+                this.invokeCallback(id);
+            }
+        } finally {
+            this.stopDispatching();
+        }
+    };
+
+    /**
+     * Is this Dispatcher currently dispatching.
+     */
+    public isDispatching(): boolean {
+        return !!this.pendingPayload;
+    }
+
+    /**
+     * Call the callback stored with the given id. Also do some internal
+     * bookkeeping.
+     *
+     * Must only be called with an id which has a callback and pendingPayload set
+     * @internal
+     */
+    private invokeCallback(id: DispatchToken): void {
+        this.isPending.set(id, true);
+        this.callbacks.get(id)!(this.pendingPayload!);
+        this.isHandled.set(id, true);
+    }
+
+    /**
+     * Set up bookkeeping needed when dispatching.
+     *
+     * @internal
+     */
+    private startDispatching(payload: ActionPayload): void {
+        for (const [id] of this.callbacks) {
+            this.isPending.set(id, false);
+            this.isHandled.set(id, false);
+        }
+        this.pendingPayload = payload;
+    }
+
+    /**
+     * Clear bookkeeping used for dispatching.
+     *
+     * @internal
+     */
+    private stopDispatching(): void {
+        this.pendingPayload = undefined;
+    }
+
     /**
      * Dispatches an event on the dispatcher's event bus.
      * @param {ActionPayload} payload Required. The payload to dispatch.
@@ -42,14 +160,14 @@ export class MatrixDispatcher extends Dispatcher<ActionPayload> {
         }
 
         if (sync) {
-            super.dispatch(payload);
+            this._dispatch(payload);
         } else {
             // Unless the caller explicitly asked for us to dispatch synchronously,
             // we always set a timeout to do this: The flux dispatcher complains
             // if you dispatch from within a dispatch, so rather than action
             // handlers having to worry about not calling anything that might
             // then dispatch, we just do dispatches asynchronously.
-            window.setTimeout(super.dispatch.bind(this, payload), 0);
+            window.setTimeout(this._dispatch, 0, payload);
         }
     }
 

src/hooks/useDispatcher.ts

@@ -15,15 +15,12 @@ limitations under the License.
 */
 
 import { useEffect, useRef } from "react";
-import { Dispatcher } from "flux";
 
 import { ActionPayload } from "../dispatcher/payloads";
+import { MatrixDispatcher } from "../dispatcher/dispatcher";
 
-// Hook to simplify listening to flux dispatches
-export const useDispatcher = (
-    dispatcher: Dispatcher<ActionPayload>,
-    handler: (payload: ActionPayload) => void,
-): void => {
+// Hook to simplify listening to event dispatches
+export const useDispatcher = (dispatcher: MatrixDispatcher, handler: (payload: ActionPayload) => void): void => {
     // Create a ref that stores handler
     const savedHandler = useRef((payload: ActionPayload) => {});
 

src/stores/AsyncStore.ts

@@ -16,9 +16,9 @@ limitations under the License.
 
 import { EventEmitter } from "events";
 import AwaitLock from "await-lock";
-import { Dispatcher } from "flux";
 
 import { ActionPayload } from "../dispatcher/payloads";
+import { MatrixDispatcher } from "../dispatcher/dispatcher";
 
 /**
  * The event/channel to listen for in an AsyncStore.
@@ -52,7 +52,7 @@ export abstract class AsyncStore<T extends Object> extends EventEmitter {
      * @param {Dispatcher<ActionPayload>} dispatcher The dispatcher to rely upon.
      * @param {T} initialState The initial state for the store.
      */
-    protected constructor(private dispatcher: Dispatcher<ActionPayload>, initialState: T = <T>{}) {
+    protected constructor(private dispatcher: MatrixDispatcher, initialState: T = <T>{}) {
         super();
 
         this.dispatcherRef = dispatcher.register(this.onDispatch.bind(this));

src/stores/AsyncStoreWithClient.ts

@@ -15,16 +15,16 @@ limitations under the License.
 */
 
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { Dispatcher } from "flux";
 
 import { AsyncStore } from "./AsyncStore";
 import { ActionPayload } from "../dispatcher/payloads";
 import { ReadyWatchingStore } from "./ReadyWatchingStore";
+import { MatrixDispatcher } from "../dispatcher/dispatcher";
 
 export abstract class AsyncStoreWithClient<T extends Object> extends AsyncStore<T> {
     protected readyStore: ReadyWatchingStore;
 
-    protected constructor(dispatcher: Dispatcher<ActionPayload>, initialState: T = <T>{}) {
+    protected constructor(dispatcher: MatrixDispatcher, initialState: T = <T>{}) {
         super(dispatcher, initialState);
 
         // Create an anonymous class to avoid code duplication

src/stores/LifecycleStore.ts

@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Store } from "flux/utils";
-
 import { Action } from "../dispatcher/actions";
 import dis from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import { DoAfterSyncPreparedPayload } from "../dispatcher/payloads/DoAfterSyncPreparedPayload";
+import { AsyncStore } from "./AsyncStore";
 
 interface IState {
     deferredAction: ActionPayload | null;
@@ -30,32 +29,24 @@ const INITIAL_STATE: IState = {
 };
 
 /**
- * A class for storing application state to do with authentication. This is a simple flux
+ * A class for storing application state to do with authentication. This is a simple
  * store that listens for actions and updates its state accordingly, informing any
  * listeners (views) of state changes.
  */
-class LifecycleStore extends Store<ActionPayload> {
-    private state: IState = INITIAL_STATE;
-
+class LifecycleStore extends AsyncStore<IState> {
     public constructor() {
-        super(dis);
-    }
-
-    private setState(newState: Partial<IState>): void {
-        this.state = Object.assign(this.state, newState);
-        this.__emitChange();
+        super(dis, INITIAL_STATE);
     }
 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    protected __onDispatch(payload: ActionPayload | DoAfterSyncPreparedPayload<ActionPayload>): void {
+    protected onDispatch(payload: ActionPayload | DoAfterSyncPreparedPayload<ActionPayload>): void {
         switch (payload.action) {
             case Action.DoAfterSyncPrepared:
-                this.setState({
+                this.updateState({
                     deferredAction: payload.deferred_action,
                 });
                 break;
             case "cancel_after_sync_prepared":
-                this.setState({
+                this.updateState({
                     deferredAction: null,
                 });
                 break;
@@ -65,7 +56,7 @@ class LifecycleStore extends Store<ActionPayload> {
                 }
                 if (!this.state.deferredAction) break;
                 const deferredAction = Object.assign({}, this.state.deferredAction);
-                this.setState({
+                this.updateState({
                     deferredAction: null,
                 });
                 dis.dispatch(deferredAction);
@@ -77,10 +68,6 @@ class LifecycleStore extends Store<ActionPayload> {
                 break;
         }
     }
-
-    private reset(): void {
-        this.state = Object.assign({}, INITIAL_STATE);
-    }
 }
 
 let singletonLifecycleStore: LifecycleStore | null = null;

src/stores/ReadyWatchingStore.ts

@@ -16,19 +16,19 @@
 
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { SyncState } from "matrix-js-sdk/src/sync";
-import { Dispatcher } from "flux";
 import { EventEmitter } from "events";
 
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { ActionPayload } from "../dispatcher/payloads";
 import { IDestroyable } from "../utils/IDestroyable";
 import { Action } from "../dispatcher/actions";
+import { MatrixDispatcher } from "../dispatcher/dispatcher";
 
 export abstract class ReadyWatchingStore extends EventEmitter implements IDestroyable {
     protected matrixClient: MatrixClient | null = null;
     private dispatcherRef: string | null = null;
 
-    public constructor(protected readonly dispatcher: Dispatcher<ActionPayload>) {
+    public constructor(protected readonly dispatcher: MatrixDispatcher) {
         super();
     }