quidproquo-web-react 0.0.199 → 0.0.200

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.d.ts

@@ -1,2 +1,2 @@
-import { AuthenticationInfo } from 'quidproquo';
+import { AuthenticationInfo } from 'quidproquo-core';
 export declare const useWebsocketAuthSync: (accessToken: AuthenticationInfo['accessToken']) => void;

package/lib/esm/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useThrottledMemo';
+export * from './useRunEvery';
+export * from './useFastCallback';

package/lib/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './useThrottledMemo';
+export * from './useRunEvery';
+export * from './useFastCallback';

package/lib/esm/hooks/useFastCallback.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare function useFastCallback<T extends Function>(callback: T, deps?: DependencyList): T;

package/lib/esm/hooks/useFastCallback.js

@@ -0,0 +1,15 @@
+import { useRef, useCallback } from 'react';
+export function useFastCallback(callback, deps) {
+    const callbackRef = useRef(callback);
+    const depsRef = useRef(deps);
+    // If the deps have changed, update the callback ref
+    // We support undefined deps, which means they are always updated
+    // This is different to [] where its never updated.
+    const hasDepsChanged = !depsRef.current || !deps || depsRef.current.some((dep, index) => dep !== deps[index]);
+    if (hasDepsChanged) {
+        callbackRef.current = callback;
+    }
+    depsRef.current = deps;
+    const memoFunc = useCallback((...args) => callbackRef.current(...args), []);
+    return memoFunc;
+}

package/lib/esm/hooks/useRunEvery.d.ts

@@ -0,0 +1 @@
+export declare function useRunEvery<T>(func: () => T, interval: number): T;

package/lib/esm/hooks/useRunEvery.js

@@ -0,0 +1,18 @@
+import { useState, useEffect, useRef } from 'react';
+export function useRunEvery(func, interval) {
+    const [value, setValue] = useState(func);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        intervalRef.current = setInterval(() => {
+            const newValue = func();
+            setValue(newValue);
+        }, interval * 1000);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [interval]);
+    return value;
+}

package/lib/esm/hooks/useThrottledMemo.d.ts

@@ -0,0 +1 @@
+export declare function useThrottledMemo<T>(factory: () => T, deps: any[], delaySeconds?: number): T;

package/lib/esm/hooks/useThrottledMemo.js

@@ -0,0 +1,28 @@
+import { useState, useEffect, useRef } from 'react';
+export function useThrottledMemo(factory, deps, delaySeconds = 1) {
+    const [value, setValue] = useState(factory);
+    const isFirstRun = useRef(true);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        // This skips the throttling on the initial mount
+        if (isFirstRun.current) {
+            isFirstRun.current = false;
+            return;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            setValue(factory);
+            timeoutRef.current = null;
+        }, delaySeconds * 1000);
+        // Cleanup on component unmount or when dependencies change
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, [...deps, delaySeconds]);
+    return value;
+}

package/lib/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './websocket';
+export * from './hooks';

package/lib/esm/index.js

@@ -0,0 +1,2 @@
+export * from './websocket';
+export * from './hooks';

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthSync.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AuthenticationInfo } from 'quidproquo-core';
+export type WebSocketAuthSyncProps = {
+    children: React.ReactNode;
+    accessToken: AuthenticationInfo['accessToken'];
+};
+export declare const WebSocketAuthSync: import("react").NamedExoticComponent<WebSocketAuthSyncProps>;

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useWebsocketAuthSync, useWebsocketPingPong } from './hooks';
+const component = ({ children, accessToken }) => {
+    useWebsocketAuthSync(accessToken);
+    // Keep the active websocket alive
+    useWebsocketPingPong();
+    // This fragment is not useless!
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return _jsx(_Fragment, { children: children });
+};
+export const WebSocketAuthSync = memo(component);

package/lib/esm/websocket/WebSocketAuthSync/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useWebsocketAuthSync';
+export * from './useWebsocketPingPong';

package/lib/esm/websocket/WebSocketAuthSync/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useWebsocketAuthSync';
+export * from './useWebsocketPingPong';

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.d.ts

