native-document 1.0.14 → 1.0.15

package/src/data/ObservableItem.js

@@ -16,101 +16,180 @@ export default function ObservableItem(value) {
         throw new NativeDocumentError('ObservableItem cannot be an Observable');
     }
 
-    const $initialValue = (typeof value === 'object') ? JSON.parse(JSON.stringify(value)) : value;
-
-    let $previousValue = value;
-    let $currentValue = value;
-    let $isCleanedUp = false;
+    this.$previousValue = value;
+    this.$currentValue = value;
+    this.$isCleanedUp = false;
+
+    this.$listeners = null;
+    this.$watchers = null;
+
+    this.$memoryId = MemoryManager.register(this);
+}
+
+Object.defineProperty(ObservableItem.prototype, '$value', {
+    get() {
+        return this.$currentValue;
+    },
+    set(value) {
+        this.set(value);
+    },
+    configurable: true,
+});
+
+ObservableItem.prototype.triggerListeners = function(operations) {
+    const $listeners = this.$listeners;
+    const $previousValue = this.$previousValue;
+    const $currentValue = this.$currentValue;
+
+    operations = operations || {};
+    if($listeners?.length) {
+        for(let i = 0, length = $listeners.length; i < length; i++) {
+            $listeners[i]($currentValue, $previousValue, operations);
+        }
+    }
+};
 
