native-document 1.0.17-1.9 → 1.0.17-2.2

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.9",
+  "version": "1.0.172.2",
   "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;
@@ -33,9 +33,9 @@ export default function ObservableItem(value, configs = null) {
     this.$listeners = null;
     this.$watchers = null;
 
-    this.$memoryId = null;
+    this.$id = null;
 
-    if(configs) {
+    if(configs !== null) {
         this.configs = configs;
         if(configs.reset) {
             this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
@@ -308,7 +308,7 @@ ObservableItem.prototype.cleanup = function() {
         }
         this.$cleanupListeners = null;
     }
-    MemoryManager.unregister(this.$memoryId);
+    MemoryManager.unregister(this.$id);
     this.disconnectAll();
     if(process.env.NODE_ENV === 'development') {
         this.$isCleanedUp = true;

package/src/core/wrappers/ElementCreator.js

@@ -113,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/NdPrototype.js

@@ -26,7 +26,8 @@ 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;
             return this;
@@ -34,26 +35,58 @@ EVENTS.forEach(eventSourceName => {
         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;
+        };
+    }
 });
 
 

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) => {