@@ -0,0 +1,2 @@
+import { AuthenticationInfo } from 'quidproquo-core';
+export declare const useWebsocketAuthSync: (accessToken: AuthenticationInfo['accessToken']) => void;

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { WebsocketServiceEvent } from 'quidproquo-web';
+import { WebsocketClientMessageEventType, } from 'quidproquo-webserver';
+import { useSubscribeToWebsocket, useWebsocketApi, useWebsocketSendEvent } from '../../hooks';
+import { useFastCallback } from '../../../hooks';
+export const useWebsocketAuthSync = (accessToken) => {
+    const sendMessage = useWebsocketSendEvent();
+    const websocketApi = useWebsocketApi();
+    const updateAuthTokens = useFastCallback(() => {
+        if (!websocketApi?.isConnected()) {
+            return;
+        }
+        if (accessToken) {
+            const authMessage = {
+                type: WebsocketClientMessageEventType.Authenticate,
+                payload: {
+                    accessToken: accessToken,
+                },
+            };
+            sendMessage(authMessage);
+        }
+        else {
+            const authMessage = {
+                type: WebsocketClientMessageEventType.Unauthenticate,
+            };
+            sendMessage(authMessage);
+        }
+    });
+    // Sync the tokens in on open
+    useSubscribeToWebsocket(WebsocketServiceEvent.OPEN, updateAuthTokens);
+    // Sync the tokens when they change
+    useEffect(updateAuthTokens, [accessToken, websocketApi]);
+};

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketPingPong.d.ts

@@ -0,0 +1 @@
+export declare const useWebsocketPingPong: () => void;

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketPingPong.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useWebsocketSendEvent } from '../../hooks';
+import { WebsocketClientMessageEventType, } from 'quidproquo-webserver';
+export const useWebsocketPingPong = () => {
+    const sendMessage = useWebsocketSendEvent();
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            const pingEvent = {
+                type: WebsocketClientMessageEventType.Ping,
+            };
+            sendMessage(pingEvent);
+        }, 8 * 60 * 1000);
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [sendMessage]);
+};

package/lib/esm/websocket/WebSocketAuthSync/index.d.ts

@@ -0,0 +1 @@
+export * from './WebSocketAuthSync';

package/lib/esm/websocket/WebSocketAuthSync/index.js

@@ -0,0 +1 @@
+export * from './WebSocketAuthSync';

package/lib/esm/websocket/WebsocketContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WebsocketService } from 'quidproquo-web';
+export declare const WebSocketContext: import("react").Context<WebsocketService | null>;

package/lib/esm/websocket/WebsocketContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const WebSocketContext = createContext(null);

package/lib/esm/websocket/WebsocketProvider.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type WebSocketContextProps = {
+    children: React.ReactNode;
+    wsUrl: string;
+};
+export declare const WebsocketProvider: React.FC<WebSocketContextProps>;

package/lib/esm/websocket/WebsocketProvider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWebsocketManagement } from './hooks';
+import { WebSocketContext } from './WebsocketContext';
+export const WebsocketProvider = ({ children, wsUrl }) => {
+    const websocketManagement = useWebsocketManagement(wsUrl);
+    return (_jsx(WebSocketContext.Provider, { value: websocketManagement, children: children }));
+};

package/lib/esm/websocket/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useSubscribeToWebsocket';
+export * from './useSubscribeToWebSocketEvent';
+export * from './useWebsocketApi';
+export * from './useWebsocketManagement';
+export * from './useWebsocketSendEvent';

package/lib/esm/websocket/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useSubscribeToWebsocket';
+export * from './useSubscribeToWebSocketEvent';
+export * from './useWebsocketApi';
+export * from './useWebsocketManagement';
+export * from './useWebsocketSendEvent';

package/lib/esm/websocket/hooks/useSubscribeToWebSocketEvent.d.ts

@@ -0,0 +1,3 @@
+import { AnyEventMessage } from 'quidproquo-core';
+import { WebSocketServiceEventSubscriptionFunction } from 'quidproquo-web';
+export declare const useSubscribeToWebSocketEvent: <E extends AnyEventMessage>(subscriptionType: E["type"], callback: WebSocketServiceEventSubscriptionFunction<E>) => void;

package/lib/esm/websocket/hooks/useSubscribeToWebSocketEvent.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useWebsocketApi } from './useWebsocketApi';
+export const useSubscribeToWebSocketEvent = (subscriptionType, callback) => {
+    const websocketService = useWebsocketApi();
+    useEffect(() => {
+        const subscriptionHandle = websocketService?.subscribeToEvent(subscriptionType, callback);
+        return () => {
+            if (subscriptionHandle) {
+                websocketService?.unsubscribe(subscriptionHandle);
+            }
+        };
+    }, [websocketService, subscriptionType, callback]);
+};

package/lib/esm/websocket/hooks/useSubscribeToWebsocket.d.ts

