[No QA] [TS migration] Migrate 'Pusher' lib to TypeScript

src/libs/Pusher/EventType.js → src/libs/Pusher/EventType.ts

@@ -11,4 +11,4 @@ export default {
     MULTIPLE_EVENT_TYPE: {
         ONYX_API_UPDATE: 'onyxApiUpdate',
     },
-};
+} as const;

src/libs/Pusher/library/index.native.js → src/libs/Pusher/library/index.native.ts

@@ -2,6 +2,7 @@
  * We use the pusher-js/react-native module to support pusher on native environments.
  * @see: https://github.com/pusher/pusher-js
  */
-import Pusher from 'pusher-js/react-native';
+import PusherNative from 'pusher-js/react-native';
+import Pusher from './types';
 
-export default Pusher;
+export default PusherNative satisfies Pusher;

src/libs/Pusher/library/index.js → src/libs/Pusher/library/index.ts

@@ -2,6 +2,7 @@
  * We use the standard pusher-js module to support pusher on web environments.
  * @see: https://github.com/pusher/pusher-js
  */
-import Pusher from 'pusher-js/with-encryption';
+import PusherWeb from 'pusher-js/with-encryption';
+import Pusher from './types';
 
-export default Pusher;
+export default PusherWeb satisfies Pusher;

src/libs/Pusher/library/types.ts

@@ -0,0 +1,10 @@
+import PusherClass from 'pusher-js/with-encryption';
+import {LiteralUnion} from 'type-fest';
+
+type Pusher = typeof PusherClass;
+
+type SocketEventName = LiteralUnion<'error' | 'connected' | 'disconnected' | 'state_change', string>;
+
+export default Pusher;
+
+export type {SocketEventName};

src/libs/Pusher/pusher.js → src/libs/Pusher/pusher.ts

@@ -1,9 +1,42 @@
 import Onyx from 'react-native-onyx';
-import _ from 'underscore';
+import {Channel, ChannelAuthorizerGenerator, Options} from 'pusher-js/with-encryption';
+import isObject from 'lodash/isObject';
+import {LiteralUnion} from 'type-fest';
 import ONYXKEYS from '../../ONYXKEYS';
 import Pusher from './library';
 import TYPE from './EventType';
 import Log from '../Log';