-    const $listeners = [];
+ObservableItem.prototype.triggerWatchers = function() {
+    if(!this.$watchers) {
+        return;
+    }
 
-    const $memoryId = MemoryManager.register(this, $listeners);
+    const $watchers = this.$watchers;
+    const $previousValue = this.$previousValue;
+    const $currentValue = this.$currentValue;
 
-    this.trigger = () => {
-        $listeners.forEach(listener => {
-            try {
-                listener($currentValue, $previousValue);
-            } catch (error) {
-                DebugManager.error('Listener Undefined', 'Error in observable listener:', error);
-                this.unsubscribe(listener);
+    if($watchers.has($currentValue)) {
+        const watchValueList = $watchers.get($currentValue);
+        watchValueList.forEach(itemValue => {
+            if(itemValue.ifTrue.called) {
+                return;
             }
+            itemValue.ifTrue.callback();
+            itemValue.else.called = false;
+        })
+    }
+    if($watchers.has($previousValue)) {
+        const watchValueList = $watchers.get($previousValue);
+        watchValueList.forEach(itemValue => {
+            if(itemValue.else.called) {
+                return;
+            }
+            itemValue.else.callback();
+            itemValue.ifTrue.called = false;
         });
+    }
+};
 
-    };
-
-    this.originalValue = () => $initialValue;
+ObservableItem.prototype.trigger = function(operations) {
+    this.triggerListeners(operations);
+    this.triggerWatchers();
+}
 
-    /**
-     * @param {*} data
-     */
-    this.set = (data) => {
-        const newValue = (typeof data === 'function') ? data($currentValue) : data;
-        if($currentValue === newValue) {
-            return;
+/**
+ * @param {*} data
+ */
+ObservableItem.prototype.set = function(data) {
+    const newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+    if(this.$currentValue === newValue) {
+        return;
+    }
+    this.$previousValue = this.$currentValue;
+    this.$currentValue = newValue;
+    this.trigger();
+};
+
+ObservableItem.prototype.val = function() {
+    return this.$currentValue;
+};
+
+ObservableItem.prototype.disconnectAll = function() {
+    this.$listeners?.splice(0);
+    this.$previousValue = null;
+    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();
         }
-        $previousValue = $currentValue;
-        $currentValue = newValue;
-        this.trigger();
-    };
+    }
+    this.$watchers?.clear();
+    this.$listeners = null;
+    this.$watchers = null;
+}
+ObservableItem.prototype.cleanup = function() {
+    MemoryManager.unregister(this.$memoryId);
+    this.disconnectAll();
+    this.$isCleanedUp = true;
+    delete this.$value;
+}
 
-    this.val = () => $currentValue;
+/**
+ *
+ * @param {Function} callback
+ * @returns {(function(): void)}
+ */
+ObservableItem.prototype.subscribe = function(callback) {
+    this.$listeners = this.$listeners ?? [];
+    if (this.$isCleanedUp) {
+        DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+        return () => {};
+    }
+    if (typeof callback !== 'function') {
+        throw new NativeDocumentError('Callback must be a function');
+    }
 
-    this.cleanup = function() {
-        $listeners.splice(0);
-        $isCleanedUp = true;
-    };
+    this.$listeners.push(callback);
+    return () => this.unsubscribe(callback);
+};
 
-    /**
-     *
-     * @param {Function} callback
-     * @returns {(function(): void)}
-     */
-    this.subscribe = (callback) => {
-        if ($isCleanedUp) {
-            DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
-            return () => {};
-        }
-        if (typeof callback !== 'function') {
-            throw new NativeDocumentError('Callback must be a function');
-        }
+ObservableItem.prototype.on = function(value, callback, elseCallback) {
+    this.$watchers = this.$watchers ?? new Map();
 
-        $listeners.push(callback);
-        return () => this.unsubscribe(callback);
-    };
+    let watchValueList = this.$watchers.get(value);
+    if(!watchValueList) {
+        watchValueList = new Set();
+        this.$watchers.set(value, watchValueList);
+    }
 
-    /**
-     * Unsubscribe from an observable.
-     * @param {Function} callback
-     */
-    this.unsubscribe = (callback) => {
-        const index = $listeners.indexOf(callback);
-        if (index > -1) {
-            $listeners.splice(index, 1);
-        }
+    let itemValue = {
+        ifTrue: { callback, called: false },
+        else: { callback: elseCallback, called: false }
     };
-
-    /**
-     * Create an Observable checker instance
-     * @param callback
-     * @returns {ObservableChecker}
-     */
-    this.check = function(callback) {
-        return new ObservableChecker(this, callback)
+    watchValueList.add(itemValue);
+    return () => {
+        watchValueList?.delete(itemValue);
+        if(watchValueList.size === 0) {
+            this.$watchers?.delete(value);
+        }
+        watchValueList = null;
+        itemValue = null;
     };
+};
 
-    const $object = this;
-    Object.defineProperty($object, '$value', {
-        get() {
-            return $object.val();
-        },
-        set(value) {
-            $object.set(value);
-            return $object;
-        }
-    })
+/**
+ * Unsubscribe from an observable.
+ * @param {Function} callback
+ */
+ObservableItem.prototype.unsubscribe = function(callback) {
+    const index = this.$listeners.indexOf(callback);
+    if (index > -1) {
+        this.$listeners.splice(index, 1);
+    }
+};
 
-    this.toString = function() {
-        return   '{{#ObItem::(' +$memoryId+ ')}}';
-    };
+/**
+ * Create an Observable checker instance
+ * @param callback
+ * @returns {ObservableChecker}
+ */
+ObservableItem.prototype.check = function(callback) {
+    return new ObservableChecker(this, callback)
+};
+ObservableItem.prototype.get = ObservableItem.prototype.check;
 
+    ObservableItem.prototype.toString = function() {
+    return '{{#ObItem::(' +this.$memoryId+ ')}}';
 }

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

@@ -0,0 +1,74 @@
+import NativeDocumentError from "../../errors/NativeDocumentError";
+import {Observable} from "../Observable";
+import ObservableItem from "../ObservableItem";
+
+
+const methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
+
+/**
+ *
+ * @param {Array} target
+ * @returns {ObservableItem}
+ */
+Observable.array = function(target) {
+    if(!Array.isArray(target)) {
+        throw new NativeDocumentError('Observable.array : target must be an array');
+    }
+    const observer = Observable(target);
+
+    methods.forEach((method) => {
+        observer[method] = function(...values) {
+            const result = observer.val()[method](...values);
+            observer.trigger({ action: method, args: values, result });
+            return result;
+        };
+    });
+
+    observer.clear = function() {
+        observer.$value.length = 0;
+        observer.trigger({ action: 'clear' });
+        return true;
+    };
+
+    observer.remove = function(index) {
+        const deleted = observer.$value.splice(index, 1);
+        if(deleted.length === 0) {
+            return [];
+        }
+        observer.trigger({ action: 'remove', args: [index], result: deleted[0] });
+        return deleted;
+    };
+
+    observer.swap = function(indexA, indexB) {
+        const value = observer.$value;
+        const length = value.length;
+        if(length < indexA || length < indexB) {
+            return false;
+        }
+        if(indexB < indexA) {
+            const temp = indexA;
+            indexA = indexB;
+            indexB = temp;
+        }
+        const elementA = value[indexA];
+        const elementB = value[indexB]
+
+        value[indexA] = elementB;
+        value[indexB] = elementA;
+        observer.trigger({ action: 'swap', args: [indexA, indexB], result: [elementA, elementB] });
+        return true;
+    };
+
+    observer.length = function() {
+        return observer.$value.length;
+    }
+
+    const overrideMethods = ['map', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat'];
+    overrideMethods.forEach((method) => {
+        observer[method] = function(...args) {
+            return observer.val()[method](...args);
+        };
+    })
+
+    return observer;
+};

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

@@ -0,0 +1,22 @@
+import Validator from "../../utils/validator";
+import {Observable} from "../Observable";
+
+/**
+ *
+ * @param {Function} callback
+ * @returns {Function}
+ */
+Observable.batch = function(callback) {
+    const $observer = Observable(0);
+    const batch = function() {
+        if(Validator.isAsyncFunction(callback)) {
+            return (callback(...arguments)).then(() => {
+                $observer.trigger();
+            }).catch(error => { throw error; });
+        }
+        callback(...arguments);
+        $observer.trigger();
+    };
+    batch.$observer = $observer;
+    return batch;
+};

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

@@ -0,0 +1,28 @@
+import ObservableItem from "../ObservableItem";
+import Validator from "../../utils/validator";
+import NativeDocumentError from "../../errors/NativeDocumentError";
+import {Observable} from "../Observable";
+
+/**
+ *
+ * @param {Function} callback
+ * @param {Array|Function} dependencies
+ * @returns {ObservableItem}
+ */
+Observable.computed = function(callback, dependencies = []) {
+    const initialValue = callback();
+    const observable = new ObservableItem(initialValue);
+    const updatedValue = () => observable.set(callback());
+
+    if(Validator.isFunction(dependencies)) {
+        if(!Validator.isObservable(dependencies.$observer)) {
+            throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
+        }
+        dependencies.$observer.subscribe(updatedValue);
+        return observable;
+    }
+
+    dependencies.forEach(dependency => dependency.subscribe(updatedValue));
+
+    return observable;
+};

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

@@ -0,0 +1,111 @@
+import Validator from "../../utils/validator";
+import {Observable} from "../Observable";
+
+/**
+ *
+ * @param {Object} value
+ * @returns {Proxy}
+ */
+Observable.init = function(value) {
+    const data = {};
+    for(const key in value) {
+        const itemValue = value[key];
+        if(Validator.isJson(itemValue)) {
+            data[key] = Observable.init(itemValue);
+            continue;
+        }
+        else if(Validator.isArray(itemValue)) {
+            data[key] = Observable.array(itemValue);
+            continue;
+        }
+        data[key] = Observable(itemValue);
+    }
+
+    const $val = function() {
+        const result = {};
+        for(const key in data) {
+            const dataItem = data[key];
+            if(Validator.isObservable(dataItem)) {
+                result[key] = dataItem.val();
+            } else if(Validator.isProxy(dataItem)) {
+                result[key] = dataItem.$value;
+            } else {
+                result[key] = dataItem;
+            }
+        }
+        return result;
+    };
+    const $clone = function() {
+
+    };
+
+    return new Proxy(data, {
+        get(target, property) {
+            if(property === '__isProxy__') {
+                return true;
+            }
+            if(property === '$value') {
+                return $val();
+            }
+            if(property === '$clone') {
+                return $clone;
+            }
+            if(target[property] !== undefined) {
+                return target[property];
+            }
+            return undefined;
+        },
+        set(target, prop, newValue) {
+            if(target[prop] !== undefined) {
+                target[prop].set(newValue);
+            }
+        }
+    })
+};
+
+/**
+ * Get the value of an observable or an object of observables.
+ * @param {ObservableItem|Object<ObservableItem>} data
+ * @returns {{}|*|null}
+ */
+Observable.value = function(data) {
+    if(Validator.isObservable(data)) {
+        return data.val();
+    }
+    if(Validator.isProxy(data)) {
+        return data.$value;
+    }
+    if(Validator.isArray(data)) {
+        const result = [];
+        data.forEach(item => {
+            result.push(Observable.value(item));
+        });
+        return result;
+    }
+    return data;
+};
+
+
+Observable.update = function($target, data) {
+    for(const key in data) {
+        const targetItem = $target[key];
+        const newValue = data[key];
+
+        if(Validator.isObservable(targetItem)) {
+            if(Validator.isArray(newValue)) {
+                Observable.update(targetItem, newValue);
+                continue;
+            }
+            targetItem.set(newValue);
+            continue;
+        }
+        if(Validator.isProxy(targetItem)) {
+            Observable.update(targetItem, newValue);
+            continue;
+        }
+        $target[key] = newValue;
+    }
+};
+
+Observable.object = Observable.init;
+Observable.json = Observable.init;

package/src/elements/anchor.js

@@ -33,6 +33,14 @@ export default function Anchor(name) {
         parent.insertBefore(getChildAsNode(child), target);
     };
 
+    element.appendElement = function(child, before = null) {
+        if(anchorEnd.parentNode === element) {
+            anchorEnd.parentNode.nativeInsertBefore(child, before || anchorEnd);
+            return;
+        }
+        anchorEnd.parentNode?.insertBefore(child, before || anchorEnd);
+    };
+
     element.appendChild = function(child, before = null) {
         const parent = anchorEnd.parentNode;
         if(!parent) {
@@ -41,28 +49,65 @@ export default function Anchor(name) {
         }
         before = before ?? anchorEnd;
         if(Validator.isArray(child)) {
-            child.forEach((element) => {
-                insertBefore(parent, element, before);
-            });
+            const fragment = document.createDocumentFragment();
+            for(let i = 0, length = child.length; i < length; i++) {
+                fragment.appendChild(getChildAsNode(child[i]));
+            }
+            insertBefore(parent, fragment, before);
             return element;
         }
         insertBefore(parent, child, before);
     };
 
-    element.remove = function(trueRemove) {
-        if(anchorEnd.parentNode === element) {
+    element.removeChildren = function() {
+        const parent = anchorEnd.parentNode;
+        if(parent === element) {
+            return;
+        }
+        if(parent.firstChild === anchorStart && parent.lastChild === anchorEnd) {
+            parent.replaceChildren(anchorStart, anchorEnd);
+            return;
+        }
+
+        let itemToRemove = anchorStart.nextSibling, tempItem;
+        const fragment = document.createDocumentFragment();
+        while(itemToRemove && itemToRemove !== anchorEnd) {
+            tempItem = itemToRemove.nextSibling;
+            fragment.append(itemToRemove);
+            itemToRemove =  tempItem;
+        }
+        fragment.replaceChildren();
+    }
+    element.remove = function() {
+        const parent = anchorEnd.parentNode;
+        if(parent === element) {
             return;
         }
         let itemToRemove = anchorStart.nextSibling, tempItem;
         while(itemToRemove !== anchorEnd) {
             tempItem = itemToRemove.nextSibling;
-            trueRemove ? itemToRemove.remove() : element.nativeAppendChild(itemToRemove);
+            element.nativeAppendChild(itemToRemove);
             itemToRemove = tempItem;
         }
-        if(trueRemove) {
-            anchorEnd.remove();
-            anchorStart.remove();
+    };
+
+    element.removeWithAnchors = function() {
+        element.removeChildren();
+        anchorStart.remove();
+        anchorEnd.remove();
+    };
+
+    element.replaceContent = function(child) {
+        const parent = anchorEnd.parentNode;
+        if(!parent) {
+            return;
+        }
+        if(parent.firstChild === anchorStart && parent.lastChild === anchorEnd) {
+            parent.replaceChildren(anchorStart, child, anchorEnd);
+            return;
         }
+        element.removeChildren();
+        parent.insertBefore(child, anchorEnd);
     };
 
     element.insertBefore = function(child, anchor = null) {