native-document 1.0.16-8.3 → 1.0.16-8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.168.03",
+  "version": "1.0.168.05",
   "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/elements/content-formatter.js

@@ -76,7 +76,7 @@ export const H6 = HtmlElementWrapper('h6');
  * Creates a `<br>` element.
  * @type {function(GlobalAttributes=): HTMLBRElement}
  */
-export const Br = HtmlElementWrapper('br');
+export const Br = HtmlElementWrapper('br', null, true);
 
 /**
  * Creates an `<a>` element.
@@ -106,7 +106,7 @@ export const Blockquote = HtmlElementWrapper('blockquote');
  * Creates an `<hr>` element.
  * @type {function(GlobalAttributes=): HTMLHRElement}
  */
-export const Hr = HtmlElementWrapper('hr');
+export const Hr = HtmlElementWrapper('hr', null, true);
 
 /**
  * Creates an `<em>` element.

package/src/core/elements/form.js

@@ -44,7 +44,7 @@ export const Form = HtmlElementWrapper('form', (el) => {
  * Creates an `<input>` element.
  * @type {function(InputAttributes=): HTMLInputElement}
  */
-export const Input = HtmlElementWrapper('input');
+export const Input = HtmlElementWrapper('input', null, true);
 
 /**
  * Creates a `<textarea>` element.

package/src/core/elements/img.js

@@ -6,7 +6,7 @@ import NativeDocumentError from '../errors/NativeDocumentError';
  * Creates an `<img>` element.
  * @type {function(ImgAttributes=): HTMLImageElement}
  */
-export const BaseImage = HtmlElementWrapper('img');
+export const BaseImage = HtmlElementWrapper('img', null, true);
 
 /**
  * Creates an `<img>` element.

package/src/core/elements/medias.js

@@ -16,13 +16,13 @@ export const Video = HtmlElementWrapper('video');
  * Creates a `<source>` element.
  * @type {function(SourceAttributes=): HTMLSourceElement}
  */
-export const Source = HtmlElementWrapper('source');
+export const Source = HtmlElementWrapper('source', null, true);
 
 /**
  * Creates a `<track>` element.
  * @type {function(TrackAttributes=): HTMLTrackElement}
  */
-export const Track = HtmlElementWrapper('track');
+export const Track = HtmlElementWrapper('track', null, true);
 
 /**
  * Creates a `<canvas>` element.

package/src/core/elements/meta-data.js

@@ -40,4 +40,4 @@ export const Var = HtmlElementWrapper('var');
  * Creates a `<wbr>` element.
  * @type {function(GlobalAttributes=): HTMLElement}
  */
-export const Wbr = HtmlElementWrapper('wbr');
+export const Wbr = HtmlElementWrapper('wbr', null, true);

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,38 @@ 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(typeof value === 'string' || typeof value === 'number') {
+            element.setAttribute(attributeName, value);
+            continue;
+        }
+        if(value.__$Observable) {
+            bindAttributeWithObservable(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;
+        }
+        if(value.__$isTemplateBinding) {
+            value.$hydrate(element, attributeName);
+        }
+
+        element.setAttribute(attributeName, value);
     }
     return element;
 };

package/src/core/wrappers/ElementCreator.js

@@ -98,19 +98,13 @@ export const ElementCreator = {
                 return child;
             }
         } while (child.toNdElement);
-
-        return ElementCreator.createStaticTextNode(null, child);
     },
     /**
      *
      * @param {HTMLElement} element
      * @param {Object} attributes
      */
