@ethlete/query 2.0.0 → 2.1.0

package/fesm2020/ethlete-query.mjs

@@ -1,5 +1,5 @@
 import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, DestroyService, equal, clone } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, tap, timer, fromEvent, startWith, concat, take, debounceTime, combineLatest, map, distinctUntilChanged } from 'rxjs';
+import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, startWith, tap, timer, fromEvent, concat, take, debounceTime, combineLatest, map, distinctUntilChanged } from 'rxjs';
 import * as i0 from '@angular/core';
 import { Directive, Input, InjectionToken, inject, ChangeDetectorRef, ViewContainerRef, TemplateRef, ErrorHandler, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
@@ -548,8 +548,22 @@ class Query {
     get isInUse() {
         return this._state$.subscriberCount > 0;
     }
-    get _config() {
-        return this._queryConfig;
+    get isPolling() {
+        return !!this._pollingSubscription;
+    }
+    get autoRefreshOnConfig() {
+        const base = this._queryConfig.autoRefreshOn ?? {};
+        const transformed = {
+            queryClientDefaultHeadersChange: base.queryClientDefaultHeadersChange ?? true,
+            windowFocus: base.windowFocus ?? true,
+        };
+        return transformed;
+    }
+    /**
+     * @internal
+     */
+    get _enableSmartPolling() {
+        return this._queryConfig.enableSmartPolling ?? true;
     }
     constructor(_client, _queryConfig, _routeWithParams, _args) {
         this._client = _client;
@@ -559,15 +573,21 @@ class Query {
         this._currentId = 0;
         this._pollingSubscription = null;
         this._onAbort$ = new Subject();
+        this._currentPollConfig = null;
+        /**
+         * @internal
+         */
+        this._isPollingPaused = false;
         this._state$ = new BehaviorSubjectWithSubscriberCount({
             type: "PREPARED" /* QueryStateType.Prepared */,
-            meta: { id: this._currentId },
+            meta: { id: this._currentId, triggeredVia: 'program' },
         });
     }
     clone() {
         return this._client.fetch(this._queryConfig);
     }
     execute(options) {
+        const triggeredVia = options?._triggeredVia ?? 'program';
         if (!this.isExpired && !options?.skipCache && isQueryStateSuccess(this.state)) {
             return this;
         }
@@ -578,7 +598,7 @@ class Query {
         if (isQueryStateLoading(this._state$.value)) {
             this.abort();
         }
-        const meta = { id };
+        const meta = { id, triggeredVia };
         this._state$.next({
             type: "LOADING" /* QueryStateType.Loading */,
             meta,
@@ -688,16 +708,34 @@ class Query {
         if (this._pollingSubscription) {
             return this;
         }
-        this._pollingSubscription = interval(config.interval)
+        this._currentPollConfig = config;
+        const _interval = config.triggerImmediately
+            ? interval(config.interval).pipe(startWith(-1))
+            : interval(config.interval);
+        this._pollingSubscription = _interval
             .pipe(takeUntil(config.takeUntil))
-            .subscribe(() => this.execute({ skipCache: true }));
+            .subscribe(() => this.execute({ skipCache: true, _triggeredVia: 'poll' }));
         return this;
     }
     stopPolling() {
         this._pollingSubscription?.unsubscribe();
         this._pollingSubscription = null;
+        this._currentPollConfig = null;
+        return this;
+    }
+    pausePolling() {
+        this._pollingSubscription?.unsubscribe();
+        this._pollingSubscription = null;
+        this._isPollingPaused = true;
         return this;
     }
+    resumePolling() {
+        if (!this._isPollingPaused || !this._currentPollConfig) {
+            return this;
+        }
+        this._isPollingPaused = false;
+        return this.poll({ ...this._currentPollConfig, triggerImmediately: true });
+    }
     _updateUseResultInDependencies() {
         if (!this._args?.useResultIn?.length) {
             return;
@@ -963,9 +1001,9 @@ class QueryDirective {
         }
     }
 }
-QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-QueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: QueryDirective, decorators: [{
+QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+QueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1038,6 +1076,7 @@ class InfinityQuery {
             console.error('Cannot load more pages, already at the end. Make sure to not render the infinity query trigger using *ngIf canLoadMore');
             return;
         }
+        this._clearSubscriptions();
         const args = this._prepareArgs(this._config, calculatedPage);
         const query = this._config.queryCreator.prepare(args).execute();
         this._handleNewQuery(query);
@@ -1046,7 +1085,7 @@ class InfinityQuery {
         this._currentQuery$.next(query);
     }
     reset(newConfig) {
-        this._destroy();
+        this._clearSubscriptions();
         this._config = { ...this._config, ...(newConfig ?? {}) };
         this._currentPage$.next(null);
         this._currentCalculatedPage$.next(null);
@@ -1054,8 +1093,9 @@ class InfinityQuery {
         this._itemsPerPage$.next(this._config.limitParam?.value ?? 10);
         this._currentQuery$.next(null);
         this._data$.next([]);
+        this.nextPage();
     }
-    _destroy() {
+    _clearSubscriptions() {
         this._subscriptions.forEach((sub) => sub.unsubscribe());
         this._subscriptions = [];
     }
@@ -1085,7 +1125,14 @@ class InfinityQuery {
                 this._subscriptions = this._subscriptions.filter((sub) => sub !== stateChangesSub);
             },
         });
-        this._subscriptions.push(stateChangesSub);
+        const queryAutoRefreshSub = query.state$.subscribe({
+            next: (state) => {
+                if (state.meta.triggeredVia === 'auto') {
+                    this.reset();
+                }
+            },
+        });
+        this._subscriptions.push(stateChangesSub, queryAutoRefreshSub);
     }
     _prepareArgs(config, page) {
         const pageParamLocation = this._getPageParamLocation(config?.pageParam?.location);
@@ -1199,7 +1246,7 @@ class InfinityQueryDirective {
         this._renderMainView();
     }
     ngOnDestroy() {
-        this.instance?._destroy();
+        this.instance?._clearSubscriptions();
     }
     _setupInfinityQuery(config) {
         const instance = new InfinityQuery(config);
@@ -1265,7 +1312,7 @@ class InfinityQueryDirective {
     }
     _cleanup() {
         this._queryConfigChanged$.next(true);
-        this.instance?._destroy();
+        this.instance?._clearSubscriptions();
         this._viewContext.loading = false;
         this._viewContext.error = null;
         this._viewContext.infinityQuery = null;
@@ -1278,9 +1325,9 @@ class InfinityQueryDirective {
         this._data$.next([]);
     }
 }
-InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1330,9 +1377,9 @@ class InfinityQueryTriggerDirective {
         this._observer.observe(this._elementRef.nativeElement);
     }
 }
-InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1348,6 +1395,7 @@ class QueryStore {
         this._config = _config;
         this._store = new Map();
         this._garbageCollector = null;
+        this._initSmartQueryHandling();
     }
     add(id, query) {
         this._store.set(id, query);
@@ -1371,14 +1419,45 @@ class QueryStore {
         for (const [key, query] of this._store) {
             if (query.isInUse &&
                 (query.isExpired || ignoreCacheValidity) &&
-                (query._config.autoRefreshOn?.queryClientDefaultHeadersChange ?? true)) {
-                query.execute({ skipCache: true });
+                query.autoRefreshOnConfig.queryClientDefaultHeadersChange) {
+                query.execute({ skipCache: true, _triggeredVia: 'auto' });
             }
             else if (purgeUnused && !query.isInUse) {
                 this.remove(key);
             }
         }
     }
+    _initSmartQueryHandling() {
+        const windowBlur$ = fromEvent(window, 'blur');
+        const windowFocus$ = fromEvent(window, 'focus');
+        windowBlur$.subscribe(() => {
+            this._stopGarbageCollector();
+            if (this._config?.enableSmartPolling) {
+                this.forEach((query) => {
+                    if (!query.isPolling || !query._enableSmartPolling) {
+                        return;
+                    }
+                    query.pausePolling();
+                });
+            }
+        });
+        windowFocus$.subscribe(() => {
+            if (this._config?.enableSmartPolling || this._config?.autoRefreshQueriesOnWindowFocus) {
+                this.forEach((query) => {
+                    if (this._config?.enableSmartPolling && query._isPollingPaused) {
+                        query.resumePolling();
+                    }
+                    if (this._config?.autoRefreshQueriesOnWindowFocus &&
+                        query.isExpired &&
+                        query.isInUse &&
+                        query.autoRefreshOnConfig.windowFocus) {
+                        query.execute({ skipCache: true, _triggeredVia: 'auto' });
+                    }
+                });
+            }
+            this._initGarbageCollector();
+        });
+    }
     _logState(key, item, operation) {
         if (!this._config?.enableChangeLogging)
             return;
@@ -1538,6 +1617,8 @@ class QueryClient {
         this._store = new QueryStore({
             enableChangeLogging: _clientConfig.logging?.queryStateChanges,
             enableGarbageCollectorLogging: _clientConfig.logging?.queryStateGarbageCollector,
+            autoRefreshQueriesOnWindowFocus: _clientConfig.request?.autoRefreshQueriesOnWindowFocus ?? true,
+            enableSmartPolling: _clientConfig.request?.enableSmartPolling ?? true,
         });
     }
 }