native-document 1.0.124 → 1.0.126

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 = {}) {
@@ -146,6 +146,16 @@ var NativeDocument = (function (exports) {
         unmounted: new WeakMap(),
         unmountedSupposedSize: 0,
         observer: null,
+        initObserver: () => {
+            if(DocumentObserver.observer) {
+                return;
+            }
+            DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
+            DocumentObserver.observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        },
 
         executeMountedCallback(node) {
             const data = DocumentObserver.mounted.get(node);
@@ -193,6 +203,7 @@ var NativeDocument = (function (exports) {
         },
 
         checkMutation: function(mutationsList) {
+            console.log('mutationsList', mutationsList);
             for(const mutation of mutationsList) {
                 if(DocumentObserver.mountedSupposedSize > 0) {
                     for(const node of mutation.addedNodes) {
@@ -231,6 +242,8 @@ var NativeDocument = (function (exports) {
             let mountedRegistered   = false;
             let unmountedRegistered = false;
 
+            DocumentObserver.initObserver();
+
             let data = {
                 inDom,
                 mounted: null,
@@ -308,16 +321,10 @@ var NativeDocument = (function (exports) {
         }
     };
 
-    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
-    DocumentObserver.observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    });
-
-    let PluginsManager$1 = null;
+    let PluginsManager = null;
 
     {
-        PluginsManager$1 = (function() {
+        PluginsManager = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -383,7 +390,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);
                             }
                         }
                     }
@@ -392,12 +399,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);
         }
     }
 
@@ -562,7 +569,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);
             }
@@ -613,23 +620,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;
@@ -780,7 +787,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;
@@ -867,7 +874,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`);
                 }
             }
         };
@@ -1178,7 +1185,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager.emit('CreateObservable', this);
+            PluginsManager$1.emit('CreateObservable', this);
         }
     }
 
@@ -1285,12 +1292,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager.emit('ObservableBeforeChange', this);
+            PluginsManager$1.emit('ObservableBeforeChange', this);
         }
         this.trigger($setOperation);
         this.$previousValue = null;
         {
-            PluginsManager.emit('ObservableAfterChange', this);
+            PluginsManager$1.emit('ObservableAfterChange', this);
         }
     };
 
@@ -1368,7 +1375,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') {
@@ -1380,7 +1387,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableSubscribe', this);
+            PluginsManager$1.emit('ObservableSubscribe', this);
         }
     };
 
@@ -1491,7 +1498,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableUnsubscribe', this);
+            PluginsManager$1.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -1965,7 +1972,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());
     };
@@ -2148,14 +2155,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) {
@@ -2200,9 +2207,11 @@ var NativeDocument = (function (exports) {
     function AnchorWithSentinel(name) {
         const instance = Reflect.construct(DocumentFragment, [], AnchorWithSentinel);
         const sentinel = document.createComment((name || '') + ' Anchor Sentinel');
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
         const events = {};
 
-        instance.appendChild(sentinel);
+        instance.append(anchorStart, sentinel, anchorEnd);
 
         const observer = new MutationObserver(() => {
             if (sentinel.parentNode !== instance && !(sentinel.parentNode instanceof DocumentFragment)) {
@@ -2214,6 +2223,8 @@ var NativeDocument = (function (exports) {
 
 
         instance.$sentinel = sentinel;
+        instance.$start = anchorStart;
+        instance.$end = anchorEnd;
         instance.$observer = observer;
         instance.$events = events;
 
@@ -2302,13 +2313,6 @@ var NativeDocument = (function (exports) {
     function Anchor(name, isUniqueChild = false) {
         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);
@@ -2317,11 +2321,8 @@ var NativeDocument = (function (exports) {
 
         anchorFragment.__Anchor__ = true;
 
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
-
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
+        const anchorStart = anchorFragment.$start;
+        const anchorEnd = anchorFragment.$end;
 
         anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
         anchorFragment.nativeAppendChild = anchorFragment.appendChild;
@@ -2418,7 +2419,7 @@ var NativeDocument = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
-                anchorFragment.append.apply(anchorFragment, parent.childNodes);
+                anchorFragment.nativeAppend.apply(anchorFragment, parent.childNodes);
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -2447,11 +2448,11 @@ var NativeDocument = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
+                parent.replaceChildren(anchorStart, child, anchorEnd);
                 return;
             }
             anchorFragment.removeChildren();
-            parent.insertBefore(childElement, anchorEnd);
+            parent.insertBefore(child, anchorEnd);
         };
 
         anchorFragment.setContent = anchorFragment.replaceContent;
@@ -2968,7 +2969,11 @@ var NativeDocument = (function (exports) {
 
             return (attr, children) => createElement(attr, children)
         }
-        return () => Anchor('');
+        return (children, name = '') => {
+            const anchor = Anchor(name);
+            anchor.append(children);
+            return anchor;
+        };
     }
 
     function NodeCloner($element) {
@@ -3840,7 +3845,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager.emit('CreateObservableArray', this);
+            PluginsManager$1.emit('CreateObservableArray', this);
         }
     };
 
@@ -4474,7 +4479,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)) {
@@ -4509,7 +4514,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.`
                 );
@@ -4522,7 +4527,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.`
                 );
@@ -4553,7 +4558,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.`
                     );
@@ -4574,7 +4579,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.`
                     );
@@ -4610,7 +4615,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.`
                     );
@@ -4633,7 +4638,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.`
                         );
@@ -4667,13 +4672,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().`
                     );
