native-document 1.0.169 → 1.0.173

package/src/components/splitter/SplitterPanel.js

@@ -37,6 +37,7 @@ export default function SplitterPanel(content, props = {}) {
         render: null,
         props,
     };
+    this.aria = { 'role': 'region' };
 }
 
 BaseComponent.extends(SplitterPanel);

package/src/components/stacks/AbsoluteStack.js

@@ -15,6 +15,7 @@ export default function AbsoluteStack(content, props = {}) {
     }
     PositionStack.call(this, content, props);
     this.$description.position = 'absolute';
+    this.aria = {};
 }
 
 BaseComponent.extends(AbsoluteStack, PositionStack);

package/src/components/stacks/FixedStack.js

@@ -15,6 +15,7 @@ export default function FixedStack(content, props = {}) {
     }
     PositionStack.call(this, content, props);
     this.$description.position = 'fixed';
+    this.aria = {};
 }
 
 BaseComponent.extends(FixedStack, PositionStack);

package/src/components/stacks/HStack.js

@@ -16,6 +16,7 @@ export default function HStack(content, props = {}) {
 
     Stack.call(this, content, props);
     this.$description.orientation = 'horizontal';
+    this.aria = {};
 }
 
 BaseComponent.extends(HStack,  Stack);

package/src/components/stacks/PositionStack.js

@@ -34,6 +34,7 @@ export default function PositionStack(content, props = {}) {
         anchor: null,
         props,
     };
+    this.aria = {};
 }
 
 BaseComponent.extends(PositionStack);

package/src/components/stacks/RelativeStack.js

@@ -15,6 +15,7 @@ export default function RelativeStack(content, props = {}) {
     }
     PositionStack.call(this, content, props);
     this.$description.position = 'relative';
+    this.aria = {};
 }
 
 BaseComponent.extends(RelativeStack, PositionStack);

package/src/components/stacks/Stack.js

@@ -36,6 +36,7 @@ export default function Stack(content, props = {}) {
         reverse: false,
         props,
     };
+    this.aria = {};
 }
 
 BaseComponent.extends(Stack);

package/src/components/stacks/VStack.js

@@ -18,6 +18,7 @@ export default function VStack(content, props = {}) {
 
     this.$description.orientation = 'vertical';
     this.$description.alignment = 'leading';
+    this.aria = {};
 }
 BaseComponent.extends(VStack, Stack);
 

package/src/components/stepper/Stepper.js

@@ -50,6 +50,7 @@ export default function Stepper(props = {}) {
         position: 'bottom',
         props,
     };
+    this.aria = { 'role': 'list' };
 
     this.$element = null;
 }

package/src/components/stepper/StepperStep.js

@@ -47,6 +47,7 @@ export default function StepperStep(label, props = {}) {
         isVisible: $(true),
         props,
     };
+    this.aria = { 'role': 'listitem', 'tabindex': '0' };
 }
 
 BaseComponent.extends(StepperStep);

package/src/components/switch/Switch.js

@@ -43,6 +43,7 @@ export default function Switch(props = {}) {
         innerOnLabel: null,
         innerOffLabel: null,
     };
+    this.aria = { 'role': 'switch' };
 }
 
 BaseComponent.extends(Switch);

package/src/components/table/DataTable.js

@@ -115,6 +115,7 @@ export default function DataTable(props = {}) {
         isExpandedIcon: null,
         isNotExpandedIcon: null,
     };
+    this.aria = { 'role': 'table' };
 }
 
 BaseComponent.extends(DataTable);

package/src/components/table/SimpleTable.js

@@ -28,6 +28,7 @@ export default function SimpleTable(props = {}) {
         headerProps: null,
         props,
     };
+    this.aria = { 'role': 'table' };
 }
 
 BaseComponent.extends(SimpleTable);

package/src/components/tabs/Tabs.js

@@ -47,6 +47,7 @@ export default function Tabs(props = {}) {
         renderPlusButton: null,
         props,
     };
+    this.aria = { 'role': 'tablist' };
 }
 
 BaseComponent.extends(Tabs);

package/src/components/toast/Toast.js

@@ -45,6 +45,7 @@ export default function Toast(content, props = {}) {
         render: null,
         props,
     };
+    this.aria = { 'role': 'status', 'aria-live': 'polite' };
 }
 
 BaseComponent.extends(Toast);

package/src/components/tooltip/Tooltip.js

@@ -47,6 +47,7 @@ export default function Tooltip(content, props = {}) {
         updatePositionOn: null,
         props,
     };
+    this.aria = { 'role': 'tooltip' };
 }
 
 BaseComponent.extends(Tooltip);

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

@@ -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;
@@ -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' };
@@ -295,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;
@@ -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/data/ObservableObject.js

@@ -198,14 +198,13 @@ ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
 
 /**
  * Returns an array of all internal observable instances (one per property).
- * Alias: $observables()
  *
  * @returns {ObservableItem[]} Array of observable instances
  */
 ObservableObject.prototype.observables = function() {
     return Object.values(this.$observables);
 };
-ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
+// ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
 
 /**
  * Returns all property names of the observable object.

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,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-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/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);
@@ -99,7 +99,7 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
     const isObservable = value.__$Observable;
     const defaultValue = isObservable? value.val() : value;
 
-    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
+    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
 
     if(typeof defaultValue === 'boolean') {
         element[attributeRealName] = defaultValue;
@@ -145,29 +145,29 @@ 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 value = attributes[originalAttributeName];
+    for(const attributeName in attributes) {
+        const value = attributes[attributeName];
         if(value == null) {
             continue;
         }
         const type = typeof value;
         if(type === 'string' || type === 'number') {
-            element.setAttribute(originalAttributeName, value);
+            element.setAttribute(attributeName, value);
             continue;
         }
-        const attributeName = originalAttributeName.toLowerCase();
+        // const attributeName = originalAttributeName.toLowerCase();
         if(value.__$Observable) {
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
                 continue;
             }
-            bindAttributeWithObservable(element, originalAttributeName, value);
+            bindAttributeWithObservable(element, attributeName, value);
             continue;
         }
         if(type ===  'object') {