Optimise Runtime

examples/react/develop/functional-component-ts/package.json

@@ -30,7 +30,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "install:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/multieditor @agile-ts/event & yarn install"
+    "install:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/multieditor @agile-ts/event @agile-ts/proxytree & yarn install"
   },
   "eslintConfig": {
     "extends": "react-app"

examples/react/develop/functional-component-ts/src/App.tsx

@@ -4,6 +4,7 @@ import { useAgile, useWatcher, useProxy } from '@agile-ts/react';
 import { useEvent } from '@agile-ts/event';
 import {
   COUNTUP,
+  externalCreatedItem,
   MY_COLLECTION,
   MY_COMPUTED,
   MY_EVENT,
@@ -12,7 +13,7 @@ import {
   MY_STATE_3,
   STATE_OBJECT,
 } from './core';
-import { generateId, globalBind } from '@agile-ts/core';
+import { generateId, globalBind, Item } from '@agile-ts/core';
 
 let rerenderCount = 0;
 let rerenderCountInCountupView = 0;
@@ -42,11 +43,10 @@ const App = (props: any) => {
   ]);
   const [myGroup] = useAgile([MY_COLLECTION.getGroupWithReference('myGroup')]);
 
-  const [stateObject, item2, collection2] = useProxy([
-    STATE_OBJECT,
-    MY_COLLECTION.getItem('id2'),
-    MY_COLLECTION,
-  ]);
+  const [stateObject, item2, collection2] = useProxy(
+    [STATE_OBJECT, MY_COLLECTION.getItem('id2'), MY_COLLECTION],
+    { key: 'useProxy' }
+  );
 
   console.log('Item1: ', item2?.name);
   console.log('Collection: ', collection2.slice(0, 2));
@@ -142,6 +142,12 @@ const App = (props: any) => {
             }>
             Collect
           </button>
+          <button
+            onClick={() =>
+              MY_COLLECTION.collect(externalCreatedItem, ['myGroup'])
+            }>
+            Collect external Item
+          </button>
           <button onClick={() => MY_COLLECTION.getGroup('myGroup')?.add('id3')}>
             Add to myGroup
           </button>

examples/react/develop/functional-component-ts/src/core/index.ts

@@ -1,4 +1,4 @@
-import { Agile, clone, Collection, Logger } from '@agile-ts/core';
+import { Agile, clone, Item, Logger } from '@agile-ts/core';
 import Event from '@agile-ts/event';
 
 export const myStorage: any = {};
@@ -86,14 +86,19 @@ export const MY_COLLECTION = App.createCollection<collectionValueInterface>(
 ).persist();
 MY_COLLECTION.collect({ key: 'id1', name: 'test' });
 MY_COLLECTION.collect({ key: 'id2', name: 'test2' }, 'myGroup');
-MY_COLLECTION.update('id1', { id: 'id1Updated', name: 'testUpdated' });
+MY_COLLECTION.update('id1', { key: 'id1Updated', name: 'testUpdated' });
 MY_COLLECTION.getGroup('myGroup')?.persist({
   followCollectionPersistKeyPattern: true,
 });
 MY_COLLECTION.onLoad(() => {
   console.log('On Load MY_COLLECTION');
 });
 
+export const externalCreatedItem = new Item(MY_COLLECTION, {
+  key: 'id10',
+  name: 'test',
+}).persist({ followCollectionPersistKeyPattern: true });
+
 console.log('Initial: myCollection ', clone(MY_COLLECTION));
 
 export const MY_EVENT = new Event<{ name: string }>(App, {

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

@@ -3,46 +3,46 @@
 
 
 "@agile-ts/api@file:.yalc/@agile-ts/api":
-  version "0.0.16"
+  version "0.0.18"
   dependencies:
-    "@agile-ts/utils" "^0.0.2"
+    "@agile-ts/utils" "^0.0.4"
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.15"
+  version "0.0.17"
   dependencies:
-    "@agile-ts/logger" "^0.0.2"
-    "@agile-ts/utils" "^0.0.2"
+    "@agile-ts/logger" "^0.0.4"
+    "@agile-ts/utils" "^0.0.4"
 
 "@agile-ts/event@file:.yalc/@agile-ts/event":
-  version "0.0.5"
+  version "0.0.7"
 
-"@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==
+"@agile-ts/logger@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@agile-ts/logger/-/logger-0.0.4.tgz#7f4d82ef8f03b13089af0878c360575c43f0962d"
+  integrity sha512-qm0obAKqJMaPKM+c76gktRXyw3OL1v39AnhMZ0FBGwJqHWU+fLRkCzlQwjaROCr3F1XP01Lc/Ls3efF0WzyEPw==
   dependencies:
-    "@agile-ts/utils" "^0.0.2"
+    "@agile-ts/utils" "^0.0.4"
 
 "@agile-ts/multieditor@file:.yalc/@agile-ts/multieditor":
-  version "0.0.15"
+  version "0.0.17"
 
-"@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@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@agile-ts/proxytree/-/proxytree-0.0.3.tgz#e3dacab123a311f2f0d4a0369793fe90fdab7569"
+  integrity sha512-auO6trCo7ivLJYuLjxrnK4xuUTangVPTq8UuOMTlGbJFjmb8PLEkaXuRoVGSzv9jsT2FeS7KsP7Fs+yvv0WPdg==
 
 "@agile-ts/proxytree@file:.yalc/@agile-ts/proxytree":
-  version "0.0.1"
+  version "0.0.3"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.0.16"
+  version "0.0.18"
   dependencies:
-    "@agile-ts/proxytree" "^0.0.2"
+    "@agile-ts/proxytree" "^0.0.3"
 
-"@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==
+"@agile-ts/utils@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.4.tgz#66e9536e561796489a37155da6b74ce2dc482697"
+  integrity sha512-GiZyTYmCm4j2N57oDjeMuPpfQdgn9clb0Cxpfuwi2Bq5T/KPXlaROLsVGwHLjwwT+NX7xxr5qNJH8pZTnHnYRQ==
 
 "@babel/code-frame@7.8.3":
   version "7.8.3"

examples/vue/develop/my-project/src/core.js

@@ -1,4 +1,4 @@
-import { Agile, Logger } from '@agile-ts/core';
+import { Agile, Logger, globalBind } from '@agile-ts/core';
 import vueIntegration from '@agile-ts/vue';
 
 // Create Agile Instance
@@ -7,9 +7,14 @@ export const App = new Agile({
 }).integrate(vueIntegration);
 
 // Create State
-export const MY_STATE = App.createState('Hello World');
+export const MY_STATE = App.createState('Hello World', { key: 'my-state' });
 
 // Create Collection
 export const TODOS = App.createCollection({
   initialData: [{ id: 1, name: 'Clean Bathroom' }],
+  selectors: [1],
 }).persist('todos');
+
+// TODOS.collect({ id: 2, name: 'jeff' });
+
+globalBind('__core__', { App, MY_STATE, TODOS });

examples/vue/develop/my-project/yarn.lock

@@ -3,25 +3,25 @@
 
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.16"
+  version "0.0.17"
   dependencies:
-    "@agile-ts/logger" "^0.0.3"
-    "@agile-ts/utils" "^0.0.3"
+    "@agile-ts/logger" "^0.0.4"
+    "@agile-ts/utils" "^0.0.4"
 
-"@agile-ts/logger@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@agile-ts/logger/-/logger-0.0.3.tgz#21f460bab99b5a1f50fbe6be95e1e9ed471ef456"
-  integrity sha512-8yejNCB7LXJ334smxovGaBWoqyXIUTHHO0/l2jPJt7WiMag0337KWbo1jyx6D8IkDioI9lunsN2U4CIBsRRhYA==
+"@agile-ts/logger@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@agile-ts/logger/-/logger-0.0.4.tgz#7f4d82ef8f03b13089af0878c360575c43f0962d"
+  integrity sha512-qm0obAKqJMaPKM+c76gktRXyw3OL1v39AnhMZ0FBGwJqHWU+fLRkCzlQwjaROCr3F1XP01Lc/Ls3efF0WzyEPw==
   dependencies:
-    "@agile-ts/utils" "^0.0.3"
+    "@agile-ts/utils" "^0.0.4"
 
-"@agile-ts/utils@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.3.tgz#f0e99d9ed9b21744f31effd99f7f7f32d26e3aec"
-  integrity sha512-h/gbPRRnFYxpIH4D0F/+6gVcZoZ2YPreT+cl8TCysjkjR6XnZ4YgC7patHIopX7ZvR97IMiu+BtpmS1UDbOftg==
+"@agile-ts/utils@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.4.tgz#66e9536e561796489a37155da6b74ce2dc482697"
+  integrity sha512-GiZyTYmCm4j2N57oDjeMuPpfQdgn9clb0Cxpfuwi2Bq5T/KPXlaROLsVGwHLjwwT+NX7xxr5qNJH8pZTnHnYRQ==
 
 "@agile-ts/vue@file:.yalc/@agile-ts/vue":
-  version "0.0.4"
+  version "0.0.5"
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13":
   version "7.12.13"

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

@@ -138,6 +138,14 @@ export class CollectionPersistent<
       if (defaultGroup.persistent?.ready)
         await defaultGroup.persistent.initialLoading();
 
+      // TODO rebuild the default Group once at the end when all Items were loaded into the Collection
+      //  because otherwise it rebuilds the Group for each loaded Item
+      //  (-> warnings are printed for all not yet loaded Items when rebuilding the Group)
+      //  or rethink the whole Group rebuild process by adding a 'addItem()', 'removeItem()' and 'updateItem()' function
+      //  so that there is no need for rebuilding the whole Group when for example only Item B changed or Item C was added
+      //
+      //  See Issue by starting the vue develop example app and adding some todos to the _todo_ list
+
       // Persist Items found in the default Group's value
       for (const itemKey of defaultGroup._value) {
         const item = this.collection().getItem(itemKey);
@@ -170,11 +178,11 @@ export class CollectionPersistent<
           if (dummyItem?.persistent?.ready) {
             const loadedPersistedValueIntoItem = await dummyItem.persistent.loadPersistedValue(
               itemStorageKey
-            );
+            ); // TODO FIRST GROUP REBUILD (by assigning loaded value to Item)
 
             // If successfully loaded Item value, assign Item to Collection
             if (loadedPersistedValueIntoItem)
-              this.collection().assignItem(dummyItem);
+              this.collection().assignItem(dummyItem); // TODO SECOND GROUP REBUILD (by calling rebuildGroupThatInclude() in the assignItem() method)
           }
         }
       }

packages/core/src/collection/index.ts

@@ -85,17 +85,20 @@ export class Collection<DataType extends Object = DefaultItem> {
     this.initGroups(_config.groups as any);
     this.initSelectors(_config.selectors as any);
 
-    if (_config.initialData) this.collect(_config.initialData);
-
     this.isInstantiated = true;
 
+    // Add 'initialData' to Collection
+    // (after 'isInstantiated' to add them properly to the Collection)
+    if (_config.initialData) this.collect(_config.initialData);
+
     // Reselect Selector Items
     // Necessary because the selection of an Item
-    // hasn't worked with a not 'instantiated' Collection before
+    // hasn't worked with a not correctly 'instantiated' Collection before
     for (const key in this.selectors) this.selectors[key].reselect();
 
     // Rebuild of Groups
     // Not necessary because if Items are added to the Collection,
+    // (after 'isInstantiated = true')
     // the Groups which contain these added Items are rebuilt.
     // for (const key in this.groups) this.groups[key].rebuild();
   }
@@ -1486,12 +1489,12 @@ export type ItemKey = string | number;
 
 export interface CreateCollectionConfigInterface<DataType = DefaultItem> {
   /**
-   * Initial Groups of Collection.
+   * Initial Groups of the Collection.
    * @default []
    */
   groups?: { [key: string]: Group<any> } | string[];
   /**
-   * Initial Selectors of Collection
+   * Initial Selectors of the Collection
    * @default []
    */
   selectors?: { [key: string]: Selector<any> } | string[];

packages/core/src/computed/index.ts

@@ -153,7 +153,7 @@ export class Computed<ComputedValueType = any> extends State<
         newDeps.push(observer);
 
         // Make this Observer depend on the found dep Observers
-        observer.depend(this.observer);
+        observer.addDependent(this.observer);
       });
 
       this.deps = newDeps;