native-document 1.0.16-8.3 → 1.0.16-8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.168.03",
+  "version": "1.0.168.04",
   "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(typeof defaultValue === 'boolean') {
+    if(Validator.isBoolean(defaultValue)) {
         element[attributeRealName] = defaultValue;
     }
     else {
@@ -149,12 +149,31 @@ const AttributesWrapper = (element, attributes) => {
     }
 
     for(const originalAttributeName in attributes) {
+        const attributeName = originalAttributeName.toLowerCase();
         const value = attributes[originalAttributeName];
         if(value == null) {
             continue;
         }
-        const attributeName = originalAttributeName.toLowerCase();
-        value.handleNdAttribute(element, attributeName);
+        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);
     }
     return element;
 };

package/src/core/wrappers/ElementCreator.js

@@ -98,8 +98,6 @@ export const ElementCreator = {
                 return child;
             }
         } while (child.toNdElement);
-
-        return ElementCreator.createStaticTextNode(null, child);
     },
     /**
      *

package/src/core/wrappers/NDElement.js

@@ -38,6 +38,14 @@ NDElement.$getChild = (el) => el;
 NDElement.prototype.ghostDom = function(element) {
     if(!this.$attachements) {
         this.$attachements = document.createDocumentFragment();
+        this.toNdElement = () => {
+            const fragment = document.createDocumentFragment();
+            if(!this.$attachements.contains(this.$element)) {
+                fragment.appendChild(this.$element);
+            }
+            fragment.appendChild(this.$attachements);
+            return fragment;
+        };
     }
     this.$attachements.appendChild(NDElement.$getChild(element));
     return this;

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

@@ -1,189 +1,24 @@
 import {
-    bindAttributeWithObservable, bindClassAttribute, bindStyleAttribute,
+    bindAttributeWithObservable,
+    bindBooleanAttribute,
 } from '../AttributesWrapper';
 import ObservableItem from '../../data/ObservableItem';
 import TemplateBinding from '../TemplateBinding';
-import { BOOLEAN_ATTRIBUTES } from '../constants';
-import { Observable } from '../../data/Observable';
+import {BOOLEAN_ATTRIBUTES} from '../constants';
 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,
-    });
-}
 
-// -- handleNdAttribute --------------------------------------------------------
-
-extendsPrototype(Object, 'handleNdAttribute', function(element, attributeName) {
-    if (attributeName === 'class') {
-        bindClassAttribute(element, this);
-        return;
-    }
-    if (attributeName === 'style') {
-        bindStyleAttribute(element, this);
+ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+    if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+        bindBooleanAttribute(element, attributeName, 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);
-
-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;
-});
+ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
 
-// -- 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));
+TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+    this.$hydrate(element, attributeName);
 };
-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,157 +1,131 @@
 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';
 
-/**
- * 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;
 
-// -- toNdElement --------------------------------------------------------------
-
-/**
- * Converts a string to a static text node.
- * @returns {Text}
- */
-extendsPrototype(Object, 'toNdElement', function() {
-    return ElementCreator.createStaticTextNode(null, JSON.stringify(this));
-});
-
 /**
- * Converts a string to a static text node.
- * @returns {Text}
+ * Converts a string to a reactive text node.
+ *
+ * @returns {Text} Static text node containing the string value
  */
-extendsPrototype(String, 'toNdElement', function() {
+String.prototype.toNdElement = function () {
     return ElementCreator.createStaticTextNode(null, this);
-});
+};
 
 /**
  * Converts a number to a static text node.
- * @returns {Text}
+ *
+ * @returns {Text} Static text node containing the number as a string
  */
-extendsPrototype(Number, 'toNdElement', function() {
+Number.prototype.toNdElement = function () {
     return ElementCreator.createStaticTextNode(null, this.toString());
-});
+};
 
 /**
  * Returns the element itself (identity for DOM compatibility).
- * @returns {Element}
+ *
+ * @returns {Element} this
  */
-extendsPrototype(Element, 'toNdElement', function() {
+Element.prototype.toNdElement = function () {
     return this;
-});
+};
 
 /**
  * Returns the text node itself (identity for DOM compatibility).
- * @returns {Text}
+ *
+ * @returns {Text} this
  */
-extendsPrototype(Text, 'toNdElement', function() {
+Text.prototype.toNdElement = function () {
     return this;
-});
+};
 
 /**
  * Returns the comment node itself (identity for DOM compatibility).
- * @returns {Comment}
+ *
+ * @returns {Comment} this
  */
-extendsPrototype(Comment, 'toNdElement', function() {
+Comment.prototype.toNdElement = function () {
     return this;
-});
+};
 
 /**
  * Returns the document itself (identity for DOM compatibility).
- * @returns {Document}
+ *
+ * @returns {Document} this
  */
-extendsPrototype(Document, 'toNdElement', function() {
+Document.prototype.toNdElement = function () {
     return this;
-});
+};
 
 /**
  * Returns the document fragment itself (identity for DOM compatibility).
- * @returns {DocumentFragment}
+ *
+ * @returns {DocumentFragment} this
  */
-extendsPrototype(DocumentFragment, 'toNdElement', function() {
+DocumentFragment.prototype.toNdElement = function () {
     return this;
-});
+};
 
 /**
  * Converts the ObservableItem to a reactive text node that updates automatically when the value changes.
- * @returns {Text}
+ *
+ * @returns {Text} Reactive text node bound to this observable
  */
-extendsPrototype(ObservableItem, 'toNdElement', function() {
+ObservableItem.prototype.toNdElement = function () {
     return ElementCreator.createObservableNode(null, this);
-});
+};
 
-/**
- * ObservableChecker shares the same reactive text node behaviour as ObservableItem.
- * @returns {Text}
- */
-extendsPrototype(ObservableChecker, 'toNdElement', ObservableItem.prototype.toNdElement);
+ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
 
 /**
  * Converts the NDElement to its underlying HTMLElement (or ghost DOM fragment if ghostDom was used).
- * @returns {HTMLElement|DocumentFragment}
+ *
+ * @returns {HTMLElement|DocumentFragment} The underlying DOM node
  */
-extendsPrototype(NDElement, 'toNdElement', function() {
-    const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-    if (this.$attachements) {
-        if (!this.$attachements.contains(this.$element)) {
-            this.$attachements.append(this.$element);
-        }
-        return this.$attachements;
-    }
-    return element;
-});
+NDElement.prototype.toNdElement = function () {
+    return this.$element;
+};
 
 /**
- * Converts the array to a DocumentFragment containing all child elements.
+ * Converts the array to a DocumentFragment containing all elements.
  * Each item is processed through ElementCreator.getChild().
- * @returns {DocumentFragment}
+ *
+ * @returns {DocumentFragment} Fragment containing all array children
  */
-extendsPrototype(Array, 'toNdElement', function() {
+Array.prototype.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}
+ *
+ * @returns {Node} The DOM node returned by the function
  */
-extendsPrototype(Function, 'toNdElement', function() {
+Function.prototype.toNdElement = function () {
     const child = this;
-    if (process.env.NODE_ENV === 'development') {
+    if(process.env.NODE_ENV === 'development') {
         PluginsManager.emit('BeforeProcessComponent', child);
     }
     return ElementCreator.getChild(child());
-});
+};
 
 /**
  * Converts the TemplateBinding to a hydratable DOM node for use in TemplateCloner.
- * @returns {Node}
+ *
+ * @returns {Node} Hydratable node
  */
-extendsPrototype(TemplateBinding, 'toNdElement', function() {
+TemplateBinding.prototype.toNdElement = function () {
     return ElementCreator.createHydratableNode(null, this);
-});
+};