@trpc/client 9.16.0 → 10.0.0-alpha.1

package/src/links/transformerLink.ts

@@ -0,0 +1,70 @@
+import {
+  AnyRouter,
+  ClientDataTransformerOptions,
+  DataTransformer,
+} from '@trpc/server';
+import { observable } from '../rx/observable';
+import { OperationResult, TRPCLink } from './types';
+
+/**
+ * @internal
+ */
+function transformOperationResult<TResult extends OperationResult<any, any>>(
+  result: TResult,
+  transformer: DataTransformer,
+) {
+  if ('error' in result.data) {
+    return {
+      ...result,
+      data: {
+        ...result.data,
+        error: transformer.deserialize(result.data.error),
+      },
+    };
+  }
+  if (result.data.result.type !== 'data') {
+    return result;
+  }
+  return {
+    ...result,
+    data: {
+      ...result.data,
+      result: {
+        ...result.data.result,
+        data: transformer.deserialize(result.data.result.data),
+      },
+    },
+  };
+}
+export function transformerLink<TRouter extends AnyRouter = AnyRouter>(
+  transformer: ClientDataTransformerOptions,
+): TRPCLink<TRouter> {
+  const _transformer: DataTransformer = transformer
+    ? 'input' in transformer
+      ? {
+          serialize: transformer.input.serialize,
+          deserialize: transformer.output.deserialize,
+        }
+      : transformer
+    : {
+        serialize: (data) => data,
+        deserialize: (data) => data,
+      };
+
+  return () => {
+    return (props) => {
+      const input = _transformer.serialize(props.op.input);
+      return observable((observer) => {
+        const next$ = props.next({ ...props.op, input }).subscribe({
+          next(value) {
+            const transformed = transformOperationResult(value, _transformer);
+            observer.next(transformed);
+          },
+          error: observer.error,
+          complete: observer.complete,
+        });
+        return next$;
+      });
+    };
+  };
+}

package/src/links/{core.ts → types.ts}

@@ -1,51 +1,25 @@
-import { AnyRouter, DataTransformer } from '@trpc/server';
-import { TRPCResult } from '@trpc/server/rpc';
+import { AnyRouter, inferRouterError, Dict } from '@trpc/server';
+import { TRPCResponse } from '@trpc/server/rpc';
+import { Observable, Observer } from '../rx/types';
 import { TRPCClientError } from '../TRPCClientError';
 
+export type CancelFn = () => void;
+
+export type PromiseAndCancel<TValue> = {
+  promise: Promise<TValue>;
+  cancel: CancelFn;
+};
+
 export type OperationContext = Record<string, unknown>;
 export type Operation<TInput = unknown> = {
   id: number;
   type: 'query' | 'mutation' | 'subscription';
   input: TInput;
   path: string;
-  context: OperationContext;
+  context?: OperationContext;
 };
 
