native-document 1.0.120 → 1.0.121

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

@@ -363,16 +363,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$2 = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     /**
      *
@@ -846,17 +846,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.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$2.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$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1081,7 +1081,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1969,22 +1969,7 @@ var NativeComponents = (function (exports) {
      */
     const bindClassAttribute = (element, data) => {
         for(const className in data) {
-            const value = data[className];
-            if(value.__$isObservable) {
-                element.classes.toggle(className, value.val());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.__$isObservableWhen) {
-                element.classes.toggle(className, value.isActive());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, className);
-                continue;
-            }
-            element.classes.toggle(className, value);
+            data[className].bindClassProperty(element, className);
         }
     };
 
@@ -2054,39 +2039,47 @@ var NativeComponents = (function (exports) {
         element.setAttribute(attributeName, value.val());
     };
 
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     */
-    const AttributesWrapper = (element, attributes) => {
 
-        for(const originalAttributeName in attributes) {
-            const attributeName = originalAttributeName.toLowerCase();
-            let value = attributes[originalAttributeName];
+    const AttributeHandlers = {
+        string: (element, attributeName, value) => element.setAttribute(attributeName, value),
+        number: (element, attributeName, value) => element.setAttribute(attributeName, value),
+        boolean: (element, attributeName, value) => bindBooleanAttribute(element, attributeName, value),
+        object: (element, attributeName, value) => {
             if(value == null) {
-                continue;
+                return;
             }
+
             if(value.handleNdAttribute) {
-                value.handleNdAttribute(element, attributeName, value);
-                continue;
+                value.handleNdAttribute(element, attributeName);
+                return;
             }
-            if(typeof value ===  'object') {
-                if(attributeName === 'class') {
-                    bindClassAttribute(element, value);
-                    continue;
-                }
-                if(attributeName === 'style') {
-                    bindStyleAttribute(element, value);
-                    continue;
-                }
+
+            if(attributeName === 'class') {
+                bindClassAttribute(element, value);
+                return;
+            }
+            if(attributeName === 'style') {
+                bindStyleAttribute(element, value);
+                return;
             }
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
-                continue;
             }
+        }
+    };
 
-            element.setAttribute(attributeName, value);
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Object} attributes
+     */
+    const AttributesWrapper = (element, attributes) => {
+
+        for(const originalAttributeName in attributes) {
+            const attributeName = originalAttributeName.toLowerCase();
+            let value = attributes[originalAttributeName];
+            const typeOf = typeof value;
+            AttributeHandlers[typeOf](element, attributeName, value);
         }
         return element;
     };
@@ -2226,10 +2219,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    String.prototype.handleNdAttribute = function(element, attributeName) {
-        element.setAttribute(attributeName, this);
-    };
-
     ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
         if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
             bindBooleanAttribute(element, attributeName, this);
@@ -2239,6 +2228,20 @@ var NativeComponents = (function (exports) {
         bindAttributeWithObservable(element, attributeName, this);
     };
 
+    ObservableItem.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this.val());
+        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+    };
+
+    ObservableWhen.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this.isActive());
+        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+    };
+
+    Boolean.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this);
+    };
+
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -3070,19 +3073,22 @@ var NativeComponents = (function (exports) {
             }
         }
         if(this.$classes) {
-            const cache = {};
             const keys = Object.keys(this.$classes);
 
             if(keys.length === 1) {
                 const key = keys[0];
                 const callback = this.$classes[key];
                 steps.push((clonedNode, data) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processClassAttribute(clonedNode, cache);
+                    callback.apply(null, data).bindClassProperty(clonedNode, key);
                 });
             } else {
+                const properties = this.$classes;
+                const keysLength = keys.length;
                 steps.push((clonedNode, data) => {
-                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+                    for(let i = 0; i < keysLength; i++) {
+                        const key = keys[i];
+                        properties[key].apply(null, data).bindClassProperty(clonedNode, key);
+                    }
                 });
             }
         }
@@ -3946,7 +3952,7 @@ var NativeComponents = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$2.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.`
                 );
@@ -3959,7 +3965,7 @@ var NativeComponents = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$2.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.`
                 );
@@ -3990,7 +3996,7 @@ var NativeComponents = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.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.`
                     );
@@ -4011,7 +4017,7 @@ var NativeComponents = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.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.`
                     );
@@ -4047,7 +4053,7 @@ var NativeComponents = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$2.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.`
                     );
@@ -4070,7 +4076,7 @@ var NativeComponents = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$2.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.`
                         );
