native-document 1.0.118 → 1.0.119

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
 
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -382,7 +382,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                             }
                         }
                     }
@@ -561,7 +561,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -612,17 +612,17 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -779,7 +779,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -866,7 +866,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1363,7 +1363,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -1922,6 +1922,10 @@ var NativeDocument = (function (exports) {
         return ElementCreator.createStaticTextNode(null, this);
     };
 
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
+
     Element.prototype.toNdElement = function () {
         return this;
     };
@@ -2197,8 +2201,103 @@ var NativeDocument = (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);
@@ -2212,8 +2311,7 @@ var NativeDocument = (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);
@@ -2228,14 +2326,13 @@ var NativeDocument = (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) {
@@ -2248,8 +2345,8 @@ var NativeDocument = (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() {
@@ -2276,6 +2373,7 @@ var NativeDocument = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
+                anchorFragment.append.apply(anchorFragment, parent.childNodes);
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -2320,9 +2418,11 @@ var NativeDocument = (function (exports) {
         anchorFragment.startElement = function() {
             return anchorStart;
         };
+
         anchorFragment.restore = function() {
             anchorFragment.appendChild(anchorFragment);
         };
+
         anchorFragment.clear = anchorFragment.remove;
         anchorFragment.detach = anchorFragment.remove;
 
@@ -2773,9 +2873,10 @@ var NativeDocument = (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();
     };
 
 
@@ -2869,8 +2970,9 @@ var NativeDocument = (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) => {
@@ -4356,7 +4458,7 @@ var NativeDocument = (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.`
                 );
@@ -4369,7 +4471,7 @@ var NativeDocument = (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.`
                 );
@@ -4400,7 +4502,7 @@ var NativeDocument = (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.`
                     );
@@ -4421,7 +4523,7 @@ var NativeDocument = (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.`
                     );
@@ -4457,7 +4559,7 @@ var NativeDocument = (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.`
                     );
@@ -4480,7 +4582,7 @@ var NativeDocument = (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.`
                         );
@@ -4514,13 +4616,13 @@ var NativeDocument = (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().`
                     );
@@ -4541,7 +4643,7 @@ var NativeDocument = (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.`
                     );
@@ -4608,7 +4710,7 @@ var NativeDocument = (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;
@@ -4630,7 +4732,7 @@ var NativeDocument = (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());
@@ -4732,7 +4834,7 @@ var NativeDocument = (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) {
@@ -4820,7 +4922,7 @@ var NativeDocument = (function (exports) {
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -5011,21 +5113,23 @@ var NativeDocument = (function (exports) {
         };
 
 
-        const cleanCache = (items) => {
-            if(!isIndexRequired) {
-                cache.clear();
-                return;
-            }
-            if(configs.shouldKeepItemsInCache) {
-                return;
-            }
-            for (const [itemAsKey, _] of cache.entries()) {
-                if(items && items.includes(itemAsKey)) {
-                    continue;
+        let cleanCache;
+
+        if(!isIndexRequired) {
+            cleanCache = cache.clear.bind(cache);
+        }
+        else if(configs.shouldKeepItemsInCache) {
+            cleanCache = () => {};
+        } else {
+            cleanCache = (items) => {
+                for (const [itemAsKey, _] of cache.entries()) {
+                    if(items && items.includes(itemAsKey)) {
+                        continue;
+                    }
+                    removeCacheItem(itemAsKey, false);
                 }
-                removeCacheItem(itemAsKey, false);
-            }
-        };
+            };
+        }
 
         const removeByItem = (item, fragment) => {
             const cacheItem = cache.get(item);
@@ -5045,7 +5149,7 @@ var NativeDocument = (function (exports) {
         };
 
         const Actions = {
-            toFragment(items){
+            toFragment: (items) =>{
                 const fragment = document.createDocumentFragment();
                 for(let i = 0, length = items.length; i < length; i++) {
                     fragment.appendChild(buildItem(items[i], lastNumberOfItems));
@@ -5053,14 +5157,14 @@ var NativeDocument = (function (exports) {
                 }
                 return fragment;
             },
-            add(items) {
+            add: (items) => {
                 element.appendElement(Actions.toFragment(items));
             },
-            replace(items) {
+            replace: (items) => {
                 clear(items);
                 Actions.add(items);
             },
-            reOrder(items) {
+            reOrder: (items) => {
                 let child = null;
                 const fragment = document.createDocumentFragment();
                 for(const item of items) {
@@ -5072,14 +5176,14 @@ var NativeDocument = (function (exports) {
                 child = null;
                 element.appendElement(fragment, blockEnd);
             },
-            removeOne(element, index) {
+            removeOne: (element, index) => {
                 removeCacheItem(element, true);
             },
             clear,
-            merge(items) {
+            merge: (items) => {
                 Actions.add(items);
             },
-            push(items) {
+            push: (items) => {
                 let delay = 0;
                 if(configs.pushDelay) {
                     delay = configs.pushDelay(items) ?? 0;
@@ -5087,7 +5191,7 @@ var NativeDocument = (function (exports) {
 
                 Actions.add(items, delay);
             },
-            populate([target, iteration, callback]) {
+            populate: ([target, iteration, callback]) => {
                 const fragment = document.createDocumentFragment();
                 for (let i = 0; i < iteration; i++) {
                     const data = callback(i);
@@ -5098,10 +5202,10 @@ var NativeDocument = (function (exports) {
                 element.appendChild(fragment);
                 fragment.replaceChildren();
             },
-            unshift(values){
+            unshift: (values) => {
                 element.insertBefore(Actions.toFragment(values), blockStart.nextSibling);
             },
-            splice(args, deleted) {
+            splice: (args, deleted) => {
                 const [start, deleteCount, ...values] = args;
                 let elementBeforeFirst = null;
                 const garbageFragment = document.createDocumentFragment();
@@ -5128,22 +5232,22 @@ var NativeDocument = (function (exports) {
                 }
 
             },
-            reverse(_, reversed) {
+            reverse: (_, reversed) => {
                 Actions.reOrder(reversed);
             },
-            sort(_, sorted) {
+            sort: (_, sorted) => {
                 Actions.reOrder(sorted);
             },
-            remove(_, deleted) {
+            remove: (_, deleted)=> {
                 Actions.removeOne(deleted);
             },
-            pop(_, deleted) {
+            pop: (_, deleted) => {
                 Actions.removeOne(deleted);
             },
-            shift(_, deleted) {
+            shift: (_, deleted) => {
                 Actions.removeOne(deleted);
             },
-            swap(args, elements) {
+            swap: (args, elements) => {
                 const parent = blockEnd.parentNode;
 
                 let childA = getItemChild(elements[0]);
@@ -5210,7 +5314,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -6629,7 +6733,7 @@ var NativeDocument = (function (exports) {
                 window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, query, path);
             } catch (e) {
-                DebugManager.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -6642,7 +6746,7 @@ var NativeDocument = (function (exports) {
                 window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, {}, path);
             } catch(e) {
-                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -6669,7 +6773,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -6894,7 +6998,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -7072,7 +7176,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager.error('Router', 'Callback must be a function');
+            DebugManager$1.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);