-export type OperationResponse<TRouter extends AnyRouter, TOutput = unknown> =
-  | TRPCResult<TOutput>
-  | TRPCClientError<TRouter>;
-
-export type PrevCallback<TRouter extends AnyRouter, TOutput = unknown> = (
-  result: OperationResponse<TRouter, TOutput>,
-) => void;
-export type OperationLink<
-  TRouter extends AnyRouter,
-  TInput = unknown,
-  TOutput = unknown,
-> = (opts: {
-  op: Operation;
-  prev: PrevCallback<TRouter, TOutput>;
-  next: (
-    op: Operation<TInput>,
-    callback: PrevCallback<TRouter, TOutput>,
-  ) => void;
-  onDestroy: (callback: () => void) => void;
-}) => void;
-
-export type TRPCLink<TRouter extends AnyRouter> = (
-  opts: LinkRuntimeOptions,
-) => OperationLink<TRouter>;
-
-export interface HTTPLinkOptions {
-  url: string;
-}
-
-/**
- * @deprecated use `HTTPLinkOptions`
- */
-export type HttpLinkOptions = HTTPLinkOptions;
-
-export type HTTPHeaders = Record<string, string | string[] | undefined>;
+export type HTTPHeaders = Dict<string | string[]>;
 
 /**
  * The default `fetch` implementation has an overloaded signature. By convention this library
@@ -56,16 +30,36 @@ export type TRPCFetch = (
   options?: RequestInit,
 ) => Promise<Response>;
 
-export type LinkRuntimeOptions = Readonly<{
-  transformer: DataTransformer;
+export interface LinkRuntime {
   headers: () => HTTPHeaders | Promise<HTTPHeaders>;
   fetch: TRPCFetch;
   AbortController?: typeof AbortController;
-}>;
+}
 
-export type CancelFn = () => void;
+export interface OperationResult<TRouter extends AnyRouter, TOutput> {
+  data: TRPCResponse<TOutput, inferRouterError<TRouter>>;
+  context?: OperationContext;
+}
 
-export type PromiseAndCancel<TValue> = {
-  promise: Promise<TValue>;
-  cancel: CancelFn;
-};
+export type OperationResultObservable<
+  TRouter extends AnyRouter,
+  TOutput,
+> = Observable<OperationResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
+
+export type OperationResultObserver<
+  TRouter extends AnyRouter,
+  TOutput,
+> = Observer<OperationResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
+
+export type OperationLink<
+  TRouter extends AnyRouter,
+  TInput = unknown,
+  TOutput = unknown,
+> = (opts: {
+  op: Operation<TInput>;
+  next: (op: Operation<TInput>) => OperationResultObservable<TRouter, TOutput>;
+}) => OperationResultObservable<TRouter, TOutput>;
+
+export type TRPCLink<TRouter extends AnyRouter> = (
+  opts: LinkRuntime,
+) => OperationLink<TRouter>;

package/src/links/wsLink.ts

@@ -4,20 +4,13 @@ import {
   TRPCClientIncomingRequest,
   TRPCRequest,
   TRPCResponse,
-  TRPCResult,
 } from '@trpc/server/rpc';
-import { TRPCErrorResponse } from '@trpc/server/rpc';
-import { ObservableCallbacks, UnsubscribeFn } from '../internals/observable';
 import { retryDelay } from '../internals/retryDelay';
+import { UnsubscribeFn } from '../rx';
+import { observable } from '../rx/observable';
 import { TRPCClientError } from '../TRPCClientError';
-import { TRPCLink } from './core';
+import { Operation, OperationResultObserver, TRPCLink } from './types';
 
-type Operation = {
-  id: number | string;
-  type: ProcedureType;
-  input: unknown;
-  path: string;
-};
 export interface WebSocketClientOptions {
   url: string;
   WebSocket?: WebSocket;
@@ -42,10 +35,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
   /**
    * pending outgoing requests that are awaiting callback
    */
