native-document 1.0.16-8.1 → 1.0.16-8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.168.01",
+  "version": "1.0.168.03",
   "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

@@ -97,7 +97,7 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
 
     const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
 
-    if(Validator.isBoolean(defaultValue)) {
+    if(typeof defaultValue === 'boolean') {
         element[attributeRealName] = defaultValue;
     }
     else {
@@ -149,31 +149,12 @@ const AttributesWrapper = (element, attributes) => {
     }
 
     for(const originalAttributeName in attributes) {
-        const attributeName = originalAttributeName.toLowerCase();
         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;
-        }
-
-        element.setAttribute(attributeName, value);
+        const attributeName = originalAttributeName.toLowerCase();
+        value.handleNdAttribute(element, attributeName);
     }
     return element;
 };

package/src/core/wrappers/ElementCreator.js

@@ -89,15 +89,27 @@ 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);
+
+        return ElementCreator.createStaticTextNode(null, child);
     },
     /**
      *
      * @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,189 @@
 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';
+import { ObservableWhen } from '../../data/ObservableWhen';
 
+/**
+ * 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));
+});
 
+const handleAttributeFn = function(element, attributeName) {
+    if (BOOLEAN_ATTRIBUTES.has(attributeName)) {
+        this.handleNdBooleanAttribute(element, attributeName);
+        return;
+    }
     bindAttributeWithObservable(element, attributeName, this);
 };
+extendsPrototype(ObservableItem, 'handleNdAttribute', handleAttributeFn);
+extendsPrototype(ObservableWhen, 'handleNdAttribute', handleAttributeFn);
 
-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;
+});
+
+const booleanAttributeFn = 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));
 };
+extendsPrototype(ObservableItem, 'handleNdBooleanAttribute', booleanAttributeFn);
+extendsPrototype(ObservableWhen, 'handleNdBooleanAttribute', booleanAttributeFn);
+
+// -- 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(ObservableWhen, '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);
-};
+});