native-document 1.0.154 → 1.0.156

package/dist/native-document.dev.js

@@ -1,14 +1,14 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
 
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             enabled: true,
 
             enable() {
-                DebugManager$1.log('🔍 NativeDocument Debug Mode enabled');
+                DebugManager$2.log('🔍 NativeDocument Debug Mode enabled');
             },
 
             disable() {
@@ -32,7 +32,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager$2 = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -188,7 +188,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager$2.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -275,16 +275,16 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
     }());
 
-    let PluginsManager = null;
+    let PluginsManager$1 = null;
 
     {
-        PluginsManager = (function() {
+        PluginsManager$1 = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -350,7 +350,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager$2.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                             }
                         }
                     }
@@ -359,7 +359,7 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager$1 = PluginsManager;
+    var PluginsManager = PluginsManager$1;
 
     const nextTick = function(fn) {
         let pending = false;
@@ -521,7 +521,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager$1.emit('CreateObservable', this);
+            PluginsManager.emit('CreateObservable', this);
         }
     }
 
@@ -636,12 +636,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager$1.emit('ObservableBeforeChange', this);
+            PluginsManager.emit('ObservableBeforeChange', this);
         }
         this.trigger($setOperation);
         this.$previousValue = null;
         {
-            PluginsManager$1.emit('ObservableAfterChange', this);
+            PluginsManager.emit('ObservableAfterChange', this);
         }
     };
 
@@ -720,7 +720,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager$2.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -732,7 +732,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableSubscribe', this);
+            PluginsManager.emit('ObservableSubscribe', this);
         }
     };
 
@@ -843,7 +843,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableUnsubscribe', this);
+            PluginsManager.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -1089,7 +1089,7 @@ var NativeDocument = (function (exports) {
                         const regex = new RegExp(pattern, flags);
                         return regex.test(String(value));
                     } catch (error){
-                        DebugManager$2.warn('Invalid regex pattern:', pattern, error);
+                        DebugManager$1.warn('Invalid regex pattern:', pattern, error);
                         return false;
                     }
                 }
@@ -1348,7 +1348,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager$1.emit('CreateObservableArray', this);
+            PluginsManager.emit('CreateObservableArray', this);
         }
     };
 
@@ -2204,7 +2204,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this);
         {
-            PluginsManager$1.emit('CreateObservableChecker', this);
+            PluginsManager.emit('CreateObservableChecker', this);
         }
 
         this.$mutation = $checker;
