@trpc/client 10.0.0-alpha.10 → 10.0.0-alpha.13

package/src/links/httpBatchLink.ts

@@ -1,8 +1,12 @@
 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';
+import {
+  HTTPLinkOptions,
+  httpRequest,
+  ResponseShape,
+} from './internals/httpUtils';
 
 export interface HttpBatchLinkOptions extends HTTPLinkOptions {
   maxBatchSize?: number;
@@ -52,7 +56,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,7 +1,7 @@
 import { AnyRouter } from '@trpc/server';
-import { Observable } from 'rxjs';
+import { observable } from '../observable/observable';
 import { TRPCLink } from './types';
-import { HTTPLinkOptions, httpRequest } from './httpUtils';
+import { HTTPLinkOptions, httpRequest } from './internals/httpUtils';
 
 export function httpLink<TRouter extends AnyRouter>(
   opts: HTTPLinkOptions,
@@ -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/index.ts

@@ -0,0 +1,10 @@
+export * from './dedupeLink';
+export * from './httpBatchLink';
+export * from './httpLink';
+export * from './loggerLink';
+export * from './loggerLink';
+export * from './retryLink';
+export * from './splitLink';
+export * from './transformerLink';
+export * from './wsLink';
+export * from './types';

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/{httpUtils.ts → internals/httpUtils.ts}

@@ -1,5 +1,5 @@
 import { ProcedureType } from '@trpc/server';
-import { LinkRuntime, PromiseAndCancel } from './types';
+import { LinkRuntime, PromiseAndCancel } from '../types';
 export interface HTTPLinkOptions {
   url: string;
 }

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';

package/src/observable/operators/map.test.ts

@@ -0,0 +1,92 @@
+import { expectTypeOf } from 'expect-type';
+import { observable } from '../observable';
+import { map } from '.';
+import { EventEmitter } from 'events';
+
+interface SubscriptionEvents<TOutput> {
+  data: (data: TOutput) => void;
+}
+
+declare interface CustomEventEmitter<TOutput> {
+  on<U extends keyof SubscriptionEvents<TOutput>>(
+    event: U,
+    listener: SubscriptionEvents<TOutput>[U],
+  ): this;
+
+  once<U extends keyof SubscriptionEvents<TOutput>>(
+    event: U,
+    listener: SubscriptionEvents<TOutput>[U],
+  ): this;
+
+  emit<U extends keyof SubscriptionEvents<TOutput>>(
+    event: U,
+    ...args: Parameters<SubscriptionEvents<TOutput>[U]>
+  ): boolean;
+}
+class CustomEventEmitter<TOutput>
+  extends EventEmitter
+  implements CustomEventEmitter<TOutput> {}
+test('map', () => {
+  type EventShape = { num: number };
+  const ee = new CustomEventEmitter<EventShape>();
+  const eventObservable = observable<EventShape, unknown>((observer) => {
+    const callback = (data: EventShape) => {
+      observer.next(data);
+    };
+    ee.on('data', callback);
+
+    return () => {
+      ee.off('data', callback);
+    };
+  });
+  const pipeCalls = jest.fn();
+  const piped = eventObservable.pipe(
+    map((...args) => {
+      pipeCalls(...args);
+      const [value] = args;
+      return value.num;
+    }),
+  );
+
+  const next = jest.fn();
+  const subscription = piped.subscribe({
+    next(value) {
+      expectTypeOf<number>(value);
+      next(value);
+    },
+  });
+  expect(next).not.toHaveBeenCalled();
+  ee.emit('data', { num: 1 });
+  ee.emit('data', { num: 2 });
+  expect(next).toHaveBeenCalledTimes(2);
+  expect(next.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        1,
+      ],
+      Array [
+        2,
+      ],
+    ]
+  `);
+  expect(pipeCalls.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "num": 1,
+        },
+        0,
+      ],
+      Array [
+        Object {
+          "num": 2,
+        },
+        1,
+      ],
+    ]
+  `);
+
+  expect(ee.listeners('data')).toHaveLength(1);
+  subscription.unsubscribe();
+  expect(ee.listeners('data')).toHaveLength(0);
+});

package/src/observable/operators/map.ts

@@ -0,0 +1,25 @@
+import { OperatorFunction } from '../types';
+
+export function map<TValueBefore, TError, TValueAfter>(
+  project: (value: TValueBefore, index: number) => TValueAfter,
+): OperatorFunction<TValueBefore, TError, TValueAfter, TError> {
+  return (originalObserver) => {
+    return {
+      subscribe(observer) {
+        let index = 0;
+        const subscription = originalObserver.subscribe({
+          next(value) {
+            observer.next?.(project(value, index++));
+          },
+          error(error) {
+            observer.error?.(error);
+          },
+          complete() {
+            observer.complete?.();
+          },
+        });
+        return subscription;
+      },
+    };
+  };
+}

package/src/observable/operators/share.test.ts

@@ -0,0 +1,60 @@
+/* eslint-disable no-var */
+import { observable } from '../observable';
+import { share } from './share';
+
+test('share', () => {
+  const obs = share()(
+    observable<number, Error>((observer) => {
+      observer.next(1);
+    }),
+  );
+
+  {
+    const next = jest.fn();
+    const error = jest.fn();
+    const complete = jest.fn();
+    var subscription1 = 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);
+  }
+
+  {
+    // subscribe again - it's shared so should not propagate any results
+    const next = jest.fn();
+    const error = jest.fn();
+    const complete = jest.fn();
+    var subscription2 = obs.subscribe({
+      next,
+      error,
+      complete,
+    });
+    expect(next.mock.calls).toHaveLength(0);
+    expect(complete.mock.calls).toHaveLength(0);
+    expect(error.mock.calls).toHaveLength(0);
+  }
+
+  subscription1.unsubscribe();
+  subscription2.unsubscribe();
+  // now it should be reset so we can do a new subscription
+  {
+    const next = jest.fn();
+    const error = jest.fn();
+    const complete = jest.fn();
+    var subscription3 = 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);
+    subscription3.unsubscribe();
+  }
+});