native-document 1.0.118 → 1.0.120

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

@@ -372,7 +372,7 @@ var NativeComponents = (function (exports) {
             disable() {}
         };
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$2 = DebugManager$1;
 
     /**
      *
@@ -846,17 +846,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.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.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.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.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;
     };
 
@@ -2093,6 +2095,10 @@ var NativeComponents = (function (exports) {
         return ElementCreator.createStaticTextNode(null, this);
     };
 
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
+
     Element.prototype.toNdElement = function () {
         return this;
     };
@@ -2351,8 +2357,124 @@ var NativeComponents = (function (exports) {
         processStyleAttribute: bindStyleAttribute,
     };
 
+    function AnchorWithSentinel(name) {
+        const instance = Reflect.construct(DocumentFragment, [], AnchorWithSentinel);
+        const sentinel = document.createComment((name || '') + ' Anchor Sentinel');
+        const events = {};
+
+        instance.appendChild(sentinel);
+
+        const observer = new MutationObserver(() => {
+            if (sentinel.parentNode !== instance && !(sentinel.parentNode instanceof DocumentFragment)) {
+                events.connected && events.connected(sentinel.parentNode);
+            }
+        });
+
+        observer.observe(document, { childList: true, subtree: true });
+
+
+        instance.$sentinel = sentinel;
+        instance.$observer = observer;
+        instance.$events = events;
+
+        return instance;
+    }
+
+    AnchorWithSentinel.prototype = Object.create(DocumentFragment.prototype);
+    AnchorWithSentinel.prototype.constructor = AnchorWithSentinel;
+
+    AnchorWithSentinel.prototype.onConnected = function(callback) {
+        this.$events.connected = callback;
+        return this;
+    };
+
+    AnchorWithSentinel.prototype.onConnectedOnce = function(callback) {
+        this.$events.connected = (parent) => {
+            callback(parent);
+            this.$observer.disconnect();
+            this.$events.connectedOnce = null;
+        };
+    };
+
+    function oneChildAnchorOverwriting(anchor, parent) {
+
+        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.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;
+
+        anchor.replaceChildren = function() {
+            parent.replaceChildren(...arguments);
+        };
+
+        anchor.getByIndex = (index) => {
+            return parent.childNodes[index];
+        };
+    }
+
     function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
+        const anchorFragment = new AnchorWithSentinel(name);
+
+        /**
+         * State :
+         * 1. Not injected in the DOM
+         * 2. Injected in the DOM and should be the only child of parent
+         * 3. Injected in the DOM and the parent may have other children
+         */
+
+        anchorFragment.onConnectedOnce((parent) => {
+            if(isUniqueChild) {
+                oneChildAnchorOverwriting(anchorFragment, parent);
+            }
+        });
+
         anchorFragment.__Anchor__ = true;
 
         const anchorStart = document.createComment('Anchor Start : '+name);
@@ -2366,30 +2488,32 @@ var NativeComponents = (function (exports) {
         anchorFragment.nativeAppend = anchorFragment.append;
 
         const isParentUniqueChild = isUniqueChild
-            ? () => true
-            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
+            ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
         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, before = null) {
+        anchorFragment.appendElement = function(child) {
             const parentNode = anchorStart.parentNode;
-            const targetBefore = before || anchorEnd;
             if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, targetBefore);
+                parentNode.nativeInsertBefore(child, anchorEnd);
                 return;
             }
-            parentNode?.insertBefore(child, targetBefore);
+            parentNode.insertBefore(child, anchorEnd);
         };
 
         anchorFragment.appendChild = function(child, before = null) {
@@ -2402,8 +2526,32 @@ var NativeComponents = (function (exports) {
             insertBefore(parent, child, before);
         };
 
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
+        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() {
@@ -2430,6 +2578,7 @@ var NativeComponents = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
+                anchorFragment.append.apply(anchorFragment, parent.childNodes);
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -2449,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;
@@ -2462,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;
@@ -2474,9 +2627,11 @@ var NativeComponents = (function (exports) {
         anchorFragment.startElement = function() {
             return anchorStart;
         };
+
         anchorFragment.restore = function() {
             anchorFragment.appendChild(anchorFragment);
         };
+
         anchorFragment.clear = anchorFragment.remove;
         anchorFragment.detach = anchorFragment.remove;
 
@@ -2804,9 +2959,10 @@ var NativeComponents = (function (exports) {
      * @returns {Text}
      */
     const createTextNode = (value) => {
-        return (Validator.isObservable(value))
-            ? ElementCreator.createObservableNode(null, value)
-            : ElementCreator.createStaticTextNode(null, value);
+        if(value) {
+            return value.toNdElement();
+        }
+        return ElementCreator.createTextNode();
     };
 
 
@@ -2900,8 +3056,9 @@ var NativeComponents = (function (exports) {
             const methods = Object.keys(this.$ndMethods);
             if(methods.length === 1) {
                 const methodName = methods[0];
+                const callback = this.$ndMethods[methodName];
                 steps.push((clonedNode, data) => {
-                    clonedNode.nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
+                    clonedNode.nd[methodName](callback.bind(clonedNode, ...data));
                 });
             } else {
                 steps.push((clonedNode, data) => {
@@ -3152,6 +3309,8 @@ var NativeComponents = (function (exports) {
         };
     });
 
+    const $clearEvent = { action: 'clear' };
+
     /**
      * Removes all items from the array and triggers an update.
      *
@@ -3165,7 +3324,7 @@ var NativeComponents = (function (exports) {
             return;
         }
         this.$currentValue.length = 0;
-        this.trigger({ action: 'clear' });
+        this.trigger($clearEvent);
         return true;
     };
 
@@ -3787,7 +3946,7 @@ var NativeComponents = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$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.`
                 );
@@ -3800,7 +3959,7 @@ var NativeComponents = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager.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.`
                 );
@@ -3831,7 +3990,7 @@ var NativeComponents = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$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.`
                     );
@@ -3852,7 +4011,7 @@ var NativeComponents = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.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.`
                     );
@@ -3888,7 +4047,7 @@ var NativeComponents = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager.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.`
                     );
@@ -3911,7 +4070,7 @@ var NativeComponents = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager.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.`
                         );
@@ -3945,13 +4104,13 @@ var NativeComponents = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$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.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().`
                     );
@@ -3972,7 +4131,7 @@ var NativeComponents = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$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.`
                     );
@@ -4039,7 +4198,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4061,7 +4220,7 @@ var NativeComponents = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.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());
@@ -4163,7 +4322,7 @@ var NativeComponents = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$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) {