@ethlete/query 5.15.1 → 5.16.0

package/src/lib/query-form/query-form.utils.ts

@@ -0,0 +1,116 @@
+export const transformToString = (value: unknown) => {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  return null;
+};
+
+export const transformToStringArray = (value: unknown) => {
+  if (Array.isArray(value)) {
+    return value.map(transformToString).filter(Boolean) as string[];
+  } else if (typeof value === 'string') {
+    return [transformToString(value)] as string[];
+  }
+
+  return null;
+};
+
+export const transformToNumber = (value: unknown) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (typeof value === 'string') {
+    return Number(value);
+  }
+  return null;
+};
+
+export const transformToNumberArray = (value: unknown) => {
+  if (Array.isArray(value)) {
+    return value.map(transformToNumber).filter((item) => item !== null) as number[];
+  } else if (typeof value === 'number') {
+    return [value] as number[];
+  }
+
+  return null;
+};
+
+export const transformToBoolean = (value: unknown) => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  if (typeof value === 'string') {
+    return value === 'true' || value === '1';
+  }
+  return null;
+};
+
+export const transformToBooleanArray = (value: unknown) => {
+  if (Array.isArray(value)) {
+    return value.map(transformToBoolean).filter((item) => item !== null) as boolean[];
+  } else if (typeof value === 'string' || typeof value === 'boolean') {
+    return [transformToBoolean(value)] as boolean[];
+  }
+
+  return null;
+};
+
+export const transformToDate = (value: unknown) => {
+  if (value instanceof Date) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const date = new Date(value);
+
+    if (isNaN(date.getTime())) {
+      return null;
+    }
+
+    return date;
+  }
+  return null;
+};
+
+export const transformToDateArray = (value: unknown) => {
+  if (Array.isArray(value)) {
+    return value.map(transformToDate).filter((item) => item !== null) as Date[];
+  } else if (typeof value === 'string' || value instanceof Date) {
+    return [transformToDate(value)] as Date[];
+  }
+
+  return null;
+};
+
+export const transformToSort = (value: unknown) => {
+  if (typeof value === 'string') {
+    const [active, direction] = value.split(':');
+
+    if (!active) {
+      return null;
+    }
+
+    return {
+      active,
+      direction: direction as 'asc' | 'desc',
+    };
+  }
+
+  return null;
+};
+
+export const transformToSortQueryParam = (value: unknown) => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (value && typeof value === 'object' && 'active' in value && 'direction' in value) {
+    const valAsSort = value as {
+      active: string;
+      direction: 'asc' | 'desc';
+    };
+
+    return valAsSort.direction ? `${valAsSort.active}:${valAsSort.direction}` : null;
+  }
+
+  return null;
+};

package/src/lib/query-store/query-store.ts

