@trpc/client 10.0.0-alpha.11 → 10.0.0-alpha.12

package/dist/tap-f567ea97.mjs

@@ -0,0 +1,30 @@
+function tap(observer) {
+  return function (originalObserver) {
+    return {
+      subscribe: function subscribe(observer2) {
+        return originalObserver.subscribe({
+          next: function next(v) {
+            var _observer$next, _observer2$next;
+
+            (_observer$next = observer.next) === null || _observer$next === void 0 ? void 0 : _observer$next.call(observer, v);
+            (_observer2$next = observer2.next) === null || _observer2$next === void 0 ? void 0 : _observer2$next.call(observer2, v);
+          },
+          error: function error(v) {
+            var _observer$error, _observer2$error;
+
+            (_observer$error = observer.error) === null || _observer$error === void 0 ? void 0 : _observer$error.call(observer, v);
+            (_observer2$error = observer2.error) === null || _observer2$error === void 0 ? void 0 : _observer2$error.call(observer2, v);
+          },
+          complete: function complete() {
+            var _observer$complete, _observer2$complete;
+
+            (_observer$complete = observer.complete) === null || _observer$complete === void 0 ? void 0 : _observer$complete.call(observer);
+            (_observer2$complete = observer2.complete) === null || _observer2$complete === void 0 ? void 0 : _observer2$complete.call(observer2);
+          }
+        });
+      }
+    };
+  };
+}
+
+export { tap as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "10.0.0-alpha.11",
+  "version": "10.0.0-alpha.12",
   "description": "tRPC Client lib",
   "author": "KATT",
   "license": "MIT",
@@ -19,11 +19,6 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./rx": {
-      "import": "./dist/rx.mjs",
-      "require": "./dist/rx.js",
-      "default": "./dist/rx.js"
-    },
     "./links/httpBatchLink": {
       "import": "./dist/links/httpBatchLink.mjs",
       "require": "./dist/links/httpBatchLink.js",
@@ -53,29 +48,34 @@
       "import": "./dist/links/wsLink.mjs",
       "require": "./dist/links/wsLink.js",
       "default": "./dist/links/wsLink.js"
+    },
+    "./observable": {
+      "import": "./dist/observable/index.mjs",
+      "require": "./dist/observable/index.js",
+      "default": "./dist/observable/index.js"
     }
   },
   "files": [
     "README.md",
     "dist",
     "links",
-    "src"
+    "src",
+    "rx"
   ],
   "scripts": {
     "build": "rollup -c"
   },
   "dependencies": {
-    "@babel/runtime": "^7.9.0",
-    "rxjs": "^7.5.4"
+    "@babel/runtime": "^7.9.0"
   },
   "peerDependencies": {
-    "@trpc/server": "10.0.0-alpha.11"
+    "@trpc/server": "10.0.0-alpha.12"
   },
   "devDependencies": {
-    "@trpc/server": "10.0.0-alpha.11"
+    "@trpc/server": "10.0.0-alpha.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a330502ab8d9aeb1f8f01d9a0711aab849d3a938"
+  "gitHead": "04b7957f4b462d4e4a83d68cccc50abd72c332e3"
 }

package/src/internals/TRPCClient.ts

@@ -18,8 +18,11 @@ import {
   OperationLink,
   TRPCLink,
 } from '../links/types';
-import { inferObservableValue, observableToPromise, share } from '../rx';
-import { Observer, Subscription } from 'rxjs';
+import { Unsubscribable } from '../observable';
+import { inferObservableValue } from '../observable/observable';
+import { share } from '../observable/operators';
+import { Observer } from '../observable/types';
+import { observableToPromise } from '../observable/util/observableToPromise';
 import { TRPCClientError } from '../TRPCClientError';
 import { getAbortController } from './fetchHelpers';
 