@@ -2571,7 +2571,7 @@ var NativeDocument = (function (exports) {
         const getValues = () => dependencies.map((item) => item.val());
         const updatedValue = nextTick(() => observable.set(callback(...getValues())));
         {
-            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
+            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
         }
 
         if(Validator.isFunction(dependencies)) {
@@ -2877,14 +2877,14 @@ var NativeDocument = (function (exports) {
         processChildren: (children, parent) => {
             if(children === null) return;
             {
-                PluginsManager$1.emit('BeforeProcessChildren', parent);
+                PluginsManager.emit('BeforeProcessChildren', parent);
             }
             let child = ElementCreator.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager$1.emit('AfterProcessChildren', parent);
+                PluginsManager.emit('AfterProcessChildren', parent);
             }
         },
         async safeRemove(element) {
@@ -3228,6 +3228,127 @@ var NativeDocument = (function (exports) {
 
     DocumentFragment.prototype.setAttribute = () => {};
 
+    class ArgTypesError extends Error {
+        constructor(message, errors) {
+            super(`${message}\n\n${errors.join("\n")}\n\n`);
+        }
+    }
+
+    exports.withValidation = (fn) => fn;
+    exports.ArgTypes = {};
+
+    /**
+     *
+     * @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})
+     * }}
+     */
+    {
+        exports.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}
+         */
+        exports.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);
+            };
+        };
+    }
+
+    const normalizeComponentArgs = function(props, children = null) {
+        if(props && children) {
+            return { props, children };
+        }
+        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+            return { props: children, children: props }
+        }
+        return { props, children };
+    };
+
     const DocumentObserver = {
         mounted: new WeakMap(),
         beforeUnmount: new WeakMap(),
@@ -3413,7 +3534,7 @@ var NativeDocument = (function (exports) {
         this.$element = element;
         this.$attachements = null;
         {
-            PluginsManager$1.emit('NDElementCreated', element, this);
+            PluginsManager.emit('NDElementCreated', element, this);
         }
     }
 
@@ -3585,12 +3706,12 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                DebugManager$1.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
                 continue;
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager$2.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -3641,23 +3762,23 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager$1.emit('NDElementExtended', methods);
+            PluginsManager.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -3954,125 +4075,193 @@ var NativeDocument = (function (exports) {
         }
     });
 
-    class ArgTypesError extends Error {
-        constructor(message, errors) {
-            super(`${message}\n\n${errors.join("\n")}\n\n`);
-        }
-    }
-
-    exports.withValidation = (fn) => fn;
-    exports.ArgTypes = {};
-
-    /**
-     *
-     * @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})
-     * }}
-     */
-    {
-        exports.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) }),
+    DocumentFragment.prototype.__IS_FRAGMENT = true;
 
-            // Optional arguments
-            optional: (argType) => ({ ...argType, optional: true }),
+    Function.prototype.args = function(...args) {
+        return exports.withValidation(this, args);
+    };
 
-            // Union types
-            oneOf: (name, ...argTypes) => ({
-                name,
-                type: 'oneOf',
-                types: argTypes,
-                validate: (v) => argTypes.some(type => type.validate(v))
-            })
+    Function.prototype.errorBoundary = function(callback) {
+        const handler = (...args)  => {
+            try {
+                return this.apply(this, args);
+            } catch(e) {
+                return callback(e, {caller: handler, args: args });
+            }
         };
+        return handler;
+    };
 
+    function TemplateBinding(hydrate) {
+        this.$hydrate = hydrate;
+    }
 
-        /**
-         *
-         * @param {Array} args
-         * @param {Array} argSchema
-         * @param {string} fnName
-         */
-        const validateArgs = (args, argSchema, fnName = 'Function') => {
-            if (!argSchema) return;
-
-            const errors = [];
+    TemplateBinding.prototype.__$isTemplateBinding = true;
 
-            // 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}`);
-            }
+    NDElement.$getChild = ElementCreator.getChild;
 
-            // Validate each argument
-            argSchema.forEach((schema, index) => {
-                const position = index + 1;
-                const value = args[index];
+    String.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this);
+    };
 
-                if (value === undefined) {
-                    if (!schema.optional) {
-                        errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
-                    }
-                    return;
-                }
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
 
-                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}`);
-                }
-            });
+    Element.prototype.toNdElement = function () {
+        return this;
+    };
+    Text.prototype.toNdElement = function () {
+        return this;
+    };
+    Comment.prototype.toNdElement = function () {
+        return this;
+    };
+    Document.prototype.toNdElement = function () {
+        return this;
+    };
+    DocumentFragment.prototype.toNdElement = function () {
+        return this;
+    };
 
-            if (errors.length > 0) {
-                throw new ArgTypesError(`Argument validation failed`, errors);
-            }
-        };
+    ObservableItem.prototype.toNdElement = function () {
+        return ElementCreator.createObservableNode(null, this);
+    };
 
+    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
 
+    NDElement.prototype.toNdElement = function () {
+        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+        if(this.$attachements) {
+            if(!this.$attachements.contains(this.$element)) {
+                this.$attachements.append(this.$element);
+            }
+            return this.$attachements;
+        }
+        return element;
+    };
 
-        /**
-         * @param {Function} fn
-         * @param {Array} argSchema
-         * @param {string} fnName
-         * @returns {Function}
-         */
-        exports.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);
-            };
-        };
-    }
+    Array.prototype.toNdElement = function () {
+        const fragment = document.createDocumentFragment();
+        for(let i = 0, length = this.length; i < length; i++) {
+            const child = ElementCreator.getChild(this[i]);
+            if(child === null) continue;
+            fragment.appendChild(child);
+        }
+        return fragment;
+    };
 
-    const normalizeComponentArgs = function(props, children = null) {
-        if(props && children) {
-            return { props, children };
+    Function.prototype.toNdElement = function () {
+        const child = this;
+        {
+            PluginsManager.emit('BeforeProcessComponent', child);
         }
-        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
-            return { props: children, children: props }
+        return ElementCreator.getChild(child());
+    };
+
+    TemplateBinding.prototype.toNdElement = function () {
+        return ElementCreator.createHydratableNode(null, this);
+    };
+
+    /**
+     * @param {HTMLElement} el
+     * @param {number} timeout
+     */
+    const waitForVisualEnd = (el, timeout = 1000) => {
+        return new Promise((resolve) => {
+            let isResolved = false;
+
+            const cleanupAndResolve = (e) => {
+                if (e && e.target !== el) return;
+                if (isResolved) return;
+
+                isResolved = true;
+                el.removeEventListener('transitionend', cleanupAndResolve);
+                el.removeEventListener('animationend', cleanupAndResolve);
+                clearTimeout(timer);
+                resolve();
+            };
+
+            el.addEventListener('transitionend', cleanupAndResolve);
+            el.addEventListener('animationend', cleanupAndResolve);
+
+            const timer = setTimeout(cleanupAndResolve, timeout);
+
+            const style = window.getComputedStyle(el);
+            const hasTransition = style.transitionDuration !== '0s';
+            const hasAnimation = style.animationDuration !== '0s';
+
+            if (!hasTransition && !hasAnimation) {
+                cleanupAndResolve();
+            }
+        });
+    };
+
+    NDElement.prototype.transitionOut = function(transitionName) {
+        const exitClass = transitionName + '-exit';
+        const el = this.$element;
+        this.beforeUnmount('transition-exit', async function() {
+            el.classes.add(exitClass);
+            await waitForVisualEnd(el);
+            el.classes.remove(exitClass);
+        });
+        return this;
+    };
+
+    NDElement.prototype.transitionIn = function(transitionName) {
+        const startClass = transitionName + '-enter-from';
+        const endClass = transitionName + '-enter-to';
+
+        const el = this.$element;
+
+        el.classes.add(startClass);
+
+        this.mounted(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.classes.remove(startClass);
+                    el.classes.add(endClass);
+
+                    waitForVisualEnd(el).then(() => {
+                        el.classes.remove(endClass);
+                    });
+                });
+            });
+        });
+        return this;
+    };
+
+
+    NDElement.prototype.transition = function (transitionName) {
+        this.transitionIn(transitionName);
+        this.transitionOut(transitionName);
+        return this;
+    };
+
+    NDElement.prototype.animate = function(animationName) {
+        const el = this.$element;
+        el.classes.add(animationName);
+
+        waitForVisualEnd(el).then(() => {
+            el.classes.remove(animationName);
+        });
+
+        return this;
+    };
+
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+            bindBooleanAttribute(element, attributeName, this);
+            return;
         }
-        return { props, children };
+
+        bindAttributeWithObservable(element, attributeName, this);
+    };
+
+    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+
+        TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+        this.$hydrate(element, attributeName);
     };
 
     /**
@@ -4134,12 +4323,6 @@ var NativeDocument = (function (exports) {
         };
     }
 
-    function TemplateBinding(hydrate) {
-        this.$hydrate = hydrate;
-    }
-
-    TemplateBinding.prototype.__$isTemplateBinding = true;
-
     function NodeCloner($element) {
         this.$element = $element;
         this.$classes = null;
@@ -4478,189 +4661,6 @@ var NativeDocument = (function (exports) {
         };
     }
 
-    DocumentFragment.prototype.__IS_FRAGMENT = true;
-
-    Function.prototype.args = function(...args) {
-        return exports.withValidation(this, args);
-    };
-
-    Function.prototype.errorBoundary = function(callback) {
-        const handler = (...args)  => {
-            try {
-                return this.apply(this, args);
-            } catch(e) {
-                return callback(e, {caller: handler, args: args });
-            }
-        };
-        return handler;
-    };
-
-    NDElement.$getChild = ElementCreator.getChild;
-
-    String.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this);
-    };
-
-    Number.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this.toString());
-    };
-
-    Element.prototype.toNdElement = function () {
-        return this;
-    };
-    Text.prototype.toNdElement = function () {
-        return this;
-    };
-    Comment.prototype.toNdElement = function () {
-        return this;
-    };
-    Document.prototype.toNdElement = function () {
-        return this;
-    };
-    DocumentFragment.prototype.toNdElement = function () {
-        return this;
-    };
-
-    ObservableItem.prototype.toNdElement = function () {
-        return ElementCreator.createObservableNode(null, this);
-    };
-
-    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
-
-    NDElement.prototype.toNdElement = function () {
-        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-        if(this.$attachements) {
-            if(!this.$attachements.contains(this.$element)) {
-                this.$attachements.append(this.$element);
-            }
-            return this.$attachements;
-        }
-        return element;
-    };
-
-    Array.prototype.toNdElement = function () {
-        const fragment = document.createDocumentFragment();
-        for(let i = 0, length = this.length; i < length; i++) {
-            const child = ElementCreator.getChild(this[i]);
-            if(child === null) continue;
-            fragment.appendChild(child);
-        }
-        return fragment;
-    };
-
-    Function.prototype.toNdElement = function () {
-        const child = this;
-        {
-            PluginsManager$1.emit('BeforeProcessComponent', child);
-        }
-        return ElementCreator.getChild(child());
-    };
-
-    TemplateBinding.prototype.toNdElement = function () {
-        return ElementCreator.createHydratableNode(null, this);
-    };
-
-    /**
-     * @param {HTMLElement} el
-     * @param {number} timeout
-     */
-    const waitForVisualEnd = (el, timeout = 1000) => {
-        return new Promise((resolve) => {
-            let isResolved = false;
-
-            const cleanupAndResolve = (e) => {
-                if (e && e.target !== el) return;
-                if (isResolved) return;
-
-                isResolved = true;
-                el.removeEventListener('transitionend', cleanupAndResolve);
-                el.removeEventListener('animationend', cleanupAndResolve);
-                clearTimeout(timer);
-                resolve();
-            };
-
-            el.addEventListener('transitionend', cleanupAndResolve);
-            el.addEventListener('animationend', cleanupAndResolve);
-
-            const timer = setTimeout(cleanupAndResolve, timeout);
-
-            const style = window.getComputedStyle(el);
-            const hasTransition = style.transitionDuration !== '0s';
-            const hasAnimation = style.animationDuration !== '0s';
-
-            if (!hasTransition && !hasAnimation) {
-                cleanupAndResolve();
-            }
-        });
-    };
-
-    NDElement.prototype.transitionOut = function(transitionName) {
-        const exitClass = transitionName + '-exit';
-        const el = this.$element;
-        this.beforeUnmount('transition-exit', async function() {
-            el.classes.add(exitClass);
-            await waitForVisualEnd(el);
-            el.classes.remove(exitClass);
-        });
-        return this;
-    };
-
-    NDElement.prototype.transitionIn = function(transitionName) {
-        const startClass = transitionName + '-enter-from';
-        const endClass = transitionName + '-enter-to';
-
-        const el = this.$element;
-
-        el.classes.add(startClass);
-
-        this.mounted(() => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    el.classes.remove(startClass);
-                    el.classes.add(endClass);
-
-                    waitForVisualEnd(el).then(() => {
-                        el.classes.remove(endClass);
-                    });
-                });
-            });
-        });
-        return this;
-    };
-
-
-    NDElement.prototype.transition = function (transitionName) {
-        this.transitionIn(transitionName);
-        this.transitionOut(transitionName);
-        return this;
-    };
-
-    NDElement.prototype.animate = function(animationName) {
-        const el = this.$element;
-        el.classes.add(animationName);
-
-        waitForVisualEnd(el).then(() => {
-            el.classes.remove(animationName);
-        });
-
-        return this;
-    };
-
-    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-            bindBooleanAttribute(element, attributeName, this);
-            return;
-        }
-
-        bindAttributeWithObservable(element, attributeName, this);
-    };
-
-    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
-        TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
-        this.$hydrate(element, attributeName);
-    };
-
     const cssPropertyAccumulator = function(initialValue = {}) {
         let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
 
@@ -4804,7 +4804,7 @@ var NativeDocument = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$2.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -4817,7 +4817,7 @@ var NativeDocument = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$2.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -4848,7 +4848,7 @@ var NativeDocument = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
                     throw new NativeDocumentError(
                         `Store.create('${name}') : a store with this name already exists.`
                     );
@@ -4869,7 +4869,7 @@ var NativeDocument = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createResettable('${name}') : a store with this name already exists.`
                     );
