@optionfactory/ful 0.79.0 → 0.90.0

package/dist/ful.mjs

@@ -70,171 +70,451 @@ class Hex {
     }
 }
 
-class ContextInterceptor {
-    constructor() {
-        const context = document.querySelector("meta[name='context']").getAttribute("content");
-        this.context = context.endsWith("/") ? context.substring(0, context.length - 1) : context;
+class Failure extends Error {
+    constructor(name, problems, cause) {
+        super(JSON.stringify(problems), { cause });
+        this.name = name;
+        this.problems = problems;
     }
-    async intercept(request, chain){
-        const separator = request.resource.startsWith("/") ? "" : "/";
-        request.resource = this.context + separator + request.resource;
-        return await chain.proceed(request);
+}
+
+class HttpClientError extends Failure {
+    constructor(status, problems, cause) {
+        super(`HttpClientError:${status}`, problems, cause);
+        this.status = status;
+    }
+    static of(type, cause) {
+        return new HttpClientError(0, [{
+            type,
+            context: null,
+            reason: cause.message,
+            details: null
+        }], cause);
+    }
+    /**
+     * Creates an HttpClientError from a Response.
+     * @param {Response} response 
+     * @returns an HttpClientError
+     */
+    static async fromResponse(response) {
+        const text = await response.text();
+        const def = [{
+            type: "GENERIC_PROBLEM",
+            context: null,
+            reason: `${response.status} ${response.statusText}: ${text}`,
+            details: null
+        }];
+        try {
+            return new HttpClientError(response.status, text ? JSON.parse(text) : def);
+        } catch (e) {
+            return new HttpClientError(response.status, def);
+        }
     }
 }
 
 class CsrfTokenInterceptor {
+    #k; #v;
     constructor() {
-        this.k = document.querySelector("meta[name='_csrf_header']").getAttribute("content");
-        this.v = document.querySelector("meta[name='_csrf']").getAttribute("content");
+        this.#k = document.querySelector("meta[name='_csrf_header']").getAttribute("content");
+        this.#v = document.querySelector("meta[name='_csrf']").getAttribute("content");
     }
-    async intercept(request, chain){
-        const headers = new Headers(request.options.headers);
-        headers.set(this.k, this.v);
-        request.options.headers = headers;
+    async intercept(request, chain) {
+        request.headers.set(this.#k, this.#v);
         return await chain.proceed(request);
     }
 }
 
 class RedirectOnUnauthorizedInterceptor {
+    #redirectUri;
     constructor(redirectUri) {
-        this.redirectUri = redirectUri;
+        this.#redirectUri = redirectUri;
     }
-    async intercept(request, chain){
-        const response =  await chain.proceed(request);
+    async intercept(request, chain) {
+        const response = await chain.proceed(request);
         if (response.status !== 401) {
             return response;
         }
-        window.location.href = this.redirectUri;
-    }
-}
-
-class Failure extends Error {
-    static parseProblems(status, text) {
-        const def = [{
-                type: "GENERIC_PROBLEM",
-                context: null,
-                reason: `${status}: ${text}`,
-                details: null
-            }];
-        try {
-            return text ? JSON.parse(text) : def;
-        } catch (e) {
-            return def;
-        }
-    }
-    static fromResponse(status, text) {
-        return new Failure(status, Failure.parseProblems(status, text));
-    }
-    constructor(status, problems) {
-        super(JSON.stringify(problems));
-        this.name = `Failure:${status}`;
-        this.status = status;
-        this.problems = problems;
+        window.location.href = this.#redirectUri;
     }
 }
 
 class HttpClientBuilder {
+    #interceptors;
     constructor() {
-        this.interceptors = [];
-    }
-    withContext() {
-        this.interceptors.push(new ContextInterceptor());
-        return this;
+        this.#interceptors = [];
     }
     withCsrfToken() {
-        this.interceptors.push(new CsrfTokenInterceptor());
+        this.#interceptors.push(new CsrfTokenInterceptor());
         return this;
     }
     withRedirectOnUnauthorized(redirectUri) {
-        this.interceptors.push(new RedirectOnUnauthorizedInterceptor(redirectUri));
+        this.#interceptors.push(new RedirectOnUnauthorizedInterceptor(redirectUri));
         return this;
     }
     withInterceptors(...interceptors) {
-        this.interceptors.push(...interceptors);
+        this.#interceptors.push(...interceptors);
         return this;
     }
     build() {
-        const interceptors = this.interceptors;
-        return new HttpClient({interceptors});
+        return new HttpClient(this.#interceptors);
     }
 }
 
 class HttpCall {
-    async intercept(request, chain){
-        return await fetch(request.resource, request.options);
-    }    
+    /**
+     * 
+     * @async
+     * @param {Request} request 
+     * @param {HttpInterceptorChain} chain 
+     * @returns {Promise<Response>} the response
+     */
+    async intercept(request, chain) {
+        return await fetch(request);
+    }
 }
 
 class HttpInterceptorChain {
-    constructor(interceptors, current){
+    constructor(interceptors, current) {
         this.interceptors = interceptors;
         this.current = current;
     }
-    async proceed(request){
+    async proceed(request) {
         const interceptor = this.interceptors[this.current];
         return await interceptor.intercept(request, new HttpInterceptorChain(this.interceptors, this.current + 1));
     }
 }
 
-
 class HttpClient {
+    #interceptors;
+    /**
+     * Creates a builder for an HttpClient.
+     * @returns {HttpRequestBuilder} the client builder
+     */
     static builder() {
         return new HttpClientBuilder();
     }
-    constructor({interceptors}){
-        this.interceptors = interceptors || [];
+    /**
+     * Creates an HttpClient.
+     * @returns {[HttpInterceptor]} interceptors - a list of interceptors to be registered for every request performed by the created client. 
+     */
+    constructor(interceptors) {
+        this.#interceptors = interceptors || [];
+    }
+    /**
+     * Performs an HTTP exchange.
+     * @async
+     * @param {string} uri - the (possibly relative) request url
+     * @param {RequestInit|undefined} options - fetch options
+     * @param {[any]|undefined} interceptors - the HttpInterceptors to be registered for this request.
+     * @returns {Promise<Response>} the response
+     */
+    async exchange(uri, options, interceptors) {
+        const is = [...this.#interceptors, ...interceptors || [], new HttpCall()];
+        const chain = new HttpInterceptorChain(is, 0);
+        return await chain.proceed(new Request(uri, options));
     }
-    async exchange(resource, options) {
-        const opts = options || {};
-        const interceptors = [...this.interceptors, ...opts.interceptors || [], new HttpCall()];
-        const chain = new HttpInterceptorChain(interceptors, 0);
-        return await chain.proceed({resource, options: opts});
+    /**
+     * Creates a request builder.
+     * @param {string} method - the HTTP method to be used
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    request(method, uri) {
+        return HttpRequestBuilder.create(this, method, uri);
     }
-    async fetch(resource, options) {
-        const response = await this.exchange(resource, options);
-        if (!response.ok) {
-            const message = await response.text();
-            throw Failure.fromResponse(response.status, message);
-        }        
-        return response;
+    /**
+     * Creates a request builder.
+     * @param {string} uri - the (possibly relative) request url 
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    get(uri) {
+        return HttpRequestBuilder.create(this, 'GET', uri);
+    }
+    /**
+     * Creates a request builder.
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    head(uri) {
+        return HttpRequestBuilder.create(this, 'HEAD', uri);
+    }
+    /**
+     * Creates a request builder.
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    post(uri) {
+        return HttpRequestBuilder.create(this, 'POST', uri);
+    }
+    /**
+     * Creates a request builder.
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    put(uri) {
+        return HttpRequestBuilder.create(this, 'PUT', uri);
+    }
+    /**
+     * Creates a request builder.
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    patch(uri) {
+        return HttpRequestBuilder.create(this, 'PATCH', uri);
+    }
+    /**
+     * Creates a request builder.
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the request builder
+     */
+    delete(uri) {
+        return HttpRequestBuilder.create(this, 'DELETE', uri);
+    }
+}
+
+
+const unmarshal = async (response, type) => {
+    try {
+        return await response[type]();
+    } catch (e) {
+        throw HttpClientError.of("UNMARSHALING_PROBLEM", e);
+    }
+};
+
+
+class HttpRequestBuilder {
+    #client;
+    #method;
+    #uri;
+    #params;
+    #headers;
+    #body;
+    #options;
+    #interceptors;
+    /**
+     * Creates an HttpRequestBuilder.
+     * @param {HttpClient} client 
+     * @param {string} method - the HTTP method to be used
+     * @param {string} uri - the (possibly relative) request url
+     * @returns {HttpRequestBuilder} the builder
+     */
+    static create(client, method, uri) {
+        return new HttpRequestBuilder(
+            client,
+            method,
+            uri,
+            new URLSearchParams(),
+            new Headers(),
+            undefined,
+            {},
+            []
+        );
+    }
+    /**
+     * Creates an HttpRequestBuilder.
+     * @param {HttpClient} client 
+     * @param {string} method - the HTTP method to be used
+     * @param {string} uri - the (possibly relative) request url
+     * @param {URLSearchParams} params 
+     * @param {Headers} headers 
+     * @param {any} body 
+     * @param {Omit<RequestInit,"headers"|"method"|"body">} options 
+     * @param {[HttpInterceptor]} interceptors 
+     */
+    constructor(client, method, uri, params, headers, body, options, interceptors) {
+        this.#client = client;
+        this.#method = method;
+        this.#uri = uri;
+        this.#params = params;
+        this.#body = body;
+        this.#headers = headers;
+        this.#options = options;
+        this.#interceptors = interceptors;
     }
-    async json(resource, options) {
+    /**
+     * Add all passed headers to the request, overriding existing ones if that key already exists.
+     * @param {headersInit} hs 
+     * @returns {HttpRequestBuilder} this builder
+     */
+    headers(hs) {
+        for (const [k, v] of new Headers(hs).entries()) {
+            this.#headers.set(k, v);
+        }
+        return this;
+    }
+    /**
+     * Adds an header to the request, overriding it if it already exists.
+     * @param {string} k 
+     * @param {string} v 
+     * @returns {HttpRequestBuilder} this builder
+     */
+    header(k, v) {
+        this.#headers.set(k, v);
+        return this;
+    }
+    /**
+     * Add all query parameters to the request, overriding existing ones if that key already exists.
+     * @param {URLSearchParams|Record<string,string>|string[][]|string} ps 
+     * @returns {HttpRequestBuilder} this builder
+     */
+    params(ps) {
+        for (const [k, v] of new URLSearchParams(ps).entries()) {
+            this.#params.set(k, v);
+        }
+        return this;
+    }
+    /**
+     * Adds a query parameter to the request, overriding it if it already exists.
+     * @param {string} k 
+     * @param {string} v 
+     * @returns {HttpRequestBuilder} this builder
+     */
+    param(k, v) {
+        this.#params.set(k, v);
+        return this;
+    }
+    /**
+     * Sets the request body. 
+     * `Content-Type: multipart/form-data` header is automatically added by fetch when data is a FormData instance if not explicitly set.
+     * `Content-Type: application/x-www-form-urlencoded` header is automatically added by fetch when data is an URLSearchParams instance if not explicitly set.
+     * `Content-Type: text/plain` header is automatically added by fetch when data is a string instance if not explicitly set.
+     * @param {string|ArrayBuffer|Blob|DataView|File|FormData|TypedArray|URLSearchParams|ReadableStream} data 
+     * @returns {HttpRequestBuilder} this builder
+     */
+    body(data) {
+        this.#body = data;
+        return this;
+    }
+    /**
+     * Sets the request body that will be serialized as json. Calling this method adds the `Content-Type application/json` header for the request.
+     * @param {any} body - the body to be serialized as json
+     * @returns {HttpRequestBuilder} this builder
+     */
+    json(body) {
+        this.#headers.set("Content-Type", "application/json");
+        this.#body = JSON.stringify(body);
+        return this;
+    }
+    /**
+     * Sets a fetch options for the request.
+     * @param {Omit<RequestInit,"headers"|"method"|"body">} kvs
+     * @returns {HttpRequestBuilder} this builder
+     */
+    options(kvs) {
+        for (const [k, v] of Object.entries(kvs)) {
+            this.#options[k] = v;
+        }
+        return this;
+    }
+    /**
+     * Sets a fetch option for the request.
+     * @param {keyof Omit<RequestInit,"headers"|"method"|"body">} k 
+     * @param {*} v 
+     * @returns {HttpRequestBuilder} this builder
+     */
+    option(k, v) {
+        this.#options[k] = v;
+        return this;
+    }
+    /**
+     * Adds interceptors to the request.
+     * @param {[HttpInterceptor]} is - the interceptor to be regisered
+     * @returns {HttpRequestBuilder} this builder
+     */
+    interceptors(is) {
+        for (const i of is) {
+            this.#interceptors.push(i);
+        }
+        return this;
+    }
+    /**
+     * Adds an interceptor to the request.
+     * @param {HttpInterceptor} i - the interceptor to be regisered
+     * @returns {HttpRequestBuilder} this builder
+     */
+    interceptor(i) {
+        this.#interceptors.push(i);
+        return this;
+    }
+    /**
+     * Performs an HTTP exchange using the configured client, request and interceptors.
+     * @returns {Promise<Response>} the response
+     */
+    async exchange() {
+        const uri = this.#params.size ? `${this.#uri}?${this.#params}` : this.#uri;
+        const opts = {
+            ...this.#options,
+            headers: this.#headers,
+            method: this.#method,
+            body: this.#body,
+        };
+        return await this.#client.exchange(uri, opts, this.#interceptors);
+    }
+    /**
+     * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+     * @returns {Promise<Response>} the response
+     */
+    async fetch() {
+        const uri = this.#params.size ? `${this.#uri}?${this.#params}` : this.#uri;
+        const opts = {
+            ...this.#options,
+            headers: this.#headers,
+            method: this.#method,
+            body: this.#body,
+        };
         try {
-            const response = await this.fetch(resource, options);
-            const text = await response.text();
-            return text ? JSON.parse(text) : undefined;
+            const response = await this.#client.exchange(uri, opts, this.#interceptors);
+            if (!response.ok) {
+                throw await HttpClientError.fromResponse(response);
+            }
+            return response;
         } catch (e) {
             if (e instanceof Failure) {
                 throw e;
             }
-            throw new Failure(0, [{
-                    type: "CONNECTION_PROBLEM",
-                    context: null,
-                    reason: e.message,
-                    details: null
-                }]);
+            throw HttpClientError.of("CONNECTION_PROBLEM", e);
         }
     }
-}
-
-function jsonRequest(method, body, headers){
-    return {
-        headers: {
-            "Content-Type": "application/json",
-            ...headers
-        },
-        method: method,
-        body: JSON.stringify(body)        
+    /**
+     * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+     * @returns {Promise<string>} the response body, as text
+     */
+    async fetchText() {
+        const response = await this.fetch();
+        return await unmarshal(response, 'text');
+    }
+    /**
+     * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+     * @returns {Promise<any>} the response body, deserialized as JSON
+     */
+    async fetchJson() {
+        const response = await this.fetch();
+        return await unmarshal(response, 'json');
+    }
+    /**
+     * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+     * @returns {Promise<Uint8Array>} the response body, as an Uint8Array
+     */
+    async fetchBytes() {
+        const response = await this.fetch();
+        return await unmarshal(response, 'bytes');
+    }
+    /**
+     * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+     * @returns {Promise<Blob>} the response body, as a Blob
+     */
+    async fetchBlob() {
+        const response = await this.fetch();
+        return await unmarshal(response, 'blob');
+    }
+    /**
+     * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+     * @returns {Promise<ArrayBuffer>} the response body, as an ArrayBuffer
+     */
+    async fetchArrayBuffer() {
+        const response = await this.fetch();
+        return await unmarshal(response, 'arrayBuffer');
     }
-}
-function jsonPost(body, headers){
-    return jsonRequest('POST', body, headers);
-}
-function jsonPut(body, headers){
-    return jsonRequest('PUT', body, headers);
-}
-function jsonPatch(body, headers){
-    return jsonRequest('PATCH', body, headers);
 }
 
 class Storage {
@@ -388,10 +668,10 @@ AuthorizationCodeFlow.PKCE_AND_STATE_KEY = "state-and-verifier";
 class AuthorizationCodeFlowSession {
     static parseToken(token) {
         const [rawHeader, rawPayload, signature] = token.split(".");
-        const ut8decoder = new TextDecoder("utf-8");
+        const utf8decoder = new TextDecoder("utf-8");
         return {
-            header: JSON.parse(ut8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
-            payload: JSON.parse(ut8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
+            header: JSON.parse(utf8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
+            payload: JSON.parse(utf8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
             signature: signature
         };
     }    
@@ -419,7 +699,8 @@ class AuthorizationCodeFlowSession {
             ])
         });
         if (!response.ok) {
-            throw new Error("Error:" + response.status + ": " + response.text());
+            const text = await response.text();
+            throw new Error("Error:" + response.status + ": " + text);
         }
         const token = await response.json();
         this.token = token;
@@ -459,18 +740,19 @@ class AuthorizationCodeFlowSession {
 }
 
 class AuthorizationCodeFlowInterceptor {
+    #session;
+    #gracePeriodBefore;
+    #gracePeriodAfter;
     constructor(session, gracePeriodBefore, gracePeriodAfter) {
-        this.session = session;
-        this.gracePeriodBefore = gracePeriodBefore || 2000;
-        this.gracePeriodAfter = gracePeriodAfter || 30000;
+        this.#session = session;
+        this.#gracePeriodBefore = gracePeriodBefore || 2000;
+        this.#gracePeriodAfter = gracePeriodAfter || 30000;
     }
     async intercept(request, chain) {
-        await this.session.refreshIf(this.gracePeriodBefore);
-        const headers = new Headers(request.options.headers);
-        headers.set("Authorization", this.session.bearerToken());
-        request.options.headers = headers;
+        await this.#session.refreshIf(this.#gracePeriodBefore);
+        request.headers.set("Authorization", this.#session.bearerToken());
         const response = await chain.proceed(request);
-        await this.session.refreshIf(this.gracePeriodAfter);
+        await this.#session.refreshIf(this.#gracePeriodAfter);
         return response;
     }
 }
@@ -922,8 +1204,6 @@ const ParsedElement = (conf) => {
     return k;
 };
 
-/* global Infinity, CSS */
-
 function flatten(obj, prefix) {
     return Object.keys(obj).reduce((acc, k) => {
         const pre = prefix.length ? prefix + '.' : '';
@@ -1081,7 +1361,7 @@ class Form extends ParsedElement() {
         if (!this.hasAttribute('scroll-on-error')) {
             return;
         }
-        const ys = Array.from(this.querySelectorAll(`[ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
+        const ys = Array.from(this.querySelectorAll(`ful-errors:not([hidden]), [ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
             .map(el => el.parentElement ? el.parentElement : el)
             .map(el => el.getBoundingClientRect().y + window.scrollY);
         const miny = Math.min(...ys);
@@ -1344,5 +1624,5 @@ class Spinner extends ParsedElement({
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Deferred, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, TemplatesRegistry, VersionedStorage, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Deferred, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, HttpClientError, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, TemplatesRegistry, VersionedStorage, elements, makeInputFragment, timing };
 //# sourceMappingURL=ful.mjs.map