native-document 1.0.16-8.1 → 1.0.16-8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.168.01",
+  "version": "1.0.168.02",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/core/wrappers/AttributesWrapper.js

@@ -14,28 +14,7 @@ import {Observable} from '../data/Observable';
 export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
-        if(value.__$Observable) {
-            if(value.__$isObservableChecker) {
-                let lastClass = value.val();
-                if(typeof lastClass === 'string') {
-                    element.classes.toggle(lastClass, true);
-                    value.subscribe((currentValue) => {
-                        element.classes.remove(lastClass);
-                        element.classes.toggle(currentValue, true);
-                        lastClass = currentValue;
-                    });
-                    continue;
-                }
-            }
-            element.classes.toggle(className, value.val());
-            value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-            continue;
-        }
-        if(value.$hydrate) {
-            value.$hydrate(element, className);
-            continue;
-        }
-        element.classes.toggle(className, value);
+        data[className].handleClassValue(element, className);
     }
 };
 
@@ -49,39 +28,11 @@ export const bindClassAttribute = (element, data) => {
  * @param {Record<string, string|ObservableItem<string>>} data - Style map
  */
 export const bindStyleAttribute = (element, data) => {
-    for(const styleName in data) {
-        const value = data[styleName];
-        const isCustomProperty = styleName.startsWith('--');
-
-        if(value.__$Observable) {
-            if(isCustomProperty) {
-                element.style.setProperty(styleName, value.val());
-                value.subscribe((newValue) => {
-                    if(newValue === false) {
-                        element.style.removeProperty(styleName);
-                        return;
-                    }
-                    element.style.setProperty(styleName, newValue);
-                });
-            } else {
-                element.style[styleName] = value.val();
-                value.subscribe((newValue) => {
-                    if(newValue === false) {
-                        element.style.removeProperty(styleName);
-                        return;
-                    }
-                    element.style[styleName] = newValue;
-                });
-            }
-            continue;
-        }
-
-        if(isCustomProperty) {
-            element.style.setProperty(styleName, value);
-            continue;
-        }
-
-        element.style[styleName] = value;
+    const keys = Object.keys(data);
+    const length = keys.length;
+    for(let i = 0; i < length; i++) {
+        const styleName = keys[i];
+        data[styleName].handleStyleProperty(element, styleName);
     }
 };
 
@@ -92,30 +43,8 @@ export const bindStyleAttribute = (element, data) => {
  * @param {boolean|number|Observable} value
  */
 export const bindBooleanAttribute = (element, attributeName, value) => {
-    const isObservable = value.__$isObservable;
-    const defaultValue = isObservable? value.val() : value;
-
-    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
-
-    if(Validator.isBoolean(defaultValue)) {
-        element[attributeRealName] = defaultValue;
-    }
-    else {
-        element[attributeRealName] = defaultValue === element.value;
-    }
-    if(isObservable) {
-        if(attributeName === 'checked') {
-            if(typeof defaultValue === 'boolean') {
-                element.addEventListener('input', () => value.set(element[attributeRealName]));
-            }
-            else {
-                element.addEventListener('input', () => value.set(element.value));
-            }
-            value.subscribe((newValue) => element[attributeRealName] = newValue);
-            return;
-        }
-        value.subscribe((newValue) => element[attributeRealName] = (newValue === element.value));
-    }
+    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
+    value.handleNdBooleanAttribute(element, attributeRealName);
 };
 
 
@@ -126,15 +55,14 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
  * @param {Observable} value
  */
 export const bindAttributeWithObservable = (element, attributeName, value) => {
-    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));
+    if(attributeName !== 'value') {
+        value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
+        element.setAttribute(attributeName, value.val());
         return;
     }
-    element.setAttribute(attributeName, value.val());
+    value.subscribe((newValue) => element.value = newValue);
+    element.value = value.val();
+    element.addEventListener('input', () => value.set(element.value));
 };
 
 /**
@@ -148,32 +76,21 @@ const AttributesWrapper = (element, attributes) => {
         Validator.validateAttributes(attributes);
     }
 
-    for(const originalAttributeName in attributes) {
-        const attributeName = originalAttributeName.toLowerCase();
+    if(!attributes) {
+        return;
+    }
+
+    const keys = Object.keys(attributes);
+    const length = keys.length;
+
+    for(let i = 0; i < length; i++) {
+        const originalAttributeName = keys[i];
         const 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;
-        }
+        value.handleNdAttribute(element, originalAttributeName.toLowerCase());
 
-        element.setAttribute(attributeName, value);
     }
     return element;
 };

package/src/core/wrappers/ElementCreator.js

@@ -89,15 +89,25 @@ export const ElementCreator = {
 
     },
     getChild: (child) => {
-        return child.toNdElement();
+        if(child == null) {
+            return null;
+        }
+        do {
+            child = child.toNdElement();
+            if(Validator.isElement(child)) {
+                return child;
+            }
+        } while (child.toNdElement);
     },
     /**
      *
      * @param {HTMLElement} element
      * @param {Object} attributes
      */
-    processAttributes: (element, attributes = {}) => {
-        AttributesWrapper(element, attributes);
+    processAttributes: (element, attributes) => {
+        if (attributes) {
+            AttributesWrapper(element, attributes);
+        }
     },
     /**
      *

package/src/core/wrappers/prototypes/attributes-extensions.js

@@ -1,24 +1,179 @@
 import {
-    bindAttributeWithObservable,
-    bindBooleanAttribute,
+    bindAttributeWithObservable, bindClassAttribute, bindStyleAttribute,
 } from '../AttributesWrapper';
 import ObservableItem from '../../data/ObservableItem';
 import TemplateBinding from '../TemplateBinding';
-import {BOOLEAN_ATTRIBUTES} from '../constants';
+import { BOOLEAN_ATTRIBUTES } from '../constants';
+import { Observable } from '../../data/Observable';
 import ObservableChecker from '../../data/ObservableChecker';
 
+/**
+ * Extends a prototype with a non-enumerable, configurable, writable property.
+ * Prevents prototype pollution issues (e.g. for...in loops) while keeping
+ * the property overridable and deletable.
+ *
+ * @param {Function} Constructor - The constructor whose prototype to extend
+ * @param {string}   name        - Property name
+ * @param {Function} fn          - Implementation
+ */
+const extendsPrototype = (Constructor, name, fn) => {
+    Object.defineProperty(Constructor.prototype, name, {
+        value:        fn,
+        enumerable:   false,
+        configurable: true,
+        writable:     true,
+    });
+}
 
-ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-    if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-        bindBooleanAttribute(element, attributeName, this);
+// -- handleNdAttribute --------------------------------------------------------
+
+extendsPrototype(Object, 'handleNdAttribute', function(element, attributeName) {
+    if (attributeName === 'class') {
+        bindClassAttribute(element, this);
+        return;
+    }
+    if (attributeName === 'style') {
+        bindStyleAttribute(element, this);
         return;
     }
+    element.setAttribute(attributeName, JSON.stringify(this));
+});
 
+extendsPrototype(ObservableItem, 'handleNdAttribute', function(element, attributeName) {
+    if (BOOLEAN_ATTRIBUTES.has(attributeName)) {
+        this.handleNdBooleanAttribute(element, attributeName);
+        return;
+    }
     bindAttributeWithObservable(element, attributeName, this);
-};
+});
 
-ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
-TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+extendsPrototype(TemplateBinding, 'handleNdAttribute', function(element, attributeName) {
     this.$hydrate(element, attributeName);
-};
+});
+
+extendsPrototype(Number, 'handleNdAttribute', function(element, attributeName) {
+    element.setAttribute(attributeName, this.toString());
+});
+
+extendsPrototype(String, 'handleNdAttribute', function(element, attributeName) {
+    element.setAttribute(attributeName, this.toString());
+});
+
+extendsPrototype(Array, 'handleNdAttribute', function(element, attributeName) {
+    element.setAttribute(attributeName, this.toString());
+});
+
+extendsPrototype(Boolean, 'handleNdAttribute', function(element, attributeName) {
+    element[attributeName] = this;
+});
+
+// -- handleNdBooleanAttribute -------------------------------------------------
+
+extendsPrototype(Boolean, 'handleNdBooleanAttribute', function(element, attributeName) {
+    element[attributeName] = this;
+});
+
+extendsPrototype(String, 'handleNdBooleanAttribute', function(element, attributeName) {
+    element[attributeName] = this === element.value;
+});
+
+extendsPrototype(ObservableItem, 'handleNdBooleanAttribute', function(element, attributeName) {
+    const defaultValue = this.val();
+    defaultValue.handleNdBooleanAttribute(element, attributeName);
+
+    if (attributeName === 'checked') {
+        if (typeof defaultValue === 'boolean') {
+            element.addEventListener('input', () => this.set(element[attributeName]));
+        } else {
+            element.addEventListener('input', () => this.set(element.value));
+        }
+        this.subscribe((newValue) => element[attributeName] = newValue);
+        return;
+    }
+
+    this.subscribe((newValue) => element[attributeName] = (newValue === element.value));
+});
+
+// -- handleStyleProperty ------------------------------------------------------
+
+extendsPrototype(String, 'handleStyleProperty', function(element, styleName) {
+    const isCustomProperty = styleName.startsWith('--');
+    if (isCustomProperty) {
+        element.style.setProperty(styleName, this);
+        return;
+    }
+    element.style[styleName] = this;
+});
+
+extendsPrototype(Number, 'handleStyleProperty', String.prototype.handleStyleProperty);
+
+extendsPrototype(ObservableItem, 'handleStyleProperty', function(element, styleName) {
+    const isCustomProperty = styleName.startsWith('--');
+
+    if (isCustomProperty) {
+        element.style.setProperty(styleName, this.val());
+        this.subscribe((newValue) => {
+            if (newValue === false) {
+                element.style.removeProperty(styleName);
+                return;
+            }
+            element.style.setProperty(styleName, newValue);
+        });
+        return;
+    }
+
+    element.style[styleName] = this.val();
+    this.subscribe((newValue) => {
+        if (newValue === false) {
+            element.style.removeProperty(styleName);
+            return;
+        }
+        element.style[styleName] = newValue;
+    });
+});
+
+extendsPrototype(Array, 'handleStyleProperty', function(element, styleName) {
+    const dependencies = this.filter((item) => item.__$Observable);
+    if (dependencies.length) {
+        const style = Observable.computed(
+            () => this.map((item) => item.valueOf()).join(', '),
+            dependencies,
+        );
+        style.handleStyleProperty(element, styleName);
+        return;
+    }
+    element.style[styleName] = this.join(', ');
+});
+
+// -- handleClassValue ------------------------------------------------------
+extendsPrototype(ObservableItem, 'handleClassValue', function(element, className) {
+    element.classes.toggle(className, this.val());
+    this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+});
+
+extendsPrototype(ObservableChecker, 'handleClassValue', function(element, className) {
+    let lastClass = this.val();
+    if(typeof lastClass === 'string') {
+        element.classes.toggle(lastClass, true);
+        this.subscribe((currentValue) => {
+            element.classes.remove(lastClass);
+            element.classes.toggle(currentValue, true);
+            lastClass = currentValue;
+        });
+        return;
+    }
+    element.classes.toggle(className, this.val());
+    this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+});
+
+extendsPrototype(TemplateBinding, 'handleClassValue', function(element, className) {
+    this.$hydrate(element, className);
+});
+
+extendsPrototype(String, 'handleClassValue', function(element, className) {
+    element.classes.toggle(className, this);
+});
+
+extendsPrototype(Boolean, 'handleClassValue', function(element, className) {
+    element.classes.toggle(className);
+});

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -1,149 +1,157 @@
 import ObservableItem from '../../data/ObservableItem';
