@trpc/client 11.0.0-rc.433 → 11.0.0-rc.436

package/dist/bundle-analysis.json

@@ -1,20 +1,20 @@
 {
-  "bundleSize": 50717,
-  "bundleOrigSize": 67680,
-  "bundleReduction": 25.06,
+  "bundleSize": 52206,
+  "bundleOrigSize": 69751,
+  "bundleReduction": 25.15,
   "modules": [
     {
       "id": "/src/links/wsLink.ts",
-      "size": 12058,
-      "origSize": 13652,
+      "size": 13035,
+      "origSize": 14542,
       "renderedExports": [
         "createWSClient",
         "wsLink"
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 23.78,
-      "reduction": 11.68
+      "percent": 24.97,
+      "reduction": 10.36
     },
     {
       "id": "/src/links/httpBatchStreamLink.ts",
@@ -25,7 +25,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 12.3,
+      "percent": 11.95,
       "reduction": 2.55
     },
     {
@@ -37,7 +37,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 10.76,
+      "percent": 10.45,
       "reduction": 18.48
     },
     {
@@ -52,7 +52,7 @@
         "/src/links/httpBatchLink.ts",
         "/src/links/httpBatchStreamLink.ts"
       ],
-      "percent": 8.88,
+      "percent": 8.63,
       "reduction": 6.34
     },
     {
@@ -64,13 +64,13 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 7.95,
+      "percent": 7.72,
       "reduction": 3.43
     },
     {
       "id": "/src/links/internals/httpUtils.ts",
-      "size": 3443,
-      "origSize": 5895,
+      "size": 3543,
+      "origSize": 6008,
       "renderedExports": [
         "resolveHTTPLinkOptions",
         "getInput",
@@ -82,25 +82,25 @@
       ],
       "removedExports": [],
       "dependents": [
-        "/src/links/httpBatchLink.ts",
         "/src/links/httpLink.ts",
+        "/src/links/httpBatchLink.ts",
         "/src/links/httpBatchStreamLink.ts",
         "/src/links/httpSubscriptionLink.ts"
       ],
       "percent": 6.79,
-      "reduction": 41.59
+      "reduction": 41.03
     },
     {
       "id": "/src/links/httpSubscriptionLink.ts",
-      "size": 3277,
-      "origSize": 3550,
+      "size": 3531,
+      "origSize": 3761,
       "renderedExports": [
         "unstable_httpSubscriptionLink"
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 6.46,
-      "reduction": 7.69
+      "percent": 6.76,
+      "reduction": 6.12
     },
     {
       "id": "/src/links/httpLink.ts",
@@ -111,7 +111,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 6.24,
+      "percent": 6.07,
       "reduction": 14.36
     },
     {
@@ -126,7 +126,7 @@
         "/src/createTRPCUntypedClient.ts",
         "/src/createTRPCClient.ts"
       ],
-      "percent": 4.68,
+      "percent": 4.54,
       "reduction": 44.91
     },
     {
@@ -139,15 +139,15 @@
       "removedExports": [],
       "dependents": [
         "/src/index.ts",
-        "/src/links/httpBatchLink.ts",
         "/src/links/httpLink.ts",
+        "/src/links/httpBatchLink.ts",
         "/src/links/wsLink.ts",
         "/src/links/httpBatchStreamLink.ts",
         "/src/links/httpSubscriptionLink.ts",
         "/src/internals/TRPCUntypedClient.ts",
         "/src/links/internals/httpUtils.ts"
       ],
-      "percent": 3.68,
+      "percent": 3.57,
       "reduction": 45.71
     },
     {
@@ -164,7 +164,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 2.34,
+      "percent": 2.27,
       "reduction": 73.19
     },
     {
@@ -179,7 +179,7 @@
         "/src/links/splitLink.ts",
         "/src/internals/TRPCUntypedClient.ts"
       ],
-      "percent": 1.36,
+      "percent": 1.32,
       "reduction": 32.75
     },
     {
@@ -191,7 +191,7 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 1.2,
+      "percent": 1.17,
       "reduction": 44.95
     },
     {
@@ -205,7 +205,7 @@
       "dependents": [
         "/src/unstable-internals.ts"
       ],
-      "percent": 1.11,
+      "percent": 1.08,
       "reduction": 66.75
     },
     {
@@ -220,7 +220,7 @@
         "/src/index.ts",
         "/src/links/internals/httpUtils.ts"
       ],
-      "percent": 0.84,
+      "percent": 0.82,
       "reduction": 33.54
     },
     {
@@ -234,7 +234,7 @@
       "dependents": [
         "/src/links/internals/httpUtils.ts"
       ],
-      "percent": 0.78,
+      "percent": 0.76,
       "reduction": 30.4
     },
     {
@@ -248,9 +248,24 @@
       ],
       "removedExports": [],
       "dependents": [],
