native-document 1.0.70 → 1.0.73

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager = {};
+    let DebugManager$1 = {};
 
     {
-        DebugManager = {
+        DebugManager$1 = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager$1 = DebugManager;
+    var DebugManager = DebugManager$1;
 
     const MemoryManager = (function() {
 
@@ -84,7 +84,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -207,7 +207,7 @@ var NativeDocument = (function (exports) {
                         try{
                             callback.call(plugin, ...data);
                         } catch (error) {
-                            DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                            DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                         }
                     }
                 }
@@ -238,6 +238,19 @@ var NativeDocument = (function (exports) {
         return this.$observer.$currentValue === this.$target;
     };
 
+    const nextTick = function(fn) {
+        let pending = false;
+        return function(...args) {
+            if (pending) return;
+            pending = true;
+
+            Promise.resolve().then(() => {
+                fn.apply(this, args);
+                pending = false;
+            });
+        };
+    };
+
     /**
      *
      * @param {*} item
@@ -300,6 +313,8 @@ var NativeDocument = (function (exports) {
      * @class ObservableItem
      */
     function ObservableItem(value, configs = null) {
+        value = Validator.isObservable(value) ? value.val() : value;
+
         this.$previousValue = null;
         this.$currentValue = value;
         this.$isCleanedUp = false;
@@ -333,9 +348,15 @@ var NativeDocument = (function (exports) {
     const DEFAULT_OPERATIONS = {};
     const noneTrigger = function() {};
 
+    ObservableItem.prototype.intercept = function(callback) {
+        this.$interceptor = callback;
+        return this;
+    };
+
     ObservableItem.prototype.triggerFirstListener = function(operations) {
         this.$listeners[0](this.$currentValue, this.$previousValue, operations || {});
     };
+
     ObservableItem.prototype.triggerListeners = function(operations) {
         const $listeners = this.$listeners;
         const $previousValue = this.$previousValue;
@@ -412,7 +433,17 @@ var NativeDocument = (function (exports) {
      * @param {*} data
      */
     ObservableItem.prototype.set = function(data) {
-        const newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        newValue = Validator.isObservable(newValue) ? newValue.val() : newValue;
+
+        if (this.$interceptor) {
+            const result = this.$interceptor(newValue, this.$currentValue);
+
+            if (result !== undefined) {
+                newValue = result;
+            }
+        }
+
         if(this.$currentValue === newValue) {
             return;
         }
@@ -445,7 +476,18 @@ var NativeDocument = (function (exports) {
         this.trigger = noneTrigger;
     };
 
+    ObservableItem.prototype.onCleanup = function(callback) {
+        this.$cleanupListeners = this.$cleanupListeners ?? [];
+        this.$cleanupListeners.push(callback);
+    };
+
     ObservableItem.prototype.cleanup = function() {
+        if (this.$cleanupListeners) {
+            for (let i = 0; i < this.$cleanupListeners.length; i++) {
+                this.$cleanupListeners[i]();
+            }
+            this.$cleanupListeners = null;
+        }
         MemoryManager.unregister(this.$memoryId);
         this.disconnectAll();
         this.$isCleanedUp = true;
@@ -461,7 +503,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback, target = null) {
         this.$listeners = this.$listeners ?? [];
         if (this.$isCleanedUp) {
-            DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+            DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
             return () => {};
         }
         if (typeof callback !== 'function') {
@@ -508,6 +550,18 @@ var NativeDocument = (function (exports) {
         };
     };
 
+    ObservableItem.prototype.once = function(predicate, callback) {
+        const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
+
+        const unsub = this.subscribe((val) => {
+            if (fn(val)) {
+                unsub();
+                callback(val);
+            }
+        });
+        return unsub;
+    };
+
     /**
      * Unsubscribe from an observable.
      * @param {Function} callback
@@ -571,6 +625,11 @@ var NativeDocument = (function (exports) {
         this.set(resetValue);
     };
 
+
+    ObservableItem.prototype.toString = function() {
+        return String(this.$currentValue);
+    };
+
     const DocumentObserver = {
         mounted: new WeakMap(),
         mountedSupposedSize: 0,
@@ -674,87 +733,6 @@ var NativeDocument = (function (exports) {
         subtree: true,
     });
 
-    const EVENTS = [
-      "Click",
-      "DblClick",
-      "MouseDown",
-      "MouseEnter",
-      "MouseLeave",
-      "MouseMove",
-      "MouseOut",
-      "MouseOver",
-      "MouseUp",
-      "Wheel",
-      "KeyDown",
-      "KeyPress",
-      "KeyUp",
-      "Blur",
-      "Change",
-      "Focus",
-      "Input",
-      "Invalid",
-      "Reset",
-      "Search",
-      "Select",
-      "Submit",
-      "Drag",
-      "DragEnd",
-      "DragEnter",
-      "DragLeave",
-      "DragOver",
-      "DragStart",
-      "Drop",
-      "AfterPrint",
-      "BeforePrint",
-      "BeforeUnload",
-      "Error",
-      "HashChange",
-      "Load",
-      "Offline",
-      "Online",
-      "PageHide",
-      "PageShow",
-      "Resize",
-      "Scroll",
-      "Unload",
-      "Abort",
-      "CanPlay",
-      "CanPlayThrough",
-      "DurationChange",
-      "Emptied",
-      "Ended",
-      "LoadedData",
-      "LoadedMetadata",
-      "LoadStart",
-      "Pause",
-      "Play",
-      "Playing",
-      "Progress",
-      "RateChange",
-      "Seeked",
-      "Seeking",
-      "Stalled",
-      "Suspend",
-      "TimeUpdate",
-      "VolumeChange",
-      "Waiting",
-
-      "TouchCancel",
-      "TouchEnd",
-      "TouchMove",
-      "TouchStart",
-      "AnimationEnd",
-      "AnimationIteration",
-      "AnimationStart",
-      "TransitionEnd",
-      "Copy",
-      "Cut",
-      "Paste",
-      "FocusIn",
-      "FocusOut",
-      "ContextMenu"
-    ];
-
     function NDElement(element) {
         this.$element = element;
         this.$observer = null;
@@ -853,136 +831,12 @@ var NativeDocument = (function (exports) {
         return this.shadow('closed', style);
     };
 
-    NDElement.prototype.attach = function(bindingHydrator) {
-        bindingHydrator.$hydrate(this.$element);
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        bindingHydrator.$hydrate(this.$element, methodName);
         return this.$element;
     };
 
 
-    /**
-     *
-     * ND events API
-     *
-     */
-
-    const DelegatedEventsCallbackStore = {};
-
-    const addCallbackToCallbacksStore = function(element, eventName, callback) {
-        if(!element) return;
-        if(!DelegatedEventsCallbackStore[eventName]) {
-            const eventStore = new WeakMap();
-            DelegatedEventsCallbackStore[eventName] = eventStore;
-            eventStore.set(element, callback);
-            return;
-        }
-        const eventStore = DelegatedEventsCallbackStore[eventName];
-
-        if(!eventStore.has(element)) {
-            eventStore.set(element, callback);
-            return;
-        }
-        const existingCallbacks = eventStore.get(element);
-        if(!Validator.isArray(existingCallbacks)) {
-            eventStore.set(element, [store[eventName], callback]);
-            return;
-        }
-        existingCallbacks.push(callback);
-    };
-
-    const handleDelegatedCallbacks = function(container, eventName) {
-        container.addEventListener(eventName, (event) => {
-            const eventStore = DelegatedEventsCallbackStore[eventName];
-            if(!eventStore) {
-                return;
-            }
-            let target = event.target;
-            while(target && target !== container) {
-                const callback = eventStore.get(target);
-                if(!callback) {
-                    target = target.parentElement;
-                    continue;
-                }
-
-                if(Validator.isFunction(callback)) {
-                    callback.call(target, event);
-                }
-                else {
-                    for(let i = 0; i < callback.length; i++) {
-                        callback[i].call(target, event);
-                    }
-                }
-                return;
-            }
-        });
-    };
-
-    const preventDefaultWrapper = function(element, eventName, callback) {
-        element.addEventListener(eventName, (event) => {
-            event.preventDefault();
-            callback && callback.call(element, event);
-        });
-        return this;
-    };
-
-    const stopPropagationWrapper = function(element, eventName, callback) {
-        element.addEventListener(eventName, (event) => {
-            event.stopPropagation();
-            callback && callback.call(element, event);
-        });
-        return this;
-    };
-
-    const preventDefaultAndStopPropagationWrapper = function(element, eventName, callback) {
-        element.addEventListener(eventName, (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            callback && callback.call(element, event);
-        });
-        return this;
-    };
-
-    const captureEventWrapper = function(element, eventName, directHandler) {
-        if(directHandler) {
-            element.addEventListener(eventName, directHandler);
-            return this;
-        }
-        handleDelegatedCallbacks(element, eventName);
-        return this;
-    };
-
-    for(const event of EVENTS) {
-        const eventName = event.toLowerCase();
-        NDElement.prototype['on'+event] = function(callback) {
-            this.$element.addEventListener(eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['onPrevent'+event] = function(callback) {
-            preventDefaultWrapper(this.$element, eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['onStop'+event] = function(callback) {
-            stopPropagationWrapper(this.$element, eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['onPreventStop'+event] = function(callback) {
-            preventDefaultAndStopPropagationWrapper(this.$element, eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['when'+event] = function(callback) {
-            addCallbackToCallbacksStore(this.$element, eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['capture'+event] = function(directHandler) {
-            captureEventWrapper(this.$element, eventName, directHandler);
-            return this;
-        };
-    }
-
     NDElement.prototype.with = function(methods) {
         if (!methods || typeof methods !== 'object') {
             throw new NativeDocumentError('extend() requires an object of methods');
@@ -1002,7 +856,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -1036,17 +890,17 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1057,6 +911,12 @@ var NativeDocument = (function (exports) {
         return NDElement;
     };
 
+    function TemplateBinding(hydrate) {
+        this.$hydrate = hydrate;
+    }
+
+    TemplateBinding.prototype.__$isTemplateBinding = true;
+
     const COMMON_NODE_TYPES = {
         ELEMENT: 1,
         TEXT: 3,
@@ -1068,6 +928,9 @@ var NativeDocument = (function (exports) {
         isObservable(value) {
             return  value?.__$isObservable || value instanceof ObservableItem || value instanceof ObservableChecker;
         },
+        isTemplateBinding(value) {
+            return  value?.__$isTemplateBinding || value instanceof TemplateBinding;
+        },
         isObservableWhenResult(value) {
             return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
         },
@@ -1077,6 +940,9 @@ var NativeDocument = (function (exports) {
         isProxy(value) {
             return value?.__isProxy__
         },
+        isObservableOrProxy(value) {
+            return Validator.isObservable(value) || Validator.isProxy(value);
+        },
         isAnchor(value) {
             return value?.__Anchor__
         },
@@ -1192,7 +1058,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -1200,23 +1066,23 @@ var NativeDocument = (function (exports) {
     }
 
     function Anchor(name, isUniqueChild = false) {
-        const element = document.createDocumentFragment();
-        element.__Anchor__ = true;
+        const anchorFragment = document.createDocumentFragment();
+        anchorFragment.__Anchor__ = true;
 
         const anchorStart = document.createComment('Anchor Start : '+name);
         const anchorEnd = document.createComment('/ Anchor End '+name);
 
-        element.appendChild(anchorStart);
-        element.appendChild(anchorEnd);
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
 
-        element.nativeInsertBefore = element.insertBefore;
-        element.nativeAppendChild = element.appendChild;
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
 
         const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
 
         const insertBefore = function(parent, child, target) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            if(parent === element) {
+            if(parent === anchorFragment) {
                 parent.nativeInsertBefore(childElement, target);
                 return;
             }
@@ -1227,32 +1093,32 @@ var NativeDocument = (function (exports) {
             parent.insertBefore(childElement, target);
         };
 
-        element.appendElement = function(child, before = null) {
+        anchorFragment.appendElement = function(child, before = null) {
             const parentNode = anchorStart.parentNode;
             const targetBefore = before || anchorEnd;
-            if(parentNode === element) {
+            if(parentNode === anchorFragment) {
                 parentNode.nativeInsertBefore(child, targetBefore);
                 return;
             }
             parentNode?.insertBefore(child, targetBefore);
         };
 
-        element.appendChild = function(child, before = null) {
+        anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
             insertBefore(parent, child, before);
         };
-        element.append = function(...args ) {
-            return element.appendChild(args);
+        anchorFragment.append = function(...args ) {
+            return anchorFragment.appendChild(args);
         };
 
-        element.removeChildren = function() {
+        anchorFragment.removeChildren = function() {
             const parent = anchorEnd.parentNode;
-            if(parent === element) {
+            if(parent === anchorFragment) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
@@ -1269,26 +1135,26 @@ var NativeDocument = (function (exports) {
             }
             fragment.replaceChildren();
         };
-        element.remove = function() {
+        anchorFragment.remove = function() {
             const parent = anchorEnd.parentNode;
-            if(parent === element) {
+            if(parent === anchorFragment) {
                 return;
             }
             let itemToRemove = anchorStart.nextSibling, tempItem;
             while(itemToRemove && itemToRemove !== anchorEnd) {
                 tempItem = itemToRemove.nextSibling;
-                element.nativeAppendChild(itemToRemove);
+                anchorFragment.nativeAppendChild(itemToRemove);
                 itemToRemove = tempItem;
             }
         };
 
-        element.removeWithAnchors = function() {
-            element.removeChildren();
+        anchorFragment.removeWithAnchors = function() {
+            anchorFragment.removeChildren();
             anchorStart.remove();
             anchorEnd.remove();
         };
 
-        element.replaceContent = function(child) {
+        anchorFragment.replaceContent = function(child) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             const parent = anchorEnd.parentNode;
             if(!parent) {
@@ -1298,31 +1164,31 @@ var NativeDocument = (function (exports) {
                 parent.replaceChildren(anchorStart, childElement, anchorEnd);
                 return;
             }
-            element.removeChildren();
+            anchorFragment.removeChildren();
             parent.insertBefore(childElement, anchorEnd);
         };
 
-        element.setContent = element.replaceContent;
+        anchorFragment.setContent = anchorFragment.replaceContent;
 
-        element.insertBefore = function(child, anchor = null) {
-            element.appendChild(child, anchor);
+        anchorFragment.insertBefore = function(child, anchor = null) {
+            anchorFragment.appendChild(child, anchor);
         };
 
 
-        element.endElement = function() {
+        anchorFragment.endElement = function() {
             return anchorEnd;
         };
 
-        element.startElement = function() {
+        anchorFragment.startElement = function() {
             return anchorStart;
         };
-        element.restore = function() {
-            element.appendChild(element);
+        anchorFragment.restore = function() {
+            anchorFragment.appendChild(anchorFragment);
         };
-        element.clear = element.remove;
-        element.detach = element.remove;
+        anchorFragment.clear = anchorFragment.remove;
+        anchorFragment.detach = anchorFragment.remove;
 
-        element.getByIndex = function(index) {
+        anchorFragment.getByIndex = function(index) {
             let currentNode = anchorStart;
             for(let i = 0; i <= index; i++) {
                 if(!currentNode.nextSibling) {
@@ -1333,7 +1199,7 @@ var NativeDocument = (function (exports) {
             return currentNode !== anchorStart ? currentNode : null;
         };
 
-        return element;
+        return anchorFragment;
     }
     /**
      *
@@ -1358,18 +1224,18 @@ var NativeDocument = (function (exports) {
      * @returns {ObservableItem}
      * @constructor
      */
-    function Observable$1(value, configs = null) {
+    function Observable(value, configs = null) {
         return new ObservableItem(value, configs);
     }
 
-    const $ = Observable$1;
-    const obs = Observable$1;
+    const $ = Observable;
+    const obs = Observable;
 
     /**
      *
      * @param {string} propertyName
      */
-    Observable$1.useValueProperty = function(propertyName = 'value') {
+    Observable.useValueProperty = function(propertyName = 'value') {
         Object.defineProperty(ObservableItem.prototype, propertyName, {
             get() {
                 return this.$currentValue;
@@ -1387,7 +1253,7 @@ var NativeDocument = (function (exports) {
      * @param id
      * @returns {ObservableItem|null}
      */
-    Observable$1.getById = function(id) {
+    Observable.getById = function(id) {
         const item = MemoryManager.getObservableById(parseInt(id));
         if(!item) {
             throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
@@ -1399,7 +1265,7 @@ var NativeDocument = (function (exports) {
      *
      * @param {ObservableItem} observable
      */
-    Observable$1.cleanup = function(observable) {
+    Observable.cleanup = function(observable) {
         observable.cleanup();
     };
 
@@ -1408,7 +1274,7 @@ var NativeDocument = (function (exports) {
      * @param {Boolean} enable
      * @param {{interval:Boolean, threshold:number}} options
      */
-    Observable$1.autoCleanup = function(enable = false, options = {}) {
+    Observable.autoCleanup = function(enable = false, options = {}) {
         if(!enable) {
             return;
         }
@@ -1556,7 +1422,7 @@ var NativeDocument = (function (exports) {
                     continue;
                 }
                 const observables = value.filter(item => Validator.isObservable(item));
-                value = Observable$1.computed(() => {
+                value = Observable.computed(() => {
                     return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
                 }, observables);
             }
@@ -1586,6 +1452,56 @@ var NativeDocument = (function (exports) {
         return element;
     }
 
+    String.prototype.toNdElement = function () {
+        const formattedChild = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
+        if(Validator.isString(formattedChild)) {
+            return ElementCreator.createStaticTextNode(null, formattedChild);
+        }
+        return ElementCreator.getChild(null, formattedChild);
+    };
+
+    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);
+    };
+
+    NDElement.prototype.toNdElement = function () {
+        return this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+    };
+
+    Array.prototype.toNdElement = function () {
+        const fragment = document.createDocumentFragment();
+        for(let i = 0, length = this.length; i < length; i++) {
+            fragment.appendChild(ElementCreator.getChild(this[i]));
+        }
+        return fragment;
+    };
+
+    Function.prototype.toNdElement = function () {
+        const child = this;
+        PluginsManager.emit('BeforeProcessComponent', child);
+        return ElementCreator.getChild(child());
+    };
+
+    TemplateBinding.prototype.toNdElement = function () {
+        return ElementCreator.createHydratableNode(null, this);
+    };
+
     const $nodeCache = new Map();
     let $textNodeCache = null;
 
@@ -1674,41 +1590,18 @@ var NativeDocument = (function (exports) {
             PluginsManager.emit('AfterProcessChildren', parent);
         },
         getChild(child) {
-            if(child === null) {
+            if(child == null) {
                 return null;
             }
-            if(Validator.isString(child)) {
-                child = child.resolveObservableTemplate ? child.resolveObservableTemplate() : child;
-                if(Validator.isString(child)) {
-                    return ElementCreator.createStaticTextNode(null, child);
-                }
-            }
-            if (Validator.isElement(child)) {
-                return child;
-            }
-            if (Validator.isObservable(child)) {
-                return ElementCreator.createObservableNode(null, child);
-            }
-            if(Validator.isNDElement(child)) {
-                return child.$element ?? child.$build?.() ?? null;
-            }
-            if(Validator.$element) {
-                return Validator.$element;
-            }
-            if(Validator.isArray(child)) {
-                const fragment = document.createDocumentFragment();
-                for(let i = 0, length = child.length; i < length; i++) {
-                    fragment.appendChild(this.getChild(child[i]));
-                }
-                return fragment;
-            }
-            if(Validator.isFunction(child)) {
-                PluginsManager.emit('BeforeProcessComponent', child);
-                return this.getChild(child());
-            }
-            if(child?.$hydrate) {
-                return ElementCreator.createHydratableNode(null, child);
+            if(child.toNdElement) {
+                do {
+                    child =  child.toNdElement();
+                    if(Validator.isElement(child)) {
+                        return child;
+                    }
+                } while (child.toNdElement);
             }
+
             return ElementCreator.createStaticTextNode(null, child);
         },
         /**
@@ -1735,10 +1628,97 @@ var NativeDocument = (function (exports) {
         }
     };
 
+    const EVENTS = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseEnter",
+      "MouseLeave",
+      "MouseMove",
+      "MouseOut",
+      "MouseOver",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "KeyUp",
+      "Blur",
+      "Change",
+      "Focus",
+      "Input",
+      "Invalid",
+      "Reset",
+      "Search",
+      "Select",
+      "Submit",
+      "Drag",
+      "DragEnd",
+      "DragEnter",
+      "DragLeave",
+      "DragOver",
+      "DragStart",
+      "Drop",
+      "AfterPrint",
+      "BeforePrint",
+      "BeforeUnload",
+      "Error",
+      "HashChange",
+      "Load",
+      "Offline",
+      "Online",
+      "PageHide",
+      "PageShow",
+      "Resize",
+      "Scroll",
+      "Unload",
+      "Abort",
+      "CanPlay",
+      "CanPlayThrough",
+      "DurationChange",
+      "Emptied",
+      "Ended",
+      "LoadedData",
+      "LoadedMetadata",
+      "LoadStart",
+      "Pause",
+      "Play",
+      "Playing",
+      "Progress",
+      "RateChange",
+      "Seeked",
+      "Seeking",
+      "Stalled",
+      "Suspend",
+      "TimeUpdate",
+      "VolumeChange",
+      "Waiting",
+
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "AnimationEnd",
+      "AnimationIteration",
+      "AnimationStart",
+      "TransitionEnd",
+      "Copy",
+      "Cut",
+      "Paste",
+      "FocusIn",
+      "FocusOut",
+      "ContextMenu"
+    ];
+
+    let createNdElementInstance = (target) => {
+        attachEventPrototypes && attachEventPrototypes();
+        attachEventPrototypes = null;
+        createNdElementInstance = (target) => new NDElement(target);
+        return  new NDElement(target);
+    };
     const property = {
         configurable: true,
         get() {
-            return  new NDElement(this);
+            return createNdElementInstance(this);
         }
     };
 
@@ -1752,6 +1732,75 @@ var NativeDocument = (function (exports) {
         }
     });
 
+
+
+    // ----------------------------------------------------------------
+    // Events helpers
+    // ----------------------------------------------------------------
+
+    let attachEventPrototypes = () => {
+        EVENTS.forEach(eventSourceName => {
+            const eventName = eventSourceName.toLowerCase();
+            NDElement.prototype['on'+eventSourceName] = function(callback) {
+                this.$element.addEventListener(eventName, callback);
+                return this;
+            };
+
+            NDElement.prototype['onPrevent'+eventSourceName] = function(callback) {
+                _prevent(this.$element, eventName, callback);
+                return this;
+            };
+
+            NDElement.prototype['onStop'+eventSourceName] = function(callback) {
+                _stop(this.$element, eventName, callback);
+                return this;
+            };
+
+            NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
+                _preventStop(this.$element, eventName, callback);
+                return this;
+            };
+        });
+    };
+
+    NDElement.prototype.on = function(name, callback, options) {
+        this.$element.addEventListener(name.toLowerCase(), callback, options);
+        return this;
+    };
+
+    const _prevent = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.preventDefault();
+            callback && callback.call(element, event);
+        };
+        element.addEventListener(eventName, handler);
+        return this;
+    };
+
+    const _stop = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.stopPropagation();
+            callback && callback.call(element, event);
+        };
+        element.addEventListener(eventName, handler);
+        return this;
+    };
+
+    const _preventStop = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            callback && callback.call(element, event);
+        };
+        element.addEventListener(eventName, handler);
+        return this;
+    };
+
+
+
+    // ----------------------------------------------------------------
+    // Class attributes binder
+    // ----------------------------------------------------------------
     const classListMethods = {
         getClasses() {
             return this.$element.className?.split(' ').filter(Boolean);
@@ -1968,7 +2017,7 @@ var NativeDocument = (function (exports) {
     const bindAttributes = (node, bindDingData, data) => {
         let attributes = null;
         if(bindDingData.attributes) {
-            attributes = attributes || {};
+            attributes = {};
             for (const attr in bindDingData.attributes) {
                 attributes[attr] = bindDingData.attributes[attr](...data);
             }
@@ -1998,29 +2047,29 @@ var NativeDocument = (function (exports) {
         return null;
     };
 
-    const $hydrateFn = function(hydrateFunction, target, element, property) {
+    const $hydrateFn = function(hydrateFunction, targetType, element, property) {
         if(!cloneBindingsDataCache.has(element)) {
             // { classes, styles, attributes, value, attach }
             cloneBindingsDataCache.set(element, {});
         }
         const hydrationState = cloneBindingsDataCache.get(element);
-        if(target === 'value') {
+        if(targetType === 'value') {
             hydrationState.value = hydrateFunction;
             return;
         }
-        if(target === 'attach') {
-            hydrationState.attach = hydrateFunction;
-            return;
-        }
-        hydrationState[target] = hydrationState[target] || {};
-        hydrationState[target][property] = hydrateFunction;
+        hydrationState[targetType] = hydrationState[targetType] || {};
+        hydrationState[targetType][property] = hydrateFunction;
     };
 
     const bindAttachMethods = function(node, bindDingData, data) {
         if(!bindDingData.attach) {
             return null;
         }
-        bindDingData.attach(node, ...data);
+        for(const methodName in bindDingData.attach) {
+            node.nd[methodName](function(...args) {
+                bindDingData.attach[methodName].call(this, ...[...args, ...data]);
+            });
+        }
     };
 
     function TemplateCloner($fn) {
@@ -2068,13 +2117,11 @@ var NativeDocument = (function (exports) {
         };
 
 
-        const createBinding = (hydrateFunction, target) => {
-            return {
-                $hydrate : (element, property) => {
-                    $hasBindingData = true;
-                    $hydrateFn(hydrateFunction, target, element, property);
-                },
-            }
+        const createBinding = (hydrateFunction, targetType) => {
+            return new TemplateBinding((element, property) => {
+                $hasBindingData = true;
+                $hydrateFn(hydrateFunction, targetType, element, property);
+            });
         };
 
         this.style = (fn) => {
@@ -2205,7 +2252,7 @@ var NativeDocument = (function (exports) {
     String.prototype.use = function(args) {
         const value = this;
 
-        return Observable$1.computed(() => {
+        return Observable.computed(() => {
             return value.replace(/\$\{(.*?)}/g, (match, key) => {
                 const data = args[key];
                 if(Validator.isObservable(data)) {
@@ -2225,7 +2272,7 @@ var NativeDocument = (function (exports) {
                 return value;
             }
             const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
-            return Observable$1.getById(id);
+            return Observable.getById(id);
         });
     };
 
@@ -2694,6 +2741,7 @@ var NativeDocument = (function (exports) {
     };
 
     ObservableArray.prototype = Object.create(ObservableItem.prototype);
+    ObservableArray.prototype.constructor = ObservableArray;
     ObservableArray.prototype.__$isObservableArray = true;
 
     mutationMethods.forEach((method) => {
@@ -2859,7 +2907,7 @@ var NativeDocument = (function (exports) {
      * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
      * @returns {ObservableArray}
      */
-    Observable$1.array = function(target = [], configs = null) {
+    Observable.array = function(target = [], configs = null) {
         return new ObservableArray(target, configs);
     };
 
@@ -2868,8 +2916,8 @@ var NativeDocument = (function (exports) {
      * @param {Function} callback
      * @returns {Function}
      */
-    Observable$1.batch = function(callback) {
-        const $observer = Observable$1(0);
+    Observable.batch = function(callback) {
+        const $observer = Observable(0);
         const batch = function() {
             if(Validator.isAsyncFunction(callback)) {
                 return (callback(...arguments)).then(() => {
@@ -2927,7 +2975,7 @@ var NativeDocument = (function (exports) {
      * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
      * @returns {Proxy}
      */
-    Observable$1.init = function(initialValue, configs = null) {
+    Observable.init = function(initialValue, configs = null) {
         const data = {};
         for(const key in initialValue) {
             const itemValue = initialValue[key];
@@ -2935,24 +2983,24 @@ var NativeDocument = (function (exports) {
                 if(configs?.deep !== false) {
                     const mappedItemValue = itemValue.map(item => {
                         if(Validator.isJson(item)) {
-                            return Observable$1.json(item, configs);
+                            return Observable.json(item, configs);
                         }
                         if(Validator.isArray(item)) {
-                            return Observable$1.array(item, configs);
+                            return Observable.array(item, configs);
                         }
-                        return Observable$1(item, configs);
+                        return Observable(item, configs);
                     });
-                    data[key] = Observable$1.array(mappedItemValue, configs);
+                    data[key] = Observable.array(mappedItemValue, configs);
                     continue;
                 }
-                data[key] = Observable$1.array(itemValue, configs);
+                data[key] = Observable.array(itemValue, configs);
                 continue;
             }
             if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
                 data[key] = itemValue;
                 continue;
             }
-            data[key] = Observable$1(itemValue, configs);
+            data[key] = Observable(itemValue, configs);
         }
 
         const $reset = () => {
@@ -2964,10 +3012,10 @@ var NativeDocument = (function (exports) {
 
         const $val = () => ObservableObjectValue(data);
 
-        const $clone = () => Observable$1.init($val(), configs);
+        const $clone = () => Observable.init($val(), configs);
 
         const $updateWith = (values) => {
-            Observable$1.update(proxy, values);
+            Observable.update(proxy, values);
         };
 
         const $get = (key) => ObservableGet(data, key);
@@ -3005,8 +3053,8 @@ var NativeDocument = (function (exports) {
      * @param {any[]} data
      * @return Proxy[]
      */
-    Observable$1.arrayOfObject = function(data) {
-        return data.map(item => Observable$1.object(item));
+    Observable.arrayOfObject = function(data) {
+        return data.map(item => Observable.object(item));
     };
 
     /**
@@ -3014,7 +3062,7 @@ var NativeDocument = (function (exports) {
      * @param {ObservableItem|Object<ObservableItem>} data
      * @returns {{}|*|null}
      */
-    Observable$1.value = function(data) {
+    Observable.value = function(data) {
         if(Validator.isObservable(data)) {
             return data.val();
         }
@@ -3025,7 +3073,7 @@ var NativeDocument = (function (exports) {
             const result = [];
             for(let i = 0, length = data.length; i < length; i++) {
                 const item = data[i];
-                result.push(Observable$1.value(item));
+                result.push(Observable.value(item));
             }
             return result;
         }
@@ -3033,7 +3081,7 @@ var NativeDocument = (function (exports) {
     };
 
 
-    Observable$1.update = function($target, newData) {
+    Observable.update = function($target, newData) {
         const data = Validator.isProxy(newData) ? newData.$value : newData;
         const configs = $target.configs;
 
@@ -3048,9 +3096,9 @@ var NativeDocument = (function (exports) {
                     if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                         const newValues = newValue.map(item => {
                             if(Validator.isProxy(firstElementFromOriginalValue)) {
-                                return Observable$1.init(item, configs);
+                                return Observable.init(item, configs);
                             }
-                            return Observable$1(item, configs);
+                            return Observable(item, configs);
                         });
                         targetItem.set(newValues);
                         continue;
@@ -3062,15 +3110,15 @@ var NativeDocument = (function (exports) {
                 continue;
             }
             if(Validator.isProxy(targetItem)) {
-                Observable$1.update(targetItem, newValue);
+                Observable.update(targetItem, newValue);
                 continue;
             }
             $target[key] = newValue;
         }
     };
 
-    Observable$1.object = Observable$1.init;
-    Observable$1.json = Observable$1.init;
+    Observable.object = Observable.init;
+    Observable.json = Observable.init;
 
     /**
      *
@@ -3078,10 +3126,10 @@ var NativeDocument = (function (exports) {
      * @param {Array|Function} dependencies
      * @returns {ObservableItem}
      */
-    Observable$1.computed = function(callback, dependencies = []) {
+    Observable.computed = function(callback, dependencies = []) {
         const initialValue = callback();
         const observable = new ObservableItem(initialValue);
-        const updatedValue = () => observable.set(callback());
+        const updatedValue = nextTick(() => observable.set(callback()));
 
         PluginsManager.emit('CreateObservableComputed', observable, dependencies);
 
@@ -3118,7 +3166,7 @@ var NativeDocument = (function (exports) {
              */
             use(name) {
                 const {observer: originalObserver, subscribers } = $stores.get(name);
-                const observerFollower = Observable$1(originalObserver.val());
+                const observerFollower = Observable(originalObserver.val());
                 const unSubscriber = originalObserver.subscribe(value => observerFollower.set(value));
                 const updaterUnsubscriber = observerFollower.subscribe(value => originalObserver.set(value));
                 observerFollower.destroy = () => {
@@ -3144,7 +3192,7 @@ var NativeDocument = (function (exports) {
              * @returns {ObservableItem}
              */
             create(name, value) {
-                const observer = Observable$1(value);
+                const observer = Observable(value);
                 $stores.set(name, { observer, subscribers: new Set()});
                 return observer;
             },
@@ -3235,14 +3283,14 @@ var NativeDocument = (function (exports) {
             }
 
             try {
-                const indexObserver = callback.length >= 2 ? Observable$1(indexKey) : null;
+                const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
                 let child = ElementCreator.getChild(callback(item, indexObserver));
                 if(!child) {
                     throw new NativeDocumentError("ForEach child can't be null or undefined!");
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -3340,12 +3388,14 @@ var NativeDocument = (function (exports) {
             cleanCache();
             lastNumberOfItems = 0;
         };
+
         const getItemKey = (item, indexKey) => {
             if(keysCache.has(item)) {
                 return keysCache.get(item);
             }
             return getKey(item, indexKey, key);
         };
+
         const getItemChild = (item) => {
             return getChildByKey(getItemKey(item));
         };
@@ -3408,7 +3458,7 @@ var NativeDocument = (function (exports) {
                 cache.delete(keyId);
             }
 
-            const indexObserver = isIndexRequired ? Observable$1(indexKey) : null;
+            const indexObserver = isIndexRequired ? Observable(indexKey) : null;
             let child = ElementCreator.getChild(callback(item, indexObserver));
             if(!child) {
                 throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
@@ -3462,9 +3512,9 @@ var NativeDocument = (function (exports) {
             },
             add(items, delay = 2) {
                 const fragment = Actions.toFragment(items);
-                setTimeout(() => {
+                Promise.resolve().then(() => {
                     element.appendElement(fragment);
-                }, delay);
+                });
             },
             replace(items) {
                 clear();
@@ -3614,7 +3664,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -3654,7 +3704,7 @@ var NativeDocument = (function (exports) {
      * @returns {DocumentFragment}
      */
     const HideIf = function(condition, child, configs) {
-        const hideCondition = Observable$1(!condition.val());
+        const hideCondition = Observable(!condition.val());
         condition.subscribe(value => hideCondition.set(!value));
 
         return ShowIf(hideCondition, child, configs);
@@ -4401,7 +4451,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$1.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -4414,7 +4464,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$1.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -4441,7 +4491,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -4529,15 +4579,24 @@ var NativeDocument = (function (exports) {
     function RouterComponent(router, container) {
 
         const $cache = new Map();
+        let $lastNodeInserted  = null;
 
         const updateContainer = function(node, route) {
             container.innerHTML = '';
+            let nodeToInsert = node;
             const layout = route.layout();
+            if(Validator.isNDElement(node)) {
+                nodeToInsert = node.node();
+            }
             if(layout) {
-                container.appendChild(layout(node));
+                container.appendChild(layout(nodeToInsert));
                 return;
             }
-            container.appendChild(node);
+            if(Validator.isAnchor($lastNodeInserted)) {
+                $lastNodeInserted.remove();
+            }
+            container.appendChild(nodeToInsert);
+            $lastNodeInserted = node;
         };
 
         const handleCurrentRouterState = function(state) {
@@ -4595,7 +4654,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -4754,7 +4813,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager$1.error('Router', 'Callback must be a function', e);
+            DebugManager.error('Router', 'Callback must be a function', e);
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -4937,7 +4996,7 @@ var NativeDocument = (function (exports) {
     exports.ElementCreator = ElementCreator;
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
-    exports.Observable = Observable$1;
+    exports.Observable = Observable;
     exports.PluginsManager = PluginsManager;
     exports.SingletonView = SingletonView;
     exports.Store = Store;