native-document 1.0.87 → 1.0.89

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`);
                 }
             }
         };
@@ -334,10 +334,10 @@ var NativeComponents = (function (exports) {
 
     ObservableChecker.prototype.__$isObservableChecker = true;
 
-    ObservableChecker.prototype.subscribe = function(callback) {
-        const unSubscribe = this.observable.subscribe((value) => {
-            callback && callback(this.checker(value));
-        });
+    ObservableChecker.prototype.subscribe = function(callback, context = null) {
+        const unSubscribe = this.observable.subscribe((value, _, __) => {
+            callback && callback(this.checker(value), _, __, context);
+        }, context);
         this.unSubscriptions.push(unSubscribe);
         return unSubscribe;
     };
@@ -369,8 +369,8 @@ var NativeComponents = (function (exports) {
 
     ObservableWhen.prototype.__$isObservableWhen = true;
 
-    ObservableWhen.prototype.subscribe = function(callback) {
-        return this.$observer.on(this.$target, callback);
+    ObservableWhen.prototype.subscribe = function(callback, context = null) {
+        return this.$observer.on(this.$target, callback, context);
     };
 
     ObservableWhen.prototype.val = function() {
@@ -508,7 +508,7 @@ var NativeComponents = (function (exports) {
     };
 
     ObservableItem.prototype.triggerFirstListener = function(operations) {
-        this.$firstListener(this.$currentValue, this.$previousValue, operations || {});
+        this.$firstListener.callback(this.$currentValue, this.$previousValue, operations || {}, this.$firstListener.context);
     };
 
     ObservableItem.prototype.triggerListeners = function(operations) {
@@ -518,14 +518,14 @@ var NativeComponents = (function (exports) {
 
         operations = operations || DEFAULT_OPERATIONS;
         for(let i = 0, length = $listeners.length; i < length; i++) {
-            $listeners[i];
-            $listeners[i]($currentValue, $previousValue, operations);
+            const listener = $listeners[i];
+            listener.callback($currentValue, $previousValue, operations, listener.context);
         }
     };
 
     const handleWatcherCallback = function(callbacks, value) {
-        if(typeof callbacks === "function") {
-            callbacks(value);
+        if(callbacks.callback) {
+            callbacks.callback(value, null, null, callbacks.context);
             return;
         }
         if (callbacks.set) {
@@ -533,7 +533,9 @@ var NativeComponents = (function (exports) {
             return;
         }
         callbacks.forEach(callback => {
-            callback.set ? callback.set(value) : callback(value);
+            callback.callback
+                ? callback.callback(value, null, null, callback.context)
+                : callback.set(value);
         });
     };
 
@@ -656,45 +658,48 @@ var NativeComponents = (function (exports) {
     /**
      *
      * @param {Function} callback
+     * @param {?Object} context
      * @param {any} target
      * @returns {(function(): void)}
      */
-    ObservableItem.prototype.subscribe = function(callback, target = null) {
+    ObservableItem.prototype.subscribe = function(callback, context = null, 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') {
             throw new NativeDocumentError('Callback must be a function');
         }
 
-        this.$listeners.push(callback);
+
+        const finalCallback = { callback, context };
+        this.$listeners.push(finalCallback);
         this.assocTrigger();
         return () => {
-            this.unsubscribe(callback);
+            this.unsubscribe(finalCallback);
             this.assocTrigger();
         };
     };
 
-    ObservableItem.prototype.on = function(value, callback) {
+    ObservableItem.prototype.on = function(value, callback, context = null) {
         this.$watchers = this.$watchers ?? new Map();
 
         let watchValueList = this.$watchers.get(value);
+        const finalCallback = { callback, context };
 
         if(!watchValueList) {
-            this.$watchers.set(value, callback);
+            this.$watchers.set(value, finalCallback);
         } else if(!Validator.isArray(watchValueList)) {
-            watchValueList = [watchValueList];
+            watchValueList = [watchValueList, finalCallback];
             this.$watchers.set(value, watchValueList);
-            return;
         } else {
-            watchValueList.push(callback);
+            watchValueList.push(finalCallback);
         }
 
         this.assocTrigger();
         return () => {
-            const index = watchValueList.indexOf(callback);
+            const index = watchValueList.indexOf(finalCallback);
             watchValueList?.splice(index, 1);
             if(watchValueList.size === 1) {
                 this.$watchers.set(value, watchValueList[0]);
@@ -1035,17 +1040,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 +1232,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;
@@ -1426,56 +1431,29 @@ var NativeComponents = (function (exports) {
         setInterval(() => MemoryManager.cleanObservables(threshold), interval);
     };
 
-    ObservableItem.prototype.bindNdClass = function(element, className) {
-        element.classes.toggle(className, this.val());
-        this.subscribe(toggleElementClass.bind(null, element, className));
-    };
-
-    ObservableWhen.prototype.bindNdClass = function(element, className) {
-        element.classes.toggle(className, this.isMath());
-        this.subscribe(toggleElementClass.bind(null, element, className));
+    const handleElementAttributeClass = function(shouldAdd, _, __, context) {
+        context.element.classes.toggle(context.className, shouldAdd);
     };
-
-    function toggleElementClass(element, className, shouldAdd) {
-        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
      * @param {Object} data
      */
     function bindClassAttribute(element, data) {
-        for(let className in data) {
+        const classNames = Object.keys(data);
+
+        for(let i = 0, length = classNames.length; i < length; i++) {
+            const className = classNames[i];
             const value = data[className];
-            if(Validator.isObservable(value)) {
+            if(value.__$isObservable) {
                 element.classes.toggle(className, value.val());
-                value.subscribe(toggleElementClass.bind(null, element, className));
+                value.subscribe(handleElementAttributeClass, { element, className });
+                // value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
                 continue;
             }
-            if(Validator.isObservableWhenResult(value)) {
+            if(value.__$isObservableWhen) {
                 element.classes.toggle(className, value.isMath());
-                value.subscribe(toggleElementClass.bind(null, element, className));
+                value.subscribe(handleElementAttributeClass, { element, className });
                 continue;
             }
             if(value.$hydrate) {
@@ -1484,7 +1462,6 @@ var NativeComponents = (function (exports) {
             }
             element.classes.toggle(className, value);
         }
-        data = null;
     }
 
     /**
@@ -1493,11 +1470,13 @@ var NativeComponents = (function (exports) {
      * @param {Object} data
      */
     function bindStyleAttribute(element, data) {
-        for(let styleName in data) {
+        const keys = Object.keys(data);
+        for(let i = 0, length = keys.length; i < length; i++) {
+            const styleName = keys[i];
             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 +1490,27 @@ var NativeComponents = (function (exports) {
      * @param {boolean|number|Observable} value
      */
     function bindBooleanAttribute(element, attributeName, value) {
-        const defaultValue = Validator.isObservable(value) ? value.val() : value;
-        if(Validator.isBoolean(defaultValue)) {
+        const isObservable = value.__$isObservable;
+        const defaultValue = isObservable? value.val() : value;
+        const isBoolValue = typeof defaultValue === "boolean";
+        if(isBoolValue) {
             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(isBoolValue) {
+                    element.addEventListener('input', () => value.set(element[attributeName]));
+                    value.subscribe((newValue) => element[attributeName] = newValue);
+                    return;
+                }
+                element.addEventListener('input', () => value.set(element.value));
+                value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
+                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());
-        value.subscribe(applyValue);
-
         if(attributeName === 'value') {
+            value.subscribe((newValue) => element.value = newValue);
+            element.value = value.val();
             element.addEventListener('input', () => value.set(element.value));
+            return;
         }
+
+        value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
+        element.setAttribute(attributeName, value.val());
     }
 
     /**
@@ -1555,14 +1539,12 @@ var NativeComponents = (function (exports) {
      * @param {Object} attributes
      */
     function AttributesWrapper(element, attributes) {
+        const attributeNames = Object.keys(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];
+        for(let i = 0, length = attributeNames.length; i < length; i++) {
+            const originalAttributeName = attributeNames[i];
+            const attributeName = originalAttributeName.toLowerCase();
+            let value = attributes[originalAttributeName];
             if(value == null) {
                 continue;
             }
@@ -1585,6 +1567,10 @@ var NativeComponents = (function (exports) {
                 continue;
             }
 
+            if(attributeName === 'value') {
+                element.value = value;
+                continue;
+            }
             element.setAttribute(attributeName, value);
         }
         return element;
@@ -1714,6 +1700,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