@@ -0,0 +1,192 @@
+import { Subject, fromEvent, take, takeUntil, timer } from 'rxjs';
+import { AnyQuery } from '../query';
+
+export class QueryStore {
+  /**
+   * @internal
+   */
+  readonly _store = new Map<string, AnyQuery>();
+
+  private _garbageCollector: number | null = null;
+  private _isInLowResourceMode = false;
+  private _lastBlurTimestamp = Date.now();
+
+  private _storeChange$ = new Subject<string>();
+  private _queryCreated$ = new Subject<AnyQuery>();
+
+  readonly storeChange$ = this._storeChange$.asObservable();
+  readonly queryCreated$ = this._queryCreated$.asObservable();
+
+  constructor(
+    private _config?: {
+      enableChangeLogging?: boolean;
+      enableGarbageCollectorLogging?: boolean;
+      autoRefreshQueriesOnWindowFocus?: boolean;
+      enableSmartPolling?: boolean;
+    },
+  ) {
+    this._initSmartQueryHandling();
+  }
+
+  add(id: string, query: AnyQuery) {
+    this._store.set(id, query);
+
+    this._initGarbageCollector();
+
+    this._logState(id, query, 'SET');
+
+    this._storeChange$.next(id);
+  }
+
+  get<T extends AnyQuery>(id: string): T | null {
+    return (this._store.get(id) as T) ?? null;
+  }
+
+  remove(id: string) {
+    this._store.delete(id);
+
+    this._logState(id, null, 'REMOVE');
+
+    this._storeChange$.next(id);
+  }
+
+  forEach(callback: (value: AnyQuery, key: string) => void) {
+    for (const [key, query] of this._store) {
+      callback(query, key);
+    }
+  }
+
+  refreshQueriesInUse(config?: { ignoreCacheValidity?: boolean; purgeUnused?: boolean }) {
+    const { ignoreCacheValidity, purgeUnused } = config ?? {};
+
+    for (const [key, query] of this._store) {
+      if (
+        query.isInUse &&
+        (query.isExpired || ignoreCacheValidity) &&
+        query.autoRefreshOnConfig.queryClientDefaultHeadersChange
+      ) {
+        query.execute({ skipCache: true, _triggeredVia: 'auto' });
+      } else if (purgeUnused && !query.isInUse) {
+        this.remove(key);
+      }
+    }
+  }
+
+  /**
+   * @internal
+   */
+  _dispatchQueryCreated(query: AnyQuery) {
+    this._queryCreated$.next(query);
+  }
+
+  private _initSmartQueryHandling() {
+    const windowBlur$ = fromEvent<Event>(window, 'blur');
+    const windowFocus$ = fromEvent<Event>(window, 'focus');
+
+    windowBlur$.subscribe(() => {
+      timer(5000)
+        .pipe(takeUntil(windowFocus$), take(1))
+        .subscribe(() => {
+          this._lastBlurTimestamp = Date.now();
+          this._isInLowResourceMode = true;
+          this._stopGarbageCollector();
+
+          if (this._config?.enableSmartPolling) {
+            this.forEach((query) => {
+              if (!query.isPolling || !query._enableSmartPolling) {
+                return;
+              }
+
+              query.pausePolling();
+            });
+          }
+        });
+    });
+
+    windowFocus$.subscribe(() => {
+      if (!this._isInLowResourceMode) {
+        return;
+      }
+
+      this._isInLowResourceMode = false;
+
+      if (this._config?.enableSmartPolling || this._config?.autoRefreshQueriesOnWindowFocus) {
+        this.forEach((query) => {
+          if (this._config?.enableSmartPolling && query._isPollingPaused) {
+            query.resumePolling();
+          }
+
+          if (Date.now() - this._lastBlurTimestamp > 15000) {
+            if (
+              this._config?.autoRefreshQueriesOnWindowFocus &&
+              query.isExpired &&
+              query.isInUse &&
+              query.autoRefreshOnConfig.windowFocus
+            ) {
+              query.execute({ skipCache: true, _triggeredVia: 'auto' });
+            }
+          }
+        });
+      }
+
+      this._initGarbageCollector();
+    });
+  }
+
+  private _logState(key: string | null, item: AnyQuery | null, operation: string) {
+    if (!this._config?.enableChangeLogging) return;
+
+    const stateAsJson: Record<string, AnyQuery> = {};
+
+    this._store.forEach((value, key) => {
+      stateAsJson[key] = value;
+    });
+
+    console.log(`%c[${operation}] ${key}`, 'font-weight: bold');
+
+    console.log({ operation, key, item });
+    console.log(stateAsJson);
+  }
+
+  private _initGarbageCollector() {
+    if (this._garbageCollector !== null) {
+      return;
+    }
+
+    this._logGarbageCollector('Start');
+
+    this._garbageCollector = window.setInterval(() => {
+      this._runGarbageCollector();
+    }, 15000);
+  }
+
+  private _stopGarbageCollector() {
+    if (this._garbageCollector !== null) {
+      window.clearInterval(this._garbageCollector);
+      this._garbageCollector = null;
+      this._logGarbageCollector('Stop');
+    }
+  }
+
+  private _runGarbageCollector() {
+    this._logGarbageCollector('Collecting...');
+
+    this._store.forEach((item, key) => {
+      if (item.isExpired && !item.isInUse) {
+        this.remove(key);
+      }
+    });
+
+    this._logGarbageCollector('Collection done');
+
+    if (!this._store.size) {
+      this._stopGarbageCollector();
+    }
+  }
+
+  private _logGarbageCollector(action: string) {
+    if (!this._config?.enableGarbageCollectorLogging) return;
+
+    console.log(`%cGC: ${action}`, 'color: yellow; font-weight: bold');
+  }
+}

