native-document 1.0.17-1.8 → 1.0.17-2.1

package/CHANGELOG.md

@@ -11,6 +11,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.0.172] - 2026-06-15
+
+### Added
+
+- `Text(string)` — shorthand for `string.toNdChildren()`, parses Observable placeholders in template strings
+- `String.prototype.toNdChildren()` — splits a string containing `{{obs:N}}` placeholders into a mixed array of strings and resolved Observables
+- `ObservableItem.prototype.toString()` — auto-registers the Observable in MemoryManager and returns `{{obs:id}}`, enabling reactive interpolation via standard template literals
+- `NDElement.prototype.className(classes)` — adds static classes, bypasses AttributesWrapper
+- `NDElement.prototype.class(className, value)` — adds a reactive class binding, bypasses AttributesWrapper
+- `__$isNativeNode` flag on DOM prototypes (`Element`, `Text`, `Comment`, `Document`, `DocumentFragment`) — faster alternative to `instanceof Node`
+- `__$isValidNdChild` flag on all valid NdChild prototypes — single property check replaces multiple type guards
+- `defineToNdElement`, `defineValidNdChild`, `defineNativeNode` — non-enumerable prototype helpers in `nd-element-extensions`
+- camelCase variants added to `BOOLEAN_ATTRIBUTES` — removes `toLowerCase()` call on each attribute in the hot path
+
+### Changed
+
+- `ElementCreator.processChildren` and `getChild` — refactored for better performance
+- `nd-element-extensions` — all prototype extensions converted to non-enumerable `defineProperty`
+- `AttributesWrapper` — `options` defaults to `null` instead of `{}`, fixes truthy check issue
+- NDElement events — inline handler (`on*`) used when no existing handler and no options; falls back to `addEventListener` for subsequent handlers or when options are provided
+- `_prevent`, `_stop`, `_preventStop` — updated with same inline handler strategy
+
+---
+
 ## [1.0.170] - 2026-06-10
 
 ### Added
@@ -216,7 +240,8 @@ Entries use the following categories:
 
 ---
 
-[Unreleased]: https://github.com/afrocodeur/native-document/compare/v1.0.170...HEAD
+[Unreleased]: https://github.com/afrocodeur/native-document/compare/v1.0.172...HEAD
+[1.0.172]: https://github.com/afrocodeur/native-document/compare/v1.0.170...v1.0.172
 [1.0.170]: https://github.com/afrocodeur/native-document/compare/v1.0.169...v1.0.170
 [1.0.169]: https://github.com/afrocodeur/native-document/compare/v1.0.167...v1.0.169
 [1.0.167]: https://github.com/afrocodeur/native-document/compare/v1.0.166...v1.0.167

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.171.8",
+  "version": "1.0.172.1",
   "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/ObservableItem.js

@@ -18,10 +18,10 @@ import {$getFromStorage, $saveToStorage} from '../utils/localstorage';
  * @param {boolean} [configs.propagation] - Controls whether changes propagate to parent observables
  * @example
  * const count = new ObservableItem(0);
