Fixed bugs

.changeset/khaki-mangos-shout.md

@@ -0,0 +1,11 @@
+---
+'@agile-ts/core': patch
+'@agile-ts/react': patch
+'@agile-ts/utils': patch
+---
+
+
+- added move method
+- fixed 0 as itemKey issue
+- fixed computed tracking
+

README.md

@@ -185,12 +185,14 @@ To find out more, check out the [CONTRIBUTING.md](https://github.com/agile-ts/ag
 | [@agile-ts/api](/packages/api)                                           |               [![badge](https://img.shields.io/npm/v/@agile-ts/api.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/api)                                     | Promise based API                         |
 | [@agile-ts/multieditor](/packages/multieditor)                           |               [![badge](https://img.shields.io/npm/v/@agile-ts/multieditor.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/multieditor)                     | Simple Form Manager                       |
 | [@agile-ts/event](/packages/event)                                       |               [![badge](https://img.shields.io/npm/v/@agile-ts/event.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/event)                                 | Handy class for emitting UI Events        |
-
+| [@agile-ts/logger](/packages/logger)                                     |               [![badge](https://img.shields.io/npm/v/@agile-ts/logger.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/logger)                               | Manages the logging of AgileTs            |
+| [@agile-ts/utils](/packages/utils)                                       |               [![badge](https://img.shields.io/npm/v/@agile-ts/utils.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/utils)                                 | Util functions of AgileTs                 |
+| [@agile-ts/proxytree](/packages/proxytree)                               |               [![badge](https://img.shields.io/npm/v/@agile-ts/proxytree.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/proxytree)                         | Create Proxy Tree                         |
 
 <br />
 
 
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
 
-AgileTs is inspired by [MVVM Frameworks](https://de.wikipedia.org/wiki/Model_View_ViewModel) like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).
+AgileTs is inspired by [MVVM Frameworks](https://de.wikipedia.org/wiki/Model_View_ViewModel) like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).

examples/react-native/README.md

@@ -1,6 +1,30 @@
 # `react-native` Examples
 
-Welcome, React-Native Developers, here you find all `react-native` related examples, which will hopefully take you a step further.
-To get an idea about each example, checkout our
-[examples](https://agile-ts.org/docs/examples/react-native) documentation page,
-which describes what the individual examples roughly do.
+Welcome, **React-Native Developers**,
+here you find all `react-native` related examples, which hopefully will take you one step further.
+As you surely noticed, there are two sub-folders called `develop` and `release`.
+Each of these two folders contains examples aimed at different target groups.
+
+### `develop`
+
+The `develop` examples are primarily intended for AgileTs contributors
+to test new features and bug fixes in a production-like environment.
+Therefore, we can see this section more as a playground for contributors.
+In these examples, AgileTs is imported using [`yalc`](https://github.com/wclr/yalc).
+`Yalc` is like a local npm store on your engine, which can be set up by following the guide on their [website](https://github.com/wclr/yalc).
+
+### `release`
+
+The `release` examples target people who want to see how AgileTs work in production-like environments.
+In these examples, AgileTs is imported as a release version.
+Therefore, you can simply run them on your local machine without further thinking.
+
+## 🛤 More
+
+Can't get enough of AgileTs?
+You can find even more examples in the [Example Section](https://agile-ts.org/docs/examples/react-native) on the AgileTs documentation.
+
+## ❓ Help
+
+If you have any further questions about these examples or AgileTs in general,
+don't hesitate to join our [Community Discord](https://discord.gg/T9GzreAwPH).

examples/react/README.md

@@ -1,6 +1,30 @@
 # `react` Examples
 
-Welcome, React Developers, here you find all `react` related examples, which will hopefully take you a step further.
-To get an idea about each example, checkout our
-[examples](https://agile-ts.org/docs/examples/react) documentation page,
-which describes what the individual examples roughly do.
+Welcome, **React Developers**,
+here you find all `react` related examples, which hopefully will take you one step further.
+As you surely noticed, there are two sub-folders called `develop` and `release`.
+Each of these two folders contains examples aimed at different target groups.
+
+### `develop`
+
+The `develop` examples are primarily intended for AgileTs contributors
+to test new features and bug fixes in a production-like environment.
+Therefore, we can see this section more as a playground for contributors.
+In these examples, AgileTs is imported using [`yalc`](https://github.com/wclr/yalc).
+`Yalc` is like a local npm store on your engine, which can be set up by following the guide on their [website](https://github.com/wclr/yalc).
+
+### `release`
+
+The `release` examples target people who want to see how AgileTs work in production-like environments.
+In these examples, AgileTs is imported as a release version.
+Therefore, you can simply run them on your local machine without further thinking.
+
+## 🛤 More
+
+Can't get enough of AgileTs?
+You can find even more examples in the [Example Section](https://agile-ts.org/docs/examples/react) on the AgileTs documentation.
+
+## ❓ Help
+
+If you have any further questions about these examples or AgileTs in general, 
+don't hesitate to join our [Community Discord](https://discord.gg/T9GzreAwPH).

examples/react/functional-component-ts/yarn.lock → examples/react/develop/functional-component-ts/yarn.lock

@@ -3,22 +3,46 @@
 
 
 "@agile-ts/api@file:.yalc/@agile-ts/api":
-  version "0.0.15"
+  version "0.0.16"
+  dependencies:
+    "@agile-ts/utils" "^0.0.2"
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.14"
+  version "0.0.15"
+  dependencies:
+    "@agile-ts/logger" "^0.0.2"
+    "@agile-ts/utils" "^0.0.2"
 
 "@agile-ts/event@file:.yalc/@agile-ts/event":
-  version "0.0.4"
+  version "0.0.5"
+
+"@agile-ts/logger@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@agile-ts/logger/-/logger-0.0.2.tgz#80a726531dd63ca7d1c9a123383e57b5501efbb0"
+  integrity sha512-rJJ5pqXtOriYxjuZPhHs2J9N1FnIaAZqItCw0MXW9/5od/uhJ28aiG7w9RUBZts9SjDcICYEfjFMcTJ/kYJsMg==
+  dependencies:
+    "@agile-ts/utils" "^0.0.2"
 
 "@agile-ts/multieditor@file:.yalc/@agile-ts/multieditor":
-  version "0.0.14"
+  version "0.0.15"
+
+"@agile-ts/proxytree@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@agile-ts/proxytree/-/proxytree-0.0.2.tgz#516ed19ee8d58aeecb291788a1e47be3dc23df8c"
+  integrity sha512-PbSiChF0GcUoWnrbnHauzBxZ5r/+4pZSZWpYjkBcIFa48DgTtFzg5DfQzsW3Rc1Y0QSFGYqcZOvCK1xAjLIQ2g==
 
 "@agile-ts/proxytree@file:.yalc/@agile-ts/proxytree":
   version "0.0.1"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.0.15"
+  version "0.0.16"
+  dependencies:
+    "@agile-ts/proxytree" "^0.0.2"
+
+"@agile-ts/utils@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.2.tgz#5f03761ace569b6c9ddd28c22f7b0fbec8b006b1"
+  integrity sha512-LqgQyMdK+zDuTCmOX6FOxTH4JNXhEvGFqIyNqRDoP99BK6MHGrK+n7nOW+1b4x6ZCYe0+VmwtG5CeOPOm3Siow==
 
 "@babel/code-frame@7.8.3":
   version "7.8.3"

packages/core/src/collection/collection.persistent.ts

@@ -258,12 +258,12 @@ export class CollectionPersistent<
     const collection = this.collection();
 
     // Get key from Collection
-    if (!key && collection._key) return collection._key;
+    if (key == null && collection._key) return collection._key;
 
-    if (!key) return;
+    if (key == null) return;
 
     // Set Storage Key to Collection Key if Collection has no key
-    if (!collection._key) collection._key = key;
+    if (collection._key == null) collection._key = key;
 
     return key;
   }
@@ -322,10 +322,10 @@ export class CollectionPersistent<
     itemKey?: ItemKey,
     collectionKey?: CollectionKey
   ): string {
-    if (!itemKey || !collectionKey)
+    if (itemKey == null || collectionKey == null)
       Agile.logger.warn('Failed to build unique Item StorageKey!');
-    if (!itemKey) itemKey = 'unknown';
-    if (!collectionKey) collectionKey = 'unknown';
+    if (itemKey == null) itemKey = 'unknown';
+    if (collectionKey == null) collectionKey = 'unknown';
     return this.storageItemKeyPattern
       .replace('${collectionKey}', collectionKey.toString())
       .replace('${itemKey}', itemKey.toString());
@@ -344,10 +344,10 @@ export class CollectionPersistent<
     groupKey?: GroupKey,
     collectionKey?: CollectionKey
   ): string {
-    if (!groupKey || !collectionKey)
+    if (groupKey == null || collectionKey == null)
       Agile.logger.warn('Failed to build unique Group StorageKey!');
-    if (!groupKey) groupKey = 'unknown';
-    if (!collectionKey) collectionKey = 'unknown';
+    if (groupKey == null) groupKey = 'unknown';
+    if (collectionKey == null) collectionKey = 'unknown';
 
     return this.storageGroupKeyPattern
       .replace('${collectionKey}', collectionKey.toString())

packages/core/src/collection/group.ts

@@ -22,7 +22,7 @@ export class Group<DataType extends object = DefaultItem> extends State<
   Array<ItemKey>
 > {
   static rebuildGroupSideEffectKey = 'rebuildGroup';
-  collection: () => Collection<DataType>;
+  collection: () => Collection<DataType>; // Collection the Group belongs to
 
   _output: Array<DataType> = []; // Output of Group
   _items: Array<() => Item<DataType>> = []; // Items of Group

packages/core/src/collection/index.ts

@@ -17,6 +17,7 @@ import {
   generateId,
   SideEffectConfigInterface,
   SelectorConfigInterface,
+  removeProperties,
 } from '../internal';
 
 export class Collection<DataType extends object = DefaultItem> {
@@ -129,7 +130,7 @@ export class Collection<DataType extends object = DefaultItem> {
       Agile.logger.warn(
         "After the instantiation we recommend using 'MY_COLLECTION.createGroup' instead of 'MY_COLLECTION.Group'"
       );
-      if (!config?.key)
+      if (config?.key == null)
         Agile.logger.warn(
           `Failed to find key for creation of Group. Group with random key '${key}' got created!`
         );
@@ -157,7 +158,7 @@ export class Collection<DataType extends object = DefaultItem> {
       Agile.logger.warn(
         "After the instantiation we recommend using 'MY_COLLECTION.createSelector' instead of 'MY_COLLECTION.Selector'"
       );
-      if (!config?.key)
+      if (config?.key == null)
         Agile.logger.warn(
           `Failed to find key for creation of Selector. Selector with random key '${key}' got created!`
         );
@@ -194,7 +195,7 @@ export class Collection<DataType extends object = DefaultItem> {
 
     // Set Key/Name of Group to property Name
     for (const key in groupsObject)
-      if (!groupsObject[key]._key) groupsObject[key].setKey(key);
+      if (groupsObject[key]._key == null) groupsObject[key].setKey(key);
 
     this.groups = groupsObject;
   }
@@ -225,7 +226,7 @@ export class Collection<DataType extends object = DefaultItem> {
 
     // Set Key/Name of Selector to property Name
     for (const key in selectorsObject)
-      if (!selectorsObject[key]._key) selectorsObject[key].setKey(key);
+      if (selectorsObject[key]._key == null) selectorsObject[key].setKey(key);
 
     this.selectors = selectorsObject;
   }
@@ -452,6 +453,17 @@ export class Collection<DataType extends object = DefaultItem> {
     return group;
   }
 
+  //=========================================================================================================
+  // Get Default Group
+  //=========================================================================================================
+  /**
+   * @public
+   * Get default Group of Collection
+   */
+  public getDefaultGroup(): Group<DataType> | undefined {
+    return this.getGroup(this.config.defaultGroupKey);
+  }
+
   //=========================================================================================================
   // Get Group With Reference
   //=========================================================================================================
@@ -672,7 +684,7 @@ export class Collection<DataType extends object = DefaultItem> {
     });
 
     // Get Item
-    const item = itemKey ? this.data[itemKey] : undefined;
+    const item = itemKey != null ? this.data[itemKey] : undefined;
 
     // Check if Item exists
     if (!item || (!config.notExisting && !item.exists)) return undefined;
@@ -739,13 +751,17 @@ export class Collection<DataType extends object = DefaultItem> {
       notExisting: false,
     });
 
-    // Get Items
-    const items: Array<Item<DataType>> = [];
-    for (const key in this.data) {
-      const item = this.data[key];
-      if ((!config.notExisting && item.exists) || config.notExisting) {
-        items.push(item);
-      }
+    const defaultGroup = this.getDefaultGroup();
+    let items: Array<Item<DataType>> = [];
+
+    // If config.notExisting transform this.data into array, otherwise return the default Group items
+    if (config.notExisting) {
+      for (const key in this.data) items.push(this.data[key]);
+    } else {
+      // Why defaultGroup Items and not all .exists === true Items?
+      // Because the default Group keeps track of all existing Items
+      // It also does control the Collection output in useAgile() and should do it here too
+      items = defaultGroup?.items || [];
     }
 
     return items;
@@ -916,6 +932,37 @@ export class Collection<DataType extends object = DefaultItem> {
     return this;
   }
 
+  //=========================================================================================================
+  // Move
+  //=========================================================================================================
+  /**
+   * @public
+   * Move ItemKey/s from one Group to another
+   * @param itemKeys - ItemKey/s that are moved
+   * @param oldGroupKey - GroupKey of the Group that currently keeps the Items
+   * @param newGroupKey - GroupKey of the Group into which the Items should be moved
+   * @param config - Config
+   */
+  public move(
+    itemKeys: ItemKey | Array<ItemKey>,
+    oldGroupKey: GroupKey,
+    newGroupKey: GroupKey,
+    config: GroupAddConfigInterface = {}
+  ): this {
+    const _itemKeys = normalizeArray(itemKeys);
+
+    // Remove itemKeys from old Group
+    this.getGroup(oldGroupKey)?.remove(
+      _itemKeys,
+      removeProperties(config, ['method', 'overwrite'])
+    );
+
+    // Add itemKeys to new Group
+    this.getGroup(newGroupKey)?.add(_itemKeys, config);
+
+    return this;
+  }
+
   //=========================================================================================================
   // Update Item Key
   //=========================================================================================================

packages/core/src/collection/item.ts

@@ -33,7 +33,9 @@ export class Item<DataType extends object = DefaultItem> extends State<
     this.collection = () => collection;
 
     // Add rebuildGroupsThatIncludeItemKey to sideEffects to rebuild Groups that include this Item if it mutates
-    this.addRebuildGroupThatIncludeItemKeySideEffect(this._key || 'unknown');
+    this.addRebuildGroupThatIncludeItemKeySideEffect(
+      this._key != null ? this._key : 'unknown'
+    );
   }
 
   //=========================================================================================================
@@ -60,7 +62,7 @@ export class Item<DataType extends object = DefaultItem> extends State<
       storage: true,
       overwrite: false,
     });
-    if (!value) return this;
+    if (value == null) return this;
 
     // Remove old rebuildGroupsThatIncludeItemKey sideEffect
     this.removeSideEffect(Item.updateGroupSideEffectKey);

packages/core/src/runtime/index.ts

@@ -274,7 +274,7 @@ export class Runtime {
         let newValue = job.observer.value;
         let newValueDeepness = 0;
         for (const branch of path) {
-          if (!isValidObject(newValue)) break;
+          if (!isValidObject(newValue, true)) break;
           newValue = newValue[branch];
           newValueDeepness++;
         }
@@ -283,7 +283,7 @@ export class Runtime {
         let previousValue = job.observer.previousValue;
         let previousValueDeepness = 0;
         for (const branch of path) {
-          if (!isValidObject(previousValue)) break;
+          if (!isValidObject(previousValue, true)) break;
           previousValue = previousValue[branch];
           previousValueDeepness++;
         }