native-document 1.0.119 → 1.0.121

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager$2 = {};
+    let DebugManager$1 = {};
 
     {
-        DebugManager$2 = {
+        DebugManager$1 = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager$1 = DebugManager$2;
+    var DebugManager$2 = DebugManager$1;
 
     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$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager$2.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);
         }
     }
 
@@ -561,7 +561,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$2.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -612,23 +612,23 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$2.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$2.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$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager.emit('NDElementExtended', methods);
+            PluginsManager$1.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -779,7 +779,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$2.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -866,7 +866,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1176,7 +1176,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager.emit('CreateObservable', this);
+            PluginsManager$1.emit('CreateObservable', this);
         }
     }
 
@@ -1272,6 +1272,8 @@ var NativeDocument = (function (exports) {
     };
     ObservableItem.prototype.trigger = noneTrigger;
 
+
+    const $setOperation = { action: 'set' };
     ObservableItem.prototype.$updateWithNewValue = function(newValue) {
         newValue = newValue?.__$isObservable ? newValue.val() : newValue;
         if(this.$currentValue === newValue) {
@@ -1280,12 +1282,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager.emit('ObservableBeforeChange', this);
+            PluginsManager$1.emit('ObservableBeforeChange', this);
         }
-        this.trigger();
+        this.trigger($setOperation);
         this.$previousValue = null;
         {
-            PluginsManager.emit('ObservableAfterChange', this);
+            PluginsManager$1.emit('ObservableAfterChange', this);
         }
     };
 
@@ -1363,7 +1365,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager$2.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -1375,7 +1377,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableSubscribe', this);
+            PluginsManager$1.emit('ObservableSubscribe', this);
         }
     };
 