-import {NDElement} from '../NDElement';
+import { NDElement } from '../NDElement';
 import TemplateBinding from '../TemplateBinding';
-import {ElementCreator} from '../ElementCreator';
+import { ElementCreator } from '../ElementCreator';
 import PluginsManager from '../../utils/plugins-manager';
 import ObservableChecker from '../../data/ObservableChecker';
-import Validator from '../../utils/validator';
 
+/**
+ * Extends a prototype with a non-enumerable, configurable, writable property.
+ *
+ * @param {Function} Constructor - The constructor whose prototype to extend
+ * @param {string}   name        - Property name
+ * @param {Function} fn          - Implementation
+ */
+function extendsPrototype(Constructor, name, fn) {
+    Object.defineProperty(Constructor.prototype, name, {
+        value:        fn,
+        enumerable:   false,
+        configurable: true,
+        writable:     true,
+    });
+}
+
+// -- Static assignment (not a prototype method) -------------------------------
 
 NDElement.$getChild = ElementCreator.getChild;
 
-Object.prototype.toNdElement = function () {
-    return ElementCreator.createStaticTextNode(null, this.toString());
-};
+// -- toNdElement --------------------------------------------------------------
 
 /**
- * Converts a string to a reactive text node.
- *
- * @returns {Text} Static text node containing the string value
+ * Converts a string to a static text node.
+ * @returns {Text}
  */
