@trpc/client 11.0.0-alpha-tmp-subscription-connection-state.489 → 11.0.0-alpha-tmp-12-06-react.665

package/dist/links/wsLink.mjs

@@ -1,9 +1,8 @@
-import { observable } from '@trpc/server/observable';
+import { behaviorSubject, observable } from '@trpc/server/observable';
 import { transformResult } from '@trpc/server/unstable-core-do-not-import';
 import { TRPCClientError } from '../TRPCClientError.mjs';
 import { getTransformer } from '../internals/transformer.mjs';
 import { resultOf } from './internals/urlWithConnectionParams.mjs';
-import { isConnectionStateMessage } from './types.mjs';
 
 const run = (fn)=>fn();
 const exponentialBackoff = (attemptIndex)=>attemptIndex === 0 ? 0 : Math.min(1000 * 2 ** attemptIndex, 30000);
@@ -11,8 +10,13 @@ const lazyDefaults = {
     enabled: false,
     closeMs: 0
 };
-function createWSClient(opts) {
-    const { WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff , onOpen , onClose ,  } = 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,
         ...opts.lazy
@@ -28,12 +32,22 @@ function createWSClient(opts) {
     let connectTimer = undefined;
     let connectionIndex = 0;
     let lazyDisconnectTimer = undefined;
-    let activeConnection = lazyOpts.enabled ? null : createConnection(null);
+    let activeConnection = lazyOpts.enabled ? null : createConnection();
+    const initState = activeConnection ? {
+        type: 'state',
+        state: 'connecting',
+        error: null
+    } : {
+        type: 'state',
+        state: 'idle',
+        error: null
+    };
+    const connectionState = behaviorSubject(initState);
     /**
    * tries to send the list of messages
    */ function dispatch() {
         if (!activeConnection) {
-            activeConnection = createConnection(null);
+            reconnect(null);
             return;
         }
         // using a timeout to batch messages
@@ -58,11 +72,10 @@ function createWSClient(opts) {
             startLazyDisconnectTimer();
         });
     }
-    function tryReconnect(conn, cause) {
+    function tryReconnect(cause) {
         if (!!connectTimer) {
             return;
         }
-        conn.state = 'connecting';
         const timeout = retryDelayFn(connectAttempt++);
         reconnectInMs(timeout, cause);
     }
@@ -75,18 +88,30 @@ function createWSClient(opts) {
     }
     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(cause);
-        oldConnection && closeIfNoPending(oldConnection);
+        activeConnection = createConnection();
+        if (oldConnection) {
+            closeIfNoPending(oldConnection);
+        }
+        const currentState = connectionState.get();
+        if (currentState.state !== 'connecting') {
+            connectionState.next({
+                type: 'state',
+                state: 'connecting',
+                error: cause ? TRPCClientError.from(cause) : null
+            });
+        }
     }
     function reconnectInMs(ms, cause) {
         if (connectTimer) {
             return;
         }
-        connectTimer = setTimeout(reconnect, ms, cause);
+        connectTimer = setTimeout(()=>{
+            reconnect(cause);
+        }, ms);
     }
     function closeIfNoPending(conn) {
         // disconnect as soon as there are are no pending requests
@@ -113,37 +138,69 @@ 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);
     };
