@ethlete/query 5.15.0 → 5.16.0

package/src/lib/directives/infinity-query.directive.ts

@@ -0,0 +1,208 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  ChangeDetectorRef,
+  Directive,
+  ErrorHandler,
+  inject,
+  InjectionToken,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { createDestroy, DelayableDirective } from '@ethlete/core';
+import { BehaviorSubject, combineLatest, Subject, takeUntil, tap, withLatestFrom } from 'rxjs';
+import { InfinityQuery, InfinityQueryConfig, InfinityQueryOf } from '../infinite-query';
+import {
+  BaseArguments,
+  isQueryStateFailure,
+  isQueryStateLoading,
+  isQueryStateSuccess,
+  switchQueryState,
+} from '../query';
+import { AnyQueryCreator, ConstructQuery } from '../query-creator';
+import { RequestError } from '../request';
+
+interface InfinityQueryContext<
+  Q extends InfinityQueryConfig<AnyQueryCreator, BaseArguments | undefined, any, unknown[]>,
+> {
+  $implicit: Q['response']['arrayType'] | null;
+  etInfinityQuery: Q['response']['arrayType'] | null;
+  loading: boolean;
+  error: RequestError<unknown> | null;
+
+  isFirstLoad: boolean;
+  canLoadMore: boolean;
+  currentPage: number | null;
+  currentCalculatedPage: number | null;
+  totalPages: number | null;
+  itemsPerPage: number | null;
+
+  currentQuery: ConstructQuery<Q['queryCreator']> | null;
+}
+
+export const INFINITY_QUERY_TOKEN = new InjectionToken<InfinityQueryDirective<any>>('INFINITY_QUERY_TOKEN');
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[etInfinityQuery]',
+  exportAs: 'etInfinityQuery',
+  standalone: true,
+  providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }],
+  hostDirectives: [DelayableDirective],
+})
+export class InfinityQueryDirective<
+  Q extends InfinityQueryConfig<AnyQueryCreator, BaseArguments | undefined, any, unknown[]>,
+> {
+  private readonly _queryConfigChanged$ = new Subject<boolean>();
+  private readonly _viewContext: InfinityQueryContext<Q> = {
+    $implicit: null,
+    etInfinityQuery: null,
+    loading: false,
+    error: null,
+
+    isFirstLoad: false,
+    canLoadMore: false,
+    currentPage: null,
+    currentCalculatedPage: null,
+    totalPages: null,
+    itemsPerPage: null,
+
+    currentQuery: null,
+  };
+  private _infinityQueryInstance: InfinityQueryOf<Q> | null = null;
+
+  private readonly _destroy$ = createDestroy();
+  private readonly _cdr = inject(ChangeDetectorRef);
+  private readonly _viewContainerRef = inject(ViewContainerRef);
+  private readonly _mainTemplateRef = inject(TemplateRef<InfinityQueryContext<Q>>);
+  private readonly _errorHandler = inject(ErrorHandler);
+  private readonly _delayable = inject(DelayableDirective, { host: true });
+
+  private readonly _data$ = new BehaviorSubject<Q['response']['arrayType']>([]);
+
+  @Input('etInfinityQuery')
+  get infinityQuery(): Q {
+    return this._infinityQuery;
+  }
+  set infinityQuery(v: Q) {
+    this._cleanup();
+
+    this._infinityQuery = v;
+    this._infinityQueryInstance = this._setupInfinityQuery(v);
+    this._infinityQueryInstance.nextPage();
+  }
+  private _infinityQuery!: Q;
+
+  get context() {
+    return this._viewContext;
+  }
+
+  get instance() {
+    return this._infinityQueryInstance;
+  }
+
+  get data$() {
+    return this._data$.asObservable();
+  }
+
+  data = toSignal(this._data$, { requireSync: true });
+
+  static ngTemplateContextGuard<
+    Q extends InfinityQueryConfig<AnyQueryCreator, BaseArguments | undefined, any, unknown[]>,
+  >(dir: InfinityQueryDirective<Q>, ctx: unknown): ctx is InfinityQueryContext<Q> {
+    return true;
+  }
+
+  constructor() {
+    this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
+  }
+
+  private _setupInfinityQuery(config: Q) {
+    const instance = new InfinityQuery(config, this._destroy$) as InfinityQueryOf<Q>;
+
+    combineLatest([
+      instance.currentQuery$.pipe(switchQueryState(), withLatestFrom(instance.currentQuery$)),
+      this._delayable.isDelayed$,
+      instance.data$,
+    ])
+      .pipe(
+        tap(([[state, currentQuery], isDelayed, infinityArray]) => {
+          this._viewContext.currentPage = instance.currentPage;
+          this._viewContext.totalPages = instance.totalPages;
+          this._viewContext.itemsPerPage = instance.itemsPerPage;
+          this._viewContext.canLoadMore =
+            (instance.totalPages !== null &&
+              instance.currentPage !== null &&
+              instance.totalPages > instance.currentPage) ||
+            false;
+          this._viewContext.currentCalculatedPage = instance.currentCalculatedPage;
+          this._viewContext.currentQuery = currentQuery;
+
+          if (isQueryStateLoading(state) || isDelayed || !infinityArray) {
+            this._viewContext.loading = state ? state.meta.triggeredVia !== 'poll' : true;
+            this._viewContext.error = null;
+            this._viewContext.isFirstLoad = this.context.etInfinityQuery === null;
+          } else if (isQueryStateFailure(state)) {
+            this._viewContext.loading = false;
+            this._viewContext.error = state.error;
+            this._viewContext.isFirstLoad = false;
+            this._errorHandler.handleError(state.error);
+          } else if (isQueryStateSuccess(state)) {
+            this._viewContext.loading = false;
+            this._viewContext.error = null;
+            this._viewContext.isFirstLoad = false;
+            this._viewContext.etInfinityQuery = this._viewContext.$implicit =
+              infinityArray as Q['response']['arrayType'];
+            this._data$.next(infinityArray);
+          }
+
+          this._cdr.markForCheck();
+        }),
+        takeUntil(this._destroy$),
+        takeUntil(this._queryConfigChanged$),
+      )
+      .subscribe();
+
+    return instance;
+  }
+
+  loadNextPage() {
+    if (!this._infinityQueryInstance) {
+      return;
+    }
+
+    if (this._viewContext.loading) {
+      return;
+    }
+
+    this._infinityQueryInstance.nextPage();
+  }
+
+  reset(newConfig?: Omit<Q, 'queryCreator' | 'response'>) {
+    if (!this._infinityQueryInstance) {
+      return;
+    }
+
+    this._infinityQueryInstance.reset(newConfig as any);
+  }
+
+  private _cleanup() {
+    this._queryConfigChanged$.next(true);
+
+    this._viewContext.loading = false;
+    this._viewContext.error = null;
+    this._viewContext.etInfinityQuery = null;
+    this._viewContext.$implicit = null;
+
+    this._viewContext.isFirstLoad = false;
+    this._viewContext.canLoadMore = false;
+    this._viewContext.currentPage = null;
+    this._viewContext.itemsPerPage = null;
+    this._viewContext.totalPages = null;
+
+    this._viewContext.currentQuery = null;
+
+    this._data$.next([]);
+  }
+}