@@ -213,8 +216,9 @@ export class TRPCClient<TRouter extends AnyRouter> {
   >(
     path: TPath,
     input: TInput,
-    opts: TRPCRequestOptions & Partial<Observer<TRPCResult<TOutput>>>,
-  ): Subscription {
+    opts: TRPCRequestOptions &
+      Partial<Observer<TRPCResult<TOutput>, TRPCClientError<TRouter>>>,
+  ): Unsubscribable {
     const observable$ = this.$request<TInput, TOutput>({
       type: 'subscription',
       path,

package/src/links/dedupeLink.test.ts

@@ -1,7 +1,7 @@
 import { waitFor } from '@testing-library/dom';
 import { AnyRouter } from '@trpc/server';
 import { OperationLink } from '..';
-import { Observable } from 'rxjs';
+import { observable } from '../observable/observable';
 import { dedupeLink } from './dedupeLink';
 import { createChain } from './internals/createChain';
 
@@ -12,7 +12,7 @@ test('dedupeLink', async () => {
     // "dedupe link"
     dedupeLink()(null as any),
     ({ op }) => {
-      return new Observable((subscribe) => {
+      return observable((subscribe) => {
         endingLinkTriggered();
         const timer = setTimeout(() => {
           timerTriggered();
@@ -75,7 +75,7 @@ test('dedupe - cancel one does not cancel the other', async () => {
     // "dedupe link"
     dedupeLink()(null as any),
     ({ op }) => {
-      return new Observable((subscribe) => {
+      return observable((subscribe) => {
         endingLinkTriggered();
         const timer = setTimeout(() => {
           timerTriggered();

package/src/links/dedupeLink.ts

@@ -1,7 +1,8 @@
 import { AnyRouter } from '@trpc/server';
-import { Observable } from 'rxjs';
-import { share } from '../rx';
-import { OperationResult, TRPCLink } from './types';
+import { observable } from '../observable/observable';
+import { share } from '../observable/operators';
+import { Observable } from '../observable/types';
+import { TRPCLink } from './types';
 
 export function dedupeLink<
   TRouter extends AnyRouter = AnyRouter,
@@ -9,7 +10,7 @@ export function dedupeLink<
   // initialized config
   return () => {
     // initialized in app
-    const pending: Record<string, Observable<any>> = {};
+    const pending: Record<string, Observable<any, any>> = {};
     return ({ op, next }) => {
       // initialized for request
 
@@ -20,31 +21,31 @@ export function dedupeLink<
       const key = JSON.stringify([op.path, op.input]);
       if (pending[key]) {
         // console.log('hooking into pending', { op });
-        return new Observable((observer) => pending[key].subscribe(observer));
+        return observable((observer) => pending[key].subscribe(observer));
       }
 
-      const shared$ = new Observable<OperationResult<TRouter, unknown>>(
-        (observer) => {
-          function reset() {
-            delete pending[key];
-          }
-          const next$ = next(op).subscribe({
-            next(v) {
-              observer.next(v);
-            },
-            error(e) {
-              observer.error(e);
-            },
-            complete() {
-              observer.complete();
-            },
-          });
-          return () => {
+      const shared$ = observable((observer) => {
+        function reset() {
+          delete pending[key];
+        }
+        const subscription = next(op).subscribe({
+          next(v) {
+            observer.next(v);
+          },
+          error(e) {
             reset();
-            next$.unsubscribe();
-          };
-        },
-      ).pipe(share());
+            observer.error(e);
+          },
+          complete() {
+            reset();
+            observer.complete();
+          },
+        });
+        return () => {
+          reset();
+          subscription.unsubscribe();
+        };
+      }).pipe(share());
       pending[key] = shared$;
       return shared$;
     };

package/src/links/httpBatchLink.ts

@@ -1,6 +1,6 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
 import { dataLoader } from '../internals/dataLoader';
-import { Observable } from 'rxjs';
+import { observable } from '../observable/observable';
 import { TRPCLink } from './types';
 import { HTTPLinkOptions, httpRequest, ResponseShape } from './httpUtils';
 
@@ -52,7 +52,7 @@ export function httpBatchLink<TRouter extends AnyRouter>(
 
     const loaders = { query, subscription, mutation };
     return ({ op }) => {
-      return new Observable((observer) => {
+      return observable((observer) => {
         const loader = loaders[op.type];
         const { promise, cancel } = loader.load(op);
 

package/src/links/httpLink.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { Observable } from 'rxjs';
+import { observable } from '../observable/observable';
 import { TRPCLink } from './types';
 import { HTTPLinkOptions, httpRequest } from './httpUtils';
 
@@ -9,7 +9,7 @@ export function httpLink<TRouter extends AnyRouter>(
   const { url } = opts;
   return (runtime) =>
     ({ op }) =>
-      new Observable((observer) => {
+      observable((observer) => {
         const { path, input, type } = op;
         const { promise, cancel } = httpRequest({
           runtime,

package/src/links/internals/createChain.test.ts

@@ -1,13 +1,13 @@
 import { AnyRouter } from '@trpc/server/src';
 import { createChain } from './createChain';
-import { Observable } from 'rxjs';
+import { observable } from '../../observable/observable';
 
 describe('chain', () => {
   test('trivial', () => {
     const result$ = createChain<AnyRouter, unknown, unknown>({
       links: [
         ({ next, op }) => {
-          return new Observable((observer) => {
+          return observable((observer) => {
             const subscription = next(op).subscribe(observer);
             return () => {
               subscription.unsubscribe();
@@ -15,7 +15,7 @@ describe('chain', () => {
           });
         },
         ({ op }) => {
-          return new Observable((observer) => {
+          return observable((observer) => {
             observer.next({
               context: {},
               data: {
@@ -51,7 +51,7 @@ describe('chain', () => {
     const result$ = createChain<AnyRouter, unknown, unknown>({
       links: [
         ({ next, op }) => {
-          return new Observable((observer) => {
+          return observable((observer) => {
             observer.next({
               context: {},
               data: {
@@ -62,14 +62,14 @@ describe('chain', () => {
                 },
               },
             });
-            const next$ = next(op).subscribe(observer);
+            const subscription = next(op).subscribe(observer);
             return () => {
-              next$.unsubscribe();
+              subscription.unsubscribe();
             };
           });
         },
         ({ op }) => {
-          return new Observable((observer) => {
+          return observable((observer) => {
             observer.next({
               data: {
                 id: null,

package/src/links/internals/createChain.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { Observable } from 'rxjs';
+import { observable } from '../../observable/observable';
 import { Operation, OperationLink, OperationResultObservable } from '../types';
 
 /** @internal */
@@ -11,10 +11,10 @@ export function createChain<
   links: OperationLink<TRouter, TInput, TOutput>[];
   op: Operation<TInput>;
 }): OperationResultObservable<TRouter, TOutput> {
-  return new Observable((observer) => {
+  return observable((observer) => {
     function execute(index = 0, op = opts.op) {
       const next = opts.links[index];
-      const next$ = next({
+      const subscription = next({
         op,
         next(nextOp) {
           const nextObserver = execute(index + 1, nextOp);
@@ -22,7 +22,7 @@ export function createChain<
           return nextObserver;
         },
       });
-      return next$;
+      return subscription;
     }
 
     const obs$ = execute();

package/src/links/loggerLink.ts

@@ -1,6 +1,7 @@
 import { AnyRouter } from '@trpc/server';
 import { TRPCClientError } from '..';
-import { Observable, tap } from 'rxjs';
+import { observable } from '../observable/observable';
+import { tap } from '../observable/operators';
 import { Operation, OperationResult, TRPCLink } from './types';
 
 type ConsoleEsque = {
@@ -107,7 +108,7 @@ export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
 
   return () => {
     return ({ op, next }) => {
-      return new Observable((observer) => {
+      return observable((observer) => {
         // ->
         enabled({ ...op, direction: 'up' }) &&
           logger({

package/src/links/retryLink.ts

@@ -1,5 +1,6 @@
 import { AnyRouter } from '@trpc/server';
-import { Observable, Unsubscribable } from 'rxjs';
+import { observable } from '../observable/observable';
+import { Unsubscribable } from '../observable/types';
 import { TRPCLink } from './types';
 
 export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
@@ -10,7 +11,7 @@ export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
     // initialized in app
     return ({ op, next }) => {
       // initialized for request
-      return new Observable((observer) => {
+      return observable((observer) => {
         let next$: Unsubscribable | null = null;
         let attempts = 0;
         let isDone = false;

package/src/links/splitLink.test.ts

@@ -3,17 +3,17 @@ import { AnyRouter } from '../../../server/src';
 import { createChain } from '../links/internals/createChain';
 import { splitLink } from '../links/splitLink';
 import { OperationLink, TRPCLink } from '../links/types';
-import { Observable } from 'rxjs';
+import { observable } from '../observable';
 
 test('splitLink', () => {
   const wsLinkSpy = jest.fn();
   const wsLink: TRPCLink<any> = () => () =>
-    new Observable(() => {
+    observable(() => {
       wsLinkSpy();
     });
   const httpLinkSpy = jest.fn();
   const httpLink: TRPCLink<any> = () => () =>
-    new Observable(() => {
+    observable(() => {
       httpLinkSpy();
     });
   const links: OperationLink<AnyRouter, any, any>[] = [

package/src/links/splitLink.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { Observable } from 'rxjs';
+import { observable } from '../observable/observable';
 import { TRPCLink, Operation } from './types';
 import { createChain } from './internals/createChain';
 
@@ -21,7 +21,7 @@ export function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
     const yes = asArray(opts.true).map((link) => link(rt));
     const no = asArray(opts.false).map((link) => link(rt));
     return (props) => {
-      return new Observable((observer) => {
+      return observable((observer) => {
         const links = opts.condition(props.op) ? yes : no;
         return createChain({ op: props.op, links }).subscribe(observer);
       });

package/src/links/transformerLink.ts

@@ -3,7 +3,7 @@ import {
   ClientDataTransformerOptions,
   DataTransformer,
 } from '@trpc/server';
-import { Observable } from 'rxjs';
+import { observable } from '../observable/observable';
 import { OperationResult, TRPCLink } from './types';
 
 /**
@@ -54,7 +54,7 @@ export function transformerLink<TRouter extends AnyRouter = AnyRouter>(
   return () => {
     return (props) => {
       const input = _transformer.serialize(props.op.input);
-      return new Observable((observer) => {
+      return observable((observer) => {
         const subscription = props.next({ ...props.op, input }).subscribe({
           next(value) {
             const transformed = transformOperationResult(value, _transformer);

package/src/links/types.ts

@@ -1,6 +1,7 @@
 import { AnyRouter, inferRouterError, Dict } from '@trpc/server';
 import { TRPCResponse } from '@trpc/server/rpc';
-import { Observable, Observer } from 'rxjs';
+import { Observable, Observer } from '../observable/types';
+import { TRPCClientError } from '../TRPCClientError';
 
 export type CancelFn = () => void;
 
@@ -43,12 +44,12 @@ export interface OperationResult<TRouter extends AnyRouter, TOutput> {
 export type OperationResultObservable<
   TRouter extends AnyRouter,
   TOutput,
-> = Observable<OperationResult<TRouter, TOutput>>;
+> = Observable<OperationResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
 
 export type OperationResultObserver<
   TRouter extends AnyRouter,
   TOutput,
-> = Observer<OperationResult<TRouter, TOutput>>;
+> = Observer<OperationResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
 
 export type OperationLink<
   TRouter extends AnyRouter,

package/src/links/wsLink.ts

@@ -6,12 +6,11 @@ import {
   TRPCResponse,
 } from '@trpc/server/rpc';
 import { retryDelay } from '../internals/retryDelay';
-
-import { Observable } from 'rxjs';
+import { UnsubscribeFn } from '../observable';
+import { observable } from '../observable/observable';
 import { TRPCClientError } from '../TRPCClientError';
 import { Operation, OperationResultObserver, TRPCLink } from './types';
 
-type UnsubscribeFn = () => void;
 export interface WebSocketClientOptions {
   url: string;
   WebSocket?: WebSocket;
@@ -283,7 +282,7 @@ export function wsLink<TRouter extends AnyRouter>(
   return () => {
     const { client } = opts;
     return ({ op }) => {
-      return new Observable((observer) => {
+      return observable((observer) => {
         const { type, input, path, id, context } = op;
 
         let isDone = false;

package/src/observable/index.ts

@@ -0,0 +1,3 @@
+export * from './observable';
+export * from './types';
+export * from './operators';

package/src/observable/observable.test.ts

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { observable } from './observable';
+import { tap } from './operators';
+import { share } from './operators/share';
+
+test('vanilla observable - complete()', () => {
+  const obs = observable<number, Error>((observer) => {
+    observer.next(1);
+    observer.complete();
+  });
+
+  const next = jest.fn();
+  const error = jest.fn();
+  const complete = jest.fn();
+  obs.subscribe({
+    next,
+    error,
+    complete,
+  });
+  expect(next.mock.calls).toHaveLength(1);
+  expect(complete.mock.calls).toHaveLength(1);
+  expect(error.mock.calls).toHaveLength(0);
+  expect(next.mock.calls[0][0]).toBe(1);
+});
+
+test('vanilla observable - unsubscribe()', () => {
+  const obs$ = observable<number, Error>((observer) => {
+    observer.next(1);
+  });
+
+  const next = jest.fn();
+  const error = jest.fn();
+  const complete = jest.fn();
+  const sub = obs$.subscribe({
+    next,
+    error,
+    complete,
+  });
+  sub.unsubscribe();
+  expect(next.mock.calls).toHaveLength(1);
+  expect(complete.mock.calls).toHaveLength(0);
+  expect(error.mock.calls).toHaveLength(0);
+  expect(next.mock.calls[0][0]).toBe(1);
+});
+
+test('pipe - combine operators', () => {
+  const taps = {
+    next: jest.fn(),
+    complete: jest.fn(),
+    error: jest.fn(),
+  };
+  const obs = observable<number, Error>((observer) => {
+    observer.next(1);
+  }).pipe(
+    // operators:
+    share(),
+    tap(taps),
+  );
+  {
+    const next = jest.fn();
+    const error = jest.fn();
+    const complete = jest.fn();
+    obs.subscribe({
+      next,
+      error,
+      complete,
+    });
+    expect(next.mock.calls).toHaveLength(1);
+    expect(complete.mock.calls).toHaveLength(0);
+    expect(error.mock.calls).toHaveLength(0);
+    expect(next.mock.calls[0][0]).toBe(1);
+  }
+
+  {
+    const next = jest.fn();
+    const error = jest.fn();
+    const complete = jest.fn();
+    obs.subscribe({
+      next,
+      error,
+      complete,
+    });
+    expect(next.mock.calls).toHaveLength(0);
+    expect(complete.mock.calls).toHaveLength(0);
+    expect(error.mock.calls).toHaveLength(0);
+  }
+
+  expect({
+    next: taps.next.mock.calls,
+    error: taps.error.mock.calls,
+    complete: taps.complete.mock.calls,
+  }).toMatchInlineSnapshot(`
+    Object {
+      "complete": Array [],
+      "error": Array [],
+      "next": Array [
+        Array [
+          1,
+        ],
+      ],
+    }
+  `);
+});

package/src/observable/observable.ts

@@ -0,0 +1,70 @@
+import { pipeFromArray } from './util/pipe';
+import { Observable, Observer, OperatorFunction, TeardownLogic } from './types';
+
+export type inferObservableValue<TObservable extends Observable<any, any>> =
+  TObservable extends Observable<infer TValue, any> ? TValue : never;
+
+export function observable<TValue, TError = unknown>(
+  subscribe: (observer: Observer<TValue, TError>) => TeardownLogic,
+): Observable<TValue, TError> {
+  const self: Observable<TValue, TError> = {
+    subscribe(observer) {
+      let teardownRef: TeardownLogic | null = null;
+      let isDone = false;
+      let unsubscribed = false;
+      let teardownImmediately = false;
+      function unsubscribe() {
+        if (teardownRef === null) {
+          teardownImmediately = true;
+          return;
+        }
+        if (unsubscribed) {
+          return;
+        }
+        unsubscribed = true;
+
+        if (typeof teardownRef === 'function') {
+          teardownRef();
+        } else if (teardownRef) {
+          teardownRef.unsubscribe();
+        }
+      }
+      teardownRef = subscribe({
+        next(value) {
+          if (isDone) {
+            return;
+          }
+          observer.next?.(value);
+        },
+        error(err) {
+          if (isDone) {
+            return;
+          }
+          isDone = true;
+          observer.error?.(err);
+          unsubscribe();
+        },
+        complete() {
+          if (isDone) {
+            return;
+          }
+          isDone = true;
+          observer.complete?.();
+          unsubscribe();
+        },
+      });
+      if (teardownImmediately) {
+        unsubscribe();
+      }
+      return {
+        unsubscribe,
+      };
+    },
+    pipe(
+      ...operations: OperatorFunction<any, any, any, any>[]
+    ): Observable<any, any> {
+      return pipeFromArray(operations)(self) as any;
+    },
+  };
+  return self;
+}

package/src/observable/operators/index.ts

@@ -0,0 +1,3 @@
+export * from './share';
+export * from './map';
+export * from './tap';