-    function createConnection(cause) {
+    function createConnection() {
+        let pingTimeout = undefined;
+        let pongTimeout = undefined;
         const self = {
             id: ++connectionIndex,
             state: 'connecting'
         };
-        for (const req of Object.values(pendingRequests)){
-            if (req.type === 'subscription') {
-                req.callbacks.next?.({
-                    result: {
-                        type: 'state',
-                        state: 'connecting',
-                        data: cause ?? null
-                    }
-                });
+        clearTimeout(lazyDisconnectTimer);
+        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';
         }
-        clearTimeout(lazyDisconnectTimer);
-        const onError = (cause)=>{
+        const onCloseOrError = (cause)=>{
+            clearTimeout(pingTimeout);
+            clearTimeout(pongTimeout);
             self.state = 'closed';
-            if (self === activeConnection) {
-                tryReconnect(self, cause);
+            if (activeConnection === self) {
+                // connection might have been replaced already
+                tryReconnect(cause);
+            }
+            for (const [key, req] of Object.entries(pendingRequests)){
+                if (req.connection !== self) {
+                    continue;
+                }
+                // The connection was closed either unexpectedly or because of a reconnect
+                if (req.type === 'subscription') {
+                    // Subscriptions will resume after we've reconnected
+                    resumeSubscriptionOnReconnect(req);
+                } else {
+                    // Queries and mutations will error if interrupted
+                    delete pendingRequests[key];
+                    req.callbacks.error?.(TRPCClientError.from(cause ?? new TRPCWebSocketClosedError()));
+                }
             }
         };
-        run(async ()=>{
-            let url = await resultOf(opts.url);
+        const onError = (evt)=>{
+            onCloseOrError(new TRPCWebSocketClosedError({
+                cause: evt
+            }));
+            opts.onError?.(evt);
+        };
+        function connect(url) {
             if (opts.connectionParams) {
                 // append `?connectionParams=1` when connection params are used
                 const prefix = url.includes('?') ? '&' : '?';
@@ -153,51 +210,78 @@ function createWSClient(opts) {
             self.ws = ws;
             clearTimeout(connectTimer);
             connectTimer = undefined;
-            ws.addEventListener('open', ()=>{
-                run(async ()=>{
-                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+            ws.onopen = ()=>{
+                async function sendConnectionParams() {
+                    if (!opts.connectionParams) {
                         return;
                     }
-                    if (opts.connectionParams) {
-                        const connectMsg = {
-                            method: 'connectionParams',
-                            data: await resultOf(opts.connectionParams)
+                    const connectMsg = {
+                        method: 'connectionParams',
+                        data: await resultOf(opts.connectionParams)
+                    };
+                    ws.send(JSON.stringify(connectMsg));
+                }
+                function handleKeepAlive() {
+                    if (!opts.keepAlive?.enabled) {
+                        return;
+                    }
+                    const { pongTimeoutMs = 1000, intervalMs = 5000 } = opts.keepAlive;
+                    const schedulePing = ()=>{
+                        const schedulePongTimeout = ()=>{
+                            pongTimeout = setTimeout(()=>{
+                                const wasOpen = self.state === 'open';
+                                destroy();
+                                if (wasOpen) {
+                                    opts.onClose?.();
+                                }
+                            }, pongTimeoutMs);
                         };
-                        ws.send(JSON.stringify(connectMsg));
+                        pingTimeout = setTimeout(()=>{
+                            ws.send('PING');
+                            schedulePongTimeout();
+                        }, intervalMs);
+                    };
+                    ws.addEventListener('message', ()=>{
+                        clearTimeout(pingTimeout);
+                        clearTimeout(pongTimeout);
+                        schedulePing();
+                    });
+                    schedulePing();
+                }
+                run(async ()=>{
+                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                        return;
                     }
+                    handleKeepAlive();
+                    await sendConnectionParams();
                     connectAttempt = 0;
                     self.state = 'open';
-                    for (const req of Object.values(pendingRequests)){
-                        if (req.type === 'subscription') {
-                            req.callbacks.next?.({
-                                result: {
-                                    type: 'state',
-                                    state: 'pending'
-                                }
-                            });
-                        }
-                    }
-                    onOpen?.();
+                    // 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(cause);
+                    3000);
+                    onCloseOrError(new TRPCWebSocketClosedError({
+                        message: 'Initialization error',
+                        cause
+                    }));
                 });
-            });
-            ws.addEventListener('error', (event)=>{
-                if (globalThis.ErrorEvent && event instanceof ErrorEvent) {
-                    onError(event.error);
-                } else {
-                    onError(new Error('Unknown WebSocket error'));
-                }
-            });
+            };
+            ws.onerror = onError;
             const handleIncomingRequest = (req)=>{
                 if (self !== activeConnection) {
                     return;
                 }
                 if (req.method === 'reconnect') {
-                    reconnect(new Error('Server requested reconnect'));
+                    reconnect(new TRPCWebSocketClosedError({
+                        message: 'Server requested reconnect'
+                    }));
                     // notify subscribers
                     for (const pendingReq of Object.values(pendingRequests)){
                         if (pendingReq.type === 'subscription') {
@@ -214,10 +298,12 @@ function createWSClient(opts) {
                 }
                 req.callbacks.next?.(data);
                 if (self === activeConnection && req.connection !== activeConnection) {
-                    // gracefully replace old connection with this
-                    const oldConn = req.connection;
+                    // gracefully replace old connection with a new connection
                     req.connection = self;
-                    oldConn && closeIfNoPending(oldConn);
+                }
+                if (req.connection !== self) {
+                    // the connection has been replaced
+                    return;
                 }
                 if ('result' in data && data.result.type === 'data' && typeof data.result.id === 'string') {
                     req.lastEventId = data.result.id;
@@ -226,7 +312,15 @@ function createWSClient(opts) {
                     req.callbacks.complete();
                 }
             };
-            ws.addEventListener('message', ({ data  })=>{
+            ws.onmessage = (event)=>{
+                const { data } = event;
+                if (data === 'PONG') {
+                    return;
+                }
+                if (data === 'PING') {
+                    ws.send('PONG');
+                    return;
+                }
                 startLazyDisconnectTimer();
                 const msg = JSON.parse(data);
                 if ('method' in msg) {
@@ -238,45 +332,26 @@ function createWSClient(opts) {
                     // when receiving a message, we close old connection that has no pending requests
                     closeIfNoPending(self);
                 }
-            });
-            ws.addEventListener('close', ({ code , reason  })=>{
-                if (self.state === 'open') {
-                    onClose?.({
-                        code
-                    });
-                }
-                self.state = 'closed';
-                if (activeConnection === self) {
-                    // connection might have been replaced already
-                    tryReconnect(self, new Error(reason));
-                }
-                for (const [key, req] of Object.entries(pendingRequests)){
-                    if (req.connection !== self) {
-                        continue;
-                    }
-                    if (self.state === 'closed') {
-                        // If the connection was closed, we just call `complete()` on the request
-                        delete pendingRequests[key];
-                        req.callbacks.complete?.();
-                        continue;
-                    }
-                    // The connection was closed either unexpectedly or because of a reconnect
-                    if (req.type === 'subscription') {
-                        // Subscriptions will resume after we've reconnected
-                        resumeSubscriptionOnReconnect(req);
-                    } else {
-                        // Queries and mutations will error if interrupted
-                        delete pendingRequests[key];
-                        req.callbacks.error?.(TRPCClientError.from(new TRPCWebSocketClosedError('WebSocket closed prematurely')));
-                    }
+            };
+            ws.onclose = (event)=>{
+                const wasOpen = self.state === 'open';
+                destroy();
+                onCloseOrError(new TRPCWebSocketClosedError({
+                    cause: event
+                }));
+                if (wasOpen) {
+                    opts.onClose?.(event);
                 }
-            });
-        }).catch(onError);
+            };
+        }
+        Promise.resolve(resultOf(opts.url)).then(connect).catch(()=>{
+            onCloseOrError(new Error('Failed to resolve url'));
+        });
         return self;
     }
     function request(opts) {
-        const { op , callbacks , lastEventId  } = opts;
-        const { type , input , path , id  } = op;
+        const { op, callbacks, lastEventId } = opts;
+        const { type, input, path, id } = op;
         const envelope = {
             id,
             method: type,
@@ -319,10 +394,14 @@ 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.from(new Error('Closed before connection was established')));
+                    req.callbacks.error(TRPCClientError.from(new TRPCWebSocketClosedError({
+                        message: 'Closed before connection was established'
+                    })));
                 }
             }
-            activeConnection && closeIfNoPending(activeConnection);
+            if (activeConnection) {
+                closeIfNoPending(activeConnection);
+            }
             clearTimeout(connectTimer);
             connectTimer = undefined;
             activeConnection = null;
@@ -333,27 +412,43 @@ 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);
     }
 }
 /**
- * @link https://trpc.io/docs/v11/client/links/wsLink
+ * @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 = getTransformer(opts.transformer);
     return ()=>{
-        const { client  } = opts;
-        return ({ op  })=>{
+        const { client } = opts;
+        return ({ op })=>{
             return observable((observer)=>{
-                const { type , path , id , context  } = op;
+                const { type, path, id, context } = op;
                 const input = transformer.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,
@@ -364,58 +459,24 @@ class TRPCWebSocketClosedError extends Error {
                     },
                     callbacks: {
                         error (err) {
-                            observer.next({
-                                result: {
-                                    type: 'state',
-                                    state: 'error',
-                                    data: err
-                                },
-                                context: context
-                            });
                             observer.error(err);
-                            unsub();
+                            unsubscribeRequest();
                         },
                         complete () {
                             observer.complete();
-                            observer.next({
-                                result: {
-                                    type: 'state',
-                                    state: 'idle'
-                                },
-                                context: context
-                            });
                         },
-                        next (message) {
-                            if ('result' in message && isConnectionStateMessage(message.result)) {
-                                message.result;
-                                observer.next({
-                                    result: message.result,
-                                    context: context
-                                });
-                                return;
-                            }
-                            if (!('id' in message)) return;
-                            const transformed = transformResult(message, transformer.output);
+                        next (event) {
+                            const transformed = transformResult(event, transformer.output);
                             if (!transformed.ok) {
-                                const error = TRPCClientError.from(transformed.error);
-                                observer.next({
-                                    result: {
-                                        type: 'state',
-                                        state: 'error',
-                                        data: error
-                                    },
-                                    context: context
-                                });
-                                observer.error(TRPCClientError.from(error));
+                                observer.error(TRPCClientError.from(transformed.error));
                                 return;
                             }
                             observer.next({
-                                result: transformed.result,
-                                context: context
+                                result: transformed.result
                             });
                             if (op.type !== 'subscription') {
                                 // if it isn't a subscription we don't care about next response
-                                unsub();
+                                unsubscribeRequest();
                                 observer.complete();
                             }
                         }
@@ -423,14 +484,8 @@ class TRPCWebSocketClosedError extends Error {
                     lastEventId: undefined
                 });
                 return ()=>{
-                    unsub();
-                    observer.next({
-                        result: {
-                            type: 'state',
-                            state: 'idle'
-                        },
-                        context: context
-                    });
+                    unsubscribeRequest();
+                    connState?.unsubscribe();
                 };
             });
         };

package/dist/links.d.ts

@@ -7,4 +7,5 @@ export * from './links/loggerLink';
 export * from './links/splitLink';
 export * from './links/wsLink';
 export * from './links/httpSubscriptionLink';
+export * from './links/retryLink';
 //# sourceMappingURL=links.d.ts.map

package/dist/links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../src/links.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../src/links.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC"}

package/dist/unstable-internals.d.ts

@@ -1,2 +1,3 @@
 export * from './internals/transformer';
+export * from './links/internals/subscriptions';
 //# sourceMappingURL=unstable-internals.d.ts.map

package/dist/unstable-internals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unstable-internals.d.ts","sourceRoot":"","sources":["../src/unstable-internals.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"unstable-internals.d.ts","sourceRoot":"","sources":["../src/unstable-internals.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "11.0.0-alpha-tmp-subscription-connection-state.489+04c141d1b",
+  "version": "11.0.0-alpha-tmp-12-06-react.665+f3677f632",
   "description": "The tRPC client library",
   "author": "KATT",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "build": "rollup --config rollup.config.ts --configPlugin rollup-plugin-swc3",
     "dev": "pnpm build --watch",
     "codegen-entrypoints": "tsx entrypoints.script.ts",
-    "lint": "eslint --cache --ext \".js,.ts,.tsx\" --ignore-path ../../.gitignore src",
+    "lint": "eslint --cache src",
     "ts-watch": "tsc --watch"
   },
   "exports": {
@@ -73,22 +73,25 @@
     "package.json",
     "links",
     "unstable-internals",
-    "!**/*.test.*"
+    "!**/*.test.*",
+    "!**/__tests__"
   ],
   "peerDependencies": {
-    "@trpc/server": "11.0.0-alpha-tmp-subscription-connection-state.489+04c141d1b"
+    "@trpc/server": "11.0.0-alpha-tmp-12-06-react.665+f3677f632",
+    "typescript": ">=5.6.2"
   },
   "devDependencies": {
-    "@trpc/server": "11.0.0-alpha-tmp-subscription-connection-state.489+04c141d1b",
+    "@trpc/server": "11.0.0-alpha-tmp-12-06-react.665+f3677f632",
     "@types/isomorphic-fetch": "^0.0.39",
-    "@types/node": "^20.10.0",
-    "eslint": "^8.57.0",
+    "@types/node": "^22.9.0",
+    "eslint": "^9.13.0",
     "isomorphic-fetch": "^3.0.0",
     "node-fetch": "^3.3.0",
-    "rollup": "^4.9.5",
-    "tslib": "^2.5.0",
+    "rollup": "^4.24.4",
+    "tslib": "^2.8.1",
     "tsx": "^4.0.0",
-    "undici": "^6.0.1"
+    "typescript": "^5.7.0",
+    "undici": "^7.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -96,5 +99,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "04c141d1b4bb50631826aa956a874ba1d363f492"
+  "gitHead": "f3677f6326d62400c29d1c358db9f3a68a0dd27d"
 }

package/src/TRPCClientError.ts

@@ -90,7 +90,7 @@ export class TRPCClientError<TRouterOrProcedure extends InferrableClientTypes>
   }
 
   public static from<TRouterOrProcedure extends InferrableClientTypes>(
-    _cause: Error | TRPCErrorResponse<any>,
+    _cause: Error | TRPCErrorResponse<any> | object,
     opts: { meta?: Record<string, unknown> } = {},
   ): TRPCClientError<TRouterOrProcedure> {
     const cause = _cause as unknown;