native-document 1.0.76 → 1.0.78

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;
 
     const MemoryManager = (function() {
 
@@ -84,7 +84,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`);
                 }
             }
         };
@@ -207,7 +207,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);
                         }
                     }
                 }
@@ -259,15 +259,18 @@ var NativeDocument = (function (exports) {
      * @returns {*}
      */
     const getKey = (item, defaultKey, key) => {
-        if(Validator.isFunction(key)) return key(item, defaultKey);
-        if(Validator.isObservable(item)) {
-            const val = item.val();
-            return (val && key) ? val[key] : defaultKey;
+        if (Validator.isString(key)) {
+            const val = Validator.isObservable(item) ? item.val() : item;
+            const result = val?.[key];
+            return Validator.isObservable(result) ? result.val() : (result ?? defaultKey);
         }
-        if(!Validator.isObject(item)) {
-            return item;
+
+        if (Validator.isFunction(key)) {
+            return key(item, defaultKey);
         }
-        return item[key]?.val?.() ??  item[key] ?? defaultKey;
+
+        const val = Validator.isObservable(item) ? item.val() : item;
+        return val ?? defaultKey;
     };
 
     const trim = function(str, char) {
@@ -503,7 +506,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback, target = null) {
         this.$listeners = this.$listeners ?? [];
         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') {
@@ -856,7 +859,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);
             }
@@ -890,17 +893,17 @@ 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;
@@ -1050,6 +1053,7 @@ var NativeDocument = (function (exports) {
     };
     {
         Validator.validateAttributes = function(attributes) {
+            console.log('AttributesWrapper', attributes);
             if (!attributes || typeof attributes !== 'object') {
                 return attributes;
             }
@@ -1058,7 +1062,7 @@ 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;
@@ -1106,7 +1110,7 @@ var NativeDocument = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
@@ -1215,7 +1219,38 @@ var NativeDocument = (function (exports) {
         return anchor;
     }
 
-    const BOOLEAN_ATTRIBUTES = ['checked', 'selected', 'disabled', 'readonly', 'required', 'autofocus', 'multiple', 'autocomplete', 'hidden', 'contenteditable', 'spellcheck', 'translate', 'draggable', 'async', 'defer', 'autoplay', 'controls', 'loop', 'muted', 'download', 'reversed', 'open', 'default', 'formnovalidate', 'novalidate', 'scoped', 'itemscope', 'allowfullscreen', 'allowpaymentrequest', 'playsinline'];
+    const BOOLEAN_ATTRIBUTES = new Set([
+        'checked',
+        'selected',
+        'disabled',
+        'readonly',
+        'required',
+        'autofocus',
+        'multiple',
+        'autocomplete',
+        'hidden',
+        'contenteditable',
+        'spellcheck',
+        'translate',
+        'draggable',
+        'async',
+        'defer',
+        'autoplay',
+        'controls',
+        'loop',
+        'muted',
+        'download',
+        'reversed',
+        'open',
+        'default',
+        'formnovalidate',
+        'novalidate',
+        'scoped',
+        'itemscope',
+        'allowfullscreen',
+        'allowpaymentrequest',
+        'playsinline'
+    ]);
 
     /**
      *
@@ -1287,6 +1322,20 @@ var NativeDocument = (function (exports) {
         setInterval(() => MemoryManager.cleanObservables(threshold), interval);
     };
 
+    ObservableItem.prototype.bindNdClass = function(element, className) {
+        element.classes.toggle(className, this.val());
+        this.subscribe(toggleElementClass.bind(null, element, className));
+    };
+
+    ObservableWhen.prototype.bindNdClass = function(element, className) {
+        element.classes.toggle(className, this.isMath());
+        this.subscribe(toggleElementClass.bind(null, element, className));
+    };
+
+    TemplateBinding.prototype.bindNdClass = function(element, className) {
+        this.$hydrate(element, className);
+    };
+
     function toggleElementClass(element, className, shouldAdd) {
         element.classes.toggle(className, shouldAdd);
     }
@@ -1319,18 +1368,8 @@ var NativeDocument = (function (exports) {
     function bindClassAttribute(element, data) {
         for(let className in data) {
             const value = data[className];
-            if(Validator.isObservable(value)) {
-                element.classes.toggle(className, value.val());
-                value.subscribe(toggleElementClass.bind(null, element, className));
-                continue;
-            }
-            if(Validator.isObservableWhenResult(value)) {
-                element.classes.toggle(className, value.isMath());
-                value.subscribe(toggleElementClass.bind(null, element, className));
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, className);
+            if(value?.bindNdClass) {
+                value.bindNdClass(element, className);
                 continue;
             }
             element.classes.toggle(className, value);
@@ -1400,6 +1439,12 @@ var NativeDocument = (function (exports) {
         }
     }
 
+    const NdBindings = {
+        class: (element, value) => bindClassAttribute(element, value),
+        style: (element, value) => bindStyleAttribute(element, value),
+    };
+
+
     /**
      *
      * @param {HTMLElement} element
@@ -1415,41 +1460,27 @@ var NativeDocument = (function (exports) {
 
         for(let key in attributes) {
             const attributeName = key.toLowerCase();
-            let value = attributes[attributeName];
-            if(value === null || value === undefined) {
+            let value = attributes[key];
+            if(value == null) {
                 continue;
             }
             if(value.handleNdAttribute) {
                 value.handleNdAttribute(element, attributeName, value);
                 continue;
             }
-            if(Validator.isString(value)) {
-                element.setAttribute(attributeName, value);
-                return;
-            }
-            if(attributeName === 'class' && Validator.isObject(value)) {
-                bindClassAttribute(element, value);
-                continue;
-            }
-            if(attributeName === 'style' && Validator.isObject(value)) {
-                bindStyleAttribute(element, value);
-                continue;
+            if(typeof value === 'object') {
+                const binding = NdBindings[attributeName];
+                if(binding) {
+                    binding(element, value);
+                    continue;
+                }
             }
-            if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
                 continue;
             }
-            if(Validator.isObservable(value)) {
-                bindAttributeWithObservable(element, attributeName, value);
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, attributeName);
-                continue;
-            }
 
             element.setAttribute(attributeName, value);
-
         }
         return element;
     }
@@ -1510,7 +1541,20 @@ var NativeDocument = (function (exports) {
         element.setAttribute(attributeName, this);
     };
 
+    Number.prototype.handleNdAttribute = function(element, attributeName) {
+        element.setAttribute(attributeName, this);
+    };
+
+    Boolean.prototype.handleNdAttribute = function(element, attrName) {
+        bindBooleanAttribute(element, attrName, this);
+    };
+
     ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+            bindBooleanAttribute(element, attributeName, this);
+            return;
+        }
+
         bindAttributeWithObservable(element, attributeName, this);
     };
 
@@ -1596,19 +1640,14 @@ var NativeDocument = (function (exports) {
             PluginsManager.emit('AfterProcessChildren', parent);
         },
         getChild(child) {
-            if(child == null) {
-                return null;
-            }
-            if(child.toNdElement) {
-                do {
-                    child =  child.toNdElement();
-                    if(Validator.isElement(child)) {
-                        return child;
-                    }
-                } while (child.toNdElement);
+            while (child?.toNdElement) {
+                child = child.toNdElement();
+
+                if (Validator.isElement(child)) return child;
+                if (!child) return null;
             }
 
-            return ElementCreator.createStaticTextNode(null, child);
+            return child ? ElementCreator.createStaticTextNode(null, child) : null;
         },
         /**
          *
@@ -1715,22 +1754,85 @@ var NativeDocument = (function (exports) {
       "ContextMenu"
     ];
 
-    let createNdElementInstance = (target) => {
-        attachEventPrototypes && attachEventPrototypes();
-        attachEventPrototypes = null;
-        createNdElementInstance = (target) => new NDElement(target);
-        return  new NDElement(target);
-    };
+    const EVENTS_WITH_PREVENT = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "Invalid",
+      "Reset",
+      "Submit",
+      "DragOver",
+      "Drop",
+      "BeforeUnload",
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "Copy",
+      "Cut",
+      "Paste",
+      "ContextMenu"
+    ];
+
+    const EVENTS_WITH_STOP =  [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseMove",
+      "MouseOut",
+      "MouseOver",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "KeyUp",
+      "Change",
+      "Input",
+      "Invalid",
+      "Reset",
+      "Search",
+      "Select",
+      "Submit",
+      "Drag",
+      "DragEnd",
+      "DragEnter",
+      "DragLeave",
+      "DragOver",
+      "DragStart",
+      "Drop",
+      "BeforeUnload",
+      "HashChange",
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "AnimationEnd",
+      "AnimationIteration",
+      "AnimationStart",
+      "TransitionEnd",
+      "Copy",
+      "Cut",
+      "Paste",
+      "FocusIn",
+      "FocusOut",
+      "ContextMenu"
+    ];
+
     const property = {
         configurable: true,
         get() {
-            return createNdElementInstance(this);
+            return new NDElement(this);
         }
     };
 
     Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
     Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+
     Object.defineProperty(NDElement.prototype, 'nd', {
         configurable: true,
         get: function() {
@@ -1743,31 +1845,29 @@ var NativeDocument = (function (exports) {
     // ----------------------------------------------------------------
     // Events helpers
     // ----------------------------------------------------------------
+    EVENTS.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+    });
 
-    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;
-            };
+    EVENTS_WITH_STOP.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
+            _stop(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
-            NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
-                _preventStop(this.$element, eventName, callback);
-                return this;
-            };
-        });
-    };
+    EVENTS_WITH_PREVENT.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
+            _prevent(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
     NDElement.prototype.on = function(name, callback, options) {
         this.$element.addEventListener(name.toLowerCase(), callback, options);
@@ -1792,16 +1892,6 @@ var NativeDocument = (function (exports) {
         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;
-    };
-
 
 
     // ----------------------------------------------------------------
@@ -2025,7 +2115,7 @@ var NativeDocument = (function (exports) {
         if(bindDingData.attributes) {
             attributes = {};
             for (const attr in bindDingData.attributes) {
-                attributes[attr] = bindDingData.attributes[attr](...data);
+                attributes[attr] = bindDingData.attributes[attr].apply(null, data);
             }
         }
 
@@ -2033,7 +2123,7 @@ var NativeDocument = (function (exports) {
             attributes = attributes || {};
             attributes.class = {};
             for (const className in bindDingData.classes) {
-                attributes.class[className] = bindDingData.classes[className](...data);
+                attributes.class[className] = bindDingData.classes[className].apply(null, data);
             }
         }
 
@@ -2041,7 +2131,7 @@ var NativeDocument = (function (exports) {
             attributes = attributes || {};
             attributes.style = {};
             for (const property in bindDingData.styles) {
-                attributes.style[property] = bindDingData.styles[property](...data);
+                attributes.style[property] = bindDingData.styles[property].apply(null, data);
             }
         }
 
@@ -2053,6 +2143,14 @@ var NativeDocument = (function (exports) {
         return null;
     };
 
+    const findByPath = (root, path) => {
+        let target = root;
+        for (let i = 0, len = path.length; i < len; i++) {
+            target = target.childNodes[path[i]];
+        }
+        return target;
+    };
+
     const $hydrateFn = function(hydrateFunction, targetType, element, property) {
         if(!cloneBindingsDataCache.has(element)) {
             // { classes, styles, attributes, value, attach }
@@ -2073,7 +2171,7 @@ var NativeDocument = (function (exports) {
         }
         for(const methodName in bindDingData.attach) {
             node.nd[methodName](function(...args) {
-                bindDingData.attach[methodName].call(this, ...[...args, ...data]);
+                bindDingData.attach[methodName].apply(this, [...args, ...data]);
             });
         }
     };
@@ -2082,44 +2180,78 @@ var NativeDocument = (function (exports) {
         let $node = null;
         let $hasBindingData = false;
 
-        const clone = (node, data) => {
+        const $bindingPaths = [];
+
+        const clone = (node, data, path) => {
             const bindDingData = cloneBindingsDataCache.get(node);
             if(node.nodeType === 3) {
                 if(bindDingData && bindDingData.value) {
+                    $bindingPaths.push({
+                        path: [...path],
+                        fn: (data, targetNode, currentRoot) => {
+                            const newNode = bindDingData.value(data);
+                            targetNode.replaceWith(newNode);
+                            if (targetNode === currentRoot) {
+                                return newNode;
+                            }
+                            return null;
+                        }
+                    });
                     return bindDingData.value(data);
                 }
                 return node.cloneNode(true);
             }
             const nodeCloned = node.cloneNode(node.fullCloneNode);
+            if(node.fullCloneNode) {
+                return nodeCloned;
+            }
             if(bindDingData) {
                 bindAttributes(nodeCloned, bindDingData, data);
                 bindAttachMethods(nodeCloned, bindDingData, data);
-            }
-            if(node.fullCloneNode) {
-                return nodeCloned;
+                $bindingPaths.push({
+                    path: [...path],
+                    fn: (data, targetNode) => {
+                        bindAttributes(targetNode, bindDingData, data);
+                        bindAttachMethods(targetNode, bindDingData, data);
+                    }
+                });
             }
             const childNodes = node.childNodes;
             for(let i = 0, length = childNodes.length; i < length; i++) {
                 const childNode = childNodes[i];
-                const childNodeCloned = clone(childNode, data);
+                path.push(i);
+                const childNodeCloned = clone(childNode, data, path);
+                path.pop();
                 nodeCloned.appendChild(childNodeCloned);
             }
             return nodeCloned;
         };
 
-        this.clone = (data) => {
-            if(!$node) {
-                $node = $fn(this);
-                if(!$hasBindingData) {
-                    const nodeCloned = $node.cloneNode(true);
-                    nodeCloned.fullCloneNode = true;
-                    return nodeCloned;
+        const cloneWithBindingPaths = (data) => {
+            let root = $node.cloneNode(true);
+
+            for (let i = 0, len = $bindingPaths.length; i < len; i++) {
+                const binding = $bindingPaths[i];
+                const target = findByPath(root, binding.path);
+                const newRoot = binding.fn(data, target, root);
+                if(newRoot) {
+                    root = newRoot;
                 }
             }
+
+            return root;
+        };
+
+        this.clone = (data) => {
+            $node = $fn(this);
             if(!$hasBindingData) {
+                this.clone = () => $node.cloneNode(true);
                 return $node.cloneNode(true);
             }
-            return clone($node, data);
+
+            const firstClone = clone($node, data, []);
+            this.clone = cloneWithBindingPaths;
+            return firstClone;
         };
 
 
@@ -2178,6 +2310,7 @@ var NativeDocument = (function (exports) {
             return wrapper([_, __, ...args]);
         };
     }
+    w;
 
     function SingletonView($viewCreator) {
         let $cacheNode = null;
@@ -2750,6 +2883,13 @@ var NativeDocument = (function (exports) {
     ObservableArray.prototype.constructor = ObservableArray;
     ObservableArray.prototype.__$isObservableArray = true;
 
+
+    Object.defineProperty(ObservableArray.prototype, 'length', {
+        get() {
+            return this.$currentValue.length;
+        }
+    });
+
     mutationMethods.forEach((method) => {
         ObservableArray.prototype[method] = function(...values) {
             const result = this.$currentValue[method](...values);
@@ -2765,6 +2905,9 @@ var NativeDocument = (function (exports) {
     });
 
     ObservableArray.prototype.clear = function() {
+        if(this.$currentValue.length === 0) {
+            return;
+        }
         this.$currentValue.length = 0;
         this.trigger({ action: 'clear' });
         return true;
@@ -2794,10 +2937,6 @@ var NativeDocument = (function (exports) {
         return count;
     };
 
-    ObservableArray.prototype.length = function() {
-        return this.$currentValue.length;
-    };
-
     ObservableArray.prototype.swap = function(indexA, indexB) {
         const value = this.$currentValue;
         const length = value.length;
@@ -3296,7 +3435,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;
@@ -3378,7 +3517,7 @@ var NativeDocument = (function (exports) {
         return element;
     }
 
-    function ForEachArray(data, callback, key, configs = {}) {
+    function ForEachArray(data, callback, configs = {}) {
         const element = Anchor('ForEach Array');
         const blockEnd = element.endElement();
         const blockStart = element.startElement();
@@ -3387,23 +3526,14 @@ var NativeDocument = (function (exports) {
         let lastNumberOfItems = 0;
         const isIndexRequired = callback.length >= 2;
 
-        const keysCache = new WeakMap();
-
-        const clear = () => {
+        const clear = (items) => {
             element.removeChildren();
-            cleanCache();
+            cleanCache(items);
             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));
+            return cache.get(item)?.child;
         };
 
         const updateIndexObservers = (items, startFrom = 0) => {
@@ -3412,16 +3542,17 @@ var NativeDocument = (function (exports) {
             }
             let index = startFrom;
             for(let i = startFrom, length = items?.length; i < length; i++) {
-                const cacheItem = cache.get(getItemKey(items[i], i));
+                const cacheItem = cache.get(items[i]);
                 if(!cacheItem) {
                     continue;
                 }
-                cacheItem.indexObserver?.deref()?.set(index);
+                cacheItem.indexObserver?.set(index);
                 index++;
             }
         };
 
-        const removeCacheItem = (cacheItem, removeChild = true) => {
+        const removeCacheItem = (item, removeChild = true) => {
+            const cacheItem = cache.get(item);
             if(!cacheItem) {
                 return;
             }
@@ -3430,14 +3561,10 @@ var NativeDocument = (function (exports) {
                 child?.remove();
                 cache.delete(cacheItem.keyId);
             }
-            cacheItem.indexObserver?.deref()?.cleanup();
-        };
-
-        const removeCacheItemByKey = (keyId, removeChild = true) => {
-            removeCacheItem(cache.get(keyId), removeChild);
+            cacheItem.indexObserver?.cleanup();
         };
 
-        const cleanCache = () => {
+        const cleanCache = (items) => {
             if(configs.shouldKeepItemsInCache) {
                 return;
             }
@@ -3445,53 +3572,41 @@ var NativeDocument = (function (exports) {
                 cache.clear();
                 return;
             }
-            for (const [keyId, cacheItem] of cache.entries()) {
-                removeCacheItem(cacheItem, false);
+            for (const [itemAsKey, _] of cache.entries()) {
+                if(items && items.contains(itemAsKey)) {
+                    continue;
+                }
+                removeCacheItem(itemAsKey, false);
             }
             cache.clear();
         };
 
         const buildItem = (item, indexKey) => {
-            const keyId = getItemKey(item, indexKey);
-
-            if(cache.has(keyId)) {
-                const cacheItem = cache.get(keyId);
-                cacheItem.indexObserver?.deref()?.set(indexKey);
+            const cacheItem = cache.get(item);
+            if(cacheItem) {
+                cacheItem.indexObserver?.set(indexKey);
                 const child = cacheItem.child;
                 if(child) {
                     return child;
                 }
-                cache.delete(keyId);
+                cache.delete(item);
             }
 
             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!");
-            }
-            cache.set(keyId, {
-                keyId,
-                child: child,
-                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
-            });
-            keysCache.set(item, keyId);
-            return child;
-        };
-        const getChildByKey = function(keyId) {
-            const cacheItem = cache.get(keyId);
-            if(!cacheItem) {
-                return null;
-            }
-            const child = cacheItem.child;
-            if(!child) {
-                removeCacheItem(cacheItem, false);
-                return null;
+            if(child) {
+                cache.set(item, {
+                    child,
+                    indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
+                });
+                return child;
             }
-            return child;
+
+            throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
         };
 
-        const removeByKey = function(keyId, fragment) {
-            const cacheItem = cache.get(keyId);
+        const removeByItem = function(item, fragment) {
+            const cacheItem = cache.get(item);
             if(!cacheItem) {
                 return null;
             }
@@ -3517,11 +3632,10 @@ var NativeDocument = (function (exports) {
                 return fragment;
             },
             add(items, delay = 2) {
-                const fragment = Actions.toFragment(items);
-                element.appendElement(fragment);
+                element.appendElement(Actions.toFragment(items));
             },
             replace(items) {
-                clear();
+                clear(items);
                 Actions.add(items);
             },
             reOrder(items) {
@@ -3537,7 +3651,7 @@ var NativeDocument = (function (exports) {
                 element.appendElement(fragment, blockEnd);
             },
             removeOne(element, index) {
-                removeCacheItemByKey(getItemKey(element, index), true);
+                removeCacheItem(element, true);
             },
             clear,
             merge(items) {
@@ -3571,16 +3685,15 @@ var NativeDocument = (function (exports) {
                 const garbageFragment = document.createDocumentFragment();
 
                 if(deleted.length > 0) {
-                    let firstKey = getItemKey(deleted[0], start);
+                    let firstItem = deleted[0];
                     if(deleted.length === 1) {
-                        removeByKey(firstKey, garbageFragment);
+                        removeByItem(firstItem, garbageFragment);
                     } else if(deleted.length > 1) {
-                        const firstChildRemoved = getChildByKey(firstKey);
+                        const firstChildRemoved = getItemChild(deleted[0]);
                         elementBeforeFirst = firstChildRemoved?.previousSibling;
 
                         for(let i = 0; i < deleted.length; i++) {
-                            const keyId = getItemKey(deleted[i], start + i);
-                            removeByKey(keyId, garbageFragment);
+                            firstItem(deleted[i], garbageFragment);
                         }
                     }
                 } else {
@@ -3668,7 +3781,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 || ''));
 
@@ -4455,7 +4568,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);
             }
         };
         /**
@@ -4468,7 +4581,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() {
@@ -4495,7 +4608,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));
@@ -4658,7 +4771,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);
                 }
             }
         };
@@ -4817,7 +4930,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager.error('Router', 'Callback must be a function', e);
+            DebugManager$1.error('Router', 'Callback must be a function', e);
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);