@@ -4104,13 +4110,13 @@ var NativeComponents = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$2.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$2.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().`
                     );
@@ -4131,7 +4137,7 @@ var NativeComponents = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$2.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.`
                     );
@@ -4198,7 +4204,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4220,7 +4226,7 @@ var NativeComponents = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.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());
@@ -4322,7 +4328,7 @@ var NativeComponents = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$2.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) {

package/dist/native-document.dev.js

@@ -1788,22 +1788,7 @@ var NativeDocument = (function (exports) {
      */
     const bindClassAttribute = (element, data) => {
         for(const className in data) {
-            const value = data[className];
-            if(value.__$isObservable) {
-                element.classes.toggle(className, value.val());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.__$isObservableWhen) {
-                element.classes.toggle(className, value.isActive());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, className);
-                continue;
-            }
-            element.classes.toggle(className, value);
+            data[className].bindClassProperty(element, className);
         }
     };
 
@@ -1873,6 +1858,35 @@ var NativeDocument = (function (exports) {
         element.setAttribute(attributeName, value.val());
     };
 
+
+    const AttributeHandlers = {
+        string: (element, attributeName, value) => element.setAttribute(attributeName, value),
+        number: (element, attributeName, value) => element.setAttribute(attributeName, value),
+        boolean: (element, attributeName, value) => bindBooleanAttribute(element, attributeName, value),
+        object: (element, attributeName, value) => {
+            if(value == null) {
+                return;
+            }
+
+            if(value.handleNdAttribute) {
+                value.handleNdAttribute(element, attributeName);
+                return;
+            }
+
+            if(attributeName === 'class') {
+                bindClassAttribute(element, value);
+                return;
+            }
+            if(attributeName === 'style') {
+                bindStyleAttribute(element, value);
+                return;
+            }
+            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                bindBooleanAttribute(element, attributeName, value);
+            }
+        }
+    };
+
     /**
      *
      * @param {HTMLElement} element
@@ -1887,29 +1901,8 @@ var NativeDocument = (function (exports) {
         for(const originalAttributeName in attributes) {
             const attributeName = originalAttributeName.toLowerCase();
             let value = attributes[originalAttributeName];
-            if(value == null) {
-                continue;
-            }
-            if(value.handleNdAttribute) {
-                value.handleNdAttribute(element, attributeName, value);
-                continue;
-            }
-            if(typeof value ===  'object') {
-                if(attributeName === 'class') {
-                    bindClassAttribute(element, value);
-                    continue;
-                }
-                if(attributeName === 'style') {
-                    bindStyleAttribute(element, value);
-                    continue;
-                }
-            }
-            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-                bindBooleanAttribute(element, attributeName, value);
-                continue;
-            }
-
-            element.setAttribute(attributeName, value);
+            const typeOf = typeof value;
+            AttributeHandlers[typeOf](element, attributeName, value);
         }
         return element;
     };
@@ -2062,10 +2055,6 @@ var NativeDocument = (function (exports) {
         return this;
     };
 
-    String.prototype.handleNdAttribute = function(element, attributeName) {
-        element.setAttribute(attributeName, this);
-    };
-
     ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
         if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
             bindBooleanAttribute(element, attributeName, this);
@@ -2079,6 +2068,24 @@ var NativeDocument = (function (exports) {
         this.$hydrate(element, attributeName);
     };
 
+    ObservableItem.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this.val());
+        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+    };
+
+    ObservableWhen.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this.isActive());
+        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+    };
+
+    TemplateBinding.prototype.bindClassProperty = function(element, className) {
+        this.$hydrate(element, className);
+    };
+
+    Boolean.prototype.bindClassProperty = function(element, className) {
+        element.classes.toggle(className, this);
+    };
+
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -3039,19 +3046,22 @@ var NativeDocument = (function (exports) {
             }
         }
         if(this.$classes) {
-            const cache = {};
             const keys = Object.keys(this.$classes);
 
             if(keys.length === 1) {
                 const key = keys[0];
                 const callback = this.$classes[key];
                 steps.push((clonedNode, data) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processClassAttribute(clonedNode, cache);
+                    callback.apply(null, data).bindClassProperty(clonedNode, key);
                 });
             } else {
+                const properties = this.$classes;
+                const keysLength = keys.length;
                 steps.push((clonedNode, data) => {
-                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+                    for(let i = 0; i < keysLength; i++) {
+                        const key = keys[i];
+                        properties[key].apply(null, data).bindClassProperty(clonedNode, key);
+                    }
                 });
             }
         }