@trpc/client 11.0.0-rc.591 → 11.0.0-rc.593

package/dist/links/wsLink.js

@@ -12,7 +12,12 @@ const lazyDefaults = {
     enabled: false,
     closeMs: 0
 };
-function createWSClient(opts) {
+/**
+ * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
+ */ function createWSClient(opts) {
     const { WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff ,  } = opts;
     const lazyOpts = {
         ...lazyDefaults,
@@ -30,11 +35,21 @@ function createWSClient(opts) {
     let connectionIndex = 0;
     let lazyDisconnectTimer = undefined;
     let activeConnection = lazyOpts.enabled ? null : createConnection();
+    const initState = activeConnection ? {
+        type: 'state',
+        state: 'connecting',
+        error: null
+    } : {
+        type: 'state',
+        state: 'idle',
+        error: null
+    };
+    const connectionState = observable.behaviorSubject(initState);
     /**
    * tries to send the list of messages
    */ function dispatch() {
         if (!activeConnection) {
-            activeConnection = createConnection();
+            reconnect(null);
             return;
         }
         // using a timeout to batch messages
@@ -59,12 +74,12 @@ function createWSClient(opts) {
             startLazyDisconnectTimer();
         });
     }
-    function tryReconnect() {
+    function tryReconnect(cause) {
         if (!!connectTimer) {
             return;
         }
         const timeout = retryDelayFn(connectAttempt++);
-        reconnectInMs(timeout);
+        reconnectInMs(timeout, cause);
     }
     function hasPendingRequests(conn) {
         const requests = Object.values(pendingRequests);
@@ -73,20 +88,30 @@ function createWSClient(opts) {
         }
         return requests.some((req)=>req.connection === conn);
     }
-    function reconnect() {
+    function reconnect(cause) {
         if (lazyOpts.enabled && !hasPendingRequests()) {
-            // Skip reconnecting if there are pending requests and we're in lazy mode
+            // Skip reconnecting if there aren't pending requests and we're in lazy mode
             return;
         }
         const oldConnection = activeConnection;
         activeConnection = createConnection();
         oldConnection && closeIfNoPending(oldConnection);
+        const currentState = connectionState.get();
+        if (currentState.state !== 'connecting') {
+            connectionState.next({
+                type: 'state',
+                state: 'connecting',
+                error: cause ? TRPCClientError.TRPCClientError.from(cause) : null
+            });
+        }
     }
-    function reconnectInMs(ms) {
+    function reconnectInMs(ms, cause) {
         if (connectTimer) {
             return;
         }
-        connectTimer = setTimeout(reconnect, ms);
+        connectTimer = setTimeout(()=>{
+            reconnect(cause);
+        }, ms);
     }
     function closeIfNoPending(conn) {
         // disconnect as soon as there are are no pending requests
@@ -113,9 +138,14 @@ function createWSClient(opts) {
             if (!activeConnection) {
                 return;
             }
-            if (!hasPendingRequests(activeConnection)) {
+            if (!hasPendingRequests()) {
                 activeConnection.ws?.close();
                 activeConnection = null;
+                connectionState.next({
+                    type: 'state',
+                    state: 'idle',
+                    error: null
+                });
             }
         }, lazyOpts.closeMs);
     };
@@ -127,16 +157,27 @@ function createWSClient(opts) {
             state: 'connecting'
         };
         clearTimeout(lazyDisconnectTimer);
-        const onCloseOrError = ()=>{
+        function destroy() {
+            const noop = ()=>{
+            // no-op
+            };
+            const { ws  } = self;
+            if (ws) {
+                ws.onclose = noop;
+                ws.onerror = noop;
+                ws.onmessage = noop;
+                ws.onopen = noop;
+                ws.close();
+            }
+            self.state = 'closed';
+        }
+        const onCloseOrError = (cause)=>{
             clearTimeout(pingTimeout);
             clearTimeout(pongTimeout);
-            if (self.state === 'closed') {
-                return;
-            }
             self.state = 'closed';
             if (activeConnection === self) {
                 // connection might have been replaced already
-                tryReconnect();
+                tryReconnect(cause);
             }
             for (const [key, req] of Object.entries(pendingRequests)){
                 if (req.connection !== self) {
@@ -149,25 +190,17 @@ function createWSClient(opts) {
                 } else {
                     // Queries and mutations will error if interrupted
                     delete pendingRequests[key];
-                    req.callbacks.error?.(TRPCClientError.TRPCClientError.from(new TRPCWebSocketClosedError('WebSocket closed prematurely')));
+                    req.callbacks.error?.(TRPCClientError.TRPCClientError.from(cause ?? new TRPCWebSocketClosedError()));
                 }
             }
         };
-        const onClose = (code)=>{
-            const wasOpen = self.state === 'open';
-            onCloseOrError();
-            if (wasOpen) {
-                opts.onClose?.({
-                    code
-                });
-            }
-        };
         const onError = (evt)=>{
-            onCloseOrError();
+            onCloseOrError(new TRPCWebSocketClosedError({
+                cause: evt
+            }));
             opts.onError?.(evt);
         };
-        run(async ()=>{
-            let url = await urlWithConnectionParams.resultOf(opts.url);
+        function connect(url) {
             if (opts.connectionParams) {
                 // append `?connectionParams=1` when connection params are used
                 const prefix = url.includes('?') ? '&' : '?';
@@ -177,7 +210,7 @@ function createWSClient(opts) {
             self.ws = ws;
             clearTimeout(connectTimer);
             connectTimer = undefined;
-            ws.addEventListener('open', ()=>{
+            ws.onopen = ()=>{
                 async function sendConnectionParams() {
                     if (!opts.connectionParams) {
                         return;
@@ -196,8 +229,11 @@ function createWSClient(opts) {
                     const schedulePing = ()=>{
                         const schedulePongTimeout = ()=>{
                             pongTimeout = setTimeout(()=>{
-                                ws.close(3001);
-                                onClose(3001);
+                                const wasOpen = self.state === 'open';
+                                destroy();
+                                if (wasOpen) {
+                                    opts.onClose?.();
+                                }
                             }, pongTimeoutMs);
                         };
                         pingTimeout = setTimeout(()=>{
@@ -220,21 +256,32 @@ function createWSClient(opts) {
                     await sendConnectionParams();
                     connectAttempt = 0;
                     self.state = 'open';
+                    // Update connection state
+                    connectionState.next({
+                        type: 'state',
+                        state: 'pending',
+                        error: null
+                    });
                     opts.onOpen?.();
                     dispatch();
                 }).catch((cause)=>{
                     ws.close(// "Status codes in the range 3000-3999 are reserved for use by libraries, frameworks, and applications"
-                    3000, cause);
-                    onError();
+                    3000);
+                    onCloseOrError(new TRPCWebSocketClosedError({
+                        message: 'Initialization error',
+                        cause
+                    }));
                 });
-            });
-            ws.addEventListener('error', onError);
+            };
+            ws.onerror = onError;
             const handleIncomingRequest = (req)=>{
                 if (self !== activeConnection) {
                     return;
                 }
                 if (req.method === 'reconnect') {
-                    reconnect();
+                    reconnect(new TRPCWebSocketClosedError({
+                        message: 'Server requested reconnect'
+                    }));
                     // notify subscribers
                     for (const pendingReq of Object.values(pendingRequests)){
                         if (pendingReq.type === 'subscription') {
@@ -265,7 +312,8 @@ function createWSClient(opts) {
                     req.callbacks.complete();
                 }
             };
-            ws.addEventListener('message', ({ data  })=>{
+            ws.onmessage = (event)=>{
+                const { data  } = event;
                 if (data === 'PONG') {
                     return;
                 }
@@ -284,17 +332,21 @@ function createWSClient(opts) {
                     // when receiving a message, we close old connection that has no pending requests
                     closeIfNoPending(self);
                 }
-            });
-            ws.addEventListener('close', ({ code  })=>{
+            };
+            ws.onclose = (event)=>{
                 const wasOpen = self.state === 'open';
-                onCloseOrError();
+                destroy();
+                onCloseOrError(new TRPCWebSocketClosedError({
+                    cause: event
+                }));
                 if (wasOpen) {
-                    opts.onClose?.({
-                        code
-                    });
+                    opts.onClose?.(event);
                 }
-            });
-        }).catch(onError);
+            };
+        }
+        Promise.resolve(urlWithConnectionParams.resultOf(opts.url)).then(connect).catch(()=>{
+            onCloseOrError(new Error('Failed to resolve url'));
+        });
         return self;
     }
     function request(opts) {
@@ -342,7 +394,9 @@ function createWSClient(opts) {
                     req.callbacks.complete();
                 } else if (!req.connection) {
                     // close pending requests that aren't attached to a connection yet
-                    req.callbacks.error(TRPCClientError.TRPCClientError.from(new Error('Closed before connection was established')));
+                    req.callbacks.error(TRPCClientError.TRPCClientError.from(new TRPCWebSocketClosedError({
+                        message: 'Closed before connection was established'
+                    })));
                 }
             }
             activeConnection && closeIfNoPending(activeConnection);
@@ -356,18 +410,26 @@ function createWSClient(opts) {
         },
         /**
      * Reconnect to the WebSocket server
-     */ reconnect
+     */ reconnect,
+        connectionState: connectionState
     };
 }
 class TRPCWebSocketClosedError extends Error {
-    constructor(message){
-        super(message);
+    constructor(opts){
+        super(opts?.message ?? 'WebSocket closed', // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore https://github.com/tc39/proposal-error-cause
+        {
+            cause: opts?.cause
+        });
         this.name = 'TRPCWebSocketClosedError';
         Object.setPrototypeOf(this, TRPCWebSocketClosedError.prototype);
     }
 }
 /**
  * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
  */ function wsLink(opts) {
     const transformer$1 = transformer.getTransformer(opts.transformer);
     return ()=>{
@@ -376,7 +438,15 @@ class TRPCWebSocketClosedError extends Error {
             return observable.observable((observer)=>{
                 const { type , path , id , context  } = op;
                 const input = transformer$1.input.serialize(op.input);
-                const unsub = client.request({
+                const connState = type === 'subscription' ? client.connectionState.subscribe({
+                    next (result) {
+                        observer.next({
+                            result,
+                            context
+                        });
+                    }
+                }) : null;
+                const unsubscribeRequest = client.request({
                     op: {
                         type,
                         path,
@@ -388,13 +458,13 @@ class TRPCWebSocketClosedError extends Error {
                     callbacks: {
                         error (err) {
                             observer.error(err);
-                            unsub();
+                            unsubscribeRequest();
                         },
                         complete () {
                             observer.complete();
                         },
-                        next (message) {
-                            const transformed = unstableCoreDoNotImport.transformResult(message, transformer$1.output);
+                        next (event) {
+                            const transformed = unstableCoreDoNotImport.transformResult(event, transformer$1.output);
                             if (!transformed.ok) {
                                 observer.error(TRPCClientError.TRPCClientError.from(transformed.error));
                                 return;
@@ -404,7 +474,7 @@ class TRPCWebSocketClosedError extends Error {
                             });
                             if (op.type !== 'subscription') {
                                 // if it isn't a subscription we don't care about next response
-                                unsub();
+                                unsubscribeRequest();
                                 observer.complete();
                             }
                         }
@@ -412,7 +482,8 @@ class TRPCWebSocketClosedError extends Error {
                     lastEventId: undefined
                 });
                 return ()=>{
-                    unsub();
+                    unsubscribeRequest();
+                    connState?.unsubscribe();
                 };
             });
         };