@@ -0,0 +1,2 @@
+import { WebSocketServiceSubscriptionFunction, WebsocketServiceEvent } from 'quidproquo-web';
+export declare const useSubscribeToWebsocket: (subscriptionType: WebsocketServiceEvent, callback: WebSocketServiceSubscriptionFunction) => void;

package/lib/esm/websocket/hooks/useSubscribeToWebsocket.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useWebsocketApi } from './useWebsocketApi';
+export const useSubscribeToWebsocket = (subscriptionType, callback) => {
+    const websocketService = useWebsocketApi();
+    useEffect(() => {
+        const handle = websocketService?.subscribe(subscriptionType, callback);
+        return () => {
+            if (handle) {
+                websocketService?.unsubscribe(handle);
+            }
+        };
+    }, [websocketService, subscriptionType, callback]);
+};

package/lib/esm/websocket/hooks/useWebsocketApi.d.ts

@@ -0,0 +1 @@
+export declare const useWebsocketApi: () => import("quidproquo-web").WebsocketService | null;

package/lib/esm/websocket/hooks/useWebsocketApi.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { WebSocketContext } from '../WebsocketContext';
+export const useWebsocketApi = () => {
+    const websocketService = useContext(WebSocketContext);
+    return websocketService;
+};

package/lib/esm/websocket/hooks/useWebsocketManagement.d.ts

@@ -0,0 +1,2 @@
+import { WebsocketService } from 'quidproquo-web';
+export declare const useWebsocketManagement: (wsUrl: string) => WebsocketService | null;

package/lib/esm/websocket/hooks/useWebsocketManagement.js

@@ -0,0 +1,13 @@
+import { WebsocketService } from 'quidproquo-web';
+import { useEffect, useState } from 'react';
+export const useWebsocketManagement = (wsUrl) => {
+    const [websocketApi, setWebsocketApi] = useState(null);
+    useEffect(() => {
+        const wsService = new WebsocketService(wsUrl);
+        setWebsocketApi(wsService);
+        return () => {
+            wsService.destroy();
+        };
+    }, [wsUrl]);
+    return websocketApi;
+};

package/lib/esm/websocket/hooks/useWebsocketSendEvent.d.ts

@@ -0,0 +1,2 @@
+import { AnyEventMessage } from 'quidproquo-core';
+export declare const useWebsocketSendEvent: () => (event: AnyEventMessage) => void;

package/lib/esm/websocket/hooks/useWebsocketSendEvent.js

@@ -0,0 +1,11 @@
+import { useWebsocketApi } from './useWebsocketApi';
+import { useFastCallback } from '../../hooks';
+export const useWebsocketSendEvent = () => {
+    const websocketApi = useWebsocketApi();
+    const sendMessage = useFastCallback((event) => {
+        if (websocketApi) {
+            websocketApi.sendEvent(event);
+        }
+    });
+    return sendMessage;
+};

package/lib/esm/websocket/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './WebSocketAuthSync';
+export * from './WebsocketProvider';

package/lib/esm/websocket/index.js

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './WebSocketAuthSync';
+export * from './WebsocketProvider';

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "quidproquo-web-react",
-  "version": "0.0.199",
+  "version": "0.0.200",
   "description": "",
   "main": "./lib/commonjs/index.js",
-  "types": "./lib/commonjs/index.d.ts",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/esm/index.d.ts",
+  "sideEffects": false,
   "files": [
     "lib/**/*"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "npx rimraf lib && npx rimraf node_modules",
-    "build": "npm run clean && tsc -p tsconfig.commonjs.json",
-    "watch": "tsc -p tsconfig.commonjs.json -w"
+    "build": "npm run clean && npm run build:esm && npm run build:cjs",
+    "watch": "tsc -p tsconfig.esm.json -w",
+    "build:cjs": "tsc -p tsconfig.commonjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json"
   },
   "repository": {
     "type": "git",
@@ -25,10 +29,10 @@
   },
   "homepage": "https://github.com/joe-coady/quidproquo#readme",
   "devDependencies": {
-    "quidproquo-core": "0.0.199",
-    "quidproquo-tsconfig": "0.0.199",
-    "quidproquo-webserver": "0.0.199",
-    "quidproquo-web": "0.0.199",
+    "quidproquo-core": "0.0.200",
+    "quidproquo-tsconfig": "0.0.200",
+    "quidproquo-webserver": "0.0.200",
+    "quidproquo-web": "0.0.200",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {