native-document 1.0.119 → 1.0.120

package/dist/native-document.components.min.js

@@ -363,16 +363,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$2 = {};
+    let DebugManager$1 = {};
     {
-        DebugManager$2 = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager$2;
+    var DebugManager$2 = DebugManager$1;
 
     /**
      *
@@ -846,17 +846,17 @@ var NativeComponents = (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;
@@ -1081,7 +1081,7 @@ var NativeComponents = (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`);
                 }
             }
         };
@@ -1486,6 +1486,8 @@ var NativeComponents = (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) {
@@ -1493,7 +1495,7 @@ var NativeComponents = (function (exports) {
         }
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
-        this.trigger();
+        this.trigger($setOperation);
         this.$previousValue = null;
     };
 
@@ -2399,29 +2401,51 @@ var NativeComponents = (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;
@@ -2447,7 +2471,6 @@ var NativeComponents = (function (exports) {
 
         anchorFragment.onConnectedOnce((parent) => {
             if(isUniqueChild) {
-                console.log('Lets overwrite some functions with parent ', parent);
                 oneChildAnchorOverwriting(anchorFragment, parent);
             }
         });
@@ -2469,15 +2492,19 @@ var NativeComponents = (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) {
@@ -2499,8 +2526,32 @@ var NativeComponents = (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() {
@@ -2547,6 +2598,10 @@ var NativeComponents = (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;
@@ -2560,10 +2615,10 @@ var NativeComponents = (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;
@@ -3254,6 +3309,8 @@ var NativeComponents = (function (exports) {
         };
     });
 
+    const $clearEvent = { action: 'clear' };
+
     /**
      * Removes all items from the array and triggers an update.
      *
@@ -3267,7 +3324,7 @@ var NativeComponents = (function (exports) {
             return;
         }
         this.$currentValue.length = 0;
-        this.trigger({ action: 'clear' });
+        this.trigger($clearEvent);
         return true;
     };
 
@@ -3889,7 +3946,7 @@ var NativeComponents = (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.`
                 );
@@ -3902,7 +3959,7 @@ var NativeComponents = (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.`
                 );
@@ -3933,7 +3990,7 @@ var NativeComponents = (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.`
                     );
@@ -3954,7 +4011,7 @@ var NativeComponents = (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.`
                     );
@@ -3990,7 +4047,7 @@ var NativeComponents = (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.`
                     );
@@ -4013,7 +4070,7 @@ var NativeComponents = (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.`
                         );
@@ -4047,13 +4104,13 @@ var NativeComponents = (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().`
                     );
@@ -4074,7 +4131,7 @@ var NativeComponents = (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.`
                     );
@@ -4141,7 +4198,7 @@ var NativeComponents = (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;
@@ -4163,7 +4220,7 @@ var NativeComponents = (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());
@@ -4265,7 +4322,7 @@ var NativeComponents = (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) {