native-document 1.0.0 → 1.0.1

package/dist/native-document.dev.js

@@ -1,2346 +0,0 @@
-var NativeDocument = (function (exports) {
-    'use strict';
-
-    function eventWrapper(element, name, callback) {
-        element.addEventListener(name, callback);
-        return element;
-    }
-
-    /**
-     *
-     * @param {HTMLElement} element
-     * @returns {HTMLElement}
-     */
-    function HtmlElementEventsWrapper(element) {
-
-        if(!element.nd) {
-            element.nd = {};
-        }
-
-        /**
-         * @param {Object<string,Function>} events
-         */
-        element.nd.on = function(events) {
-            for(const event in events) {
-                const callback = events[event];
-                eventWrapper(element, event, callback);
-            }
-            return element;
-        };
-        element.nd.on.prevent = function(events) {
-            for(const event in events) {
-                const callback = events[event];
-                eventWrapper(element, event, (event) => {
-                    event.preventDefault();
-                    callback && callback(event);
-                    return element;
-                });
-            }
-            return element;
-        };
-        const events = {
-            click: (callback) => eventWrapper(element, 'click', callback),
-            focus: (callback) => eventWrapper(element, 'focus', callback),
-            blur: (callback) => eventWrapper(element, 'blur', callback),
-            input: (callback) => eventWrapper(element, 'input', callback),
-            change: (callback) => eventWrapper(element, 'change', callback),
-            keyup: (callback) => eventWrapper(element, 'keyup', callback),
-            keydown: (callback) => eventWrapper(element, 'keydown', callback),
-            beforeInput: (callback) => eventWrapper(element, 'beforeinput', callback),
-            mouseOver: (callback) => eventWrapper(element, 'mouseover', callback),
-            mouseOut: (callback) => eventWrapper(element, 'mouseout', callback),
-            mouseDown: (callback) => eventWrapper(element, 'mousedown', callback),
-            mouseUp: (callback) => eventWrapper(element, 'mouseup', callback),
-            mouseMove: (callback) => eventWrapper(element, 'mousemove', callback),
-            hover: (mouseInCallback, mouseOutCallback) => {
-                element.addEventListener('mouseover', mouseInCallback);
-                element.addEventListener('mouseout', mouseOutCallback);
-            },
-            dropped: (callback) => eventWrapper(element, 'drop', callback),
-            submit: (callback) => eventWrapper(element, 'submit', callback),
-            dragEnd: (callback) => eventWrapper(element, 'dragend', callback),
-            dragStart: (callback) => eventWrapper(element, 'dragstart', callback),
-            drop: (callback) => eventWrapper(element, 'drop', callback),
-            dragOver: (callback) => eventWrapper(element, 'dragover', callback),
-            dragEnter: (callback) => eventWrapper(element, 'dragenter', callback),
-            dragLeave: (callback) => eventWrapper(element, 'dragleave', callback),
-        };
-        for(let event in events) {
-            element.nd.on[event] = events[event];
-            element.nd.on.prevent[event] = function(callback) {
-                eventWrapper(element, event.toLowerCase(), (event) => {
-                    event.preventDefault();
-                    callback && callback(event);
-                });
-                return element;
-            };
-        }
-
-        return element;
-    }
-
-    // Build configuration
-    const isProd = process.env.NODE_ENV === 'production';
-
-    const DebugManager = {
-        enabled: !isProd,
-
-        enable() {
-            this.enabled = true;
-            console.log('🔍 NativeDocument Debug Mode enabled');
-        },
-
-        disable() {
-            this.enabled = false;
-        },
-
-        log: isProd ? () => {} : function(category, message, data) {
-            if (!this.enabled) return;
-            console.group(`🔍 [${category}] ${message}`);
-            if (data) console.log(data);
-            console.trace();
-            console.groupEnd();
-        },
-
-        warn: isProd ? () => {} : function(category, message, data) {
-            if (!this.enabled) return;
-            console.warn(`⚠️ [${category}] ${message}`, data);
-        },
-
-        error: isProd ? () => {} : function(category, message, error) {
-            console.error(`❌ [${category}] ${message}`, error);
-        }
-    };
-
-    const MemoryManager = (function() {
-
-        let $nexObserverId = 0;
-        const $observables = new Map();
-        const $registry = new FinalizationRegistry((heldValue) => {
-            DebugManager.log('MemoryManager', '🧹 Auto-cleanup observable:', heldValue);
-            heldValue.listeners.splice(0);
-        });
-
-        return {
-            /**
-             * Register an observable and return an id.
-             *
-             * @param {ObservableItem} observable
-             * @param {Function[]} listeners
-             * @returns {number}
-             */
-            register(observable, listeners) {
-                const id = ++$nexObserverId;
-                const heldValue = {
-                    id: id,
-                    listeners
-                };
-                $registry.register(observable, heldValue);
-                $observables.set(id, new WeakRef(observable));
-                return id;
-            },
-            cleanup() {
-                for (const [_, weakObservableRef] of $observables) {
-                    const observable = weakObservableRef.deref();
-                    if (observable) {
-                        observable.cleanup();
-                    }
-                }
-                $observables.clear();
-            },
-            /**
-             * Clean observables that are not referenced anymore.
-             * @param {number} threshold
-             */
-            cleanObservables(threshold) {
-                if($observables.size < threshold) return;
-                let cleanedCount = 0;
-                for (const [id, weakObservableRef] of $observables) {
-                    if (!weakObservableRef.deref()) {
-                        $observables.delete(id);
-                        cleanedCount++;
-                    }
-                }
-                if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
-                }
-            }
-        };
-    }());
-
-    class NativeDocumentError extends Error {
-        constructor(message, context = {}) {
-            super(message);
-            this.name = 'NativeDocumentError';
-            this.context = context;
-            this.timestamp = new Date().toISOString();
-        }
-    }
-
-    /**
-     *
-     * @param {ObservableItem} $observable
-     * @param {Function} $checker
-     * @class ObservableChecker
-     */
-    function ObservableChecker($observable, $checker) {
-        this.observable = $observable;
-        this.checker = $checker;
-
-        this.subscribe = function(callback) {
-            return $observable.subscribe((value) => {
-                callback && callback($checker(value));
-            });
-        };
-
-        this.val = function() {
-            return $checker && $checker($observable.val());
-        };
-
-        this.cleanup = function() {
-            return $observable.cleanup();
-        };
-    }
-
-    /**
-     *
-     * @param {*} value
-     * @class ObservableItem
-     */
-    function ObservableItem(value) {
-        if (value === undefined) {
-            throw new NativeDocumentError('ObservableItem requires an initial value');
-        }
-        if(value instanceof ObservableItem) {
-            throw new NativeDocumentError('ObservableItem cannot be an Observable');
-        }
-
-        const $initialValue = (typeof value === 'object') ? JSON.parse(JSON.stringify(value)) : value;
-
-        let $previousValue = value;
-        let $currentValue = value;
-        let $isCleanedUp = false;
-
-        const $listeners = [];
-
-        MemoryManager.register(this, $listeners);
-
-        this.trigger = () => {
-            $listeners.forEach(listener => {
-                try {
-                    listener($currentValue, $previousValue);
-                } catch (error) {
-                    DebugManager.error('Listener Undefined', 'Error in observable listener:', error);
-                    this.unsubscribe(listener);
-                }
-            });
-
-        };
-
-        this.originalValue = () => $initialValue;
-
-        /**
-         * @param {*} data
-         */
-        this.set = (data) => {
-            const newValue = (typeof data === 'function') ? data($currentValue) : data;
-            if($currentValue === newValue) {
-                return;
-            }
-            $previousValue = $currentValue;
-            $currentValue = newValue;
-            this.trigger();
-        };
-
-        this.val = () => $currentValue;
-
-        this.cleanup = function() {
-            $listeners.splice(0);
-            $isCleanedUp = true;
-        };
-
-        /**
-         *
-         * @param {Function} callback
-         * @returns {(function(): void)}
-         */
-        this.subscribe = (callback) => {
-            if ($isCleanedUp) {
-                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
-                return () => {};
-            }
-            if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Callback must be a function');
-            }
-
-            $listeners.push(callback);
-            return () => this.unsubscribe(callback);
-        };
-
-        /**
-         * Unsubscribe from an observable.
-         * @param {Function} callback
-         */
-        this.unsubscribe = (callback) => {
-            const index = $listeners.indexOf(callback);
-            if (index > -1) {
-                $listeners.splice(index, 1);
-            }
-        };
-
-        /**
-         * Create an Observable checker instance
-         * @param callback
-         * @returns {ObservableChecker}
-         */
-        this.check = function(callback) {
-            return new ObservableChecker(this, callback)
-        };
-
-    }
-
-    const Validator = {
-        isObservable(value) {
-            return value instanceof ObservableItem || value instanceof ObservableChecker;
-        },
-        isProxy(value) {
-            return value?.__isProxy__
-        },
-        isObservableChecker(value) {
-            return value instanceof ObservableChecker;
-        },
-        isArray(value) {
-            return Array.isArray(value);
-        },
-        isString(value) {
-            return typeof value === 'string';
-        },
-        isNumber(value) {
-            return typeof value === 'number';
-        },
-        isBoolean(value) {
-            return typeof value === 'boolean';
-        },
-        isFunction(value) {
-            return typeof value === 'function';
-        },
-        isObject(value) {
-            return typeof value === 'object';
-        },
-        isJson(value) {
-            return typeof value === 'object' && value !== null && !Array.isArray(value);
-        },
-        isElement(value) {
-            return value instanceof HTMLElement || value instanceof DocumentFragment  || value instanceof Text;
-        },
-        isFragment(value) {
-            return value instanceof DocumentFragment;
-        },
-        isStringOrObservable(value) {
-            return this.isString(value) || this.isObservable(value);
-        },
-
-        isValidChild(child) {
-            return child === null ||
-                this.isElement(child) ||
-                this.isObservable(child) ||
-                ['string', 'number', 'boolean'].includes(typeof child);
-        },
-        isValidChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
-
-            const invalid = children.filter(child => !this.isValidChild(child));
-            return invalid.length === 0;
-        },
-        validateChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
-
-            const invalid = children.filter(child => !this.isValidChild(child));
-            if (invalid.length > 0) {
-                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
-            }
-
-            return children;
-        },
-
-        validateAttributes(attributes) {
-            if (!attributes || typeof attributes !== 'object') {
-                return attributes;
-            }
-
-            const reserved = [];
-            const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
-
-            if (foundReserved.length > 0) {
-                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
-            }
-
-            return attributes;
-        },
-
-        validateEventCallback(callback) {
-            if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Event callback must be a function');
-            }
-        }
-    };
-
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {string} className
-     * @param {string} value
-     */
-    const toggleClassItem = function(element, className, value) {
-        if(value) {
-            element.classList.add(className);
-        } else {
-            element.classList.remove(className);
-        }
-    };
-
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} data
-     */
-    function bindClassAttribute(element, data) {
-        for(let className in data) {
-            const value = data[className];
-            if(Validator.isObservable(value)) {
-                toggleClassItem(element, className, value.val());
-                value.subscribe(newValue => toggleClassItem(element, className, newValue));
-                continue;
-            }
-            toggleClassItem(element, className, value);
-        }
-    }
-
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} data
-     */
-    function bindStyleAttribute(element, data) {
-        for(let styleName in data) {
-            const value = data[styleName];
-            if(Validator.isObservable(value)) {
-                element.style[styleName] = value.val();
-                value.subscribe(newValue => {
-                    element.style[styleName] = newValue;
-                });
-                continue;
-            }
-            element.style[styleName] = value;
-        }
-    }
-
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     */
-    function AttributesWrapper(element, attributes) {
-
-        Validator.validateAttributes(attributes);
-
-        if(!Validator.isObject(attributes)) {
-            console.log(attributes);
-            throw new NativeDocumentError('Attributes must be an object');
-        }
-
-        for(let attributeName in attributes) {
-            const value = attributes[attributeName];
-            if(Validator.isObservable(value)) {
-                value.subscribe(newValue => element.setAttribute(attributeName, newValue));
-                element.setAttribute(attributeName, value.val());
-                if(attributeName === 'value') {
-                    if(['checkbox', 'radio'].includes(element.type)) {
-                        element.addEventListener('input', () => value.set(element.checked));
-                    } else {
-                        element.addEventListener('input', () => value.set(element.value));
-                    }
-                }
-                continue;
-            }
-            if(attributeName === 'class' && Validator.isJson(value)) {
-                bindClassAttribute(element, value);
-                continue;
-            }
-            if(attributeName === 'style' && Validator.isJson(value)) {
-                bindStyleAttribute(element, value);
-                continue;
-            }
-            element.setAttribute(attributeName, value);
-        }
-        return element;
-    }
-
-    /**
-     *
-     * @param {Function} fn
-     * @param {number} delay
-     * @param {{leading?:Boolean, trailing?:Boolean, debounce?:Boolean}}options
-     * @returns {(function(...[*]): void)|*}
-     */
-    const throttle = function(fn, delay, options = {}) {
-        let timer = null;
-        let lastExecTime = 0;
-        const { leading = true, trailing = true, debounce = false } = options;
-
-        return  function(...args) {
-            const now = Date.now();
-            if (debounce) {
-                // debounce mode: reset the timer for each call
-                clearTimeout(timer);
-                timer = setTimeout(() => fn.apply(this, args), delay);
-                return;
-            }
-            if (leading && now - lastExecTime >= delay) {
-                fn.apply(this, args);
-                lastExecTime = now;
-            }
-            if (trailing && !timer) {
-                timer = setTimeout(() => {
-                    fn.apply(this, args);
-                    lastExecTime = Date.now();
-                    timer = null;
-                }, delay - (now - lastExecTime));
-            }
-        }
-    };
-
-    const trim = function(str, char) {
-        return str.replace(new RegExp(`^[${char}]+|[${char}]+$`, 'g'), '');
-    };
-
-    const DocumentObserver = {
-        elements: new Map(),
-        observer: null,
-        checkMutation: throttle(function() {
-            for(const [element, data] of DocumentObserver.elements.entries()) {
-                const isCurrentlyInDom = document.body.contains(element);
-                if(isCurrentlyInDom && !data.inDom) {
-                    data.inDom = true;
-                    data.mounted.forEach(callback => callback(element));
-                } else if(!isCurrentlyInDom && data.inDom) {
-                    data.inDom = false;
-                    data.unmounted.forEach(callback => callback(element));
-                }
-            }
-        }, 10, { debounce: true }),
-        /**
-         *
-         * @param {HTMLElement} element
-         * @returns {{watch: (function(): Map<any, any>), disconnect: (function(): boolean), mounted: (function(*): Set<any>), unmounted: (function(*): Set<any>)}}
-         */
-        watch: function(element) {
-            let data = {};
-            if(DocumentObserver.elements.has(element)) {
-                data = DocumentObserver.elements.get(element);
-            } else {
-                const inDom = document.body.contains(element);
-                data = {
-                    inDom,
-                    mounted: new Set(),
-                    unmounted: new Set(),
-                };
-                DocumentObserver.elements.set(element, data);
-            }
-
-            return {
-                watch: () => DocumentObserver.elements.set(element, data),
-                disconnect: () => DocumentObserver.elements.delete(element),
-                mounted: (callback) => data.mounted.add(callback),
-                unmounted: (callback) => data.unmounted.add(callback)
-            };
-        }
-    };
-
-    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
-    DocumentObserver.observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    });
-
-    /**
-     *
-     * @param {HTMLElement|DocumentFragment} parent
-     * @param {ObservableItem} observable
-     * @returns {Text}
-     */
-    const createObservableNode = function(parent, observable) {
-        const text = document.createTextNode('');
-        observable.subscribe(value => text.textContent = String(value));
-        text.textContent = observable.val();
-        parent && parent.appendChild(text);
-        return text;
-    };
-
-    /**
-     *
-     * @param {HTMLElement|DocumentFragment} parent
-     * @param {*} value
-     * @returns {Text}
-     */
-    const createStaticTextNode = function(parent, value) {
-        const text = document.createTextNode('');
-        text.textContent = String(value);
-        parent && parent.appendChild(text);
-        return text;
-    };
-
-    /**
-     *
-     * @param {HTMLElement} element
-     */
-    const addUtilsMethods = function(element) {
-        element.nd.wrap = (callback) => {
-            if(!Validator.isFunction(callback)) {
-                throw new NativeDocumentError('Callback must be a function');
-            }
-            callback && callback(element);
-            return element;
-        };
-        element.nd.ref = (target, name) => {
-            target[name] = element;
-            return element;
-        };
-
-        let $observer = null;
-
-        element.nd.lifecycle = function(states) {
-            $observer = $observer || DocumentObserver.watch(element);
-
-            states.mounted && $observer.mounted(states.mounted);
-            states.unmounted && $observer.unmounted(states.unmounted);
-            return element;
-        };
-
-        element.nd.mounted = (callback) => {
-            $observer = $observer || DocumentObserver.watch(element);
-            $observer.mounted(callback);
-            return element;
-        };
-        element.nd.unmounted = (callback) => {
-            $observer = $observer || DocumentObserver.watch(element);
-            $observer.unmounted(callback);
-            return element;
-        };
-    };
-
-    /**
-     *
-     * @param {*} value
-     * @returns {Text}
-     */
-    const createTextNode = function(value) {
-        return (Validator.isObservable(value))
-            ? createObservableNode(null, value)
-            : createStaticTextNode(null, value);
-    };
-
-    const ElementCreator = {
-        /**
-         *
-         * @param {string} name
-         * @returns {HTMLElement|DocumentFragment}
-         */
-        createElement(name)  {
-            return name ? document.createElement(name) : document.createDocumentFragment();
-        },
-        /**
-         *
-         * @param {*} children
-         * @param {HTMLElement|DocumentFragment} parent
-         */
-        processChildren(children, parent) {
-            if(children === null) return;
-            const childrenArray = Array.isArray(children) ? children : [children];
-            childrenArray.forEach(child => {
-                if (child === null) return;
-                if (Validator.isElement(child)) {
-                    parent.appendChild(child);
-                    return;
-                }
-                if (Validator.isObservable(child)) {
-                    createObservableNode(parent, child);
-                    return;
-                }
-                if (child) {
-                    createStaticTextNode(parent, child);
-                }
-            });
-        },
-        /**
-         *
-         * @param {HTMLElement} element
-         * @param {Object} attributes
-         */
-        processAttributes(element, attributes) {
-            if(Validator.isFragment(element)) return;
-            if (attributes) {
-                AttributesWrapper(element, attributes);
-            }
-        },
-        /**
-         *
-         * @param {HTMLElement} element
-         * @param {Object} attributes
-         * @param {?Function} customWrapper
-         * @returns {HTMLElement|DocumentFragment}
-         */
-        setup(element, attributes, customWrapper) {
-            element.nd = {};
-            HtmlElementEventsWrapper(element);
-            const item = (typeof customWrapper === 'function') ? customWrapper(element) : element;
-            addUtilsMethods(item);
-            return item;
-        }
-    };
-
-    /**
-     *
-     * @param {string} name
-     * @param {?Function} customWrapper
-     * @returns {Function}
-     */
-    function HtmlElementWrapper(name, customWrapper) {
-        const $tagName = name.toLowerCase().trim();
-
-        const builder = function(attributes, children = null) {
-            try {
-                if(Validator.isValidChildren(attributes)) {
-                    const tempChildren = children;
-                    children = attributes;
-                    attributes = tempChildren;
-                }
-                const element = ElementCreator.createElement($tagName);
-
-                ElementCreator.processAttributes(element, attributes);
-                ElementCreator.processChildren(children, element);
-
-                return ElementCreator.setup(element, attributes, customWrapper);
-            } catch (error) {
-                DebugManager.error('ElementCreation', `Error creating ${$tagName}`, error);
-            }
-        };
-
-        builder.hold = (children, attributes) => (() => builder(children, attributes));
-
-        return builder;
-    }
-
-    class ArgTypesError extends Error {
-        constructor(message, errors) {
-            super(`${message}\n\n${errors.join("\n")}\n\n`);
-        }
-    }
-
-    /**
-     *
-     * @type {{string: (function(*): {name: *, type: string, validate: function(*): boolean}),
-     *      number: (function(*): {name: *, type: string, validate: function(*): boolean}),
-     *      boolean: (function(*): {name: *, type: string, validate: function(*): boolean}),
-     *      observable: (function(*): {name: *, type: string, validate: function(*): boolean}),
-     *      element: (function(*): {name: *, type: string, validate: function(*): *}),
-     *      function: (function(*): {name: *, type: string, validate: function(*): boolean}),
-     *      object: (function(*): {name: *, type: string, validate: function(*): boolean}),
-     *      objectNotNull: (function(*): {name: *, type: string, validate: function(*): *}),
-     *      children: (function(*): {name: *, type: string, validate: function(*): *}),
-     *      attributes: (function(*): {name: *, type: string, validate: function(*): *}),
-     *      optional: (function(*): *&{optional: boolean}),
-     *      oneOf: (function(*, ...[*]): {name: *, type: string, types: *[],
-     *      validate: function(*): boolean})
-     * }}
-     */
-    const ArgTypes = {
-        string: (name) => ({ name, type: 'string', validate: (v) => Validator.isString(v) }),
-        number: (name) => ({ name, type: 'number', validate: (v) => Validator.isNumber(v) }),
-        boolean: (name) => ({ name, type: 'boolean', validate: (v) => Validator.isBoolean(v) }),
-        observable: (name) => ({ name, type: 'observable', validate: (v) => Validator.isObservable(v) }),
-        element: (name) => ({ name, type: 'element', validate: (v) => Validator.isElement(v) }),
-        function: (name) => ({ name, type: 'function', validate: (v) => Validator.isFunction(v) }),
-        object: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v)) }),
-        objectNotNull: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v) && v !== null) }),
-        children: (name) => ({ name, type: 'children', validate: (v) => Validator.validateChildren(v) }),
-        attributes: (name) => ({ name, type: 'attributes', validate: (v) => Validator.validateAttributes(v) }),
-
-        // Optional arguments
-        optional: (argType) => ({ ...argType, optional: true }),
-
-        // Union types
-        oneOf: (name, ...argTypes) => ({
-            name,
-            type: 'oneOf',
-            types: argTypes,
-            validate: (v) => argTypes.some(type => type.validate(v))
-        })
-    };
-
-    /**
-     *
-     * @param {Array} args
-     * @param {Array} argSchema
-     * @param {string} fnName
-     */
-    const validateArgs = (args, argSchema, fnName = 'Function') => {
-        if (!argSchema) return;
-
-        const errors = [];
-
-        // Check the number of arguments
-        const requiredCount = argSchema.filter(arg => !arg.optional).length;
-        if (args.length < requiredCount) {
-            errors.push(`${fnName}: Expected at least ${requiredCount} arguments, got ${args.length}`);
-        }
-
-        // Validate each argument
-        argSchema.forEach((schema, index) => {
-            const position = index + 1;
-            const value = args[index];
-
-            if (value === undefined) {
-                if (!schema.optional) {
-                    errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
-                }
-                return;
-            }
-
-            if (!schema.validate(value)) {
-                const valueTypeOf = value?.constructor?.name || typeof value;
-                errors.push(`${fnName}: Invalid argument '${schema.name}' at position ${position}, expected ${schema.type}, got ${valueTypeOf}`);
-            }
-        });
-
-        if (errors.length > 0) {
-            throw new ArgTypesError(`Argument validation failed`, errors);
-        }
-    };
-
-    /**
-     * @param {Function} fn
-     * @param {Array} argSchema
-     * @param {string} fnName
-     * @returns {Function}
-     */
-    const withValidation = (fn, argSchema, fnName = 'Function') => {
-        if(!Validator.isArray(argSchema)) {
-            throw new NativeDocumentError('withValidation : argSchema must be an array');
-        }
-        return function(...args) {
-            validateArgs(args, argSchema, fn.name || fnName);
-            return fn.apply(this, args);
-        };
-    };
-
-    Function.prototype.args = function(...args) {
-        return withValidation(this, args);
-    };
-
-    Function.prototype.errorBoundary = function(callback) {
-        return (...args)  => {
-            try {
-                return this.apply(this, args);
-            } catch(e) {
-                return callback(e);
-            }
-        };
-    };
-
-    /**
-     *
-     * @param {*} value
-     * @returns {ObservableItem}
-     * @constructor
-     */
-    function Observable(value) {
-        return new ObservableItem(value);
-    }
-
-
-    Observable.computed = function(callback, dependencies = []) {
-        const initialValue = callback();
-        const observable = new ObservableItem(initialValue);
-
-        const updatedValue = throttle(() => observable.set(callback()), 10, { debounce: true });
-
-        dependencies.forEach(dependency => dependency.subscribe(updatedValue));
-
-        return observable;
-    };
-
-    /**
-     *
-     * @param {ObservableItem} observable
-     */
-    Observable.cleanup = function(observable) {
-        observable.cleanup();
-    };
-
-    /**
-     * Get the value of an observable or an object of observables.
-     * @param {ObservableItem|Object<ObservableItem>} object
-     * @returns {{}|*|null}
-     */
-    Observable.value = function(data) {
-        if(Validator.isObservable(data)) {
-            return data.val();
-        }
-        if(Validator.isProxy(data)) {
-            return data.$val();
-        }
-        if(Validator.isArray(data)) {
-            const result = [];
-            data.forEach(item => {
-                result.push(Observable.value(item));
-            });
-            return result;
-        }
-        return data;
-    };
-
-    /**
-     *
-     * @param {Object} value
-     * @returns {Proxy}
-     */
-    Observable.init = function(value) {
-        const data = {};
-        for(const key in value) {
-            const itemValue = value[key];
-            if(Validator.isJson(itemValue)) {
-                console.log(itemValue);
-                data[key] = Observable.init(itemValue);
-                continue;
-            }
-            data[key] = Observable(itemValue);
-        }
-
-        const $val = function() {
-            const result = {};
-            for(const key in data) {
-                const dataItem = data[key];
-                if(Validator.isObservable(dataItem)) {
-                    result[key] = dataItem.val();
-                } else if(Validator.isProxy(dataItem)) {
-                    result[key] = dataItem.$val();
-                } else {
-                    result[key] = dataItem;
-                }
-            }
-            return result;
-        };
-
-        return new Proxy(data, {
-            get(target, property) {
-                if(property === '__isProxy__') {
-                    return true;
-                }
-                if(property === '$val') {
-                    return $val;
-                }
-                if(target[property] !== undefined) {
-                    return target[property];
-                }
-                return undefined;
-            },
-            set(target, prop, newValue) {
-                if(target[prop] !== undefined) {
-                    target[prop].set(newValue);
-                }
-            }
-        })
-    };
-
-    Observable.object = Observable.init;
-    /**
-     *
-     * @param {Array} target
-     * @returns {ObservableItem}
-     */
-    Observable.array = function(target) {
-        if(!Array.isArray(target)) {
-            throw new NativeDocumentError('Observable.array : target must be an array');
-        }
-        const observer = Observable(target);
-
-        const methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
-
-        methods.forEach((method) => {
-            observer[method] = function(...values) {
-                const target = observer.val();
-                const result = target[method].apply(target, arguments);
-                observer.trigger();
-                return result;
-            };
-        });
-
-        const overrideMethods = ['map', 'filter', 'reduce', 'some', 'every', 'find'];
-        overrideMethods.forEach((method) => {
-            observer[method] = function(callback) {
-                return observer.val()[method](callback);
-            };
-        });
-
-        return observer;
-    };
-
-    /**
-     * Enable auto cleanup of observables.
-     * @param {Boolean} enable
-     * @param {{interval:Boolean, threshold:number}} options
-     */
-    Observable.autoCleanup = function(enable = false, options = {}) {
-        if(!enable) {
-            return;
-        }
-        const { interval = 60000, threshold = 100 } = options;
-
-        window.addEventListener('beforeunload', () => {
-            MemoryManager.cleanup();
-        });
-
-        setInterval(() => MemoryManager.cleanObservables(threshold), interval);
-    };
-
-    const Store = (function() {
-
-        const $stores = new Map();
-
-        return {
-            /**
-             * Create a new state follower and return it.
-             * @param {string} name
-             * @returns {ObservableItem}
-             */
-            use(name) {
-                const {observer: originalObserver, followers } = $stores.get(name);
-                const observerFollower = Observable(originalObserver.val());
-                const unSubscriber = originalObserver.subscribe(value => observerFollower.set(value));
-                const updaterUnsubscriber = observerFollower.subscribe(value => originalObserver.set(value));
-                observerFollower.destroy = () => {
-                    unSubscriber();
-                    updaterUnsubscriber();
-                    observerFollower.cleanup();
-                };
-                followers.add(observerFollower);
-
-                return observerFollower;
-            },
-            /**
-             * @param {string} name
-             * @returns {ObservableItem}
-             */
-            follow(name) {
-                return this.use(name);
-            },
-            /**
-             * Create a new state and return the observer.
-             * @param {string} name
-             * @param {*} value
-             * @returns {ObservableItem}
-             */
-            create(name, value) {
-                const observer = Observable(value);
-                $stores.set(name, { observer, followers: new Set()});
-                return observer;
-            },
-            /**
-             * Get the observer for a state.
-             * @param {string} name
-             * @returns {null|ObservableItem}
-             */
-            get(name) {
-                const item = $stores.get(name);
-                return item ? item.observer : null;
-            },
-            /**
-             *
-             * @param {string} name
-             * @returns {{observer: ObservableItem, followers: Set}}
-             */
-            getWithFollowers(name) {
-                return $stores.get(name);
-            },
-            /**
-             * Delete a state.
-             * @param {string} name
-             */
-            delete(name) {
-                const item = $stores.get(name);
-                if(!item) return;
-                item.observer.cleanup();
-                item.followers.forEach(follower => follower.destroy());
-                item.observer.clear();
-            }
-        };
-    }());
-
-    /**
-     *
-     * @param {*} item
-     * @param {string|null} defaultKey
-     * @param {?Function} key
-     * @returns {*}
-     */
-    const getKey = (item, defaultKey, key) => {
-        if(Validator.isFunction(key)) return key(item, defaultKey);
-        if(Validator.isObservable(item)) {
-            const val = item.val();
-            return (val && key) ? val[key] : defaultKey;
-        }
-        return item[key] ?? defaultKey;
-    };
-
-    /**
-     *
-     * @param {Map} cache
-     * @param {Set} keyIds
-     */
-    const cleanBlockByCache = (cache, keyIds) => {
-        for(const [key, {child}] of cache.entries()) {
-            if(keyIds.has(key)) {
-                continue;
-            }
-            child.remove();
-        }
-    };
-
-    /**
-     *
-     * @param {Array|Object|ObservableItem} data
-     * @param {Function} callback
-     * @param {?Function} key
-     * @returns {DocumentFragment}
-     */
-    function ForEach(data, callback, key) {
-        const element = document.createDocumentFragment();
-        const blockStart = document.createComment('Foreach start');
-        const blockEnd = document.createComment('Foreach end');
-
-        element.appendChild(blockStart);
-        element.appendChild(blockEnd);
-
-        let cache = new Map();
-
-        const handleContentItem = (item, indexKey) => {
-            const keyId = getKey(item, indexKey, key);
-
-            if(cache.has(keyId)) {
-                cache.get(keyId).indexObserver.set(indexKey);
-            }
-            else {
-                const indexObserver = Observable(indexKey);
-                let child = callback(item, indexObserver);
-                if(Validator.isStringOrObservable(child)) {
-                    child = createTextNode(child);
-                }
-                cache.set(keyId, { child, indexObserver});
-            }
-            return keyId;
-        };
-        const keyIds = new Set();
-
-        const buildContent = () => {
-            const items = (Validator.isObservable(data)) ? data.val() : data;
-            const parent = blockEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            keyIds.clear();
-            if(Array.isArray(items)) {
-                items.forEach((item, index) => keyIds.add(handleContentItem(item, index)));
-            } else {
-                for(const indexKey in items) {
-                    keyIds.add(handleContentItem(items[indexKey], indexKey));
-                }
-            }
-
-            cleanBlockByCache(cache, keyIds);
-            let nextElementSibling = blockEnd;
-            for(const item of [...keyIds].reverse()) {
-                const { child } = cache.get(item);
-                if(child) {
-                    if(nextElementSibling && nextElementSibling.previousSibling === child) {
-                        nextElementSibling = child;
-                        continue;
-                    }
-                    parent.insertBefore(child, nextElementSibling);
-                    nextElementSibling = child;
-                }
-            }
-        };
-
-        buildContent();
-        if(Validator.isObservable(data)) {
-            data.subscribe(throttle((newValue, oldValue) => {
-                buildContent();
-            }, 50, { debounce: true }));
-        }
-        return element;
-    }
-
-    /**
-     * Show the element if the condition is true
-     *
-     * @param {ObservableItem|ObservableChecker} condition
-     * @param {*} child
-     * @param {string|null} comment
-     * @returns {DocumentFragment}
-     */
-    const ShowIf = function(condition, child, comment) {
-        if(!(Validator.isObservable(condition))) {
-            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
-        }
-        const element = document.createDocumentFragment();
-        const positionKeeperStart = document.createComment('Show if : '+(comment || ''));
-        const positionKeeperEnd = document.createComment('Show if : '+(comment || ''));
-
-        element.appendChild(positionKeeperStart);
-        element.appendChild(positionKeeperEnd);
-
-        let childElement = null;
-        const getChildElement = () => {
-            if(childElement) {
-                return childElement;
-            }
-            if(typeof child === 'function') {
-                childElement = child();
-            }
-            else {
-                childElement = child;
-            }
-            if(Validator.isStringOrObservable(childElement)) {
-                childElement = createTextNode(childElement);
-            }
-            return childElement;
-        };
-
-        const currentValue = condition.val();
-
-        if(currentValue) {
-            element.appendChild(getChildElement());
-        }
-        condition.subscribe(value => {
-            const parent = positionKeeperEnd.parentNode;
-            if(value && parent) {
-                parent.insertBefore(getChildElement(), positionKeeperEnd);
-            } else {
-                if(Validator.isElement(childElement)){
-                    childElement.remove();
-                }
-            }
-        });
-
-        return element;
-    };
-
-    /**
-     * Hide the element if the condition is true
-     * @param {ObservableItem|ObservableChecker} condition
-     * @param child
-     * @param comment
-     * @returns {DocumentFragment}
-     */
-    const HideIf = function(condition, child, comment) {
-
-        const hideCondition = Observable(!condition.val());
-        condition.subscribe(value => hideCondition.set(!value));
-
-        return ShowIf(hideCondition, child, comment);
-    };
-
-    /**
-     * Hide the element if the condition is false
-     *
-     * @param {ObservableItem|ObservableChecker} condition
-     * @param {*} child
-     * @param {string|null} comment
-     * @returns {DocumentFragment}
-     */
-    const HideIfNot = function(condition, child, comment) {
-        return ShowIf(condition, child, comment);
-    };
-
-    /**
-     *
-     * @param {ObservableItem|ObservableChecker} condition
-     * @param {*} onTrue
-     * @param {*} onFalse
-     * @returns {DocumentFragment}
-     */
-    const Switch = function (condition, onTrue, onFalse) {
-
-        if(!Validator.isObservable(condition)) {
-            throw new NativeDocumentError("Toggle : condition must be an Observable");
-        }
-
-        const commentStart = document.createComment('Toggle Start');
-        const commentEnd = document.createComment('Toggle End');
-
-        const element = document.createDocumentFragment();
-        element.appendChild(commentStart);
-        element.appendChild(commentEnd);
-
-        const elements = {
-            onTrueNode: (Validator.isFunction(onTrue)) ? null : onTrue,
-            onFalseNode: (Validator.isFunction(onFalse)) ? null : onFalse,
-        };
-
-        if(Validator.isStringOrObservable(elements.onTrueNode)) {
-            elements.onTrueNode = createTextNode(elements.onTrueNode);
-        }
-        if(Validator.isStringOrObservable(elements.onFalseNode)) {
-            elements.onFalseNode = createTextNode(elements.onFalseNode);
-        }
-
-        const handle = (value) => {
-            const parent = commentEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            if(value) {
-                if(!elements.onTrueNode && Validator.isFunction(onTrue)) {
-                    elements.onTrueNode = onTrue();
-                }
-                elements.onFalseNode && elements.onFalseNode.remove();
-                parent.insertBefore(elements.onTrueNode, commentEnd);
-            } else {
-                if(!elements.onFalseNode && Validator.isFunction(onFalse)) {
-                    elements.onFalseNode = onFalse();
-                }
-                elements.onTrueNode && elements.onTrueNode.remove();
-                parent.insertBefore(elements.onFalseNode, commentEnd);
-            }
-        };
-
-        condition.subscribe(handle);
-        handle(condition.val());
-
-        return element;
-    };
-
-    /**
-     *
-     * @param condition
-     * @returns {{show: Function, otherwise: (((*) => {}):DocumentFragment)}
-     */
-    const When = function(condition) {
-        let $onTrue = null;
-        let $onFalse = null;
-
-        return {
-            show(onTrue) {
-                if(!Validator.isElement(onTrue) && !Validator.isFunction(onTrue)) {
-                    throw new NativeDocumentError("When : onTrue must be a valid Element");
-                }
-                $onTrue = onTrue;
-                return this;
-            },
-            otherwise(onFalse) {
-                if(!Validator.isElement(onFalse) && !Validator.isFunction(onFalse)) {
-                    throw new NativeDocumentError("When : onFalse must be a valid Element");
-                }
-                $onFalse = onFalse;
-                return Switch(condition, $onTrue, $onFalse);
-            }
-        }
-    };
-
-    const Div = HtmlElementWrapper('div');
-    const Span = HtmlElementWrapper('span');
-    const Label = HtmlElementWrapper('span');
-    const P = HtmlElementWrapper('p');
-    const Paragraph = P;
-    const Strong = HtmlElementWrapper('strong');
-    const H1 = HtmlElementWrapper('h1');
-    const H2 = HtmlElementWrapper('h2');
-    const H3 = HtmlElementWrapper('h3');
-    const H4 = HtmlElementWrapper('h4');
-    const H5 = HtmlElementWrapper('h5');
-    const H6 = HtmlElementWrapper('h6');
-
-    const Br = HtmlElementWrapper('br');
-
-    const Link$1 = HtmlElementWrapper('a');
-    const Pre = HtmlElementWrapper('pre');
-    const Code = HtmlElementWrapper('code');
-    const Blockquote = HtmlElementWrapper('blockquote');
-    const Hr = HtmlElementWrapper('hr');
-    const Em = HtmlElementWrapper('em');
-    const Small = HtmlElementWrapper('small');
-    const Mark = HtmlElementWrapper('mark');
-    const Del = HtmlElementWrapper('del');
-    const Ins = HtmlElementWrapper('ins');
-    const Sub = HtmlElementWrapper('sub');
-    const Sup = HtmlElementWrapper('sup');
-    const Abbr = HtmlElementWrapper('abbr');
-    const Cite = HtmlElementWrapper('cite');
-    const Quote = HtmlElementWrapper('q');
-
-    const Dl = HtmlElementWrapper('dl');
-    const Dt = HtmlElementWrapper('dt');
-    const Dd = HtmlElementWrapper('dd');
-
-    const Form = HtmlElementWrapper('form', function(el) {
-
-        el.submit = function(action) {
-            if(typeof action === 'function') {
-                el.on.submit((e) => {
-                    e.preventDefault();
-                    action(e);
-                });
-                return el;
-            }
-            this.setAttribute('action', action);
-            return el;
-        };
-        el.multipartFormData = function() {
-            this.setAttribute('enctype', 'multipart/form-data');
-            return el;
-        };
-        el.post = function(action) {
-            this.setAttribute('method', 'post');
-            this.setAttribute('action', action);
-            return el;
-        };
-        el.get = function(action) {
-            this.setAttribute('method', 'get');
-            this.setAttribute('action', action);
-        };
-        return el;
-    });
-
-    const Input = HtmlElementWrapper('input');
-
-    const TextArea = HtmlElementWrapper('textarea');
-    const TextInput = TextArea;
-
-    const Select = HtmlElementWrapper('select');
-    const FieldSet = HtmlElementWrapper('fieldset', );
-    const Option = HtmlElementWrapper('option');
-    const Legend = HtmlElementWrapper('legend');
-    const Datalist = HtmlElementWrapper('datalist');
-    const Output = HtmlElementWrapper('output');
-    const Progress = HtmlElementWrapper('progress');
-    const Meter = HtmlElementWrapper('meter');
-
-    const ReadonlyInput = (attributes) => Input({ readonly: true, ...attributes });
-    const HiddenInput = (attributes) => Input({type: 'hidden', ...attributes });
-    const FileInput = (attributes) => Input({ type: 'file', ...attributes });
-    const PasswordInput = (attributes) => Input({ type: 'password', ...attributes });
-    const Checkbox = (attributes) => Input({ type: 'checkbox', ...attributes });
-    const Radio = (attributes) => Input({ type: 'radio', ...attributes });
-
-    const RangeInput = (attributes) => Input({ type: 'range', ...attributes });
-    const ColorInput = (attributes) => Input({ type: 'color', ...attributes });
-    const DateInput = (attributes) => Input({ type: 'date', ...attributes });
-    const TimeInput = (attributes) => Input({ type: 'time', ...attributes });
-    const DateTimeInput = (attributes) => Input({ type: 'datetime-local', ...attributes });
-    const WeekInput = (attributes) => Input({ type: 'week', ...attributes });
-    const MonthInput = (attributes) => Input({ type: 'month', ...attributes });
-    const SearchInput = (attributes) => Input({ type: 'search', ...attributes });
-    const TelInput = (attributes) => Input({ type: 'tel', ...attributes });
-    const UrlInput = (attributes) => Input({ type: 'url', ...attributes });
-    const EmailInput = (attributes) => Input({ type: 'email', ...attributes });
-    const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
-
-
-    const Button = HtmlElementWrapper('button');
-    const SimpleButton = (child, attributes) => Button(child, { type: 'button', ...attributes });
-    const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });
-
-    const Main = HtmlElementWrapper('main');
-    const Section = HtmlElementWrapper('section');
-    const Article = HtmlElementWrapper('article');
-    const Aside = HtmlElementWrapper('aside');
-    const Nav = HtmlElementWrapper('nav');
-    const Figure = HtmlElementWrapper('figure');
-    const FigCaption = HtmlElementWrapper('figcaption');
-
-    const Header = HtmlElementWrapper('header');
-    const Footer = HtmlElementWrapper('footer');
-
-    const BaseImage = HtmlElementWrapper('img');
-    const Img = function(src, attributes) {
-        return BaseImage({ src, ...attributes });
-    };
-
-    /**
-     *
-     * @param {string} src
-     * @param {string|null} defaultImage
-     * @param {Object} attributes
-     * @param {?Function} callback
-     * @returns {Image}
-     */
-    const AsyncImg = function(src, defaultImage, attributes, callback) {
-        const image = Img(defaultImage || src, attributes);
-        const img = new Image();
-        img.onload = () => {
-            Validator.isFunction(callback) && callback(null, image);
-            image.src = src;
-        };
-        img.onerror = () => {
-            Validator.isFunction(callback) && callback(new NativeDocumentError('Image not found'));
-        };
-        if(Validator.isObservable(src)) {
-            src.subscribe(newSrc => {
-                img.src = newSrc;
-            });
-        }
-        img.src = src;
-        return image;
-    };
-
-    /**
-     *
-     * @param {string} src
-     * @param {Object} attributes
-     * @returns {Image}
-     */
-    const LazyImg = function(src, attributes) {
-        return Img(src, { ...attributes, loading: 'lazy' });
-    };
-
-    const Details = HtmlElementWrapper('details');
-    const Summary = HtmlElementWrapper('summary');
-    const Dialog = HtmlElementWrapper('dialog');
-    const Menu = HtmlElementWrapper('menu');
-
-    const OrderedList = HtmlElementWrapper('ol');
-    const UnorderedList = HtmlElementWrapper('ul');
-    const ListItem = HtmlElementWrapper('li');
-
-    const Audio = HtmlElementWrapper('audio');
-    const Video = HtmlElementWrapper('video');
-    const Source = HtmlElementWrapper('source');
-    const Track = HtmlElementWrapper('track');
-    const Canvas = HtmlElementWrapper('canvas');
-    const Svg = HtmlElementWrapper('svg');
-
-    const Time = HtmlElementWrapper('time');
-    const Data = HtmlElementWrapper('data');
-    const Address = HtmlElementWrapper('address');
-    const Kbd = HtmlElementWrapper('kbd');
-    const Samp = HtmlElementWrapper('samp');
-    const Var = HtmlElementWrapper('var');
-    const Wbr = HtmlElementWrapper('wbr');
-
-    const Caption = HtmlElementWrapper('caption');
-    const Table = HtmlElementWrapper('table');
-    const THead = HtmlElementWrapper('thead');
-    const TFoot = HtmlElementWrapper('tfoot');
-    const TBody = HtmlElementWrapper('tbody');
-    const Tr = HtmlElementWrapper('tr');
-    const TRow = Tr;
-    const Th = HtmlElementWrapper('th');
-    const THeadCell = Th;
-    const TFootCell = Th;
-    const Td = HtmlElementWrapper('td');
-    const TBodyCell = Td;
-
-    const Fragment = HtmlElementWrapper('');
-
-    var elements = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        Abbr: Abbr,
-        Address: Address,
-        Article: Article,
-        Aside: Aside,
-        AsyncImg: AsyncImg,
-        Audio: Audio,
-        BaseImage: BaseImage,
-        Blockquote: Blockquote,
-        Br: Br,
-        Button: Button,
-        Canvas: Canvas,
-        Caption: Caption,
-        Checkbox: Checkbox,
-        Cite: Cite,
-        Code: Code,
-        ColorInput: ColorInput,
-        Data: Data,
-        Datalist: Datalist,
-        DateInput: DateInput,
-        DateTimeInput: DateTimeInput,
-        Dd: Dd,
-        Del: Del,
-        Details: Details,
-        Dialog: Dialog,
-        Div: Div,
-        Dl: Dl,
-        Dt: Dt,
-        Em: Em,
-        EmailInput: EmailInput,
-        FieldSet: FieldSet,
-        FigCaption: FigCaption,
-        Figure: Figure,
-        FileInput: FileInput,
-        Footer: Footer,
-        ForEach: ForEach,
-        Form: Form,
-        Fragment: Fragment,
-        H1: H1,
-        H2: H2,
-        H3: H3,
-        H4: H4,
-        H5: H5,
-        H6: H6,
-        Header: Header,
-        HiddenInput: HiddenInput,
-        HideIf: HideIf,
-        HideIfNot: HideIfNot,
-        Hr: Hr,
-        Img: Img,
-        Input: Input,
-        Ins: Ins,
-        Kbd: Kbd,
-        Label: Label,
-        LazyImg: LazyImg,
-        Legend: Legend,
-        Link: Link$1,
-        ListItem: ListItem,
-        Main: Main,
-        Mark: Mark,
-        Menu: Menu,
-        Meter: Meter,
-        MonthInput: MonthInput,
-        Nav: Nav,
-        NumberInput: NumberInput,
-        Option: Option,
-        OrderedList: OrderedList,
-        Output: Output,
-        P: P,
-        Paragraph: Paragraph,
-        PasswordInput: PasswordInput,
-        Pre: Pre,
-        Progress: Progress,
-        Quote: Quote,
-        Radio: Radio,
-        RangeInput: RangeInput,
-        ReadonlyInput: ReadonlyInput,
-        Samp: Samp,
-        SearchInput: SearchInput,
-        Section: Section,
-        Select: Select,
-        ShowIf: ShowIf,
-        SimpleButton: SimpleButton,
-        Small: Small,
-        Source: Source,
-        Span: Span,
-        Strong: Strong,
-        Sub: Sub,
-        SubmitButton: SubmitButton,
-        Summary: Summary,
-        Sup: Sup,
-        Svg: Svg,
-        Switch: Switch,
-        TBody: TBody,
-        TBodyCell: TBodyCell,
-        TFoot: TFoot,
-        TFootCell: TFootCell,
-        THead: THead,
-        THeadCell: THeadCell,
-        TRow: TRow,
-        Table: Table,
-        Td: Td,
-        TelInput: TelInput,
-        TextArea: TextArea,
-        TextInput: TextInput,
-        Th: Th,
-        Time: Time,
-        TimeInput: TimeInput,
-        Tr: Tr,
-        Track: Track,
-        UnorderedList: UnorderedList,
-        UrlInput: UrlInput,
-        Var: Var,
-        Video: Video,
-        Wbr: Wbr,
-        WeekInput: WeekInput,
-        When: When
-    });
-
-    const RouteParamPatterns = {
-
-    };
-
-    /**
-     *
-     * @param {string} $path
-     * @param {Function} $component
-     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }}$options
-     * @class
-     */
-    function Route($path, $component, $options = {}) {
-
-        $path = '/'+trim($path, '/');
-
-        let $pattern = null;
-        let $name = $options.name || null;
-
-        const $middlewares = $options.middlewares || [];
-        const $shouldRebuild = $options.shouldRebuild || false;
-        const $paramsValidators = $options.with || {};
-
-        const $params = {};
-        const $paramsNames = [];
-
-
-        const paramsExtractor = (description) => {
-            if(!description) return null;
-            const [name, type] = description.split(':');
-
-            let pattern = $paramsValidators[name];
-            if(!pattern && type) {
-                pattern = RouteParamPatterns[type];
-            }
-            if(!pattern) {
-                pattern = '[^/]+';
-            }
-
-            pattern = pattern.replace('(', '(?:');
-
-            return { name, pattern: `(${pattern})` };
-        };
-
-        const getPattern = () => {
-            if($pattern) {
-                return $pattern;
-            }
-
-            const patternDescription = $path.replace(/\{(.*?)}/ig, (block, definition) => {
-                const description = paramsExtractor(definition);
-                if(!description || !description.pattern) return block;
-                $params[description.name] = description.pattern;
-                $paramsNames.push(description.name);
-                return description.pattern;
-            });
-
-            $pattern = new RegExp('^'+patternDescription+'$');
-            return $pattern;
-        };
-
-        this.name = () => $name;
-        this.component = () => $component;
-        this.middlewares = () => $middlewares;
-        this.shouldRebuild = () => $shouldRebuild;
-        this.path = () => $path;
-
-        /**
-         *
-         * @param {string} path
-         */
-        this.match = function(path) {
-            path = '/'+trim(path, '/');
-            const match = getPattern().exec(path);
-            if(!match) return false;
-            const params = {};
-
-            getPattern().exec(path).forEach((value, index) => {
-                if(index < 1) return;
-                const name = $paramsNames[index - 1];
-                params[name] = value;
-            });
-
-            return params;
-        };
-        /**
-         * @param {{params: ?Object, query: ?Object, basePath: ?string}} configs
-         */
-        this.url = function(configs) {
-            const path = $path.replace(/\{(.*?)}/ig, (block, definition) => {
-                const description = paramsExtractor(definition);
-                if(configs.params && configs.params[description.name]) {
-                    return configs.params[description.name];
-                }
-                throw new Error(`Missing parameter '${description.name}'`);
-            });
-
-            const queryString = (typeof configs.query === 'object') ? (new URLSearchParams(configs.query)).toString() : null;
-            return (configs.basePath ? configs.basePath : '') + (queryString ? `${path}?${queryString}` : path);
-        };
-    }
-
-    class RouterError extends Error {
-        constructor(message, context) {
-            super(message);
-            this.context = context;
-        }
-
-    }
-
-    const RouteGroupHelper = {
-        /**
-         *
-         * @param {{suffix: string, options: {middlewares: Function[], name: string}}[]} $groupTree
-         * @param {string} path
-         * @returns {string}
-         */
-        fullPath: ($groupTree, path) => {
-            const fullPath = [];
-            $groupTree.forEach(group => {
-                fullPath.push(trim(group.suffix, '/'));
-            });
-            fullPath.push(trim(path, '/'));
-            return fullPath.join('/');
-        },
-        /**
-         *
-         * @param {{suffix: string, options: {middlewares: Function[], name: string}}[]} $groupTree
-         * @param {Function[]} middlewares
-         * @returns {Function[]}
-         */
-        fullMiddlewares: ($groupTree, middlewares) => {
-            const fullMiddlewares = [];
-            $groupTree.forEach(group => {
-                if(group.options.middlewares) {
-                    fullMiddlewares.push(...group.options.middlewares);
-                }
-            });
-            if(middlewares) {
-                fullMiddlewares.push(...middlewares);
-            }
-            return fullMiddlewares;
-        },
-        /**
-         *
-         * @param {{suffix: string, options: {middlewares: Function[], name: string}}[]} $groupTree
-         * @param {string} name
-         * @returns {string}
-         */
-        fullName: ($groupTree, name) => {
-            const fullName = [];
-            $groupTree.forEach(group => {
-                if(group.options?.name) {
-                    fullName.push(group.options.name);
-                }
-            });
-            name && fullName.push(name);
-            return fullName.join('.');
-        }
-    };
-
-    function HashRouter() {
-
-        const $history = [];
-        let $currentIndex = 0;
-
-        /**
-         *
-         * @param {number} delta
-         */
-        const go = (delta) => {
-            const index = $currentIndex + delta;
-            if(!$history[index]) {
-                return;
-            }
-            $currentIndex = index;
-            const { route, params, query, path } = $history[index];
-            setHash(path);
-        };
-
-        const canGoBack = function() {
-            return $currentIndex > 0;
-        };
-        const canGoForward = function() {
-            return $currentIndex < $history.length - 1;
-        };
-
-        /**
-         *
-         * @param {string} path
-         */
-        const setHash = (path) => {
-            window.location.replace(`${window.location.pathname}${window.location.search}#${path}`);
-        };
-
-        const getCurrentHash = () => window.location.hash.slice(1);
-
-        /**
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         */
-        this.push = function(target) {
-            const { route, params, query, path } = this.resolve(target);
-            if(path === getCurrentHash()) {
-                return;
-            }
-            $history.splice($currentIndex + 1);
-            $history.push({ route, params, query, path });
-            $currentIndex++;
-            setHash(path);
-        };
-        /**
-         *
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         */
-        this.replace = function(target) {
-            const { route, params, query, path } = this.resolve(target);
-            if(path === getCurrentHash()) {
-                return;
-            }
-            $history[$currentIndex] = { route, params, query, path };
-        };
-        this.forward = function() {
-            return canGoForward() && go(1);
-        };
-        this.back = function() {
-            return canGoBack() && go(-1);
-        };
-
-        /**
-         * @param {string} defaultPath
-         */
-        this.init = function(defaultPath) {
-            window.addEventListener('hashchange', () => {
-                const { route, params, query, path } = this.resolve(getCurrentHash());
-                this.handleRouteChange(route, params, query, path);
-            });
-            const { route, params, query, path } = this.resolve(defaultPath || getCurrentHash());
-            $history.push({ route, params, query, path });
-            $currentIndex = 0;
-            this.handleRouteChange(route, params, query, path);
-        };
-    }
-
-    function HistoryRouter() {
-
-        /**
-         *
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         */
-        this.push = function(target) {
-            try {
-                const { route, path, params, query } = this.resolve(target);
-                if(window.history.state && window.history.state.path === path) {
-                    return;
-                }
-                window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
-                this.handleRouteChange(route, params, query, path);
-            } catch (e) {
-                DebugManager.error('HistoryRouter', 'Error in pushState', e);
-            }
-        };
-        /**
-         *
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         */
-        this.replace = function(target) {
-            const { route, path, params } = this.resolve(target);
-            try {
-                window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
-                this.handleRouteChange(route, params, {}, path);
-            } catch(e) {
-                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
-            }
-        };
-        this.forward = function() {
-            window.history.forward();
-        };
-
-        this.back = function() {
-            window.history.back();
-        };
-
-        /**
-         * @param {string} defaultPath
-         */
-        this.init = function(defaultPath) {
-            window.addEventListener('popstate', (event) => {
-                try {
-                    if(!event.state || !event.state.path) {
-                        return;
-                    }
-                    const statePath = event.state.path;
-                    const {route, params, query, path} = this.resolve(statePath);
-                    if(!route) {
-                        return;
-                    }
-                    this.handleRouteChange(route, params, query, path);
-                } catch(e) {
-                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
-                }
-            });
-            const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
-            this.handleRouteChange(route, params, query, path);
-        };
-
-    }
-
-    function MemoryRouter() {
-        const $history = [];
-        let $currentIndex = 0;
-
-        /**
-         *
-         * @param {number} delta
-         */
-        const go = (delta) => {
-            const index = $currentIndex + delta;
-            if(!$history[index]) {
-                return;
-            }
-            $currentIndex = index;
-            const { route, params, query, path } = $history[index];
-            this.handleRouteChange(route, params, query, path);
-        };
-
-        const canGoBack = function() {
-            return $currentIndex > 0;
-        };
-        const canGoForward = function() {
-            return $currentIndex < $history.length - 1;
-        };
-
-        /**
-         *
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         */
-        this.push = function(target) {
-            const { route, params, query, path} = this.resolve(target);
-            if($history[$currentIndex] && $history[$currentIndex].path === path) {
-                return;
-            }
-            $history.splice($currentIndex + 1);
-            $history.push({ route, params, query, path });
-            $currentIndex++;
-            this.handleRouteChange(route, params, query, path);
-        };
-
-        /**
-         *
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         */
-        this.replace = function(target) {
-            const { route, params, query, path} = this.resolve(target);
-            $history[$currentIndex] = { route, params, query, path };
-            this.handleRouteChange(route, params, query, path);
-        };
-
-        this.forward = function() {
-            return canGoForward() && go(1);
-        };
-
-        this.back = function() {
-            return canGoBack() && go(-1);
-        };
-
-        /**
-         * @param {string} defaultPath
-         */
-        this.init = function(defaultPath) {
-            const currentPath = defaultPath || (window.location.pathname + window.location.search);
-            const { route, params, query, path } = this.resolve(currentPath);
-            $history.push({ route, params, query, path });
-            $currentIndex = 0;
-
-            this.handleRouteChange(route, params, query, path);
-        };
-    }
-
-    /**
-     *
-     * @param {Router} router
-     * @param {?HTMLElement} container
-     */
-    function RouterComponent(router, container) {
-
-        const $cache = new Map();
-
-        const updateContainer = function(node) {
-            container.innerHTML = '';
-            container.appendChild(node);
-        };
-
-        const handleCurrentRouterState = function(state) {
-            if(!state.route) {
-                return;
-            }
-            const { route, params, query, path } = state;
-            if($cache.has(path)) {
-                const cacheNode = $cache.get(path);
-                console.log(cacheNode);
-                updateContainer(cacheNode);
-                return;
-            }
-            const Component = route.component();
-            console.log({ params, query });
-            const node = Component({ params, query });
-            $cache.set(path, node);
-            updateContainer(node);
-        };
-
-        router.subscribe(handleCurrentRouterState);
-
-        handleCurrentRouterState(router.currentState());
-        return container;
-    }
-
-    const DEFAULT_ROUTER_NAME = 'default';
-
-    /**
-     *
-     * @param {{mode: 'memory'|'history'|'hash'}} $options
-     * @constructor
-     */
-    function Router($options = {}) {
-
-        /** @type {Route[]} */
-        const $routes = [];
-        /** @type {{[string]: Route}} */
-        const $routesByName = {};
-        const $groupTree = [];
-        const $listeners = [];
-        const $currentState = { route: null, params: null, query: null, path: null, hash: null };
-
-        if($options.mode === 'hash') {
-            HashRouter.apply(this, []);
-        } else if($options.mode === 'history') {
-            HistoryRouter.apply(this, []);
-        } else if($options.mode === 'memory') {
-            MemoryRouter.apply(this, []);
-        } else {
-            throw new RouterError('Invalid router mode '+$options.mode);
-        }
-
-        const trigger = function(request, next) {
-            for(const listener of $listeners) {
-                try {
-                    listener(request);
-                    next && next(request);
-                } catch (e) {
-                    DebugManager.warn('Route Listener', 'Error in listener:', e);
-                }
-            }
-        };
-
-        this.routes = () => [...$routes];
-        this.currentState = () => ({ ...$currentState });
-
-        /**
-         *
-         * @param {string} path
-         * @param {Function} component
-         * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }} options
-         * @returns {this}
-         */
-        this.add = function(path, component, options) {
-            const route = new Route(RouteGroupHelper.fullPath($groupTree, path), component, {
-                ...options,
-                middlewares: RouteGroupHelper.fullMiddlewares($groupTree, options?.middlewares || []),
-                name: options?.name ? RouteGroupHelper.fullName($groupTree, options.name) : null,
-            });
-            $routes.push(route);
-            if(route.name()) {
-                $routesByName[route.name()] = route;
-            }
-            return this;
-        };
-
-        /**
-         *
-         * @param {string} suffix
-         * @param {{ middlewares: Function[], name: string}} options
-         * @param {Function} callback
-         * @returns {this}
-         */
-        this.group = function(suffix, options, callback) {
-            if(!Validator.isFunction(callback)) {
-                throw new RouterError('Callback must be a function');
-            }
-            $groupTree.push({suffix, options});
-            callback();
-            $groupTree.pop();
-            return this;
-        };
-
-        /**
-         *
-         * @param {string} name
-         * @param {Object}params
-         * @param {Object} query
-         * @returns {*}
-         */
-        this.generateUrl = function(name, params = {}, query = {}) {
-            const route = $routesByName[name];
-            if(!route) {
-                throw new RouterError(`Route not found for name: ${name}`);
-            }
-            return route.url({ params, query });
-        };
-
-        /**
-         *
-         * @param {string|{name:string,params?:Object, query?:Object }} target
-         * @returns {{route:Route, params:Object, query:Object, path:string}}
-         */
-        this.resolve = function(target) {
-            if(Validator.isJson(target)) {
-                const route = $routesByName[target.name];
-                if(!route) {
-                    throw new RouterError(`Route not found for name: ${target.name}`);
-                }
-                return {
-                    route,
-                    params: target.params,
-                    query: target.query,
-                    path: route.url({ ...target })
-                };
-            }
-
-            const [urlPath, urlQuery] = target.split('?');
-            const path = '/'+trim(urlPath, '/');
-            let routeFound = null, params;
-
-            for(const route of $routes) {
-                params = route.match(path);
-                if(params) {
-                    routeFound = route;
-                    break;
-                }
-            }
-            if(!routeFound) {
-                throw new RouterError(`Route not found for url: ${urlPath}`);
-            }
-            const queryParams = {};
-            if(urlQuery) {
-                const queries = new URLSearchParams(urlQuery).entries();
-                for (const [key, value] of queries) {
-                    queryParams[key] = value;
-                }
-            }
-
-            return { route: routeFound, params, query: queryParams, path: target };
-        };
-
-        /**
-         *
-         * @param {Function} listener
-         * @returns {(function(): void)|*}
-         */
-        this.subscribe = function(listener) {
-            if(!Validator.isFunction(listener)) {
-                throw new RouterError('Listener must be a function');
-            }
-            $listeners.push(listener);
-            return () => {
-                $listeners.splice($listeners.indexOf(listener), 1);
-            };
-        };
-
-        /**
-         *
-         * @param {Route} route
-         * @param {Object} params
-         * @param {Object} query
-         * @param {string} path
-         */
-        this.handleRouteChange = function(route, params, query, path) {
-            $currentState.route = route;
-            $currentState.params = params;
-            $currentState.query = query;
-            $currentState.path = path;
-
-            console.log($currentState.query);
-            const middlewares = [...route.middlewares(), trigger];
-            let currentIndex = 0;
-            const request = { ...$currentState };
-
-            const next = (editableRequest) => {
-                currentIndex++;
-                if(currentIndex >= middlewares.length) {
-                    return;
-                }
-                return middlewares[currentIndex](editableRequest || request, next);
-            };
-            return middlewares[currentIndex](request, next);
-        };
-
-    }
-
-    Router.routers = {};
-
-    /**
-     *
-     * @param {{mode: 'memory'|'history'|'hash', name:string, entry: string}} options
-     * @param {Function} callback
-     * @param {Element} container
-     */
-    Router.create = function(options, callback) {
-        if(!Validator.isFunction(callback)) {
-            DebugManager.error('Router', 'Callback must be a function', e);
-            throw new RouterError('Callback must be a function');
-        }
-        const router = new Router(options);
-        Router.routers[options.name || DEFAULT_ROUTER_NAME] = router;
-        callback(router);
-
-        router.init(options.entry);
-
-        return {
-            mount: (container) => {
-                if(Validator.isString(container)) {
-                    const mountContainer = document.querySelector(container);
-                    if(!mountContainer) {
-                        throw new RouterError(`Container not found for selector: ${container}`);
-                    }
-                    container = mountContainer;
-                } else if(!Validator.isElement(container)) {
-                    throw new RouterError('Container must be a string or an Element');
-                }
-
-                RouterComponent(router, container);
-            }
-        };
-    };
-
-    Router.get = function(name) {
-        return Router.routers[name || DEFAULT_ROUTER_NAME];
-    };
-
-    function Link(attributes, children){
-        const target = attributes.to || attributes.href;
-        if(Validator.isString(target)) {
-            const router = Router.get();
-            return Link$1({ ...attributes, href: target}, children).nd.on.prevent.click(() => {
-                router.push(target);
-            });
-        }
-        const router = Router.get(target.router);
-        if(!router) {
-            throw new RouterError('Router not found "'+target.router+'" for link "'+target.name+'"');
-        }
-        const url = router.generateUrl(target.name, target.params, target.query);
-        return Link$1({ ...attributes, href: url }, children).nd.on.prevent.click(() => {
-            router.push(url);
-        });
-    }
-
-    Link.blank = function(attributes, children){
-        return Link$1({ ...attributes, target: '_blank'}, children);
-    };
-
-    var router = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        Link: Link,
-        Router: Router
-    });
-
-    exports.ArgTypes = ArgTypes;
-    exports.ElementCreator = ElementCreator;
-    exports.HtmlElementWrapper = HtmlElementWrapper;
-    exports.Observable = Observable;
-    exports.Store = Store;
-    exports.elements = elements;
-    exports.router = router;
-    exports.withValidation = withValidation;
-
-    return exports;
-
-})({});