package/src/lib/directives/query.directive.ts

@@ -0,0 +1,201 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  ErrorHandler,
+  Input,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+} from '@angular/core';
+import { Subscription, tap } from 'rxjs';
+import {
+  AnyQuery,
+  AnyQueryCollection,
+  QueryCollectionKeysOf,
+  QueryOf,
+  QueryState,
+  extractQuery,
+  isQueryCollection,
+  isQueryStateCancelled,
+  isQueryStateFailure,
+  isQueryStateLoading,
+  isQueryStatePrepared,
+  isQueryStateSuccess,
+} from '../query';
+import { QueryDataOf } from '../query-creator';
+import { RequestError, RequestProgress } from '../request';
+
+interface QueryContext<Q extends AnyQuery | AnyQueryCollection | null> {
+  /**
+   * The queries's response data.
+   */
+  $implicit: QueryDataOf<QueryOf<Q>> | null;
+
+  /**
+   * The queries's response data.
+   */
+  etQuery: QueryDataOf<QueryOf<Q>> | null;
+
+  /**
+   * The query used inside this directive. Useful if for instance the query gets unwrapped via async pipe inside the directive.
+   */
+  query: QueryOf<Q> | null;
+
+  /**
+   * Is true when the query is triggered by user interaction.
+   */
+  loading: boolean;
+
+  /**
+   * Is true when the query is triggered by either polling or auto refresh event.
+   */
+  refreshing: boolean;
+
+  /**
+   * The query's progress state.
+   */
+  progress: RequestProgress | null;
+
+  /**
+   * The query's error state.
+   */
+  error: RequestError<unknown> | null;
+
+  /**
+   * The query's scope (only available when the query is a collection)
+   */
+  scope: QueryCollectionKeysOf<Q> | null;
+}
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[etQuery]',
+  standalone: true,
+})
+export class QueryDirective<Q extends AnyQuery | AnyQueryCollection | null> implements OnInit, OnDestroy {
+  private _mainTemplateRef = inject<TemplateRef<QueryContext<Q>>>(TemplateRef);
+  private _viewContainerRef = inject(ViewContainerRef);
+  private _errorHandler = inject(ErrorHandler);
+  private _cdr = inject(ChangeDetectorRef);
+
+  private _isMainViewCreated = false;
+  private _subscription: Subscription | null = null;
+
+  private readonly _viewContext: QueryContext<Q> = {
+    $implicit: null,
+    etQuery: null,
+    loading: false,
+    refreshing: false,
+    error: null,
+    progress: null,
+    scope: null,
+    query: null,
+  };
+
+  @Input('etQuery')
+  get query(): Q {
+    return this._query;
+  }
+  set query(v: Q) {
+    this._query = v;
+
+    this._subscribeToQuery();
+  }
+  private _query!: Q;
+
+  @Input('etQueryCache')
+  get cache(): boolean {
+    return this._cache;
+  }
+  set cache(v: boolean) {
+    this._cache = v;
+  }
+  private _cache = false;
+
+  static ngTemplateContextGuard<Q extends AnyQuery | AnyQueryCollection | null>(
+    dir: QueryDirective<Q>,
+    ctx: unknown,
+  ): ctx is QueryContext<Q> {
+    return true;
+  }
+
+  ngOnInit(): void {
+    this._renderMainView();
+  }
+
+  ngOnDestroy(): void {
+    this._subscription?.unsubscribe();
+  }
+
+  private _subscribeToQuery(): void {
+    this._subscription?.unsubscribe();
+    this._subscription = null;
+
+    const query = extractQuery(this.query);
+
+    if (!query) {
+      this._viewContext.$implicit = null;
+      this._viewContext.etQuery = null;
+      this._viewContext.loading = false;
+      this._viewContext.refreshing = false;
+      this._viewContext.error = null;
+      this._viewContext.progress = null;
+      this._viewContext.scope = null;
+      this._viewContext.query = null;
+      return;
+    }
+
+    if (isQueryStatePrepared(query.rawState) || isQueryStateCancelled(query.rawState)) {
+      query.execute();
+    }
+
+    const sub = query.state$.pipe(tap((state) => this._updateView(state))).subscribe();
+
+    this._viewContext.scope = isQueryCollection(query) ? (query.type as QueryCollectionKeysOf<Q>) : null;
+    this._viewContext.query = query as QueryOf<Q>;
+
+    this._subscription = sub;
+  }
+
+  private _updateView(state: QueryState) {
+    if (isQueryStateLoading(state)) {
+      this._viewContext.progress = state.progress ?? null;
+      this._viewContext.refreshing = state.meta.triggeredVia === 'auto' || state.meta.triggeredVia === 'poll';
+
+      if (!this._viewContext.refreshing) {
+        this._viewContext.loading = true;
+      }
+    } else {
+      this._viewContext.loading = false;
+      this._viewContext.refreshing = false;
+      this._viewContext.progress = null;
+    }
+
+    if (isQueryStateSuccess(state)) {
+      this._viewContext.etQuery = state.response as QueryDataOf<QueryOf<Q>>;
+      this._viewContext.$implicit = state.response as QueryDataOf<QueryOf<Q>>;
+    } else if (!this.cache) {
+      this._viewContext.etQuery = null;
+      this._viewContext.$implicit = null;
+    }
+
+    if (isQueryStateFailure(state)) {
+      this._viewContext.error = state.error;
+
+      this._errorHandler.handleError(state.error);
+    } else {
+      this._viewContext.error = null;
+    }
+
+    this._cdr.markForCheck();
+  }
+
+  private _renderMainView(): void {
+    if (!this._isMainViewCreated) {
+      this._isMainViewCreated = true;
+      this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
+    }
+  }
+}

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