@@ -1486,7 +1488,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableUnsubscribe', this);
+            PluginsManager$1.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -1786,22 +1788,7 @@ var NativeDocument = (function (exports) {
      */
     const bindClassAttribute = (element, data) => {
         for(const className in data) {
-            const value = data[className];
-            if(value.__$isObservable) {
-                element.classes.toggle(className, value.val());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.__$isObservableWhen) {
-                element.classes.toggle(className, value.isActive());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, className);
-                continue;
-            }
-            element.classes.toggle(className, value);
+            data[className].bindClassProperty(element, className);
         }
     };
 
@@ -1871,6 +1858,35 @@ var NativeDocument = (function (exports) {
         element.setAttribute(attributeName, value.val());
     };
 
+
+    const AttributeHandlers = {
+        string: (element, attributeName, value) => element.setAttribute(attributeName, value),
+        number: (element, attributeName, value) => element.setAttribute(attributeName, value),
+        boolean: (element, attributeName, value) => bindBooleanAttribute(element, attributeName, value),
+        object: (element, attributeName, value) => {
+            if(value == null) {
+                return;
+            }
+
+            if(value.handleNdAttribute) {
+                value.handleNdAttribute(element, attributeName);
+                return;
+            }
+
+            if(attributeName === 'class') {
+                bindClassAttribute(element, value);
+                return;
+            }
+            if(attributeName === 'style') {
+                bindStyleAttribute(element, value);
+                return;
+            }
+            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                bindBooleanAttribute(element, attributeName, value);
+            }
+        }
+    };
+
     /**
      *
      * @param {HTMLElement} element
@@ -1885,29 +1901,8 @@ var NativeDocument = (function (exports) {
         for(const originalAttributeName in attributes) {
             const attributeName = originalAttributeName.toLowerCase();
             let value = attributes[originalAttributeName];
-            if(value == null) {
-                continue;
-            }
-            if(value.handleNdAttribute) {
-                value.handleNdAttribute(element, attributeName, value);
-                continue;
-            }
-            if(typeof value ===  'object') {
-                if(attributeName === 'class') {
-                    bindClassAttribute(element, value);
-                    continue;
-                }
-                if(attributeName === 'style') {
-                    bindStyleAttribute(element, value);
-                    continue;
-                }
-            }
-            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-                bindBooleanAttribute(element, attributeName, value);
-                continue;
-            }
-
-            element.setAttribute(attributeName, value);
+            const typeOf = typeof value;
+            AttributeHandlers[typeOf](element, attributeName, value);
         }
         return element;
     };
@@ -1965,7 +1960,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());
     };
@@ -2060,10 +2055,6 @@ var NativeDocument = (function (exports) {
         return this;
     };
 
-    String.prototype.handleNdAttribute = function(element, attributeName) {
-        element.setAttribute(attributeName, this);
-    };
-
     ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
         if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
             bindBooleanAttribute(element, attributeName, this);
@@ -2077,6 +2068,24 @@ var NativeDocument = (function (exports) {
         this.$hydrate(element, attributeName);
     };
 
+    ObservableItem.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this.val());
+        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+    };
+
+    ObservableWhen.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this.isActive());
+        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+    };
+
+    TemplateBinding.prototype.bindClassProperty = function(element, className) {
+        this.$hydrate(element, className);
+    };
+
+    Boolean.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this);
+    };
+
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -2152,14 +2161,14 @@ var NativeDocument = (function (exports) {
         processChildren: (children, parent) => {
             if(children === null) return;
             {
-                PluginsManager.emit('BeforeProcessChildren', parent);
+                PluginsManager$1.emit('BeforeProcessChildren', parent);
             }
             let child = ElementCreator.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager.emit('AfterProcessChildren', parent);
+                PluginsManager$1.emit('AfterProcessChildren', parent);
             }
         },
         async safeRemove(element) {
@@ -2245,29 +2254,51 @@ var NativeDocument = (function (exports) {
         anchor.remove = () => {
             anchor.append.apply(anchor, parent.childNodes);
         };
+        anchor.getParent = () => parent;
 
         anchor.appendChild = (child) => {
             child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.appendChild(child);
         };
 
+        anchor.appendChildRaw = parent.appendChild.bind(parent);
+        anchor.append = anchor.appendChild;
+        anchor.appendRaw = anchor.appendChildRaw;
+
+        anchor.insertAtStart = (child) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
+        };
+        anchor.insertAtStartRaw = (child) => {
+            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
+        };
+
         anchor.appendElement = anchor.appendChild;
 
         anchor.removeChildren = () => {
-            parent.replaceChildren();
+            parent.textContent = '';
         };
 
         anchor.replaceContent = function(content) {
             const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
             parent.replaceChildren(child);
         };
+
+        anchor.replaceContentRaw = function(child) {
+            parent.replaceChildren(child);
+        };
         anchor.setContent = anchor.replaceContent;
 
         anchor.insertBefore = (child, anchor) => {
             child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.insertBefore(child, anchor);
         };
+        anchor.insertBeforeRaw = (child, anchor) => {
+            parent.insertBefore(child, anchor);
+        };
+
         anchor.appendChildBefore = anchor.insertBefore;
+        anchor.appendChildBeforeRaw = anchor.insertBeforeRaw;
 
         anchor.clear = anchor.remove;
         anchor.detach = anchor.remove;
@@ -2293,7 +2324,6 @@ var NativeDocument = (function (exports) {
 
         anchorFragment.onConnectedOnce((parent) => {
             if(isUniqueChild) {
-                console.log('Lets overwrite some functions with parent ', parent);
                 oneChildAnchorOverwriting(anchorFragment, parent);
             }
         });
@@ -2315,15 +2345,19 @@ var NativeDocument = (function (exports) {
 
         const insertBefore = function(parent, child, target) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            insertBeforeRaw(parent, childElement, target);
+        };
+
+        const insertBeforeRaw = function(parent, child, target) {
             if(parent === anchorFragment) {
-                parent.nativeInsertBefore(childElement, target);
+                parent.nativeInsertBefore(child, target);
                 return;
             }
             if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(childElement,  target);
+                parent.append(child,  target);
                 return;
             }
-            parent.insertBefore(childElement, target);
+            parent.insertBefore(child, target);
         };
 
         anchorFragment.appendElement = function(child) {
@@ -2345,8 +2379,32 @@ var NativeDocument = (function (exports) {
             insertBefore(parent, child, before);
         };
 
-        anchorFragment.append = function() {
-            return anchorFragment.appendChild(Array.from(arguments));
+        anchorFragment.appendChildRaw = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBeforeRaw(parent, child, before);
+        };
+
+        anchorFragment.getParent = () => anchorEnd.parentNode;
+        anchorFragment.append = anchorFragment.appendChild;
+        anchorFragment.appendRaw = anchorFragment.appendChildRaw;
+
+        anchorFragment.insertAtStart = function(child) {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            anchorFragment.insertAtStartRaw(child);
+        };
+
+        anchorFragment.insertAtStartRaw = function(child) {
+            const parentNode = anchorStart.parentNode;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, anchorStart);
+                return;
+            }
+            parentNode.insertBefore(child, anchorStart);
         };
 
         anchorFragment.removeChildren = function() {
@@ -2393,6 +2451,10 @@ var NativeDocument = (function (exports) {
 
         anchorFragment.replaceContent = function(child) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            anchorFragment.replaceContentRaw(childElement);
+        };
+
+        anchorFragment.replaceContentRaw = function(child) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
                 return;
@@ -2406,10 +2468,10 @@ var NativeDocument = (function (exports) {
         };
 
         anchorFragment.setContent = anchorFragment.replaceContent;
+        anchorFragment.setContentRaw = anchorFragment.replaceContentRaw;
 
-        anchorFragment.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
+        anchorFragment.insertBefore = anchorFragment.appendChild;
+        anchorFragment.insertBeforeRaw = anchorFragment.appendChildRaw;
 
         anchorFragment.endElement = function() {
             return anchorEnd;
@@ -2984,19 +3046,22 @@ var NativeDocument = (function (exports) {
             }
         }
         if(this.$classes) {
-            const cache = {};
             const keys = Object.keys(this.$classes);
 
             if(keys.length === 1) {
                 const key = keys[0];
                 const callback = this.$classes[key];
                 steps.push((clonedNode, data) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processClassAttribute(clonedNode, cache);
+                    callback.apply(null, data).bindClassProperty(clonedNode, key);
                 });
             } else {
+                const properties = this.$classes;
+                const keysLength = keys.length;
                 steps.push((clonedNode, data) => {
-                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+                    for(let i = 0; i < keysLength; i++) {
+                        const key = keys[i];
+                        properties[key].apply(null, data).bindClassProperty(clonedNode, key);
+                    }
                 });
             }
         }
@@ -3791,7 +3856,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager.emit('CreateObservableArray', this);
+            PluginsManager$1.emit('CreateObservableArray', this);
         }
     };
 
@@ -3820,6 +3885,8 @@ var NativeDocument = (function (exports) {
         };
     });
 
+    const $clearEvent = { action: 'clear' };
+
     /**
      * Removes all items from the array and triggers an update.
      *
@@ -3833,7 +3900,7 @@ var NativeDocument = (function (exports) {
             return;
         }
         this.$currentValue.length = 0;
-        this.trigger({ action: 'clear' });
+        this.trigger($clearEvent);
         return true;
     };
 
@@ -4423,7 +4490,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)) {
@@ -4458,7 +4525,7 @@ var NativeDocument = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$2.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -4471,7 +4538,7 @@ var NativeDocument = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$2.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -4502,7 +4569,7 @@ var NativeDocument = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$2.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.`
                     );
@@ -4523,7 +4590,7 @@ var NativeDocument = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$2.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.`
                     );
@@ -4559,7 +4626,7 @@ var NativeDocument = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$2.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.`
                     );
@@ -4582,7 +4649,7 @@ var NativeDocument = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$2.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -4616,13 +4683,13 @@ var NativeDocument = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$2.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$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$2.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().`
                     );
@@ -4643,7 +4710,7 @@ var NativeDocument = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$2.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.`
                     );
@@ -4710,7 +4777,7 @@ var NativeDocument = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4732,7 +4799,7 @@ var NativeDocument = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$2.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -4834,7 +4901,7 @@ var NativeDocument = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$2.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) {
@@ -4922,7 +4989,7 @@ var NativeDocument = (function (exports) {
                 }
                 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$2.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -5027,7 +5094,7 @@ var NativeDocument = (function (exports) {
     function ForEachArray(data, callback, configs = {}) {
         const element = Anchor('ForEach Array', configs.isParentUniqueChild);
         const blockEnd = element.endElement();
-        const blockStart = element.startElement();
+        element.startElement();
 
         let cache = new Map();
         let lastNumberOfItems = 0;
@@ -5035,6 +5102,9 @@ var NativeDocument = (function (exports) {
 
         const clear = (items) => {
             element.removeChildren();
+            clearCacheOnly(items);
+        };
+        const clearCacheOnly = (items) => {
             cleanCache(items);
             lastNumberOfItems = 0;
         };
@@ -5158,11 +5228,16 @@ var NativeDocument = (function (exports) {
                 return fragment;
             },
             add: (items) => {
-                element.appendElement(Actions.toFragment(items));
+                element.appendChildRaw(Actions.toFragment(items));
             },
             replace: (items) => {
-                clear(items);
-                Actions.add(items);
+                clearCacheOnly(items);
+                element.replaceContentRaw(Actions.toFragment(items));
+            },
+            set: () => {
+                const items = data.val();
+                clearCacheOnly(items);
+                element.replaceContentRaw(Actions.toFragment(items));
             },
             reOrder: (items) => {
                 let child = null;
@@ -5174,23 +5249,12 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 child = null;
-                element.appendElement(fragment, blockEnd);
+                element.appendElementRaw(fragment);
             },
             removeOne: (element, index) => {
                 removeCacheItem(element, true);
             },
             clear,
-            merge: (items) => {
-                Actions.add(items);
-            },
-            push: (items) => {
-                let delay = 0;
-                if(configs.pushDelay) {
-                    delay = configs.pushDelay(items) ?? 0;
-                }
-
-                Actions.add(items, delay);
-            },
             populate: ([target, iteration, callback]) => {
                 const fragment = document.createDocumentFragment();
                 for (let i = 0; i < iteration; i++) {
@@ -5199,11 +5263,11 @@ var NativeDocument = (function (exports) {
                     fragment.append(buildItem(data, i));
                     lastNumberOfItems++;
                 }
-                element.appendChild(fragment);
+                element.appendChildRaw(fragment);
                 fragment.replaceChildren();
             },
             unshift: (values) => {
-                element.insertBefore(Actions.toFragment(values), blockStart.nextSibling);
+                element.insertAtStartRaw(Actions.toFragment(values));
             },
             splice: (args, deleted) => {
                 const [start, deleteCount, ...values] = args;
@@ -5228,7 +5292,7 @@ var NativeDocument = (function (exports) {
                 garbageFragment.replaceChildren();
 
                 if(values && values.length && elementBeforeFirst) {
-                    element.insertBefore(Actions.toFragment(values), elementBeforeFirst.nextSibling);
+                    element.insertBeforeRaw(Actions.toFragment(values), elementBeforeFirst.nextSibling);
                 }
 
             },
@@ -5248,7 +5312,7 @@ var NativeDocument = (function (exports) {
                 Actions.removeOne(deleted);
             },
             swap: (args, elements) => {
-                const parent = blockEnd.parentNode;
+                const parent = element.getParent();
 
                 let childA = getItemChild(elements[0]);
                 let childB = getItemChild(elements[1]);
@@ -5263,37 +5327,22 @@ var NativeDocument = (function (exports) {
                 childB = null;
             }
         };
+        Actions.merge = Actions.add;
+        Actions.push = Actions.add;
 
-        const buildContent = (items, _, operations) => {
-            if(operations?.action === 'clear' || !items.length) {
-                if(lastNumberOfItems === 0) {
-                    return;
-                }
-                clear();
-                return;
-            }
-            selectBuildStrategy(operations?.action);
+        const buildContent = (items, _, operations = {}) => {
+            selectBuildStrategy(operations.action);
 
-            if(!operations?.action) {
-                if(lastNumberOfItems === 0) {
-                    Actions.add(items);
-                    return;
-                }
-                Actions.replace(items);
-            }
-            else if(Actions[operations.action]) {
+            if(Actions[operations.action]) {
                 Actions[operations.action](operations.args, operations.result);
             }
-
             updateIndexObservers(items, 0);
         };
 
         if(data.val().length) {
             buildContent(data.val(), null, {action: null});
         }
-        if(Validator.isObservable(data)) {
-            data.subscribe(buildContent);
-        }
+        data.subscribe(buildContent);
 
         return element;
     }
@@ -5314,7 +5363,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$2.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -6733,7 +6782,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$2.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -6746,7 +6795,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$2.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -6773,7 +6822,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager$2.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -6998,7 +7047,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager$2.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -7176,7 +7225,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager$1.error('Router', 'Callback must be a function');
+            DebugManager$2.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -7380,7 +7429,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;