-String.prototype.toNdElement = function () {
+extendsPrototype(Object, 'toNdElement', function() {
+    return ElementCreator.createStaticTextNode(null, JSON.stringify(this));
+});
+
+/**
+ * Converts a string to a static text node.
+ * @returns {Text}
+ */
+extendsPrototype(String, 'toNdElement', function() {
     return ElementCreator.createStaticTextNode(null, this);
-};
+});
 
 /**
  * Converts a number to a static text node.
- *
- * @returns {Text} Static text node containing the number as a string
+ * @returns {Text}
  */
-Number.prototype.toNdElement = function () {
+extendsPrototype(Number, 'toNdElement', function() {
     return ElementCreator.createStaticTextNode(null, this.toString());
-};
+});
 
 /**
  * Returns the element itself (identity for DOM compatibility).
- *
- * @returns {Element} this
+ * @returns {Element}
  */
-Element.prototype.toNdElement = function () {
+extendsPrototype(Element, 'toNdElement', function() {
     return this;
-};
+});
 
 /**
  * Returns the text node itself (identity for DOM compatibility).
- *
- * @returns {Text} this
+ * @returns {Text}
  */
-Text.prototype.toNdElement = function () {
+extendsPrototype(Text, 'toNdElement', function() {
     return this;
-};
+});
 
 /**
  * Returns the comment node itself (identity for DOM compatibility).
- *
- * @returns {Comment} this
+ * @returns {Comment}
  */