-      "percent": 0.65,
+      "percent": 0.63,
       "reduction": 15.17
     },
+    {
+      "id": "/src/links/internals/urlWithConnectionParams.ts",
+      "size": 158,
+      "origSize": 857,
+      "renderedExports": [
+        "resultOf"
+      ],
+      "removedExports": [],
+      "dependents": [
+        "/src/links/wsLink.ts",
+        "/src/links/httpSubscriptionLink.ts"
+      ],
+      "percent": 0.3,
+      "reduction": 81.56
+    },
     {
       "id": "/src/createTRPCUntypedClient.ts",
       "size": 100,
@@ -262,7 +277,7 @@
       "dependents": [
         "/src/index.ts"
       ],
-      "percent": 0.2,
+      "percent": 0.19,
       "reduction": 82.58
     },
     {
@@ -290,5 +305,5 @@
       "reduction": 100
     }
   ],
-  "moduleCount": 20
+  "moduleCount": 21
 }

package/dist/links/httpSubscriptionLink.d.ts

@@ -1,16 +1,13 @@
-import type { AnyClientTypes, inferClientTypes, InferrableClientTypes, MaybePromise } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyClientTypes, inferClientTypes, InferrableClientTypes } from '@trpc/server/unstable-core-do-not-import';
 import { type TransformerOptions } from '../unstable-internals';
+import { type UrlOptionsWithConnectionParams } from './internals/urlWithConnectionParams';
 import type { TRPCLink } from './types';
 type HTTPSubscriptionLinkOptions<TRoot extends AnyClientTypes> = {
-    /**
-     * The URL to connect to (can be a function that returns a URL)
-     */
-    url: string | (() => MaybePromise<string>);
     /**
      * EventSource options
      */
     eventSourceOptions?: EventSourceInit;
-} & TransformerOptions<TRoot>;
+} & TransformerOptions<TRoot> & UrlOptionsWithConnectionParams;
 /**
  * @see https://trpc.io/docs/client/links/httpSubscriptionLink
  */

