native-document 1.0.17-1.7 → 1.0.17-1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.171.7",
+  "version": "1.0.171.9",
   "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

@@ -556,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

@@ -176,11 +176,11 @@ export function ForEachArray(data, callback, configs = {}) {
             }
         },
         add: (items) => {
-            Actions.appendToElement(items)
+            Actions.appendToElement(items);
         },
         replace: (items) => {
             clear(items);
-            Actions.appendToElement(items)
+            Actions.appendToElement(items);
         },
         set,
         reOrder: (items) => {

package/src/core/wrappers/AttributesWrapper.js

@@ -1,8 +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';
 
+
+
 /**
  * Applies a reactive class map to an HTMLElement.
  * Each key is a CSS class name; each value is a boolean or ObservableItem<boolean>.
@@ -14,7 +15,6 @@ 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') {
@@ -24,19 +24,19 @@ export const bindClassAttribute = (element, data) => {
                     element.classes.toggle(currentValue, true);
                     lastClass = currentValue;
                 });
-                continue;
+                return;
             }
         }
 
         if (value.__$Observable) {
             element.classes.toggle(className, value.val());
             value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-            continue;
+            return;
         }
 
         if (value.$hydrate) {
             value.$hydrate(element, className);
-            continue;
+            return;
         }
 
         element.classes.toggle(className, value);

package/src/core/wrappers/ElementCreator.js

@@ -88,6 +88,16 @@ 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++) {
+                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') {

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

@@ -434,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.

package/src/core/wrappers/NdPrototype.js

@@ -20,13 +20,17 @@ Object.defineProperty(NDElement.prototype, 'nd', {
 });
 
 
-
 // ----------------------------------------------------------------
 // Events helpers
 // ----------------------------------------------------------------
 EVENTS.forEach(eventSourceName => {
     const eventName = eventSourceName.toLowerCase();
-    NDElement.prototype['on'+eventSourceName] = function(callback = null, 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;
     };
@@ -34,11 +38,11 @@ EVENTS.forEach(eventSourceName => {
 
 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,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/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>;