package/src/lib/request/request.ts

@@ -0,0 +1,253 @@
+import { Observable, Observer } from 'rxjs';
+import { PartialXhrState, RequestConfig, RequestError, RequestEvent } from './request.types';
+import {
+  HttpStatusCode,
+  buildTimestampFromSeconds,
+  detectContentTypeHeader,
+  extractExpiresInSeconds,
+  forEachHeader,
+  getResponseUrl,
+  hasHeader,
+  parseAllXhrResponseHeaders,
+  serializeBody,
+  shouldRetryRequest,
+} from './request.util';
+
+const XSSI_PREFIX = /^\)\]\}',?\n/;
+
+export const request = <Response = unknown>(config: RequestConfig): Observable<RequestEvent<Response>> => {
+  const headers = config.headers || {};
+  const responseType = config.responseType || 'json';
+  const body = config.body || null;
+  const url = config.urlWithParams.split('?')[0] || '';
+  const retryFn = config.retryFn || shouldRetryRequest;
+  let currentRetryCount = 0;
+  let retryTimeout: number | null = null;
+
+  return new Observable((observer: Observer<RequestEvent<Response>>) => {
+    const xhr = new XMLHttpRequest();
+    const reqBody = serializeBody(body);
+
+    const setupXhr = () => {
+      xhr.open(config.method, config.urlWithParams);
+      if (config.withCredentials) {
+        xhr.withCredentials = true;
+      }
+
+      forEachHeader(headers, (name, value) => xhr.setRequestHeader(name, value));
+
+      if (!hasHeader(headers, 'Accept')) {
+        xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
+      }
+
+      if (!hasHeader(headers, 'Content-Type')) {
+        const detectedType = detectContentTypeHeader(body);
+
+        if (detectedType) {
+          xhr.setRequestHeader('Content-Type', detectedType);
+        }
+      }
+
+      xhr.responseType = responseType !== 'json' ? responseType : 'text';
+    };
+
+    setupXhr();
+
+    const partialFromXhr = (): PartialXhrState => {
+      const statusText = xhr.statusText || 'OK';
+      const headers = parseAllXhrResponseHeaders(xhr);
+      const _url = getResponseUrl(xhr) || url;
+
+      return { headers, status: xhr.status, statusText, url: _url };
+    };
+
+    const handleRetry = (error: RequestError) => {
+      const newRetryCount = currentRetryCount + 1;
+      const { headers } = partialFromXhr();
+      const { retry, delay } = retryFn({ currentRetryCount: newRetryCount, headers, error });
+
+      if (!retry) {
+        observer.next({ type: 'failure', headers, error });
+        observer.complete();
+        return;
+      }
+
+      const _delay = delay ?? 1000;
+      observer.next({ type: 'delay-retry', headers, retryNumber: newRetryCount, retryDelay: _delay });
+
+      retryTimeout = window.setTimeout(() => {
+        setupXhr();
+        xhr.send(reqBody);
+        currentRetryCount = newRetryCount;
+        observer.next({ type: 'start', headers, isRetry: true, retryNumber: currentRetryCount, retryDelay: _delay });
+      }, _delay);
+    };
+
+    const onLoad = async () => {
+      const { headers, statusText, url } = partialFromXhr();
+
+      let { status } = partialFromXhr();
+
+      let body: unknown | null = null;
+
+      if (status !== HttpStatusCode.NoContent) {
+        body = typeof xhr.response === 'undefined' ? xhr.responseText : xhr.response;
+      }
+
+      if (status === 0) {
+        status = body ? HttpStatusCode.Ok : 0;
+      }
+
+      let ok = status >= 200 && status < 300;
+
+      if (responseType === 'json' && typeof body === 'string') {
+        const originalBody = body;
+        body = body.replace(XSSI_PREFIX, '');
+        try {
+          body = body !== '' ? JSON.parse(body as string) : null;
+        } catch (error) {
+          body = originalBody;
+
+          if (ok) {
+            ok = false;
+            body = { error, text: body };
+          }
+        }
+      } else if (!ok && body instanceof Blob) {
+        try {
+          const text = await body.text();
+
+          if (body.type === 'application/json') {
+            body = JSON.parse(text);
+          } else {
+            body = text;
+          }
+        } catch (error) {
+          // Ignore the error.
+        }
+      }
+
+      if (ok) {
+        const successEvent: RequestEvent<Response> = {
+          type: 'success',
+          headers,
+          response: body as Response,
+        };
+
+        const expiresInSeconds = config.cacheAdapter?.(headers) ?? extractExpiresInSeconds(headers);
+        const expiresInTimestamp = buildTimestampFromSeconds(expiresInSeconds);
+
+        if (expiresInTimestamp) {
+          successEvent.expiresInTimestamp = expiresInTimestamp;
+        }
+
+        observer.next(successEvent);
+
+        observer.complete();
+      } else {
+        handleRetry({
+          url,
+          detail: body,
+          status,
+          statusText,
+        });
+      }
+    };
+
+    const onError = (error: Event) => {
+      const { url } = partialFromXhr();
+
+      handleRetry({
+        url,
+        detail: error,
+        status: xhr.status || 0,
+        statusText: xhr.statusText || 'Unknown Error',
+      });
+    };
+
+    const onDownProgress = (event: ProgressEvent) => {
+      const { headers } = partialFromXhr();
+
+      const progress: RequestEvent = {
+        type: 'download-progress',
+        headers,
+        progress: {
+          current: event.loaded,
+        },
+      };
+
+      if (event.lengthComputable) {
+        const progressPercent = (event.loaded / event.total) * 100;
+        progress.progress.percentage = Math.round(progressPercent * 100) / 100;
+        progress.progress.total = event.total;
+      }
+
+      if (responseType === 'text' && !!xhr.responseText) {
+        progress.partialText = xhr.responseText;
+      }
+
+      observer.next(progress);
+    };
+
+    const onUpProgress = (event: ProgressEvent) => {
+      const { headers } = partialFromXhr();
+
+      const progress: RequestEvent = {
+        type: 'upload-progress',
+        headers,
+        progress: {
+          current: event.loaded,
+        },
+      };
+
+      if (event.lengthComputable) {
+        const progressPercent = (event.loaded / event.total) * 100;
+        progress.progress.percentage = Math.round(progressPercent * 100) / 100;
+        progress.progress.total = event.total;
+      }
+
+      observer.next(progress);
+    };
+
+    xhr.addEventListener('load', onLoad);
+    xhr.addEventListener('error', onError);
+    xhr.addEventListener('timeout', onError);
+    xhr.addEventListener('abort', onError);
+
+    if (config.reportProgress) {
+      xhr.addEventListener('progress', onDownProgress);
+
+      if (reqBody !== null && xhr.upload) {
+        xhr.upload.addEventListener('progress', onUpProgress);
+      }
+    }
+
+    xhr.send(reqBody);
+    observer.next({ type: 'start', headers });
+
+    return () => {
+      xhr.removeEventListener('error', onError);
+      xhr.removeEventListener('abort', onError);
+      xhr.removeEventListener('load', onLoad);
+      xhr.removeEventListener('timeout', onError);
+
+      if (retryTimeout) {
+        window.clearTimeout(retryTimeout);
+      }
+
+      if (config.reportProgress) {
+        xhr.removeEventListener('progress', onDownProgress);
+
+        if (reqBody !== null && xhr.upload) {
+          xhr.upload.removeEventListener('progress', onUpProgress);
+        }
+      }
+
+      if (xhr.readyState !== xhr.DONE) {
+        xhr.abort();
+      }
+
+      observer.next({ type: 'cancel', headers });
+    };
+  });
+};