package/dist/links/httpSubscriptionLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"httpSubscriptionLink.d.ts","sourceRoot":"","sources":["../../src/links/httpSubscriptionLink.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,YAAY,EAEb,MAAM,0CAA0C,CAAC;AAMlD,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,KAAK,2BAA2B,CAAC,KAAK,SAAS,cAAc,IAAI;IAC/D;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAS9B;;GAEG;AACH,wBAAgB,6BAA6B,CAC3C,WAAW,SAAS,qBAAqB,EAEzC,IAAI,EAAE,2BAA2B,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,GAC/D,QAAQ,CAAC,WAAW,CAAC,CA8EvB"}
+{"version":3,"file":"httpSubscriptionLink.d.ts","sourceRoot":"","sources":["../../src/links/httpSubscriptionLink.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EAEtB,MAAM,0CAA0C,CAAC;AAMlD,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiBxC,KAAK,2BAA2B,CAAC,KAAK,SAAS,cAAc,IAAI;IAC/D;;OAEG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAC3B,8BAA8B,CAAC;AAEjC;;GAEG;AACH,wBAAgB,6BAA6B,CAC3C,WAAW,SAAS,qBAAqB,EAEzC,IAAI,EAAE,2BAA2B,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,GAC/D,QAAQ,CAAC,WAAW,CAAC,CA8EvB"}

package/dist/links/httpSubscriptionLink.js

@@ -5,12 +5,17 @@ var unstableCoreDoNotImport = require('@trpc/server/unstable-core-do-not-import'
 var TRPCClientError = require('../TRPCClientError.js');
 var transformer = require('../internals/transformer.js');
 var httpUtils = require('./internals/httpUtils.js');
+var urlWithConnectionParams$1 = require('./internals/urlWithConnectionParams.js');
 
-/**
- * Get the result of a value or function that returns a value
- */ const resultOf = (value)=>{
-    return typeof value === 'function' ? value() : value;
-};
+async function urlWithConnectionParams(opts) {
+    let url = await urlWithConnectionParams$1.resultOf(opts.url);
+    if (opts.connectionParams) {
+        const params = await urlWithConnectionParams$1.resultOf(opts.connectionParams);
+        const prefix = url.includes('?') ? '&' : '?';
+        url += prefix + 'connectionParams=' + encodeURIComponent(JSON.stringify(params));
+    }
+    return url;
+}
 /**
  * @see https://trpc.io/docs/client/links/httpSubscriptionLink
  */ function unstable_httpSubscriptionLink(opts) {
@@ -27,7 +32,7 @@ var httpUtils = require('./internals/httpUtils.js');
                 unstableCoreDoNotImport.run(async ()=>{
                     const url = httpUtils.getUrl({
                         transformer: transformer$1,
-                        url: await resultOf(opts.url),
+                        url: await urlWithConnectionParams(opts),
                         input,
                         path,
                         type,

package/dist/links/httpSubscriptionLink.mjs

@@ -3,12 +3,17 @@ import { run, sseStreamConsumer } from '@trpc/server/unstable-core-do-not-import
 import { TRPCClientError } from '../TRPCClientError.mjs';
 import { getTransformer } from '../internals/transformer.mjs';
 import { getUrl } from './internals/httpUtils.mjs';
+import { resultOf } from './internals/urlWithConnectionParams.mjs';
 
-/**
- * Get the result of a value or function that returns a value
- */ const resultOf = (value)=>{
-    return typeof value === 'function' ? value() : value;
-};
+async function urlWithConnectionParams(opts) {
+    let url = await resultOf(opts.url);
+    if (opts.connectionParams) {
+        const params = await resultOf(opts.connectionParams);
+        const prefix = url.includes('?') ? '&' : '?';
+        url += prefix + 'connectionParams=' + encodeURIComponent(JSON.stringify(params));
+    }
+    return url;
+}
 /**
  * @see https://trpc.io/docs/client/links/httpSubscriptionLink
  */ function unstable_httpSubscriptionLink(opts) {
@@ -25,7 +30,7 @@ import { getUrl } from './internals/httpUtils.mjs';
                 run(async ()=>{
                     const url = getUrl({
                         transformer,
-                        url: await resultOf(opts.url),
+                        url: await urlWithConnectionParams(opts),
                         input,
                         path,
                         type,

package/dist/links/internals/httpUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"httpUtils.d.ts","sourceRoot":"","sources":["../../../src/links/internals/httpUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"httpUtils.d.ts","sourceRoot":"","sources":["../../../src/links/internals/httpUtils.ts"],"names":[],"mappings":"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"}

package/dist/links/internals/httpUtils.js

@@ -32,9 +32,13 @@ function getInput(opts) {
     return 'input' in opts ? opts.transformer.input.serialize(opts.input) : arrayToDict(opts.inputs.map((_input)=>opts.transformer.input.serialize(_input)));
 }
 const getUrl = (opts)=>{
-    const base = opts.url.replace(/\/$/, ''); // Remove any trailing slashes
+    const parts = opts.url.split('?');
+    const base = parts[0].replace(/\/$/, ''); // Remove any trailing slashes
     let url = base + '/' + opts.path;
     const queryParts = [];
+    if (parts[1]) {
+        queryParts.push(parts[1]);
+    }
     if ('inputs' in opts) {
         queryParts.push('batch=1');
     }

package/dist/links/internals/httpUtils.mjs

@@ -30,9 +30,13 @@ function getInput(opts) {
     return 'input' in opts ? opts.transformer.input.serialize(opts.input) : arrayToDict(opts.inputs.map((_input)=>opts.transformer.input.serialize(_input)));
 }
 const getUrl = (opts)=>{
-    const base = opts.url.replace(/\/$/, ''); // Remove any trailing slashes
+    const parts = opts.url.split('?');
+    const base = parts[0].replace(/\/$/, ''); // Remove any trailing slashes
     let url = base + '/' + opts.path;
     const queryParts = [];
+    if (parts[1]) {
+        queryParts.push(parts[1]);
+    }
     if ('inputs' in opts) {
         queryParts.push('batch=1');
     }

package/dist/links/internals/urlWithConnectionParams.d.ts

@@ -0,0 +1,23 @@
+import { type TRPCRequestInfo } from '@trpc/server/http';
+/**
+ * Get the result of a value or function that returns a value
+ */
+export declare const resultOf: <T>(value: T | (() => T)) => T;
+/**
+ * A value that can be wrapped in callback
+ */
+type CallbackOrValue<T> = T | (() => T | Promise<T>);
+export interface UrlOptionsWithConnectionParams {
+    /**
+     * The URL to connect to (can be a function that returns a URL)
+     */
+    url: CallbackOrValue<string>;
+    /**
+     * Connection params that are available in `createContext()`
+     * - For `wsLink`/`wsClient`, these are sent as the first message
+     * - For `httpSubscriptionLink`, these are serialized as part of the URL under the `connectionParams` query
+     */
+    connectionParams?: CallbackOrValue<TRPCRequestInfo['connectionParams']>;
+}
+export {};
+//# sourceMappingURL=urlWithConnectionParams.d.ts.map

package/dist/links/internals/urlWithConnectionParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlWithConnectionParams.d.ts","sourceRoot":"","sources":["../../../src/links/internals/urlWithConnectionParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,KAAG,CAElD,CAAC;AAEF;;GAEG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAErD,MAAM,WAAW,8BAA8B;IAC7C;;OAEG;IACH,GAAG,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAE7B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,CAAC;CACzE"}

package/dist/links/internals/urlWithConnectionParams.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * Get the result of a value or function that returns a value
+ */ const resultOf = (value)=>{
+    return typeof value === 'function' ? value() : value;
+};
+
+exports.resultOf = resultOf;

package/dist/links/internals/urlWithConnectionParams.mjs

@@ -0,0 +1,7 @@
+/**
+ * Get the result of a value or function that returns a value
+ */ const resultOf = (value)=>{
+    return typeof value === 'function' ? value() : value;
+};
+
+export { resultOf };

package/dist/links/wsLink.d.ts

@@ -1,16 +1,13 @@
 import type { Observer, UnsubscribeFn } from '@trpc/server/observable';
-import type { AnyRouter, inferClientTypes, inferRouterError, MaybePromise, TRPCResponseMessage } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyRouter, inferClientTypes, inferRouterError, TRPCResponseMessage } from '@trpc/server/unstable-core-do-not-import';
 import { TRPCClientError } from '../TRPCClientError';
 import type { TransformerOptions } from '../unstable-internals';
+import { type UrlOptionsWithConnectionParams } from './internals/urlWithConnectionParams';
 import type { Operation, TRPCLink } from './types';
 type WSCallbackResult<TRouter extends AnyRouter, TOutput> = TRPCResponseMessage<TOutput, inferRouterError<TRouter>>;
 type WSCallbackObserver<TRouter extends AnyRouter, TOutput> = Observer<WSCallbackResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
 declare const exponentialBackoff: (attemptIndex: number) => number;
-export interface WebSocketClientOptions {
-    /**
-     * The URL to connect to (can be a function that returns a URL)
-     */
-    url: string | (() => MaybePromise<string>);
+export interface WebSocketClientOptions extends UrlOptionsWithConnectionParams {
     /**
      * Ponyfill which WebSocket implementation to use
      */
@@ -61,6 +58,10 @@ export declare function createWSClient(opts: WebSocketClientOptions): {
         state: "connecting";
         ws?: WebSocket;
     })) | null;
+    /**
+     * Reconnect to the WebSocket server
+     */
+    reconnect: () => void;
 };
 export type TRPCWebSocketClient = ReturnType<typeof createWSClient>;
 export type WebSocketLinkOptions<TRouter extends AnyRouter> = {

package/dist/links/wsLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wsLink.d.ts","sourceRoot":"","sources":["../../src/links/wsLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EAMZ,mBAAmB,EACpB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInD,KAAK,gBAAgB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,mBAAmB,CAC7E,OAAO,EACP,gBAAgB,CAAC,OAAO,CAAC,CAC1B,CAAC;AAEF,KAAK,kBAAkB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,QAAQ,CACpE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,EAClC,eAAe,CAAC,OAAO,CAAC,CACzB,CAAC;AAEF,QAAA,MAAM,kBAAkB,iBAAkB,MAAM,WACoB,CAAC;AAErE,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,SAAS,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;;WAGG;QACH,OAAO,EAAE,OAAO,CAAC;QACjB;;;WAGG;QACH,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAOD,wBAAgB,cAAc,CAAC,IAAI,EAAE,sBAAsB;;kBAgSpC,SAAS,wDAA0B,aAAa;;YAhP/D,MAAM;;eAGC,MAAM;YACT,SAAS;;eAGN,QAAQ;YACX,SAAS;;eAGN,YAAY;aACd,SAAS;;EAoSrB;AACD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,IAAI;IAC5D,MAAM,EAAE,mBAAmB,CAAC;CAC7B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AASlD;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,SAAS,SAAS,EAC9C,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAClC,QAAQ,CAAC,OAAO,CAAC,CA8CnB"}
+{"version":3,"file":"wsLink.d.ts","sourceRoot":"","sources":["../../src/links/wsLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAMhB,mBAAmB,EACpB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInD,KAAK,gBAAgB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,mBAAmB,CAC7E,OAAO,EACP,gBAAgB,CAAC,OAAO,CAAC,CAC1B,CAAC;AAEF,KAAK,kBAAkB,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,IAAI,QAAQ,CACpE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,EAClC,eAAe,CAAC,OAAO,CAAC,CACzB,CAAC;AAEF,QAAA,MAAM,kBAAkB,iBAAkB,MAAM,WACoB,CAAC;AAErE,MAAM,WAAW,sBAAuB,SAAQ,8BAA8B;IAC5E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,SAAS,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;;WAGG;QACH,OAAO,EAAE,OAAO,CAAC;QACjB;;;WAGG;QACH,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAOD,wBAAgB,cAAc,CAAC,IAAI,EAAE,sBAAsB;;kBAuTpC,SAAS,wDAA0B,aAAa;;YAxQ/D,MAAM;;eAGC,MAAM;YACT,SAAS;;eAGN,QAAQ;YACX,SAAS;;eAGN,YAAY;aACd,SAAS;;IA2TlB;;OAEG;;EAGN;AACD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,IAAI;IAC5D,MAAM,EAAE,mBAAmB,CAAC;CAC7B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AASlD;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,SAAS,SAAS,EAC9C,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAClC,QAAQ,CAAC,OAAO,CAAC,CA8CnB"}

package/dist/links/wsLink.js

@@ -4,6 +4,7 @@ var observable = require('@trpc/server/observable');
 var unstableCoreDoNotImport = require('@trpc/server/unstable-core-do-not-import');
 var TRPCClientError = require('../TRPCClientError.js');
 var transformer = require('../internals/transformer.js');
+var urlWithConnectionParams = require('./internals/urlWithConnectionParams.js');
 
 const run = (fn)=>fn();
 const exponentialBackoff = (attemptIndex)=>attemptIndex === 0 ? 0 : Math.min(1000 * 2 ** attemptIndex, 30000);
@@ -12,7 +13,7 @@ const lazyDefaults = {
     closeMs: 0
 };
 function createWSClient(opts) {
-    const { url , WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff , onOpen , onClose ,  } = opts;
+    const { WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff , onOpen , onClose ,  } = opts;
     const lazyOpts = {
         ...lazyDefaults,
         ...opts.lazy
@@ -128,19 +129,37 @@ function createWSClient(opts) {
             }
         };
         run(async ()=>{
-            const urlString = typeof url === 'function' ? await url() : url;
-            const ws = new WebSocketImpl(urlString);
+            let url = await urlWithConnectionParams.resultOf(opts.url);
+            if (opts.connectionParams) {
+                // append `?connectionParams=1` when connection params are used
+                const prefix = url.includes('?') ? '&' : '?';
+                url += prefix + 'connectionParams=1';
+            }
+            const ws = new WebSocketImpl(url);
             self.ws = ws;
             clearTimeout(connectTimer);
             connectTimer = undefined;
             ws.addEventListener('open', ()=>{
-                /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
-                    return;
-                }
-                connectAttempt = 0;
-                self.state = 'open';
-                onOpen?.();
-                dispatch();
+                run(async ()=>{
+                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                        return;
+                    }
+                    if (opts.connectionParams) {
+                        const connectMsg = {
+                            method: 'connectionParams',
+                            data: await urlWithConnectionParams.resultOf(opts.connectionParams)
+                        };
+                        ws.send(JSON.stringify(connectMsg));
+                    }
+                    connectAttempt = 0;
+                    self.state = 'open';
+                    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();
+                });
             });
             ws.addEventListener('error', onError);
             const handleIncomingRequest = (req)=>{
@@ -275,7 +294,10 @@ function createWSClient(opts) {
         request,
         get connection () {
             return activeConnection;
-        }
+        },
+        /**
+     * Reconnect to the WebSocket server
+     */ reconnect
     };
 }
 class TRPCWebSocketClosedError extends Error {

package/dist/links/wsLink.mjs

@@ -2,6 +2,7 @@ import { 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';
 
 const run = (fn)=>fn();
 const exponentialBackoff = (attemptIndex)=>attemptIndex === 0 ? 0 : Math.min(1000 * 2 ** attemptIndex, 30000);
@@ -10,7 +11,7 @@ const lazyDefaults = {
     closeMs: 0
 };
 function createWSClient(opts) {
-    const { url , WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff , onOpen , onClose ,  } = opts;
+    const { WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff , onOpen , onClose ,  } = opts;
     const lazyOpts = {
         ...lazyDefaults,
         ...opts.lazy
@@ -126,19 +127,37 @@ function createWSClient(opts) {
             }
         };
         run(async ()=>{
-            const urlString = typeof url === 'function' ? await url() : url;
-            const ws = new WebSocketImpl(urlString);
+            let url = await resultOf(opts.url);
+            if (opts.connectionParams) {
+                // append `?connectionParams=1` when connection params are used
+                const prefix = url.includes('?') ? '&' : '?';
+                url += prefix + 'connectionParams=1';
+            }
+            const ws = new WebSocketImpl(url);
             self.ws = ws;
             clearTimeout(connectTimer);
             connectTimer = undefined;
             ws.addEventListener('open', ()=>{
-                /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
-                    return;
-                }
-                connectAttempt = 0;
-                self.state = 'open';
-                onOpen?.();
-                dispatch();
+                run(async ()=>{
+                    /* istanbul ignore next -- @preserve */ if (activeConnection?.ws !== ws) {
+                        return;
+                    }
+                    if (opts.connectionParams) {
+                        const connectMsg = {
+                            method: 'connectionParams',
+                            data: await resultOf(opts.connectionParams)
+                        };
+                        ws.send(JSON.stringify(connectMsg));
+                    }
+                    connectAttempt = 0;
+                    self.state = 'open';
+                    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();
+                });
             });
             ws.addEventListener('error', onError);
             const handleIncomingRequest = (req)=>{
@@ -273,7 +292,10 @@ function createWSClient(opts) {
         request,
         get connection () {
             return activeConnection;
-        }
+        },
+        /**
+     * Reconnect to the WebSocket server
+     */ reconnect
     };
 }
 class TRPCWebSocketClosedError extends Error {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "11.0.0-rc.433+014d1c839",
+  "version": "11.0.0-rc.436+fbb4a2fb4",
   "description": "The tRPC client library",
   "author": "KATT",
   "license": "MIT",
@@ -76,10 +76,10 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@trpc/server": "11.0.0-rc.433+014d1c839"
+    "@trpc/server": "11.0.0-rc.436+fbb4a2fb4"
   },
   "devDependencies": {
-    "@trpc/server": "11.0.0-rc.433+014d1c839",
+    "@trpc/server": "11.0.0-rc.436+fbb4a2fb4",
     "@types/isomorphic-fetch": "^0.0.39",
     "@types/node": "^20.10.0",
     "eslint": "^8.56.0",
@@ -96,5 +96,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "014d1c839e43d41863559f534c836ad17d8bfc83"
+  "gitHead": "fbb4a2fb4b71d2f5ab7ee97617d951f3a92517c8"
 }

package/src/links/httpSubscriptionLink.ts

@@ -3,7 +3,6 @@ import type {
   AnyClientTypes,
   inferClientTypes,
   InferrableClientTypes,
-  MaybePromise,
   SSEMessage,
 } from '@trpc/server/unstable-core-do-not-import';
 import {
@@ -13,25 +12,34 @@ import {
 import { TRPCClientError } from '../TRPCClientError';
 import { getTransformer, type TransformerOptions } from '../unstable-internals';
 import { getUrl } from './internals/httpUtils';
+import {
+  resultOf,
+  type UrlOptionsWithConnectionParams,
+} from './internals/urlWithConnectionParams';
 import type { TRPCLink } from './types';
 
+async function urlWithConnectionParams(
+  opts: UrlOptionsWithConnectionParams,
+): Promise<string> {
+  let url = await resultOf(opts.url);
+  if (opts.connectionParams) {
+    const params = await resultOf(opts.connectionParams);
+
+    const prefix = url.includes('?') ? '&' : '?';
+    url +=
+      prefix + 'connectionParams=' + encodeURIComponent(JSON.stringify(params));
+  }
+
+  return url;
+}
+
 type HTTPSubscriptionLinkOptions<TRoot extends AnyClientTypes> = {
-  /**
-   * The URL to connect to (can be a function that returns a URL)
-   */
-  url: string | (() => MaybePromise<string>);
   /**
    * EventSource options
    */
   eventSourceOptions?: EventSourceInit;
-} & TransformerOptions<TRoot>;
-
-/**
- * Get the result of a value or function that returns a value
- */
-const resultOf = <T>(value: T | (() => T)): T => {
-  return typeof value === 'function' ? (value as () => T)() : value;
-};
+} & TransformerOptions<TRoot> &
+  UrlOptionsWithConnectionParams;
 
 /**
  * @see https://trpc.io/docs/client/links/httpSubscriptionLink
@@ -57,7 +65,7 @@ export function unstable_httpSubscriptionLink<
         run(async () => {
           const url = getUrl({
             transformer,
-            url: await resultOf(opts.url),
+            url: await urlWithConnectionParams(opts),
             input,
             path,
             type,

package/src/links/internals/httpUtils.ts

@@ -115,9 +115,15 @@ export type ContentOptions = {
 };
 
 export const getUrl: GetUrl = (opts) => {
-  const base = opts.url.replace(/\/$/, ''); // Remove any trailing slashes
+  const parts = opts.url.split('?') as [string, string?];
+  const base = parts[0].replace(/\/$/, ''); // Remove any trailing slashes
+
   let url = base + '/' + opts.path;
   const queryParts: string[] = [];
+
+  if (parts[1]) {
+    queryParts.push(parts[1]);
+  }
   if ('inputs' in opts) {
     queryParts.push('batch=1');
   }

package/src/links/internals/urlWithConnectionParams.ts

@@ -0,0 +1,27 @@
+import { type TRPCRequestInfo } from '@trpc/server/http';
+
+/**
+ * Get the result of a value or function that returns a value
+ */
+export const resultOf = <T>(value: T | (() => T)): T => {
+  return typeof value === 'function' ? (value as () => T)() : value;
+};
+
+/**
+ * A value that can be wrapped in callback
+ */
+type CallbackOrValue<T> = T | (() => T | Promise<T>);
+
+export interface UrlOptionsWithConnectionParams {
+  /**
+   * The URL to connect to (can be a function that returns a URL)
+   */
+  url: CallbackOrValue<string>;
+
+  /**
+   * Connection params that are available in `createContext()`
+   * - For `wsLink`/`wsClient`, these are sent as the first message
+   * - For `httpSubscriptionLink`, these are serialized as part of the URL under the `connectionParams` query
+   */
+  connectionParams?: CallbackOrValue<TRPCRequestInfo['connectionParams']>;
+}

package/src/links/wsLink.ts

@@ -1,10 +1,10 @@
 import type { Observer, UnsubscribeFn } from '@trpc/server/observable';
 import { observable } from '@trpc/server/observable';
+import type { TRPCConnectionParamsMessage } from '@trpc/server/rpc';
 import type {
   AnyRouter,
   inferClientTypes,
   inferRouterError,
-  MaybePromise,
   ProcedureType,
   TRPCClientIncomingMessage,
   TRPCClientIncomingRequest,
@@ -16,6 +16,10 @@ import { transformResult } from '@trpc/server/unstable-core-do-not-import';
 import { TRPCClientError } from '../TRPCClientError';
 import type { TransformerOptions } from '../unstable-internals';
 import { getTransformer } from '../unstable-internals';
+import {
+  resultOf,
+  type UrlOptionsWithConnectionParams,
+} from './internals/urlWithConnectionParams';
 import type { Operation, TRPCLink } from './types';
 
 const run = <TResult>(fn: () => TResult): TResult => fn();
@@ -33,11 +37,7 @@ type WSCallbackObserver<TRouter extends AnyRouter, TOutput> = Observer<
 const exponentialBackoff = (attemptIndex: number) =>
   attemptIndex === 0 ? 0 : Math.min(1000 * 2 ** attemptIndex, 30000);
 
-export interface WebSocketClientOptions {
-  /**
-   * The URL to connect to (can be a function that returns a URL)
-   */
-  url: string | (() => MaybePromise<string>);
+export interface WebSocketClientOptions extends UrlOptionsWithConnectionParams {
   /**
    * Ponyfill which WebSocket implementation to use
    */
@@ -79,7 +79,6 @@ const lazyDefaults: LazyOptions = {
 };
 export function createWSClient(opts: WebSocketClientOptions) {
   const {
-    url,
     WebSocket: WebSocketImpl = WebSocket,
     retryDelayMs: retryDelayFn = exponentialBackoff,
     onOpen,
@@ -251,23 +250,47 @@ export function createWSClient(opts: WebSocketClientOptions) {
       }
     };
     run(async () => {
-      const urlString = typeof url === 'function' ? await url() : url;
-      const ws = new WebSocketImpl(urlString);
+      let url = await resultOf(opts.url);
+      if (opts.connectionParams) {
+        // append `?connectionParams=1` when connection params are used
+        const prefix = url.includes('?') ? '&' : '?';
+        url += prefix + 'connectionParams=1';
+      }
+
+      const ws = new WebSocketImpl(url);
       self.ws = ws;
 
       clearTimeout(connectTimer);
       connectTimer = undefined;
 
       ws.addEventListener('open', () => {
-        /* istanbul ignore next -- @preserve */
-        if (activeConnection?.ws !== ws) {
-          return;
-        }
-        connectAttempt = 0;
-        self.state = 'open';
+        run(async () => {
+          /* istanbul ignore next -- @preserve */
+          if (activeConnection?.ws !== ws) {
+            return;
+          }
+          if (opts.connectionParams) {
+            const connectMsg: TRPCConnectionParamsMessage = {
+              method: 'connectionParams',
+              data: await resultOf(opts.connectionParams),
+            };
 
-        onOpen?.();
-        dispatch();
+            ws.send(JSON.stringify(connectMsg));
+          }
+
+          connectAttempt = 0;
+          self.state = 'open';
+
+          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();
+        });
       });
       ws.addEventListener('error', onError);
       const handleIncomingRequest = (req: TRPCClientIncomingRequest) => {
@@ -428,6 +451,10 @@ export function createWSClient(opts: WebSocketClientOptions) {
     get connection() {
       return activeConnection;
     },
+    /**
+     * Reconnect to the WebSocket server
+     */
+    reconnect,
   };
 }
 export type TRPCWebSocketClient = ReturnType<typeof createWSClient>;