@trpc/client 10.32.0 → 10.33.1

package/src/getFetch.ts

@@ -4,11 +4,6 @@ type AnyFn = (...args: any[]) => unknown;
 
 const isFunction = (fn: unknown): fn is AnyFn => typeof fn === 'function';
 
-function _bind(fn: AnyFn, thisArg: unknown): AnyFn {
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  return isFunction(fn.bind) ? fn.bind(thisArg) : fn;
-}
-
 export function getFetch(
   customFetchImpl?: FetchEsque | NativeFetchEsque,
 ): FetchEsque {
@@ -17,11 +12,11 @@ export function getFetch(
   }
 
   if (typeof window !== 'undefined' && isFunction(window.fetch)) {
-    return _bind(window.fetch, window) as FetchEsque;
+    return window.fetch as FetchEsque;
   }
 
   if (typeof globalThis !== 'undefined' && isFunction(globalThis.fetch)) {
-    return _bind(globalThis.fetch, globalThis) as FetchEsque;
+    return globalThis.fetch as FetchEsque;
   }
 
   throw new Error('No fetch implementation found');

package/src/internals/TRPCUntypedClient.ts

@@ -55,7 +55,7 @@ type CreateTRPCClientBaseOptions<TRouter extends AnyRouter> =
           | CombinedDataTransformer;
       };
 
