@ethlete/query 0.1.0-next.21 → 0.1.0-next.23

package/fesm2020/ethlete-query.mjs

@@ -1,5 +1,5 @@
 import { getCookie, setCookie, deleteCookie, DestroyService, equal, clone } from '@ethlete/core';
-import { filter, takeWhile, switchMap, of, BehaviorSubject, Subject, interval, takeUntil, tap, timer, fromEvent, startWith, concat, take, debounceTime, combineLatest, map, distinctUntilChanged } from 'rxjs';
+import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, tap, timer, fromEvent, startWith, 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';
@@ -72,7 +72,6 @@ const queryStateCannotTransformError = (data) => new QueryError('006', 'The quer
 const invalidBodyError = (data) => new QueryError('007', 'The body is not valid or upsupported', data);
 
 const isRequestError = (error) => error instanceof Object && 'code' in error && 'message' in error;
-const isAbortRequestError = (error) => isRequestError(error) && error.code === -1;
 const buildRoute = (options) => {
     if (options.base.endsWith('/')) {
         throw invalidBaseRouteError(options.base);
@@ -145,9 +144,9 @@ const isParamValid = (primitive) => {
     return true;
 };
 const extractExpiresInSeconds = (headers) => {
-    const cacheControl = headers.get('cache-control');
-    const age = headers.get('age');
-    const expires = headers.get('expires');
+    const cacheControl = headers['cache-control'];
+    const age = headers['age'];
+    const expires = headers['expires'];
     // In seconds
     let expiresIn = null;
     let maxAge = null;
@@ -186,91 +185,21 @@ const buildTimestampFromSeconds = (seconds) => {
     }
     return new Date(Date.now() + seconds * 1000).getTime();
 };
-const buildRequestError = async (error, route, requestInit) => {
-    if (error instanceof DOMException && error.code === error.ABORT_ERR) {
-        const err = {
-            code: -1,
-            message: 'Request aborted',
-            detail: null,
-            raw: error,
-            route,
-            requestInit,
-        };
-        return err;
-    }
-    if (error instanceof SyntaxError) {
-        const err = {
-            code: -3,
-            message: 'Syntax error',
-            detail: null,
-            raw: error,
-            route,
-            requestInit,
-        };
-        return err;
-    }
-    if (error instanceof Error) {
-        const err = {
-            code: -2,
-            message: `${error.name}: ${error.message}`,
-            detail: null,
-            raw: error,
-            route,
-            requestInit,
-        };
-        return err;
-    }
-    if (isFetchResponse(error)) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let detail = null;
-        try {
-            detail = await error.json();
-        }
-        catch {
-            // noop
-        }
-        if (!detail) {
-            try {
-                detail = await error.text();
-            }
-            catch {
-                // noop
-            }
-        }
-        const err = {
-            code: error.status,
-            message: error.statusText,
-            detail,
-            raw: error,
-            route,
-            requestInit,
-        };
-        return err;
-    }
-    const err = {
-        code: 0,
-        message: 'Unknown error',
-        detail: null,
-        raw: error,
-        route,
-        requestInit,
-    };
-    return err;
-};
-const buildBody = (body) => {
-    if (body === undefined || body === null) {
+const serializeBody = (body) => {
+    if (body === null || body === undefined) {
         return null;
     }
-    if (typeof body === 'string') {
+    if (body instanceof ArrayBuffer ||
+        body instanceof Blob ||
+        body instanceof FormData ||
+        body instanceof URLSearchParams ||
+        typeof body === 'string') {
         return body;
     }
-    if (body instanceof FormData) {
-        return body;
-    }
-    if (typeof body === 'object') {
+    if (typeof body === 'object' || typeof body === 'boolean' || Array.isArray(body)) {
         return JSON.stringify(body);
     }
-    throw invalidBodyError(body);
+    return body.toString();
 };
 const transformMethod = (method) => {
     if (method === 'GQL_QUERY' || method === 'GQL_MUTATE') {
@@ -278,40 +207,234 @@ const transformMethod = (method) => {
     }
     return method;
 };
-const guessContentType = (body) => {
-    if (body === null || body === undefined) {
+const detectContentTypeHeader = (body) => {
+    // An empty body has no content type.
+    if (body === null) {
+        return null;
+    }
+    // FormData bodies rely on the browser's content type assignment.
+    if (body instanceof FormData) {
         return null;
     }
+    // Blobs usually have their own content type. If it doesn't, then
+    // no type can be inferred.
+    if (body instanceof Blob) {
+        return body.type || null;
+    }
+    // Array buffers have unknown contents and thus no type can be inferred.
+    if (body instanceof ArrayBuffer) {
+        return null;
+    }
+    // Technically, strings could be a form of JSON data, but it's safe enough
+    // to assume they're plain strings.
     if (typeof body === 'string') {
         return 'text/plain';
     }
-    if (body instanceof FormData) {
-        return 'multipart/form-data';
-    }
-    if (typeof body === 'object') {
+    // Arrays, objects, boolean and numbers will be encoded as JSON.
+    if (typeof body === 'object' || typeof body === 'number' || typeof body === 'boolean') {
         return 'application/json';
     }
+    // No type could be inferred.
     return null;
 };
-
-const request = async (options) => {
-    try {
-        const response = await fetch(options.route, options.init);
-        if (!response.ok) {
-            throw response;
-        }
-        const isJsonResponse = response.headers.get('Content-Type')?.includes('application/json');
-        const isTextResponse = response.headers.get('Content-Type')?.includes('text/plain');
-        const data = (isJsonResponse ? await response.json() : isTextResponse ? await response.text() : null);
-        const expiresInSeconds = options.cacheAdapter
-            ? options.cacheAdapter(response.headers)
-            : extractExpiresInSeconds(response.headers);
-        const expiresInTimestamp = buildTimestampFromSeconds(expiresInSeconds);
-        return { data, expiresInTimestamp };
+const hasHeader = (headers, header) => {
+    return Object.keys(headers).some((key) => key.toLowerCase() === header.toLowerCase());
+};
+const forEachHeader = (headers, callback) => {
+    Object.entries(headers).forEach(([key, value]) => {
+        callback(key, value);
+    });
+};
+const parseAllXhrResponseHeaders = (xhr) => {
+    const headers = xhr.getAllResponseHeaders();
+    const parsedHeaders = {};
+    for (const line of headers.split('\n')) {
+        const index = line.indexOf(':');
+        if (index > 0) {
+            const name = line.slice(0, index);
+            const key = name.toLowerCase();
+            const value = line.slice(index + 1).trim();
+            parsedHeaders[key] = value;
+        }
+    }
+    return parsedHeaders;
+};
+const getResponseUrl = (xhr) => {
+    if ('responseURL' in xhr && xhr.responseURL) {
+        return xhr.responseURL;
     }
-    catch (error) {
-        throw await buildRequestError(error, options.route, options.init);
+    if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) {
+        return xhr.getResponseHeader('X-Request-URL');
     }
+    return null;
+};
+
+const XSSI_PREFIX = /^\)\]\}',?\n/;
+const request = (config) => {
+    const headers = config.headers || {};
+    const responseType = config.responseType || 'json';
+    const body = config.body || null;
+    const url = config.urlWithParams.split('?')[0];
+    return new Observable((observer) => {
+        const xhr = new XMLHttpRequest();
+        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';
+        const reqBody = serializeBody(body);
+        let headerResponse = null;
+        const partialFromXhr = () => {
+            if (headerResponse !== null) {
+                return headerResponse;
+            }
+            const statusText = xhr.statusText || 'OK';
+            const headers = parseAllXhrResponseHeaders(xhr);
+            const _url = getResponseUrl(xhr) || url;
+            headerResponse = { headers, status: xhr.status, statusText, url: _url };
+            return headerResponse;
+        };
+        const onLoad = () => {
+            const { headers, statusText, url } = partialFromXhr();
+            let { status } = partialFromXhr();
+            let body = null;
+            if (status !== 204 /* HttpStatusCode.NoContent */) {
+                body = typeof xhr.response === 'undefined' ? xhr.responseText : xhr.response;
+            }
+            if (status === 0) {
+                status = body ? 200 /* 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) : null;
+                }
+                catch (error) {
+                    body = originalBody;
+                    if (ok) {
+                        ok = false;
+                        body = { error, text: body };
+                    }
+                }
+            }
+            if (ok) {
+                const successEvent = {
+                    type: 'success',
+                    headers,
+                    response: body,
+                };
+                const expiresInSeconds = config.cacheAdapter?.(headers) ?? extractExpiresInSeconds(headers);
+                const expiresInTimestamp = buildTimestampFromSeconds(expiresInSeconds);
+                if (expiresInTimestamp) {
+                    successEvent.expiresInTimestamp = expiresInTimestamp;
+                }
+                observer.next(successEvent);
+                observer.complete();
+            }
+            else {
+                observer.next({
+                    type: 'failure',
+                    headers,
+                    error: {
+                        url,
+                        detail: body,
+                        status,
+                        statusText,
+                    },
+                });
+                observer.complete();
+            }
+        };
+        const onError = (error) => {
+            const { url, headers } = partialFromXhr();
+            observer.next({
+                type: 'failure',
+                headers,
+                error: {
+                    url,
+                    detail: error,
+                    status: xhr.status || 0,
+                    statusText: xhr.statusText || 'Unknown Error',
+                },
+            });
+            observer.complete();
+        };
+        const onDownProgress = (event) => {
+            const { headers } = partialFromXhr();
+            const progress = {
+                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) => {
+            const { headers } = partialFromXhr();
+            const progress = {
+                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 (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 });
+        };
+    });
 };
 
 function filterSuccess() {
@@ -413,13 +536,12 @@ class Query {
         }
         return ts < Date.now();
     }
-    constructor(_client, _queryConfig, _route, _args) {
+    constructor(_client, _queryConfig, _routeWithParams, _args) {
         this._client = _client;
         this._queryConfig = _queryConfig;
-        this._route = _route;
+        this._routeWithParams = _routeWithParams;
         this._args = _args;
         this._currentId = 0;
-        this._abortController = new AbortController();
         this._pollingSubscription = null;
         this._onAbort$ = new Subject();
         this._state$ = new BehaviorSubject({
@@ -447,17 +569,14 @@ class Query {
             meta,
         });
         this._updateUseResultInDependencies();
-        let body = null;
-        let contentType = null;
+        let body;
         if (isGqlQueryConfig(this._queryConfig)) {
             const queryTemplate = this._queryConfig.query;
             const query = transformGql(queryTemplate);
-            contentType = 'application/json';
             body = query(this._args?.variables);
         }
         else {
-            body = buildBody(this._args?.body);
-            contentType = guessContentType(this._args?.body);
+            body = this._args?.body;
         }
         let authHeader = null;
         if (this._queryConfig.secure) {
@@ -471,61 +590,82 @@ class Query {
                 authHeader = this._client.authProvider.header;
             }
         }
-        let headers = mergeHeaders(authHeader, this._args?.headers);
-        if (contentType && !headers?.['Content-Type'] && !headers?.['content-type']) {
-            if (headers) {
-                headers['Content-Type'] = contentType;
-            }
-            else {
-                headers = {
-                    'Content-Type': contentType,
-                };
-            }
-        }
-        // For form data we need to remove content type header because browser will set it automatically including boundary
-        if (headers && 'Content-Type' in headers && headers['Content-Type'] === 'multipart/form-data') {
-            delete headers['Content-Type'];
-        }
         request({
-            route: this._route,
-            init: {
-                method: transformMethod(this._queryConfig.method),
-                signal: this._abortController.signal,
-                body,
-                headers: headers || undefined,
-            },
+            urlWithParams: this._routeWithParams,
+            method: transformMethod(this._queryConfig.method),
+            body,
+            headers: mergeHeaders(authHeader, this._args?.headers) || undefined,
             cacheAdapter: this._client.config.request?.cacheAdapter,
+            reportProgress: this._queryConfig.reportProgress,
+            responseType: this._queryConfig.responseType,
+            withCredentials: this._queryConfig.withCredentials,
         })
-            .then((response) => {
-            const isResponseObject = typeof response === 'object';
-            const isGql = isGqlQueryConfig(this._queryConfig);
-            let responseData = null;
-            if (isGql &&
-                isResponseObject &&
-                !!response.data &&
-                typeof response.data === 'object' &&
-                'data' in response.data) {
-                responseData = response.data['data'];
-            }
-            else {
-                responseData = response.data;
-            }
-            const transformedResponse = this._queryConfig.responseTransformer
-                ? this._queryConfig.responseTransformer(responseData)
-                : responseData;
-            this._state$.next({
-                type: "SUCCESS" /* QueryStateType.Success */,
-                response: transformedResponse,
-                rawResponse: responseData,
-                meta: { ...meta, expiresAt: response.expiresInTimestamp },
-            });
-        })
-            .catch((error) => this._handleExecuteError(error, meta));
+            .pipe(takeUntil(this._onAbort$))
+            .subscribe({
+            next: (state) => {
+                if (state.type === 'start') {
+                    this._state$.next({
+                        type: "LOADING" /* QueryStateType.Loading */,
+                        meta,
+                    });
+                }
+                else if (state.type === 'download-progress') {
+                    this._state$.next({
+                        type: "LOADING" /* QueryStateType.Loading */,
+                        progress: state.progress,
+                        partialText: state.partialText,
+                        meta,
+                    });
+                }
+                else if (state.type === 'upload-progress') {
+                    this._state$.next({
+                        type: "LOADING" /* QueryStateType.Loading */,
+                        progress: state.progress,
+                        meta,
+                    });
+                }
+                else if (state.type === 'success') {
+                    const isResponseObject = typeof state.response === 'object';
+                    const isGql = isGqlQueryConfig(this._queryConfig);
+                    let responseData = null;
+                    if (isGql &&
+                        isResponseObject &&
+                        !!state.response &&
+                        typeof state.response === 'object' &&
+                        'data' in state.response) {
+                        responseData = state.response['data'];
+                    }
+                    else {
+                        responseData = state.response;
+                    }
+                    const transformedResponse = this._queryConfig.responseTransformer
+                        ? this._queryConfig.responseTransformer(responseData)
+                        : responseData;
+                    this._state$.next({
+                        type: "SUCCESS" /* QueryStateType.Success */,
+                        rawResponse: state.response,
+                        response: transformedResponse,
+                        meta: { ...meta, expiresAt: state.expiresInTimestamp },
+                    });
+                }
+                else if (state.type === 'failure') {
+                    this._state$.next({
+                        type: "FAILURE" /* QueryStateType.Failure */,
+                        error: state.error,
+                        meta,
+                    });
+                }
+                else if (state.type === 'cancel') {
+                    this._state$.next({
+                        type: "CANCELLED" /* QueryStateType.Cancelled */,
+                        meta,
+                    });
+                }
+            },
+        });
         return this;
     }
     abort() {
-        this._abortController.abort();
-        this._abortController = new AbortController();
         this._onAbort$.next();
         return this;
     }
@@ -563,24 +703,6 @@ class Query {
         }))
             .subscribe();
     }
-    _handleExecuteError(error, meta) {
-        if (isAbortRequestError(error)) {
-            this._state$.next({
-                type: "CANCELLED" /* QueryStateType.Cancelled */,
-                meta,
-            });
-        }
-        else if (isRequestError(error)) {
-            this._state$.next({
-                type: "FAILURE" /* QueryStateType.Failure */,
-                error,
-                meta,
-            });
-        }
-        else {
-            throw error;
-        }
-    }
 }
 
 const isBasicAuthProvider = (authProvider) => authProvider instanceof BasicAuthProvider;
@@ -768,6 +890,7 @@ class QueryDirective {
             raw: null,
             loading: false,
             error: null,
+            progress: null,
         };
         this._cache = false;
     }
@@ -793,9 +916,11 @@ class QueryDirective {
     _updateView(state) {
         if (isQueryStateLoading(state)) {
             this._viewContext.loading = true;
+            this._viewContext.progress = state.progress ?? null;
         }
         else {
             this._viewContext.loading = false;
+            this._viewContext.progress = null;
         }
         if (isQueryStateSuccess(state)) {
             this._viewContext.query = state.response;
@@ -1467,7 +1592,7 @@ class QueryForm {
         if (!this._router || !this._activatedRoute) {
             return;
         }
-        const queryParams = clone(this._activatedRoute.snapshot.queryParams);
+        const queryParams = { ...clone(this._activatedRoute.snapshot.queryParams) };
         for (const [key, value] of Object.entries(values)) {
             if (this._isDefaultValue(key, value) || this._fields[key].data.appendToUrl === false) {
                 delete queryParams[key];
@@ -1607,5 +1732,5 @@ const def = () => null;
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryDirective, QueryError, QueryField, QueryForm, QueryStore, buildBody, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryString, buildRequestError, buildRoute, buildTimestampFromSeconds, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, gql, guessContentType, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAbortRequestError, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isFetchResponse, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, mergeHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, shouldCacheQuery, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryDirective, QueryError, QueryField, QueryForm, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryString, buildRoute, buildTimestampFromSeconds, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getResponseUrl, gql, hasHeader, invalidBaseRouteError, invalidBodyError, invalidRouteError, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isFetchResponse, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, mergeHeaders, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, serializeBody, shouldCacheQuery, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map