-    processAttributes: (element, attributes) => {
-        if (attributes) {
-            AttributesWrapper(element, attributes);
-        }
-    },
+    processAttributes: AttributesWrapper,
     /**
      *
      * @param {HTMLElement} element

package/src/core/wrappers/HtmlElementWrapper.js

@@ -3,7 +3,6 @@ import {ElementCreator} from './ElementCreator';
 import {normalizeComponentArgs} from '../utils/args-types';
 import './NdPrototype';
 
-import './NdPrototype';
 import '../../core/utils/prototypes.js';
 import '../wrappers/prototypes/nd-element-extensions';
 import '../wrappers/prototypes/bind-class-extensions';
@@ -27,6 +26,19 @@ export const createTextNode = (value) => {
 };
 
 
+/**
+ * Applies attributes to an existing HTMLElement.
+ * Used internally by HtmlElementWrapper on each cloned node.
+ *
+ * @internal
+ * @param {HTMLElement} element - Element to configure
+ * @param {Object|null} attributes - Attributes object or children if no attrs provided
+ * @returns {HTMLElement} The configured element
+ */
+export const createVoidHtmlElement = (element, attributes) => {
+    ElementCreator.processAttributes(element, attributes);
+    return element;
+};
 /**
  * Applies attributes and children to an existing HTMLElement.
  * Used internally by HtmlElementWrapper on each cloned node.
@@ -38,7 +50,11 @@ export const createTextNode = (value) => {
  * @returns {HTMLElement} The configured element
  */
 export const createHtmlElement = (element, _attributes, _children = null) => {
-    const { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
+    let attributes = _attributes, children = _children;
+    if((!_attributes || !_children) && (typeof _attributes !== 'object' || Array.isArray(_attributes) || _attributes === null || Object.getPrototypeOf(_attributes) !== Object.prototype ||  _attributes.$hydrate)) { // IF it's not a JSON
+        attributes = _children;
+        children = _attributes;
+    }
 
     ElementCreator.processAttributes(element, attributes);
     ElementCreator.processChildren(children, element);
@@ -63,16 +79,17 @@ export const createHtmlElement = (element, _attributes, _children = null) => {
  *   return el;
  * });
  */
-export default function  HtmlElementWrapper(name, customWrapper = null) {
+export default function  HtmlElementWrapper(name, customWrapper = null, isVoid = false) {
+    const elementCreator = isVoid ? createVoidHtmlElement : createHtmlElement;
     if(name) {
         if(customWrapper) {
             let node = null;
             let createElement = (attr, children) => {
                 node = document.createElement(name);
                 createElement = (attr, children) => {
-                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
+                    return elementCreator(customWrapper(node.cloneNode()), attr, children);
                 };
-                return createHtmlElement(customWrapper(node.cloneNode()), attr, children);;
+                return elementCreator(customWrapper(node.cloneNode()), attr, children);;
             };
 
             return (attr, children) => createElement(attr, children);
@@ -82,9 +99,9 @@ export default function  HtmlElementWrapper(name, customWrapper = null) {
         let createElement = (attr, children) => {
             node = document.createElement(name);
             createElement = (attr, children) => {
-                return createHtmlElement(node.cloneNode(), attr, children);
+                return elementCreator(node.cloneNode(), attr, children);
             };
-            return createHtmlElement(node.cloneNode(), attr, children);
+            return elementCreator(node.cloneNode(), attr, children);
         };
 
         return (attr, children) => createElement(attr, children);

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,
-} from '../AttributesWrapper';
-import ObservableItem from '../../data/ObservableItem';
-import TemplateBinding from '../TemplateBinding';
-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,
-    });
-}
-
-// -- 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);
-
-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;
-//         });
+// import {
+//     bindAttributeWithObservable,
+//     bindBooleanAttribute,
+// } from '../AttributesWrapper';
+// import ObservableItem from '../../data/ObservableItem';
+// import TemplateBinding from '../TemplateBinding';
+// import {BOOLEAN_ATTRIBUTES} from '../constants';
+// import ObservableChecker from '../../data/ObservableChecker';
+//
+//
+// ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+//     if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+//         bindBooleanAttribute(element, attributeName, this);
 //         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);
-// });
+//     bindAttributeWithObservable(element, attributeName, this);
+// };
 //
-// extendsPrototype(String, 'handleClassValue', function(element, className) {
-//     element.classes.toggle(className, this);
-// });
+// ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
 //
-// 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);
-});
+};