@trpc/client 10.0.0-alpha.28 → 10.0.0-alpha.30

package/links/wsLink/dist/trpc-client-links-wsLink.esm.js

@@ -0,0 +1,392 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _createClass from '@babel/runtime/helpers/esm/createClass';
+import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
+import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
+import _inherits from '@babel/runtime/helpers/esm/inherits';
+import _createSuper from '@babel/runtime/helpers/esm/createSuper';
+import _wrapNativeSuper from '@babel/runtime/helpers/esm/wrapNativeSuper';
+import { T as TRPCClientError } from '../../../dist/TRPCClientError-09b8a26b.esm.js';
+
+/* istanbul ignore next */
+var retryDelay = function retryDelay(attemptIndex) {
+  return attemptIndex === 0 ? 0 : Math.min(1000 * Math.pow(2, attemptIndex), 30000);
+};
+
+function createWSClient(opts) {
+  var url = opts.url,
+      _opts$WebSocket = opts.WebSocket,
+      WebSocketImpl = _opts$WebSocket === void 0 ? WebSocket : _opts$WebSocket,
+      _opts$retryDelayMs = opts.retryDelayMs,
+      retryDelayFn = _opts$retryDelayMs === void 0 ? retryDelay : _opts$retryDelayMs;
+  /* istanbul ignore next */
+
+  if (!WebSocketImpl) {
+    throw new Error("No WebSocket implementation found - you probably don't want to use this on the server, but if you do you need to pass a `WebSocket`-ponyfill");
+  }
+  /**
+   * outgoing messages buffer whilst not open
+   */
+
+
+  var outgoing = [];
+  /**
+   * pending outgoing requests that are awaiting callback
+   */
+
+  var pendingRequests = Object.create(null);
+  var connectAttempt = 0;
+  var dispatchTimer = null;
+  var connectTimer = null;
+  var activeConnection = createWS();
+  var state = 'connecting';
+  /**
+   * tries to send the list of messages
+   */
+
+  function dispatch() {
+    if (state !== 'open' || dispatchTimer) {
+      return;
+    }
+
+    dispatchTimer = setTimeout(function () {
+      dispatchTimer = null;
+
+      if (outgoing.length === 1) {
+        // single send
+        activeConnection.send(JSON.stringify(outgoing.pop()));
+      } else {
+        // batch send
+        activeConnection.send(JSON.stringify(outgoing));
+      } // clear
+
+
+      outgoing = [];
+    });
+  }
+
+  function tryReconnect() {
+    if (connectTimer || state === 'closed') {
+      return;
+    }
+
+    var timeout = retryDelayFn(connectAttempt++);
+    reconnectInMs(timeout);
+  }
+
+  function reconnect() {
+    state = 'connecting';
+    var oldConnection = activeConnection;
+    activeConnection = createWS();
+    closeIfNoPending(oldConnection);
+  }
+
+  function reconnectInMs(ms) {
+    if (connectTimer) {
+      return;
+    }
+
+    state = 'connecting';
+    connectTimer = setTimeout(reconnect, ms);
+  }
+
+  function closeIfNoPending(conn) {
+    // disconnect as soon as there are are no pending result
+    var hasPendingRequests = Object.values(pendingRequests).some(function (p) {
+      return p.ws === conn;
+    });
+
+    if (!hasPendingRequests) {
+      conn.close();
+    }
+  }
+
+  function resumeSubscriptionOnReconnect(req) {
+    if (outgoing.some(function (r) {
+      return r.id === req.op.id;
+    })) {
+      return;
+    }
+
+    request(req.op, req.callbacks);
+  }
+
+  function createWS() {
+    var conn = new WebSocketImpl(url);
+    clearTimeout(connectTimer);
+    connectTimer = null;
+    conn.addEventListener('open', function () {
+      /* istanbul ignore next */
+      if (conn !== activeConnection) {
+        return;
+      }
+
+      connectAttempt = 0;
+      state = 'open';
+      dispatch();
+    });
+    conn.addEventListener('error', function () {
+      if (conn === activeConnection) {
+        tryReconnect();
+      }
+    });
+
+    var handleIncomingRequest = function handleIncomingRequest(req) {
+      if (req.method === 'reconnect' && conn === activeConnection) {
+        reconnect(); // notify subscribers
+
+        for (var _i = 0, _Object$values = Object.values(pendingRequests); _i < _Object$values.length; _i++) {
+          var pendingReq = _Object$values[_i];
+
+          if (pendingReq.type === 'subscription') {
+            resumeSubscriptionOnReconnect(pendingReq);
+          }
+        }
+      }
+    };
+
+    var handleIncomingResponse = function handleIncomingResponse(res) {
+      var _req$callbacks$onNext, _req$callbacks2;
+
+      var req = res.id !== null && pendingRequests[res.id];
+
+      if (!req) {
+        // do something?
+        return;
+      }
+
+      if ('error' in res) {
+        var _req$callbacks$onErro, _req$callbacks;
+
+        (_req$callbacks$onErro = (_req$callbacks = req.callbacks).onError) === null || _req$callbacks$onErro === void 0 ? void 0 : _req$callbacks$onErro.call(_req$callbacks, res);
+        return;
+      }
+
+      (_req$callbacks$onNext = (_req$callbacks2 = req.callbacks).onNext) === null || _req$callbacks$onNext === void 0 ? void 0 : _req$callbacks$onNext.call(_req$callbacks2, res.result);
+
+      if (req.ws !== activeConnection && conn === activeConnection) {
+        var oldWs = req.ws; // gracefully replace old connection with this
+
+        req.ws = activeConnection;
+        closeIfNoPending(oldWs);
+      }
+
+      if (res.result.type === 'stopped' && conn === activeConnection) {
+        var _req$callbacks$onDone, _req$callbacks3;
+
+        (_req$callbacks$onDone = (_req$callbacks3 = req.callbacks).onDone) === null || _req$callbacks$onDone === void 0 ? void 0 : _req$callbacks$onDone.call(_req$callbacks3);
+      }
+    };
+
+    conn.addEventListener('message', function (_ref) {
+      var data = _ref.data;
+      var msg = JSON.parse(data);
+
+      if ('method' in msg) {
+        handleIncomingRequest(msg);
+      } else {
+        handleIncomingResponse(msg);
+      }
+
+      if (conn !== activeConnection || state === 'closed') {
+        // when receiving a message, we close old connection that has no pending requests
+        closeIfNoPending(conn);
+      }
+    });
+    conn.addEventListener('close', function () {
+      if (activeConnection === conn) {
+        // connection might have been replaced already
+        tryReconnect();
+      }
+
+      for (var key in pendingRequests) {
+        var _req$callbacks$onErro2, _req$callbacks4;
+
+        var req = pendingRequests[key];
+
+        if (req.ws !== conn) {
+          continue;
+        }
+
+        (_req$callbacks$onErro2 = (_req$callbacks4 = req.callbacks).onError) === null || _req$callbacks$onErro2 === void 0 ? void 0 : _req$callbacks$onErro2.call(_req$callbacks4, TRPCClientError.from(new TRPCWebSocketClosedError('WebSocket closed prematurely')));
+
+        if (req.type !== 'subscription') {
+          var _req$callbacks$onDone2, _req$callbacks5;
+
+          delete pendingRequests[key];
+          (_req$callbacks$onDone2 = (_req$callbacks5 = req.callbacks).onDone) === null || _req$callbacks$onDone2 === void 0 ? void 0 : _req$callbacks$onDone2.call(_req$callbacks5);
+        } else if (state !== 'closed') {
+          // request restart of sub with next connection
+          resumeSubscriptionOnReconnect(req);
+        }
+      }
+    });
+    return conn;
+  }
+
+  function request(op, callbacks) {
+    var type = op.type,
+        input = op.input,
+        path = op.path,
+        id = op.id;
+    var envelope = {
+      id: id,
+      jsonrpc: '2.0',
+      method: type,
+      params: {
+        input: input,
+        path: path
+      }
+    };
+    pendingRequests[id] = {
+      ws: activeConnection,
+      type: type,
+      callbacks: callbacks,
+      op: op
+    }; // enqueue message
+
+    outgoing.push(envelope);
+    dispatch();
+    return function () {
+      var _pendingRequests$id, _callbacks$onDone;
+
+      var callbacks = (_pendingRequests$id = pendingRequests[id]) === null || _pendingRequests$id === void 0 ? void 0 : _pendingRequests$id.callbacks;
+      delete pendingRequests[id];
+      outgoing = outgoing.filter(function (msg) {
+        return msg.id !== id;
+      });
+      callbacks === null || callbacks === void 0 ? void 0 : (_callbacks$onDone = callbacks.onDone) === null || _callbacks$onDone === void 0 ? void 0 : _callbacks$onDone.call(callbacks);
+
+      if (op.type === 'subscription') {
+        outgoing.push({
+          id: id,
+          method: 'subscription.stop',
+          params: undefined
+        });
+        dispatch();
+      }
+    };
+  }
+
+  return {
+    close: function close() {
+      state = 'closed';
+      closeIfNoPending(activeConnection);
+      clearTimeout(connectTimer);
+      connectTimer = null;
+    },
+    request: request,
+    getConnection: function getConnection() {
+      return activeConnection;
+    }
+  };
+}
+
+var TRPCWebSocketClosedError = /*#__PURE__*/function (_Error) {
+  _inherits(TRPCWebSocketClosedError, _Error);
+
+  var _super = /*#__PURE__*/_createSuper(TRPCWebSocketClosedError);
+
+  function TRPCWebSocketClosedError(message) {
+    var _this;
+
+    _classCallCheck(this, TRPCWebSocketClosedError);
+
+    _this = _super.call(this, message);
+    _this.name = 'TRPCWebSocketClosedError';
+    Object.setPrototypeOf(_assertThisInitialized(_this), TRPCWebSocketClosedError.prototype);
+    return _this;
+  }
+
+  return _createClass(TRPCWebSocketClosedError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+var TRPCSubscriptionEndedError = /*#__PURE__*/function (_Error2) {
+  _inherits(TRPCSubscriptionEndedError, _Error2);
+
+  var _super2 = /*#__PURE__*/_createSuper(TRPCSubscriptionEndedError);
+
+  function TRPCSubscriptionEndedError(message) {
+    var _this2;
+
+    _classCallCheck(this, TRPCSubscriptionEndedError);
+
+    _this2 = _super2.call(this, message);
+    _this2.name = 'TRPCSubscriptionEndedError';
+    Object.setPrototypeOf(_assertThisInitialized(_this2), TRPCSubscriptionEndedError.prototype);
+    return _this2;
+  }
+
+  return _createClass(TRPCSubscriptionEndedError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+function wsLink(opts) {
+  // initialized config
+  return function (rt) {
+    var client = opts.client;
+    return function (_ref2) {
+      var op = _ref2.op,
+          prev = _ref2.prev,
+          onDestroy = _ref2.onDestroy;
+      var type = op.type,
+          rawInput = op.input,
+          path = op.path,
+          id = op.id;
+      var input = rt.transformer.serialize(rawInput);
+      var isDone = false;
+      var unsub = client.request({
+        type: type,
+        path: path,
+        input: input,
+        id: id
+      }, {
+        onNext: function onNext(result) {
+          if (isDone) {
+            return;
+          }
+
+          if ('data' in result) {
+            var data = rt.transformer.deserialize(result.data);
+            prev({
+              type: 'data',
+              data: data
+            });
+          } else {
+            prev(result);
+          }
+
+          if (op.type !== 'subscription') {
+            // if it isn't a subscription we don't care about next response
+            isDone = true;
+            unsub();
+          }
+        },
+        onError: function onError(err) {
+          if (isDone) {
+            return;
+          }
+
+          prev(err instanceof Error ? err : TRPCClientError.from(_objectSpread(_objectSpread({}, err), {}, {
+            error: rt.transformer.deserialize(err.error)
+          })));
+        },
+        onDone: function onDone() {
+          if (isDone) {
+            return;
+          }
+
+          var result = new TRPCSubscriptionEndedError('Operation ended prematurely');
+          prev(TRPCClientError.from(result, {
+            isDone: true
+          }));
+          isDone = true;
+        }
+      });
+      onDestroy(function () {
+        isDone = true;
+        unsub();
+      });
+    };
+  };
+}
+
+export { createWSClient, wsLink };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "10.0.0-alpha.28",
+  "version": "10.0.0-alpha.30",
   "description": "tRPC Client lib",
   "author": "KATT",
   "license": "MIT",
@@ -67,13 +67,13 @@
     "@babel/runtime": "^7.9.0"
   },
   "peerDependencies": {
-    "@trpc/server": "10.0.0-alpha.28"
+    "@trpc/server": "10.0.0-alpha.30"
   },
   "devDependencies": {
-    "@trpc/server": "10.0.0-alpha.28"
+    "@trpc/server": "10.0.0-alpha.30"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9252bd0df8523fc90b56bdd4228b8662ad507198"
+  "gitHead": "31e28de6c0469b28a6f39378f931f35e469f17f4"
 }

package/src/createTRPCClient.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { AnyRouter } from '@trpc/server';
 import {
@@ -5,12 +7,65 @@ import {
   CreateTRPCClientOptions,
 } from './internals/TRPCClient';
 
+export type EnsureRecord<T> = T extends Record<string, any>
+  ? T
+  : Record<string, never>;
+
+type FlattenRouter<TRouter extends AnyRouter> = {
+  [Key in keyof TRouter['_def']['procedures']]: TRouter['_def']['procedures'][Key] extends AnyRouter
+    ? FlattenRouter<TRouter['_def']['procedures'][Key]>
+    : TRouter['_def']['procedures'][Key];
+};
+
+function makeProxy<TRouter extends AnyRouter>(
+  client: Client<TRouter>,
+  ...path: string[]
+) {
+  const proxy: any = new Proxy(
+    function () {
+      // noop
+    },
+    {
+      get(_obj, name) {
+        if (name in client && !path.length) {
+          return client[name as keyof typeof client];
+        }
+        if (typeof name === 'string') {
+          return makeProxy(client, ...path, name);
+        }
+
+        return client;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      apply(_1, _2, args) {
+        const pathCopy = [...path];
+        let type = pathCopy.pop()!;
+        if (type === 'mutate') {
+          type = 'mutation';
+        }
+        const fullPath = pathCopy.join('.');
+
+        if (type.startsWith('use')) {
+          throw new Error(`Invalid hook call`);
+        }
+
+        return (client as any)[type](fullPath, ...args);
+      },
+    },
+  );
+
+  return proxy as typeof client & FlattenRouter<TRouter>;
+}
 export function createTRPCClient<TRouter extends AnyRouter>(
   opts: CreateTRPCClientOptions<TRouter>,
 ) {
-  return new Client<TRouter>(opts);
+  const client = new Client<TRouter>(opts);
+  // Here we need to wrap the client in a Proxy to be able to call deep objects and translate them to `client.query`-calls
+  return makeProxy(client);
 }
 
+// Also the client created above needs to somehow be like `TRPCClient<Router> & Omit<Router, 'createCaller' | 'createProcedure' | '_def' | 'transformer' | 'errorFormatter' | 'getErrorShape>`
+
 export type {
   TRPCRequestOptions,
   CreateTRPCClientOptions,

package/src/internals/TRPCClient.ts

@@ -61,14 +61,6 @@ interface CreateTRPCClientBaseOptions {
   transformer?: ClientDataTransformerOptions;
 }
 
-function createRouterProxy(callback: (...args: [string, ...unknown[]]) => any) {
-  return new Proxy({} as any, {
-    get(_, path: string) {
-      return (...args: unknown[]) => callback(path, ...args);
-    },
-  });
-}
-
 /** @internal */
 export interface CreateTRPCClientWithURLOptions
   extends CreateTRPCClientBaseOptions {
@@ -102,8 +94,6 @@ export type CreateTRPCClientOptions<TRouter extends AnyRouter> =
 export class TRPCClient<TRouter extends AnyRouter> {
   private readonly links: OperationLink<TRouter>[];
   public readonly runtime: TRPCClientRuntime;
-  public readonly queries: TRouter['queries'];
-  public readonly mutations: TRouter['mutations'];
 
   constructor(opts: CreateTRPCClientOptions<TRouter>) {
     const _fetch = getFetch(opts?.fetch);
@@ -145,13 +135,6 @@ export class TRPCClient<TRouter extends AnyRouter> {
         })(this.runtime),
       ];
     }
-
-    this.queries = createRouterProxy((path, ...args) =>
-      this.query(path, ...(args as any)),
-    );
-    this.mutations = createRouterProxy((path, ...args) =>
-      this.mutation(path, ...(args as any)),
-    );
   }
 
   private $request<TInput = unknown, TOutput = unknown>({