native-document 1.0.118 → 1.0.119

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

@@ -363,16 +363,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     /**
      *
@@ -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$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;
@@ -1081,7 +1081,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -2093,6 +2093,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 +2355,103 @@ 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.appendChild = (child) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.appendChild(child);
+        };
+
+        anchor.appendElement = anchor.appendChild;
+
+        anchor.removeChildren = () => {
+            parent.replaceChildren();
+        };
+
+        anchor.replaceContent = function(content) {
+            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+            parent.replaceChildren(child);
+        };
+        anchor.setContent = anchor.replaceContent;
+
+        anchor.insertBefore = (child, anchor) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.insertBefore(child, anchor);
+        };
+        anchor.appendChildBefore = anchor.insertBefore;
+
+        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) {
+                console.log('Lets overwrite some functions with parent ', parent);
+                oneChildAnchorOverwriting(anchorFragment, parent);
+            }
+        });
+
         anchorFragment.__Anchor__ = true;
 
         const anchorStart = document.createComment('Anchor Start : '+name);
@@ -2366,8 +2465,7 @@ 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);
@@ -2382,14 +2480,13 @@ var NativeComponents = (function (exports) {
             parent.insertBefore(childElement, 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 +2499,8 @@ var NativeComponents = (function (exports) {
             insertBefore(parent, child, before);
         };
 
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
+        anchorFragment.append = function() {
+            return anchorFragment.appendChild(Array.from(arguments));
         };
 
         anchorFragment.removeChildren = function() {
@@ -2430,6 +2527,7 @@ var NativeComponents = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
+                anchorFragment.append.apply(anchorFragment, parent.childNodes);
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -2474,9 +2572,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 +2904,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 +3001,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) => {
@@ -3787,7 +3889,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$1.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 +3902,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$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -3831,7 +3933,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$1.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 +3954,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$1.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 +3990,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$1.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 +4013,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$1.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 +4047,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$1.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$1.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 +4074,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$1.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 +4141,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4061,7 +4163,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$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -4163,7 +4265,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$1.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) {