@@ -4905,7 +4905,7 @@ var NativeDocument = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createComposed('${name}') : a store with this name already exists.`
                     );
@@ -4928,7 +4928,7 @@ var NativeDocument = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$2.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -4962,13 +4962,13 @@ var NativeDocument = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$2.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : composed stores cannot be reset.`
                     );
                 }
                 if (!item.resettable) {
-                    DebugManager$2.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
                     );
@@ -4989,7 +4989,7 @@ var NativeDocument = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$2.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
                     throw new NativeDocumentError(
                         `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
                     );
@@ -5056,7 +5056,7 @@ var NativeDocument = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -5078,7 +5078,7 @@ var NativeDocument = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -5180,7 +5180,7 @@ var NativeDocument = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$2.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
                 throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
             },
             deleteProperty(target, prop) {
@@ -5271,7 +5271,7 @@ var NativeDocument = (function (exports) {
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager$2.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -5661,7 +5661,7 @@ var NativeDocument = (function (exports) {
                 return condition ? ElementCreator.getChild(child) : null;
             }
 
-            return DebugManager$2.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
+            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -7215,7 +7215,7 @@ var NativeDocument = (function (exports) {
                 window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, query, path);
             } catch (e) {
-                DebugManager$2.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -7228,7 +7228,7 @@ var NativeDocument = (function (exports) {
                 window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, {}, path);
             } catch(e) {
-                DebugManager$2.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -7255,7 +7255,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager$2.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -7484,7 +7484,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager$2.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -7673,7 +7673,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager$2.error('Router', 'Callback must be a function');
+            DebugManager$1.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -7878,7 +7878,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
-    exports.PluginsManager = PluginsManager$1;
+    exports.PluginsManager = PluginsManager;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.StoreFactory = StoreFactory;