-Comment.prototype.toNdElement = function () {
+extendsPrototype(Comment, 'toNdElement', function() {
     return this;
-};
+});
 
 /**
  * Returns the document itself (identity for DOM compatibility).
- *
- * @returns {Document} this
+ * @returns {Document}
  */
-Document.prototype.toNdElement = function () {
+extendsPrototype(Document, 'toNdElement', function() {
     return this;
-};
+});
 
 /**
  * Returns the document fragment itself (identity for DOM compatibility).
- *
- * @returns {DocumentFragment} this
+ * @returns {DocumentFragment}
  */
-DocumentFragment.prototype.toNdElement = function () {
+extendsPrototype(DocumentFragment, 'toNdElement', function() {
     return this;
-};
+});
 
 /**
  * Converts the ObservableItem to a reactive text node that updates automatically when the value changes.
- *
- * @returns {Text} Reactive text node bound to this observable
+ * @returns {Text}
  */
-ObservableItem.prototype.toNdElement = function () {
+extendsPrototype(ObservableItem, 'toNdElement', function() {
     return ElementCreator.createObservableNode(null, this);
-};
+});
 
-ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
+/**
+ * ObservableChecker shares the same reactive text node behaviour as ObservableItem.
+ * @returns {Text}
+ */
+extendsPrototype(ObservableChecker, 'toNdElement', ObservableItem.prototype.toNdElement);
 
 /**
  * Converts the NDElement to its underlying HTMLElement (or ghost DOM fragment if ghostDom was used).
- *
- * @returns {HTMLElement|DocumentFragment} The underlying DOM node
+ * @returns {HTMLElement|DocumentFragment}
  */
-NDElement.prototype.toNdElement = function () {
+extendsPrototype(NDElement, 'toNdElement', function() {
     const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-    if(this.$attachements) {
-        if(!this.$attachements.contains(this.$element)) {
+    if (this.$attachements) {
+        if (!this.$attachements.contains(this.$element)) {
             this.$attachements.append(this.$element);
         }
         return this.$attachements;
     }
     return element;
-};
+});
 
 /**
- * Converts the array to a DocumentFragment containing all elements.
+ * Converts the array to a DocumentFragment containing all child elements.
  * Each item is processed through ElementCreator.getChild().
- *
- * @returns {DocumentFragment} Fragment containing all array children
+ * @returns {DocumentFragment}
  */
-Array.prototype.toNdElement = function () {
+extendsPrototype(Array, 'toNdElement', function() {
     const fragment = document.createDocumentFragment();
-    for(let i = 0, length = this.length; i < length; i++) {
+    for (let i = 0, length = this.length; i < length; i++) {
         const child = ElementCreator.getChild(this[i]);
-        if(child === null) {
-            continue;
-        }
+        if (child === null) continue;
         fragment.appendChild(child);
     }
     return fragment;
-};
+});
 
 /**
  * Calls the function and converts its return value to a DOM node.
  * Used internally by ElementCreator to process function-based children.
- *
- * @returns {Node} The DOM node returned by the function
+ * @returns {Node}
  */
-Function.prototype.toNdElement = function () {
-    const callback = this;
-    if(process.env.NODE_ENV === 'development') {
-        PluginsManager.emit('BeforeProcessComponent', callback);
-    }
-    const child = callback();
-    if(Validator.isElement(child)) {
-        return child;
+extendsPrototype(Function, 'toNdElement', function() {
+    const child = this;
+    if (process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('BeforeProcessComponent', child);
     }
-    return child.toNdElement();
-};
+    return ElementCreator.getChild(child());
+});
 
 /**
  * Converts the TemplateBinding to a hydratable DOM node for use in TemplateCloner.
- *
- * @returns {Node} Hydratable node
+ * @returns {Node}
  */
-TemplateBinding.prototype.toNdElement = function () {
+extendsPrototype(TemplateBinding, 'toNdElement', function() {
     return ElementCreator.createHydratableNode(null, this);
-};
+});