native-document 1.0.114 → 1.0.116

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager$1 = {};
+    let DebugManager = {};
 
     {
-        DebugManager$1 = {
+        DebugManager = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -313,10 +313,10 @@ var NativeDocument = (function (exports) {
         subtree: true,
     });
 
-    let PluginsManager$1 = null;
+    let PluginsManager = null;
 
     {
-        PluginsManager$1 = (function() {
+        PluginsManager = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -382,7 +382,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager.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);
                             }
                         }
                     }
@@ -391,12 +391,12 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager = PluginsManager$1;
+    var PluginsManager$1 = PluginsManager;
 
     function NDElement(element) {
         this.$element = element;
         {
-            PluginsManager.emit('NDElementCreated', element, this);
+            PluginsManager$1.emit('NDElementCreated', element, this);
         }
     }
 
@@ -528,21 +528,6 @@ var NativeDocument = (function (exports) {
         return this.shadow('closed', style);
     };
 
-    /**
-     * Attaches a template binding to the element by hydrating it with the specified method.
-     *
-     * @param {string} methodName - Name of the hydration method to call
-     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
-     * @returns {HTMLElement} The underlying HTML element
-     * @example
-     * const onClick = $binder.attach((event, data) => console.log(data));
-     * element.nd.attach('onClick', onClick);
-     */
-    NDElement.prototype.attach = function(methodName, bindingHydrator) {
-        bindingHydrator.$hydrate(this.$element, methodName);
-        return this.$element;
-    };
-
     /**
      * Extends the current NDElement instance with custom methods.
      * Methods are bound to the instance and available for chaining.
@@ -576,7 +561,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager.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);
             }
@@ -627,23 +612,23 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.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.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.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager.emit('NDElementExtended', methods);
+            PluginsManager$1.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -794,171 +779,13 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
         };
     }
 
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
-        anchorFragment.__Anchor__ = true;
-
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
-
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
-
-        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
-        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
-        anchorFragment.nativeAppend = anchorFragment.append;
-
-        const isParentUniqueChild = isUniqueChild
-            ? () => true
-            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
-
-        const insertBefore = function(parent, child, target) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            if(parent === anchorFragment) {
-                parent.nativeInsertBefore(childElement, target);
-                return;
-            }
-            if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(childElement,  target);
-                return;
-            }
-            parent.insertBefore(childElement, target);
-        };
-
-        anchorFragment.appendElement = function(child, before = null) {
-            const parentNode = anchorStart.parentNode;
-            const targetBefore = before || anchorEnd;
-            if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, targetBefore);
-                return;
-            }
-            parentNode?.insertBefore(child, targetBefore);
-        };
-
-        anchorFragment.appendChild = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
-            }
-            before = before ?? anchorEnd;
-            insertBefore(parent, child, before);
-        };
-
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
-        };
-
-        anchorFragment.removeChildren = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                itemToRemove.remove();
-                itemToRemove =  tempItem;
-            }
-        };
-
-        anchorFragment.remove = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                anchorFragment.nativeAppend(itemToRemove);
-                itemToRemove = tempItem;
-            }
-        };
-
-        anchorFragment.removeWithAnchors = function() {
-            anchorFragment.removeChildren();
-            anchorStart.remove();
-            anchorEnd.remove();
-        };
-
-        anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
-                return;
-            }
-            anchorFragment.removeChildren();
-            parent.insertBefore(childElement, anchorEnd);
-        };
-
-        anchorFragment.setContent = anchorFragment.replaceContent;
-
-        anchorFragment.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
-
-        anchorFragment.endElement = function() {
-            return anchorEnd;
-        };
-
-        anchorFragment.startElement = function() {
-            return anchorStart;
-        };
-        anchorFragment.restore = function() {
-            anchorFragment.appendChild(anchorFragment);
-        };
-        anchorFragment.clear = anchorFragment.remove;
-        anchorFragment.detach = anchorFragment.remove;
-
-        anchorFragment.getByIndex = function(index) {
-            let currentNode = anchorStart;
-            for(let i = 0; i <= index; i++) {
-                if(!currentNode.nextSibling) {
-                    return null;
-                }
-                currentNode = currentNode.nextSibling;
-            }
-            return currentNode !== anchorStart ? currentNode : null;
-        };
-
-        return anchorFragment;
-    }
-    /**
-     *
-     * @param {HTMLElement|DocumentFragment|Text|String|Array} children
-     * @param {{ parent?: HTMLElement, name?: String}} configs
-     * @returns {DocumentFragment}
-     */
-    function createPortal(children, { parent, name = 'unnamed' } = {}) {
-        const anchor = Anchor('Portal '+name);
-        anchor.appendChild(ElementCreator.getChild(children));
-
-        (parent || document.body).appendChild(anchor);
-        return anchor;
-    }
-
-    DocumentFragment.prototype.setAttribute = () => {};
-
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
         'selected',
@@ -1039,7 +866,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1241,7 +1068,7 @@ var NativeDocument = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager.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.`
                 );
@@ -1254,7 +1081,7 @@ var NativeDocument = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager.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.`
                 );
@@ -1285,7 +1112,7 @@ var NativeDocument = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.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.`
                     );
@@ -1306,7 +1133,7 @@ var NativeDocument = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.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.`
                     );
