native-document 1.0.17-1.6 → 1.0.17-1.8

package/package.json

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

@@ -151,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);
         };
     }
 
@@ -167,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

@@ -3,6 +3,36 @@ 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>.
@@ -14,32 +44,7 @@ import {Observable} from '../data/Observable';
 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);
-                value.subscribe((currentValue) => {
-                    element.classes.remove(lastClass);
-                    element.classes.toggle(currentValue, true);
-                    lastClass = currentValue;
-                });
-                continue;
-            }
-        }
-
-        if (value.__$Observable) {
-            element.classes.toggle(className, value.val());
-            value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-            continue;
-        }
-
-        if (value.$hydrate) {
-            value.$hydrate(element, className);
-            continue;
-        }
-
-        element.classes.toggle(className, value);
+        handleClassAttributeItem(element, className, value);
     }
 };
 

package/src/core/wrappers/ElementCreator.js

@@ -88,6 +88,23 @@ export const ElementCreator = {
         if(process.env.NODE_ENV === 'development') {
             PluginsManager.emit('BeforeProcessChildren', parent);
         }
+        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);
+                    }
+                    continue;
+                }
+                parent.appendChild(child);
+            }
+            return;
+        }
         const child = ElementCreator.getChild(children);
         parent.appendChild(child);
         if(process.env.NODE_ENV === 'development') {

package/src/core/wrappers/HtmlElementWrapper.js

@@ -54,7 +54,7 @@ const OBJECT_PROTOTYPE = Object.prototype;
  */
 export const createHtmlElement = (element, _attributes, _children = null) => {
     let attributes = _attributes, children = _children;
-    if(_attributes.__$isValidNdChild) { // If attributes is a ValidChild
+    if(_attributes?.__$isValidNdChild) { // If attributes is a ValidChild
         attributes = _children;
         children = _attributes;
     }

package/src/core/wrappers/NDElement.js

@@ -5,7 +5,7 @@ import DebugManager from '../utils/debug-manager.js';
 import attributesWrapper, {
     bindAttributeWithObservable,
     bindClassAttribute,
-    bindStyleAttribute,
+    bindStyleAttribute, handleClassAttributeItem,
 } from './AttributesWrapper';
 
 /**
@@ -434,6 +434,16 @@ 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.

package/src/core/wrappers/NdPrototype.js

@@ -20,25 +20,29 @@ 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, options);
+    const inlineHandler = 'on'+eventName;
+    NDElement.prototype['on'+eventSourceName] = function(callback = null, options = null) {
+        if(!this.$element[inlineHandler] && !options) {
+            this.$element[inlineHandler] = callback;
+        } else {
+            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 = {}) {
+    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 = {}) {
+    NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null, options = null) {
         _preventStop(this.$element, eventName, callback, options);
         return this;
     };
@@ -46,7 +50,7 @@ EVENTS_WITH_STOP.forEach(eventSourceName => {
 
 EVENTS_WITH_PREVENT.forEach(eventSourceName => {
     const eventName = eventSourceName.toLowerCase();
-    NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null, options = {}) {
+    NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null, options = null) {
         _prevent(this.$element, eventName, callback, options);
         return this;
     };
@@ -122,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) {
@@ -131,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;
 };
@@ -141,6 +157,10 @@ 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;
+    }
     element.addEventListener(eventName, handler, options);
     return this;
 };

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.

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>;