native-document 1.0.76 → 1.0.78

package/src/core/data/ObservableArray.js

@@ -28,6 +28,13 @@ ObservableArray.prototype = Object.create(ObservableItem.prototype);
 ObservableArray.prototype.constructor = ObservableArray;
 ObservableArray.prototype.__$isObservableArray = true;
 
+
+Object.defineProperty(ObservableArray.prototype, 'length', {
+    get() {
+        return this.$currentValue.length;
+    }
+})
+
 mutationMethods.forEach((method) => {
     ObservableArray.prototype[method] = function(...values) {
         const result = this.$currentValue[method](...values);
@@ -43,6 +50,9 @@ noMutationMethods.forEach((method) => {
 });
 
 ObservableArray.prototype.clear = function() {
+    if(this.$currentValue.length === 0) {
+        return;
+    }
     this.$currentValue.length = 0;
     this.trigger({ action: 'clear' });
     return true;
@@ -72,10 +82,6 @@ ObservableArray.prototype.count = function(condition) {
     return count;
 };
 
-ObservableArray.prototype.length = function() {
-    return this.$currentValue.length;
-};
-
 ObservableArray.prototype.swap = function(indexA, indexB) {
     const value = this.$currentValue;
     const length = value.length;

package/src/core/data/ObservableItem.js

@@ -1,11 +1,11 @@
-import DebugManager from "../utils/debug-manager";
+import DebugManager from "../../core/utils/debug-manager";
 import MemoryManager from "./MemoryManager";
-import NativeDocumentError from "../errors/NativeDocumentError";
+import NativeDocumentError from "../../core/errors/NativeDocumentError";
 import ObservableChecker from "./ObservableChecker";
-import PluginsManager from "../utils/plugins-manager";
-import Validator from "../utils/validator";
+import PluginsManager from "../../core/utils/plugins-manager";
+import Validator from "../../core/utils/validator";
 import {ObservableWhen} from "./ObservableWhen";
-import {deepClone} from "../utils/helpers.js";
+import {deepClone} from "../utils/helpers";
 
 /**
  *

package/src/core/data/observable-helpers/array.js

@@ -1,5 +1,5 @@
 import {Observable} from "../Observable";
-import ObservableArray from "../ObservableArray.js";
+import ObservableArray from "../ObservableArray";
 
 
 /**

package/src/core/data/observable-helpers/batch.js

@@ -1,4 +1,4 @@
-import Validator from "../../utils/validator";
+import Validator from "../../../core/utils/validator";
 import {Observable} from "../Observable";
 
 /**

package/src/core/data/observable-helpers/computed.js

@@ -1,6 +1,6 @@
 import ObservableItem from "../ObservableItem";
 import Validator from "../../utils/validator";
-import NativeDocumentError from "../../errors/NativeDocumentError";
+import NativeDocumentError from "../..//errors/NativeDocumentError";
 import {Observable} from "../Observable";
 import PluginsManager from "../../utils/plugins-manager";
 import {nextTick} from "../../utils/helpers";

package/src/core/elements/control/for-each-array.js

@@ -1,11 +1,10 @@
-import Anchor from "../anchor";
+import Anchor from "../../elements/anchor";
 import {Observable} from "../../data/Observable";
 import Validator from "../../utils/validator";
-import {getKey} from "../../utils/helpers";
 import { ElementCreator } from "../../wrappers/ElementCreator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 
-export function ForEachArray(data, callback, key, configs = {}) {
+export function ForEachArray(data, callback, configs = {}) {
     const element = Anchor('ForEach Array');
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
@@ -14,23 +13,14 @@ export function ForEachArray(data, callback, key, configs = {}) {
     let lastNumberOfItems = 0;
     const isIndexRequired = callback.length >= 2;
 
-    const keysCache = new WeakMap();
-
-    const clear = () => {
+    const clear = (items) => {
         element.removeChildren();
-        cleanCache();
+        cleanCache(items);
         lastNumberOfItems = 0;
     };
 
-    const getItemKey = (item, indexKey) => {
-        if(keysCache.has(item)) {
-            return keysCache.get(item);
-        }
-        return getKey(item, indexKey, key);
-    };
-
     const getItemChild = (item) => {
-        return getChildByKey(getItemKey(item));
+        return cache.get(item)?.child;
     };
 
     const updateIndexObservers = (items, startFrom = 0) => {
@@ -39,16 +29,17 @@ export function ForEachArray(data, callback, key, configs = {}) {
         }
         let index = startFrom;
         for(let i = startFrom, length = items?.length; i < length; i++) {
-            const cacheItem = cache.get(getItemKey(items[i], i));
+            const cacheItem = cache.get(items[i]);
             if(!cacheItem) {
                 continue;
             }
-            cacheItem.indexObserver?.deref()?.set(index);
+            cacheItem.indexObserver?.set(index);
             index++;
         }
     };
 
-    const removeCacheItem = (cacheItem, removeChild = true) => {
+    const removeCacheItem = (item, removeChild = true) => {
+        const cacheItem = cache.get(item);
         if(!cacheItem) {
             return;
         }
@@ -57,14 +48,10 @@ export function ForEachArray(data, callback, key, configs = {}) {
             child?.remove();
             cache.delete(cacheItem.keyId);
         }
-        cacheItem.indexObserver?.deref()?.cleanup();
-    }
-
-    const removeCacheItemByKey = (keyId, removeChild = true) => {
-        removeCacheItem(cache.get(keyId), removeChild);
+        cacheItem.indexObserver?.cleanup();
     };
 
-    const cleanCache = () => {
+    const cleanCache = (items) => {
         if(configs.shouldKeepItemsInCache) {
             return;
         }
@@ -72,53 +59,41 @@ export function ForEachArray(data, callback, key, configs = {}) {
             cache.clear();
             return;
         }
-        for (const [keyId, cacheItem] of cache.entries()) {
-            removeCacheItem(cacheItem, false);
+        for (const [itemAsKey, _] of cache.entries()) {
+            if(items && items.contains(itemAsKey)) {
+                continue;
+            }
+            removeCacheItem(itemAsKey, false);
         }
         cache.clear();
     }
 
     const buildItem = (item, indexKey) => {
-        const keyId = getItemKey(item, indexKey);
-
-        if(cache.has(keyId)) {
-            const cacheItem = cache.get(keyId);
-            cacheItem.indexObserver?.deref()?.set(indexKey);
+        const cacheItem = cache.get(item);
+        if(cacheItem) {
+            cacheItem.indexObserver?.set(indexKey);
             const child = cacheItem.child;
             if(child) {
                 return child;
             }
-            cache.delete(keyId);
+            cache.delete(item);
         }
 
         const indexObserver = isIndexRequired ? Observable(indexKey) : null;
         let child = ElementCreator.getChild(callback(item, indexObserver));
-        if(!child) {
-            throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+        if(child) {
+            cache.set(item, {
+                child,
+                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
+            });
+            return child;
         }
-        cache.set(keyId, {
-            keyId,
-            child: child,
-            indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
-        });
-        keysCache.set(item, keyId);
-        return child;
-    };
-    const getChildByKey = function(keyId) {
-        const cacheItem = cache.get(keyId);
-        if(!cacheItem) {
-            return null;
-        }
-        const child = cacheItem.child;
-        if(!child) {
-            removeCacheItem(cacheItem, false);
-            return null;
-        }
-        return child;
+
+        throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
     };
 
-    const removeByKey = function(keyId, fragment) {
-        const cacheItem = cache.get(keyId);
+    const removeByItem = function(item, fragment) {
+        const cacheItem = cache.get(item);
         if(!cacheItem) {
             return null;
         }
@@ -144,11 +119,10 @@ export function ForEachArray(data, callback, key, configs = {}) {
             return fragment;
         },
         add(items, delay = 2) {
-            const fragment = Actions.toFragment(items);
-            element.appendElement(fragment);
+            element.appendElement(Actions.toFragment(items));
         },
         replace(items) {
-            clear();
+            clear(items);
             Actions.add(items);
         },
         reOrder(items) {
@@ -164,7 +138,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
             element.appendElement(fragment, blockEnd);
         },
         removeOne(element, index) {
-            removeCacheItemByKey(getItemKey(element, index), true);
+            removeCacheItem(element, true);
         },
         clear,
         merge(items) {
@@ -198,16 +172,15 @@ export function ForEachArray(data, callback, key, configs = {}) {
             const garbageFragment = document.createDocumentFragment();
 
             if(deleted.length > 0) {
-                let firstKey = getItemKey(deleted[0], start);
+                let firstItem = deleted[0];
                 if(deleted.length === 1) {
-                    removeByKey(firstKey, garbageFragment);
+                    removeByItem(firstItem, garbageFragment);
                 } else if(deleted.length > 1) {
-                    const firstChildRemoved = getChildByKey(firstKey);
+                    const firstChildRemoved = getItemChild(deleted[0]);
                     elementBeforeFirst = firstChildRemoved?.previousSibling;
 
                     for(let i = 0; i < deleted.length; i++) {
-                        const keyId = getItemKey(deleted[i], start + i, key);
-                        removeByKey(keyId, garbageFragment);
+                        firstItem(deleted[i], garbageFragment);
                     }
                 }
             } else {

package/src/core/elements/control/for-each.js

@@ -1,6 +1,6 @@
 import {Observable} from "../../data/Observable";
 import Validator from "../../utils/validator";
-import Anchor from "../anchor";
+import Anchor from "../../elements/anchor";
 import DebugManager from "../../utils/debug-manager";
 import {getKey} from "../../utils/helpers";
 import { ElementCreator } from "../../wrappers/ElementCreator";

package/src/core/elements/control/show-if.js

@@ -1,7 +1,7 @@
 import { Observable } from "../../data/Observable";
 import Validator from "../../utils/validator";
 import DebugManager from "../../utils/debug-manager.js";
-import Anchor from "../anchor";
+import Anchor from "../../elements/anchor";
 import {ElementCreator} from "../../wrappers/ElementCreator";
 
 /**

package/src/core/elements/control/switch.js

@@ -1,6 +1,6 @@
 import NativeDocumentError from "../../errors/NativeDocumentError";
 import Validator from "../../utils/validator";
-import Anchor from "../anchor";
+import Anchor from "../../elements/anchor";
 import {ElementCreator} from "../../wrappers/ElementCreator";
 
 

package/src/core/utils/events.js

@@ -63,6 +63,74 @@ export const EVENTS = [
   "VolumeChange",
   "Waiting",
 
+  "TouchCancel",
+  "TouchEnd",
+  "TouchMove",
+  "TouchStart",
+  "AnimationEnd",
+  "AnimationIteration",
+  "AnimationStart",
+  "TransitionEnd",
+  "Copy",
+  "Cut",
+  "Paste",
+  "FocusIn",
+  "FocusOut",
+  "ContextMenu"
+];
+
+export const EVENTS_WITH_PREVENT = [
+  "Click",
+  "DblClick",
+  "MouseDown",
+  "MouseUp",
+  "Wheel",
+  "KeyDown",
+  "KeyPress",
+  "Invalid",
+  "Reset",
+  "Submit",
+  "DragOver",
+  "Drop",
+  "BeforeUnload",
+  "TouchCancel",
+  "TouchEnd",
+  "TouchMove",
+  "TouchStart",
+  "Copy",
+  "Cut",
+  "Paste",
+  "ContextMenu"
+];
+
+export const EVENTS_WITH_STOP =  [
+  "Click",
+  "DblClick",
+  "MouseDown",
+  "MouseMove",
+  "MouseOut",
+  "MouseOver",
+  "MouseUp",
+  "Wheel",
+  "KeyDown",
+  "KeyPress",
+  "KeyUp",
+  "Change",
+  "Input",
+  "Invalid",
+  "Reset",
+  "Search",
+  "Select",
+  "Submit",
+  "Drag",
+  "DragEnd",
+  "DragEnter",
+  "DragLeave",
+  "DragOver",
+  "DragStart",
+  "Drop",
+  "BeforeUnload",
+  "HashChange",
   "TouchCancel",
   "TouchEnd",
   "TouchMove",

package/src/core/utils/filters/standard.js

@@ -1,4 +1,4 @@
-import Validator from "../validator";
+import Validator from "../../utils/validator";
 import { createFilter, createMultiSourceFilter } from "./utils";
 
 

package/src/core/utils/filters/utils.js

@@ -1,4 +1,4 @@
-import Validator from "../validator";
+import Validator from "../../utils/validator";
 
 export function toDate(value) {
     if (value instanceof Date) return value;

package/src/core/utils/helpers.js

@@ -56,15 +56,18 @@ export const nextTick = function(fn) {
  * @returns {*}
  */
 export const getKey = (item, defaultKey, key) => {
-    if(Validator.isFunction(key)) return key(item, defaultKey);
-    if(Validator.isObservable(item)) {
-        const val = item.val();
-        return (val && key) ? val[key] : defaultKey;
+    if (Validator.isString(key)) {
+        const val = Validator.isObservable(item) ? item.val() : item;
+        const result = val?.[key];
+        return Validator.isObservable(result) ? result.val() : (result ?? defaultKey);
     }
-    if(!Validator.isObject(item)) {
-        return item;
+
+    if (Validator.isFunction(key)) {
+        return key(item, defaultKey);
     }
-    return item[key]?.val?.() ??  item[key] ?? defaultKey;
+
+    const val = Validator.isObservable(item) ? item.val() : item;
+    return val ?? defaultKey;
 };
 
 export const trim = function(str, char) {

package/src/core/utils/validator.js

@@ -139,6 +139,7 @@ const Validator = {
 };
 if(process.env.NODE_ENV === 'development') {
     Validator.validateAttributes = function(attributes) {
+        console.log('AttributesWrapper', attributes);
         if (!attributes || typeof attributes !== 'object') {
             return attributes;
         }

package/src/core/wrappers/AttributesWrapper.js

@@ -2,6 +2,7 @@ import Validator from "../utils/validator";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import {BOOLEAN_ATTRIBUTES} from "./constants.js";
 import {Observable} from "../data/Observable";
+import './prototypes/bind-class-extensions';
 
 
 export function toggleElementClass(element, className, shouldAdd) {
@@ -36,18 +37,8 @@ export function updateObserverFromInput(element, attributeName, defaultValue, va
 export function bindClassAttribute(element, data) {
     for(let className in data) {
         const value = data[className];
-        if(Validator.isObservable(value)) {
-            element.classes.toggle(className, value.val());
-            value.subscribe(toggleElementClass.bind(null, element, className));
-            continue;
-        }
-        if(Validator.isObservableWhenResult(value)) {
-            element.classes.toggle(className, value.isMath());
-            value.subscribe(toggleElementClass.bind(null, element, className));
-            continue;
-        }
-        if(value.$hydrate) {
-            value.$hydrate(element, className);
+        if(value?.bindNdClass) {
+            value.bindNdClass(element, className);
             continue;
         }
         element.classes.toggle(className, value)
@@ -117,6 +108,12 @@ export function bindAttributeWithObservable(element, attributeName, value) {
     }
 }
 
+const NdBindings = {
+    class: (element, value) => bindClassAttribute(element, value),
+    style: (element, value) => bindStyleAttribute(element, value),
+};
+
+
 /**
  *
  * @param {HTMLElement} element
@@ -132,41 +129,27 @@ export default function AttributesWrapper(element, attributes) {
 
     for(let key in attributes) {
         const attributeName = key.toLowerCase();
-        let value = attributes[attributeName];
-        if(value === null || value === undefined) {
+        let value = attributes[key];
+        if(value == null) {
             continue;
         }
         if(value.handleNdAttribute) {
             value.handleNdAttribute(element, attributeName, value)
             continue;
         }
-        if(Validator.isString(value)) {
-            element.setAttribute(attributeName, value);
-            return;
-        }
-        if(attributeName === 'class' && Validator.isObject(value)) {
-            bindClassAttribute(element, value);
-            continue;
-        }
-        if(attributeName === 'style' && Validator.isObject(value)) {
-            bindStyleAttribute(element, value);
-            continue;
+        if(typeof value === 'object') {
+            const binding = NdBindings[attributeName];
+            if(binding) {
+                binding(element, value);
+                continue;
+            }
         }
-        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
             bindBooleanAttribute(element, attributeName, value);
             continue;
         }
-        if(Validator.isObservable(value)) {
-            bindAttributeWithObservable(element, attributeName, value);
-            continue;
-        }
-        if(value.$hydrate) {
-            value.$hydrate(element, attributeName);
-            continue;
-        }
 
         element.setAttribute(attributeName, value);
-
     }
     return element;
 }

package/src/core/wrappers/DocumentObserver.js

@@ -1,4 +1,3 @@
-import {debounce} from "../utils/helpers";
 
 const DocumentObserver = {
     mounted: new WeakMap(),

package/src/core/wrappers/ElementCreator.js

@@ -83,19 +83,14 @@ export const ElementCreator = {
         PluginsManager.emit('AfterProcessChildren', parent);
     },
     getChild(child) {
-        if(child == null) {
-            return null;
-        }
-        if(child.toNdElement) {
-            do {
-                child =  child.toNdElement();
-                if(Validator.isElement(child)) {
-                    return child;
-                }
-            } while (child.toNdElement);
+        while (child?.toNdElement) {
+            child = child.toNdElement();
+
+            if (Validator.isElement(child)) return child;
+            if (!child) return null;
         }
 
-        return ElementCreator.createStaticTextNode(null, child);
+        return child ? ElementCreator.createStaticTextNode(null, child) : null;
     },
     /**
      *

package/src/core/wrappers/NdPrototype.js

@@ -1,22 +1,17 @@
 import { NDElement } from "./NDElement";
-import {EVENTS} from "../utils/events";
+import {EVENTS, EVENTS_WITH_PREVENT, EVENTS_WITH_STOP} from "../utils/events";
 
-let createNdElementInstance = (target) => {
-    attachEventPrototypes && attachEventPrototypes();
-    attachEventPrototypes = null;
-    createNdElementInstance = (target) => new NDElement(target);
-    return  new NDElement(target);
-};
 const property = {
     configurable: true,
     get() {
-        return createNdElementInstance(this);
+        return new NDElement(this);
     }
 };
 
 Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
 Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+
 Object.defineProperty(NDElement.prototype, 'nd', {
     configurable: true,
     get: function() {
@@ -29,31 +24,29 @@ Object.defineProperty(NDElement.prototype, 'nd', {
 // ----------------------------------------------------------------
 // Events helpers
 // ----------------------------------------------------------------
+EVENTS.forEach(eventSourceName => {
+    const eventName = eventSourceName.toLowerCase();
+    NDElement.prototype['on'+eventSourceName] = function(callback = null) {
+        this.$element.addEventListener(eventName, callback);
+        return this;
+    };
+})
 
-let attachEventPrototypes = () => {
-    EVENTS.forEach(eventSourceName => {
-        const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['on'+eventSourceName] = function(callback) {
-            this.$element.addEventListener(eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['onPrevent'+eventSourceName] = function(callback) {
-            _prevent(this.$element, eventName, callback);
-            return this;
-        };
-
-        NDElement.prototype['onStop'+eventSourceName] = function(callback) {
-            _stop(this.$element, eventName, callback);
-            return this;
-        };
+EVENTS_WITH_STOP.forEach(eventSourceName => {
+    const eventName = eventSourceName.toLowerCase();
+    NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
+        _stop(this.$element, eventName, callback);
+        return this;
+    };
+});
 
-        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
-            _preventStop(this.$element, eventName, callback);
-            return this;
-        };
-    })
-};
+EVENTS_WITH_PREVENT.forEach(eventSourceName => {
+    const eventName = eventSourceName.toLowerCase();
+    NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
+        _prevent(this.$element, eventName, callback);
+        return this;
+    };
+});
 
 NDElement.prototype.on = function(name, callback, options) {
     this.$element.addEventListener(name.toLowerCase(), callback, options);