@@ -1342,7 +1169,7 @@ var NativeDocument = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager.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.`
                     );
@@ -1365,7 +1192,7 @@ var NativeDocument = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager.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.`
                         );
@@ -1399,13 +1226,13 @@ var NativeDocument = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager.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.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().`
                     );
@@ -1426,7 +1253,7 @@ var NativeDocument = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager.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.`
                     );
@@ -1493,7 +1320,7 @@ var NativeDocument = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -1515,7 +1342,7 @@ var NativeDocument = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.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());
@@ -1617,7 +1444,7 @@ var NativeDocument = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager.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) {
@@ -1749,7 +1576,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager.emit('CreateObservable', this);
+            PluginsManager$1.emit('CreateObservable', this);
         }
     }
 
@@ -1853,12 +1680,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager.emit('ObservableBeforeChange', this);
+            PluginsManager$1.emit('ObservableBeforeChange', this);
         }
         this.trigger();
         this.$previousValue = null;
         {
-            PluginsManager.emit('ObservableAfterChange', this);
+            PluginsManager$1.emit('ObservableAfterChange', this);
         }
     };
 
@@ -1936,7 +1763,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager.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') {
@@ -1948,7 +1775,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableSubscribe', this);
+            PluginsManager$1.emit('ObservableSubscribe', this);
         }
     };
 
