quidproquo-web-react 0.0.191 → 0.0.192

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

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

package/lib/commonjs/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useThrottledMemo"), exports);
+__exportStar(require("./useRunEvery"), exports);
+__exportStar(require("./useFastCallback"), exports);

package/lib/commonjs/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/commonjs/hooks/useFastCallback.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFastCallback = void 0;
+const react_1 = require("react");
+function useFastCallback(callback, deps) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    const depsRef = (0, react_1.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 = (0, react_1.useCallback)((...args) => callbackRef.current(...args), []);
+    return memoFunc;
+}
+exports.useFastCallback = useFastCallback;

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

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

package/lib/commonjs/hooks/useRunEvery.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRunEvery = void 0;
+const react_1 = require("react");
+function useRunEvery(func, interval) {
+    const [value, setValue] = (0, react_1.useState)(func);
+    const intervalRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        intervalRef.current = setInterval(() => {
+            const newValue = func();
+            setValue(newValue);
+        }, interval * 1000);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [interval]);
+    return value;
+}
+exports.useRunEvery = useRunEvery;

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

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

package/lib/commonjs/hooks/useThrottledMemo.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThrottledMemo = void 0;
+const react_1 = require("react");
+function useThrottledMemo(factory, deps, delaySeconds = 1) {
+    const [value, setValue] = (0, react_1.useState)(factory);
+    const isFirstRun = (0, react_1.useRef)(true);
+    const timeoutRef = (0, react_1.useRef)(null);
+    (0, react_1.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;
+}
+exports.useThrottledMemo = useThrottledMemo;

package/lib/commonjs/index.d.ts

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

package/lib/commonjs/index.js

@@ -14,4 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./component"), exports);
+__exportStar(require("./websocket"), exports);
+__exportStar(require("./hooks"), exports);

package/lib/commonjs/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/commonjs/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebSocketAuthSync = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("./hooks");
+const component = ({ children, accessToken }) => {
+    (0, hooks_1.useWebsocketAuthSync)(accessToken);
+    // Keep the active websocket alive
+    (0, hooks_1.useWebsocketPingPong)();
+    // This fragment is not useless!
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.WebSocketAuthSync = (0, react_1.memo)(component);

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useWebsocketAuthSync"), exports);
+__exportStar(require("./useWebsocketPingPong"), exports);

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebsocketAuthSync = void 0;
+const react_1 = require("react");
+const quidproquo_web_1 = require("quidproquo-web");
+const quidproquo_webserver_1 = require("quidproquo-webserver");
+const hooks_1 = require("../../hooks");
+const hooks_2 = require("../../../hooks");
+const useWebsocketAuthSync = (accessToken) => {
+    const sendMessage = (0, hooks_1.useWebsocketSendEvent)();
+    const websocketApi = (0, hooks_1.useWebsocketApi)();
+    const updateAuthTokens = (0, hooks_2.useFastCallback)(() => {
+        if (!(websocketApi === null || websocketApi === void 0 ? void 0 : websocketApi.isConnected())) {
+            return;
+        }
+        if (accessToken) {
+            const authMessage = {
+                type: quidproquo_webserver_1.WebsocketClientMessageEventType.Authenticate,
+                payload: {
+                    accessToken: accessToken,
+                },
+            };
+            sendMessage(authMessage);
+        }
+        else {
+            const authMessage = {
+                type: quidproquo_webserver_1.WebsocketClientMessageEventType.Unauthenticate,
+            };
+            sendMessage(authMessage);
+        }
+    });
+    // Sync the tokens in on open
+    (0, hooks_1.useSubscribeToWebsocket)(quidproquo_web_1.WebsocketServiceEvent.OPEN, updateAuthTokens);
+    // Sync the tokens when they change
+    (0, react_1.useEffect)(updateAuthTokens, [accessToken, websocketApi]);
+};
+exports.useWebsocketAuthSync = useWebsocketAuthSync;

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

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

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebsocketPingPong = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const quidproquo_webserver_1 = require("quidproquo-webserver");
+const useWebsocketPingPong = () => {
+    const sendMessage = (0, hooks_1.useWebsocketSendEvent)();
+    (0, react_1.useEffect)(() => {
+        const intervalId = setInterval(() => {
+            const pingEvent = {
+                type: quidproquo_webserver_1.WebsocketClientMessageEventType.Ping,
+            };
+            sendMessage(pingEvent);
+        }, 8 * 60 * 1000);
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [sendMessage]);
+};
+exports.useWebsocketPingPong = useWebsocketPingPong;

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

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

package/lib/commonjs/{component → websocket/WebSocketAuthSync}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Thing"), exports);
+__exportStar(require("./WebSocketAuthSync"), exports);

package/lib/commonjs/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/commonjs/websocket/WebsocketContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebSocketContext = void 0;
+const react_1 = require("react");
+exports.WebSocketContext = (0, react_1.createContext)(null);

package/lib/commonjs/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/commonjs/websocket/WebsocketProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebsocketProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("./hooks");
+const WebsocketContext_1 = require("./WebsocketContext");
+const WebsocketProvider = ({ children, wsUrl }) => {
+    const websocketManagement = (0, hooks_1.useWebsocketManagement)(wsUrl);
+    return ((0, jsx_runtime_1.jsx)(WebsocketContext_1.WebSocketContext.Provider, Object.assign({ value: websocketManagement }, { children: children })));
+};
+exports.WebsocketProvider = WebsocketProvider;

package/lib/commonjs/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/commonjs/websocket/hooks/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useSubscribeToWebsocket"), exports);
+__exportStar(require("./useSubscribeToWebSocketEvent"), exports);
+__exportStar(require("./useWebsocketApi"), exports);
+__exportStar(require("./useWebsocketManagement"), exports);
+__exportStar(require("./useWebsocketSendEvent"), exports);

package/lib/commonjs/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/commonjs/websocket/hooks/useSubscribeToWebSocketEvent.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubscribeToWebSocketEvent = void 0;
+const react_1 = require("react");
+const useWebsocketApi_1 = require("./useWebsocketApi");
+const useSubscribeToWebSocketEvent = (subscriptionType, callback) => {
+    const websocketService = (0, useWebsocketApi_1.useWebsocketApi)();
+    (0, react_1.useEffect)(() => {
+        const subscriptionHandle = websocketService === null || websocketService === void 0 ? void 0 : websocketService.subscribeToEvent(subscriptionType, callback);
+        return () => {
+            if (subscriptionHandle) {
+                websocketService === null || websocketService === void 0 ? void 0 : websocketService.unsubscribe(subscriptionHandle);
+            }
+        };
+    }, [websocketService, subscriptionType, callback]);
+};
+exports.useSubscribeToWebSocketEvent = useSubscribeToWebSocketEvent;

package/lib/commonjs/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/commonjs/websocket/hooks/useSubscribeToWebsocket.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubscribeToWebsocket = void 0;
+const react_1 = require("react");
+const useWebsocketApi_1 = require("./useWebsocketApi");
+const useSubscribeToWebsocket = (subscriptionType, callback) => {
+    const websocketService = (0, useWebsocketApi_1.useWebsocketApi)();
+    (0, react_1.useEffect)(() => {
+        const handle = websocketService === null || websocketService === void 0 ? void 0 : websocketService.subscribe(subscriptionType, callback);
+        return () => {
+            if (handle) {
+                websocketService === null || websocketService === void 0 ? void 0 : websocketService.unsubscribe(handle);
+            }
+        };
+    }, [websocketService, subscriptionType, callback]);
+};
+exports.useSubscribeToWebsocket = useSubscribeToWebsocket;

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebsocketApi = void 0;
+const react_1 = require("react");
+const WebsocketContext_1 = require("../WebsocketContext");
+const useWebsocketApi = () => {
+    const websocketService = (0, react_1.useContext)(WebsocketContext_1.WebSocketContext);
+    return websocketService;
+};
+exports.useWebsocketApi = useWebsocketApi;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebsocketManagement = void 0;
+const quidproquo_web_1 = require("quidproquo-web");
+const react_1 = require("react");
+const useWebsocketManagement = (wsUrl) => {
+    const [websocketApi, setWebsocketApi] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const wsService = new quidproquo_web_1.WebsocketService(wsUrl);
+        setWebsocketApi(wsService);
+        return () => {
+            wsService.destroy();
+        };
+    }, [wsUrl]);
+    return websocketApi;
+};
+exports.useWebsocketManagement = useWebsocketManagement;

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebsocketSendEvent = void 0;
+const useWebsocketApi_1 = require("./useWebsocketApi");
+const hooks_1 = require("../../hooks");
+const useWebsocketSendEvent = () => {
+    const websocketApi = (0, useWebsocketApi_1.useWebsocketApi)();
+    const sendMessage = (0, hooks_1.useFastCallback)((event) => {
+        if (websocketApi) {
+            websocketApi.sendEvent(event);
+        }
+    });
+    return sendMessage;
+};
+exports.useWebsocketSendEvent = useWebsocketSendEvent;

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

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

package/lib/commonjs/websocket/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./WebSocketAuthSync"), exports);
+__exportStar(require("./WebsocketProvider"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-react",
-  "version": "0.0.191",
+  "version": "0.0.192",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "types": "./lib/commonjs/index.d.ts",
@@ -25,12 +25,13 @@
   },
   "homepage": "https://github.com/joe-coady/quidproquo#readme",
   "devDependencies": {
-    "quidproquo-core": "0.0.191",
-    "quidproquo-tsconfig": "0.0.191",
-    "quidproquo-webserver": "0.0.191",
+    "quidproquo-core": "0.0.192",
+    "quidproquo-tsconfig": "0.0.192",
+    "quidproquo-webserver": "0.0.192",
+    "quidproquo-web": "0.0.192",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   }
-}
+}

package/lib/commonjs/component/Thing.d.ts

@@ -1 +0,0 @@
-export declare const Thing: () => import("react/jsx-runtime").JSX.Element;

package/lib/commonjs/component/Thing.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thing = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Thing = () => (0, jsx_runtime_1.jsx)("div", { children: "Thing" });
-exports.Thing = Thing;

package/lib/commonjs/component/index.d.ts

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