native-document 1.0.16-8.2 → 1.0.16-8.4

package/package.json

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

@@ -14,7 +14,28 @@ import {Observable} from '../data/Observable';
 export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
-        data[className].handleClassValue(element, 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);
     }
 };
 
@@ -28,11 +49,39 @@ export const bindClassAttribute = (element, data) => {
  * @param {Record<string, string|ObservableItem<string>>} data - Style map
  */
 export const bindStyleAttribute = (element, data) => {
-    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);
+    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;
     }
 };
 
@@ -43,8 +92,30 @@ export const bindStyleAttribute = (element, data) => {
  * @param {boolean|number|Observable} value
  */
 export const bindBooleanAttribute = (element, attributeName, value) => {
-    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
-    value.handleNdBooleanAttribute(element, attributeRealName);
+    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));
+    }
 };
 
 
@@ -55,14 +126,15 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
  * @param {Observable} value
  */
 export const bindAttributeWithObservable = (element, attributeName, value) => {
-    if(attributeName !== 'value') {
-        value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
-        element.setAttribute(attributeName, value.val());
+    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));
         return;
     }
-    value.subscribe((newValue) => element.value = newValue);
-    element.value = value.val();
-    element.addEventListener('input', () => value.set(element.value));
+    element.setAttribute(attributeName, value.val());
 };
 
 /**
@@ -76,21 +148,32 @@ const AttributesWrapper = (element, attributes) => {
         Validator.validateAttributes(attributes);
     }
 
-    if(!attributes) {
-        return;
-    }
-
-    const keys = Object.keys(attributes);
-    const length = keys.length;
-
-    for(let i = 0; i < length; i++) {
-        const originalAttributeName = keys[i];
+    for(const originalAttributeName in attributes) {
+        const attributeName = originalAttributeName.toLowerCase();
         const value = attributes[originalAttributeName];
         if(value == null) {
             continue;
         }
-        value.handleNdAttribute(element, originalAttributeName.toLowerCase());
+        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

@@ -93,7 +93,7 @@ export const ElementCreator = {
             return null;
         }
         do {
-            child = child.toNdElement();
+            child =  child.toNdElement();
             if(Validator.isElement(child)) {
                 return 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,179 +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';
 
-/**
- * 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));
-});
 
-extendsPrototype(ObservableItem, 'handleNdAttribute', function(element, attributeName) {
-    if (BOOLEAN_ATTRIBUTES.has(attributeName)) {
-        this.handleNdBooleanAttribute(element, attributeName);
-        return;
-    }
     bindAttributeWithObservable(element, attributeName, this);
-});
-
-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 ------------------------------------------------------
+ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
 
-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);
-});
+TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+    this.$hydrate(element, attributeName);
+};

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);
-});
+};