fixed cycle deps

Author: bennobuilder

.gitignore

@@ -13,7 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 .eslintcache
 package-lock.json
-yarn.lock
 
 # Editor directories and files
 .idea

examples/react/develop/fields/src/App.js

@@ -52,7 +52,8 @@ export default function App() {
             id: FIELDS.size,
             name: `Field #${FIELDS.size + 1}`,
           });
-        }}>
+        }}
+      >
         Add Field
       </button>
     </div>

examples/react/develop/simple-todo-list/src/App.js

@@ -30,7 +30,8 @@ const App = () => {
             method: 'unshift', // to add todo at the beginning of the Collection
           });
           setCurrentInput('');
-        }}>
+        }}
+      >
         Add
       </button>
       {todos.map((value) => (
@@ -41,7 +42,8 @@ const App = () => {
             onClick={() => {
               // Remove Todo at specific primary Key
               TODOS.remove(value.id).everywhere();
-            }}>
+            }}
+          >
             Remove
           </button>
         </div>

package.json

@@ -41,7 +41,8 @@
     "pack:react": "cd packages/react && yarn run prepare && yarn run pack",
     "pack:multieditor": "cd packages/multieditor && yarn run prepare && yarn run pack",
     "pack:api": "cd packages/api && yarn run prepare && yarn run pack",
-    "pack:event": "cd packages/event && yarn run prepare && yarn run pack"
+    "pack:event": "cd packages/event && yarn run prepare && yarn run pack",
+    "install:clean": "shx rm -rf yarn.lock && shx rm -rf node_modules && yarn install && lerna run install:clean"
   },
   "repository": {
     "type": "git",

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

@@ -1,7 +1,7 @@
 import { defineConfig } from '@agile-ts/utils';
 import { logCodeManager } from '../logCodeManager';
 import { Collection, CollectionKey, DefaultItem, ItemKey } from './collection';
-import { Group, GroupKey } from './group';
+import type { Group, GroupKey } from './group';
 import {
   CreatePersistentConfigInterface,
   getSharedStorageManager,
@@ -137,9 +137,8 @@ export class CollectionPersistent<
         // that it was loaded completely.
         // After a successful loading assign the now valid Item to the Collection.
         else {
-          const placeholderItem = this.collection().getItemWithReference(
-            itemKey
-          );
+          const placeholderItem =
+            this.collection().getItemWithReference(itemKey);
           placeholderItem?.persist({
             key: itemStorageKey,
             loadValue: false,
@@ -148,7 +147,8 @@ export class CollectionPersistent<
             followCollectionPersistKeyPattern: false, // Because of the dynamic 'storageItemKey', the key is already formatted above
           });
           if (placeholderItem?.persistent?.ready) {
-            const loadedPersistedValueIntoItem = await placeholderItem.persistent.loadPersistedValue();
+            const loadedPersistedValueIntoItem =
+              await placeholderItem.persistent.loadPersistedValue();
 
             // If successfully loaded Item value, assign Item to Collection
             if (loadedPersistedValueIntoItem) {

packages/core/src/collection/collection.ts

@@ -7,9 +7,9 @@ import {
   normalizeArray,
 } from '@agile-ts/utils';
 import { logCodeManager } from '../logCodeManager';
-import { Agile } from '../agile';
+import type { Agile } from '../agile';
 import { PatchOptionConfigInterface } from '../state';
-import { ComputedTracker } from '../computed';
+import { ComputedTracker } from '../computed/computed.tracker'; // Not imported directly from '../computed' due circular dependencies
 import { Item } from './item';
 import { SelectorConfigInterface, Selector, SelectorKey } from './selector';
 import {
@@ -1181,9 +1181,7 @@ export class Collection<DataType extends DefaultItem = DefaultItem> {
    * @public
    * @param itemKeys - Item/s with identifier/s to be removed.
    */
-  public remove(
-    itemKeys: ItemKey | Array<ItemKey>
-  ): {
+  public remove(itemKeys: ItemKey | Array<ItemKey>): {
     fromGroups: (groups: Array<ItemKey> | ItemKey) => Collection<DataType>;
     everywhere: (config?: RemoveItemsConfigInterface) => Collection<DataType>;
   } {
@@ -1518,13 +1516,12 @@ export interface CreateCollectionConfigImpl<
   initialData?: Array<DataType>;
 }
 
-export type CreateCollectionConfig<
-  DataType extends DefaultItem = DefaultItem
-> =
-  | CreateCollectionConfigImpl<DataType>
-  | ((
-      collection: Collection<DataType>
-    ) => CreateCollectionConfigImpl<DataType>);
+export type CreateCollectionConfig<DataType extends DefaultItem = DefaultItem> =
+
+    | CreateCollectionConfigImpl<DataType>
+    | ((
+        collection: Collection<DataType>
+      ) => CreateCollectionConfigImpl<DataType>);
 
 export interface CollectionConfigInterface {
   /**
@@ -1542,8 +1539,9 @@ export interface CollectionConfigInterface {
   defaultGroupKey: ItemKey;
 }
 
-export interface CollectConfigInterface<DataType = any>
-  extends AssignDataConfigInterface {
+export interface CollectConfigInterface<
+  DataType extends DefaultItem = DefaultItem
+> extends AssignDataConfigInterface {
   /**
    * In which way the collected data should be added to the Collection.
    * - 'push' =  at the end

packages/core/src/collection/group/group.observer.ts

@@ -6,7 +6,7 @@ import {
   Observer,
   RuntimeJob,
 } from '../../runtime';
-import { Group } from './index';
+import type { Group } from './index';
 import { DefaultItem } from '../collection';
 import { logCodeManager } from '../../logCodeManager';
 

packages/core/src/collection/group/index.ts

@@ -7,10 +7,10 @@ import {
   StateObserver,
   StateObserversInterface,
 } from '../../state';
-import { Collection, DefaultItem, ItemKey } from '../collection';
+import type { Collection, DefaultItem, ItemKey } from '../collection';
 import { GroupIngestConfigInterface, GroupObserver } from './group.observer';
-import { ComputedTracker } from '../../computed';
-import { Item } from '../item';
+import { ComputedTracker } from '../../computed/computed.tracker'; // Not imported directly from '../computed' due circular dependencies
+import type { Item } from '../item';
 import { CollectionPersistent } from '../collection.persistent';
 
 export class Group<
@@ -432,8 +432,10 @@ export class Group<
 
 export type GroupKey = string | number;
 
-export interface GroupObservers<ValueType = any, DataType = any>
-  extends StateObserversInterface<ValueType> {
+export interface GroupObservers<
+  ValueType = any,
+  DataType extends DefaultItem = any
+> extends StateObserversInterface<ValueType> {
   /**
    * Observer responsible for the output of the Group.
    */

packages/core/src/collection/item/index.ts

@@ -5,8 +5,8 @@ import {
   StateKey,
   StateRuntimeJobConfigInterface,
 } from '../../state';
-import { Collection, DefaultItem } from '../collection';
-import { SelectorKey } from '../selector';
+import type { Collection, DefaultItem } from '../collection';
+import type { SelectorKey } from '../selector';
 import { CollectionPersistent } from '../collection.persistent';
 
 export class Item<

packages/core/src/collection/public/createCollection.ts

@@ -1,5 +1,5 @@
 import { Collection, CreateCollectionConfig, DefaultItem } from '../collection';
-import { Agile } from '../../agile';
+import type { Agile } from '../../agile';
 import { shared } from '../../shared';
 
 /**

packages/core/src/collection/selector/index.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@agile-ts/utils';
 import { EnhancedState, StateRuntimeJobConfigInterface } from '../../state';
-import { Item } from '../item';
-import { Collection, DefaultItem, ItemKey } from '../collection';
+import type { Item } from '../item';
+import type { Collection, DefaultItem, ItemKey } from '../collection';
 
 export class Selector<
   DataType extends DefaultItem = DefaultItem

packages/core/src/computed/computed.tracker.ts

@@ -1,4 +1,4 @@
-import { Observer } from '../runtime';
+import type { Observer } from '../runtime';
 
 export class ComputedTracker {
   static isTracking = false;

packages/core/src/computed/computed.ts

@@ -1,22 +1,23 @@
 import { defineConfig, isAsyncFunction } from '@agile-ts/utils';
-import { Agile } from '../agile';
+import type { Agile } from '../agile';
 import { extractRelevantObservers } from '../utils';
 import {
   State,
   StateConfigInterface,
   StateIngestConfigInterface,
 } from '../state';
-import { Observer } from '../runtime';
+import type { Observer } from '../runtime';
 import { ComputedTracker } from './computed.tracker';
-import { Collection } from '../collection';
+import type { Collection } from '../collection';
+import { logCodeManager } from '../logCodeManager';
 
 export class Computed<
   ComputedValueType = any
 > extends State<ComputedValueType> {
   public config: ComputedConfigInterface;
 
   // Caches whether the compute function is async
-  private computeFunctionIsAsync!: boolean;
+  private isComuteFunctionAsync!: boolean;
 
   // Function to compute the Computed Class value
   private _computeFunction!: ComputeFunctionType<ComputedValueType>;
@@ -54,6 +55,7 @@ export class Computed<
   ) {
     super(
       agileInstance,
+      // Assign inital value (if property set or not async)
       Object.prototype.hasOwnProperty.call(config, 'initialValue')
         ? config.initialValue
         : !isAsyncFunction(computeFunction)
@@ -68,7 +70,7 @@ export class Computed<
 
     config = defineConfig(config, {
       computedDeps: [],
-      autodetect: !this.computeFunctionIsAsync,
+      autodetect: !this.isComuteFunctionAsync,
     });
     this.agileInstance = () => agileInstance;
     this.config = {
@@ -109,14 +111,14 @@ export class Computed<
    */
   public set computeFunction(value: ComputeFunctionType<ComputedValueType>) {
     this._computeFunction = value;
-    this.computeFunctionIsAsync = isAsyncFunction(value);
+    this.isComuteFunctionAsync = isAsyncFunction(value);
   }
 
   /**
    * Synchronously computes and returns the new value of the Computed Class
    * and autodetects used dependencies in the compute function.
    *
-   * @public
+   * @internal
    * @param config - Configuration object
    */
   private computeSync(config: ComputeConfigInterface = {}): ComputedValueType {
@@ -160,6 +162,9 @@ export class Computed<
 
   /**
    * Asynchronously computes and returns the new value of the Computed Class.
+   * !! Since its async it can't autodetect used dependencies in the compute function.
+   *
+   * @internal
    */
   private async computeAsync(): Promise<ComputedValueType> {
     return this.computeFunction();
@@ -175,26 +180,12 @@ export class Computed<
   public async compute(
     config: ComputeConfigInterface = {}
   ): Promise<ComputedValueType> {
-    if (this.computeFunctionIsAsync) return this.computeAsync();
-    else return this.computeSync(config);
-  }
-
-  /**
-   * Forces a recomputation of the cached value with the compute function.
-   *
-   * [Learn more..](https://agile-ts.org/docs/core/computed/methods/#recompute)
-   *
-   * @public
-   * @param config - Configuration object
-   */
-  public recompute(config: RecomputeConfigInterface = {}): this {
-    config = defineConfig(config, {
-      autodetect: false,
-    });
-
-    this.computeAndIngest(config);
-
-    return this;
+    if (config.autodetect && this.isComuteFunctionAsync) {
+      logCodeManager.log('19:00:01');
+    }
+    return this.isComuteFunctionAsync
+      ? this.computeAsync()
+      : this.computeSync(config);
   }
 
   /**
@@ -207,7 +198,7 @@ export class Computed<
     // https://www.reddit.com/r/learnjavascript/comments/q5rvux/pass_parent_config_object_directly_into_child/
     config: StateIngestConfigInterface & ComputeConfigInterface = {}
   ) {
-    if (this.computeFunctionIsAsync) {
+    if (this.isComuteFunctionAsync) {
       this.computeAsync().then((result) => {
         this.observers['value'].ingestValue(result, config);
       });
@@ -217,6 +208,24 @@ export class Computed<
     }
   }
 
+  /**
+   * Forces a recomputation of the cached value with the compute function.
+   *
+   * [Learn more..](https://agile-ts.org/docs/core/computed/methods/#recompute)
+   *
+   * @public
+   * @param config - Configuration object
+   */
+  public recompute(config: RecomputeConfigInterface = {}): this {
+    config = defineConfig(config, {
+      autodetect: false,
+    });
+
+    this.computeAndIngest(config);
+
+    return this;
+  }
+
   /**
    * Assigns a new function to the Computed Class for computing its value.
    *

packages/core/src/computed/public/createComputed.ts

@@ -5,7 +5,7 @@ import {
 } from '../computed';
 import { defineConfig } from '@agile-ts/utils';
 import { shared } from '../../shared';
-import { CreateComputedConfigInterfaceWithAgile } from './index';
+import { CreateComputedConfigInterfaceWithAgile } from './types';
 
 /**
  * Returns a newly created Computed.

packages/core/src/computed/public/index.ts

@@ -1,8 +1 @@
-import { CreateAgileSubInstanceInterface } from '../../shared';
-import { CreateComputedConfigInterface } from '../computed';
-
 export * from './createComputed';
-
-export interface CreateComputedConfigInterfaceWithAgile
-  extends CreateAgileSubInstanceInterface,
-    CreateComputedConfigInterface {}

packages/core/src/computed/public/types.ts

@@ -0,0 +1,6 @@
+import { CreateAgileSubInstanceInterface } from '../../shared';
+import { CreateComputedConfigInterface } from '../computed';
+
+export interface CreateComputedConfigInterfaceWithAgile
+  extends CreateAgileSubInstanceInterface,
+    CreateComputedConfigInterface {}

packages/core/src/integrations/integration.ts

@@ -1,4 +1,4 @@
-import { Agile } from '../agile';
+import type { Agile } from '../agile';
 
 export class Integration<F = any, C = any> {
   // Key/Name identifier of the Integration

packages/core/src/integrations/integrations.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from '@agile-ts/utils';
 import { logCodeManager } from '../logCodeManager';
-import { Agile } from '../agile';
+import type { Agile } from '../agile';
 import { Integration } from './integration';
 
 const onRegisterInitialIntegrationCallbacks: ((

packages/core/src/logCodeManager.ts

@@ -102,6 +102,7 @@ const logCodeMessages = {
   '18:03:00': "Failed to integrate Framework '${0}' into AgileTs '${1}'!",
 
   // Computed
+  '19:00:01': `Can't autodetect dependencies of async compute function!`,
 
   // Collection Persistent
   '1A:02:00': 'Failed to build unique Item StorageKey!',