native-document 1.0.168 → 1.0.172

package/src/core/wrappers/ElementCreator.js

@@ -1,4 +1,3 @@
-import Validator from '../utils/validator';
 import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from './AttributesWrapper';
 import PluginsManager from '../utils/plugins-manager';
 
@@ -8,7 +7,7 @@ export const ElementCreator = {
     createTextNode() {
         if(!$textNodeCache) {
             $textNodeCache = document.createTextNode('');
-            ElementCreator.createTextNode = () => $textNodeCache.cloneNode();
+            ElementCreator.createTextNode = $textNodeCache.cloneNode.bind($textNodeCache);
         }
         return $textNodeCache.cloneNode();
     },
@@ -19,10 +18,19 @@ export const ElementCreator = {
      * @returns {Text}
      */
     createObservableNode: (parent, observable) => {
+        const text = ElementCreator.createObservableNodeWithoutParent(observable);
+        parent && parent.appendChild(text);
+        return text;
+    },
+    /**
+     *
+     * @param {ObservableItem} observable
+     * @returns {Text}
+     */
+    createObservableNodeWithoutParent: (observable) => {
         const text = ElementCreator.createTextNode();
         observable.subscribe(value => text.nodeValue = value);
         text.nodeValue = observable.val();
-        parent && parent.appendChild(text);
         return text;
     },
     /**
@@ -49,6 +57,11 @@ export const ElementCreator = {
         parent && parent.appendChild(text);
         return text;
     },
+    createStaticTextNodeWithoutParent: (value) => {
+        const text = ElementCreator.createTextNode();
+        text.nodeValue = value;
+        return text;
+    },
     /**
      *
      * @param {string} name
@@ -72,47 +85,50 @@ export const ElementCreator = {
      * @param {HTMLElement|DocumentFragment} parent
      */
     processChildren: (children, parent) => {
-        if(children === null) return;
         if(process.env.NODE_ENV === 'development') {
             PluginsManager.emit('BeforeProcessChildren', parent);
         }
-        const child = ElementCreator.getChild(children);
-        if(child) {
-            parent.appendChild(child);
+        if(Array.isArray(children)) {
+            for(let i = 0, length = children.length; i < length; i++) {
+                const child = ElementCreator.getChild(children[i]);
+                if(child === null) {
+                    continue;
+                }
+                parent.appendChild(child);
+            }
+            return;
         }
+        const child = ElementCreator.getChild(children);
+        parent.appendChild(child);
         if(process.env.NODE_ENV === 'development') {
             PluginsManager.emit('AfterProcessChildren', parent);
         }
     },
     async safeRemove(element) {
         await element.remove();
-
     },
     getChild: (child) => {
-        if(child == null) {
+        if (child == null) {
             return null;
         }
-        if(child.toNdElement) {
-            do {
-                child =  child.toNdElement();
-                if(Validator.isElement(child)) {
-                    return child;
-                }
-            } while (child.toNdElement);
+
+        child = child.toNdElement();
+        if (child && (child instanceof Node)) {
+            return child;
+        }
+
+        while (child != null && !(child instanceof Node)) {
+            child = child.toNdElement?.();
         }
 
-        return ElementCreator.createStaticTextNode(null, child);
+        return child instanceof Node ? child : null;
     },
     /**
      *
      * @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,22 @@ 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) => {
+    attributes && ElementCreator.processAttributes(element, attributes);
+    return element;
+};
+
+
+const OBJECT_PROTOTYPE = Object.prototype;
 /**
  * Applies attributes and children to an existing HTMLElement.
  * Used internally by HtmlElementWrapper on each cloned node.
@@ -38,10 +53,18 @@ 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?.__$isValidNdChild) { // If attributes is a ValidChild
+        attributes = _children;
+        children = _attributes;
+    }
 
-    ElementCreator.processAttributes(element, attributes);
-    ElementCreator.processChildren(children, element);
+    if(attributes) {
+        ElementCreator.processAttributes(element, attributes);
+    }
+    if(children) {
+        ElementCreator.processChildren(children, element);
+    }
     return element;
 };
 
@@ -63,16 +86,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 +106,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,8 +38,19 @@ 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;
+        };
+    }
+    const child = NDElement.$getChild(element);
+    if(child) {
+        this.$attachements.appendChild(child);
     }
-    this.$attachements.appendChild(NDElement.$getChild(element));
     return this;
 };
 
@@ -176,16 +187,32 @@ NDElement.prototype.destroyOnUnmount = function() {
  * @returns {this}
  */
 NDElement.prototype.destroy = function() {
-    this.$element?.querySelectorAll('[data--nd-before-unmount]').forEach(child => {
+    if(!this.$element) {
+        return this;
+    }
+    const observer = $lifeCycleObservers.get(this.$element);
+    if(observer) {
+        observer.disconnect();
+    }
+
+    const treewalk = document.createTreeWalker(this.$element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    while(treewalk.nextNode()) {
+        nodes.push(treewalk.currentNode);
+    }
+
+    for(let i = 0, length = nodes.length; i < length; i++) {
+        const child = nodes[i];
         child.remove();
-        child.__$controller?.abort();
-        child.__$controller = null;
+        const childObserver = $lifeCycleObservers.get(child);
+        if(childObserver) {
+            childObserver.disconnect();
+        }
         $lifeCycleObservers.delete(child);
-    });
+    }
 
-    this.$element.__$controller?.abort();
-    this.$element.__$controller = null;
     $lifeCycleObservers.delete(this.$element);
+    this.$element.remove();
     this.$element = null;
 };
 
@@ -407,7 +434,6 @@ NDElement.prototype.style = function(style) {
     return this;
 };
 
-
 /**
  * Extends the NDElement prototype with new methods available to all NDElement instances.
  * Use this to add global methods to all NDElements.
@@ -607,7 +633,7 @@ NDElement.prototype.contentEditable = function($obs, {format = 'html'} = {}) {
 
     this.$element.addEventListener('input', () => {
         $obs?.set(getValue());
-    }, { signal: this.$getSignal() });
+    });
 
     return this;
 };

package/src/core/wrappers/NdPrototype.js

@@ -20,65 +20,42 @@ Object.defineProperty(NDElement.prototype, 'nd', {
 });
 
 
-
 // ----------------------------------------------------------------
 // Events helpers
 // ----------------------------------------------------------------
 EVENTS.forEach(eventSourceName => {
     const eventName = eventSourceName.toLowerCase();
-    NDElement.prototype['on'+eventSourceName] = function(callback = null, options = {}) {
-        this.$element.addEventListener(eventName, callback, {
-            signal: this.$getSignal(),
-            ...options,
-        });
+    const inlineHandler = 'on'+eventName;
+    NDElement.prototype['on'+eventSourceName] = function(callback = null, options = null) {
+        if(!this.$element[inlineHandler] && !options) {
+            this.$element[inlineHandler] = callback;
+            return this;
+        }
+        this.$element.addEventListener(eventName, callback, options);
         return this;
     };
 });
 
 EVENTS_WITH_STOP.forEach(eventSourceName => {
     const eventName = eventSourceName.toLowerCase();
-    NDElement.prototype['onStop'+eventSourceName] = function(callback = null, options = {}) {
-        _stop(this.$element, eventName, callback, {
-            signal: this.$getSignal(),
-            ...options,
-        });
+    NDElement.prototype['onStop'+eventSourceName] = function(callback = null, options = null) {
+        _stop(this.$element, eventName, callback, options);
         return this;
     };
-    NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null, options = {}) {
-        _preventStop(this.$element, eventName, callback, {
-            signal: this.$getSignal(),
-            ...options,
-        });
+    NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null, options = null) {
+        _preventStop(this.$element, eventName, callback, options);
         return this;
     };
 });
 
 EVENTS_WITH_PREVENT.forEach(eventSourceName => {
     const eventName = eventSourceName.toLowerCase();
-    NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null, options = {}) {
-        _prevent(this.$element, eventName, callback, {
-            signal: this.$getSignal(),
-            ...options,
-        });
+    NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null, options = null) {
+        _prevent(this.$element, eventName, callback, options);
         return this;
     };
 });
 
-/**
- * Retrieves or creates an AbortController signal tied to this element's lifecycle.
- * The signal is automatically aborted when the element is removed via .nd.remove().
- * Used internally by all event listeners (onClick, onInput, etc.) to auto-cleanup on unmount.
- *
- * @internal
- * @returns {AbortSignal} The signal for this element's AbortController
- */
-NDElement.prototype.$getSignal = function() {
-    if(!this.$element.__$controller) {
-        this.$element.__$controller = new AbortController();
-    }
-    return this.$element.__$controller.signal;
-};
-
 
 /**
  * Adds a native event listener to the underlying HTMLElement.
@@ -91,7 +68,6 @@ NDElement.prototype.$getSignal = function() {
  */
 NDElement.prototype.on = function(name, callback, options) {
     this.$element.addEventListener(name.toLowerCase(), callback, {
-        signal: this.$getSignal(),
         ...options,
     });
     return this;
@@ -119,7 +95,6 @@ NDElement.prototype.off = function(name, callback) {
  */
 NDElement.prototype.once = function(name, callback) {
     this.$element.addEventListener(name.toLowerCase(), callback, {
-        signal: this.$getSignal(),
         once: true,
     });
     return this;
@@ -151,8 +126,13 @@ const _prevent = function(element, eventName, callback, options) {
         event.preventDefault();
         callback && callback.call(element, event);
     };
+
+    const inlineHandler = 'on' + eventName;
+    if(!element[inlineHandler] && !options) {
+        element[inlineHandler] = handler;
+        return;
+    }
     element.addEventListener(eventName, handler, options);
-    return this;
 };
 
 const _stop = function(element, eventName, callback, options) {
@@ -160,6 +140,13 @@ const _stop = function(element, eventName, callback, options) {
         event.stopPropagation();
         callback && callback.call(element, event);
     };
+
+    const inlineHandler = 'on' + eventName;
+    if(!element[inlineHandler] && !options) {
+        element[inlineHandler] = handler;
+        return;
+    }
+
     element.addEventListener(eventName, handler, options);
     return this;
 };
@@ -170,6 +157,11 @@ const _preventStop = function(element, eventName, callback, options) {
         event.preventDefault();
         callback && callback.call(element, event);
     };
+    const inlineHandler = 'on' + eventName;
+    if(!element[inlineHandler] && !options) {
+        element[inlineHandler] = handler;
+        return;
+    }
     element.addEventListener(eventName, handler, options);
     return this;
 };

package/src/core/wrappers/constants.js

@@ -3,19 +3,19 @@ export const BOOLEAN_ATTRIBUTES = new Set([
     'checked',
     'selected',
     'disabled',
-    'readonly',
+    'readonly', 'readOnly',
     'required',
-    'autofocus',
+    'autofocus', 'autoFocus',
     'multiple',
-    'autocomplete',
+    'autocomplete', 'autoComplete',
     'hidden',
-    'contenteditable',
-    'spellcheck',
+    'contenteditable', 'contentEditable',
+    'spellcheck', 'spellCheck',
     'translate',
     'draggable',
     'async',
     'defer',
-    'autoplay',
+    'autoplay', 'autoPlay',
     'controls',
     'loop',
     'muted',
@@ -23,13 +23,13 @@ export const BOOLEAN_ATTRIBUTES = new Set([
     'reversed',
     'open',
     'default',
-    'formnovalidate',
-    'novalidate',
+    'formnovalidate', 'formNoValidate',
+    'novalidate', 'noValidate',
     'scoped',
-    'itemscope',
-    'allowfullscreen',
-    'allowpaymentrequest',
-    'playsinline',
+    'itemscope', 'itemScope',
+    'allowfullscreen', 'allowFullscreen',
+    'allowpaymentrequest', 'allowPaymentRequest',
+    'playsinline', 'playsInline',
 ]);
 
 export const BOOL_ATTRIBUTES_NAME = {

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