@ethlete/query 5.16.0 → 5.16.2

package/src/lib/auth/bearer-auth-provider.ts

@@ -1,243 +0,0 @@
-import { deleteCookie, getCookie, setCookie } from '@ethlete/core';
-import { BehaviorSubject, Subject, takeUntil, tap, timer } from 'rxjs';
-import {
-  isQueryStateFailure,
-  isQueryStateLoading,
-  isQueryStateSuccess,
-  switchQueryState,
-  takeUntilResponse,
-} from '../query';
-import { AnyQueryCreator, ConstructQuery, QueryResponseOf } from '../query-creator';
-import {
-  AuthBearerRefreshStrategy,
-  AuthProvider,
-  AuthProviderBearerConfig,
-  TokenResponse,
-} from './auth-provider.types';
-import { decryptBearer } from './auth-provider.utils';
-
-export class BearerAuthProvider<T extends AnyQueryCreator> implements AuthProvider {
-  private readonly _destroy$ = new Subject<boolean>();
-  private readonly _currentRefreshQuery$ = new BehaviorSubject<ConstructQuery<T> | null>(null);
-
-  private readonly _tokens$ = new BehaviorSubject<TokenResponse>({
-    token: null,
-    refreshToken: null,
-  });
-
-  get header() {
-    return { Authorization: `Bearer ${this._tokens$.getValue().token}` };
-  }
-
-  get tokens$() {
-    return this._tokens$.asObservable();
-  }
-
-  get tokens() {
-    return this._tokens$.getValue();
-  }
-
-  get currentRefreshQuery$() {
-    return this._currentRefreshQuery$.asObservable();
-  }
-
-  get currentRefreshQuery() {
-    return this._currentRefreshQuery$.getValue();
-  }
-
-  get shouldRefreshOnUnauthorizedResponse() {
-    return (
-      !!this._config.refreshConfig &&
-      (this._config.refreshConfig.refreshOnUnauthorizedResponse === undefined ||
-        this._config.refreshConfig.refreshOnUnauthorizedResponse)
-    );
-  }
-
-  constructor(public _config: AuthProviderBearerConfig<T>) {
-    const cookieEnabled = _config.refreshConfig?.cookieEnabled ?? true;
-    const cookieToken =
-      _config.refreshConfig?.cookieName && cookieEnabled ? getCookie(_config.refreshConfig.cookieName) ?? null : null;
-
-    this._tokens$.next({
-      token: _config.token || null,
-      refreshToken: _config.refreshConfig?.token || cookieToken || null,
-    });
-
-    if (!this.tokens.token && !this.tokens.refreshToken) {
-      if (!_config.refreshConfig?.cookieName) {
-        console.error(
-          'A BearerAuthProvider was created without token or refresh token. You should provide at least a cookieName where the refresh token might be stored.',
-        );
-      }
-
-      return;
-    }
-
-    if (this.tokens.token) {
-      this._prepareForRefresh();
-
-      if (this.tokens.refreshToken && this._config.refreshConfig?.cookieName && cookieEnabled) {
-        this._setCookie();
-      }
-    } else if (this.tokens.refreshToken) {
-      this._refreshQuery();
-    }
-  }
-
-  cleanUp(): void {
-    this._destroy$.next(true);
-    this._destroy$.unsubscribe();
-    this._currentRefreshQuery$.next(null);
-
-    if (this._config.refreshConfig?.cookieName) {
-      this._deleteCookie();
-    }
-  }
-
-  enableCookie() {
-    if (!this._config.refreshConfig?.cookieName) {
-      throw new Error('No cookie name was provided');
-    }
-
-    if (!this.tokens.refreshToken) {
-      throw new Error('No refresh token was provided');
-    }
-
-    this._config.refreshConfig.cookieEnabled = true;
-
-    this._setCookie();
-  }
-
-  disableCookie() {
-    if (!this._config.refreshConfig?.cookieName) {
-      throw new Error('No cookie name was provided');
-    }
-
-    this._config.refreshConfig.cookieEnabled = false;
-
-    this._deleteCookie();
-  }
-
-  private _setCookie() {
-    if (!this._config.refreshConfig?.cookieName || !this.tokens.refreshToken) return;
-
-    setCookie(
-      this._config.refreshConfig.cookieName,
-      this.tokens.refreshToken,
-      this._config.refreshConfig.cookieExpiresInDays,
-      this._config.refreshConfig.cookieDomain,
-      this._config.refreshConfig.cookiePath,
-      this._config.refreshConfig.cookieSameSite,
-    );
-  }
-
-  private _deleteCookie() {
-    if (!this._config.refreshConfig?.cookieName) return;
-
-    deleteCookie(
-      this._config.refreshConfig.cookieName,
-      this._config.refreshConfig.cookiePath,
-      this._config.refreshConfig.cookieDomain,
-    );
-  }
-
-  private _prepareForRefresh() {
-    if (!this.tokens.token || !this._config.refreshConfig) {
-      return;
-    }
-
-    const bearer = decryptBearer(this.tokens.token);
-
-    if (!bearer) {
-      return;
-    }
-
-    const expiresInPropertyName = this._config.refreshConfig.expiresInPropertyName || 'exp';
-    const expiresIn = bearer[expiresInPropertyName] as number | undefined;
-    const fiveMinutes = 5 * 60 * 1000;
-    const refreshBuffer = this._config.refreshConfig.refreshBuffer ?? fiveMinutes;
-
-    if (expiresIn === undefined) {
-      throw new Error(`Bearer token does not contain an '${expiresInPropertyName}' property`);
-    }
-
-    const remainingTime = new Date(expiresIn * 1000).getTime() - refreshBuffer - new Date().getTime();
-
-    const strategy = this._config.refreshConfig.strategy ?? AuthBearerRefreshStrategy.BeforeExpiration;
-
-    switch (strategy) {
-      case AuthBearerRefreshStrategy.BeforeExpiration:
-        timer(remainingTime)
-          .pipe(takeUntil(this._destroy$))
-          .subscribe(() => this._refreshQuery());
-        break;
-    }
-  }
-
-  /**
-   * @internal
-   */
-  _refreshQuery() {
-    const currentQuery = this._currentRefreshQuery$.getValue();
-
-    if (isQueryStateLoading(currentQuery?.rawState)) {
-      return currentQuery;
-    }
-
-    const currentRefreshToken = this.tokens.refreshToken;
-
-    if (!currentRefreshToken || !this._config.refreshConfig) {
-      return;
-    }
-
-    const args = this._config.refreshConfig.requestArgsAdapter?.({
-      token: this.tokens.token,
-      refreshToken: currentRefreshToken,
-    }) ?? {
-      body: { refreshToken: currentRefreshToken },
-    };
-
-    const query = this._config.refreshConfig.queryCreator.prepare(args).execute({ skipCache: true });
-
-    this._currentRefreshQuery$.next(query as ConstructQuery<T>);
-
-    this._currentRefreshQuery$
-      .pipe(
-        switchQueryState(),
-        tap((state) => {
-          if (isQueryStateSuccess(state)) {
-            if (this._config.refreshConfig?.responseAdapter) {
-              const tokens = this._config.refreshConfig.responseAdapter(state.response as QueryResponseOf<T>);
-
-              this._tokens$.next(tokens);
-            } else {
-              this._tokens$.next({
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                token: (state.response as any)['token'],
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                refreshToken: (state.response as any)['refreshToken'],
-              });
-            }
-            const cookieEnabled = this._config.refreshConfig?.cookieEnabled ?? true;
-
-            if (this._config.refreshConfig?.cookieName && this.tokens.refreshToken && cookieEnabled) {
-              this._setCookie();
-            }
-
-            this._prepareForRefresh();
-          } else if (isQueryStateFailure(state)) {
-            this._tokens$.next({ token: null, refreshToken: null });
-
-            if (this._config.refreshConfig?.cookieName) {
-              this._deleteCookie();
-            }
-          }
-        }),
-        takeUntilResponse(),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-
-    return query;
-  }
-}

package/src/lib/auth/custom-header-auth-provider.ts

@@ -1,13 +0,0 @@
-import { AuthProvider, AuthProviderCustomHeaderConfig } from './auth-provider.types';
-
-export class CustomHeaderAuthProvider implements AuthProvider {
-  get header() {
-    return { [this._config.name]: this._config.value };
-  }
-
-  constructor(public _config: AuthProviderCustomHeaderConfig) {}
-
-  cleanUp(): void {
-    // noop
-  }
-}

package/src/lib/class-validator/class-validator.utils.ts

@@ -1,5 +0,0 @@
-import { ClassValidatorError } from './class-validator.types';
-
-export const isClassValidatorError = (error: unknown): error is ClassValidatorError => {
-  return typeof error === 'object' && error !== null && 'statusCode' in error && 'message' in error && 'error' in error;
-};

package/src/lib/devtools/components/query-devtools/query-devtools.component.html

@@ -1,402 +0,0 @@
-@if (!isOpen()) {
-  <button (click)="toggleOpen()" class="et-query-devtools-open-btn et-qd-chip">Query Devtools</button>
-}
-
-@if (isOpen()) {
-  <div
-    [class.et-query-devtools-container--transparent]="isTranslucent()"
-    class="et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}"
-  >
-    <header class="et-qd-header">
-      <h3 class="et-qd-header__title">Query Devtools</h3>
-
-      <div class="et-qd-header__select">
-        <label for="et-query-client-instance">Client instance</label>
-        <select [formControl]="selectedClientIdCtrl" id="et-query-client-instance">
-          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {
-            <option [value]="i">
-              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}
-            </option>
-          }
-        </select>
-      </div>
-
-      <button (click)="toggleOpen()" class="et-qd-btn et-qd-btn-secondary">Close</button>
-    </header>
-
-    <div class="et-qd-sub-header">
-      <button
-        [ngClass]="{ 'et-qd-chip-secondary': !isTranslucent() }"
-        (click)="toggleTranslucent()"
-        class="et-qd-chip et-qd-translucent-clickable"
-      >
-        Translucent
-      </button>
-      <div class="et-qd-sub-header__divider"></div>
-      <button
-        [ngClass]="{ 'et-qd-chip-secondary': snapLayout() !== 'full' }"
-        (click)="selectSnapLayout('full')"
-        class="et-qd-chip"
-      >
-        Fullscreen
-      </button>
-      <button
-        [ngClass]="{ 'et-qd-chip-secondary': snapLayout() !== 'top' }"
-        (click)="selectSnapLayout('top')"
-        class="et-qd-chip"
-      >
-        Top
-      </button>
-      <button
-        [ngClass]="{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }"
-        (click)="selectSnapLayout('bottom')"
-        class="et-qd-chip"
-      >
-        Bottom
-      </button>
-      <button
-        [ngClass]="{ 'et-qd-chip-secondary': snapLayout() !== 'left' }"
-        (click)="selectSnapLayout('left')"
-        class="et-qd-chip"
-      >
-        Left
-      </button>
-      <button
-        [ngClass]="{ 'et-qd-chip-secondary': snapLayout() !== 'right' }"
-        (click)="selectSnapLayout('right')"
-        class="et-qd-chip"
-      >
-        Right
-      </button>
-    </div>
-
-    @if (selectedClientConfig(); as cfg) {
-      <div class="et-qd-client">
-        <p class="et-qd-client__title">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>
-
-        <div class="et-qd-client__actions">
-          <button (click)="cfg.client._store.refreshQueriesInUse()" class="et-qd-chip">Refresh all</button>
-          <button (click)="cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })" class="et-qd-chip">
-            Refresh all (ignore caches)
-          </button>
-          <button
-            (click)="cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })"
-            class="et-qd-chip"
-          >
-            Refresh all (ignore caches & purge unused)
-          </button>
-        </div>
-      </div>
-    }
-
-    @if (selectedClientConfig(); as cfg) {
-      <div class="et-qd-queries">
-        <p class="et-qd-queries__title">Inspector</p>
-        <div class="et-qd-queries__actions">
-          <button
-            [ngClass]="{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }"
-            (click)="selectQueryListMode('live'); selectViewMode('query')"
-            class="et-qd-chip et-qd-chip-bordered"
-          >
-            Live Queries ({{ queries()?.length ?? 0 }})
-          </button>
-          <button
-            [ngClass]="{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }"
-            (click)="selectQueryListMode('history'); selectViewMode('query')"
-            class="et-qd-chip et-qd-chip-bordered"
-          >
-            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)
-          </button>
-          @if (queryListMode() === 'history' && viewMode() === 'query') {
-            <div class="et-qd-queries__divider"></div>
-            <button (click)="clearQueryHistory()" class="et-qd-chip et-qd-chip-bordered">Clear history</button>
-          }
-
-          <div class="et-qd-queries__divider"></div>
-          <button
-            [ngClass]="{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }"
-            (click)="selectViewMode('authProvider')"
-            class="et-qd-chip et-qd-chip-bordered"
-          >
-            Auth Provider
-          </button>
-        </div>
-
-        @if (viewMode() === 'query') {
-          <div class="et-qd-queries__browser">
-            @if (queryListMode() === 'live') {
-              <ul class="et-qd-queries__browser-list">
-                @for (query of queries(); track trackByQuery($index, query)) {
-                  <li>
-                    <button
-                      [class.et-qd-query--active]="selectedQuery()?._id === query._id"
-                      (click)="selectQuery(query)"
-                    >
-                      <span> {{ query._queryConfig.method }}</span>
-                      <span> {{ query | queryShortName }}</span>
-                    </button>
-                  </li>
-                }
-              </ul>
-            }
-            @if (queryListMode() === 'history') {
-              <ul class="et-qd-queries__browser-list">
-                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {
-                  <li>
-                    <button
-                      [class.et-qd-query--active]="selectedQuery()?._id === query._id"
-                      (click)="selectQuery(query)"
-                    >
-                      <span> {{ query._queryConfig.method }}</span>
-                      <span> {{ query | queryShortName }}</span>
-                    </button>
-                  </li>
-                }
-              </ul>
-            }
-            <div class="et-qd-queries__browser-detail">
-              @if (selectedQuery(); as query) {
-                <p class="et-qd-queries__browser-detail__title">
-                  {{ query._queryConfig.method }} {{ query._routeWithParams }}
-                </p>
-
-                <div class="et-qd-queries__actions">
-                  <button (click)="query.execute()" class="et-qd-chip et-qd-chip-bordered">Execute</button>
-                  <button (click)="query.execute({ skipCache: true })" class="et-qd-chip et-qd-chip-bordered">
-                    Execute (ignore cache)
-                  </button>
-
-                  <button (click)="query.abort()" class="et-qd-chip et-qd-chip-bordered">Abort</button>
-                  <div class="et-qd-queries__divider"></div>
-                  <button
-                    [ngClass]="{ 'et-qd-chip-secondary': !query.isPolling }"
-                    (click)="query.poll({ interval: 5000, takeUntil: _destroy$ })"
-                    class="et-qd-chip et-qd-chip-bordered"
-                  >
-                    Poll
-                  </button>
-
-                  <button
-                    [ngClass]="{ 'et-qd-chip-secondary': query.isPolling }"
-                    (click)="query.stopPolling()"
-                    class="et-qd-chip et-qd-chip-bordered"
-                  >
-                    Stop polling
-                  </button>
-                  @if (query.isPolling || query._isPollingPaused) {
-                    <button (click)="query.pausePolling()" class="et-qd-chip et-qd-chip-secondary et-qd-chip-bordered">
-                      Pause polling
-                    </button>
-                    <button (click)="query.resumePolling()" class="et-qd-chip et-qd-chip-secondary et-qd-chip-bordered">
-                      Resume polling
-                    </button>
-                  }
-                </div>
-
-                <div class="et-qd-list">
-                  <div class="et-qd-list-item">
-                    <p>State type</p>
-                    <pre>{{ query.rawState.type }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Dependents</p>
-                    <pre>{{ query._dependents | json }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Is expired</p>
-                    <pre>{{ query.isExpired }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Is in use</p>
-                    <pre>{{ query.isInUse }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Subscriber count</p>
-                    <pre>{{ query._subscriberCount }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Is polling</p>
-                    <pre>{{ query.isPolling }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Is polling paused</p>
-                    <pre>{{ query._isPollingPaused }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Enable smart polling</p>
-                    <pre>{{ query._enableSmartPolling }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Query store key</p>
-                    <pre>{{ query._queryStoreKey }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Arguments</p>
-
-                    <div>
-                      <button
-                        [ngClass]="{ 'et-qd-chip-secondary': !showArguments() }"
-                        (click)="toggleShowArguments()"
-                        class="et-qd-chip et-qd-chip-bordered"
-                      >
-                        Toggle
-                      </button>
-                    </div>
-                    @if (showArguments()) {
-                      <pre>{{ query._arguments | json }}</pre>
-                    }
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>State</p>
-                    <p><i> Warning, this will cause a subscription if shown!</i></p>
-                    <div>
-                      <button
-                        [ngClass]="{ 'et-qd-chip-secondary': !showResponse() }"
-                        (click)="toggleShowResponse()"
-                        class="et-qd-chip et-qd-chip-bordered"
-                      >
-                        Toggle
-                      </button>
-                    </div>
-                    @if (showResponse()) {
-                      <pre>{{ query.state$ | async | json }}</pre>
-                    }
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Raw state</p>
-                    <p><i> The query state unaffected by entity stores</i></p>
-
-                    <div>
-                      <button
-                        [ngClass]="{ 'et-qd-chip-secondary': !showRawResponse() }"
-                        (click)="toggleShowRawResponse()"
-                        class="et-qd-chip et-qd-chip-bordered"
-                      >
-                        Toggle
-                      </button>
-                    </div>
-                    @if (showRawResponse()) {
-                      <pre>{{ query.rawState | json }}</pre>
-                    }
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Query config</p>
-
-                    <div>
-                      <button
-                        [ngClass]="{ 'et-qd-chip-secondary': !showQueryConfig() }"
-                        (click)="toggleShowQueryConfig()"
-                        class="et-qd-chip et-qd-chip-bordered"
-                      >
-                        Toggle
-                      </button>
-                    </div>
-                    @if (showQueryConfig()) {
-                      <pre>{{ stringifiedQueryConfig() | json }}</pre>
-                    }
-                  </div>
-
-                  @if (!!query._queryConfig.entity) {
-                    <div class="et-qd-list-item">
-                      <p>Entity store value</p>
-
-                      <div>
-                        <button
-                          [ngClass]="{ 'et-qd-chip-secondary': !showEntityStoreValue() }"
-                          (click)="toggleShowEntityStoreValue()"
-                          class="et-qd-chip et-qd-chip-bordered"
-                        >
-                          Toggle
-                        </button>
-                      </div>
-                      @if (showEntityStoreValue()) {
-                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          </div>
-        } @else if (viewMode() === 'authProvider') {
-          <div class="et-qd-auth-provider__viewer">
-            @if (authProviderDetails(); as details) {
-              <div class="et-qd-list">
-                <div class="et-qd-list-item">
-                  <p>Type</p>
-                  <pre>{{ details.type }}</pre>
-                </div>
-                <div class="et-qd-list-item">
-                  <p>Header value</p>
-                  <pre>{{ details.header() | json }}</pre>
-                </div>
-                <div class="et-qd-list-item">
-                  <p>Config</p>
-                  <pre>{{ details.config | json }}</pre>
-                </div>
-
-                @if (details.type === 'BearerAuthProvider') {
-                  <div class="et-qd-list-item">
-                    <p>Tokens</p>
-                    <pre>{{ details.provider.tokens$ | async | json }}</pre>
-                  </div>
-
-                  <div class="et-qd-list-item">
-                    <p>Should refresh on unauthorized response</p>
-                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>
-                  </div>
-
-                  <ng-container
-                    *etQuery="
-                      details.provider.currentRefreshQuery$ | async as response;
-                      loading as loading;
-                      error as error;
-                      query as query
-                    "
-                  >
-                    <div class="et-qd-list-item">
-                      <p>Refresh query response</p>
-
-                      <div>
-                        <button (click)="details.provider._refreshQuery()" class="et-qd-chip et-qd-chip-bordered">
-                          Refresh
-                        </button>
-                      </div>
-                      <pre>{{ response | json }}</pre>
-                    </div>
-                    <div class="et-qd-list-item">
-                      <p>Refresh query loading</p>
-                      <pre>{{ loading }}</pre>
-                    </div>
-                    <div class="et-qd-list-item">
-                      <p>Refresh query error</p>
-                      <pre>{{ error ?? 'null' }}</pre>
-                    </div>
-                    <div class="et-qd-list-item">
-                      <p>State</p>
-                      <pre>{{ query?.state$ | async | json }}</pre>
-                    </div>
-                  </ng-container>
-                }
-              </div>
-            } @else {
-              <p>No auth provider set</p>
-            }
-          </div>
-        }
-      </div>
-    }
-  </div>
-}