native-document 1.0.86 → 1.0.88

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

@@ -256,16 +256,16 @@ var NativeComponents = (function (exports) {
         return this.$build();
     };
 
-    let DebugManager = {};
+    let DebugManager$1 = {};
     {
-        DebugManager = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager;
+    var DebugManager = DebugManager$1;
 
     const MemoryManager = (function() {
 
@@ -314,7 +314,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -662,7 +662,7 @@ var NativeComponents = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback, target = null) {
         this.$listeners = this.$listeners ?? [];
         if (this.$isCleanedUp) {
-            DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+            DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
             return () => {};
         }
         if (typeof callback !== 'function') {
@@ -1035,17 +1035,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager.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.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.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1227,7 +1227,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
@@ -1440,26 +1440,6 @@ var NativeComponents = (function (exports) {
         element.classes.toggle(className, shouldAdd);
     }
 
-    function toggleElementStyle(element, styleName, newValue) {
-        element.style[styleName] = newValue;
-    }
-
-    function updateInputFromObserver(element, attributeName, newValue) {
-        if(Validator.isBoolean(newValue)) {
-            element[attributeName] = newValue;
-            return;
-        }
-        element[attributeName] = newValue === element.value;
-    }
-
-    function updateObserverFromInput(element, attributeName, defaultValue, value) {
-        if(Validator.isBoolean(defaultValue)) {
-            value.set(element[attributeName]);
-            return;
-        }
-        value.set(element.value);
-    }
-
     /**
      *
      * @param {HTMLElement} element
@@ -1468,12 +1448,12 @@ var NativeComponents = (function (exports) {
     function bindClassAttribute(element, data) {
         for(let className in data) {
             const value = data[className];
-            if(Validator.isObservable(value)) {
+            if(value.__$isObservable) {
                 element.classes.toggle(className, value.val());
                 value.subscribe(toggleElementClass.bind(null, element, className));
                 continue;
             }
-            if(Validator.isObservableWhenResult(value)) {
+            if(value.__$isObservableWhen) {
                 element.classes.toggle(className, value.isMath());
                 value.subscribe(toggleElementClass.bind(null, element, className));
                 continue;
@@ -1495,9 +1475,9 @@ var NativeComponents = (function (exports) {
     function bindStyleAttribute(element, data) {
         for(let styleName in data) {
             const value = data[styleName];
-            if(Validator.isObservable(value)) {
+            if(value.__$isObservable) {
                 element.style[styleName] = value.val();
-                value.subscribe(toggleElementStyle.bind(null, element, styleName));
+                value.subscribe((newValue) => element.style[styleName] = newValue);
                 continue;
             }
             element.style[styleName] = value;
@@ -1511,18 +1491,26 @@ var NativeComponents = (function (exports) {
      * @param {boolean|number|Observable} value
      */
     function bindBooleanAttribute(element, attributeName, value) {
-        const defaultValue = Validator.isObservable(value) ? value.val() : value;
+        const isObservable = value.__$isObservable;
+        const defaultValue = isObservable? value.val() : value;
         if(Validator.isBoolean(defaultValue)) {
             element[attributeName] = defaultValue;
         }
         else {
             element[attributeName] = defaultValue === element.value;
         }
-        if(Validator.isObservable(value)) {
-            if(['checked'].includes(attributeName)) {
-                element.addEventListener('input', updateObserverFromInput.bind(null, element, attributeName, defaultValue, value));
+        if(isObservable) {
+            if(attributeName === 'checked') {
+                if(typeof defaultValue === 'boolean') {
+                    element.addEventListener('input', () => value.set(element[attributeName]));
+                }
+                else {
+                    element.addEventListener('input', () => value.set(element.value));
+                }
+                value.subscribe((newValue) => element[attributeName] = newValue);
+                return;
             }
-            value.subscribe(updateInputFromObserver.bind(null, element, attributeName));
+            value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
         }
     }
 
@@ -1534,19 +1522,15 @@ var NativeComponents = (function (exports) {
      * @param {Observable} value
      */
     function bindAttributeWithObservable(element, attributeName, value) {
-        const applyValue = (newValue) => {
-            if(attributeName === 'value') {
-                element.value = newValue;
-                return;
-            }
-            element.setAttribute(attributeName, newValue);
-        };
-        applyValue(value.val());
+        const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
         value.subscribe(applyValue);
 
         if(attributeName === 'value') {
+            element.value = value.val();
             element.addEventListener('input', () => value.set(element.value));
+            return;
         }
+        element.setAttribute(attributeName, value.val());
     }
 
     /**
@@ -1556,10 +1540,6 @@ var NativeComponents = (function (exports) {
      */
     function AttributesWrapper(element, attributes) {
 
-        if(!Validator.isObject(attributes)) {
-            throw new NativeDocumentError('Attributes must be an object');
-        }
-
         for(let key in attributes) {
             const attributeName = key.toLowerCase();
             let value = attributes[attributeName];
@@ -1714,6 +1694,14 @@ var NativeComponents = (function (exports) {
             }
             return Anchor('Fragment');
         },
+        bindTextNode(textNode, value) {
+            if(value?.__$isObservable) {
+                value.subscribe(newValue => textNode.nodeValue = newValue);
+                textNode.nodeValue = value.val();
+                return;
+            }
+            textNode.nodeValue = value;
+        },
         /**
          *
          * @param {*} children

package/dist/native-document.dev.js

@@ -141,10 +141,10 @@ var NativeDocument = (function (exports) {
         return this.observable.cleanup();
     };
 
-    let PluginsManager = null;
+    let PluginsManager$1 = null;
 
     {
-        PluginsManager = (function() {
+        PluginsManager$1 = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -219,7 +219,7 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager$1 = PluginsManager;
+    var PluginsManager = PluginsManager$1;
 
     const ObservableWhen = function(observer, value) {
         this.$target = value;
@@ -341,7 +341,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager$1.emit('CreateObservable', this);
+            PluginsManager.emit('CreateObservable', this);
         }
     }
 
@@ -468,12 +468,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager$1.emit('ObservableBeforeChange', this);
+            PluginsManager.emit('ObservableBeforeChange', this);
         }
         this.trigger();
         this.$previousValue = null;
         {
-            PluginsManager$1.emit('ObservableAfterChange', this);
+            PluginsManager.emit('ObservableAfterChange', this);
         }
     };
 
@@ -535,13 +535,13 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableSubscribe', this, target);
+            PluginsManager.emit('ObservableSubscribe', this, target);
         }
         return () => {
             this.unsubscribe(callback);
             this.assocTrigger();
             {
-                PluginsManager$1.emit('ObservableUnsubscribe', this);
+                PluginsManager.emit('ObservableUnsubscribe', this);
             }
         };
     };
@@ -763,7 +763,7 @@ var NativeDocument = (function (exports) {
         this.$element = element;
         this.$observer = null;
         {
-            PluginsManager$1.emit('NDElementCreated', element, this);
+            PluginsManager.emit('NDElementCreated', element, this);
         }
     }
 
@@ -934,7 +934,7 @@ var NativeDocument = (function (exports) {
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager$1.emit('NDElementExtended', methods);
+            PluginsManager.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -1079,7 +1079,6 @@ var NativeDocument = (function (exports) {
     };
     {
         Validator.validateAttributes = function(attributes) {
-            console.log('AttributesWrapper', attributes);
             if (!attributes || typeof attributes !== 'object') {
                 return attributes;
             }
@@ -1368,26 +1367,6 @@ var NativeDocument = (function (exports) {
         element.classes.toggle(className, shouldAdd);
     }
 
-    function toggleElementStyle(element, styleName, newValue) {
-        element.style[styleName] = newValue;
-    }
-
-    function updateInputFromObserver(element, attributeName, newValue) {
-        if(Validator.isBoolean(newValue)) {
-            element[attributeName] = newValue;
-            return;
-        }
-        element[attributeName] = newValue === element.value;
-    }
-
-    function updateObserverFromInput(element, attributeName, defaultValue, value) {
-        if(Validator.isBoolean(defaultValue)) {
-            value.set(element[attributeName]);
-            return;
-        }
-        value.set(element.value);
-    }
-
     /**
      *
      * @param {HTMLElement} element
@@ -1396,12 +1375,12 @@ var NativeDocument = (function (exports) {
     function bindClassAttribute(element, data) {
         for(let className in data) {
             const value = data[className];
-            if(Validator.isObservable(value)) {
+            if(value.__$isObservable) {
                 element.classes.toggle(className, value.val());
                 value.subscribe(toggleElementClass.bind(null, element, className));
                 continue;
             }
-            if(Validator.isObservableWhenResult(value)) {
+            if(value.__$isObservableWhen) {
                 element.classes.toggle(className, value.isMath());
                 value.subscribe(toggleElementClass.bind(null, element, className));
                 continue;
@@ -1423,9 +1402,9 @@ var NativeDocument = (function (exports) {
     function bindStyleAttribute(element, data) {
         for(let styleName in data) {
             const value = data[styleName];
-            if(Validator.isObservable(value)) {
+            if(value.__$isObservable) {
                 element.style[styleName] = value.val();
-                value.subscribe(toggleElementStyle.bind(null, element, styleName));
+                value.subscribe((newValue) => element.style[styleName] = newValue);
                 continue;
             }
             element.style[styleName] = value;
@@ -1439,18 +1418,26 @@ var NativeDocument = (function (exports) {
      * @param {boolean|number|Observable} value
      */
     function bindBooleanAttribute(element, attributeName, value) {
-        const defaultValue = Validator.isObservable(value) ? value.val() : value;
+        const isObservable = value.__$isObservable;
+        const defaultValue = isObservable? value.val() : value;
         if(Validator.isBoolean(defaultValue)) {
             element[attributeName] = defaultValue;
         }
         else {
             element[attributeName] = defaultValue === element.value;
         }
-        if(Validator.isObservable(value)) {
-            if(['checked'].includes(attributeName)) {
-                element.addEventListener('input', updateObserverFromInput.bind(null, element, attributeName, defaultValue, value));
+        if(isObservable) {
+            if(attributeName === 'checked') {
+                if(typeof defaultValue === 'boolean') {
+                    element.addEventListener('input', () => value.set(element[attributeName]));
+                }
+                else {
+                    element.addEventListener('input', () => value.set(element.value));
+                }
+                value.subscribe((newValue) => element[attributeName] = newValue);
+                return;
             }
-            value.subscribe(updateInputFromObserver.bind(null, element, attributeName));
+            value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
         }
     }
 
@@ -1462,19 +1449,15 @@ var NativeDocument = (function (exports) {
      * @param {Observable} value
      */
     function bindAttributeWithObservable(element, attributeName, value) {
-        const applyValue = (newValue) => {
-            if(attributeName === 'value') {
-                element.value = newValue;
-                return;
-            }
-            element.setAttribute(attributeName, newValue);
-        };
-        applyValue(value.val());
+        const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
         value.subscribe(applyValue);
 
         if(attributeName === 'value') {
+            element.value = value.val();
             element.addEventListener('input', () => value.set(element.value));
+            return;
         }
+        element.setAttribute(attributeName, value.val());
     }
 
     /**
@@ -1486,10 +1469,6 @@ var NativeDocument = (function (exports) {
 
         Validator.validateAttributes(attributes);
 
-        if(!Validator.isObject(attributes)) {
-            throw new NativeDocumentError('Attributes must be an object');
-        }
-
         for(let key in attributes) {
             const attributeName = key.toLowerCase();
             let value = attributes[attributeName];
@@ -1565,7 +1544,7 @@ var NativeDocument = (function (exports) {
     Function.prototype.toNdElement = function () {
         const child = this;
         {
-            PluginsManager$1.emit('BeforeProcessComponent', child);
+            PluginsManager.emit('BeforeProcessComponent', child);
         }
         return ElementCreator.getChild(child());
     };
@@ -1655,6 +1634,14 @@ var NativeDocument = (function (exports) {
             }
             return Anchor('Fragment');
         },
+        bindTextNode(textNode, value) {
+            if(value?.__$isObservable) {
+                value.subscribe(newValue => textNode.nodeValue = newValue);
+                textNode.nodeValue = value.val();
+                return;
+            }
+            textNode.nodeValue = value;
+        },
         /**
          *
          * @param {*} children
@@ -1663,14 +1650,14 @@ var NativeDocument = (function (exports) {
         processChildren(children, parent) {
             if(children === null) return;
             {
-                PluginsManager$1.emit('BeforeProcessChildren', parent);
+                PluginsManager.emit('BeforeProcessChildren', parent);
             }
             let child = this.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager$1.emit('AfterProcessChildren', parent);
+                PluginsManager.emit('AfterProcessChildren', parent);
             }
         },
         getChild(child) {
@@ -2190,9 +2177,8 @@ var NativeDocument = (function (exports) {
 
 
     const applyBindingTreePath = (root, target, data, path) => {
-        let newTarget = null;
         if(path.fn) {
-            newTarget = path.fn(data, target, root);
+            path.fn(data, target, root);
         }
         if(path.children) {
             for(let i = 0, length = path.children.length; i < length; i++) {
@@ -2201,7 +2187,6 @@ var NativeDocument = (function (exports) {
                 applyBindingTreePath(root, pathTargetNode, data, currentPath);
             }
         }
-        return newTarget;
     };
 
     function TemplateCloner($fn) {
@@ -2217,15 +2202,10 @@ var NativeDocument = (function (exports) {
             const bindDingData = cloneBindingsDataCache.get(node);
             if(node.nodeType === 3) {
                 if(bindDingData && bindDingData.value) {
-                    currentPath.fn = (data, targetNode, currentRoot) => {
-                        const newNode = bindDingData.value(data);
-                        if (targetNode === currentRoot) {
-                            return newNode;
-                        }
-                        targetNode.replaceWith(newNode);
-                        return null;
-                    };
-                    return bindDingData.value(data);
+                    currentPath.fn = bindDingData.value;
+                    const textNode = node.cloneNode();
+                    bindDingData.value(data, textNode);
+                    return textNode;
                 }
                 return node.cloneNode(true);
             }
@@ -2262,11 +2242,7 @@ var NativeDocument = (function (exports) {
         const cloneWithBindingPaths = (data) => {
             let root = $node.cloneNode(true);
 
-            const newRoot = applyBindingTreePath(root, root, data, $bindingTreePath);
-            if(newRoot) {
-                root = newRoot;
-            }
-
+            applyBindingTreePath(root, root, data, $bindingTreePath);
             return root;
         };
 
@@ -2301,13 +2277,13 @@ var NativeDocument = (function (exports) {
         };
         this.value = (callbackOrProperty) => {
             if(typeof callbackOrProperty !== 'function') {
-                return createBinding(function(data) {
+                return createBinding(function(data, textNode) {
                     const firstArgument = data[0];
-                    return createTextNode(firstArgument[callbackOrProperty]);
+                    ElementCreator.bindTextNode(textNode, firstArgument[callbackOrProperty]);
                 }, 'value');
             }
-            return createBinding(function(data) {
-                return createTextNode(callbackOrProperty(...data));
+            return createBinding(function(data, textNode) {
+                ElementCreator.bindTextNode(textNode, callbackOrProperty(...data));
             }, 'value');
         };
         this.attr = (fn) => {
@@ -2906,7 +2882,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager$1.emit('CreateObservableArray', this);
+            PluginsManager.emit('CreateObservableArray', this);
         }
     };
 
@@ -3307,7 +3283,7 @@ var NativeDocument = (function (exports) {
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
         {
-            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
+            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
         }
 
         if(Validator.isFunction(dependencies)) {
@@ -4728,22 +4704,84 @@ var NativeDocument = (function (exports) {
     function RouterComponent(router, container) {
 
         const $cache = new Map();
+        const $layoutCache = new WeakMap();
+        const $routeInstanceAnchors = new WeakMap();
+        let $currentLayout = null;
+
         let $lastNodeInserted  = null;
 
-        const updateContainer = function(node, route) {
-            container.innerHTML = '';
+        const getNodeAnchorForLayout = (node, path) => {
+            const existingAnchor = $routeInstanceAnchors.get(node);
+            if(existingAnchor) {
+                return existingAnchor;
+            }
+
+            let anchor = node;
+            if(!Validator.isAnchor(node)) {
+                anchor = Anchor(path);
+                anchor.appendChild(node);
+            }
+            $routeInstanceAnchors.set(node, anchor);
+            return anchor;
+        };
+
+        const removeLastNodeInserted = () => {
+            if(Validator.isAnchor($lastNodeInserted)) {
+                $lastNodeInserted.remove();
+            }
+        };
+        const cleanContainer = () => {
+            container.nodeValue = '';
+            removeLastNodeInserted();
+
+            if($currentLayout) {
+                $currentLayout.remove();
+            }
+        };
+
+        const getNodeToInsert = (node) => {
             let nodeToInsert = node;
-            const layout = route.layout();
             if(Validator.isNDElement(node)) {
                 nodeToInsert = node.node();
             }
-            if(layout) {
-                container.appendChild(layout(nodeToInsert));
+            return nodeToInsert;
+        };
+
+        const updateContainerByLayout = (layout, node, route, path) => {
+            let nodeToInsert = getNodeToInsert(node);
+
+            const cachedLayout = $layoutCache.get(nodeToInsert);
+            if(cachedLayout) {
+                if(cachedLayout === $currentLayout) {
+                    const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
+                    removeLastNodeInserted();
+                    layoutAnchor.replaceContent(nodeToInsert);
+                    return;
+                }
+                cleanContainer();
+                $currentLayout = cachedLayout;
+                const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
+                layoutAnchor.replaceContent(nodeToInsert);
+                container.appendChild($currentLayout);
                 return;
             }
-            if(Validator.isAnchor($lastNodeInserted)) {
-                $lastNodeInserted.remove();
+            cleanContainer();
+            const anchor = getNodeAnchorForLayout(nodeToInsert, path);
+
+            $currentLayout = layout(anchor);
+            $layoutCache.set(nodeToInsert, $currentLayout);
+            container.appendChild($currentLayout);
+        };
+
+        const updateContainer = function(node, route, path) {
+            const layout = route.layout();
+            if(layout) {
+                updateContainerByLayout(layout, node, route, path);
+                return;
             }
+            let nodeToInsert = getNodeToInsert(node);
+
+            cleanContainer();
             container.appendChild(nodeToInsert);
             $lastNodeInserted = node;
         };
@@ -4761,7 +4799,7 @@ var NativeDocument = (function (exports) {
             const Component = route.component();
             const node = Component({ params, query });
             $cache.set(path, node);
-            updateContainer(node, route);
+            updateContainer(node, route, path);
         };
 
         router.subscribe(handleCurrentRouterState);
@@ -5146,7 +5184,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
-    exports.PluginsManager = PluginsManager$1;
+    exports.PluginsManager = PluginsManager;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.TemplateCloner = TemplateCloner;