native-document 1.0.16-8.4 → 1.0.16-8.5

package/package.json

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

@@ -154,8 +154,12 @@ const AttributesWrapper = (element, attributes) => {
         if(value == null) {
             continue;
         }
-        if(value.handleNdAttribute) {
-            value.handleNdAttribute(element, attributeName, value);
+        if(typeof value === 'string' || typeof value === 'number') {
+            element.setAttribute(attributeName, value);
+            continue;
+        }
+        if(value.__$Observable) {
+            bindAttributeWithObservable(element, attributeName, value);
             continue;
         }
         if(typeof value ===  'object') {
@@ -172,6 +176,9 @@ const AttributesWrapper = (element, attributes) => {
             bindBooleanAttribute(element, attributeName, value);
             continue;
         }
+        if(value.__$isTemplateBinding) {
+            value.$hydrate(element, attributeName);
+        }
 
         element.setAttribute(attributeName, value);
     }

package/src/core/wrappers/ElementCreator.js

@@ -104,11 +104,7 @@ export const ElementCreator = {
      * @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/prototypes/attributes-extensions.js

@@ -1,24 +1,24 @@
-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;
-    }
-
-    bindAttributeWithObservable(element, attributeName, this);
-};
-
-ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
-TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
-    this.$hydrate(element, attributeName);
-};
+// 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;
+//     }
+//
+//     bindAttributeWithObservable(element, attributeName, this);
+// };
+//
+// ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+//
+// TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+//     this.$hydrate(element, attributeName);
+// };