+import DeepValueOf from '../../types/utils/DeepValueOf';
+import {SocketEventName} from './library/types';
+
+type States = {
+    previous: string;
+    current: string;
+};
+
+type Args = {
+    appKey: string;
+    cluster: string;
+    authEndpoint: string;
+};
+
+type ChunkedDataEvents = {chunks: unknown[]; receivedFinal: boolean};
+
+type EventData = {id?: string; chunk?: unknown; final?: boolean; index: number};
+
+type SocketEventCallback<T> = (eventName: SocketEventName, data?: T) => void;
+
+type PusherWithAuthParams = InstanceType<typeof Pusher> & {
+    config: {
+        auth?: {
+            params?: unknown;
+        };
+    };
+};
+
+type PusherEventName = LiteralUnion<DeepValueOf<typeof TYPE>, string>;
+
+type PusherSubscribtionErrorData = {type?: string; error?: string; status?: string};
 
 let shouldForceOffline = false;
 Onyx.connect({
@@ -16,33 +49,23 @@ Onyx.connect({
     },
 });
 
-let socket;
+let socket: PusherWithAuthParams | null;
 let pusherSocketID = '';
-const socketEventCallbacks = [];
-let customAuthorizer;
+const socketEventCallbacks: Array<SocketEventCallback<unknown>> = [];
+let customAuthorizer: ChannelAuthorizerGenerator;
 
 /**
  * Trigger each of the socket event callbacks with the event information
- *
- * @param {String} eventName
- * @param {*} data
  */
-function callSocketEventCallbacks(eventName, data) {
-    _.each(socketEventCallbacks, (cb) => cb(eventName, data));
+function callSocketEventCallbacks<T>(eventName: SocketEventName, data?: T) {
+    socketEventCallbacks.forEach((cb) => cb(eventName, data));
 }
 
 /**
  * Initialize our pusher lib
- *
- * @param {Object} args
- * @param {String} args.appKey
- * @param {String} args.cluster
- * @param {String} args.authEndpoint
- * @param {Object} [params]
- * @public
- * @returns {Promise} resolves when Pusher has connected
+ * @returns resolves when Pusher has connected
  */
-function init(args, params) {
+function init(args: Args, params?: unknown): Promise<void> {
     return new Promise((resolve) => {
         if (socket) {
             return resolve();
@@ -55,7 +78,7 @@ function init(args, params) {
         //     }
         // };
 
-        const options = {
+        const options: Options = {
             cluster: args.cluster,
             authEndpoint: args.authEndpoint,
         };
@@ -65,7 +88,6 @@ function init(args, params) {
         }
 
         socket = new Pusher(args.appKey, options);
-
         // If we want to pass params in our requests to api.php we'll need to add it to socket.config.auth.params
         // as per the documentation
         // (https://pusher.com/docs/channels/using_channels/connection#channels-options-parameter).
@@ -77,34 +99,30 @@ function init(args, params) {
         }
 
         // Listen for connection errors and log them
-        socket.connection.bind('error', (error) => {
+        socket?.connection.bind('error', (error: unknown) => {
             callSocketEventCallbacks('error', error);
         });
 
-        socket.connection.bind('connected', () => {
-            pusherSocketID = socket.connection.socket_id;
+        socket?.connection.bind('connected', () => {
+            pusherSocketID = socket?.connection.socket_id ?? '';
             callSocketEventCallbacks('connected');
             resolve();
         });
 
-        socket.connection.bind('disconnected', () => {
+        socket?.connection.bind('disconnected', () => {
             callSocketEventCallbacks('disconnected');
         });
 
-        socket.connection.bind('state_change', (states) => {
+        socket?.connection.bind('state_change', (states: States) => {
             callSocketEventCallbacks('state_change', states);
         });
     });
 }
 
 /**
  * Returns a Pusher channel for a channel name
- *
- * @param {String} channelName
- *
- * @returns {Channel}
  */
-function getChannel(channelName) {
+function getChannel(channelName: string): Channel | undefined {
     if (!socket) {
         return;
     }
@@ -114,27 +132,22 @@ function getChannel(channelName) {
 
 /**
  * Binds an event callback to a channel + eventName
- * @param {Pusher.Channel} channel
- * @param {String} eventName
- * @param {Function} [eventCallback]
- *
- * @private
  */
-function bindEventToChannel(channel, eventName, eventCallback = () => {}) {
+function bindEventToChannel(channel: Channel | undefined, eventName: PusherEventName, eventCallback: (data: unknown) => void = () => {}) {
     if (!eventName) {
         return;
     }
 
-    const chunkedDataEvents = {};
-    const callback = (eventData) => {
+    const chunkedDataEvents: Record<string, ChunkedDataEvents> = {};
+    const callback = (eventData: string | Record<string, unknown>) => {
         if (shouldForceOffline) {
             Log.info('[Pusher] Ignoring a Push event because shouldForceOffline = true');
             return;
         }
 
-        let data;
+        let data: EventData;
         try {
-            data = _.isObject(eventData) ? eventData : JSON.parse(eventData);
+            data = isObject(eventData) ? eventData : JSON.parse(eventData);
         } catch (err) {
             Log.alert('[Pusher] Unable to parse single JSON event data from Pusher', {error: err, eventData});
             return;
@@ -164,7 +177,7 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) {
 
         // Only call the event callback if we've received the last packet and we don't have any holes in the complete
         // packet.
-        if (chunkedEvent.receivedFinal && chunkedEvent.chunks.length === _.keys(chunkedEvent.chunks).length) {
+        if (chunkedEvent.receivedFinal && chunkedEvent.chunks.length === Object.keys(chunkedEvent.chunks).length) {
             try {
                 eventCallback(JSON.parse(chunkedEvent.chunks.join('')));
             } catch (err) {
@@ -181,22 +194,14 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) {
         }
     };
 
-    channel.bind(eventName, callback);
+    channel?.bind(eventName, callback);
 }
 
 /**
  * Subscribe to a channel and an event
- *
- * @param {String} channelName
- * @param {String} eventName
- * @param {Function} [eventCallback]
- * @param {Function} [onResubscribe] Callback to be called when reconnection happen
- *
- * @return {Promise}
- *
- * @public
+ * @param [onResubscribe] Callback to be called when reconnection happen
  */
-function subscribe(channelName, eventName, eventCallback = () => {}, onResubscribe = () => {}) {
+function subscribe(channelName: string, eventName: PusherEventName, eventCallback = () => {}, onResubscribe = () => {}): Promise<void> {
     return new Promise((resolve, reject) => {
         // We cannot call subscribe() before init(). Prevent any attempt to do this on dev.
         if (!socket) {
@@ -226,7 +231,7 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
                 onResubscribe();
             });
 
-            channel.bind('pusher:subscription_error', (data = {}) => {
+            channel.bind('pusher:subscription_error', (data: PusherSubscribtionErrorData = {}) => {
                 const {type, error, status} = data;
                 Log.hmmm('[Pusher] Issue authenticating with Pusher during subscribe attempt.', {
                     channelName,
@@ -245,12 +250,8 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
 
 /**
  * Unsubscribe from a channel and optionally a specific event
- *
- * @param {String} channelName
- * @param {String} [eventName]
- * @public
  */
-function unsubscribe(channelName, eventName = '') {
+function unsubscribe(channelName: string, eventName: PusherEventName = '') {
     const channel = getChannel(channelName);
 
     if (!channel) {
@@ -269,18 +270,14 @@ function unsubscribe(channelName, eventName = '') {
         Log.info('[Pusher] Unsubscribing from channel', false, {channelName});
 
         channel.unbind();
-        socket.unsubscribe(channelName);
+        socket?.unsubscribe(channelName);
     }
 }
 
 /**
  * Are we already in the process of subscribing to this channel?
- *
- * @param {String} channelName
- *
- * @returns {Boolean}
  */
-function isAlreadySubscribing(channelName) {
+function isAlreadySubscribing(channelName: string): boolean {
     if (!socket) {
         return false;
     }
@@ -291,12 +288,8 @@ function isAlreadySubscribing(channelName) {
 
 /**
  * Are we already subscribed to this channel?
- *
- * @param {String} channelName
- *
- * @returns {Boolean}
  */
-function isSubscribed(channelName) {
+function isSubscribed(channelName: string): boolean {
     if (!socket) {
         return false;
     }
@@ -307,39 +300,31 @@ function isSubscribed(channelName) {
 
 /**
  * Sends an event over a specific event/channel in pusher.
- *
- * @param {String} channelName
- * @param {String} eventName
- * @param {Object} payload
  */
-function sendEvent(channelName, eventName, payload) {
+function sendEvent<T>(channelName: string, eventName: PusherEventName, payload: T) {
     // Check to see if we are subscribed to this channel before sending the event. Sending client events over channels
     // we are not subscribed too will throw errors and cause reconnection attempts. Subscriptions are not instant and
     // can happen later than we expect.
     if (!isSubscribed(channelName)) {
         return;
     }
 
-    socket.send_event(eventName, payload, channelName);
+    socket?.send_event(eventName, payload, channelName);
 }
 
 /**
  * Register a method that will be triggered when a socket event happens (like disconnecting)
- *
- * @param {Function} cb
  */
-function registerSocketEventCallback(cb) {
-    socketEventCallbacks.push(cb);
+function registerSocketEventCallback<T>(cb: SocketEventCallback<T>) {
+    socketEventCallbacks.push(cb as SocketEventCallback<unknown>);
 }
 
 /**
  * A custom authorizer allows us to take a more fine-grained approach to
  * authenticating Pusher. e.g. we can handle failed attempts to authorize
  * with an expired authToken and retry the attempt.
- *
- * @param {Function} authorizer
  */
-function registerCustomAuthorizer(authorizer) {
+function registerCustomAuthorizer(authorizer: ChannelAuthorizerGenerator) {
     customAuthorizer = authorizer;
 }
 
@@ -371,18 +356,13 @@ function reconnect() {
     socket.connect();
 }
 
-/**
- * @returns {String}
- */
-function getPusherSocketID() {
+function getPusherSocketID(): string {
     return pusherSocketID;
 }
 
 if (window) {
     /**
      * Pusher socket for debugging purposes
-     *
-     * @returns {Function}
      */
     window.getPusherInstance = () => socket;
 }