@@ -0,0 +1,180 @@
+import { Observable, Subject, debounceTime, filter, map, shareReplay, startWith } from 'rxjs';
+import { EntityKey, EntityStoreConfig } from './entity.types';
+
+class EntityStoreError extends Error {
+  constructor(
+    message: string,
+    public detail?: unknown,
+  ) {
+    super(message);
+    this.name = 'EntityStoreError';
+  }
+}
+
+function flatten<T>(arr: T[][]): T[] {
+  return arr.reduce((acc, val) => acc.concat(val), []);
+}
+
+export class EntityStore<T> {
+  /**
+   * @internal
+   */
+  readonly _dictionary = new Map<EntityKey, T>();
+
+  /**
+   * @internal
+   */
+  readonly _change$ = new Subject<EntityKey | EntityKey[]>();
+
+  constructor(private readonly _config: EntityStoreConfig) {}
+
+  select(key: EntityKey): Observable<T | null>;
+  select(keys: EntityKey[]): Observable<T[]>;
+  select(keys: EntityKey[][]): Observable<T[]>;
+  select(keyOrKeys: EntityKey | EntityKey[] | EntityKey[][]): Observable<T | null> | Observable<T[]> {
+    if (Array.isArray(keyOrKeys)) {
+      const _keys = this._normalizeKeys(keyOrKeys);
+      return this._selectMany(_keys as EntityKey[]);
+    }
+
+    return this._select(keyOrKeys);
+  }
+
+  /**
+   * **Note:** Prefer `select` over `selectWhere` when possible.
+   */
+  selectWhere(predicate: (value: T) => boolean): Observable<T[]> {
+    return this._change$.pipe(
+      startWith(null),
+      debounceTime(0),
+      map(() => Array.from(this._dictionary.values()).filter(predicate)),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );
+  }
+
+  set(key: EntityKey, value: T): void;
+  set(keys: EntityKey[], values: T[]): void;
+  set(keys: EntityKey[][], values: T[][]): void;
+  set(keyOrKeys: EntityKey | EntityKey[] | EntityKey[][], valueOrValues: T | T[] | T[][]) {
+    const _keys = this._normalizeKeys(keyOrKeys);
+
+    if (Array.isArray(_keys)) {
+      if (!Array.isArray(valueOrValues)) {
+        throw new EntityStoreError('When setting multiple keys, values must be an array', {
+          keyOrValues: _keys,
+          valueOrValues,
+        });
+      }
+
+      const _values = (Array.isArray(valueOrValues[0]) ? flatten(valueOrValues as T[][]) : valueOrValues) as T[];
+
+      for (let i = 0; i < _keys.length; i++) {
+        const k = _keys[i];
+        const v = _values[i];
+
+        if (k === undefined || v === undefined) continue;
+
+        this._set(k, v);
+      }
+    } else {
+      this._set(_keys, valueOrValues as T);
+    }
+
+    this._change$.next(_keys);
+  }
+
+  remove(key: EntityKey): void;
+  remove(keys: EntityKey[]): void;
+  remove(keys: EntityKey[][]): void;
+  remove(keyOrKeys: EntityKey | EntityKey[] | EntityKey[][]) {
+    const _keys = this._normalizeKeys(keyOrKeys);
+
+    if (Array.isArray(_keys)) {
+      for (const key of _keys) {
+        this._remove(key);
+      }
+    } else {
+      this._remove(_keys);
+    }
+
+    this._change$.next(_keys);
+  }
+
+  logState() {
+    console.log('EntityStore:', this._config.name, {
+      dictionary: this._dictionary,
+    });
+  }
+
+  private _select(key: EntityKey): Observable<T | null> {
+    if (this._config.logActions) {
+      console.log('EntityStore: select', this._config.name, key);
+    }
+
+    return this._change$.pipe(
+      startWith(null),
+      filter((v) => {
+        if (v === null) {
+          return true;
+        }
+
+        if (Array.isArray(v)) {
+          return v.includes(key);
+        }
+
+        return v === key;
+      }),
+      map(() => this._dictionary.get(key) ?? null),
+    );
+  }
+
+  private _selectMany(keys: EntityKey[]): Observable<T[]> {
+    if (this._config.logActions) {
+      console.log('EntityStore: selectMany', this._config.name, keys);
+    }
+
+    return this._change$.pipe(
+      startWith(null),
+      filter((v) => {
+        if (v === null) {
+          return true;
+        }
+
+        if (Array.isArray(v)) {
+          return keys.some((key) => v.includes(key));
+        }
+
+        return keys.includes(v);
+      }),
+      map(() => keys.map((key) => this._dictionary.get(key)).filter((value): value is T => value !== undefined)),
+    );
+  }
+
+  private _set(key: EntityKey, value: T) {
+    if (this._config.logActions) {
+      console.log('EntityStore: set', this._config.name, key, value);
+    }
+
+    this._dictionary.set(key, value);
+  }
+
+  private _remove(key: EntityKey) {
+    if (this._config.logActions) {
+      console.log('EntityStore: remove', this._config.name, key);
+    }
+
+    this._dictionary.delete(key);
+  }
+
+  private _normalizeKeys(keys: EntityKey | EntityKey[] | EntityKey[][]): EntityKey | EntityKey[] {
+    if (Array.isArray(keys)) {
+      if (Array.isArray(keys[0])) {
+        return flatten(keys as EntityKey[][]);
+      }
+
+      return keys as EntityKey[];
+    }
+
+    return keys;
+  }
+}