@@ -4694,7 +4699,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.`
                     );
@@ -4761,7 +4766,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;
@@ -4783,7 +4788,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());
@@ -4885,7 +4890,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) {
@@ -4973,7 +4978,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;
@@ -5085,9 +5090,6 @@ var NativeDocument = (function (exports) {
 
         const clear = (items) => {
             element.removeChildren();
-            clearCacheOnly(items);
-        };
-        const clearCacheOnly = (items) => {
             cleanCache(items);
             lastNumberOfItems = 0;
         };
@@ -5125,7 +5127,7 @@ var NativeDocument = (function (exports) {
         };
 
         const createAndCache = (item) => {
-            const child = callback(item, null);
+            const child = ElementCreator.getChild(callback(item, null));
             {
                 if(!child) {
                     throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
@@ -5137,7 +5139,7 @@ var NativeDocument = (function (exports) {
 
         const createWithIndexAndCache = (item, indexKey) => {
             const indexObserver = Observable(indexKey);
-            const child = callback(item, indexObserver);
+            const child = ElementCreator.getChild(callback(item, indexObserver));
             {
                 if(!child) {
                     throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
@@ -5214,13 +5216,13 @@ var NativeDocument = (function (exports) {
                 element.appendChildRaw(Actions.toFragment(items));
             },
             replace: (items) => {
-                clearCacheOnly(items);
-                element.replaceContentRaw(Actions.toFragment(items));
+                clear(items);
+                element.appendChildRaw(Actions.toFragment(items));
             },
             set: () => {
                 const items = data.val();
-                clearCacheOnly(items);
-                element.replaceContentRaw(Actions.toFragment(items));
+                clear(items);
+                element.appendChildRaw(Actions.toFragment(items));
             },
             reOrder: (items) => {
                 let child = null;
@@ -5346,7 +5348,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 || ''));
 
@@ -6765,7 +6767,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);
             }
         };
         /**
@@ -6778,7 +6780,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() {
@@ -6805,7 +6807,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));
@@ -6919,6 +6921,7 @@ var NativeDocument = (function (exports) {
                 $lastNodeInserted.remove();
             }
         };
+
         const cleanContainer = () => {
             container.nodeValue = '';
             removeLastNodeInserted();
@@ -6944,10 +6947,12 @@ var NativeDocument = (function (exports) {
                 if(cachedLayout === $currentLayout) {
                     const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
                     removeLastNodeInserted();
+                    $lastNodeInserted = nodeToInsert;
                     layoutAnchor.replaceContent(nodeToInsert);
                     return;
                 }
                 cleanContainer();
+                $lastNodeInserted = nodeToInsert;
                 $currentLayout = cachedLayout;
                 const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
                 layoutAnchor.replaceContent(nodeToInsert);
@@ -6955,6 +6960,7 @@ var NativeDocument = (function (exports) {
                 return;
             }
             cleanContainer();
+            $lastNodeInserted = nodeToInsert;
             const anchor = getNodeAnchorForLayout(nodeToInsert, path);
 
             $currentLayout = ElementCreator.getChild(layout(anchor));
@@ -7030,7 +7036,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);
                 }
             }
         };
@@ -7208,7 +7214,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);
@@ -7412,7 +7418,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;