@ethlete/query 4.6.1 → 4.7.0

package/fesm2022/ethlete-query.mjs

@@ -1,8 +1,10 @@
 import * as i1 from '@ethlete/core';
 import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, createDestroy, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, shareReplay, Subject, takeUntil, interval, skip, map, timer, combineLatest, withLatestFrom, fromEvent, startWith, debounceTime, take, concat } from 'rxjs';
+import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, shareReplay, Subject, takeUntil, interval, skip, map, timer, startWith, combineLatest, withLatestFrom, fromEvent, debounceTime, take, concat } from 'rxjs';
 import * as i0 from '@angular/core';
-import { isDevMode, inject, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { isDevMode, InjectionToken, inject, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -745,7 +747,13 @@ class Query {
         return ++this._currentId;
     }
     get state$() {
-        return this._state$.pipe(switchMap((s) => this._transformState(s)), shareReplay({ bufferSize: 1, refCount: true }));
+        return this._state$.pipe(tap((s) => {
+            if (!this._client.config.logging?.preparedQuerySubscriptions)
+                return;
+            if (isQueryStatePrepared(s)) {
+                console.warn(`Query ${this._routeWithParams} was subscribed to in the prepared state. Did you forget to call .execute()?`);
+            }
+        }), switchMap((s) => this._transformState(s)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     /**
      * The current state of the query.
@@ -769,6 +777,9 @@ class Query {
     get isInUse() {
         return this._state$.subscriberCount > 0;
     }
+    get _subscriberCount() {
+        return this._state$.subscriberCount;
+    }
     get isPolling() {
         return !!this._pollingSubscription;
     }
@@ -795,7 +806,11 @@ class Query {
     get store() {
         return this._queryConfig.entity?.store ?? null;
     }
-    constructor(_client, _queryConfig, _routeWithParams, _args) {
+    constructor(_client, _queryConfig, 
+    /**
+     * @internal
+     */
+    _routeWithParams, _args) {
         this._client = _client;
         this._queryConfig = _queryConfig;
         this._routeWithParams = _routeWithParams;
@@ -1159,6 +1174,83 @@ const isClassValidatorError = (error) => {
     return typeof error === 'object' && error !== null && 'statusCode' in error && 'message' in error && 'error' in error;
 };
 
+const QUERY_CLIENT_DEVTOOLS_TOKEN = new InjectionToken('QUERY_CLIENT_DEVTOOLS_TOKEN');
+const provideQueryClientForDevtools = (queryClient) => {
+    if (!isDevMode()) {
+        console.warn('You are using the Query Devtools in production mode. This increases the size of your bundle and should only be used for development purposes.');
+    }
+    return {
+        provide: QUERY_CLIENT_DEVTOOLS_TOKEN,
+        useValue: queryClient,
+        multi: true,
+    };
+};
+
+class QueryDevtoolsComponent {
+    constructor() {
+        this._destroy$ = createDestroy();
+        this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
+        this.isOpen = signal(false);
+        this.showResponse = signal(false);
+        this.showRawResponse = signal(false);
+        this.selectedClientId = signal(0);
+        this.selectedQueryPath = signal(null);
+        this.selectedClientConfig = computed(() => {
+            if (this.queryClientConfigs.length === 1) {
+                return this.queryClientConfigs[0];
+            }
+            const index = this.selectedClientId();
+            return this.queryClientConfigs[index];
+        });
+        this.queryStore = computed(() => {
+            const config = this.selectedClientConfig();
+            return config.client._store;
+        });
+        this._queries$ = new BehaviorSubject([]);
+        this.queries = toSignal(this._queries$);
+        this.selectedQuery = computed(() => {
+            const path = this.selectedQueryPath();
+            if (!path) {
+                return null;
+            }
+            return this.queries()?.find((q) => q._routeWithParams === path) ?? null;
+        });
+        this.trackByClient = (_, { client }) => client.config.baseRoute;
+        this.trackByQuery = (_, { _routeWithParams }) => _routeWithParams;
+        const change$ = new Subject();
+        effect(() => {
+            change$.next(true);
+            const store = this.queryStore();
+            store.storeChange$
+                .pipe(startWith(''), map(() => store._store), tap((s) => this._queries$.next(Array.from(s.values()))), takeUntil(change$), takeUntil(this._destroy$))
+                .subscribe();
+        }, { allowSignalWrites: true });
+    }
+    toggleOpen() {
+        this.isOpen.set(!this.isOpen());
+    }
+    toggleShowResponse() {
+        this.showResponse.set(!this.showResponse());
+    }
+    toggleShowRawResponse() {
+        this.showRawResponse.set(!this.showRawResponse());
+    }
+    selectClient(clientId) {
+        this.selectedClientId.set(clientId);
+    }
+    selectQuery(query) {
+        this.selectedQueryPath.set(query._routeWithParams);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div *ngIf=\"isOpen()\" class=\"et-query-devtools-container\">\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <ul>\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ (query.state$ | async)?.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
+                        class: 'et-query-devtools',
+                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe], hostDirectives: [], template: "<button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div *ngIf=\"isOpen()\" class=\"et-query-devtools-container\">\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <ul>\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ (query.state$ | async)?.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
 class QueryDirective {
     constructor() {
         this._mainTemplateRef = inject(TemplateRef);
@@ -1832,16 +1924,22 @@ class QueryCreator {
 class QueryStore {
     constructor(_config) {
         this._config = _config;
+        /**
+         * @internal
+         */
         this._store = new Map();
         this._garbageCollector = null;
         this._isInLowResourceMode = false;
         this._lastBlurTimestamp = Date.now();
+        this._storeChange$ = new Subject();
+        this.storeChange$ = this._storeChange$.asObservable();
         this._initSmartQueryHandling();
     }
     add(id, query) {
         this._store.set(id, query);
         this._initGarbageCollector();
         this._logState(id, query, 'SET');
+        this._storeChange$.next(id);
     }
     get(id) {
         return this._store.get(id) ?? null;
@@ -1850,6 +1948,7 @@ class QueryStore {
         this.get(id)?._destroy();
         this._store.delete(id);
         this._logState(id, null, 'REMOVE');
+        this._storeChange$.next(id);
     }
     forEach(callback) {
         for (const [key, query] of this._store) {
@@ -2406,5 +2505,5 @@ const def = () => null;
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryCreator, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map