native-document 1.0.17-1.1 → 1.0.17-1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.171.1",
+  "version": "1.0.171.10",
   "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/data/MemoryManager.js

@@ -23,7 +23,12 @@ const MemoryManager = (function() {
             $observables.delete(id);
         },
         getObservableById(id) {
-            return $observables.get(id)?.deref();
+            const observable = $observables.get(id);
+            if(!observable) {
+                $observables.delete(id);
+                return null;
+            }
+            return observable.deref();
         },
         cleanup() {
             for (const [_, weakObservableRef] of $observables) {

package/src/core/data/ObservableItem.js

@@ -124,6 +124,9 @@ ObservableItem.prototype.triggerListeners = function(operations) {
  * @param {{ action?: string, args?: any[], result?: any }} [operations] - Mutation metadata
  */
 ObservableItem.prototype.triggerWatchers = function(operations) {
+    if(!this.$watchers) {
+        return;
+    }
     const $watchers = this.$watchers;
     const $previousValue = this.$previousValue;
     const $currentValue = this.$currentValue;
@@ -160,6 +163,7 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
     this.triggerFirstListener(operations);
 };
 
+
 /**
  * Selects and assigns the optimal trigger strategy based on the current
  * combination of listeners and watchers (internal).
@@ -167,31 +171,40 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
  *
  * @internal
  */
-ObservableItem.prototype.assocTrigger = function() {
+ObservableItem.prototype.$runAssocTrigger = function() {
     this.$firstListener = null;
     if(this.$watchers?.size && this.$listeners?.length) {
-        this.$firstListener = this.$listeners[0];
-        this.trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
-        this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
+        this.$trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
         return;
     }
     if(this.$listeners?.length) {
         if(this.$listeners.length === 1) {
             this.$firstListener = this.$listeners[0];
-            this.trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
+            this.$trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
         }
         else {
-            this.trigger = this.triggerListeners;
+            this.$trigger = this.triggerListeners;
         }
         return;
     }
     if(this.$watchers?.size) {
-        this.trigger = this.triggerWatchers;
+        this.$trigger = this.triggerWatchers;
         return;
     }
-    this.trigger = noneTrigger;
+    this.$trigger = noneTrigger;
 };
-ObservableItem.prototype.trigger = noneTrigger;
+ObservableItem.prototype.assocTrigger = function() {
+    this.$trigger = null;
+};
+Object.defineProperty(ObservableItem.prototype, 'trigger', {
+    value: function (operations) {
+        if(!this.$trigger) {
+            this.$runAssocTrigger();
+        }
+        return this.$trigger(operations);
+    },
+    configurable: false,
+});
 
 
 const $setOperation = { action: 'set' };
@@ -543,7 +556,12 @@ ObservableItem.prototype.reset = function() {
  * @returns {string} String representation of the current value
  */
 ObservableItem.prototype.toString = function() {
-    return String(this.$currentValue);
+    if(this.$id) {
+        return this.$id.toString();
+    }
+    const id = MemoryManager.register(this);
+    this.$id = id;
+    return '{{obs:'+id+'}}';
 };
 
 /**

package/src/core/elements/anchor/anchor.js

@@ -2,6 +2,7 @@ import Validator from '../../utils/validator';
 import {ElementCreator} from '../../wrappers/ElementCreator';
 import AnchorWithSentinel from './anchor-with-sentinel';
 import oneChildAnchorOverwriting from './one-child-anchor-overwriting';
+import DebugManager from '../../utils/debug-manager';
 
 /**
  * Creates an anchor fragment — a managed DocumentFragment delimited by comment sentinels.
@@ -34,7 +35,7 @@ export default function Anchor(name, isUniqueChild = false) {
         ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
     const insertBefore = (parent, child, target) => {
-        const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        const childElement = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         insertBeforeRaw(parent, childElement, target);
     };
 
@@ -84,7 +85,7 @@ export default function Anchor(name, isUniqueChild = false) {
     anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
     anchorFragment.insertAtStart = function(child) {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode? child : ElementCreator.getChild(child);
         anchorFragment.insertAtStartRaw(child);
     };
 
@@ -141,7 +142,7 @@ export default function Anchor(name, isUniqueChild = false) {
     anchorFragment.delete = anchorFragment.removeWithAnchors;
 
     anchorFragment.replaceContent = function(child) {
-        const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        const childElement = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         anchorFragment.replaceContentRaw(childElement);
     };
 

package/src/core/elements/anchor/one-child-anchor-overwriting.js

@@ -10,7 +10,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     anchor.getParent = () => parent;
 
     anchor.appendChild = (child) => {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         parent.appendChild(child);
     };
 
@@ -19,7 +19,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     anchor.appendRaw = anchor.appendChildRaw;
 
     anchor.insertAtStart = (child) => {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
     };
     anchor.insertAtStartRaw = (child) => {
@@ -33,7 +33,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     };
 
     anchor.replaceContent = function(content) {
-        const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+        const child = (content && content.__$isNativeNode) ? content : ElementCreator.getChild(content);
         parent.replaceChildren(child);
     };
 
@@ -43,7 +43,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     anchor.setContent = anchor.replaceContent;
 
     anchor.insertBefore = (child, anchor) => {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         parent.insertBefore(child, anchor);
     };
     anchor.insertBeforeRaw = (child, anchor) => {

package/src/core/elements/content-formatter.js

@@ -24,6 +24,25 @@ export const Label = HtmlElementWrapper('label');
  */
 export const P = HtmlElementWrapper('p');
 
+
+/**
+ * Parses a string containing Observable placeholders and returns an array
+ * of strings and Observable instances ready to be used as NativeDocument children.
+ *
+ * Observable placeholders are generated automatically when an ObservableItem
+ * is interpolated in a template string via its toString() method.
+ *
+ * @param {string} string - Template string with optional Observable placeholders
+ * @returns {Array<string|ObservableItem>} Mixed array of static strings and resolved Observables
+ * @example
+ * const name = Observable('John');
+ * const count = Observable(5);
+ *
+ * Text(`Hello ${name}, count: ${count}`)
+ * // → ['Hello ', ObservableItem(John), ', count: ', ObservableItem(5)]
+ */
+export const Text = (string) => string.toNdChildren();
+
 /**
  * Alias for {@link P}.
  * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}

package/src/core/elements/control/for-each-array-cache.js

@@ -0,0 +1,59 @@
+
+
+export default function ForEachArrayCache(isIndexesRequired) {
+    this.$nodes = new Map();
+    this.$indexes = isIndexesRequired ? new Map() : null;
+
+    this.has = this.$nodes.has.bind(this.$nodes);
+
+    this.keys = function() {
+        return Array.from(this.$nodes.keys());
+    };
+
+    if(isIndexesRequired) {
+        this.delete = function(item) {
+            this.$nodes.get(item)?.nd.destroy();
+            this.$nodes.delete(item);
+            this.$indexes.delete(item);
+        };
+
+        this.set = function(item, child, index) {
+            this.$nodes.set(item, child);
+            this.$indexes.set(item, index);
+        };
+
+        this.clear = function() {
+            for(const [_, node] in this.$nodes.entries()) {
+                node.nd.destroy();
+            }
+            this.$nodes.clear();
+            this.$indexes.clear();
+        };
+
+        this.get = function(item) {
+            return {
+                child: this.$nodes.get(item),
+                indexObserver: this.$indexes.get(item),
+            };
+        };
+    } else {
+
+        this.delete = (item) => {
+            this.$nodes.get(item)?.nd.destroy();
+            this.$nodes.delete(item);
+        };
+        this.set = this.$nodes.set.bind(this.$nodes);
+        this.clear = function() {
+            for(const [_, node] in this.$nodes.entries()) {
+                node.nd.destroy();
+            }
+            this.$nodes.clear();
+        };
+
+        this.get = function(item) {
+            return { child: this.$nodes.get(item), indexObserver: null };
+        };
+    }
+
+}
+

package/src/core/elements/control/for-each-array.js

@@ -1,6 +1,7 @@
 import Anchor from '../anchor/anchor';
 import { ElementCreator } from '../../wrappers/ElementCreator';
 import NativeDocumentError from '../../errors/NativeDocumentError';
+import ForEachArrayCache from './for-each-array-cache';
 
 
 const CREATE_AND_CACHE_ACTIONS = new Set(['clear', 'push', 'unshift', 'replace']);
@@ -30,9 +31,9 @@ export function ForEachArray(data, callback, configs = {}) {
     const element = Anchor('ForEach Array', configs.isParentUniqueChild);
     const blockEnd = element.endElement();
 
-    const cache = new Map();
     let lastNumberOfItems = 0;
     const isIndexRequired = callback.length >= 2;
+    const cache = new ForEachArrayCache(isIndexRequired);
 
     const clear = (items) => {
         element.removeChildren();
@@ -64,7 +65,7 @@ export function ForEachArray(data, callback, configs = {}) {
                 throw new NativeDocumentError('ForEachArray child can\'t be null or undefined!');
             }
         }
-        cache.set(item, { child, indexObserver: null });
+        cache.set(item, child);
         return child;
     };
 
@@ -76,7 +77,7 @@ export function ForEachArray(data, callback, configs = {}) {
                 throw new NativeDocumentError('ForEachArray child can\'t be null or undefined!');
             }
         }
-        cache.set(item, { child, indexObserver  });
+        cache.set(item, child, indexObserver);
         return child;
     };
     if(!data.__$Observable) {
@@ -87,7 +88,7 @@ export function ForEachArray(data, callback, configs = {}) {
                     throw new NativeDocumentError('ForEachArray child can\'t be null or undefined!');
                 }
             }
-            cache.set(item, { child, indexObserver: null  });
+            cache.set(item, child);
             return child;
         };
     }
@@ -150,14 +151,14 @@ export function ForEachArray(data, callback, configs = {}) {
     if(Array.isArray(data)) {
         set = () => {
             clear(data);
-            element.appendChildRaw(Actions.toFragment(data));
+            Actions.appendToElement(data);
         };
     }
     else {
         set = () => {
             const items = data.val();
             clear(items);
-            element.appendChildRaw(Actions.toFragment(items));
+            Actions.appendToElement(items);
         };
     }
 
@@ -166,45 +167,36 @@ export function ForEachArray(data, callback, configs = {}) {
             const fragment = document.createDocumentFragment();
             for(let i = 0, length = items.length; i < length; i++) {
                 fragment.appendChild(buildItem(items[i], lastNumberOfItems));
-                lastNumberOfItems++;
             }
             return fragment;
         },
+        appendToElement: (items) => {
+            for(let i = 0, length = items.length; i < length; i++) {
+                element.appendChild(buildItem(items[i], i));
+            }
+        },
         add: (items) => {
-            element.appendChildRaw(Actions.toFragment(items));
+            Actions.appendToElement(items);
         },
         replace: (items) => {
             clear(items);
-            element.appendChildRaw(Actions.toFragment(items));
+            Actions.appendToElement(items);
         },
         set,
         reOrder: (items) => {
             let child = null;
-            const fragment = document.createDocumentFragment();
             for(const item of items) {
                 child = getItemChild(item);
                 if(child) {
-                    fragment.appendChild(child);
+                    element.appendChild(child);
                 }
             }
             child = null;
-            element.appendChildRaw(fragment);
         },
         removeOne: (element, index) => {
             removeCacheItem(element, true);
         },
         clear,
-        populate: ([target, iteration, callback]) => {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < iteration; i++) {
-                const data = callback(i);
-                target.push(data);
-                fragment.append(buildItem(data, i));
-                lastNumberOfItems++;
-            }
-            element.appendChildRaw(fragment);
-            fragment.replaceChildren();
-        },
         unshift: (values) => {
             element.insertAtStartRaw(Actions.toFragment(values));
         },

package/src/core/wrappers/AttributesWrapper.js

@@ -1,35 +1,8 @@
 import Validator from '../utils/validator';
-import NativeDocumentError from '../errors/NativeDocumentError';
 import {BOOL_ATTRIBUTES_NAME, BOOLEAN_ATTRIBUTES} from './constants.js';
 import {Observable} from '../data/Observable';
 
 
-const addNdDestroy = (element, observable, callback) => {
-    if(element.ndDestroy) {
-        element.ndAddDestroy(observable, callback);
-        return;
-    }
-    let destroyCallbacks = [];
-
-    element.ndAddDestroy = (observable, callback) => {
-        destroyCallbacks.push(observable);
-        destroyCallbacks.push(callback);
-    };
-    element.ndDestroy = () => {
-
-        for(let i = 0, len = destroyCallbacks.length; i < len; i+= 2) {
-            destroyCallbacks[i].unsubscribe(destroyCallbacks[i+1]);
-        }
-
-        destroyCallbacks.length = 0;
-        destroyCallbacks = null;
-        element.ndAddDestroy = null;
-        element.ndDestroy = null;
-        element = null;
-    };
-
-    element.ndAddDestroy(observable, callback);
-};
 
 /**
  * Applies a reactive class map to an HTMLElement.
@@ -42,33 +15,28 @@ const addNdDestroy = (element, observable, callback) => {
 export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
-
         if (value.__$isObservableChecker) {
             let lastClass = value.val();
             if (typeof lastClass === 'string') {
                 element.classes.toggle(lastClass, true);
-                const callback = (currentValue) => {
+                value.subscribe((currentValue) => {
                     element.classes.remove(lastClass);
                     element.classes.toggle(currentValue, true);
                     lastClass = currentValue;
-                };
-                value.subscribe(callback);
-                addNdDestroy(element, value, callback);
-                continue;
+                });
+                return;
             }
         }
 
         if (value.__$Observable) {
             element.classes.toggle(className, value.val());
-            const callback = (shouldAdd) => element.classes.toggle(className, shouldAdd);
-            value.subscribe(callback);
-            addNdDestroy(element, value, callback);
-            continue;
+            value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+            return;
         }
 
         if (value.$hydrate) {
             value.$hydrate(element, className);
-            continue;
+            return;
         }
 
         element.classes.toggle(className, value);
@@ -92,26 +60,22 @@ export const bindStyleAttribute = (element, data) => {
         if(value.__$Observable) {
             if(isCustomProperty) {
                 element.style.setProperty(styleName, value.val());
-                const callback = (newValue) => {
+                value.subscribe((newValue) => {
                     if(newValue === false) {
                         element.style.removeProperty(styleName);
                         return;
                     }
                     element.style.setProperty(styleName, newValue);
-                };
-                value.subscribe(callback);
-                addNdDestroy(element, value, callback);
+                });
             } else {
                 element.style[styleName] = value.val();
-                const callback = (newValue) => {
+                value.subscribe((newValue) => {
                     if(newValue === false) {
                         element.style.removeProperty(styleName);
                         return;
                     }
                     element.style[styleName] = newValue;
-                };
-                value.subscribe(callback);
-                addNdDestroy(element, value, callback);
+                });
             }
             continue;
         }
@@ -135,7 +99,7 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
     const isObservable = value.__$Observable;
     const defaultValue = isObservable? value.val() : value;
 
-    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
+    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
 
     if(typeof defaultValue === 'boolean') {
         element[attributeRealName] = defaultValue;
@@ -151,14 +115,10 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
             else {
                 element.addEventListener('input', () => value.set(element.value));
             }
-            const callback = (newValue) => element[attributeRealName] = newValue;
-            value.subscribe(callback);
-            addNdDestroy(element, value, callback);
+            value.subscribe((newValue) => element[attributeRealName] = newValue);
             return;
         }
-        const callback = (newValue) => element[attributeRealName] = (newValue === element.value);
-        value.subscribe(callback);
-        addNdDestroy(element, value, callback);
+        value.subscribe((newValue) => element[attributeRealName] = (newValue === element.value));
     }
 };
 
@@ -173,15 +133,11 @@ export const bindAttributeWithObservable = (element, attributeName, value) => {
     if(attributeName === 'value') {
         element.value = value.val();
         element.addEventListener('input', () => value.set(element.value));
-        const callback = (newValue) => element.value = newValue;
-        value.subscribe(callback);
-        addNdDestroy(element, value, callback);
+        value.subscribe((newValue) => element.value = newValue);
         return;
     }
     element.setAttribute(attributeName, value.val());
-    const callback = (newValue) => element.setAttribute(attributeName, newValue);
-    value.subscribe(callback);
-    addNdDestroy(element, value, callback);
+    value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
 };
 
 /**
@@ -189,29 +145,29 @@ export const bindAttributeWithObservable = (element, attributeName, value) => {
  * @param {HTMLElement} element
  * @param {Object} attributes
  */
-const AttributesWrapper = (element, attributes) => {
+const AttributesWrapper = (element, attributes = {}) => {
 
     if(process.env.NODE_ENV === 'development') {
         Validator.validateAttributes(attributes);
     }
 
-    for(const originalAttributeName in attributes) {
-        const value = attributes[originalAttributeName];
+    for(const attributeName in attributes) {
+        const value = attributes[attributeName];
         if(value == null) {
             continue;
         }
         const type = typeof value;
         if(type === 'string' || type === 'number') {
-            element.setAttribute(originalAttributeName, value);
+            element.setAttribute(attributeName, value);
             continue;
         }
-        const attributeName = originalAttributeName.toLowerCase();
+        // const attributeName = originalAttributeName.toLowerCase();
         if(value.__$Observable) {
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
                 continue;
             }
-            bindAttributeWithObservable(element, originalAttributeName, value);
+            bindAttributeWithObservable(element, attributeName, value);
             continue;
         }
         if(type ===  'object') {

package/src/core/wrappers/ElementCreator.js

@@ -1,7 +1,5 @@
-import Validator from '../utils/validator';
 import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from './AttributesWrapper';
 import PluginsManager from '../utils/plugins-manager';
-import {call} from '@babel/traverse/lib/path/context';
 
 let $textNodeCache = null;
 
@@ -9,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();
     },
@@ -21,9 +19,7 @@ export const ElementCreator = {
      */
     createObservableNode: (parent, observable) => {
         const text = ElementCreator.createObservableNodeWithoutParent(observable);
-        if(parent) {
-            parent.appendChild(text);
-        }
+        parent && parent.appendChild(text);
         return text;
     },
     /**
@@ -33,19 +29,8 @@ export const ElementCreator = {
      */
     createObservableNodeWithoutParent: (observable) => {
         const text = ElementCreator.createTextNode();
-        const callback = value => text.nodeValue = value;
-        observable.subscribe(callback);
+        observable.subscribe(value => text.nodeValue = value);
         text.nodeValue = observable.val();
-        let unsubscribe = () => {
-            observable.unsubscribe(callback);
-            observable = null;
-        };
-        text.ndDestroy = () => {
-            text.nodeValue = null;
-            unsubscribe();
-            unsubscribe = null;
-            text.ndDestroy = null;
-        };
         return text;
     },
     /**
@@ -72,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
@@ -95,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

@@ -36,10 +36,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 +54,17 @@ 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;
     }
 
-    ElementCreator.processAttributes(element, attributes);
-    ElementCreator.processChildren(children, element);
+    if(attributes) {
+        ElementCreator.processAttributes(element, attributes);
+    }
+    if(children) {
+        ElementCreator.processChildren(children, element);
+    }
     return element;
 };
 

package/src/core/wrappers/NDElement.js

@@ -195,27 +195,24 @@ NDElement.prototype.destroy = function() {
         observer.disconnect();
     }
 
-    const children = this.$element?.querySelectorAll('[data--nd-before-unmount]') || [];
+    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 = children.length; i < length; i++) {
-        const child = children[i];
+    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);
     }
 
-    const treeWalker = document.createTreeWalker(this.$element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
-    console.log(treeWalker);
-    while(treeWalker.nextNode()) {
-        const node = treeWalker.currentNode;
-        node.ndDestroy?.();
-    }
-
-    this.$element.ndDestroy?.();
-    this.$element.__$controller?.abort();
-    this.$element.__$controller = null;
     $lifeCycleObservers.delete(this.$element);
+    this.$element.remove();
     this.$element = null;
 };
 
@@ -437,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.
@@ -637,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/nd-element-extensions.js

@@ -4,6 +4,43 @@ import TemplateBinding from '../TemplateBinding';
 import { ElementCreator } from '../ElementCreator';
 import PluginsManager from '../../utils/plugins-manager';
 import ObservableChecker from '../../data/ObservableChecker';
+import MemoryManager from '../../data/MemoryManager';
+
+
+
+const OBS_PATTERN = /({{obs:\d+}})/;
+const OBS_ID_PATTERN = /\d+/;
+
+
+/**
+ * Parses a string containing Observable placeholders and returns an array
+ * of strings and Observable instances.
+ *
+ * Placeholders are generated automatically when an ObservableItem is interpolated
+ * in a template string via its toString() method.
+ *
+ * @returns {Array<string|ObservableItem>} Mixed array of static strings and resolved Observables
+ * @example
+ * const name = Observable('John');
+ * const count = Observable(5);
+ *
+ * `Hello ${name}, count: ${count}`.toNdChildren()
+ * // → ['Hello ', ObservableItem(John), ', count: ', ObservableItem(5)]
+ */
+Object.defineProperty(String.prototype, 'toNdChildren', {
+    value: function() {
+        return this.split(OBS_PATTERN).filter(Boolean).map((item) => {
+            if(OBS_PATTERN.test(item)) {
+                const id = item.match(OBS_ID_PATTERN)[0];
+                return MemoryManager.getObservableById(Number(id));
+            }
+            return item;
+        });
+    },
+    writable: true,
+    configurable: true,
+    enumerable: false,
+});
 
 /**
  * Registers a non-enumerable toNdElement method on a prototype.
@@ -20,9 +57,62 @@ const defineToNdElement = (target, fn) => {
     });
 };
 
+/**
+ * Marks a prototype as a valid NativeDocument child node.
+ *
+ * @param {object} target - The prototype to mark
+ */
+const defineValidNdChild = (target) => {
+    Object.defineProperty(target, '__$isValidNdChild', {
+        value: true,
+        writable: true,
+        configurable: true,
+        enumerable: false,
+    });
+};
+
+/**
+ * Marks a prototype as a native DOM node.
+ * Faster alternative to instanceof Node for hot paths.
+ *
+ * @param {object} target - The prototype to mark
+ */
+const defineNativeNode = (target) => {
+    Object.defineProperty(target, '__$isNativeNode', {
+        value: true,
+        writable: true,
+        configurable: true,
+        enumerable: false,
+    });
+};
+
 NDElement.$getChild = ElementCreator.getChild;
 
-// -- String -------------------------------------------------------------------
+// -- __$isNativeNode ----------------------------------------------------------
+
+defineNativeNode(Element.prototype);
+defineNativeNode(Text.prototype);
+defineNativeNode(Comment.prototype);
+defineNativeNode(Document.prototype);
+defineNativeNode(DocumentFragment.prototype);
+
+// -- __$isValidNdChild --------------------------------------------------------
+
+defineValidNdChild(String.prototype);
+defineValidNdChild(Number.prototype);
+defineValidNdChild(Boolean.prototype);
+defineValidNdChild(Array.prototype);
+defineValidNdChild(Element.prototype);
+defineValidNdChild(Text.prototype);
+defineValidNdChild(Comment.prototype);
+defineValidNdChild(DocumentFragment.prototype);
+defineValidNdChild(NDElement.prototype);
+defineValidNdChild(ObservableItem.prototype);
+defineValidNdChild(ObservableChecker.prototype);
+defineValidNdChild(TemplateBinding.prototype);
+defineValidNdChild(Function.prototype);
+
+// -- toNdElement --------------------------------------------------------------
 
 /**
  * Converts a string to a static text node.
@@ -30,22 +120,18 @@ NDElement.$getChild = ElementCreator.getChild;
  * @returns {Text}
  */
 defineToNdElement(String.prototype, function () {
-    return ElementCreator.createStaticTextNode(null, this);
+    return ElementCreator.createStaticTextNodeWithoutParent(this);
 });
 
-// -- Number -------------------------------------------------------------------
-
 /**
  * Converts a number to a static text node.
  *
  * @returns {Text}
  */
 defineToNdElement(Number.prototype, function () {
-    return ElementCreator.createStaticTextNode(null, this.toString());
+    return ElementCreator.createStaticTextNodeWithoutParent(this.toString());
 });
 
-// -- DOM nodes (identity) -----------------------------------------------------
-
 /**
  * Returns the DOM node itself (identity).
  *
@@ -57,8 +143,6 @@ defineToNdElement(Comment.prototype, function () { return this; });
 defineToNdElement(Document.prototype, function () { return this; });
 defineToNdElement(DocumentFragment.prototype, function () { return this; });
 
-// -- ObservableItem -----------------------------------------------------------
-
 /**
  * Converts an ObservableItem to a reactive text node that updates when the value changes.
  *
@@ -70,8 +154,6 @@ defineToNdElement(ObservableItem.prototype, function () {
 
 ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
 
-// -- NDElement ----------------------------------------------------------------
-
 /**
  * Returns the underlying HTMLElement of this NDElement.
  *
@@ -81,8 +163,6 @@ defineToNdElement(NDElement.prototype, function () {
     return this.$element;
 });
 
-// -- Array --------------------------------------------------------------------
-
 /**
  * Converts the array to a DocumentFragment containing all child elements.
  *
@@ -98,8 +178,6 @@ defineToNdElement(Array.prototype, function () {
     return fragment;
 });
 
-// -- Function -----------------------------------------------------------------
-
 /**
  * Calls the function and converts its return value to a DOM node.
  *
@@ -113,8 +191,6 @@ defineToNdElement(Function.prototype, function () {
     return ElementCreator.getChild(child());
 });
 
-// -- TemplateBinding ----------------------------------------------------------
-
 /**
  * Converts the TemplateBinding to a hydratable DOM node.
  *

package/src/ui/components/accordion/AccordionItemRender.js

@@ -36,8 +36,8 @@ const buildHeader = ($desc, instance, headerId, panelId) => {
     ];
 
     const header = Div({
-        class:          'accordion-header',
-        id:             headerId,
+        class: 'accordion-header',
+        id: headerId,
         // [a11y] aria-expanded reactive, aria-controls points to panel
         'aria-expanded': $desc.expanded.transform((v) => String(v)),
         'aria-controls': panelId,
@@ -64,12 +64,12 @@ const buildIndicator = ($desc) => {
     }, '▾');
 };
 
-const buildContent = ($desc, instance) => {
+const buildContent = ($desc, instance, headerId, panelId) => {
     // [a11y] role=region + aria-labelledby on panel
     const panelProps = {
-        class:            'accordion-content',
-        id:               panelId,
-        role:             'region',
+        class: 'accordion-content',
+        id: panelId,
+        role: 'region',
         'aria-labelledby': headerId,
     };
 

package/types/elements.d.ts

@@ -2,6 +2,9 @@
 import { ObservableItem } from './observable';
 import { BindingHydrator } from './template-cloner';
 import { NDElement } from './nd-element';
+import {AnchorAttributes,
+    AudioAttributes, CanvasAttributes, DetailsAttributes, DialogAttributes, GlobalAttributes, OlAttributes,
+    SourceAttributes, SvgAttributes, TrackAttributes, VideoAttributes, ThAttributes, ModAttributes, TdAttributes, TimeAttributes } from './globals';
 
 // - Re-export all attribute types and utilities from globals
 export type {
@@ -75,6 +78,8 @@ export type NdHTMLElement<T extends HTMLElement = HTMLElement> = T & { nd: NDEle
 // Text & structural elements
 // ---------------------------------------------------------
 
+
+export declare function Text(string: string): string | Array<string | ObservableItem>;
 export declare const Div:        ElementFunction<GlobalAttributes, HTMLDivElement>;
 export declare const Span:       ElementFunction<GlobalAttributes, HTMLSpanElement>;
 export declare const P:          ElementFunction<GlobalAttributes, HTMLParagraphElement>;