native-document 1.0.169 → 1.0.173

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,27 +85,37 @@ 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) return null;
+        if (child == null) {
+            return null;
+        }
 
         child = child.toNdElement();
-        if (child instanceof Node) return child;
+        if (child && (child instanceof Node)) {
+            return child;
+        }
 
         while (child != null && !(child instanceof Node)) {
             child = child.toNdElement?.();

package/src/core/wrappers/HtmlElementWrapper.js

@@ -1,6 +1,5 @@
 import Anchor from '../elements/anchor/anchor';
 import {ElementCreator} from './ElementCreator';
-import {normalizeComponentArgs} from '../utils/args-types';
 import './NdPrototype';
 
 import '../../core/utils/prototypes.js';
@@ -19,7 +18,7 @@ import '../wrappers/prototypes/attributes-extensions';
  * @returns {Text} Text node, reactive if value is an ObservableItem
  */
 export const createTextNode = (value) => {
-    if(value) {
+    if(value != null) {
         return value.toNdElement();
     }
     return ElementCreator.createTextNode();
@@ -36,10 +35,11 @@ export const createTextNode = (value) => {
  * @returns {HTMLElement} The configured element
  */
 export const createVoidHtmlElement = (element, attributes) => {
-    ElementCreator.processAttributes(element, attributes);
+    attributes && ElementCreator.processAttributes(element, attributes);
     return element;
 };
 
+
 const OBJECT_PROTOTYPE = Object.prototype;
 /**
  * Applies attributes and children to an existing HTMLElement.
@@ -53,13 +53,18 @@ const OBJECT_PROTOTYPE = Object.prototype;
  */
 export const createHtmlElement = (element, _attributes, _children = null) => {
     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
+    if(_attributes?.__$isValidNdChild) { // If attributes is a ValidChild
         attributes = _children;
         children = _attributes;
     }
+    element = element.cloneNode();
 
-    ElementCreator.processAttributes(element, attributes);
-    ElementCreator.processChildren(children, element);
+    if(attributes != null) {
+        ElementCreator.processAttributes(element, attributes);
+    }
+    if(children != null) {
+        ElementCreator.processChildren(children, element);
+    }
     return element;
 };
 
@@ -70,6 +75,7 @@ export const createHtmlElement = (element, _attributes, _children = null) => {
  *
  * @param {string} name - HTML tag name (e.g. 'div', 'button', 'input'). Pass empty string to create a Fragment.
  * @param {((element: HTMLElement) => HTMLElement)|null} [customWrapper=null] - Optional function to augment the element before returning
+ * @param {boolean} [isVoid=false] - If true, the element is a void element (no children allowed, e.g. input, img)
  * @returns {(attr?: Object, children?: ValidChild) => HTMLElement} Element factory function
  * @example
  * const Div = HtmlElementWrapper('div');
@@ -84,14 +90,12 @@ export const createHtmlElement = (element, _attributes, _children = null) => {
 export default function  HtmlElementWrapper(name, customWrapper = null, isVoid = false) {
     const elementCreator = isVoid ? createVoidHtmlElement : createHtmlElement;
     if(name) {
-        if(customWrapper) {
+        if(customWrapper == null) {
             let node = null;
             let createElement = (attr, children) => {
                 node = document.createElement(name);
-                createElement = (attr, children) => {
-                    return elementCreator(customWrapper(node.cloneNode()), attr, children);
-                };
-                return elementCreator(customWrapper(node.cloneNode()), attr, children);;
+                createElement = elementCreator.bind(null, node);
+                return elementCreator(node.cloneNode(), attr, children);
             };
 
             return (attr, children) => createElement(attr, children);
@@ -101,9 +105,9 @@ export default function  HtmlElementWrapper(name, customWrapper = null, isVoid =
         let createElement = (attr, children) => {
             node = document.createElement(name);
             createElement = (attr, children) => {
-                return elementCreator(node.cloneNode(), attr, children);
+                return elementCreator(customWrapper(node.cloneNode()), attr, children);
             };
-            return elementCreator(node.cloneNode(), attr, children);
+            return elementCreator(customWrapper(node.cloneNode()), attr, children);;
         };
 
         return (attr, children) => createElement(attr, children);

package/src/core/wrappers/NDElement.js

@@ -187,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;
 };
 
@@ -418,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.
@@ -618,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,64 +20,74 @@ 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;
+    const fnName = 'on'+eventSourceName;
+    NDElement.prototype[fnName] = function(callback = null, options = null) {
+        if(!this.$element[inlineHandler] && !options) {
+            this.$element[inlineHandler] = callback;
+            return this;
+        }
+        this.$element.addEventListener(eventName, callback, options);
         return this;
     };
+    if(!HTMLElement.prototype[fnName]) {
+        HTMLElement.prototype[fnName] = function(callback, options) {
+            if(!this[inlineHandler] && !options) {
+                this[inlineHandler] = callback;
+                return this;
+            }
+            this.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,
-        });
+    const stopFnName = 'onStop'+eventSourceName;
+    const preventStopFnName = 'onPreventStop'+eventSourceName;
+
+    NDElement.prototype[stopFnName] = 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[preventStopFnName] = function(callback = null, options = null) {
+        _preventStop(this.$element, eventName, callback, options);
         return this;
     };
+    if(HTMLElement.prototype[stopFnName]) {
+        HTMLElement.prototype[stopFnName] = function(callback = null, options = null) {
+            _stop(this, eventName, callback, options);
+            return this;
+        };
+    }
+    if(!HTMLElement.prototype[preventStopFnName]) {
+        HTMLElement.prototype[preventStopFnName] = function(callback = null, options = null) {
+            _preventStop(this, 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,
-        });
+    const preventFnName = 'onPrevent'+eventSourceName;
+    NDElement.prototype[preventFnName] = 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();
+    if(HTMLElement.prototype[preventFnName]) {
+        HTMLElement.prototype[preventFnName] = function(callback = null, options = null) {
+            _prevent(this, eventName, callback, options);
+            return this;
+        };
     }
-    return this.$element.__$controller.signal;
-};
+});
 
 
 /**
@@ -91,7 +101,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 +128,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 +159,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 +173,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 +190,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 = {