native-document 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/data/ObservableItem.js

@@ -2,6 +2,7 @@ import DebugManager from "../utils/debug-manager";
 import MemoryManager from "./MemoryManager";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "./ObservableChecker";
+import Validator from "../utils/validator";
 
 /**
  *
@@ -9,13 +10,6 @@ import ObservableChecker from "./ObservableChecker";
  * @class ObservableItem
  */
 export default function ObservableItem(value) {
-    if (value === undefined) {
-        throw new NativeDocumentError('ObservableItem requires an initial value');
-    }
-    if(value instanceof ObservableItem) {
-        throw new NativeDocumentError('ObservableItem cannot be an Observable');
-    }
-
     this.$previousValue = value;
     this.$currentValue = value;
     this.$isCleanedUp = false;
@@ -23,7 +17,7 @@ export default function ObservableItem(value) {
     this.$listeners = null;
     this.$watchers = null;
 
-    this.$memoryId = MemoryManager.register(this);
+    this.$memoryId = null;
 }
 
 Object.defineProperty(ObservableItem.prototype, '$value', {
@@ -38,6 +32,7 @@ Object.defineProperty(ObservableItem.prototype, '$value', {
 
 ObservableItem.prototype.__$isObservable = true;
 
+const noneTrigger = function() {};
 ObservableItem.prototype.triggerListeners = function(operations) {
     const $listeners = this.$listeners;
     const $previousValue = this.$previousValue;
@@ -61,31 +56,38 @@ ObservableItem.prototype.triggerWatchers = function() {
     const $currentValue = this.$currentValue;
 
     if($watchers.has($currentValue)) {
-        const watchValueList = $watchers.get($currentValue);
-        watchValueList.forEach(itemValue => {
-            if(itemValue.ifTrue.called) {
-                return;
-            }
-            itemValue.ifTrue.callback();
-            itemValue.else.called = false;
-        })
+        $watchers.get($currentValue).forEach(callback => {
+            callback.set ? callback.set(true) : callback(true);
+        });
     }
     if($watchers.has($previousValue)) {
-        const watchValueList = $watchers.get($previousValue);
-        watchValueList.forEach(itemValue => {
-            if(itemValue.else.called) {
-                return;
-            }
-            itemValue.else.callback();
-            itemValue.ifTrue.called = false;
+        $watchers.get($previousValue).forEach(callback => {
+            callback.set ? callback.set(false) : callback(false);
         });
     }
 };
 
-ObservableItem.prototype.trigger = function(operations) {
+ObservableItem.prototype.triggerAll = function(operations) {
     this.triggerListeners(operations);
     this.triggerWatchers();
+};
+
+ObservableItem.prototype.assocTrigger = function() {
+    if(this.$watchers?.size && this.$listeners?.length) {
+        this.trigger = this.triggerAll;
+        return;
+    }
+    if(this.$listeners?.length) {
+        this.trigger = this.triggerListeners;
+        return;
+    }
+    if(this.$watchers?.size) {
+        this.trigger = this.triggerWatchers;
+        return;
+    }
+    this.trigger = noneTrigger;
 }
+ObservableItem.prototype.trigger = noneTrigger;
 
 /**
  * @param {*} data
@@ -110,16 +112,13 @@ ObservableItem.prototype.disconnectAll = function() {
     this.$currentValue = null;
     if(this.$watchers) {
         for (const [_, watchValueList] of this.$watchers) {
-            for (const itemValue of watchValueList) {
-                itemValue.ifTrue.callback = null;
-                itemValue.else.callback = null;
-            }
-            watchValueList.clear();
+            watchValueList.splice(0);
         }
     }
     this.$watchers?.clear();
     this.$listeners = null;
     this.$watchers = null;
+    this.trigger = noneTrigger;
 }
 ObservableItem.prototype.cleanup = function() {
     MemoryManager.unregister(this.$memoryId);
@@ -144,30 +143,32 @@ ObservableItem.prototype.subscribe = function(callback) {
     }
 
     this.$listeners.push(callback);
-    return () => this.unsubscribe(callback);
+    this.assocTrigger();
+    return () => {
+        this.unsubscribe(callback);
+        this.assocTrigger();
+    };
 };
 
-ObservableItem.prototype.on = function(value, callback, elseCallback) {
+ObservableItem.prototype.on = function(value, callback) {
     this.$watchers = this.$watchers ?? new Map();
 
     let watchValueList = this.$watchers.get(value);
     if(!watchValueList) {
-        watchValueList = new Set();
+        watchValueList = [];
         this.$watchers.set(value, watchValueList);
     }
 
-    let itemValue = {
-        ifTrue: { callback, called: false },
-        else: { callback: elseCallback, called: false }
-    };
-    watchValueList.add(itemValue);
+    watchValueList.push(callback);
+    this.assocTrigger();
     return () => {
-        watchValueList?.delete(itemValue);
+        const index = watchValueList.indexOf(callback);
+        watchValueList?.splice(index, 1);
         if(watchValueList.size === 0) {
             this.$watchers?.delete(value);
+            watchValueList = null;
         }
-        watchValueList = null;
-        itemValue = null;
+        this.assocTrigger();
     };
 };
 
@@ -180,6 +181,7 @@ ObservableItem.prototype.unsubscribe = function(callback) {
     if (index > -1) {
         this.$listeners.splice(index, 1);
     }
+    this.assocTrigger();
 };
 
 /**
@@ -192,6 +194,9 @@ ObservableItem.prototype.check = function(callback) {
 };
 ObservableItem.prototype.get = ObservableItem.prototype.check;
 
-    ObservableItem.prototype.toString = function() {
+ObservableItem.prototype.toString = function() {
+    if(!this.$memoryId) {
+        MemoryManager.register(this);
+    }
     return '{{#ObItem::(' +this.$memoryId+ ')}}';
 }

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

@@ -24,20 +24,20 @@ Observable.array = function(target) {
     });
 
     observer.clear = function() {
-        observer.$value.length = 0;
+        observer.val().length = 0;
         observer.trigger({ action: 'clear' });
         return true;
     };
 
     observer.merge = function(values) {
-        observer.$value = [...observer.$value, ...values];
+        observer.set([...observer.val(), ...values]);
     };
 
     observer.populateAndRender = function(iteration, callback) {
-        observer.trigger({ action: 'populate', args: [observer.$value, iteration, callback] });
+        observer.trigger({ action: 'populate', args: [observer.val(), iteration, callback] });
     };
     observer.remove = function(index) {
-        const deleted = observer.$value.splice(index, 1);
+        const deleted = observer.val().splice(index, 1);
         if(deleted.length === 0) {
             return [];
         }
@@ -46,7 +46,7 @@ Observable.array = function(target) {
     };
 
     observer.swap = function(indexA, indexB) {
-        const value = observer.$value;
+        const value = observer.val();
         const length = value.length;
         if(length < indexA || length < indexB) {
             return false;
@@ -66,7 +66,7 @@ Observable.array = function(target) {
     };
 
     observer.length = function() {
-        return observer.$value.length;
+        return observer.val().length;
     }
 
     const overrideMethods = ['map', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat'];

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

@@ -11,7 +11,6 @@ export function ForEachArray(data, callback, key, configs = {}) {
     const blockStart = element.startElement();
 
     let cache = new Map();
-    let nodeCacheByElement = new WeakMap();
     let lastNumberOfItems = 0;
 
     const keysCache = new WeakMap();
@@ -26,7 +25,10 @@ export function ForEachArray(data, callback, key, configs = {}) {
             return keysCache.get(item);
         }
         return getKey(item, indexKey, key);
-    }
+    };
+    const getItemChild = (item) => {
+        return getChildByKey(getItemKey(item));
+    };
 
     const updateIndexObservers = (items, startFrom = 0) => {
         if(callback.length < 2) {
@@ -47,13 +49,10 @@ export function ForEachArray(data, callback, key, configs = {}) {
         if(!cacheItem) {
             return;
         }
-        const child = cacheItem.child?.deref();
+        const child = cacheItem.child;
         cacheItem.indexObserver?.deref()?.cleanup();
         cacheItem.child = null;
         cacheItem.indexObserver = null;
-        nodeCacheByElement.delete(cacheItem.item);
-        keysCache.delete(cacheItem.item);
-        cacheItem.item = null;
         if(removeChild) {
             child?.remove();
             cache.delete(cacheItem.keyId);
@@ -77,8 +76,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
         if(cache.has(keyId)) {
             const cacheItem = cache.get(keyId);
             cacheItem.indexObserver?.deref()?.set(indexKey);
-            cacheItem.isNew = false;
-            const child = cacheItem.child?.deref();
+            const child = cacheItem.child;
             if(child) {
                 return child;
             }
@@ -90,27 +88,22 @@ export function ForEachArray(data, callback, key, configs = {}) {
             let child = ElementCreator.getChild(callback(item, indexObserver));
             cache.set(keyId, {
                 keyId,
-                isNew: true,
-                item,
-                child: new WeakRef(child),
+                child: child,
                 indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
             });
             keysCache.set(item, keyId);
-            if(Validator.isObject(item)) {
-                nodeCacheByElement.set(item, child);
-            }
             return child;
         } catch (e) {
             DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
             throw e;
         }
     };
-    const getChildByKey = function(keyId, fragment) {
+    const getChildByKey = function(keyId) {
         const cacheItem = cache.get(keyId);
         if(!cacheItem) {
             return null;
         }
-        const child = cacheItem.child?.deref();
+        const child = cacheItem.child;
         if(!child) {
             removeCacheItem(cacheItem, false);
             return null;
@@ -123,7 +116,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
         if(!cacheItem) {
             return null;
         }
-        const child = cacheItem.child?.deref();
+        const child = cacheItem.child;
         if(!child) {
             return null;
         }
@@ -157,7 +150,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
             let child = null;
             const fragment = document.createDocumentFragment();
             for(const item of items) {
-                child = nodeCacheByElement.get(item);
+                child = getItemChild(item);
                 if(child) {
                     fragment.appendChild(child);
                 }
@@ -166,11 +159,9 @@ export function ForEachArray(data, callback, key, configs = {}) {
             element.appendElement(fragment, blockEnd);
         },
         removeOne(element, index) {
-            let child = nodeCacheByElement.get(element);
+            let child = getItemChild(element);
             if(child) {
-                child.remove();
-                nodeCacheByElement.delete(element);
-                removeCacheItemByKey(getItemKey(element, index));
+                removeCacheItemByKey(getItemKey(element, index), true);
             }
             child = null;
         },
@@ -246,8 +237,8 @@ export function ForEachArray(data, callback, key, configs = {}) {
         swap(args, elements) {
             const parent = blockEnd.parentNode;
 
-            let childA = nodeCacheByElement.get(elements[0]);
-            let childB = nodeCacheByElement.get(elements[1]);
+            let childA = getItemChild(elements[0]);
+            let childB = getItemChild(elements[1]);
             if(!childA || !childB) {
                 return;
             }

package/src/wrappers/ElementCreator.js

@@ -96,7 +96,7 @@ export const ElementCreator = {
             return child;
         }
         if(Validator.isNDElement(child)) {
-            return child.$element;
+            return child.$element ?? child.$build?.() ?? null;
         }
         return ElementCreator.createStaticTextNode(null, child);
     },