-  type TCallbacks = ObservableCallbacks<
-    TRPCResult,
-    TRPCClientError<AnyRouter> | TRPCErrorResponse
-  >;
+  type TCallbacks = OperationResultObserver<AnyRouter, unknown>;
   type TRequest = {
     /**
      * Reference to the WebSocket instance this request was made to
@@ -151,18 +141,14 @@ export function createWSClient(opts: WebSocketClientOptions) {
         }
       }
     };
-    const handleIncomingResponse = (res: TRPCResponse) => {
-      const req = res.id !== null && pendingRequests[res.id];
+    const handleIncomingResponse = (data: TRPCResponse) => {
+      const req = data.id !== null && pendingRequests[data.id];
       if (!req) {
         // do something?
         return;
       }
-      if ('error' in res) {
-        req.callbacks.onError?.(res);
-        return;
-      }
 
-      req.callbacks.onNext?.(res.result);
+      req.callbacks.next?.({ data });
       if (req.ws !== activeConnection && conn === activeConnection) {
         const oldWs = req.ws;
         // gracefully replace old connection with this
@@ -170,8 +156,12 @@ export function createWSClient(opts: WebSocketClientOptions) {
         closeIfNoPending(oldWs);
       }
 
-      if (res.result.type === 'stopped' && conn === activeConnection) {
-        req.callbacks.onDone?.();
+      if (
+        'result' in data &&
+        data.result.type === 'stopped' &&
+        conn === activeConnection
+      ) {
+        req.callbacks.complete();
       }
     };
     conn.addEventListener('message', ({ data }) => {
@@ -199,14 +189,14 @@ export function createWSClient(opts: WebSocketClientOptions) {
         if (req.ws !== conn) {
           continue;
         }
-        req.callbacks.onError?.(
+        req.callbacks.error?.(
           TRPCClientError.from(
             new TRPCWebSocketClosedError('WebSocket closed prematurely'),
           ),
         );
         if (req.type !== 'subscription') {
           delete pendingRequests[key];
-          req.callbacks.onDone?.();
+          req.callbacks.complete?.();
         } else if (state !== 'closed') {
           // request restart of sub with next connection
           resumeSubscriptionOnReconnect(req);
@@ -243,7 +233,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
       delete pendingRequests[id];
       outgoing = outgoing.filter((msg) => msg.id !== id);
 
-      callbacks?.onDone?.();
+      callbacks?.complete?.();
       if (op.type === 'subscription') {
         outgoing.push({
           id,
@@ -289,63 +279,52 @@ class TRPCSubscriptionEndedError extends Error {
 export function wsLink<TRouter extends AnyRouter>(
   opts: WebSocketLinkOptions,
 ): TRPCLink<TRouter> {
-  // initialized config
-  return (rt) => {
+  return () => {
     const { client } = opts;
+    return ({ op }) => {
+      return observable((observer) => {
+        const { type, input, path, id, context } = op;
 
-    return ({ op, prev, onDestroy }) => {
-      const { type, input: rawInput, path, id } = op;
-      const input = rt.transformer.serialize(rawInput);
-      let isDone = false;
-      const unsub = client.request(
-        { type, path, input, id },
-        {
-          onNext(result) {
-            if (isDone) {
-              return;
-            }
-            if ('data' in result) {
-              const data = rt.transformer.deserialize(result.data);
-              prev({ type: 'data', data });
-            } else {
-              prev(result);
-            }
-
-            if (op.type !== 'subscription') {
-              // if it isn't a subscription we don't care about next response
+        let isDone = false;
+        const unsub = client.request(
+          { type, path, input, id, context },
+          {
+            error(err) {
               isDone = true;
+              observer.error(err);
               unsub();
-            }
-          },
-          onError(err) {
-            if (isDone) {
-              return;
-            }
-            prev(
-              err instanceof Error
-                ? err
-                : TRPCClientError.from({
-                    ...err,
-                    error: rt.transformer.deserialize(err.error),
-                  }),
-            );
-          },
-          onDone() {
-            if (isDone) {
-              return;
-            }
-            const result = new TRPCSubscriptionEndedError(
-              'Operation ended prematurely',
-            );
+            },
+            complete() {
+              if (!isDone) {
+                isDone = true;
+                observer.error(
+                  TRPCClientError.from(
+                    new TRPCSubscriptionEndedError(
+                      'Operation ended prematurely',
+                    ),
+                  ),
+                );
+              } else {
+                observer.complete();
+              }
+            },
+            next(result) {
+              observer.next(result);
+
+              if (op.type !== 'subscription') {
+                // if it isn't a subscription we don't care about next response
 
-            prev(TRPCClientError.from(result, { isDone: true }));
-            isDone = true;
+                isDone = true;
+                unsub();
+                observer.complete();
+              }
+            },
           },
-        },
-      );
-      onDestroy(() => {
-        isDone = true;
-        unsub();
+        );
+        return () => {
+          isDone = true;
+          unsub();
+        };
       });
     };
   };

package/src/rx/index.ts

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

package/src/rx/observable.test.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { observable } from './observable';
+import { tap } from './operators';
+import { share } from './operators/share';
+
+test('vanilla observable', () => {
+  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('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/rx/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/rx/operators/index.ts

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

package/src/rx/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/rx/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;
+      },
+    };
+  };
+}