@brandup/ui-ajax 1.0.1

package/README.md

@@ -0,0 +1,76 @@
+# brandup-ui-ajax
+
+[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui?branchName=master)]()
+
+## Installation
+
+Install NPM package [@brandup/ui-ajax](https://www.npmjs.com/package/@brandup/ui-ajax).
+
+```
+npm i @brandup/ui-ajax@latest
+```
+
+## AJAX request
+
+Simplify async ajax request method.
+
+```
+import { request } from "@brandup/ui-ajax";
+
+await request({
+		url?: string | null;
+		query?: QueryData | null;
+		method?: AJAXMethod | null;
+		timeout?: number | null;
+		headers?: { [key: string]: string } | null;
+		type?: AJAXReqestType | null;
+		data?: string | object | Blob | FormData | HTMLFormElement | null;
+		success?: ResponseDelegate | null;
+		error?: ErrorDelegate | null;
+		disableCache?: boolean | null;
+		state?: TState | null;
+	})
+	.then(response => {
+		// response.status: number;
+		// response.redirected: boolean;
+		// response.url: string | null;
+		// response.type: "none" | "json" | "blob" | "text" | "html";
+		// response.contentType: string | null;
+		// response.data: TData | null;
+		// response.state?: TState | null;
+	})
+	.catch(reason => console.error(reason));
+```
+
+### Request cancellation
+
+```
+import { request } from "@brandup/ui-ajax";
+
+const cancellation = new AbortController();
+
+await request({ }, cancellation.signal)
+	.catch(reason => console.error(reason));
+```
+
+## Queue requests
+
+Sequential execution of AJAX requests.
+
+```
+import { AjaxQueue } from "@brandup/ui-ajax";
+
+const queue = new AjaxQueue({
+	canRequest?: (request: AjaxRequest) => void | boolean;
+	successRequest?: (request: AjaxRequest, response: AjaxResponse) => void;
+	errorRequest?: (response: AjaxRequest, reason?: any) => void;
+});
+
+queue.push({ request options });
+
+queue.reset(); // clear queue without abort current request
+
+queue.reset(true); // abort current request and clear queue
+
+queue.destroy();
+```

package/dist/cjs/index.js

@@ -0,0 +1,392 @@
+'use strict';
+
+const DEFAULT_TIMEOUT = 30000;
+const FORM_URL = "application/x-www-form-urlencoded";
+const FORM_DATA = "multipart/form-data";
+const urlEncode = (data, rfc3986 = true) => {
+    data = encodeURIComponent(data);
+    data = data.replace(/%20/g, '+');
+    if (rfc3986) {
+        data = data.replace(/[!'()*]/g, function (c) {
+            return '%' + c.charCodeAt(0).toString(16);
+        });
+    }
+    return data;
+};
+const ajaxRequest = (options) => {
+    let url = options.url || location.href;
+    let { query } = options;
+    if (options.disableCache) {
+        if (!query)
+            query = {};
+        query["_"] = new Date().getTime().toString();
+    }
+    url = extendUrl(url, query);
+    const method = options.method ? options.method : "GET";
+    if (options.data && method === "GET")
+        throw new Error("GET method is not support request with data.");
+    detectRequestType(options);
+    const prepared = prepareRequest(options, options.data);
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+    if (options.timeout === 0 || options.timeout)
+        xhr.timeout = options.timeout;
+    xhr.onreadystatechange = (e) => {
+        switch (xhr.readyState) {
+            case XMLHttpRequest.DONE: {
+                if (options.success) {
+                    let responseData = null;
+                    let responseType = "none";
+                    const contentType = xhr.getResponseHeader("Content-Type");
+                    if (xhr.response) {
+                        if (contentType) {
+                            if (contentType.includes("json")) {
+                                responseType = "json";
+                                responseData = JSON.parse(xhr.responseText);
+                            }
+                            else if (contentType.includes("text/plain")) {
+                                responseType = "text";
+                                responseData = xhr.responseText;
+                            }
+                            else if (contentType.includes("text/html")) {
+                                responseType = "html";
+                                responseData = xhr.responseText;
+                            }
+                        }
+                    }
+                    const headers = {
+                        get(name) {
+                            return xhr.getResponseHeader(name);
+                        },
+                        has(name) {
+                            return !!xhr.getResponseHeader(name);
+                        },
+                        forEach(callbackfn, thisArg) {
+                            const headers = xhr.getAllResponseHeaders();
+                            // Convert the header string into an array
+                            // of individual headers
+                            const arr = headers.trim().split(/[\r\n]+/);
+                            // Create a map of header names to values
+                            arr.forEach((line) => {
+                                const parts = line.split(": ");
+                                const header = parts.shift() || "";
+                                const value = parts.join(": ");
+                                callbackfn.call(thisArg, value, header.toLowerCase(), {});
+                            });
+                        }
+                    };
+                    options.success({
+                        status: xhr.status,
+                        url: xhr.responseURL,
+                        redirected: false,
+                        type: responseType,
+                        contentType,
+                        headers,
+                        data: responseData,
+                        state: options.state
+                    });
+                }
+                break;
+            }
+        }
+    };
+    xhr.onabort = (e) => {
+        if (options.error)
+            options.error(options, "Request aborted");
+    };
+    xhr.open(method, url, true);
+    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+    for (const key in prepared.headers) {
+        const value = prepared.headers[key];
+        if (!value)
+            continue;
+        xhr.setRequestHeader(key, value);
+    }
+    if (method === "GET")
+        xhr.send();
+    else
+        xhr.send(prepared.body);
+    return xhr;
+};
+const request = async (options, abortSignal) => {
+    let url = options.url || location.href;
+    url = extendUrl(url, options.query);
+    const method = options.method ? options.method.toUpperCase() : "GET";
+    let body = options.data;
+    if (body && method === "GET")
+        throw new Error("GET method is not support request with data.");
+    detectRequestType(options);
+    const prepared = prepareRequest(options, body);
+    const abortSignals = [AbortSignal.timeout(options.timeout ?? DEFAULT_TIMEOUT)];
+    if (abortSignal)
+        abortSignals.push(abortSignal);
+    try {
+        const response = await fetch(url, {
+            method,
+            headers: new Headers(prepared.headers),
+            cache: options.disableCache ? "no-cache" : "default",
+            redirect: "follow",
+            signal: AbortSignal.any(abortSignals),
+            body: prepared.body
+        });
+        let result;
+        switch (response.type) {
+            case "basic":
+            case "default": {
+                let responseData = null;
+                let responseType = "none";
+                let contentType = response.headers.get("content-type");
+                if (!response.redirected && response.body) {
+                    if (contentType) {
+                        const ctSplitIndex = contentType.indexOf(";");
+                        if (ctSplitIndex > 0)
+                            contentType = contentType.substring(0, ctSplitIndex);
+                        if (contentType.includes("json")) {
+                            responseType = "json";
+                            responseData = await response.json();
+                        }
+                        else if (contentType.includes("text/html")) {
+                            responseType = "html";
+                            responseData = await response.text();
+                        }
+                        else if (contentType.includes("text/plain")) {
+                            responseType = "text";
+                            responseData = await response.text();
+                        }
+                        else {
+                            responseType = "blob";
+                            responseData = await response.blob();
+                        }
+                    }
+                }
+                result = {
+                    status: response.status,
+                    url: response.url,
+                    redirected: response.redirected,
+                    type: responseType,
+                    contentType,
+                    headers: response.headers,
+                    data: responseData,
+                    state: options.state
+                };
+                break;
+            }
+            case "opaqueredirect":
+                throw new Error("Not supported opaqueredirect.");
+            case "error":
+                throw new Error("Response error.");
+            case "cors":
+                throw new Error("Response type cors is not supported.");
+            case "opaque":
+                throw new Error("Response type opaque is not supported.");
+            default:
+                throw new Error(`Unknown response type: ${response.type}`);
+        }
+        if (options.success)
+            options.success(result);
+        return result;
+    }
+    catch (error) {
+        if (options.error)
+            options.error(options, error);
+        throw new Error(`Error ajax request: ${(error && error.message) ? error.message : error}`);
+    }
+};
+const detectRequestType = (options) => {
+    if (!options.type && options.data) {
+        const body = options.data;
+        if (body instanceof Blob)
+            options.type = "BLOB";
+        else if (body instanceof FormData)
+            options.type = null;
+        else if (body instanceof HTMLFormElement)
+            options.type = "FORM";
+        else if (body instanceof Object)
+            options.type = "JSON";
+        else if (typeof body === "string")
+            options.type = "TEXT";
+    }
+};
+const prepareRequest = (options, body) => {
+    const headers = {};
+    if (options.headers) {
+        for (const key in options.headers) {
+            const value = options.headers[key];
+            if (!value)
+                continue;
+            headers[key] = value;
+        }
+    }
+    if (options.type) {
+        let contentType = null;
+        let accept = null;
+        switch (options.type) {
+            case "XML":
+                contentType = "application/xml; charset=utf-8";
+                accept = "application/xml, text/xml, */*; q=0.01";
+                break;
+            case "JSON":
+                contentType = "application/json; charset=utf-8";
+                accept = "application/json, text/json, */*; q=0.01";
+                body = JSON.stringify(body);
+                break;
+            case "FORM":
+                if (body instanceof HTMLFormElement) {
+                    //const form = <HTMLFormElement>body;
+                    //contentType = form.enctype ?? FORM_URL;
+                    body = new FormData(body);
+                }
+                else if (body instanceof FormData)
+                    contentType = FORM_URL;
+                if (contentType == FORM_URL)
+                    body = encodeForm(body);
+                else if (contentType == FORM_DATA)
+                    contentType = null;
+                break;
+            case "FORMDATA":
+                break;
+            case "TEXT":
+                contentType = "text/plain";
+                break;
+        }
+        if (accept)
+            headers["Accept"] = accept;
+        if (contentType)
+            headers['Content-Type'] = contentType;
+    }
+    return {
+        headers,
+        body
+    };
+};
+const createSearchParams = (query) => {
+    const urlParams = new URLSearchParams();
+    if (!query)
+        return urlParams;
+    for (const key in query) {
+        const val = query[key];
+        if (val === null)
+            continue;
+        if (Array.isArray(val))
+            val.forEach(v => urlParams.append(key, v));
+        else
+            urlParams.append(key, val);
+    }
+    return urlParams;
+};
+const extendUrl = (url, query) => {
+    if (query) {
+        const urlParams = createSearchParams(query);
+        if (urlParams.size) {
+            if (url.indexOf("?") === -1)
+                url += "?";
+            else
+                url += "&";
+            url += urlParams.toString();
+        }
+    }
+    return url;
+};
+const encodeForm = (data) => {
+    const query = new URLSearchParams();
+    data.forEach((value, key) => {
+        if (!key)
+            return;
+        query.append(key, value.toString());
+    });
+    return query.toString();
+};
+
+class AjaxQueue {
+    _options;
+    _requests = [];
+    _curent = null;
+    _destroyed = false;
+    constructor(options) {
+        this._options = options ? options : {};
+    }
+    get length() { return this._requests.length; }
+    get isFree() { return !this._requests.length && !this._curent; }
+    get isEmpty() { return !this._requests.length; }
+    push(request) {
+        if (this._destroyed)
+            throw new Error("AjaxQueue is destroyed.");
+        this._requests.push({ request, abort: new AbortController() });
+        if (!this._curent)
+            this.__execute();
+    }
+    enque(request) {
+        const { success, error } = request;
+        return new Promise((resolve, reject) => {
+            request.success = (response) => {
+                if (success)
+                    success(response);
+                resolve(response);
+            };
+            request.error = (response, reason) => {
+                if (error)
+                    error(request, reason);
+                reject(reason);
+            };
+            this.push(request);
+        });
+    }
+    reset(cancelCurrentRequest = false) {
+        this._requests = [];
+        const current = this._curent;
+        this._curent = null;
+        if (cancelCurrentRequest && current)
+            current.abort?.abort("ResetAjaxQueue");
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this._destroyed = true;
+        this._requests = [];
+        if (this._curent) {
+            this._curent.abort?.abort("DestroyAjaxQueue");
+            this._curent = null;
+        }
+    }
+    __execute() {
+        if (this._destroyed)
+            return;
+        if (this._curent)
+            throw new Error("AjaxQueue currently is executing.");
+        const task = this._curent = this._requests.shift() ?? null;
+        if (task) {
+            if (this._options.canRequest && this._options.canRequest(task.request) === false) {
+                this.__next();
+                return;
+            }
+            task.abort = new AbortController();
+            task.xhr = request(task.request, task.abort.signal);
+            task.xhr
+                .then(response => {
+                if (this._destroyed)
+                    return;
+                if (this._options.successRequest)
+                    this._options.successRequest(task.request, response);
+            })
+                .catch(reason => {
+                if (this._destroyed)
+                    return;
+                if (this._options.errorRequest)
+                    this._options.errorRequest(task.request, reason);
+            })
+                .finally(() => this.__next());
+        }
+    }
+    __next() {
+        if (this._destroyed)
+            return;
+        this._curent = null;
+        this.__execute();
+    }
+}
+
+exports.AjaxQueue = AjaxQueue;
+exports.ajaxRequest = ajaxRequest;
+exports.request = request;
+exports.urlEncode = urlEncode;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/mjs/index.js

@@ -0,0 +1,387 @@
+const DEFAULT_TIMEOUT = 30000;
+const FORM_URL = "application/x-www-form-urlencoded";
+const FORM_DATA = "multipart/form-data";
+const urlEncode = (data, rfc3986 = true) => {
+    data = encodeURIComponent(data);
+    data = data.replace(/%20/g, '+');
+    if (rfc3986) {
+        data = data.replace(/[!'()*]/g, function (c) {
+            return '%' + c.charCodeAt(0).toString(16);
+        });
+    }
+    return data;
+};
+const ajaxRequest = (options) => {
+    let url = options.url || location.href;
+    let { query } = options;
+    if (options.disableCache) {
+        if (!query)
+            query = {};
+        query["_"] = new Date().getTime().toString();
+    }
+    url = extendUrl(url, query);
+    const method = options.method ? options.method : "GET";
+    if (options.data && method === "GET")
+        throw new Error("GET method is not support request with data.");
+    detectRequestType(options);
+    const prepared = prepareRequest(options, options.data);
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+    if (options.timeout === 0 || options.timeout)
+        xhr.timeout = options.timeout;
+    xhr.onreadystatechange = (e) => {
+        switch (xhr.readyState) {
+            case XMLHttpRequest.DONE: {
+                if (options.success) {
+                    let responseData = null;
+                    let responseType = "none";
+                    const contentType = xhr.getResponseHeader("Content-Type");
+                    if (xhr.response) {
+                        if (contentType) {
+                            if (contentType.includes("json")) {
+                                responseType = "json";
+                                responseData = JSON.parse(xhr.responseText);
+                            }
+                            else if (contentType.includes("text/plain")) {
+                                responseType = "text";
+                                responseData = xhr.responseText;
+                            }
+                            else if (contentType.includes("text/html")) {
+                                responseType = "html";
+                                responseData = xhr.responseText;
+                            }
+                        }
+                    }
+                    const headers = {
+                        get(name) {
+                            return xhr.getResponseHeader(name);
+                        },
+                        has(name) {
+                            return !!xhr.getResponseHeader(name);
+                        },
+                        forEach(callbackfn, thisArg) {
+                            const headers = xhr.getAllResponseHeaders();
+                            // Convert the header string into an array
+                            // of individual headers
+                            const arr = headers.trim().split(/[\r\n]+/);
+                            // Create a map of header names to values
+                            arr.forEach((line) => {
+                                const parts = line.split(": ");
+                                const header = parts.shift() || "";
+                                const value = parts.join(": ");
+                                callbackfn.call(thisArg, value, header.toLowerCase(), {});
+                            });
+                        }
+                    };
+                    options.success({
+                        status: xhr.status,
+                        url: xhr.responseURL,
+                        redirected: false,
+                        type: responseType,
+                        contentType,
+                        headers,
+                        data: responseData,
+                        state: options.state
+                    });
+                }
+                break;
+            }
+        }
+    };
+    xhr.onabort = (e) => {
+        if (options.error)
+            options.error(options, "Request aborted");
+    };
+    xhr.open(method, url, true);
+    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+    for (const key in prepared.headers) {
+        const value = prepared.headers[key];
+        if (!value)
+            continue;
+        xhr.setRequestHeader(key, value);
+    }
+    if (method === "GET")
+        xhr.send();
+    else
+        xhr.send(prepared.body);
+    return xhr;
+};
+const request = async (options, abortSignal) => {
+    let url = options.url || location.href;
+    url = extendUrl(url, options.query);
+    const method = options.method ? options.method.toUpperCase() : "GET";
+    let body = options.data;
+    if (body && method === "GET")
+        throw new Error("GET method is not support request with data.");
+    detectRequestType(options);
+    const prepared = prepareRequest(options, body);
+    const abortSignals = [AbortSignal.timeout(options.timeout ?? DEFAULT_TIMEOUT)];
+    if (abortSignal)
+        abortSignals.push(abortSignal);
+    try {
+        const response = await fetch(url, {
+            method,
+            headers: new Headers(prepared.headers),
+            cache: options.disableCache ? "no-cache" : "default",
+            redirect: "follow",
+            signal: AbortSignal.any(abortSignals),
+            body: prepared.body
+        });
+        let result;
+        switch (response.type) {
+            case "basic":
+            case "default": {
+                let responseData = null;
+                let responseType = "none";
+                let contentType = response.headers.get("content-type");
+                if (!response.redirected && response.body) {
+                    if (contentType) {
+                        const ctSplitIndex = contentType.indexOf(";");
+                        if (ctSplitIndex > 0)
+                            contentType = contentType.substring(0, ctSplitIndex);
+                        if (contentType.includes("json")) {
+                            responseType = "json";
+                            responseData = await response.json();
+                        }
+                        else if (contentType.includes("text/html")) {
+                            responseType = "html";
+                            responseData = await response.text();
+                        }
+                        else if (contentType.includes("text/plain")) {
+                            responseType = "text";
+                            responseData = await response.text();
+                        }
+                        else {
+                            responseType = "blob";
+                            responseData = await response.blob();
+                        }
+                    }
+                }
+                result = {
+                    status: response.status,
+                    url: response.url,
+                    redirected: response.redirected,
+                    type: responseType,
+                    contentType,
+                    headers: response.headers,
+                    data: responseData,
+                    state: options.state
+                };
+                break;
+            }
+            case "opaqueredirect":
+                throw new Error("Not supported opaqueredirect.");
+            case "error":
+                throw new Error("Response error.");
+            case "cors":
+                throw new Error("Response type cors is not supported.");
+            case "opaque":
+                throw new Error("Response type opaque is not supported.");
+            default:
+                throw new Error(`Unknown response type: ${response.type}`);
+        }
+        if (options.success)
+            options.success(result);
+        return result;
+    }
+    catch (error) {
+        if (options.error)
+            options.error(options, error);
+        throw new Error(`Error ajax request: ${(error && error.message) ? error.message : error}`);
+    }
+};
+const detectRequestType = (options) => {
+    if (!options.type && options.data) {
+        const body = options.data;
+        if (body instanceof Blob)
+            options.type = "BLOB";
+        else if (body instanceof FormData)
+            options.type = null;
+        else if (body instanceof HTMLFormElement)
+            options.type = "FORM";
+        else if (body instanceof Object)
+            options.type = "JSON";
+        else if (typeof body === "string")
+            options.type = "TEXT";
+    }
+};
+const prepareRequest = (options, body) => {
+    const headers = {};
+    if (options.headers) {
+        for (const key in options.headers) {
+            const value = options.headers[key];
+            if (!value)
+                continue;
+            headers[key] = value;
+        }
+    }
+    if (options.type) {
+        let contentType = null;
+        let accept = null;
+        switch (options.type) {
+            case "XML":
+                contentType = "application/xml; charset=utf-8";
+                accept = "application/xml, text/xml, */*; q=0.01";
+                break;
+            case "JSON":
+                contentType = "application/json; charset=utf-8";
+                accept = "application/json, text/json, */*; q=0.01";
+                body = JSON.stringify(body);
+                break;
+            case "FORM":
+                if (body instanceof HTMLFormElement) {
+                    //const form = <HTMLFormElement>body;
+                    //contentType = form.enctype ?? FORM_URL;
+                    body = new FormData(body);
+                }
+                else if (body instanceof FormData)
+                    contentType = FORM_URL;
+                if (contentType == FORM_URL)
+                    body = encodeForm(body);
+                else if (contentType == FORM_DATA)
+                    contentType = null;
+                break;
+            case "FORMDATA":
+                break;
+            case "TEXT":
+                contentType = "text/plain";
+                break;
+        }
+        if (accept)
+            headers["Accept"] = accept;
+        if (contentType)
+            headers['Content-Type'] = contentType;
+    }
+    return {
+        headers,
+        body
+    };
+};
+const createSearchParams = (query) => {
+    const urlParams = new URLSearchParams();
+    if (!query)
+        return urlParams;
+    for (const key in query) {
+        const val = query[key];
+        if (val === null)
+            continue;
+        if (Array.isArray(val))
+            val.forEach(v => urlParams.append(key, v));
+        else
+            urlParams.append(key, val);
+    }
+    return urlParams;
+};
+const extendUrl = (url, query) => {
+    if (query) {
+        const urlParams = createSearchParams(query);
+        if (urlParams.size) {
+            if (url.indexOf("?") === -1)
+                url += "?";
+            else
+                url += "&";
+            url += urlParams.toString();
+        }
+    }
+    return url;
+};
+const encodeForm = (data) => {
+    const query = new URLSearchParams();
+    data.forEach((value, key) => {
+        if (!key)
+            return;
+        query.append(key, value.toString());
+    });
+    return query.toString();
+};
+
+class AjaxQueue {
+    _options;
+    _requests = [];
+    _curent = null;
+    _destroyed = false;
+    constructor(options) {
+        this._options = options ? options : {};
+    }
+    get length() { return this._requests.length; }
+    get isFree() { return !this._requests.length && !this._curent; }
+    get isEmpty() { return !this._requests.length; }
+    push(request) {
+        if (this._destroyed)
+            throw new Error("AjaxQueue is destroyed.");
+        this._requests.push({ request, abort: new AbortController() });
+        if (!this._curent)
+            this.__execute();
+    }
+    enque(request) {
+        const { success, error } = request;
+        return new Promise((resolve, reject) => {
+            request.success = (response) => {
+                if (success)
+                    success(response);
+                resolve(response);
+            };
+            request.error = (response, reason) => {
+                if (error)
+                    error(request, reason);
+                reject(reason);
+            };
+            this.push(request);
+        });
+    }
+    reset(cancelCurrentRequest = false) {
+        this._requests = [];
+        const current = this._curent;
+        this._curent = null;
+        if (cancelCurrentRequest && current)
+            current.abort?.abort("ResetAjaxQueue");
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this._destroyed = true;
+        this._requests = [];
+        if (this._curent) {
+            this._curent.abort?.abort("DestroyAjaxQueue");
+            this._curent = null;
+        }
+    }
+    __execute() {
+        if (this._destroyed)
+            return;
+        if (this._curent)
+            throw new Error("AjaxQueue currently is executing.");
+        const task = this._curent = this._requests.shift() ?? null;
+        if (task) {
+            if (this._options.canRequest && this._options.canRequest(task.request) === false) {
+                this.__next();
+                return;
+            }
+            task.abort = new AbortController();
+            task.xhr = request(task.request, task.abort.signal);
+            task.xhr
+                .then(response => {
+                if (this._destroyed)
+                    return;
+                if (this._options.successRequest)
+                    this._options.successRequest(task.request, response);
+            })
+                .catch(reason => {
+                if (this._destroyed)
+                    return;
+                if (this._options.errorRequest)
+                    this._options.errorRequest(task.request, reason);
+            })
+                .finally(() => this.__next());
+        }
+    }
+    __next() {
+        if (this._destroyed)
+            return;
+        this._curent = null;
+        this.__execute();
+    }
+}
+
+export { AjaxQueue, ajaxRequest, request, urlEncode };
+//# sourceMappingURL=index.js.map

package/dist/mjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,65 @@
+type AJAXMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | string;
+type AJAXReqestType = "NONE" | "JSON" | "XML" | "FORM" | "FORMDATA" | "TEXT" | "BLOB";
+type ResponseTye = "none" | "json" | "blob" | "text" | "html";
+type ResponseDelegate = (response: AjaxResponse) => void;
+type ErrorDelegate = (request: AjaxRequest, reason?: any) => void;
+type QueryData = {
+    [key: string]: string | string[];
+};
+interface AjaxRequest<TState = any> {
+    url?: string | null;
+    query?: QueryData | null;
+    method?: AJAXMethod | null;
+    timeout?: number | null;
+    headers?: {
+        [key: string]: string;
+    } | null;
+    type?: AJAXReqestType | null;
+    data?: string | object | Blob | FormData | HTMLFormElement | null;
+    success?: ResponseDelegate | null;
+    error?: ErrorDelegate | null;
+    disableCache?: boolean | null;
+    state?: TState | null;
+}
+interface AjaxResponse<TData = any, TState = any> {
+    status: number;
+    redirected: boolean;
+    url: string | null;
+    type: ResponseTye;
+    contentType: string | null;
+    headers: ResponseHeaders;
+    data: TData | null;
+    state?: TState | null;
+}
+interface ResponseHeaders {
+    get(name: string): string | null;
+    has(name: string): boolean;
+    forEach(callbackfn: (value: string, key: string, parent: ResponseHeaders) => void, thisArg?: any): void;
+}
+declare const urlEncode: (data: string, rfc3986?: boolean) => string;
+declare const ajaxRequest: (options: AjaxRequest) => XMLHttpRequest;
+declare const request: (options: AjaxRequest, abortSignal?: AbortSignal) => Promise<AjaxResponse>;
+
+interface AjaxQueueOptions {
+    canRequest?: (request: AjaxRequest) => void | boolean;
+    successRequest?: (request: AjaxRequest, response: AjaxResponse) => void;
+    errorRequest?: (response: AjaxRequest, reason?: any) => void;
+}
+declare class AjaxQueue {
+    private _options;
+    private _requests;
+    private _curent;
+    private _destroyed;
+    constructor(options?: AjaxQueueOptions);
+    get length(): number;
+    get isFree(): boolean;
+    get isEmpty(): boolean;
+    push(request: AjaxRequest): void;
+    enque(request: AjaxRequest): Promise<AjaxResponse<any, any>>;
+    reset(cancelCurrentRequest?: boolean): void;
+    destroy(): void;
+    private __execute;
+    private __next;
+}
+
+export { type AJAXMethod, type AJAXReqestType, AjaxQueue, type AjaxQueueOptions, type AjaxRequest, type AjaxResponse, type ErrorDelegate, type QueryData, type ResponseDelegate, type ResponseHeaders, type ResponseTye, ajaxRequest, request, urlEncode };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@brandup/ui-ajax",
+  "description": "Basic AJAX framework.",
+  "keywords": [
+    "brandup",
+    "typescript",
+    "ui",
+    "ajax"
+  ],
+  "author": {
+    "name": "Dmitry Kovyazin",
+    "email": "it@brandup.online"
+  },
+  "homepage": "https://github.com/brandup-online/brandup-ui/npm/brandup-ui-ajax",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brandup-online/brandup-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/brandup-online/brandup-ui/issues",
+    "email": "it@brandup.online"
+  },
+  "license": "Apache-2.0",
+  "version": "1.0.1",
+  "main": "dist/cjs/index.js",
+  "module": "dist/mjs/index.js",
+  "types": "dist/types.d.ts",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.19.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "watch": "rollup -c -w --bundleConfigAsCjs"
+  }
+}