native-document 1.0.168 → 1.0.172

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,18 +24,51 @@ 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}
  */
 export const Paragraph = P;
 
+/**
+ * Creates a `<i>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const I = HtmlElementWrapper('i');
+export const Italic = I;
+
 /**
  * Creates a `<strong>` element.
  * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
  */
 export const Strong = HtmlElementWrapper('strong');
 
+/**
+ * Creates a `<strong>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const B = HtmlElementWrapper('b');
+export const Bold = B;
+
 /**
  * Creates a `<h1>` element.
  * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
@@ -76,7 +109,7 @@ export const H6 = HtmlElementWrapper('h6');
  * Creates a `<br>` element.
  * @type {function(GlobalAttributes=): HTMLBRElement}
  */
-export const Br = HtmlElementWrapper('br');
+export const Br = HtmlElementWrapper('br', null, true);
 
 /**
  * Creates an `<a>` element.
@@ -106,7 +139,7 @@ export const Blockquote = HtmlElementWrapper('blockquote');
  * Creates an `<hr>` element.
  * @type {function(GlobalAttributes=): HTMLHRElement}
  */
-export const Hr = HtmlElementWrapper('hr');
+export const Hr = HtmlElementWrapper('hr', null, true);
 
 /**
  * Creates an `<em>` element.

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/elements/form.js

@@ -44,7 +44,7 @@ export const Form = HtmlElementWrapper('form', (el) => {
  * Creates an `<input>` element.
  * @type {function(InputAttributes=): HTMLInputElement}
  */
-export const Input = HtmlElementWrapper('input');
+export const Input = HtmlElementWrapper('input', null, true);
 
 /**
  * Creates a `<textarea>` element.

package/src/core/elements/img.js

@@ -6,7 +6,7 @@ import NativeDocumentError from '../errors/NativeDocumentError';
  * Creates an `<img>` element.
  * @type {function(ImgAttributes=): HTMLImageElement}
  */
-export const BaseImage = HtmlElementWrapper('img');
+export const BaseImage = HtmlElementWrapper('img', null, true);
 
 /**
  * Creates an `<img>` element.

package/src/core/elements/medias.js

@@ -16,13 +16,13 @@ export const Video = HtmlElementWrapper('video');
  * Creates a `<source>` element.
  * @type {function(SourceAttributes=): HTMLSourceElement}
  */
-export const Source = HtmlElementWrapper('source');
+export const Source = HtmlElementWrapper('source', null, true);
 
 /**
  * Creates a `<track>` element.
  * @type {function(TrackAttributes=): HTMLTrackElement}
  */
-export const Track = HtmlElementWrapper('track');
+export const Track = HtmlElementWrapper('track', null, true);
 
 /**
  * Creates a `<canvas>` element.

package/src/core/elements/meta-data.js

@@ -40,4 +40,4 @@ export const Var = HtmlElementWrapper('var');
  * Creates a `<wbr>` element.
  * @type {function(GlobalAttributes=): HTMLElement}
  */
-export const Wbr = HtmlElementWrapper('wbr');
+export const Wbr = HtmlElementWrapper('wbr', null, true);

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,27 +15,30 @@ import {Observable} from '../data/Observable';
 export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
-        if(value.__$Observable) {
-            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.__$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));
-            continue;
+            return;
         }
-        if(value.$hydrate) {
+
+        if (value.$hydrate) {
             value.$hydrate(element, className);
-            continue;
+            return;
         }
+
         element.classes.toggle(className, value);
     }
 };
@@ -92,12 +96,12 @@ export const bindStyleAttribute = (element, data) => {
  * @param {boolean|number|Observable} value
  */
 export const bindBooleanAttribute = (element, attributeName, value) => {
-    const isObservable = value.__$isObservable;
+    const isObservable = value.__$Observable;
     const defaultValue = isObservable? value.val() : value;
 
-    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
+    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
 
-    if(Validator.isBoolean(defaultValue)) {
+    if(typeof defaultValue === 'boolean') {
         element[attributeRealName] = defaultValue;
     }
     else {
@@ -126,15 +130,14 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
  * @param {Observable} value
  */
 export const bindAttributeWithObservable = (element, attributeName, value) => {
-    const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
-    value.subscribe(applyValue);
-
     if(attributeName === 'value') {
         element.value = value.val();
         element.addEventListener('input', () => value.set(element.value));
+        value.subscribe((newValue) => element.value = newValue);
         return;
     }
     element.setAttribute(attributeName, value.val());
+    value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
 };
 
 /**
@@ -142,23 +145,32 @@ 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 attributeName = originalAttributeName.toLowerCase();
-        const value = attributes[originalAttributeName];
+    for(const attributeName in attributes) {
+        const value = attributes[attributeName];
         if(value == null) {
             continue;
         }
-        if(value.handleNdAttribute) {
-            value.handleNdAttribute(element, attributeName, value);
+        const type = typeof value;
+        if(type === 'string' || type === 'number') {
+            element.setAttribute(attributeName, value);
             continue;
         }
-        if(typeof value ===  'object') {
+        // const attributeName = originalAttributeName.toLowerCase();
+        if(value.__$Observable) {
+            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                bindBooleanAttribute(element, attributeName, value);
+                continue;
+            }
+            bindAttributeWithObservable(element, attributeName, value);
+            continue;
+        }
+        if(type ===  'object') {
             if(attributeName === 'class') {
                 bindClassAttribute(element, value);
                 continue;
@@ -172,6 +184,9 @@ const AttributesWrapper = (element, attributes) => {
             bindBooleanAttribute(element, attributeName, value);
             continue;
         }
+        if(value.__$isTemplateBinding) {
+            value.$hydrate(element, attributeName);
+        }
 
         element.setAttribute(attributeName, value);
     }