@brandup/ui-app 1.0.44 → 2.0.2

package/dist/mjs/index.js

@@ -1,760 +1,8 @@
-import { UIElement } from '@brandup/ui';
-import { Guid } from '@brandup/ui-helpers';
-
-class MiddlewareInvoker {
-    middleware;
-    __next;
-    constructor(middleware) {
-        this.middleware = middleware;
-    }
-    next(middleware) {
-        if (this.__next)
-            this.__next.next(middleware);
-        else
-            this.__next = new MiddlewareInvoker(middleware);
-    }
-    invoke(method, context) {
-        return this.__exec(method, context);
-    }
-    async __exec(method, context) {
-        const nextFunc = () => this.__next ? this.__next.__exec(method, context) : Promise.resolve();
-        context.abort.throwIfAborted();
-        const methodFunc = this.middleware[method];
-        if (typeof methodFunc === "function") {
-            const methodResult = methodFunc.call(this.middleware, context, nextFunc);
-            if (!methodResult || !(methodResult instanceof Promise))
-                throw new Error(`Middleware "${this.middleware.name}" method "${method}" is not async.`);
-            await methodResult;
-        }
-        else
-            await nextFunc();
-    }
-}
-
-const result = {
-    LoadingElementClass: "loading",
-    NavUrlClassName: "applink",
-    FormClassName: "appform",
-    NavUrlAttributeName: "data-nav-url",
-    NavUrlReplaceAttributeName: "data-nav-replace",
-    NavUrlScopeAttributeName: "data-nav-scope",
-    NavIgnoreAttributeName: "data-nav-ignore",
-    STATE_CLASS: {
-        LOADING: "bp-state-loading",
-        LOADED: "bp-state-loaded",
-        READY: "bp-state-ready"
-    }
-};
-
-var constants = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: result
-});
-
-const STATE_MIDDLEWARE_NAME = "app-state";
-const StateMiddlewareFactory = () => {
-    let counter = 0;
-    const begin = (context) => {
-        const prev = counter++;
-        if (prev === 0) {
-            context.app.element?.classList.remove(result.STATE_CLASS.LOADED);
-            context.app.element?.classList.add(result.STATE_CLASS.LOADING);
-        }
-    };
-    const end = (context) => {
-        counter--;
-        if (counter <= 0) {
-            counter = 0;
-            context.app.element?.classList.add(result.STATE_CLASS.LOADED);
-            context.app.element?.classList.remove(result.STATE_CLASS.LOADING);
-        }
-    };
-    return {
-        name: STATE_MIDDLEWARE_NAME,
-        start: async (context, next) => {
-            begin(context);
-            try {
-                await next();
-                // on success the begin() is left open on purpose: the loading state
-                // must persist through "loaded" and the first navigation, which closes
-                // it (see the "first" branch in navigate). On error we close it here.
-            }
-            catch (reason) {
-                end(context);
-                throw reason;
-            }
-        },
-        loaded: async (context, next) => {
-            try {
-                await next();
-                context.app.element?.classList.add(result.STATE_CLASS.READY);
-            }
-            catch (reason) {
-                end(context);
-                throw reason;
-            }
-        },
-        navigate: async (context, next) => {
-            begin(context);
-            try {
-                await next();
-            }
-            finally {
-                end(context); // close the begin() of this navigation
-                // the first navigation also closes the loading opened by start(),
-                // which intentionally leaves its begin() open until the page is rendered
-                if (context.source == "first")
-                    end(context);
-            }
-        },
-        submit: async (context, next) => {
-            begin(context);
-            try {
-                await next();
-            }
-            finally {
-                end(context);
-            }
-        },
-        stop: async (_context, next) => {
-            await next();
-        }
-    };
-};
-
-const HYPERLINK_MIDDLEWARE_NAME = "app-hyperlink";
-const HyperLinkMiddlewareFactory = () => {
-    let onClick;
-    return {
-        name: HYPERLINK_MIDDLEWARE_NAME,
-        start: async (context, next) => {
-            await next();
-            window.addEventListener("click", onClick = (e) => {
-                let elem = e.target;
-                let ignore = false;
-                while (elem) {
-                    if (elem instanceof HTMLElement) {
-                        if (elem.hasAttribute(result.NavIgnoreAttributeName)) {
-                            ignore = true;
-                            break;
-                        }
-                        if (elem.classList.contains(result.NavUrlClassName) || elem.hasAttribute(result.NavUrlAttributeName))
-                            break;
-                    }
-                    if (elem === e.currentTarget)
-                        return;
-                    elem = elem.parentElement;
-                }
-                if (!elem || e.ctrlKey || e.metaKey || elem.getAttribute("target") === "_blank")
-                    return;
-                e.preventDefault();
-                e.stopPropagation();
-                if (ignore)
-                    return;
-                let url;
-                if (elem.tagName === "A")
-                    url = elem.getAttribute("href");
-                else if (elem.hasAttribute(result.NavUrlAttributeName))
-                    url = elem.getAttribute(result.NavUrlAttributeName);
-                else
-                    throw "Not found url for navigation.";
-                if (elem.classList.contains(result.LoadingElementClass))
-                    return;
-                elem.classList.add(result.LoadingElementClass);
-                context.app
-                    .nav({
-                    url,
-                    replace: elem.hasAttribute(result.NavUrlReplaceAttributeName),
-                    scope: elem.getAttribute(result.NavUrlScopeAttributeName),
-                    data: { clickElem: elem }
-                })
-                    .catch(() => { })
-                    .finally(() => elem.classList.remove(result.LoadingElementClass));
-            }, false);
-        },
-        stop: (_context, next) => {
-            window.removeEventListener("click", onClick, false);
-            return next();
-        }
-    };
-};
-
-const parseUrl = (basePath, url) => {
-    const loc = window.location;
-    let origin = loc.origin;
-    let path;
-    let query = null;
-    let hash = null;
-    let isExternal = false;
-    if (basePath === '/')
-        basePath = '';
-    if (!url) {
-        path = loc.pathname;
-        if (loc.search)
-            query = new URLSearchParams(loc.search);
-        if (loc.hash)
-            hash = loc.hash;
-    }
-    else {
-        if (url.startsWith("#")) {
-            path = loc.pathname;
-            query = new URLSearchParams(loc.search);
-            hash = url;
-        }
-        else if (url.startsWith("?")) {
-            const hastIndex = url.lastIndexOf("#");
-            if (hastIndex !== -1) {
-                hash = url.substring(hastIndex);
-                url = url.substring(0, hastIndex);
-            }
-            path = loc.pathname;
-            query = new URLSearchParams(url);
-        }
-        else if (url.startsWith("http")) {
-            const u = new URL(url);
-            if (u.origin != origin) {
-                origin = u.origin;
-                isExternal = true;
-            }
-            path = u.pathname;
-            query = u.searchParams;
-            hash = u.hash || null;
-        }
-        else {
-            const hastIndex = url.lastIndexOf("#");
-            if (hastIndex !== -1) {
-                hash = url.substring(hastIndex);
-                url = url.substring(0, hastIndex);
-            }
-            const queryIndex = url.lastIndexOf("?");
-            if (queryIndex !== -1) {
-                query = new URLSearchParams(url.substring(queryIndex));
-                url = url.substring(0, queryIndex);
-            }
-            path = url;
-            if (!path.startsWith("/")) {
-                let curPath = loc.pathname;
-                if (curPath.endsWith("/"))
-                    curPath = curPath.substring(0, curPath.length - 1);
-                path = curPath + "/" + path;
-            }
-        }
-    }
-    if (!path)
-        path = '/';
-    else if (path.length > 1 && path.endsWith('/'))
-        path = path.substring(0, path.length - 1);
-    path = path.toLowerCase();
-    if (basePath) {
-        if (path.startsWith(basePath.toLowerCase())) {
-            path = path.substring(basePath.length);
-            if (!path)
-                path = '/';
-        }
-        else
-            basePath = '';
-    }
-    if (!query)
-        query = new URLSearchParams();
-    if (hash === '#')
-        hash = null;
-    else if (hash)
-        hash = hash.substring(1);
-    var result = {
-        full: '',
-        url: '',
-        relative: '',
-        origin,
-        basePath,
-        path,
-        query,
-        hash,
-        external: isExternal
-    };
-    rebuildUrl(result);
-    return result;
-};
-/**
- * Add or replace query parameters.
- * @param url Source url for extending query.
- * @param query New or update parameters.
- */
-const extendQuery = (url, query) => {
-    if (query instanceof URLSearchParams) {
-        query.forEach((_v, k) => url.query.delete(k));
-        query.forEach((v, k) => url.query.append(k, v));
-    }
-    else if (query instanceof FormData) {
-        query.forEach((_v, k) => url.query.delete(k));
-        query.forEach((v, k) => url.query.append(k, v.toString()));
-    }
-    else {
-        for (const key in query) {
-            const value = query[key];
-            if (!Array.isArray(value)) {
-                url.query.set(key, value);
-            }
-            else {
-                url.query.delete(key);
-                value.forEach(val => url.query.append(key, val));
-            }
-        }
-    }
-    rebuildUrl(url);
-};
-const rebuildUrl = (parsedUrl) => {
-    let relativeUrl = parsedUrl.basePath + parsedUrl.path;
-    if (relativeUrl.length > 1 && relativeUrl.endsWith('/'))
-        relativeUrl = relativeUrl.substring(0, relativeUrl.length - 1);
-    if (parsedUrl.query.size)
-        relativeUrl += "?" + parsedUrl.query.toString();
-    parsedUrl.url = parsedUrl.origin + relativeUrl;
-    parsedUrl.relative = relativeUrl;
-    parsedUrl.full = parsedUrl.hash ? `${parsedUrl.url}#${parsedUrl.hash}` : parsedUrl.url;
-};
-const buildUrl = (basePath, path, query, hash) => {
-    let url = basePath;
-    if (url == '/')
-        url = '';
-    if (path) {
-        if (!path.startsWith("/"))
-            path = '/' + path;
-        url += path;
-    }
-    if (!url)
-        url = '/';
-    else if (url.endsWith('/'))
-        url = url.substring(0, url.length - 1);
-    if (query) {
-        let params;
-        if (query instanceof URLSearchParams)
-            params = query;
-        else if (query instanceof FormData) {
-            params = new URLSearchParams();
-            query.forEach((value, key) => params.append(key, value.toString()));
-        }
-        else {
-            params = new URLSearchParams();
-            for (const key in query) {
-                const value = query[key];
-                if (value === null || typeof value === "undefined")
-                    continue;
-                if (Array.isArray(value))
-                    value.forEach(v => params.append(key, v));
-                else
-                    params.append(key, value);
-            }
-        }
-        if (params.size)
-            url += "?" + params.toString();
-    }
-    if (hash) {
-        if (!hash.startsWith("#"))
-            hash = "#" + hash;
-        if (hash != "#")
-            url += hash;
-    }
-    return url;
-};
-var urlHelper = {
-    parseUrl,
-    extendQuery,
-    buildUrl
-};
-
-var url = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: urlHelper
-});
-
-const APP_TYPENAME = "brandup-ui-app";
-const NAV_OVERIDE_ERROR = "NavigationOveride";
-/**
- * Base application class.
- */
-class Application extends UIElement {
-    /** Application environment. */
-    env;
-    /** Application model. */
-    model;
-    /** Application middleware invoker. */
-    invoker;
-    __abort;
-    __isInited;
-    __isRuned;
-    __middlewares = {};
-    __globalSubmit;
-    __execNav; // current navigation invoking
-    __lastNav; // last success navigation
-    constructor(env, model, ..._args) {
-        super();
-        this.env = env;
-        this.model = model;
-        const core = { name: "app-root" };
-        this.invoker = new MiddlewareInvoker(core);
-        this.__abort = new AbortController();
-    }
-    get typeName() { return APP_TYPENAME; }
-    /** Current navigation context. */
-    get current() { return this.__lastNav?.context; }
-    /** Application destroy signal. */
-    get abort() { return this.__abort.signal; }
-    /** @internal */
-    initialize(middlewares) {
-        if (this.__isInited)
-            throw new Error('Application already initialized.');
-        this.__isInited = true;
-        this.onInitialize();
-        middlewares.forEach(middleware => {
-            const name = middleware.name;
-            if (this.__middlewares.hasOwnProperty(name))
-                throw new Error(`Middleware "${name}" already registered.`);
-            this.__middlewares[name] = middleware;
-            this.invoker.next(middleware);
-        });
-    }
-    /** Initialize application instance. */
-    onInitialize() {
-        this.invoker.next(StateMiddlewareFactory());
-        this.invoker.next(HyperLinkMiddlewareFactory());
-    }
-    /** Begin run application. */
-    onStarting() { return Promise.resolve(); }
-    /** Complate run application. */
-    onStared() { return Promise.resolve(); }
-    /**
-     * Get middleware by type.
-     * @param type Type of middleware.
-     * @returns Middleware instance.
-     */
-    middleware(name) {
-        this.__abort.signal.throwIfAborted();
-        const middleware = this.__middlewares[name];
-        if (!middleware)
-            throw new Error(`Middleware ${name} is not registered.`);
-        return middleware;
-    }
-    /**
-     * Run application.
-     * @param contextData Run context data.
-     * @param element HTMLElement of application. Default is document.body.
-     * @returns Promise of runned result.
-     */
-    async run(contextData, element) {
-        if (this.__abort.signal.aborted)
-            throw new Error('Application is destroyed.');
-        if (this.__isRuned)
-            throw new Error('Application already run.');
-        this.__isRuned = true;
-        if (!contextData)
-            contextData = {};
-        element = element || document.body;
-        this.setElement(element);
-        const context = {
-            abort: this.__abort.signal,
-            app: this,
-            data: contextData
-        };
-        try {
-            await this.onStarting();
-            await this.invoker.invoke("start", context);
-            console.info("app start success");
-            this.__abort.signal.throwIfAborted();
-            await this.invoker.invoke("loaded", context);
-            console.info("app load success");
-            this.__abort.signal.throwIfAborted();
-            window.addEventListener("popstate", (e) => this.__onPopState(context, e));
-            element.addEventListener("submit", this.__globalSubmit = (e) => {
-                const form = e.target;
-                if (!form.classList.contains(result.FormClassName))
-                    return;
-                e.preventDefault();
-                this.__onSubmit({ form, button: e.submitter instanceof HTMLButtonElement ? e.submitter : null })
-                    .catch(() => { });
-            }, false);
-            await this.onStared();
-            console.info("app runned");
-        }
-        catch (reason) {
-            console.error(`app run error: ${reason}`);
-            throw reason;
-        }
-        try {
-            await this.nav({ data: context.data, abort: this.__abort.signal });
-        }
-        catch (reason) {
-            if (reason === NAV_OVERIDE_ERROR) {
-                console.info(`app run nav overided`);
-                return context;
-            }
-            throw reason;
-        }
-        return context;
-    }
-    /**
-     * Navigate application to url.
-     * @param options Navigate options.
-     * @returns Promise of navigated result.
-     */
-    async nav(options) {
-        const opt = (!options || typeof options === "string") ? { url: options } : options;
-        let { url = null, query, replace = false, scope = null, data = {}, abort } = opt;
-        const navUrl = urlHelper.parseUrl(this.env.basePath, url);
-        if (query)
-            urlHelper.extendQuery(navUrl, query);
-        let isFirst = !this.__lastNav && !this.__execNav;
-        let action;
-        if (isFirst)
-            action = "first";
-        else {
-            const isChangedUrl = this.__lastNav?.context.url.toLowerCase() !== navUrl.url.toLowerCase();
-            const hasHash = !!this.__lastNav?.context.hash || !!navUrl.hash;
-            if (isChangedUrl)
-                action = "url-change"; // если изменился url
-            else
-                action = hasHash ? "hash" : "url-no-change";
-        }
-        const base = this.__beginNav(abort);
-        const context = {
-            ...this.__createContext(base, navUrl, isFirst ? "first" : "nav", action, data, replace),
-            scope
-        };
-        const currentNav = { method: "navigate", context, abort: base.navAbort, status: "work" };
-        return await this.__execNavigate(currentNav, base.parentNav);
-    }
-    /**
-     * Reload page with nav.
-     */
-    reload() {
-        this.__abort.signal.throwIfAborted();
-        return this.nav({ replace: true });
-    }
-    /**
-     * Global reload page in browser.
-     */
-    restart() {
-        this.__abort.signal.throwIfAborted();
-        window.location.reload();
-    }
-    async destroy(contextData) {
-        if (this.__abort.signal.aborted)
-            return Promise.reject('Application already destroyed.');
-        this.__abort.abort();
-        console.info("app destroy begin");
-        if (this.__execNav)
-            this.__execNav.abort.abort();
-        if (this.__lastNav)
-            this.__lastNav.abort.abort();
-        if (this.__globalSubmit)
-            this.element?.removeEventListener("submit", this.__globalSubmit);
-        const destroyAbort = new AbortController();
-        const context = {
-            abort: destroyAbort.signal,
-            app: this,
-            data: contextData || {}
-        };
-        try {
-            await this.invoker.invoke("stop", context);
-            console.info("app destroy success");
-            return context;
-        }
-        catch (reason) {
-            console.error(`app destroy error: ${reason}`);
-            throw reason;
-        }
-        finally {
-            super.destroy();
-        }
-    }
-    /**
-     * Generate url of application base url.
-     * @param path Add optional path of base url.
-     * @param query Add optional query params.
-     * @param hash Add optional hash.
-     * @returns Relative url with base path.
-     */
-    buildUrl(path, query, hash) {
-        this.__abort.signal.throwIfAborted();
-        return urlHelper.buildUrl(this.env.basePath, path, query, hash);
-    }
-    async __onSubmit(options) {
-        const opt = options instanceof HTMLFormElement ? { form: options } : options;
-        const { form, button = null, query, data = {} } = opt;
-        if ((!button || !button.formNoValidate) && !form.checkValidity())
-            throw new Error('Form is invalid.');
-        let replace = form.hasAttribute(result.NavUrlReplaceAttributeName);
-        let method = form.method;
-        let enctype = form.enctype;
-        let url = form.action;
-        if (button) {
-            if (button.hasAttribute("formmethod"))
-                method = button.formMethod;
-            if (button.hasAttribute("formenctype"))
-                enctype = button.formEnctype;
-            if (button.hasAttribute("formaction"))
-                url = button.formAction;
-            button.classList.add(result.LoadingElementClass);
-            if (button.hasAttribute(result.NavUrlReplaceAttributeName))
-                replace = true;
-        }
-        if (form.classList.contains(result.LoadingElementClass))
-            throw new Error('Form already submitting.');
-        form.classList.add(result.LoadingElementClass);
-        method = method.toUpperCase();
-        try {
-            if (method === "GET")
-                await this.nav({ url, query: new FormData(form), data: data, replace, abort: opt.abort });
-            else {
-                const navUrl = urlHelper.parseUrl(this.env.basePath, url);
-                if (query)
-                    urlHelper.extendQuery(navUrl, query);
-                const base = this.__beginNav(opt.abort);
-                const context = {
-                    ...this.__createContext(base, navUrl, "submit", "submit", data, replace),
-                    form,
-                    button,
-                    method,
-                    enctype
-                };
-                const currentNav = { method: "submit", context, abort: base.navAbort, status: "work" };
-                await this.__execNavigate(currentNav);
-            }
-        }
-        finally {
-            form.classList.remove(result.LoadingElementClass);
-            if (button)
-                button.classList.remove(result.LoadingElementClass);
-        }
-    }
-    __onPopState(_context, event) {
-        const popUrl = location.href;
-        console.log(`popstate: ${popUrl}`, event.state);
-        this.nav({ url: popUrl, data: { popstate: event.state } });
-    }
-    /** Detect parent (overriding) navigation and compose the abort signal shared by a new navigation. */
-    __beginNav(abort) {
-        let parentNav;
-        if (this.__execNav && this.__execNav.status === "work") {
-            parentNav = this.__execNav;
-            parentNav.abort.abort(NAV_OVERIDE_ERROR);
-            parentNav.context.overided = true;
-        }
-        const navAbort = new AbortController();
-        const aborts = [this.__abort.signal, navAbort.signal];
-        if (abort)
-            aborts.push(abort);
-        return { parentNav, navAbort, abort: AbortSignal.any(aborts) };
-    }
-    /** Build the navigation context fields shared by nav and submit. */
-    __createContext(base, navUrl, source, action, data, replace) {
-        const { parentNav, abort } = base;
-        return {
-            index: parentNav ? parentNav.context.index + 1 : 1,
-            id: Guid.createGuid(),
-            source,
-            app: this,
-            abort,
-            current: this.__lastNav?.context,
-            parent: parentNav?.context,
-            overided: false,
-            action,
-            data,
-            url: navUrl.url,
-            origin: navUrl.origin,
-            pathAndQuery: navUrl.relative,
-            basePath: navUrl.basePath,
-            path: navUrl.path,
-            query: navUrl.query,
-            hash: navUrl.hash,
-            external: navUrl.external,
-            replace,
-            redirect: async (options) => {
-                abort.throwIfAborted();
-                const result = await this.nav(options);
-                abort.throwIfAborted();
-                return result;
-            }
-        };
-    }
-    async __execNavigate(nav, parent) {
-        if (parent)
-            parent.overide = nav;
-        try {
-            console.info(`${nav.method} begin`, nav.context);
-            nav.context.abort.throwIfAborted();
-            this.__execNav = nav;
-            await this.invoker.invoke(nav.method, nav.context);
-            this.__lastNav = nav;
-            nav.status = "success";
-            console.info(`${nav.method} ${nav.status} ${nav.context.url}`);
-            return nav.context;
-        }
-        catch (reason) {
-            if (reason?.name === "AbortError") {
-                nav.status = "cancelled";
-                console.warn(`${nav.method} ${nav.status} ${nav.context.url}`);
-            }
-            else if (reason === NAV_OVERIDE_ERROR) {
-                if (!nav.context.overided || !nav.overide)
-                    throw new Error("Nav is not overided.");
-                nav.status = "overided";
-                console.warn(`${nav.method} ${nav.status} ${nav.context.url}`);
-                return nav.overide.context; // return redirected navigation
-            }
-            else {
-                nav.status = "error";
-                console.error(`${nav.method} ${nav.status} ${nav.context.url}: ${reason}`);
-            }
-            throw reason;
-        }
-    }
-}
-
-class ApplicationBuilder {
-    __model;
-    __appType = (Application);
-    __middlewares = [];
-    constructor(model) {
-        this.__model = model;
-    }
-    useApp(appType) {
-        this.__appType = appType;
-        return this;
-    }
-    useMiddleware(createFunc, ...params) {
-        let midl = createFunc(...params);
-        this.__middlewares.push(midl);
-        return this;
-    }
-    build(env, ...args) {
-        if (!env.basePath || env.basePath == '/')
-            env.basePath = '';
-        const app = new this.__appType(env, this.__model, ...args);
-        app.initialize(this.__middlewares);
-        return app;
-    }
-}
-
-HTMLElement.prototype.navUrl = function (url) {
-    if (this instanceof HTMLAnchorElement)
-        this.href = url;
-    else
-        this.dataset.navUrl = url;
-    this.classList.add(result.NavUrlClassName);
-    return this;
-};
-HTMLElement.prototype.nav = function (app, path, query, hash) {
-    const url = app.buildUrl(path, query, hash);
-    return this.navUrl(url);
-};
-HTMLElement.prototype.navReplace = function () {
-    this.setAttribute(result.NavUrlReplaceAttributeName, "");
-    return this;
-};
-HTMLElement.prototype.navScope = function (scope) {
-    this.setAttribute(result.NavUrlScopeAttributeName, scope);
-    return this;
-};
-
-export { APP_TYPENAME, Application, ApplicationBuilder, constants as CONSTANTS, NAV_OVERIDE_ERROR, url as UrlHelper };
+export { ApplicationBuilder } from './builder.js';
+export { APP_TYPENAME, Application, NAV_OVERIDE_ERROR } from './app.js';
+export { enableNavExtensions } from './ext.js';
+import * as url from './helpers/url.js';
+export { url as UrlHelper };
+import * as constants from './constants.js';
+export { constants as CONSTANTS };
 //# sourceMappingURL=index.js.map