native-document 1.0.98 → 1.0.100

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager$1 = {};
+    let DebugManager = {};
 
     {
-        DebugManager$1 = {
+        DebugManager = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -313,10 +313,10 @@ var NativeDocument = (function (exports) {
         subtree: true,
     });
 
-    let PluginsManager$1 = null;
+    let PluginsManager = null;
 
     {
-        PluginsManager$1 = (function() {
+        PluginsManager = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -382,7 +382,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                             }
                         }
                     }
@@ -391,13 +391,13 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager = PluginsManager$1;
+    var PluginsManager$1 = PluginsManager;
 
     function NDElement(element) {
         this.$element = element;
         this.$observer = null;
         {
-            PluginsManager.emit('NDElementCreated', element, this);
+            PluginsManager$1.emit('NDElementCreated', element, this);
         }
     }
 
@@ -572,7 +572,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -623,23 +623,23 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager.emit('NDElementExtended', methods);
+            PluginsManager$1.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -786,7 +786,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -835,7 +835,7 @@ var NativeDocument = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
@@ -1033,7 +1033,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1168,7 +1168,7 @@ var NativeDocument = (function (exports) {
         return cloned;
     };
 
-    const LocalStorage$1 = {
+    const LocalStorage = {
         getJson(key) {
             let value = localStorage.getItem(key);
             try {
@@ -1204,23 +1204,23 @@ var NativeDocument = (function (exports) {
         }
     };
 
-    const $getFromStorage$1 = (key, value) => {
-        if(!LocalStorage$1.has(key)) {
+    const $getFromStorage = (key, value) => {
+        if(!LocalStorage.has(key)) {
             return value;
         }
         switch (typeof value) {
-            case 'object': return LocalStorage$1.getJson(key) ?? value;
-            case 'boolean': return LocalStorage$1.getBool(key) ?? value;
-            case 'number': return LocalStorage$1.getNumber(key) ?? value;
-            default: return LocalStorage$1.get(key, value) ?? value;
+            case 'object': return LocalStorage.getJson(key) ?? value;
+            case 'boolean': return LocalStorage.getBool(key) ?? value;
+            case 'number': return LocalStorage.getNumber(key) ?? value;
+            default: return LocalStorage.get(key, value) ?? value;
         }
     };
 
-    const $saveToStorage$1 = (value) => {
+    const $saveToStorage = (value) => {
         switch (typeof value) {
-            case 'object': return LocalStorage$1.setJson;
-            case 'boolean': return LocalStorage$1.setBool;
-            default: return LocalStorage$1.set;
+            case 'object': return LocalStorage.setJson;
+            case 'boolean': return LocalStorage.setBool;
+            default: return LocalStorage.set;
         }
     };
 
@@ -1235,7 +1235,7 @@ var NativeDocument = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -1248,7 +1248,7 @@ var NativeDocument = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -1260,12 +1260,12 @@ var NativeDocument = (function (exports) {
 
         const $createObservable = (value, options = {}) => {
             if(Array.isArray(value)) {
-                return Observable$1.array(value, options);
+                return Observable.array(value, options);
             }
             if(typeof value === 'object') {
-                return Observable$1.object(value, options);
+                return Observable.object(value, options);
             }
-            return Observable$1(value, options);
+            return Observable(value, options);
         };
 
         const $api = {
@@ -1279,7 +1279,7 @@ var NativeDocument = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
                     throw new NativeDocumentError(
                         `Store.create('${name}') : a store with this name already exists.`
                     );
@@ -1300,7 +1300,7 @@ var NativeDocument = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createResettable('${name}') : a store with this name already exists.`
                     );
@@ -1336,7 +1336,7 @@ var NativeDocument = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createComposed('${name}') : a store with this name already exists.`
                     );
@@ -1359,7 +1359,7 @@ var NativeDocument = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -1368,7 +1368,7 @@ var NativeDocument = (function (exports) {
                 });
 
                 // Create computed observable from dependency observers
-                const observer = Observable$1.computed(computation, depObservers);
+                const observer = Observable.computed(computation, depObservers);
 
                 $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
                 return observer;
@@ -1393,13 +1393,13 @@ var NativeDocument = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : composed stores cannot be reset.`
                     );
                 }
                 if (!item.resettable) {
-                    DebugManager.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
                     );
@@ -1420,7 +1420,7 @@ var NativeDocument = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
                     throw new NativeDocumentError(
                         `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
                     );
@@ -1487,7 +1487,7 @@ var NativeDocument = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -1509,7 +1509,7 @@ var NativeDocument = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -1572,21 +1572,21 @@ var NativeDocument = (function (exports) {
             },
             createPersistent(name, value, localstorage_key) {
                 localstorage_key = localstorage_key || name;
-                const observer = this.create(name, $getFromStorage$1(localstorage_key, value));
-                const saver = $saveToStorage$1(value);
+                const observer = this.create(name, $getFromStorage(localstorage_key, value));
+                const saver = $saveToStorage(value);
 
                 observer.subscribe((val) => saver(localstorage_key, val));
                 return observer;
             },
             createPersistentResettable(name, value, localstorage_key) {
                 localstorage_key = localstorage_key || name;
-                const observer = this.createResettable(name, $getFromStorage$1(localstorage_key, value));
-                const saver = $saveToStorage$1(value);
+                const observer = this.createResettable(name, $getFromStorage(localstorage_key, value));
+                const saver = $saveToStorage(value);
                 observer.subscribe((val) => saver(localstorage_key, val));
 
                 const originalReset = observer.reset.bind(observer);
                 observer.reset = () => {
-                    LocalStorage$1.remove(localstorage_key);
+                    LocalStorage.remove(localstorage_key);
                     originalReset();
                 };
 
@@ -1611,7 +1611,7 @@ var NativeDocument = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
                 throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
             },
             deleteProperty(target, prop) {
@@ -1622,7 +1622,7 @@ var NativeDocument = (function (exports) {
 
     const Store = StoreFactory();
 
-    Store.create('locale', 'fr');
+    Store.create('locale', navigator.language.split('-')[0] || 'en');
 
     const $parseDateParts = (value, locale) => {
         const d = new Date(value);
@@ -1658,7 +1658,6 @@ var NativeDocument = (function (exports) {
     };
 
     const Formatters = {
-
         currency: (value, locale, { currency = 'XOF', notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
             new Intl.NumberFormat(locale, {
                 style: 'currency',
@@ -1744,7 +1743,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager.emit('CreateObservable', this);
+            PluginsManager$1.emit('CreateObservable', this);
         }
     }
 
@@ -1848,12 +1847,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager.emit('ObservableBeforeChange', this);
+            PluginsManager$1.emit('ObservableBeforeChange', this);
         }
         this.trigger();
         this.$previousValue = null;
         {
-            PluginsManager.emit('ObservableAfterChange', this);
+            PluginsManager$1.emit('ObservableAfterChange', this);
         }
     };
 
@@ -1940,7 +1939,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -1952,7 +1951,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableSubscribe', this);
+            PluginsManager$1.emit('ObservableSubscribe', this);
         }
     };
 
@@ -2063,7 +2062,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableUnsubscribe', this);
+            PluginsManager$1.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -2266,20 +2265,20 @@ var NativeDocument = (function (exports) {
         }
 
         const formatter = Formatters[type];
-        const localeObservable = Store.follow('locale');
+        const localeObservable = Formatters.locale;
 
-        return Observable$1.computed(() => formatter(self.val(), localeObservable.val(), options),
+        return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
             [self, localeObservable]
         );
     };
 
     ObservableItem.prototype.persist = function(key, options = {}) {
-        let value = $getFromStorage$1(key, this.$currentValue);
+        let value = $getFromStorage(key, this.$currentValue);
         if(options.get) {
             value = options.get(value);
         }
         this.set(value);
-        const saver = $saveToStorage$1(this.$currentValue);
+        const saver = $saveToStorage(this.$currentValue);
         this.subscribe((newValue) => {
             saver(key, options.set ? options.set(newValue) : newValue);
         });
@@ -2293,18 +2292,18 @@ var NativeDocument = (function (exports) {
      * @returns {ObservableItem}
      * @constructor
      */
-    function Observable$1(value, configs = null) {
+    function Observable(value, configs = null) {
         return new ObservableItem(value, configs);
     }
 
-    const $ = Observable$1;
-    const obs = Observable$1;
+    const $ = Observable;
+    const obs = Observable;
 
     /**
      *
      * @param {string} propertyName
      */
-    Observable$1.useValueProperty = function(propertyName = 'value') {
+    Observable.useValueProperty = function(propertyName = 'value') {
         Object.defineProperty(ObservableItem.prototype, propertyName, {
             get() {
                 return this.$currentValue;
@@ -2322,7 +2321,7 @@ var NativeDocument = (function (exports) {
      * @param id
      * @returns {ObservableItem|null}
      */
-    Observable$1.getById = function(id) {
+    Observable.getById = function(id) {
         const item = MemoryManager.getObservableById(parseInt(id));
         if(!item) {
             throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
@@ -2334,7 +2333,7 @@ var NativeDocument = (function (exports) {
      *
      * @param {ObservableItem} observable
      */
-    Observable$1.cleanup = function(observable) {
+    Observable.cleanup = function(observable) {
         observable.cleanup();
     };
 
@@ -2343,7 +2342,7 @@ var NativeDocument = (function (exports) {
      * @param {Boolean} enable
      * @param {{interval:Boolean, threshold:number}} options
      */
-    Observable$1.autoCleanup = function(enable = false, options = {}) {
+    Observable.autoCleanup = function(enable = false, options = {}) {
         if(!enable) {
             return;
         }
@@ -2541,7 +2540,7 @@ var NativeDocument = (function (exports) {
     Function.prototype.toNdElement = function () {
         const child = this;
         {
-            PluginsManager.emit('BeforeProcessComponent', child);
+            PluginsManager$1.emit('BeforeProcessComponent', child);
         }
         return ElementCreator.getChild(child());
     };
@@ -2729,14 +2728,14 @@ var NativeDocument = (function (exports) {
         processChildren(children, parent) {
             if(children === null) return;
             {
-                PluginsManager.emit('BeforeProcessChildren', parent);
+                PluginsManager$1.emit('BeforeProcessChildren', parent);
             }
             let child = this.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager.emit('AfterProcessChildren', parent);
+                PluginsManager$1.emit('AfterProcessChildren', parent);
             }
         },
         async safeRemove(element) {
@@ -3497,7 +3496,7 @@ var NativeDocument = (function (exports) {
     String.prototype.use = function(args) {
         const value = this;
 
-        return Observable$1.computed(() => {
+        return Observable.computed(() => {
             return value.replace(/\$\{(.*?)}/g, (match, key) => {
                 const data = args[key];
                 if(Validator.isObservable(data)) {
@@ -3517,7 +3516,7 @@ var NativeDocument = (function (exports) {
                 return value;
             }
             const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
-            return Observable$1.getById(id);
+            return Observable.getById(id);
         });
     };
 
@@ -3992,7 +3991,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager.emit('CreateObservableArray', this);
+            PluginsManager$1.emit('CreateObservableArray', this);
         }
     };
 
@@ -4210,7 +4209,7 @@ var NativeDocument = (function (exports) {
             }
         }
 
-        const viewArray = Observable$1.array();
+        const viewArray = Observable.array();
 
         const filters = Object.entries(filterCallbacks);
         const updateView = () => {
@@ -4281,6 +4280,68 @@ var NativeDocument = (function (exports) {
         });
     };
 
+    ObservableArray.prototype.deepSubscribe = function(callback) {
+        const updatedValue = nextTick(() => callback(this.val()));
+        const $listeners = new WeakMap();
+
+        const bindItem = (item) => {
+            if ($listeners.has(item)) {
+                return;
+            }
+            if (item?.__$isObservableArray) {
+                $listeners.set(item, item.deepSubscribe(updatedValue));
+                return;
+            }
+            if (item?.__$isObservable) {
+                item.subscribe(updatedValue);
+                $listeners.set(item, () => item.unsubscribe(updatedValue));
+            }
+        };
+
+        const unbindItem = (item) => {
+            const unsub = $listeners.get(item);
+            if (unsub) {
+                unsub();
+                $listeners.delete(item);
+            }
+        };
+
+        this.$currentValue.forEach(bindItem);
+        this.subscribe(updatedValue);
+
+        this.subscribe((items, _, operations) => {
+            switch (operations?.action) {
+                case 'push':
+                case 'unshift':
+                    operations.args.forEach(bindItem);
+                    break;
+
+                case 'splice': {
+                    const [start, deleteCount, ...newItems] = operations.args;
+                    operations.result?.forEach(unbindItem);
+                    newItems.forEach(bindItem);
+                    break;
+                }
+
+                case 'remove':
+                    unbindItem(operations.result);
+                    break;
+
+                case 'merge':
+                    operations.args.forEach(bindItem);
+                    break;
+
+                case 'clear':
+                    this.$currentValue.forEach(unbindItem);
+                    break;
+            }
+        });
+
+        return () => {
+            this.$currentValue.forEach(unbindItem);
+        };
+    };
+
     /**
      * Creates an observable array with reactive array methods.
      * All mutations trigger updates automatically.
@@ -4296,7 +4357,7 @@ var NativeDocument = (function (exports) {
      * items.push(4); // Triggers update
      * items.subscribe((arr) => console.log(arr));
      */
-    Observable$1.array = function(target = [], configs = null) {
+    Observable.array = function(target = [], configs = null) {
         return new ObservableArray(target, configs);
     };
 
@@ -4305,8 +4366,8 @@ var NativeDocument = (function (exports) {
      * @param {Function} callback
      * @returns {Function}
      */
-    Observable$1.batch = function(callback) {
-        const $observer = Observable$1(0);
+    Observable.batch = function(callback) {
+        const $observer = Observable(0);
         const batch = function() {
             if(Validator.isAsyncFunction(callback)) {
                 return (callback(...arguments)).then(() => {
@@ -4360,24 +4421,24 @@ var NativeDocument = (function (exports) {
                 if(configs?.deep !== false) {
                     const mappedItemValue = itemValue.map(item => {
                         if(Validator.isJson(item)) {
-                            return Observable$1.json(item, configs);
+                            return Observable.json(item, configs);
                         }
                         if(Validator.isArray(item)) {
-                            return Observable$1.array(item, configs);
+                            return Observable.array(item, configs);
                         }
-                        return Observable$1(item, configs);
+                        return Observable(item, configs);
                     });
-                    this.$observables[key] = Observable$1.array(mappedItemValue, configs);
+                    this.$observables[key] = Observable.array(mappedItemValue, configs);
                     continue;
                 }
-                this.$observables[key] = Observable$1.array(itemValue, configs);
+                this.$observables[key] = Observable.array(itemValue, configs);
                 continue;
             }
             if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
                 this.$observables[key] = itemValue;
                 continue;
             }
-            this.$observables[key] = Observable$1(itemValue, configs);
+            this.$observables[key] = (typeof itemValue === 'object') ? Observable.object(itemValue, configs) : Observable(itemValue, configs);
         }
     };
 
@@ -4439,9 +4500,9 @@ var NativeDocument = (function (exports) {
                 if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
                         if(Validator.isProxy(firstElementFromOriginalValue)) {
-                            return Observable$1.init(item, configs);
+                            return Observable.init(item, configs);
                         }
-                        return Observable$1(item, configs);
+                        return Observable(item, configs);
                     });
                     targetItem.set(newValues);
                     continue;
@@ -4469,7 +4530,7 @@ var NativeDocument = (function (exports) {
     };
     ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
     ObservableObject.prototype.clone = function() {
-        return Observable$1.init(this.val(), this.configs);
+        return Observable.init(this.val(), this.configs);
     };
     ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
     ObservableObject.prototype.reset = function() {
@@ -4480,15 +4541,16 @@ var NativeDocument = (function (exports) {
     ObservableObject.prototype.originalSubscribe = ObservableObject.prototype.subscribe;
     ObservableObject.prototype.subscribe = function(callback) {
         const observables = this.observables();
-        const updatedValue = nextTick(() => {
-            this.$currentValue = this.val();
-            this.trigger();
-        });
+        const updatedValue = nextTick(() => this.trigger());
 
         this.originalSubscribe(callback);
 
-        for(let i = 0, length = observables.length; i < length; i++) {
+        for (let i = 0, length = observables.length; i < length; i++) {
             const observable = observables[i];
+            if (observable.__$isObservableArray) {
+                observable.deepSubscribe(updatedValue);
+                continue
+            }
             observable.subscribe(updatedValue);
         }
     };
@@ -4498,7 +4560,7 @@ var NativeDocument = (function (exports) {
 
     ObservableObject.prototype.update = ObservableObject.prototype.set;
 
-    Observable$1.init = function(initialValue, configs = null) {
+    Observable.init = function(initialValue, configs = null) {
         return new ObservableObject(initialValue, configs)
     };
 
@@ -4507,8 +4569,8 @@ var NativeDocument = (function (exports) {
      * @param {any[]} data
      * @return Proxy[]
      */
-    Observable$1.arrayOfObject = function(data) {
-        return data.map(item => Observable$1.object(item));
+    Observable.arrayOfObject = function(data) {
+        return data.map(item => Observable.object(item));
     };
 
     /**
@@ -4516,7 +4578,7 @@ var NativeDocument = (function (exports) {
      * @param {ObservableItem|Object<ObservableItem>} data
      * @returns {{}|*|null}
      */
-    Observable$1.value = function(data) {
+    Observable.value = function(data) {
         if(Validator.isObservable(data)) {
             return data.val();
         }
@@ -4527,15 +4589,15 @@ var NativeDocument = (function (exports) {
             const result = [];
             for(let i = 0, length = data.length; i < length; i++) {
                 const item = data[i];
-                result.push(Observable$1.value(item));
+                result.push(Observable.value(item));
             }
             return result;
         }
         return data;
     };
 
-    Observable$1.object = Observable$1.init;
-    Observable$1.json = Observable$1.init;
+    Observable.object = Observable.init;
+    Observable.json = Observable.init;
 
     /**
      * Creates a computed observable that automatically updates when its dependencies change.
@@ -4556,12 +4618,12 @@ var NativeDocument = (function (exports) {
      * const batch = Observable.batch(() => { ...  });
      * const computed = Observable.computed(() => { ... }, batch);
     */
-    Observable$1.computed = function(callback, dependencies = []) {
+    Observable.computed = function(callback, dependencies = []) {
         const initialValue = callback();
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
         {
-            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
+            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
         }
 
         if(Validator.isFunction(dependencies)) {
@@ -4653,14 +4715,14 @@ var NativeDocument = (function (exports) {
             }
 
             try {
-                const indexObserver = callback.length >= 2 ? Observable$1(indexKey) : null;
+                const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
                 let child = ElementCreator.getChild(callback(item, indexObserver));
                 if(!child) {
                     throw new NativeDocumentError("ForEach child can't be null or undefined!");
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -4835,7 +4897,7 @@ var NativeDocument = (function (exports) {
                 cache.delete(item);
             }
 
-            const indexObserver = isIndexRequired ? Observable$1(indexKey) : null;
+            const indexObserver = isIndexRequired ? Observable(indexKey) : null;
             let child = ElementCreator.getChild(callback(item, indexObserver));
             if(child) {
                 cache.set(item, {
@@ -5030,7 +5092,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -5077,7 +5139,7 @@ var NativeDocument = (function (exports) {
      * HideIf(hasError, Div({}, 'Content'));
      */
     const HideIf = function(condition, child, configs) {
-        const hideCondition = Observable$1(!condition.val());
+        const hideCondition = Observable(!condition.val());
         condition.subscribe(value => hideCondition.set(!value));
 
         return ShowIf(hideCondition, child, configs);
@@ -6449,7 +6511,7 @@ var NativeDocument = (function (exports) {
                 window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, query, path);
             } catch (e) {
-                DebugManager.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -6462,7 +6524,7 @@ var NativeDocument = (function (exports) {
                 window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, {}, path);
             } catch(e) {
-                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -6489,7 +6551,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -6714,7 +6776,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -6892,7 +6954,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager.error('Router', 'Callback must be a function');
+            DebugManager$1.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -7084,8 +7146,8 @@ var NativeDocument = (function (exports) {
     exports.ElementCreator = ElementCreator;
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
-    exports.Observable = Observable$1;
-    exports.PluginsManager = PluginsManager;
+    exports.Observable = Observable;
+    exports.PluginsManager = PluginsManager$1;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.StoreFactory = StoreFactory;