- * const name  = new ObservableItem('John', { reset: true });
+ * const name = new ObservableItem('John', { reset: true });
  */
 export default function ObservableItem(value, configs = null) {
-    value = Validator.isObservable(value) ? value.val() : value;
+    value = value?.__$Observable ? value.val() : value;
 
     this.$previousValue = null;
     this.$currentValue = value;
@@ -29,13 +29,13 @@ export default function ObservableItem(value, configs = null) {
         this.$isCleanedUp = false;
     }
 
-    this.$firstListener = null;
-    this.$listeners = null;
-    this.$watchers = null;
-
-    this.$memoryId = null;
+    // this.$firstListener = null;
+    // this.$listeners = null;
+    // this.$watchers = null;
+    //
+    // this.$id = null;
 
-    if(configs) {
+    if(configs !== null) {
         this.configs = configs;
         if(configs.reset) {
             this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;

package/src/core/wrappers/AttributesWrapper.js

@@ -1,38 +1,9 @@
 import Validator from '../utils/validator';
-import NativeDocumentError from '../errors/NativeDocumentError';
 import {BOOL_ATTRIBUTES_NAME, BOOLEAN_ATTRIBUTES} from './constants.js';
 import {Observable} from '../data/Observable';
 
 
 
-export const handleClassAttributeItem  = (element, className, value) => {
-    if (value.__$isObservableChecker) {
-        let lastClass = value.val();
-        if (typeof lastClass === 'string') {
-            element.classes.toggle(lastClass, true);
-            value.subscribe((currentValue) => {
-                element.classes.remove(lastClass);
-                element.classes.toggle(currentValue, true);
-                lastClass = currentValue;
-            });
-            return;
-        }
-    }
-
-    if (value.__$Observable) {
-        element.classes.toggle(className, value.val());
-        value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-        return;
-    }
-
-    if (value.$hydrate) {
-        value.$hydrate(element, className);
-        return;
-    }
-
-    element.classes.toggle(className, value);
-};
-
 /**
  * Applies a reactive class map to an HTMLElement.
  * Each key is a CSS class name; each value is a boolean or ObservableItem<boolean>.
@@ -44,7 +15,31 @@ export const handleClassAttributeItem  = (element, className, value) => {
 export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
-        handleClassAttributeItem(element, className, value);
+        if (value.__$isObservableChecker) {
+            let lastClass = value.val();
+            if (typeof lastClass === 'string') {
+                element.classes.toggle(lastClass, true);
+                value.subscribe((currentValue) => {
+                    element.classes.remove(lastClass);
+                    element.classes.toggle(currentValue, true);
+                    lastClass = currentValue;
+                });
+                return;
+            }
+        }
+
+        if (value.__$Observable) {
+            element.classes.toggle(className, value.val());
+            value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+            return;
+        }
+
+        if (value.$hydrate) {
+            value.$hydrate(element, className);
+            return;
+        }
+
+        element.classes.toggle(className, value);
     }
 };
 

package/src/core/wrappers/ElementCreator.js

@@ -90,15 +90,8 @@ export const ElementCreator = {
         }
         if(Array.isArray(children)) {
             for(let i = 0, length = children.length; i < length; i++) {
-                let child = children[i];
-                if(child == null) {
-                    continue;
-                }
-                if(!child.__$isNativeNode) {
-                    child = ElementCreator.getChild(children[i]);
-                    if(child) {
-                        parent.appendChild(child);
-                    }
+                const child = ElementCreator.getChild(children[i]);
+                if(child === null) {
                     continue;
                 }
                 parent.appendChild(child);
@@ -120,11 +113,11 @@ export const ElementCreator = {
         }
 
         child = child.toNdElement();
-        if (child && child.__$isNativeNode) {
+        if (child && (child instanceof Node)) {
             return child;
         }
 
-        while (child != null && !child.__$isNativeNode) {
+        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();
@@ -58,11 +57,12 @@ export const createHtmlElement = (element, _attributes, _children = null) => {
         attributes = _children;
         children = _attributes;
     }
+    element = element.cloneNode();
 
-    if(attributes) {
+    if(attributes != null) {
         ElementCreator.processAttributes(element, attributes);
     }
-    if(children) {
+    if(children != null) {
         ElementCreator.processChildren(children, element);
     }
     return element;
@@ -75,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');
@@ -89,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);
@@ -106,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

@@ -5,7 +5,7 @@ import DebugManager from '../utils/debug-manager.js';
 import attributesWrapper, {
     bindAttributeWithObservable,
     bindClassAttribute,
-    bindStyleAttribute, handleClassAttributeItem,
+    bindStyleAttribute,
 } from './AttributesWrapper';
 
 /**
@@ -434,17 +434,6 @@ NDElement.prototype.style = function(style) {
     return this;
 };
 
-NDElement.prototype.className = function(classes) {
-    this.$element.classes.add(classes);
-    return this;
-};
-
-NDElement.prototype.class = function(className, value) {
-    handleClassAttributeItem(this.$element, className, value);
-    return this;
-};
-
-
 /**
  * Extends the NDElement prototype with new methods available to all NDElement instances.
  * Use this to add global methods to all NDElements.

package/src/core/wrappers/NdPrototype.js

@@ -26,34 +26,67 @@ Object.defineProperty(NDElement.prototype, 'nd', {
 EVENTS.forEach(eventSourceName => {
     const eventName = eventSourceName.toLowerCase();
     const inlineHandler = 'on'+eventName;
-    NDElement.prototype['on'+eventSourceName] = function(callback = null, options = null) {
+    const fnName = 'on'+eventSourceName;
+    NDElement.prototype[fnName] = function(callback = null, options = null) {
         if(!this.$element[inlineHandler] && !options) {
             this.$element[inlineHandler] = callback;
-        } else {
-            this.$element.addEventListener(eventName, callback, options);
+            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 = null) {
+    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 = null) {
+    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 = null) {
+    const preventFnName = 'onPrevent'+eventSourceName;
+    NDElement.prototype[preventFnName] = function(callback = null, options = null) {
         _prevent(this.$element, eventName, callback, options);
         return this;
     };
+    if(HTMLElement.prototype[preventFnName]) {
+        HTMLElement.prototype[preventFnName] = function(callback = null, options = null) {
+            _prevent(this, eventName, callback, options);
+            return this;
+        };
+    }
 });
 
 
@@ -160,6 +193,7 @@ const _preventStop = function(element, eventName, callback, options) {
     const inlineHandler = 'on' + eventName;
     if(!element[inlineHandler] && !options) {
         element[inlineHandler] = handler;
+        return;
     }
     element.addEventListener(eventName, handler, options);
     return this;

package/src/core/wrappers/template-cloner/NodeCloner.js

@@ -17,8 +17,12 @@ export default function NodeCloner($element) {
     this.$styles = null;
     this.$attrs = null;
     this.$ndMethods = null;
+    this.$content = null;
 }
 
+NodeCloner.prototype.shouldBeHydrate = function() {
+    return this.$attrs !== null || this.$classes !== null || this.$styles !== null || this.$ndMethods !== null || this.$content !== null;
+};
 
 /**
  * Attaches a template binding to the element by hydrating it with the specified method.
@@ -171,16 +175,16 @@ NodeCloner.prototype.attach = function(methodName, callback) {
  * Registers a reactive text content binding for the element.
  *
  * @internal
- * @param {Function} valueorProperty - Function receiving data and returning the text content
+ * @param {Function} valueOrProperty - Function receiving data and returning the text content
  * @returns {NodeCloner} this
  */
-NodeCloner.prototype.text = function(valueorProperty) {
-    this.$content = valueorProperty;
-    if(typeof valueorProperty === 'function') {
-        this.cloneNode = (data) => createTextNode(valueorProperty.apply(null, data));
+NodeCloner.prototype.text = function(valueOrProperty) {
+    this.$content = valueOrProperty;
+    if(typeof valueOrProperty === 'function') {
+        this.cloneNode = (data) => createTextNode(valueOrProperty.apply(null, data));
         return this;
     }
-    this.cloneNode = (data) => createTextNode(data[0][valueorProperty]);
+    this.cloneNode = (data) => createTextNode(data[0][valueOrProperty]);
     return this;
 };
 

package/src/core/wrappers/template-cloner/TemplateCloner.js

@@ -24,11 +24,11 @@ export function TemplateCloner($fn) {
 
     const assignClonerToNode = ($node) => {
         const childNodes = $node.childNodes;
-        let containDynamicNode = !!$node.nodeCloner;
+        let containDynamicNode = $node.nodeCloner?.shouldBeHydrate();
         const childNodesLength = childNodes.length;
         for(let i = 0; i < childNodesLength; i++) {
             const child = childNodes[i];
-            if(child.nodeCloner) {
+            if(child.nodeCloner && child.nodeCloner.shouldBeHydrate()) {
                 containDynamicNode = true;
             }
             const localContainDynamicNode = assignClonerToNode(child);
@@ -179,9 +179,12 @@ export function useCache(fn) {
         return node;
     };
 
+    if(fn.length === 0) {
+        return () => wrapper();
+    }
     if(fn.length < 2) {
-        return (...args) => {
-            return wrapper(args);
+        return (arg) => {
+            return wrapper([arg]);
         };
     }
     return (_, __, ...args) => {