@@ -2059,7 +1886,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableUnsubscribe', this);
+            PluginsManager$1.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -2535,7 +2362,7 @@ var NativeDocument = (function (exports) {
     Function.prototype.toNdElement = function () {
         const child = this;
         {
-            PluginsManager.emit('BeforeProcessComponent', child);
+            PluginsManager$1.emit('BeforeProcessComponent', child);
         }
         return ElementCreator.getChild(child());
     };
@@ -2647,7 +2474,6 @@ var NativeDocument = (function (exports) {
         this.$hydrate(element, attributeName);
     };
 
-    const $nodeCache = new Map();
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -2677,7 +2503,7 @@ var NativeDocument = (function (exports) {
          * @param {{$hydrate: Function}} item
          * @returns {Text}
          */
-        createHydratableNode(parent, item) {
+        createHydratableNode: (parent, item) => {
             const text = ElementCreator.createTextNode();
             item.$hydrate(text);
             return text;
@@ -2689,7 +2515,7 @@ var NativeDocument = (function (exports) {
          * @param {*} value
          * @returns {Text}
          */
-        createStaticTextNode(parent, value) {
+        createStaticTextNode: (parent, value) => {
             let text = ElementCreator.createTextNode();
             text.nodeValue = value;
             parent && parent.appendChild(text);
@@ -2701,15 +2527,10 @@ var NativeDocument = (function (exports) {
          * @returns {HTMLElement|DocumentFragment}
          */
         createElement: (name) => {
-            if(name) {
-                const cacheNode = $nodeCache.get(name);
-                if(cacheNode) {
-                    return cacheNode.cloneNode();
-                }
-                const node = document.createElement(name);
-                $nodeCache.set(name, node);
-                return node.cloneNode();
-            }
+            const node = document.createElement(name);
+            return node.cloneNode();
+        },
+        createFragment: (name) => {
             return Anchor('Fragment');
         },
         bindTextNode: (textNode, value) => {
@@ -2725,17 +2546,17 @@ var NativeDocument = (function (exports) {
          * @param {*} children
          * @param {HTMLElement|DocumentFragment} parent
          */
-        processChildren(children, parent) {
+        processChildren: (children, parent) => {
             if(children === null) return;
             {
-                PluginsManager.emit('BeforeProcessChildren', parent);
+                PluginsManager$1.emit('BeforeProcessChildren', parent);
             }
-            let child = this.getChild(children);
+            let child = ElementCreator.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager.emit('AfterProcessChildren', parent);
+                PluginsManager$1.emit('AfterProcessChildren', parent);
             }
         },
         async safeRemove(element) {
@@ -2777,6 +2598,164 @@ var NativeDocument = (function (exports) {
         processStyleAttribute: bindStyleAttribute,
     };
 
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = document.createDocumentFragment();
+        anchorFragment.__Anchor__ = true;
+
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
+
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
+
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
+
+        const isParentUniqueChild = isUniqueChild
+            ? () => true
+            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
+
+        const insertBefore = function(parent, child, target) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            if(parent === anchorFragment) {
+                parent.nativeInsertBefore(childElement, target);
+                return;
+            }
+            if(isParentUniqueChild(parent) && target === anchorEnd) {
+                parent.append(childElement,  target);
+                return;
+            }
+            parent.insertBefore(childElement, target);
+        };
+
+        anchorFragment.appendElement = function(child, before = null) {
+            const parentNode = anchorStart.parentNode;
+            const targetBefore = before || anchorEnd;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, targetBefore);
+                return;
+            }
+            parentNode?.insertBefore(child, targetBefore);
+        };
+
+        anchorFragment.appendChild = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBefore(parent, child, before);
+        };
+
+        anchorFragment.append = function(...args ) {
+            return anchorFragment.appendChild(args);
+        };
+
+        anchorFragment.removeChildren = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                itemToRemove.remove();
+                itemToRemove =  tempItem;
+            }
+        };
+
+        anchorFragment.remove = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                anchorFragment.nativeAppend(itemToRemove);
+                itemToRemove = tempItem;
+            }
+        };
+
+        anchorFragment.removeWithAnchors = function() {
+            anchorFragment.removeChildren();
+            anchorStart.remove();
+            anchorEnd.remove();
+        };
+
+        anchorFragment.replaceContent = function(child) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, childElement, anchorEnd);
+                return;
+            }
+            anchorFragment.removeChildren();
+            parent.insertBefore(childElement, anchorEnd);
+        };
+
+        anchorFragment.setContent = anchorFragment.replaceContent;
+
+        anchorFragment.insertBefore = function(child, anchor = null) {
+            anchorFragment.appendChild(child, anchor);
+        };
+
+        anchorFragment.endElement = function() {
+            return anchorEnd;
+        };
+
+        anchorFragment.startElement = function() {
+            return anchorStart;
+        };
+        anchorFragment.restore = function() {
+            anchorFragment.appendChild(anchorFragment);
+        };
+        anchorFragment.clear = anchorFragment.remove;
+        anchorFragment.detach = anchorFragment.remove;
+
+        anchorFragment.getByIndex = function(index) {
+            let currentNode = anchorStart;
+            for(let i = 0; i <= index; i++) {
+                if(!currentNode.nextSibling) {
+                    return null;
+                }
+                currentNode = currentNode.nextSibling;
+            }
+            return currentNode !== anchorStart ? currentNode : null;
+        };
+
+        return anchorFragment;
+    }
+    /**
+     *
+     * @param {HTMLElement|DocumentFragment|Text|String|Array} children
+     * @param {{ parent?: HTMLElement, name?: String}} configs
+     * @returns {DocumentFragment}
+     */
+    function createPortal(children, { parent, name = 'unnamed' } = {}) {
+        const anchor = Anchor('Portal '+name);
+        anchor.appendChild(ElementCreator.getChild(children));
+
+        (parent || document.body).appendChild(anchor);
+        return anchor;
+    }
+
+    DocumentFragment.prototype.setAttribute = () => {};
+
     const EVENTS = [
       "Click",
       "DblClick",
@@ -2926,16 +2905,16 @@ var NativeDocument = (function (exports) {
       "ContextMenu"
     ];
 
-    const property = {
+    const property$1 = {
         configurable: true,
         get() {
             return new NDElement(this);
         }
     };
 
-    Object.defineProperty(HTMLElement.prototype, 'nd', property);
+    Object.defineProperty(HTMLElement.prototype, 'nd', property$1);
 
-    Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+    Object.defineProperty(DocumentFragment.prototype, 'nd', property$1);
 
     Object.defineProperty(NDElement.prototype, 'nd', {
         configurable: true,
@@ -3180,7 +3159,10 @@ var NativeDocument = (function (exports) {
     }
 
     const normalizeComponentArgs = function(props, children = null) {
-        if(Array.isArray(props) || typeof props !== 'object' || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+        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 };
@@ -3191,22 +3173,20 @@ var NativeDocument = (function (exports) {
      * @param {*} value
      * @returns {Text}
      */
-    const createTextNode = function(value) {
+    const createTextNode = (value) => {
         return (Validator.isObservable(value))
             ? ElementCreator.createObservableNode(null, value)
             : ElementCreator.createStaticTextNode(null, value);
     };
 
 
-    function createHtmlElement($tagName, customWrapper, _attributes, _children = null) {
+    const createHtmlElement = (element, _attributes, _children = null) => {
         let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
-        let element = ElementCreator.createElement($tagName);
-        let finalElement = (customWrapper && typeof customWrapper === 'function') ? customWrapper(element) : element;
 
-        ElementCreator.processAttributes(finalElement, attributes);
-        ElementCreator.processChildren(children, finalElement);
-        return finalElement;
-    }
+        ElementCreator.processAttributes(element, attributes);
+        ElementCreator.processChildren(children, element);
+        return element;
+    };
 
     /**
      *
@@ -3215,341 +3195,241 @@ var NativeDocument = (function (exports) {
      * @returns {Function}
      */
     function HtmlElementWrapper(name, customWrapper = null) {
-        return createHtmlElement.bind(null, name, customWrapper);
-    }
-
-    const cloneBindingsDataCache = new WeakMap();
+        if(name) {
+            if(customWrapper) {
+                let node = null;
+                let createElement = (attr, children) => {
+                    node = document.createElement(name);
+                    createElement = (attr, children) => {
+                        return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
+                    };
+                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);            };
+
+                return (attr, children) => createElement(attr, children)
+            }
+
+            let node = null;
+            let createElement = (attr, children) => {
+                node = document.createElement(name);
+                createElement = (attr, children) => {
+                    return createHtmlElement(node.cloneNode(), attr, children);
+                };
+                return createHtmlElement(node.cloneNode(), attr, children);
+            };
 
-    const pathProcess = (target, path, data) => {
-        if(path.HYDRATE_TEXT) {
-            const value = path.value;
-            ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
-            return;
-        }
-        if(path.ATTACH_METHOD) {
-            const bindingData = path.bindingData;
-            for(let i = 0, length = bindingData._attachLength; i < length; i++) {
-                const method = bindingData.attach[i];
-                target.nd[method.methodName](function() {
-                    method.fn.call(this, ...data, ...arguments);
-                });
-            }
-        }
-        if(path.HYDRATE_ATTRIBUTES) {
-            path.hydrator(target, path.bindingData, data);
+            return (attr, children) => createElement(attr, children)
         }
-    };
-
-    const buildAttributesCache = (bindDingData) => {
-        const cache = { };
-        if(bindDingData.attributes) cache.attributes = {};
-        if(bindDingData.classes)    cache.class = {};
-        if(bindDingData.styles)     cache.style = {};
-        bindDingData._cache = cache;
-    };
-
-    const prepareBindingMetadata = (bindDingData) => {
-        const attributes = [];
-        const classAndStyles = [];
+        return () => Anchor('');
+    }
 
-        if(bindDingData.attributes) {
-            for (const attr in bindDingData.attributes) {
-                attributes.push({
-                    name: attr,
-                    value: bindDingData.attributes[attr]
-                });
-            }
-        }
+    function NodeCloner($element) {
+        this.$element = $element;
+        this.$classes = null;
+        this.$styles = null;
+        this.$attrs = null;
+        this.$ndMethods = null;
+    }
 
-        if(bindDingData.classes) {
-            for (const className in bindDingData.classes) {
-                bindDingData._hasClassAttribute = true;
-                classAndStyles.push({
-                    name: 'class',
-                    key: className,
-                    value: bindDingData.classes[className]
-                });
-            }
-        }
 
-        if(bindDingData.styles) {
-            for (const property in bindDingData.styles) {
-                bindDingData._hasStyleAttribute = true;
-                classAndStyles.push({
-                    name: 'style',
-                    key: property,
-                    value: bindDingData.styles[property]
-                });
-            }
+    /**
+     * Attaches a template binding to the element by hydrating it with the specified method.
+     *
+     * @param {string} methodName - Name of the hydration method to call
+     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
+     * @returns {HTMLElement} The underlying HTML element
+     * @example
+     * const onClick = $binder.attach((event, data) => console.log(data));
+     * element.nd.attach('onClick', onClick);
+     */
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        if(typeof bindingHydrator === 'function') {
+            const element = this.$element;
+            element.nodeCloner = element.nodeCloner || new NodeCloner(element);
+            element.nodeCloner.attach(methodName, bindingHydrator);
+            return element;
         }
-
-        bindDingData._flatAttributes = attributes;
-        bindDingData._flatAttributesLength = attributes.length;
-        bindDingData._flatDynamique = classAndStyles;
-        bindDingData._flatDynamiqueLength = classAndStyles.length;
-        bindDingData._attachLength = bindDingData.attach.length;
+        bindingHydrator.$hydrate(this.$element, methodName);
+        return this.$element;
     };
 
+    NodeCloner.prototype.__$isNodeCloner = true;
 
-    const $hydrateFn = function(hydrateFunction, targetType, element, property) {
-        if(!cloneBindingsDataCache.has(element)) {
-            cloneBindingsDataCache.set(element, { attach: [] });
+    const buildProperties = (cache, properties, data) => {
+        for(const key in properties) {
+            cache[key] = properties[key].apply(null, data);
         }
-        const hydrationState = cloneBindingsDataCache.get(element);
+        return cache;
+    };
 
-        if(targetType === 'value') {
-            hydrationState.value = hydrateFunction;
-            return;
-        }
-        if(targetType === 'attach') {
-            hydrationState.attach = hydrationState.attach || [];
-            hydrationState.attach.push({ methodName: property, fn: hydrateFunction});
+    NodeCloner.prototype.resolve = function() {
+        if(this.$content) {
             return;
         }
-        hydrationState[targetType] = hydrationState[targetType] || {};
-        hydrationState[targetType][property] = hydrateFunction;
-    };
-
-    const bindAttachMethods = (node, bindDingData, data) => {
-        for(let i = 0, length = bindDingData._attachLength; i < length; i++) {
-            const method = bindDingData.attach[i];
-            node.nd[method.methodName](function() {
-                method.fn.call(this, ...data, ...arguments);
+        const steps = [];
+        if(this.$ndMethods) {
+            steps.push((clonedNode, data) => {
+                for(const methodName in this.$ndMethods) {
+                    clonedNode.nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
+                }
             });
         }
-    };
-
-    const optimizeBindingData = (bindDingData) => {
-        buildAttributesCache(bindDingData);
-        prepareBindingMetadata(bindDingData);
-    };
-
-
-    const $applyBindingParents = [];
-    const hydrateClonedNode = (root, data, paths, pathSize) => {
-        const rootPath = paths[pathSize];
-        $applyBindingParents[rootPath.id] = root;
-        pathProcess(root, rootPath, data);
-
-        let target = null, path = null;
-        for(let i = 0; i < pathSize; i++) {
-            path = paths[i];
-            target = $applyBindingParents[path.parentId].childNodes[path.index];
-            $applyBindingParents[path.id] = target;
-
-            if(path.HYDRATE_TEXT) {
-                const value = path.value;
-                ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
-                continue;
-            }
-            if(path.ATTACH_METHOD) {
-                const bindingData = path.bindingData;
-                for(let i = 0, length = bindingData._attachLength; i < length; i++) {
-                    const method = bindingData.attach[i];
-                    target.nd[method.methodName](function() {
-                        method.fn.call(this, ...data, ...arguments);
-                    });
-                }
-            }
-            if(path.HYDRATE_ATTRIBUTES) {
-                path.hydrator(target, path.bindingData, data);
-            }
+        if(this.$classes) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+            });
         }
-
-        for (let i = 0; i <= pathSize; i++) {
-            $applyBindingParents[i] = null;
+        if(this.$styles) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
+            });
         }
-    };
-
-    const hydrateFull = (node, bindDingData, data) => {
-        const cacheAttributes = bindDingData._cache;
-
-        for(let i = 0, length = bindDingData._flatAttributesLength; i < length; i++) {
-            const attr = bindDingData._flatAttributes[i];
-            cacheAttributes[attr.name] = attr.value.apply(null, data);
+        if(this.$attrs) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
+            });
         }
 
-        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
-            const dyn = bindDingData._flatDynamique[i];
-            cacheAttributes[dyn.name][dyn.key] = dyn.value.apply(null, data);
-        }
+        const stepsCount = steps.length;
 
-        ElementCreator.processAttributesDirect(node, cacheAttributes);
-        return true;
+        this.cloneNode = function(data) {
+            const clonedNode = this.$element.cloneNode(false);
+            for(let i = 0; i < stepsCount; i++) {
+                steps[i](clonedNode, data);
+            }
+            return clonedNode;
+        };
     };
 
-    const hydrateDynamic = (node, bindDingData, data) => {
-        const cacheAttributes = bindDingData._cache;
-
-        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
-            const dyn = bindDingData._flatDynamique[i];
-            cacheAttributes[dyn.name][dyn.key] = dyn.value.apply(null, data);
-        }
-
-        ElementCreator.processClassAttribute(node, cacheAttributes.class);
-        ElementCreator.processStyleAttribute(node, cacheAttributes.style);
-        return true;
+    NodeCloner.prototype.cloneNode = function(data) {
+        return this.$element.cloneNode(false);
     };
 
-    const hydrateClassAttribute = (node, bindDingData, data) => {
-        const classAttributes = bindDingData._cache.class;
-
-        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
-            const dyn = bindDingData._flatDynamique[i];
-            classAttributes[dyn.key] = dyn.value.apply(null, data);
-        }
-
-        ElementCreator.processClassAttribute(node, classAttributes);
-        return true;
+    NodeCloner.prototype.cloneTextNodeByProperty = function(data) {
+        return createTextNode(data[0][this.$content]);
     };
 
-    const hydrateStyleAttribute = (node, bindDingData, data) => {
-        const styleAttributes = bindDingData._cache;
-
-        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
-            const dyn = bindDingData._flatDynamique[i];
-            styleAttributes[dyn.key] = dyn.value.apply(null, data);
-        }
-
-        ElementCreator.processStyleAttribute(node, styleAttributes);
-        return true;
+    NodeCloner.prototype.cloneTextNodeByCallback = function(data) {
+        return createTextNode(this.$content.apply(null, data));
     };
 
-    const hydrateAttributes = (node, bindDingData, data) => {
-        const cacheAttributes = bindDingData._cache;
+    NodeCloner.prototype.attach = function(methodName, callback) {
+        this.$ndMethods = this.$ndMethods || {};
+        this.$ndMethods[methodName] = callback;
+        return this;
+    };
 
-        for(let i = 0, length = bindDingData._flatAttributesLength; i < length; i++) {
-            const attr = bindDingData._flatAttributes[i];
-            cacheAttributes[attr.name] = attr.value.apply(null, data);
+    NodeCloner.prototype.text = function(value) {
+        this.$content = value;
+        if(typeof value === 'function') {
+            this.cloneNode = NodeCloner.prototype.cloneTextNodeByCallback;
+            return this;
         }
-
-        ElementCreator.processAttributesDirect(node, cacheAttributes);
-        return true;
+        this.cloneNode = NodeCloner.prototype.cloneTextNodeByProperty;
+        return this;
     };
 
-    const getHydrator = (bindDingData) => {
-        if(!bindDingData._cache) {
-            return noUpdate;
-        }
-        if(bindDingData._flatAttributesLength && bindDingData._flatDynamiqueLength) {
-            return hydrateFull;
+    NodeCloner.prototype.attr = function(attrName, value) {
+        if(attrName === 'class') {
+            this.$classes = this.$classes || {};
+            this.$classes[value.property] = value.value;
+            return this;
         }
-        if(bindDingData._flatAttributesLength) {
-            return hydrateAttributes;
+        if(attrName === 'style') {
+            this.$styles = this.$styles || {};
+            this.$styles[value.property] = value.value;
+            return this;
         }
-        if(bindDingData._hasClassAttribute && bindDingData._hasStyleAttribute) {
-            return hydrateDynamic;
+        this.$attrs = this.$attrs || {};
+        this.$attrs[attrName] = value.value;
+        return this;
+    };
+
+    const $hydrateFn = function(value, targetType, element, property) {
+        element.nodeCloner = element.nodeCloner || new NodeCloner(element);
+        if(targetType === 'value') {
+            element.nodeCloner.text(value);
+            return;
         }
-        if(bindDingData._hasClassAttribute) {
-            return hydrateClassAttribute;
+        if(targetType === 'attach') {
+            element.nodeCloner.attach(property, value);
+            return;
         }
-        return hydrateStyleAttribute;
+        element.nodeCloner.attr(targetType, { property, value });
     };
 
     function TemplateCloner($fn) {
         let $node = null;
-        let $hasBindingData = false;
 
-        let $bindingTreePathSize = 0;
-        const $bindingTreePath = [
-            {
-                id: 0,
-                parentId: null
-            }
-        ];
-
-        let pathCounter = 0;
-        const clone = (node, data, currentPath) => {
-            const bindDingData = cloneBindingsDataCache.get(node);
-            if(bindDingData) {
-                optimizeBindingData(bindDingData);
-            }
-            if(node.nodeType === 3) {
-                if(bindDingData && bindDingData.value) {
-                    const value = bindDingData.value;
-                    const textNode = node.cloneNode();
-                    currentPath.value = value;
-                    currentPath.HYDRATE_TEXT = true;
-                    currentPath.operation = true;
-                    currentPath.isString = (typeof value === 'string');
-                    ElementCreator.bindTextNode(textNode, (currentPath.isString ? data[0][value] : value.apply(null, data)));
-                    return textNode;
+        const assignClonerToNode = ($node) => {
+            const childNodes = $node.childNodes;
+            let containDynamicNode = !!$node.nodeCloner;
+            const childNodesLength = childNodes.length;
+            for(let i = 0; i < childNodesLength; i++) {
+                const child = childNodes[i];
+                if(child.nodeCloner) {
+                    containDynamicNode = true;
                 }
-                return node.cloneNode(true);
-            }
-            const nodeCloned = node.cloneNode();
-            if(bindDingData) {
-                const hydrator = getHydrator(bindDingData);
-                hydrator(nodeCloned, bindDingData, data);
-                bindAttachMethods(nodeCloned, bindDingData, data);
-
-                const hasAttributes = bindDingData.classes || bindDingData.styles || bindDingData.attributes;
-                const hasAttachMethods = bindDingData.attach.length;
-
-                currentPath.bindingData = bindDingData;
-                currentPath.hydrator = hydrator;
-
-                if(hasAttributes) {
-                    currentPath.HYDRATE_ATTRIBUTES = true;
-                    currentPath.operation = true;
-                }
-                if(hasAttachMethods) {
-                    currentPath.ATTACH_METHOD = true;
-                    currentPath.operation = true;
+                const localContainDynamicNode = assignClonerToNode(child);
+                if(localContainDynamicNode) {
+                    containDynamicNode = true;
                 }
             }
-            const childNodes = node.childNodes;
-            const parentId = currentPath.id;
 
-            for(let i = 0, length = childNodes.length; i < length; i++) {
-                const childNode = childNodes[i];
-                const path = { parentId, id: ++pathCounter,  index: i };
-                const childNodeCloned = clone(childNode, data, path);
-                if(path.hasChildren || path.operation) {
-                    $bindingTreePath.push(path);
-                    currentPath.hasChildren = true;
+            if(!containDynamicNode) {
+                $node.dynamicCloneNode = $node.cloneNode.bind($node, true);
+            } else {
+                if($node.nodeCloner) {
+                    $node.nodeCloner.resolve();
+                    $node.dynamicCloneNode = (data) => {
+                        const clonedNode = $node.nodeCloner.cloneNode(data);
+                        for(let i = 0; i < childNodesLength; i++) {
+                            const child = childNodes[i].dynamicCloneNode(data);
+                            clonedNode.appendChild(child);
+                        }
+                        return clonedNode;
+                    };
+                } else {
+                    $node.dynamicCloneNode = (data) => {
+                        const clonedNode = $node.cloneNode();
+                        for(let i = 0; i < childNodesLength; i++) {
+                            const child = childNodes[i].dynamicCloneNode(data);
+                            clonedNode.appendChild(child);
+                        }
+                        return clonedNode;
+                    };
                 }
-                nodeCloned.appendChild(childNodeCloned);
             }
-            return nodeCloned;
-        };
 
-        const cloneWithBindingPaths = (data) => {
-            let root = $node.cloneNode(true);
-
-            hydrateClonedNode(root, data, $bindingTreePath, $bindingTreePathSize);
-            return root;
+            return containDynamicNode;
         };
 
         this.clone = (data) => {
             const binder = createTemplateCloner(this);
             $node = $fn(binder);
-            if(!$hasBindingData) {
-                this.clone = () => $node.cloneNode(true);
-                return $node.cloneNode(true);
+            if(!$node.nodeCloner) {
+                console.log('nodeCloner not found on :');
+                $node.nodeCloner = new NodeCloner($node);
             }
-
-            const firstClone = clone($node, data, $bindingTreePath[0]);
-            $bindingTreePath.reverse();
-            $bindingTreePathSize = $bindingTreePath.length - 1;
-
-            this.clone = cloneWithBindingPaths;
-            return firstClone;
+            assignClonerToNode($node);
+            this.clone = (data) => $node.dynamicCloneNode(data);
+            return $node.dynamicCloneNode(data);
         };
 
 
         const createBinding = (hydrateFunction, targetType) => {
             return new TemplateBinding((element, property) => {
-                $hasBindingData = true;
                 $hydrateFn(hydrateFunction, targetType, element, property);
             });
         };
 
         this.style = (fn) => {
-            return createBinding(fn, 'styles');
+            return createBinding(fn, 'style');
         };
         this.class = (fn) => {
-            return createBinding(fn, 'classes');
+            return createBinding(fn, 'class');
         };
         this.property = (propertyName) => {
             return this.value(propertyName);
@@ -4179,7 +4059,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager.emit('CreateObservableArray', this);
+            PluginsManager$1.emit('CreateObservableArray', this);
         }
     };
 
@@ -4811,7 +4691,7 @@ var NativeDocument = (function (exports) {
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
         {
-            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
+            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
         }
 
         if(Validator.isFunction(dependencies)) {
@@ -4910,7 +4790,7 @@ var NativeDocument = (function (exports) {
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -5300,7 +5180,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -6719,7 +6599,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.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -6732,7 +6612,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.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -6759,7 +6639,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager.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));
@@ -6984,7 +6864,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -7162,7 +7042,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager.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);
@@ -7366,7 +7246,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
-    exports.PluginsManager = PluginsManager;
+    exports.PluginsManager = PluginsManager$1;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.StoreFactory = StoreFactory;