-type TRPCType = 'subscription' | 'query' | 'mutation';
+type TRPCType = 'mutation' | 'query' | 'subscription';
 export interface TRPCRequestOptions {
   /**
    * Pass additional context to links
@@ -80,13 +80,13 @@ export type CreateTRPCClientOptions<TRouter extends AnyRouter> =
 
 /** @internal */
 export type UntypedClientProperties =
-  | 'links'
-  | 'runtime'
-  | 'requestId'
   | '$request'
-  | 'requestAsPromise'
-  | 'query'
+  | 'links'
   | 'mutation'
+  | 'query'
+  | 'requestAsPromise'
+  | 'requestId'
+  | 'runtime'
   | 'subscription';
 
 export class TRPCUntypedClient<TRouter extends AnyRouter> {
@@ -204,8 +204,10 @@ export class TRPCUntypedClient<TRouter extends AnyRouter> {
   public subscription(
     path: string,
     input: unknown,
-    opts: TRPCRequestOptions &
-      Partial<TRPCSubscriptionObserver<unknown, TRPCClientError<AnyRouter>>>,
+    opts: Partial<
+      TRPCSubscriptionObserver<unknown, TRPCClientError<AnyRouter>>
+    > &
+      TRPCRequestOptions,
   ): Unsubscribable {
     const observable$ = this.$request({
       type: 'subscription',

package/src/internals/dataLoader.ts

@@ -126,8 +126,7 @@ export function dataLoader<TKey, TValue>(
             const value = result[i]!;
             unitResolver(i, value);
           }
-          for (let i = 0; i < batch.items.length; i++) {
-            const item = batch.items[i]!;
+          for (const item of batch.items) {
             item.reject?.(new Error('Missing result'));
             item.batch = null;
           }

package/src/internals/types.ts

@@ -1,6 +1,4 @@
-export interface AbortControllerEsque {
-  new (): AbortControllerInstanceEsque;
-}
+export type AbortControllerEsque = new () => AbortControllerInstanceEsque;
 
 /**
  * Allows you to abort one or more requests.
@@ -35,7 +33,7 @@ export type FetchEsque = (
  * their own fetch types, such as undici and node-fetch.
  */
 export type NativeFetchEsque = (
-  url: string | URL,
+  url: URL | string,
   init?: NodeFetchRequestInitEsque,
 ) => Promise<ResponseEsque>;
 
@@ -54,7 +52,7 @@ export interface RequestInitEsque {
   /**
    * Sets the request's body.
    */
-  body?: string | ReadableStream | FormData | null;
+  body?: FormData | ReadableStream | string | null;
 
   /**
    * Sets the request's associated headers.
@@ -85,7 +83,7 @@ export type WebReadableStreamEsque = {
  * @see Response from lib.dom.d.ts
  */
 export interface ResponseEsque {
-  readonly body?: WebReadableStreamEsque | NodeJS.ReadableStream | null;
+  readonly body?: NodeJS.ReadableStream | WebReadableStreamEsque | null;
   /**
    * @remarks
    * The built-in Response::json() method returns Promise<any>, but

package/src/links/httpBatchStreamLink.ts

@@ -34,7 +34,9 @@ const streamRequester: RequesterFn<HTTPBatchStreamLinkOptions> = (
           return requesterOpts.opts.headers;
         },
       },
-      (index, res) => unitResolver(index, res),
+      (index, res) => {
+        unitResolver(index, res);
+      },
     );
 
     return {

package/src/links/httpLink.ts

@@ -66,7 +66,9 @@ export function httpLinkFactory(factoryOpts: { requester: Requester }) {
               });
               observer.complete();
             })
-            .catch((cause) => observer.error(TRPCClientError.from(cause)));
+            .catch((cause) => {
+              observer.error(TRPCClientError.from(cause));
+            });
 
           return () => {
             cancel();

package/src/links/internals/createHTTPBatchLink.ts

@@ -39,7 +39,7 @@ export function createHTTPBatchLink<TOptions extends HTTPBatchLinkOptions>(
     opts: TOptions,
   ): TRPCLink<TRouter> {
     const resolvedOpts = resolveHTTPLinkOptions(opts);
-    const maxURLLength = opts.maxURLLength || Infinity;
+    const maxURLLength = opts.maxURLLength ?? Infinity;
 
     // initialized config
     return (runtime) => {
@@ -105,9 +105,13 @@ export function createHTTPBatchLink<TOptions extends HTTPBatchLinkOptions>(
               });
               observer.complete();
             })
-            .catch((err) => observer.error(TRPCClientError.from(err)));
+            .catch((err) => {
+              observer.error(TRPCClientError.from(err));
+            });
 
-          return () => cancel();
+          return () => {
+            cancel();
+          };
         });
       };
     };

package/src/links/internals/httpUtils.ts

@@ -29,7 +29,7 @@ export interface HTTPLinkBaseOptions {
 
 export interface ResolvedHTTPLinkOptions {
   url: string;
-  fetch: FetchEsque;
+  fetch?: FetchEsque;
   AbortController: AbortControllerEsque | null;
 }
 
@@ -38,7 +38,7 @@ export function resolveHTTPLinkOptions(
 ): ResolvedHTTPLinkOptions {
   return {
     url: opts.url,
-    fetch: getFetch(opts.fetch),
+    fetch: opts.fetch,
     AbortController: getAbortController(opts.AbortController),
   };
 }
@@ -67,7 +67,7 @@ export interface HTTPResult {
 
 type GetInputOptions = {
   runtime: TRPCClientRuntime;
-} & ({ inputs: unknown[] } | { input: unknown });
+} & ({ input: unknown } | { inputs: unknown[] });
 
 function getInput(opts: GetInputOptions) {
   return 'input' in opts
@@ -77,8 +77,8 @@ function getInput(opts: GetInputOptions) {
       );
 }
 
-export type HTTPBaseRequestOptions = ResolvedHTTPLinkOptions &
-  GetInputOptions & {
+export type HTTPBaseRequestOptions = GetInputOptions &
+  ResolvedHTTPLinkOptions & {
     type: ProcedureType;
     path: string;
   };
@@ -136,8 +136,8 @@ export const jsonHttpRequester: Requester = (opts) => {
   });
 };
 
-export type HTTPRequestOptions = HTTPBaseRequestOptions &
-  ContentOptions & {
+export type HTTPRequestOptions = ContentOptions &
+  HTTPBaseRequestOptions & {
     headers: () => HTTPHeaders | Promise<HTTPHeaders>;
     TextDecoder?: TextDecoderEsque;
   };
@@ -149,25 +149,26 @@ export async function fetchHTTPResponse(
   const url = opts.getUrl(opts);
   const body = opts.getBody(opts);
   const { type } = opts;
-  const headers = await opts.headers();
+  const resolvedHeaders = await opts.headers();
   /* istanbul ignore if -- @preserve */
   if (type === 'subscription') {
     throw new Error('Subscriptions should use wsLink');
   }
+  const headers = {
+    ...(opts.contentTypeHeader
+      ? { 'content-type': opts.contentTypeHeader }
+      : {}),
+    ...(opts.batchModeHeader
+      ? { 'trpc-batch-mode': opts.batchModeHeader }
+      : {}),
+    ...resolvedHeaders,
+  };
 
-  return opts.fetch(url, {
+  return getFetch(opts.fetch)(url, {
     method: METHOD[type],
     signal: ac?.signal,
     body: body,
-    headers: {
-      ...(opts.contentTypeHeader
-        ? { 'content-type': opts.contentTypeHeader }
-        : {}),
-      ...(opts.batchModeHeader
-        ? { 'trpc-batch-mode': opts.batchModeHeader }
-        : {}),
-      ...headers,
-    },
+    headers,
   });
 }
 

package/src/links/internals/parseJSONStream.ts

@@ -26,7 +26,7 @@ export async function parseJSONStream<TReturn>(opts: {
   /**
    * As given by `(await fetch(url)).body`
    */
-  readableStream: WebReadableStreamEsque | NodeJS.ReadableStream;
+  readableStream: NodeJS.ReadableStream | WebReadableStreamEsque;
   /**
    * Called for each line of the stream
    */
@@ -69,7 +69,7 @@ export async function parseJSONStream<TReturn>(opts: {
  * @param onLine will be called for every line ('\n' delimited) in the stream
  */
 async function readLines(
-  readableStream: WebReadableStreamEsque | NodeJS.ReadableStream,
+  readableStream: NodeJS.ReadableStream | WebReadableStreamEsque,
   onLine: (line: string) => void,
   textDecoder: TextDecoderEsque,
 ) {

package/src/links/loggerLink.ts

@@ -16,25 +16,19 @@ type ConsoleEsque = {
 };
 
 type EnableFnOptions<TRouter extends AnyRouter> =
-  | (Operation & {
-      direction: 'up';
-    })
   | {
       direction: 'down';
       result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>;
-    };
+    }
+  | (Operation & {
+      direction: 'up';
+    });
 type EnabledFn<TRouter extends AnyRouter> = (
   opts: EnableFnOptions<TRouter>,
 ) => boolean;
 
 type LoggerLinkFnOptions<TRouter extends AnyRouter> = Operation &
   (
-    | {
-        /**
-         * Request was just initialized
-         */
-        direction: 'up';
-      }
     | {
         /**
          * Request result
@@ -43,17 +37,18 @@ type LoggerLinkFnOptions<TRouter extends AnyRouter> = Operation &
         result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>;
         elapsedMs: number;
       }
+    | {
+        /**
+         * Request was just initialized
+         */
+        direction: 'up';
+      }
   );
 
 type LoggerLinkFn<TRouter extends AnyRouter> = (
   opts: LoggerLinkFnOptions<TRouter>,
 ) => void;
 
-const palette = {
-  query: ['72e3ff', '3fb0d8'],
-  mutation: ['c5a3fc', '904dfc'],
-  subscription: ['ff49e1', 'd83fbe'],
-};
 export interface LoggerLinkOptions<TRouter extends AnyRouter> {
   logger?: LoggerLinkFn<TRouter>;
   enabled?: EnabledFn<TRouter>;
@@ -61,6 +56,11 @@ export interface LoggerLinkOptions<TRouter extends AnyRouter> {
    * Used in the built-in defaultLogger
    */
   console?: ConsoleEsque;
+  /**
+   * Color mode
+   * @default typeof window === 'undefined' ? 'ansi' : 'css'
+   */
+  colorMode?: 'ansi' | 'css';
 }
 
 function isFormData(value: unknown): value is FormData {
@@ -71,50 +71,120 @@ function isFormData(value: unknown): value is FormData {
   return value instanceof FormData;
 }
 
+const palettes = {
+  css: {
+    query: ['72e3ff', '3fb0d8'],
+    mutation: ['c5a3fc', '904dfc'],
+    subscription: ['ff49e1', 'd83fbe'],
+  },
+  ansi: {
+    regular: {
+      // Cyan background, black and white text respectively
+      query: ['\x1b[30;46m', '\x1b[97;46m'],
+      // Magenta background, black and white text respectively
+      mutation: ['\x1b[30;45m', '\x1b[97;45m'],
+      // Green background, black and white text respectively
+      subscription: ['\x1b[30;42m', '\x1b[97;42m'],
+    },
+    bold: {
+      query: ['\x1b[1;30;46m', '\x1b[1;97;46m'],
+      mutation: ['\x1b[1;30;45m', '\x1b[1;97;45m'],
+      subscription: ['\x1b[1;30;42m', '\x1b[1;97;42m'],
+    },
+  },
+} as const;
+
+function constructPartsAndArgs(
+  opts: LoggerLinkFnOptions<any> & {
+    colorMode: 'ansi' | 'css';
+  },
+) {
+  const { direction, type, path, id, input } = opts;
+
+  const parts: string[] = [];
+  const args: any[] = [];
+
+  if (opts.colorMode === 'ansi') {
+    const [lightRegular, darkRegular] = palettes.ansi.regular[type];
+    const [lightBold, darkBold] = palettes.ansi.bold[type];
+    const reset = '\x1b[0m';
+
+    parts.push(
+      direction === 'up' ? lightRegular : darkRegular,
+      direction === 'up' ? '>>' : '<<',
+      type,
+      direction === 'up' ? lightBold : darkBold,
+      `#${id}`,
+      path,
+      reset,
+    );
+
+    if (direction === 'up') {
+      args.push({ input: opts.input });
+    } else {
+      args.push({
+        input: opts.input,
+        // strip context from result cause it's too noisy in terminal wihtout collapse mode
+        result: 'result' in opts.result ? opts.result.result : opts.result,
+        elapsedMs: opts.elapsedMs,
+      });
+    }
+
+    return { parts, args };
+  }
+
+  const [light, dark] = palettes.css[type];
+  const css = `
+    background-color: #${direction === 'up' ? light : dark}; 
+    color: ${direction === 'up' ? 'black' : 'white'};
+    padding: 2px;
+  `;
+
+  parts.push(
+    '%c',
+    direction === 'up' ? '>>' : '<<',
+    type,
+    `#${id}`,
+    `%c${path}%c`,
+    '%O',
+  );
+  args.push(css, `${css}; font-weight: bold;`, `${css}; font-weight: normal;`);
+
+  if (direction === 'up') {
+    args.push({ input, context: opts.context });
+  } else {
+    args.push({
+      input,
+      result: opts.result,
+      elapsedMs: opts.elapsedMs,
+      context: opts.context,
+    });
+  }
+
+  return { parts, args };
+}
+
 // maybe this should be moved to it's own package
 const defaultLogger =
-  <TRouter extends AnyRouter>(
-    c: ConsoleEsque = console,
-  ): LoggerLinkFn<TRouter> =>
+  <TRouter extends AnyRouter>({
+    c = console,
+    colorMode = 'css',
+  }: {
+    c?: ConsoleEsque;
+    colorMode?: 'ansi' | 'css';
+  }): LoggerLinkFn<TRouter> =>
   (props) => {
-    const { direction, type, path, context, id } = props;
-    const [light, dark] = palette[type];
-
     const rawInput = props.input;
-
     const input = isFormData(rawInput)
       ? Object.fromEntries(rawInput)
       : rawInput;
 
-    const css = `
-    background-color: #${direction === 'up' ? light : dark}; 
-    color: ${direction === 'up' ? 'black' : 'white'};
-    padding: 2px;
-  `;
+    const { parts, args } = constructPartsAndArgs({
+      ...props,
+      colorMode,
+      input,
+    });
 
-    const parts = [
-      '%c',
-      direction === 'up' ? '>>' : '<<',
-      type,
-      `#${id}`,
-      `%c${path}%c`,
-      '%O',
-    ];
-    const args: any[] = [
-      css,
-      `${css}; font-weight: bold;`,
-      `${css}; font-weight: normal;`,
-    ];
-    if (props.direction === 'up') {
-      args.push({ input, context: context });
-    } else {
-      args.push({
-        input,
-        result: props.result,
-        elapsedMs: props.elapsedMs,
-        context,
-      });
-    }
     const fn: 'error' | 'log' =
       props.direction === 'down' &&
       props.result &&
@@ -124,12 +194,15 @@ const defaultLogger =
 
     c[fn].apply(null, [parts.join(' ')].concat(args));
   };
+
 export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
   opts: LoggerLinkOptions<TRouter> = {},
 ): TRPCLink<TRouter> {
   const { enabled = () => true } = opts;
 
-  const { logger = defaultLogger(opts.console) } = opts;
+  const colorMode =
+    opts.colorMode ?? (typeof window === 'undefined' ? 'ansi' : 'css');
+  const { logger = defaultLogger({ c: opts.console, colorMode }) } = opts;
 
   return () => {
     return ({ op, next }) => {

package/src/links/types.ts

@@ -31,7 +31,7 @@ export interface OperationContext extends Record<string, unknown> {}
  */
 export type Operation<TInput = unknown> = {
   id: number;
-  type: 'query' | 'mutation' | 'subscription';
+  type: 'mutation' | 'query' | 'subscription';
   input: TInput;
   path: string;
   context: OperationContext;
@@ -40,7 +40,7 @@ export type Operation<TInput = unknown> = {
 /**
  * @internal
  */
-export type HTTPHeaders = Record<string, string | string[] | undefined>;
+export type HTTPHeaders = Record<string, string[] | string | undefined>;
 
 /**
  * The default `fetch` implementation has an overloaded signature. By convention this library
@@ -62,8 +62,8 @@ export interface TRPCClientRuntime {
  */
 export interface OperationResultEnvelope<TOutput> {
   result:
-    | TRPCSuccessResponse<TOutput>['result']
-    | TRPCResultMessage<TOutput>['result'];
+    | TRPCResultMessage<TOutput>['result']
+    | TRPCSuccessResponse<TOutput>['result'];
   context?: OperationContext;
 }
 

package/src/links/wsLink.ts

@@ -67,7 +67,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
   let dispatchTimer: NodeJS.Timer | number | null = null;
   let connectTimer: NodeJS.Timer | number | null = null;
   let activeConnection = createWS();
-  let state: 'open' | 'connecting' | 'closed' = 'connecting';
+  let state: 'closed' | 'connecting' | 'open' = 'connecting';
   /**
    * tries to send the list of messages
    */
@@ -90,7 +90,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
     });
   }
   function tryReconnect() {
-    if (connectTimer || state === 'closed') {
+    if (connectTimer !== null || state === 'closed') {
       return;
     }
     const timeout = retryDelayFn(connectAttempt++);

package/src/shared/transformResult.ts

@@ -14,8 +14,8 @@ import { TRPCClientError } from '../TRPCClientError';
 /** @internal */
 function transformResultInner<TRouter extends AnyRouter, TOutput>(
   response:
-    | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>
-    | TRPCResponse<TOutput, inferRouterError<TRouter>>,
+    | TRPCResponse<TOutput, inferRouterError<TRouter>>
+    | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>,
   runtime: TRPCClientRuntime,
 ) {
   if ('error' in response) {
@@ -47,8 +47,8 @@ function transformResultInner<TRouter extends AnyRouter, TOutput>(
  */
 export function transformResult<TRouter extends AnyRouter, TOutput>(
   response:
-    | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>
-    | TRPCResponse<TOutput, inferRouterError<TRouter>>,
+    | TRPCResponse<TOutput, inferRouterError<TRouter>>
+    | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>,
   runtime: TRPCClientRuntime,
 ): ReturnType<typeof transformResultInner> {
   let result: ReturnType<typeof transformResultInner>;