package/src/lib/entity/entity.types.ts

@@ -0,0 +1,34 @@
+export type EntityKey = string | number;
+
+export interface EntityStoreConfig {
+  name: string;
+  logActions?: boolean;
+}
+
+export interface InsertFromConfig<
+  OriginStoreType,
+  OriginKeys extends keyof NonNullable<OriginStoreType>,
+  IdFn extends (value: NonNullable<OriginStoreType>) => EntityKey | EntityKey[],
+> {
+  /**
+   * The property key of which the value should be replaced.
+   */
+  for: OriginKeys;
+
+  /**
+   * A function that returns the id of the entity. Can also return an array of ids.
+   */
+  id: IdFn;
+}
+
+export interface RemoveFromConfig<T> {
+  /**
+   * The where function to select the entities to remove.
+   */
+  where: (entity: T) => boolean;
+
+  /**
+   * A function that returns the id of the entity.
+   */
+  id: (entity: T) => EntityKey;
+}

package/src/lib/entity/entity.utils.ts

@@ -0,0 +1,51 @@
+import { Paginated } from '@ethlete/types';
+import { map, of, switchMap, take, tap } from 'rxjs';
+import { EntityStore } from './entity-store';
+import { EntityKey, InsertFromConfig, RemoveFromConfig } from './entity.types';
+
+export function mapToPaginated<T>(response: Paginated<T>) {
+  return map((items) => ({ ...response, items }) as Paginated<T>);
+}
+
+// FIXME: This breaks if SubStoreType is an array
+/**
+ * Use an other store to represent a property of the current entity.
+ */
+export const insertFrom = <
+  OriginStoreType,
+  OriginKeys extends keyof NonNullable<OriginStoreType>,
+  SubStoreType extends NonNullable<OriginStoreType>[OriginKeys] extends Array<infer U>
+    ? U
+    : NonNullable<OriginStoreType>[OriginKeys],
+  IdFn extends (value: NonNullable<OriginStoreType>) => EntityKey | EntityKey[],
+  ComputedEntityType extends ReturnType<IdFn> extends Array<unknown>
+    ? OriginStoreType
+    : Omit<OriginStoreType, OriginKeys> & { [K in OriginKeys]: SubStoreType | null },
+>(
+  store: EntityStore<SubStoreType>,
+  { for: key, id }: InsertFromConfig<OriginStoreType, OriginKeys, IdFn>,
+) =>
+  switchMap((value: OriginStoreType) => {
+    if (!value) return of(null);
+
+    const ids = id(value);
+
+    if (Array.isArray(ids)) {
+      return store.select(ids).pipe(map((data) => ({ ...value, [key]: data }) as ComputedEntityType));
+    } else {
+      return store.select(ids).pipe(map((data) => ({ ...value, [key]: data }) as ComputedEntityType));
+    }
+  });
+
+/**
+ * Remove entities from a store based on a where function.
+ */
+export const removeFrom = <T>(store: EntityStore<T>, { where, id }: RemoveFromConfig<T>) => {
+  store
+    .selectWhere(where)
+    .pipe(
+      tap((entities) => store.remove(entities.map(id))),
+      take(1),
+    )
+    .subscribe();
+};

package/src/lib/gql/gql.ts

@@ -0,0 +1,22 @@
+const getOpName = /(query|mutation) ?([\w\d-_]+)? ?\(.*?\)? \{/;
+
+export const transformGql = (str: string) => {
+  str = Array.isArray(str) ? str.join('') : str;
+  const name = getOpName.exec(str);
+  return function (variables: Record<string, unknown> | null | undefined) {
+    const data: Record<string, unknown> = { query: str };
+    if (variables) data['variables'] = JSON.stringify(variables);
+    if (name && name.length) {
+      const operationName = name[2];
+      if (operationName) data['operationName'] = name[2];
+    }
+    return data as { query: string; variables?: string; operationName?: string };
+  };
+};
+
+export const gql = (strings: TemplateStringsArray, ...values: string[]) => {
+  const str = strings.reduce((acc, cur, i) => {
+    return acc + cur + (values[i] || '');
+  }, '');
+  return str;
+};