package/src/lib/request/request.types.ts

@@ -0,0 +1,164 @@
+import { HttpStatusCode } from './request.util';
+
+export type Method =
+  | 'GET'
+  | 'POST'
+  | 'PUT'
+  | 'DELETE'
+  | 'PATCH'
+  | 'HEAD'
+  | 'OPTIONS'
+  | 'TRACE'
+  | 'CONNECT'
+  | 'PURGE'
+  | 'LINK'
+  | 'UNLINK'
+  | 'GQL_QUERY'
+  | 'GQL_MUTATE'
+  | 'CUSTOM';
+
+export interface RequestError<Detail = unknown> {
+  url: string;
+  status: HttpStatusCode;
+  statusText: string;
+  detail: Detail;
+}
+
+export type RequestHeaders = Record<string, string>;
+export type QueryParams = object;
+export type PathParams = Record<string, string | number>;
+
+export type CacheAdapterFn = (headers: RequestHeaders) => number | null;
+
+export type RequestHeadersMethodMap = {
+  [M in Method]?: RequestHeaders;
+};
+
+export interface PartialXhrState {
+  headers: RequestHeaders;
+  status: number;
+  statusText: string;
+  url: string;
+}
+
+export interface RequestRetryFnConfig {
+  error: RequestError;
+  headers: RequestHeaders;
+  currentRetryCount: number;
+}
+
+export interface RequestRetryFnResult {
+  retry: boolean;
+  delay?: number;
+}
+
+export type RequestRetryFn = (config: RequestRetryFnConfig) => RequestRetryFnResult;
+
+export interface RequestConfig {
+  method: Method;
+  urlWithParams: string;
+  body?: unknown;
+  reportProgress?: boolean;
+  withCredentials?: boolean;
+  responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+  headers?: RequestHeaders;
+  cacheAdapter?: CacheAdapterFn;
+  retryFn?: RequestRetryFn;
+}
+
+export type RequestProgress = {
+  current: number;
+  percentage?: number;
+  total?: number;
+};
+
+export type RequestEvent<Response = unknown> =
+  | {
+      type: 'start';
+      headers: RequestHeaders;
+      isRetry?: boolean;
+      retryNumber?: number;
+      retryDelay?: number;
+    }
+  | {
+      type: 'delay-retry';
+      headers: RequestHeaders;
+      retryNumber: number;
+      retryDelay: number;
+    }
+  | {
+      type: 'download-progress';
+      headers: RequestHeaders;
+      progress: RequestProgress;
+      partialText?: string;
+    }
+  | {
+      type: 'upload-progress';
+      headers: RequestHeaders;
+      progress: RequestProgress;
+    }
+  | {
+      type: 'success';
+      headers: RequestHeaders;
+      response: Response;
+      expiresInTimestamp?: number;
+    }
+  | {
+      type: 'failure';
+      headers: RequestHeaders;
+      error: RequestError;
+    }
+  | {
+      type: 'cancel';
+      headers: RequestHeaders;
+    };
+
+export interface BuildQueryStringConfig {
+  /**
+   * Object notation to use for nested objects.
+   *
+   * @example
+   * // dot notation
+   * { foo: { bar: 'baz' } } => "foo.bar=baz"
+   *
+   * @example
+   * // bracket notation
+   * { foo: { bar: 'baz' } } => "foo[bar]=baz"
+   *
+   * @default 'bracket'
+   */
+  objectNotation?: 'dot' | 'bracket';
+
+  /**
+   * Whether to write array indexes in bracket notation.
+   *
+   * @example
+   * // true
+   * { foo: ['bar', 'baz'] } => "foo[0]=bar&foo[1]=baz"
+   *
+   * @example
+   * // false
+   * { foo: ['bar', 'baz'] } => "foo[]=bar&foo[]=baz"
+   *
+   * @default false
+   */
+  writeArrayIndexes?: boolean;
+
+  /**
+   * A list of values that should be ignored when building the query string.
+   *
+   * Also have a look at `ignoredValuesFns`.
+   *
+   * @default [undefined, null, Infinity, -Infinity]
+   */
+  ignoredValues?: Array<unknown>;
+
+  /**
+   * A list of functions that should be used to determine whether a value should be ignored when building the query string.
+   *
+   * Also have a look at `ignoredValues`.
+   *
+   * @default [isNaN, isEmptyString]
+   */
+  ignoredValuesFns?: Array<(value: unknown) => boolean>;
+}